scss ➡️ vanilla css (#727)

* scss isn't worth the technical/mental overhead anymore

* try to translate my old Hugo pygments themes

* update lockfile

* consolidate .hljs classes

components/page-header/Header.tsx

@@ -1,7 +1,7 @@
 import Name from "./Name";
 import Menu from "./Menu";
 
-import styles from "./Header.module.scss";
+import styles from "./Header.module.css";
 
 const Header = () => (
   <header className={styles.header}>

components/page-header/Menu.module.css

@@ -0,0 +1,67 @@
+.menu {
+  list-style: none;
+  display: flex;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+}
+
+.item {
+  margin-left: 1.8em;
+  display: inline-flex;
+}
+
+.item .link {
+  display: inline-flex;
+  align-items: center;
+  color: var(--medium-dark);
+  background: none;
+  padding-bottom: 0;
+}
+
+.item .link:hover {
+  color: var(--link);
+}
+
+.item .icon {
+  width: 1.6em;
+  height: 1.6em;
+}
+
+.item .text {
+  font-size: 0.95em;
+  font-weight: 500;
+  margin-top: 0.125em;
+  margin-left: 0.75em;
+}
+
+.theme_toggle {
+  margin-left: 1.25em;
+}
+
+@media screen and (max-width: 768px) {
+  .menu {
+    max-width: 320px;
+    margin-left: 20px;
+    justify-content: space-between;
+    flex-grow: 1;
+  }
+
+  .item {
+    margin-left: 0;
+  }
+
+  .item .icon {
+    width: 1.8em;
+    height: 1.8em;
+  }
+
+  /* hide text next to emojis on mobile */
+  .item .text {
+    display: none;
+  }
+
+  .theme_toggle {
+    margin-left: -0.3em;
+  }
+}

components/page-header/Menu.module.scss

@@ -1,67 +0,0 @@
-.menu {
-  list-style: none;
-  display: flex;
-  align-items: center;
-  margin: 0;
-  padding: 0;
-}
-
-.item {
-  margin-left: 1.8em;
-  display: inline-flex;
-
-  .link {
-    display: inline-flex;
-    align-items: center;
-    color: var(--medium-dark);
-    background: none;
-    padding-bottom: 0;
-
-    &:hover {
-      color: var(--link);
-    }
-  }
-
-  .icon {
-    width: 1.6em;
-    height: 1.6em;
-  }
-
-  .text {
-    font-size: 0.95em;
-    font-weight: 500;
-    margin-top: 0.125em;
-    margin-left: 0.75em;
-  }
-}
-
-.theme_toggle {
-  margin-left: 1.25em;
-}
-
-@media screen and (max-width: 768px) {
-  .menu {
-    max-width: 320px;
-    margin-left: 20px;
-    justify-content: space-between;
-    flex-grow: 1;
-  }
-
-  .item {
-    margin-left: 0;
-
-    .icon {
-      width: 1.8em;
-      height: 1.8em;
-    }
-
-    // hide text next to emojis on mobile
-    .text {
-      display: none;
-    }
-  }
-
-  .theme_toggle {
-    margin-left: -0.3em;
-  }
-}

components/page-header/Menu.tsx

@@ -2,7 +2,7 @@ import dynamic from "next/dynamic";
 import Link from "next/link";
 import { HomeIcon, NotesIcon, ProjectsIcon, ContactIcon } from "../icons";
 
-import styles from "./Menu.module.scss";
+import styles from "./Menu.module.css";
 
 // ensure the theme toggle isn't evaluated server-side
 const ThemeToggle = dynamic(() => import("./ThemeToggle"), { ssr: false });

components/page-header/Name.module.css

@@ -4,24 +4,24 @@
   color: var(--medium-dark);
   background: none;
   padding-bottom: 0;
+}
 
-  &:hover {
-    color: var(--link);
-
-    .selfie {
-      opacity: 0.9;
-    }
-  }
+.title:hover {
+  color: var(--link);
 }
 
 .selfie {
   width: 50px;
   height: 50px;
+}
 
-  img {
-    border: 1px solid var(--light) !important;
-    border-radius: 50%;
-  }
+.selfie img {
+  border: 1px solid var(--light) !important;
+  border-radius: 50%;
+}
+
+.title:hover .selfie {
+  opacity: 0.9;
 }
 
 .name {

components/page-header/Name.tsx

@@ -3,7 +3,7 @@ import Image from "next/image";
 
 import meJpg from "../../public/static/images/me.jpg";
 
-import styles from "./Name.module.scss";
+import styles from "./Name.module.css";
 
 const Name = () => (
   <Link href="/">