switch to sass and split global styles, rework heading css

src/lib/Heading.svelte

@@ -5,49 +5,52 @@
     const tag = `h${level}`;
 </script>
 
-<style>
-    a {
-        /* Works better to set the size here for line-height reasons */
-        font-size: 0.9em;
-        /* color: hsl(0, 0%, 25%); */
-        color: var(--accent-color);
+<style lang="scss">
+
+    .before {
+        padding-right: 0.25em;
+        margin-left: -1.25em;
+
+        @media(max-width: 58rem) {
+            display: none;
+        }
     }
 
-    a:hover {
-        border-bottom: 0.05em solid currentcolor;
+    .after {
+        display: none;
+
+        @media(max-width: 58rem) {
+            display: revert;
+        }
+    }
+
+    a {
+        /* works better to set the size here for line-height reasons */
+        font-size: 0.9em;
+
+        /* give the anchor link a faded appearance by default */
+        color: hsl(0deg, 0%, 29%);
+        opacity: 40%;
+        transition: opacity 150ms, color 150ms;
+
+        &:hover {
+            border-bottom: 0.05em solid currentcolor;
+        }
+    }
+
+    /* emphasize anchor link when heading is hovered or when clicked (the latter for mobile) */
+    .h:hover a, .before:hover a, .h a:active {
+        color: var(--accent-color);
+        opacity: 100%;
     }
 
     svg {
+        /* undo the reset that makes svg's block */
+        display: inline;
         width: 1em;
         /* tiny tweak for optical alignment */
         transform: translateY(2px);
     }
-
-    .before {
-        display: none;
-        padding-right: 0.25em;
-        margin-left: -1.25em;
-    }
-    
-    @media(min-width: 58rem) {
-        .before {
-            display: inline;
-            opacity: 0;
-            transition: opacity 150ms;
-        }
-
-        .h:hover .before, .before:hover {
-            opacity: 1;
-        }
-
-        .after {
-            display: none;
-        }
-
-        .h:hover {
-            cursor: default;
-        }
-    }
 </style>
 
 <svelte:element this={tag} {id} class="h">

src/lib/Post.svelte

@@ -1,4 +1,6 @@
 <script context="module">
+    import '$styles/prose.scss';
+
     import { onMount } from 'svelte';
     import { formatDate } from './datefmt.js';
     import { makeSlug } from '$lib/utils.js';