add mono font and rework codeblock css

src/lib/Heading.svelte

@@ -6,7 +6,6 @@
 </script>
 
 <style lang="scss">
-
     .h {
         position: relative;
     }
@@ -45,7 +44,7 @@
     }
 
     svg {
-        /* undo the reset that makes svg's block */
+        /* undo the reset that makes images block */
         display: inline;
         width: 1em;
         /* tiny tweak for optical alignment */

src/lib/Post.svelte

@@ -1,5 +1,6 @@
 <script context="module">
     import '$styles/prose.scss';
+    import '$styles/code.scss';
 
     import { onMount } from 'svelte';
     import { formatDate } from './datefmt.js';
@@ -23,21 +24,23 @@
 
 <style>
     .page {
+        /* 3-column grid: left gutter, center content, and right gutter */
         display: grid;
         grid-template-columns: minmax(0, 1fr) minmax(0, var(--content-width)) minmax(0, 1fr);
-
+        /* a bit of breathing room for narrow screens */
         padding: 0 0.5rem;
     }
 
+    /* container for the table of contents */
+    .left-gutter {
+        grid-column: 1 / 2;
+        justify-self: end;
+    }
+
     .title {
         grid-column: 2 / 3;
     }
 
-    .left-gutter {
-        grid-column: 1 / 2;
-        justify-self: end;
-    }
-
     .subtitle {
         font-size: 0.9em;
         font-style: italic;
@@ -100,7 +103,6 @@
     <meta property="og:url" content="https://blog.jfmonty2.com/{slug}">
     <meta property="og:description" content={description}>
     <meta property="og:site_name" content="Joe's Blog">
-    <link rel="stylesheet" href="/prism-dracula.css" />
 </svelte:head>
 
 <div class="page">

src/styles/code.scss

@@ -0,0 +1,23 @@
+@import 'prism-dracula';
+
+
+@font-face {
+    font-family: 'Hack';
+    font-style: normal;
+    font-weight: 400;
+    src: url(/Hack-Regular.woff2) format('woff2');
+    font-display: block;
+}
+
+code {
+    padding: 0.05rem 0.2rem 0.1rem;
+    background: #eee;
+    border-radius: 0.2rem;
+    font-size: 0.75em;
+    font-family: 'Hack', monospace;
+}
+
+pre > code[class*="language-"] {
+    font-size: 0.75em;
+    font-family: 'Hack', monospace;
+}

src/styles/main.scss

@@ -9,14 +9,6 @@
     font-display: block;
 }
 
-@font-face {
-    font-family: 'Baskerville';
-    font-style: normal;
-    font-weight: 400;
-    src: url(/Baskerville-Regular.woff2) format('woff2');
-    font-display: block;
-}
-
 :root {
     --content-size: 1.25rem;
     --content-line-height: 1.3;

src/styles/prism-dracula.css

@@ -0,0 +1,121 @@
+/**
+ * Dracula Theme originally by Zeno Rocha [@zenorocha]
+ * https://draculatheme.com/
+ *
+ * Ported for PrismJS by Albert Vallverdu [@byverdu]
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+	color: #f8f8f2;
+	background: none;
+	text-shadow: 0 1px rgba(0, 0, 0, 0.3);
+	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	word-wrap: normal;
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+	padding: 1em;
+	margin: 1em 0;
+	overflow: auto;
+	border-radius: 0.3em;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+	background: #282a36;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+	padding: .1em;
+	border-radius: .3em;
+	white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: #6272a4;
+}
+
+.token.punctuation {
+	color: #f8f8f2;
+}
+
+.namespace {
+	opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.constant,
+.token.symbol,
+.token.deleted {
+	color: #ff79c6;
+}
+
+.token.boolean,
+.token.number {
+	color: #bd93f9;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+	color: #50fa7b;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string,
+.token.variable {
+	color: #f8f8f2;
+}
+
+.token.atrule,
+.token.attr-value,
+.token.function,
+.token.class-name {
+	color: #f1fa8c;
+}
+
+.token.keyword {
+	color: #8be9fd;
+}
+
+.token.regex,
+.token.important {
+	color: #ffb86c;
+}
+
+.token.important,
+.token.bold {
+	font-weight: bold;
+}
+
+.token.italic {
+	font-style: italic;
+}
+
+.token.entity {
+	cursor: help;
+}

src/styles/prose.scss

@@ -1,3 +1,11 @@
+@font-face {
+    font-family: 'Baskerville';
+    font-style: normal;
+    font-weight: 400;
+    src: url(/Baskerville-Regular.woff2) format('woff2');
+    font-display: block;
+}
+
 h1, h2, h3, h4, h5, h6 {
     font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Ubuntu, Arial, sans-serif;
     font-weight: 600;
@@ -29,16 +37,3 @@ h1, h2, h3, h4 {
 p {
     margin-bottom: 0.8em;
 }
-
-code {
-    background: #eee;
-    border-radius: 0.2rem;
-    font-family: Consolas, monospace;
-    font-size: 0.75em;
-    padding: 0.05rem 0.2rem 0.1rem;
-}
-
-pre > code[class*="language-"] {
-    font-size: 1rem;
-    font-family: 'Consolas', monospace;
-}