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/notes/List.module.css

@@ -1,13 +1,13 @@
 .section {
   margin: 2.4em 0;
+}
 
-  &:first-of-type {
-    margin-top: 0;
-  }
+.section:first-of-type {
+  margin-top: 0;
+}
 
-  &:last-of-type {
-    margin-bottom: 0;
-  }
+.section:last-of-type {
+  margin-bottom: 0;
 }
 
 .year {
@@ -26,10 +26,10 @@
   display: flex;
   line-height: 1.75;
   margin-bottom: 1em;
+}
 
-  &:last-of-type {
-    margin-bottom: 0;
-  }
+.row:last-of-type {
+  margin-bottom: 0;
 }
 
 .date {

components/notes/List.tsx

@@ -2,7 +2,7 @@ import Link from "next/link";
 import Markdown from "markdown-to-jsx";
 import { format } from "date-fns";
 
-import styles from "./List.module.scss";
+import styles from "./List.module.css";
 
 type NoteProps = {
   title: string;

components/notes/Meta.module.css

@@ -0,0 +1,76 @@
+.meta {
+  display: flex;
+  flex-wrap: wrap;
+  font-size: 0.825em;
+  line-height: 2.3;
+  letter-spacing: 0.04em;
+  color: var(--medium);
+}
+
+.meta a {
+  color: inherit;
+  background: none;
+  padding-bottom: 0;
+}
+
+.meta > div {
+  display: inline-flex;
+  margin-right: 1.6em;
+  white-space: nowrap;
+}
+
+.meta > div:last-of-type {
+  margin-right: 0;
+}
+
+.icon {
+  margin-right: 0.6em;
+}
+
+.date a,
+.edit a {
+  display: inline-flex;
+}
+
+.tags {
+  white-space: normal;
+  display: inline-flex;
+  flex-wrap: wrap;
+}
+
+.tags .tag {
+  text-transform: lowercase;
+  white-space: nowrap;
+  margin-right: 0.75em;
+}
+
+.tags .tag::before {
+  content: "#"; /* cosmetically hashtagify tags */
+  padding-right: 0.125em;
+  color: var(--light);
+}
+
+.tags .tag:last-of-type {
+  margin-right: 0;
+}
+
+.title {
+  margin: 0.3em 0 0.5em -0.03em;
+  font-size: 2.1em;
+  line-height: 1.3;
+  font-weight: 700;
+}
+
+.title a {
+  background: none;
+  padding-bottom: 0;
+  color: inherit;
+}
+
+.title code {
+  font-size: 1em;
+  background: none !important;
+  border: 0 !important;
+  margin: 0 0.075em !important;
+  padding: 0 !important;
+}

components/notes/Meta.module.scss

@@ -1,78 +0,0 @@
-.meta {
-  display: flex;
-  flex-wrap: wrap;
-  font-size: 0.825em;
-  line-height: 2.3;
-  letter-spacing: 0.04em;
-  color: var(--medium);
-
-  a {
-    color: inherit;
-    background: none;
-    padding-bottom: 0;
-  }
-
-  > div {
-    display: inline-flex;
-    margin-right: 1.6em;
-    white-space: nowrap;
-
-    &:last-of-type {
-      margin-right: 0;
-    }
-  }
-}
-
-.icon {
-  margin-right: 0.6em;
-}
-
-.date,
-.edit {
-  a {
-    display: inline-flex;
-  }
-}
-
-.tags {
-  white-space: normal;
-  display: inline-flex;
-  flex-wrap: wrap;
-
-  .tag {
-    text-transform: lowercase;
-    white-space: nowrap;
-    margin-right: 0.75em;
-
-    &::before {
-      content: "#"; // cosmetically hashtagify tags
-      padding-right: 0.125em;
-      color: var(--light);
-    }
-
-    &:last-of-type {
-      margin-right: 0;
-    }
-  }
-}
-
-.title {
-  margin: 0.3em 0 0.5em -0.03em; // TODO: why is this indented slightly?
-  font-size: 2.1em;
-  line-height: 1.3;
-  font-weight: 700;
-
-  a {
-    background: none;
-    padding-bottom: 0;
-    color: inherit;
-  }
-
-  code {
-    font-size: 1em;
-    background: none !important;
-    border: 0 !important;
-    margin: 0 0.075em !important;
-    padding: 0 !important;
-  }
-}

components/notes/Meta.tsx

@@ -5,7 +5,7 @@ import Hits from "../hits/Hits";
 import { DateIcon, TagIcon, EditIcon, ViewsIcon } from "../icons";
 import * as config from "../../lib/config";
 
-import styles from "./Meta.module.scss";
+import styles from "./Meta.module.css";
 
 export type Props = {
   title: string;