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

@@ -0,0 +1,66 @@
+.content {
+  font-size: 0.9em;
+  line-height: 1.7;
+}
+
+.content blockquote {
+  margin-left: 0;
+  padding-left: 1.5em;
+  border-left: 3px solid var(--link);
+  color: var(--medium-dark);
+}
+
+.content h2,
+.content h3,
+.content h4 {
+  margin-top: 1em;
+  margin-bottom: 0.5em;
+  line-height: 1.5;
+}
+
+/* special bottom border for H2s */
+.content h2 {
+  padding-bottom: 0.25em;
+  border-bottom: 1px solid var(--kinda-light);
+}
+
+.content figure {
+  margin: 1em auto;
+  text-align: center;
+}
+
+.content figure img {
+  height: auto;
+  max-width: 100%;
+}
+
+.content figure figcaption {
+  font-size: 0.9em;
+  line-height: 1.5;
+  margin-top: 0.3em;
+  color: var(--medium);
+}
+
+.content ul,
+.content ol {
+  margin-left: 1.5em;
+  padding-left: 0;
+}
+
+.content li {
+  padding-left: 0.25em;
+}
+
+.content hr {
+  margin: 1.5em auto;
+  height: 2px;
+  border: 0;
+  background-color: var(--light);
+}
+
+@media screen and (max-width: 768px) {
+  .content {
+    font-size: 0.925em;
+    line-height: 1.85;
+  }
+}

components/Content.module.scss

@@ -1,66 +0,0 @@
-.content {
-  font-size: 0.9em;
-  line-height: 1.7;
-
-  blockquote {
-    margin-left: 0;
-    padding-left: 1.5em;
-    border-left: 3px solid var(--link);
-    color: var(--medium-dark);
-  }
-
-  h2,
-  h3,
-  h4 {
-    margin-top: 1em;
-    margin-bottom: 0.5em;
-    line-height: 1.5;
-  }
-
-  // special bottom border for H2s
-  h2 {
-    padding-bottom: 0.25em;
-    border-bottom: 1px solid var(--kinda-light);
-  }
-
-  figure {
-    margin: 1em auto;
-    text-align: center;
-
-    img {
-      height: auto;
-      max-width: 100%;
-    }
-
-    figcaption {
-      font-size: 0.9em;
-      line-height: 1.5;
-      margin-top: 0.3em;
-      color: var(--medium);
-    }
-  }
-
-  ul,
-  ol {
-    margin-left: 1.5em;
-    padding-left: 0;
-
-    li {
-      padding-left: 0.25em;
-    }
-  }
-
-  hr {
-    margin: 1.5em auto;
-    height: 2px;
-    border: 0;
-    background-color: var(--light);
-  }
-}
-
-@media screen and (max-width: 768px) {
-  .content {
-    font-size: 0.925em;
-    line-height: 1.85;
-  }
-}

components/Content.tsx

