add mono font and rework codeblock css

src/lib/Heading.svelte

@@ -6,12 +6,12 @@
 </script>
 
 <style lang="scss">
-
     .h {
         position: relative;
     }
 
-    .before {
+    /* shift the anchor link to hang off the left side of the content when there's room */
+    .anchor-wrapper {
         /* slightly overlap the span with the heading so that it doesn't
         lose its hover state as the cursor moves between them */
         position: absolute;
@@ -19,15 +19,7 @@
         left: -1.25em;
 
         @media(max-width: 58rem) {
-            display: none;
+            position: revert;
-        }
-    }
-
-    .after {
-        display: none;
-
-        @media(max-width: 58rem) {
-            display: revert;
         }
     }
 
@@ -46,13 +38,13 @@
     }
 
     /* emphasize anchor link when heading is hovered or when clicked (the latter for mobile) */
-    .h:hover a, .before:hover a, .h a:active {
+    .h:hover a, .anchor-wrapper:hover a, .h a:active {
         color: var(--accent-color);
         opacity: 100%;
     }
 
     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 */
@@ -61,22 +53,16 @@
 </style>
 
 <svelte:element this={tag} {id} class="h">
-    <span class="before">
-        <a href="#{id}">
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244" />
-            </svg>
-        </a>
-    </span>
-
     <span>
         <slot></slot>
     </span>
 
     <!-- Icon from https://heroicons.com/ -->
-    <a href="#{id}" class="after">
+    <span class="anchor-wrapper">
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+        <a href="#{id}" >
-          <path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244" />
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
-        </svg>
+              <path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244" />
-    </a>
+            </svg>
+        </a>
+    </span>
 </svelte:element>

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/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;
-}

static/style.css

@@ -1,87 +0,0 @@
-/* ### TYPOGRAPHY ### */
-@font-face {
-    font-family: 'Tajawal';
-    font-style: normal;
-    font-weight: 400;
-    src: url(/Tajawal-Regular.woff2) format('woff2');
-    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;
-    --content-color: #1e1e1e;
-    --content-color-faded: #555;
-    --accent-color: #8c0606;
-}
-
-html {
-    font-family: 'Tajawal', sans-serif;
-    font-size: var(--content-size);
-    line-height: var(--content-line-height);
-    letter-spacing: -0.005em;
-    color: var(--content-color);
-    box-sizing: border-box;
-}
-
-body {
-    margin: 0;
-    --content-width: 42rem;
-}
-
-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;
-    color: #464646;
-}
-
-h1 {
-    font-variant:  petite-caps;
-    margin-top: 0.75rem;
-}
-
-h1, h2 {
-    margin-bottom: 0.75rem;
-}
-
-h3 {
-    font-size: 1.2rem;
-}
-
-h4 {
-    font-size: 1.1rem;
-}
-
-h3, h4 {
-    margin-bottom:  0.5rem;
-}
-
-h5, h6 {
-    font-size: 1rem;
-    margin-bottom:  0;
-}
-
-p {
-    margin-top: 0;
-    margin-bottom: 1rem;
-}
-
-code {
-  background: #eee;
-  border-radius: 0.2rem;
-  font-family: Consolas, monospace;
-  font-size: 0.8em;
-  padding: 0.05rem 0.2rem 0.1rem;
-}
-
-pre > code {
-    font-size: 0.8rem;
-}