chore: minify CSS using Webpack

public/css/index.css

@@ -1,3 +1,4 @@
+@import "prismjs/themes/prism-okaidia.min.css";
 /* Defaults */
 :root {
   --font-family: Century Gothic,Avant Garde,Avenir,TeXGyreAdventorRegular,Verdana,sans-serif;
@@ -63,7 +64,6 @@ main {
 }
 
 .right-side {
-  position: -webkit-sticky; /* for Safari */
   position: sticky;
   top: 1rem;
   align-self: flex-start;
@@ -142,30 +142,6 @@ table th {
   padding-right: 1em;
 }
 
-pre,
-code {
-  font-family: var(--font-family-monospace);
-}
-pre,
-pre[class*="language-"] {
-  margin: .5em 0;
-  line-height: 1.375; /* 22px /16 */
-  -moz-tab-size: 2;
-  -o-tab-size: 2;
-  tab-size: 2;
-  -webkit-hyphens: none;
-  -ms-hyphens: none;
-  hyphens: none;
-  direction: ltr;
-  text-align: left;
-  white-space: pre;
-  word-spacing: normal;
-  word-break: normal;
-}
-code {
-  word-break: break-all;
-}
-
 hr {
   margin: 4rem 15vw;
 }
@@ -261,12 +237,6 @@ hr {
   padding: 0;
   margin: 2rem 1rem 0 0;
 }
-/*.post-nav ul li.previous {*/
-/*  list-style: '<';*/
-/*}*/
-/*.post-nav ul li.next {*/
-/*  list-style: '>';*/
-/*}*/
 
 /* Direct Links / Markdown Headers */
 .direct-link {
@@ -335,6 +305,52 @@ a[href].direct-link:focus,
   text-align: center;
 }
 
+/*
+ * New diff- syntax
+ */
+
+pre[class*="language-diff-"] {
+  --eleventy-code-padding: 1.25em;
+  padding-left: var(--eleventy-code-padding);
+  padding-right: var(--eleventy-code-padding);
+}
+.token.deleted {
+  background-color: hsl(0, 51%, 37%);
+  color: inherit;
+}
+.token.inserted {
+  background-color: hsl(126, 31%, 39%);
+  color: inherit;
+}
+
+/* Make the + and - characters unselectable for copy/paste */
+.token.prefix.unchanged,
+.token.prefix.inserted,
+.token.prefix.deleted {
+  -webkit-user-select: none;
+  user-select: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding-top: 2px;
+  padding-bottom: 2px;
+}
+.token.prefix.inserted,
+.token.prefix.deleted {
+  width: var(--eleventy-code-padding);
+  background-color: rgba(0,0,0,.2);
+}
+
+/* Optional: full-width background color */
+.token.inserted:not(.prefix),
+.token.deleted:not(.prefix) {
+  display: block;
+  margin-left: calc(-1 * var(--eleventy-code-padding));
+  margin-right: calc(-1 * var(--eleventy-code-padding));
+  text-decoration: none; /* override del, ins, mark defaults */
+  color: inherit; /* override del, ins, mark defaults */
+}
+
 @media only screen and (max-width: 1200px) {
   main {
     max-width: 100%;

public/css/prism-diff.css

@@ -1,45 +0,0 @@
-/*
- * New diff- syntax
- */
-
-pre[class*="language-diff-"] {
-	--eleventy-code-padding: 1.25em;
-	padding-left: var(--eleventy-code-padding);
-	padding-right: var(--eleventy-code-padding);
-}
-.token.deleted {
-	background-color: hsl(0, 51%, 37%);
-	color: inherit;
-}
-.token.inserted {
-	background-color: hsl(126, 31%, 39%);
-	color: inherit;
-}
-
-/* Make the + and - characters unselectable for copy/paste */
-.token.prefix.unchanged,
-.token.prefix.inserted,
-.token.prefix.deleted {
-	-webkit-user-select: none;
-	user-select: none;
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	padding-top: 2px;
-	padding-bottom: 2px;
-}
-.token.prefix.inserted,
-.token.prefix.deleted {
-	width: var(--eleventy-code-padding);
-	background-color: rgba(0,0,0,.2);
-}
-
-/* Optional: full-width background color */
-.token.inserted:not(.prefix),
-.token.deleted:not(.prefix) {
-	display: block;
-	margin-left: calc(-1 * var(--eleventy-code-padding));
-	margin-right: calc(-1 * var(--eleventy-code-padding));
-	text-decoration: none; /* override del, ins, mark defaults */
-	color: inherit; /* override del, ins, mark defaults */
-}