@@ -1,4 +1,4 @@
-import styles from "./Content.module.scss";
+import styles from "./Content.module.css";
 
 type Props = {
   children: unknown;

components/Layout.tsx

@@ -1,7 +1,7 @@
 import Header from "./page-header/Header";
 import Footer from "./page-footer/Footer";
 
-import styles from "./Layout.module.scss";
+import styles from "./Layout.module.css";
 
 const Layout = ({ children }) => (
   <>

components/clipboard/CopyButton.module.css

@@ -8,18 +8,18 @@
   background-color: var(--background-inner);
   border: 1px solid var(--kinda-light);
   cursor: pointer;
+}
 
-  &:hover {
-    color: var(--link);
-  }
+.copy_button:hover {
+  color: var(--link);
+}
 
-  .octicon {
-    width: 16px;
-    height: 16px;
-    vertical-align: text-bottom;
-  }
+.octicon {
+  width: 16px;
+  height: 16px;
+  vertical-align: text-bottom;
+}
 
-  .octicon-check {
-    color: var(--success);
-  }
+.octicon-check {
+  color: var(--success);
 }

components/clipboard/CopyButton.tsx

@@ -3,7 +3,7 @@ import copy from "copy-to-clipboard";
 import innerText from "react-innertext";
 import { CopyOcticon, CheckOcticon } from "../icons/octicons";
 
-import styles from "./CopyButton.module.scss";
+import styles from "./CopyButton.module.css";
 
 import type { ReactNode } from "react";
 

components/contact/ContactForm.module.css

@@ -0,0 +1,90 @@
+.input {
+  width: 100%;
+  padding: 0.8em;
+  margin: 0.6em 0;
+  border: 2px solid;
+  border-radius: 0.3em;
+  color: var(--text);
+  background-color: var(--super-duper-light);
+  border-color: var(--light);
+}
+
+textarea.input {
+  height: 12em;
+  min-height: 6em;
+  margin-bottom: 0;
+  line-height: 1.5;
+  resize: vertical;
+}
+
+.input:focus {
+  outline: none;
+  border-color: var(--link);
+}
+
+.input.missing {
+  border-color: var(--error);
+}
+
+.markdown_tip {
+  font-size: 0.825em;
+  line-height: 1.75;
+}
+
+.markdown_tip a {
+  background: none;
+  padding-bottom: 0;
+}
+
+.markdown_tip a:first-of-type {
+  font-weight: 500;
+}
+
+.hcaptcha {
+  margin: 1em 0;
+}
+
+.action_row {
+  display: flex;
+  align-items: center;
+  min-height: 3.75em;
+}
+
+.btn_submit {
+  flex-shrink: 0;
+  height: 3.25em;
+  padding: 1em 1.25em;
+  margin-right: 1.5em;
+  border: 0;
+  border-radius: 0.3em;
+  cursor: pointer;
+  user-select: none;
+  color: var(--text);
+  background-color: var(--kinda-light);
+}
+
+.btn_submit:hover {
+  color: var(--super-duper-light);
+  background-color: var(--link);
+}
+
+.btn_submit .send_icon {
+  margin-right: 0.4em;
+}
+
+.result_success,
+.result_error {
+  font-weight: 600;
+}
+
+.result_success {
+  color: var(--success);
+}
+
+.result_error {
+  color: var(--error);
+}
+
+.hidden {
+  display: none !important;
+}

components/contact/ContactForm.module.scss

@@ -1,97 +0,0 @@
-.form {
-  input[type="text"],
-  input[type="email"],
-  select,
-  textarea {
-    width: 100%;
-    padding: 0.8em;
-    margin: 0.6em 0;
-    border: 2px solid;
-    border-radius: 0.3em;
-    color: var(--text);
-    background-color: var(--super-duper-light);
-    border-color: var(--light);
-
-    &:focus {
-      outline: none; // disable browsers' outer border
-      border-color: var(--link);
-    }
-
-    &.missing {
-      border-color: var(--error);
-    }
-  }
-
-  textarea {
-    height: 12em;
-    min-height: 6em;
-    margin-bottom: 0;
-    line-height: 1.5;
-
-    // allow vertical resizing & disable horizontal
-    resize: vertical;
-  }
-}
-
-.markdown_tip {
-  font-size: 0.825em;
-  line-height: 1.75;
-
-  a {
-    background: none;
-    padding-bottom: 0;
-
-    &:first-of-type {
-      font-weight: 500;
-    }
-  }
-}
-
-.hcaptcha {
-  margin: 1em 0;
-}
-
-.action_row {
-  display: flex;
-  align-items: center;
-  min-height: 3.75em;
-}
-
-.btn_submit {
-  flex-shrink: 0;
-  height: 3.25em;
-  padding: 1em 1.25em;
-  margin-right: 1.5em;
-  border: 0;
-  border-radius: 0.3em;
-  cursor: pointer;
-  user-select: none;
-  color: var(--text);
-  background-color: var(--kinda-light);
-
-  &:hover {
-    color: var(--super-duper-light);
-    background-color: var(--link);
-  }
-
-  .send_icon {
-    margin-right: 0.4em;
-  }
-}
-
-.result_success,
-.result_error {
-  font-weight: 600;
-}
-
-.result_success {
-  color: var(--success);
-}
-
-.result_error {
-  color: var(--error);
-}
-
-.hidden {
-  display: none !important;
-}

components/contact/ContactForm.tsx

@@ -9,7 +9,7 @@ import { CheckOcticon, XOcticon } from "../icons/octicons";
 
 import type { FormikHelpers } from "formik";
 
-import styles from "./ContactForm.module.scss";
+import styles from "./ContactForm.module.css";
 const cx = classNames.bind(styles);
 
 type Values = {
@@ -100,14 +100,14 @@ const ContactForm = () => {
       {({ setFieldValue, isSubmitting, touched, errors }) => (
         <Form className={styles.form} name="contact">
           <Field
-            className={cx({ missing: errors.name && touched.name })}
+            className={cx({ input: true, missing: errors.name && touched.name })}
             name="name"
             type="text"
             placeholder="Name"
             disabled={success}
           />
           <Field
-            className={cx({ missing: errors.email && touched.email })}
+            className={cx({ input: true, missing: errors.email && touched.email })}
             name="email"
             type="email"
             inputmode="email"
@@ -115,7 +115,7 @@ const ContactForm = () => {
             disabled={success}
           />
           <Field
-            className={cx({ missing: errors.message && touched.message })}
+            className={cx({ input: true, missing: errors.message && touched.message })}
             name="message"
             component="textarea"
             placeholder="Write something..."

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;

components/page-footer/Footer.module.css

@@ -3,12 +3,12 @@
   padding: 1.25em 1.5em;
   border-top: 1px solid var(--kinda-light);
   color: var(--medium-dark);
+}
 
-  a {
-    color: var(--medium-dark);
-    background: none;
-    padding-bottom: 0;
-  }
+.footer a {
+  color: var(--medium-dark);
+  background: none;
+  padding-bottom: 0;
 }
 
 .row {
@@ -25,16 +25,16 @@
   padding-bottom: 2px;
   border-bottom: 1px solid;
   border-color: var(--light);
+}
 
-  &:hover {
-    border-color: var(--kinda-light);
-  }
+.view_source:hover {
+  border-color: var(--kinda-light);
 }
 
 .beat {
   display: inline-block;
-  animation: beat 10s infinite; // 6 bpm, call 911 if you see this please.
-  animation-delay: 7.5s; // offset from wave animation
+  animation: beat 10s infinite; /* 6 bpm, call 911 if you see this please. */
+  animation-delay: 7.5s; /* offset from wave animation */
   will-change: transform;
 }
 
@@ -42,15 +42,17 @@
   .footer {
     padding: 1em 1.25em 0;
 
-    // Safari iOS menu bar reappears below 44px:
-    // https://www.eventbrite.com/engineering/mobile-safari-why/
+    /*
+     * Safari iOS menu bar reappears below 44px:
+     * https://www.eventbrite.com/engineering/mobile-safari-why/
+     */
     padding-bottom: 45px !important;
 
-    // Allows you to scroll below the viewport; default value is visible
+    /* Allows you to scroll below the viewport; default value is visible */
     overflow-y: scroll;
   }
 
-  // stack columns on left instead of flexboxing across
+  /* stack columns on left instead of flexboxing across */
   .row {
     font-size: 0.8em;
     display: block;
@@ -74,7 +76,7 @@
     transform: scale(1);
   }
 
-  // pause for ~9 out of 10 seconds
+  /* pause for ~9 out of 10 seconds */
   100% {
     transform: scale(1);
   }

components/page-footer/Footer.tsx

@@ -2,7 +2,7 @@ import Link from "next/link";
 import { HeartIcon, NextjsIcon } from "../icons";
 import * as config from "../../lib/config";
 
-import styles from "./Footer.module.scss";
+import styles from "./Footer.module.css";
 
 const Footer = () => (
   <footer className={styles.footer}>

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="/">

components/page/PageTitle.module.css

@@ -3,12 +3,12 @@
   margin-bottom: 0.6em;
   font-size: 2em;
   text-align: center;
+}
 
-  a {
-    background: none;
-    padding-bottom: 0;
-    color: var(--text);
-  }
+.title a {
+  background: none;
+  padding-bottom: 0;
+  color: var(--text);
 }
 
 @media screen and (max-width: 768px) {

components/page/PageTitle.tsx

@@ -1,6 +1,6 @@
 import { useRouter } from "next/router";
 
-import styles from "./PageTitle.module.scss";
+import styles from "./PageTitle.module.css";
 
 type Props = {
   title: unknown;

components/projects/RepoCard.module.css

@@ -0,0 +1,59 @@
+.card {
+  width: 100%;
+  padding: 1.2em 1.2em 0.8em;
+  border: 1px solid;
+  border-radius: 0.5em;
+  font-size: 0.85em;
+  color: var(--medium-dark);
+  border-color: var(--kinda-light);
+}
+
+.name {
+  font-size: 1.2em;
+  font-weight: 600;
+}
+
+.description {
+  margin: 0.7em 0 0.5em;
+  line-height: 1.7;
+}
+
+.meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+}
+
+.meta_item {
+  margin-right: 1.5em;
+  font-size: 0.875em;
+  line-height: 2;
+  color: var(--medium);
+}
+
+.meta_item a {
+  background: none;
+  padding-bottom: 0;
+  color: inherit;
+}
+
+.meta_item a:hover {
+  color: var(--link);
+}
+
+.octicon,
+.language_color {
+  width: 16px;
+  height: 16px;
+  vertical-align: text-bottom;
+  margin-right: 0.5em;
+}
+
+.language_color {
+  display: inline-block;
+  width: 1.15em;
+  height: 1.15em;
+  border-radius: 50%;
+  position: relative;
+  vertical-align: text-top;
+}

components/projects/RepoCard.module.scss

@@ -1,59 +0,0 @@
-.card {
-  width: 100%;
-  padding: 1.2em 1.2em 0.8em;
-  border: 1px solid;
-  border-radius: 0.5em;
-  font-size: 0.85em;
-  color: var(--medium-dark);
-  border-color: var(--kinda-light);
-
-  .name {
-    font-size: 1.2em;
-    font-weight: 600;
-  }
-
-  .description {
-    margin: 0.7em 0 0.5em;
-    line-height: 1.7;
-  }
-
-  .meta {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: baseline;
-
-    .meta_item {
-      margin-right: 1.5em;
-      font-size: 0.875em;
-      line-height: 2;
-      color: var(--medium);
-
-      a {
-        background: none;
-        padding-bottom: 0;
-        color: inherit;
-
-        &:hover {
-          color: var(--link);
-        }
-      }
-
-      .octicon,
-      .language_color {
-        width: 16px;
-        height: 16px;
-        vertical-align: text-bottom;
-        margin-right: 0.5em;
-      }
-
-      .language_color {
-        display: inline-block;
-        width: 1.15em;
-        height: 1.15em;
-        border-radius: 50%;
-        position: relative;
-        vertical-align: text-top;
-      }
-    }
-  }
-}

components/projects/RepoCard.tsx

@@ -1,7 +1,7 @@
 import { intlFormat, formatDistanceToNowStrict } from "date-fns";
 import { StarOcticon, ForkOcticon } from "../icons/octicons";
 
-import styles from "./RepoCard.module.scss";
+import styles from "./RepoCard.module.css";
 
 type Props = {
   name: string;

components/video/Video.module.css

@@ -1,6 +1,6 @@
 .wrapper {
   position: relative;
-  padding-top: 56.25%; // 100 / (1280 / 720)
+  padding-top: 56.25%; /* 100 / (1280 / 720) */
 }
 
 .react_player {

components/video/Video.tsx

@@ -1,7 +1,7 @@
 import dynamic from "next/dynamic";
 import type { ReactPlayerProps } from "react-player";
 
-import styles from "./Video.module.scss";
+import styles from "./Video.module.css";
 
 const ReactPlayer = dynamic(() => import("react-player/lazy"));