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

.stylelintrc.json

@@ -1,6 +1,6 @@
 {
-  "extends": ["stylelint-config-standard-scss", "stylelint-prettier/recommended"],
+  "extends": ["stylelint-prettier/recommended"],
-  "plugins": ["stylelint-scss", "stylelint-prettier"],
+  "plugins": ["stylelint-prettier"],
   "rules": {
     "alpha-value-notation": "number",
     "color-function-notation": "legacy",

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;
+.octicon {
-    height: 16px;
+  width: 16px;
-    vertical-align: text-bottom;
+  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 {
+.section:first-of-type {
-    margin-top: 0;
+  margin-top: 0;
-  }
+}
 
-  &:last-of-type {
+.section:last-of-type {
-    margin-bottom: 0;
+  margin-bottom: 0;
-  }
 }
 
 .year {
@@ -26,10 +26,10 @@
   display: flex;
   line-height: 1.75;
   margin-bottom: 1em;
+}
 
-  &:last-of-type {
+.row:last-of-type {
-    margin-bottom: 0;
+  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 {
+.footer a {
-    color: var(--medium-dark);
+  color: var(--medium-dark);
-    background: none;
+  background: none;
-    padding-bottom: 0;
+  padding-bottom: 0;
-  }
 }
 
 .row {
@@ -25,16 +25,16 @@
   padding-bottom: 2px;
   border-bottom: 1px solid;
   border-color: var(--light);
+}
 
-  &:hover {
+.view_source:hover {
-    border-color: var(--kinda-light);
+  border-color: var(--kinda-light);
-  }
 }
 
 .beat {
   display: inline-block;
-  animation: beat 10s infinite; // 6 bpm, call 911 if you see this please.
+  animation: beat 10s infinite; /* 6 bpm, call 911 if you see this please. */
-  animation-delay: 7.5s; // offset from wave animation
+  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 {
+.title:hover {
-    color: var(--link);
+  color: var(--link);
-
-    .selfie {
-      opacity: 0.9;
-    }
-  }
 }
 
 .selfie {
   width: 50px;
   height: 50px;
+}
 
-  img {
+.selfie img {
-    border: 1px solid var(--light) !important;
+  border: 1px solid var(--light) !important;
-    border-radius: 50%;
+  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 {
+.title a {
-    background: none;
+  background: none;
-    padding-bottom: 0;
+  padding-bottom: 0;
-    color: var(--text);
+  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"));
 

package.json

@@ -19,7 +19,7 @@
     "analyze": "cross-env ANALYZE=true next build",
     "lint": "run-s lint:*",
     "lint:next": "next lint",
-    "lint:css": "stylelint '**/*.{css,scss}'",
+    "lint:css": "stylelint '**/*.css'",
     "lint:prettier": "prettier --check ."
   },
   "dependencies": {
@@ -42,7 +42,6 @@
     "feed": "^4.2.2",
     "formik": "^2.2.9",
     "gray-matter": "^4.0.3",
-    "highlight.js": "^11.4.0",
     "html-escaper": "^3.0.3",
     "is-absolute-url": "^4.0.1",
     "is-email-like": "^2.0.0",
@@ -89,20 +88,17 @@
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.5",
     "prettier": "^2.5.1",
-    "sass": "^1.46.0",
     "simple-git-hooks": "^2.7.0",
     "stylelint": "~14.2.0",
     "stylelint-config-prettier": "~9.0.3",
-    "stylelint-config-standard-scss": "~3.0.0",
     "stylelint-prettier": "~2.0.0",
-    "stylelint-scss": "~4.1.0",
     "typescript": "^4.5.4"
   },
   "simple-git-hooks": {
     "pre-commit": "npx lint-staged"
   },
   "lint-staged": {
-    "*.{css,scss}": [
+    "*.css": [
       "stylelint",
       "prettier --check"
     ],

pages/_app.tsx

@@ -14,10 +14,10 @@ import meJpg from "../public/static/images/me.jpg";
 
 // global styles
 import "modern-normalize/modern-normalize.css";
-import "../styles/colors.scss";
+import "../styles/colors.css";
-import "../styles/typography.scss";
+import "../styles/typography.css";
-import "../styles/highlight.scss";
+import "../styles/highlight.css";
-import "../styles/index.scss";
+import "../styles/index.css";
 
 const App = ({ Component, pageProps }: AppProps) => {
   const router = useRouter();

pages/previously.tsx

@@ -20,6 +20,9 @@ import img_2009_07 from "../public/static/images/previously/2009_07.png";
 import img_2012_09 from "../public/static/images/previously/2012_09.png";
 import img_2018_04 from "../public/static/images/previously/2018_04.png";
 
+import "@fontsource/comic-neue/latin-400.css";
+import "@fontsource/comic-neue/latin-700.css";
+
 const Previously = () => (
   <>
     <NextSeo

styles/colors.css

@@ -0,0 +1,63 @@
+:root {
+  --background-inner: #ffffff;
+  --background-outer: #fcfcfc;
+  --background-header: rgba(252, 252, 252, 0.7);
+  --text: #202020;
+  --medium-dark: #515151;
+  --medium: #5e5e5e;
+  --medium-light: #757575;
+  --light: #d2d2d2;
+  --kinda-light: #e3e3e3;
+  --super-light: #f4f4f4;
+  --super-duper-light: #fbfbfb;
+  --link: #0e6dc2;
+  --link-underline: rgba(14, 109, 194, 0.4);
+  --success: #44a248;
+  --error: #ff1b1b;
+
+  /* Syntax Highlighting (light) - modified from Monokai Light: https://github.com/mlgill/pygments-style-monokailight */
+  --highlight-color: #313131;
+  --highlight-bg: #fbfbfb;
+  --highlight-comment: #656e77;
+  --highlight-keyword: #029cb9;
+  --highlight-attribute: #70a800;
+  --highlight-symbol: #803378;
+  --highlight-namespace: #f92672;
+  --highlight-literal: #ae81ff;
+  --highlight-punctuation: #111111;
+  --highlight-variable: #d88200;
+  --highlight-deletion: #ff1b1b;
+  --highlight-addition: #44a248;
+}
+
+[data-theme="dark"] {
+  --background-inner: #1e1e1e;
+  --background-outer: #252525;
+  --background-header: rgba(37, 37, 37, 0.85);
+  --text: #f1f1f1;
+  --medium-dark: #d7d7d7;
+  --medium: #b1b1b1;
+  --medium-light: #959595;
+  --light: #646464;
+  --kinda-light: #535353;
+  --super-light: #272727;
+  --super-duper-light: #1f1f1f;
+  --link: #88c7ff;
+  --link-underline: rgba(136, 199, 255, 0.4);
+  --success: #78df55;
+  --error: #ff5151;
+
+  /* Syntax Highlighting (dark) - modified from Dracula: https://github.com/dracula/pygments */
+  --highlight-color: #e4e4e4;
+  --highlight-bg: #212121;
+  --highlight-comment: #929292;
+  --highlight-keyword: #3b9dd2;
+  --highlight-attribute: #78df55;
+  --highlight-symbol: #c59bc1;
+  --highlight-namespace: #f95757;
+  --highlight-literal: #d588fb;
+  --highlight-punctuation: #cccccc;
+  --highlight-variable: #fd992a;
+  --highlight-deletion: #ff5151;
+  --highlight-addition: #78df55;
+}

styles/colors.scss

@@ -1,35 +0,0 @@
-:root {
-  --background-inner: #ffffff;
-  --background-outer: #fcfcfc;
-  --background-header: rgba(252, 252, 252, 0.7);
-  --text: #202020;
-  --medium-dark: #515151;
-  --medium: #5e5e5e;
-  --medium-light: #757575;
-  --light: #d2d2d2;
-  --kinda-light: #e3e3e3;
-  --super-light: #f4f4f4;
-  --super-duper-light: #fbfbfb;
-  --link: #0e6dc2;
-  --link-underline: rgba(14, 109, 194, 0.4);
-  --success: #44a248;
-  --error: #ff1b1b;
-}
-
-[data-theme="dark"] {
-  --background-inner: #1e1e1e;
-  --background-outer: #252525;
-  --background-header: rgba(37, 37, 37, 0.85);
-  --text: #f1f1f1;
-  --medium-dark: #d7d7d7;
-  --medium: #b1b1b1;
-  --medium-light: #959595;
-  --light: #646464;
-  --kinda-light: #535353;
-  --super-light: #272727;
-  --super-duper-light: #1f1f1f;
-  --link: #88c7ff;
-  --link-underline: rgba(136, 199, 255, 0.4);
-  --success: #78df55;
-  --error: #ff5151;
-}

styles/highlight.css

@@ -0,0 +1,87 @@
+.hljs {
+  color: var(--highlight-color);
+  background: var(--highlight-bg);
+}
+
+.hljs-subst {
+  color: var(--highlight-color);
+}
+
+.hljs-comment {
+  color: var(--highlight-comment);
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-doctag,
+.hljs-section,
+.hljs-selector-class,
+.hljs-selector-pseudo,
+.hljs-meta,
+.hljs-meta .hljs-keyword {
+  color: var(--highlight-keyword);
+}
+
+.hljs-attr {
+  color: var(--highlight-attribute);
+}
+
+.hljs-attribute {
+  color: var(--highlight-symbol);
+}
+
+.hljs-name,
+.hljs-type,
+.hljs-number,
+.hljs-selector-id,
+.hljs-quote,
+.hljs-template-tag {
+  color: var(--highlight-namespace);
+}
+
+.hljs-string,
+.hljs-regexp,
+.hljs-symbol,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-link,
+.hljs-selector-attr,
+.hljs-meta .hljs-string {
+  color: var(--highlight-variable);
+}
+
+.hljs-built_in,
+.hljs-title,
+.hljs-literal {
+  color: var(--highlight-literal);
+}
+
+.hljs-bullet,
+.hljs-code {
+  color: var(--highlight-punctuation);
+}
+
+.hljs-deletion {
+  color: var(--highlight-deletion);
+}
+
+.hljs-addition {
+  color: var(--highlight-addition);
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
+
+.hljs-formula,
+.hljs-operator,
+.hljs-params,
+.hljs-property,
+.hljs-punctuation,
+.hljs-tag {
+  /* intentionally empty */
+}

styles/highlight.scss

@@ -1,10 +0,0 @@
-@use "sass:meta";
-
-// hacky way to assign different HLJS themes to light/dark mode
-.markdown {
-  @include meta.load-css("../node_modules/highlight.js/styles/stackoverflow-light.css");
-}
-
-[data-theme="dark"] .markdown {
-  @include meta.load-css("../node_modules/highlight.js/styles/stackoverflow-dark.css");
-}

styles/index.css

@@ -14,20 +14,22 @@ a {
   padding-bottom: 2px;
   transition: background-size 0.25s ease-in-out;
   background-image: linear-gradient(var(--link-underline), var(--link-underline));
-
-  &:hover {
-    background-size: 100% 2px;
-  }
 }
 
-// set an anchor's class to `no-underline` to disable all of this
+a:hover {
+  background-size: 100% 2px;
+}
+
+/* set an anchor's class to `no-underline` to disable all of this */
 .no-underline {
   background: none !important;
   padding-bottom: 0;
 }
 
-// make SVG icons relative to surrounding text
+/*
-// https://github.com/twitter/twemoji#inline-styles
+ * make SVG icons relative to surrounding text:
+ * https://github.com/twitter/twemoji#inline-styles
+ */
 .icon {
   display: inline-block;
   height: 1.2em;
@@ -35,16 +37,24 @@ a {
   vertical-align: -0.2em;
 }
 
-// all code
+/* all code */
 code {
   font-size: 0.925em;
   page-break-inside: avoid;
+  border: 1px solid var(--kinda-light);
 }
 
-// inline code in paragraphs/elsewhere (single backticks)
+/* inline code in paragraphs/elsewhere (single backticks) */
-:not(pre) > code {
+:not(pre) code {
-  padding: 0.075em 0.25em;
+  padding: 0.1em 0.25em;
-  border: 1px solid var(--kinda-light);
+}
+
+/* code blocks */
+pre code {
+  display: block;
+  overflow-x: auto;
+  padding: 1em;
+  tab-size: 2;
 }
 
 .center {
@@ -53,37 +63,31 @@ code {
   margin-right: auto;
 }
 
-// sub-heading anchor styles
+/* sub-heading anchor styles */
 .h-anchor {
   margin: 0 0.25em;
   padding: 0 0.25em;
   color: var(--medium-light);
   background: none;
   font-weight: 300;
-  opacity: 0; // overridden on hover
+  opacity: 0; /* overridden on hover */
   user-select: none;
-
+}
-  &::before {
+.h-anchor::before {
-    content: "\0023"; // pound sign `#`, done here to keep content DOM cleaner
+  content: "\0023"; /* pound sign `#`, done here to keep content DOM cleaner */
-  }
+}
-
+.h-anchor:hover {
-  &:hover {
+  color: var(--link);
-    color: var(--link);
-  }
 }
 
-// make anchor `#` link show up on hover over the corresponding heading
+/* make anchor `#` link show up on hover over the corresponding heading */
-h2,
+h2:hover .h-anchor,
-h3,
+h3:hover .h-anchor,
-h4 {
+h4:hover .h-anchor {
-  &:hover {
+  opacity: 1;
-    .h-anchor {
-      opacity: 1;
-    }
-  }
 }
 
-// offset (approximately) with sticky header so jumped-to content isn't hiding behind it
+/* offset (approximately) with sticky header so jumped-to content isn't hiding behind it */
 h2 {
   scroll-margin-top: 4em;
 }
@@ -104,7 +108,7 @@ h4 {
   }
 }
 
-// https://web.dev/prefers-reduced-motion/#(bonus)-forcing-reduced-motion-on-all-websites
+/* https://web.dev/prefers-reduced-motion/#(bonus)-forcing-reduced-motion-on-all-websites */
 @media (prefers-reduced-motion: reduce) {
   *,
   ::before,

styles/typography.css

@@ -0,0 +1,63 @@
+@import "@fontsource/inter/latin-400.css";
+@import "@fontsource/inter/latin-500.css";
+@import "@fontsource/inter/latin-700.css";
+@import "@fontsource/inter/variable-full.css";
+@import "@fontsource/roboto-mono/latin-400.css";
+@import "@fontsource/roboto-mono/latin-500.css";
+@import "@fontsource/roboto-mono/latin-700.css";
+@import "@fontsource/roboto-mono/variable.css";
+@import "@fontsource/roboto-mono/variable-italic.css";
+
+body {
+  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  font-kerning: normal;
+  font-variant-ligatures: normal;
+  font-feature-settings: "kern", "liga", "calt", "clig", "ss01";
+}
+
+code,
+kbd,
+samp,
+pre,
+.monospace {
+  font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace;
+}
+
+/*
+ * override above font-family if browser supports variable fonts:
+ * https://caniuse.com/#feat=variable-fonts
+ */
+@supports (font-variation-settings: normal) {
+  body {
+    font-family: InterVariable, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
+      sans-serif;
+    font-optical-sizing: auto;
+  }
+
+  code,
+  kbd,
+  samp,
+  pre,
+  .monospace {
+    font-family: "Roboto MonoVariable", ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier,
+      monospace;
+  }
+
+  /*
+   * Chrome doesn't automatically slant multi-axis Inter var, for some reason.
+   * Adding "slnt" -10 fixes Chrome but then over-italicizes in Firefox. AHHHHHHHHHH.
+   */
+  em {
+    font-style: normal !important;
+    font-variation-settings: "ital" 1, "slnt" -10;
+  }
+
+  /* Roboto Mono doesn't have this problem, but the above fix breaks it, of course. */
+  em code,
+  em kbd,
+  em samp,
+  em pre,
+  em .monospace {
+    font-style: italic !important;
+  }
+}

styles/typography.scss

@@ -1,87 +0,0 @@
-// stylelint-disable value-keyword-case, scss/operator-no-unspaced
-
-@use "sass:list";
-@use "~@fontsource/inter/scss/mixins" as Inter;
-@use "~@fontsource/roboto-mono/scss/mixins" as RobotoMono;
-@use "~@fontsource/comic-neue/scss/mixins" as ComicNeue;
-
-// System fonts:
-// https://primer.style/design/foundations/typography#font-stack
-$system-fonts-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif;
-$system-fonts-mono: ui-monospace, "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", "Courier", monospace;
-
-// Prefer web fonts below with system fonts as backup:
-$font-stack-sans: list.join("Inter", $system-fonts-sans);
-$font-stack-sans-variable: list.join("Inter var", $system-fonts-sans);
-$font-stack-mono: list.join("Roboto Mono", $system-fonts-mono);
-$font-stack-mono-variable: list.join("Roboto Mono var", $system-fonts-mono);
-
-// prettier-ignore
-$unicode-latin-only: (
-  latin: (U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD),
-);
-
-// Inter
-@include Inter.fontFaceVariable($fontName: "Inter var", $type: "full", $unicodeMap: $unicode-latin-only);
-@include Inter.fontFace($fontName: "Inter", $weight: 400, $unicodeMap: $unicode-latin-only);
-@include Inter.fontFace($fontName: "Inter", $weight: 500, $unicodeMap: $unicode-latin-only);
-@include Inter.fontFace($fontName: "Inter", $weight: 700, $unicodeMap: $unicode-latin-only);
-
-// Roboto Mono
-@include RobotoMono.fontFaceVariable($fontName: "Roboto Mono var", $unicodeMap: $unicode-latin-only);
-@include RobotoMono.fontFaceVariable($fontName: "Roboto Mono var", $style: italic, $unicodeMap: $unicode-latin-only);
-@include RobotoMono.fontFace($fontName: "Roboto Mono", $weight: 400, $unicodeMap: $unicode-latin-only);
-@include RobotoMono.fontFace($fontName: "Roboto Mono", $weight: 500, $unicodeMap: $unicode-latin-only);
-@include RobotoMono.fontFace($fontName: "Roboto Mono", $weight: 700, $unicodeMap: $unicode-latin-only);
-
-// Comic Neue
-@include ComicNeue.fontFace($fontName: "Comic Neue", $weight: 400, $unicodeMap: $unicode-latin-only);
-@include ComicNeue.fontFace($fontName: "Comic Neue", $weight: 700, $unicodeMap: $unicode-latin-only);
-
-body {
-  font-family: $font-stack-sans;
-  font-kerning: normal;
-  font-variant-ligatures: normal;
-  font-feature-settings: "kern", "liga", "calt", "clig", "ss01";
-}
-
-code,
-kbd,
-samp,
-pre,
-.monospace {
-  font-family: $font-stack-mono;
-}
-
-// override above font-family if browser supports variable fonts
-// https://caniuse.com/#feat=variable-fonts
-@supports (font-variation-settings: normal) {
-  body {
-    font-family: $font-stack-sans-variable;
-    font-optical-sizing: auto;
-  }
-
-  code,
-  kbd,
-  samp,
-  pre,
-  .monospace {
-    font-family: $font-stack-mono-variable;
-  }
-
-  // Chrome doesn't automatically slant multi-axis Inter var, for some reason.
-  // Adding "slnt" -10 fixes Chrome but then over-italicizes in Firefox. AHHHHHHHHHH.
-  em {
-    font-style: normal !important;
-    font-variation-settings: "ital" 1, "slnt" -10;
-
-    // Roboto Mono doesn't have this problem, but the above fix breaks it, of course.
-    code,
-    kbd,
-    samp,
-    pre,
-    .monospace {
-      font-style: italic !important;
-    }
-  }
-}

yarn.lock

@@ -1719,14 +1719,6 @@ ansi-styles@^6.0.0:
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-6.1.0.tgz#87313c102b8118abd57371afab34618bf7350ed3"
   integrity sha512-VbqNsoz55SYGczauuup0MFUyXNQviSpFTj1RQtFzmQLk18qbVSpTFFGMT293rmDaQuKCT6InmbuEyUne4mTuxQ==
 
-anymatch@~3.1.2:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.2.tgz#c0557c096af32f106198f4f4e2a383537e378716"
-  integrity sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==
-  dependencies:
-    normalize-path "^3.0.0"
-    picomatch "^2.0.4"
-
 argparse@^1.0.7:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
@@ -1894,11 +1886,6 @@ big.js@^5.2.2:
   resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
   integrity sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==
 
-binary-extensions@^2.0.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
-  integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==
-
 boolbase@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
@@ -1926,7 +1913,7 @@ brace-expansion@^1.1.7:
     balanced-match "^1.0.0"
     concat-map "0.0.1"
 
-braces@^3.0.1, braces@~3.0.2:
+braces@^3.0.1:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
   integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
@@ -2028,21 +2015,6 @@ character-reference-invalid@^1.0.0:
   resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz#083329cda0eae272ab3dbbf37e9a382c13af1560"
   integrity sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==
 
-"chokidar@>=3.0.0 <4.0.0":
-  version "3.5.2"
-  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.2.tgz#dba3976fcadb016f66fd365021d91600d01c1e75"
-  integrity sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==
-  dependencies:
-    anymatch "~3.1.2"
-    braces "~3.0.2"
-    glob-parent "~5.1.2"
-    is-binary-path "~2.1.0"
-    is-glob "~4.0.1"
-    normalize-path "~3.0.0"
-    readdirp "~3.6.0"
-  optionalDependencies:
-    fsevents "~2.3.2"
-
 classnames@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
@@ -2982,11 +2954,6 @@ fs.realpath@^1.0.0:
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
   integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8=
 
-fsevents@~2.3.2:
-  version "2.3.2"
-  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
-  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
-
 function-bind@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
@@ -3034,7 +3001,7 @@ github-slugger@^1.1.1:
   resolved "https://registry.yarnpkg.com/github-slugger/-/github-slugger-1.4.0.tgz#206eb96cdb22ee56fdc53a28d5a302338463444e"
   integrity sha512-w0dzqw/nt51xMVmlaV1+JRzN+oCa1KfcgGEWhxUG16wbdA+Xnt/yoFO8Z8x/V82ZcZ0wy6ln9QDup5avbhiDhQ==
 
-glob-parent@^5.1.2, glob-parent@~5.1.2:
+glob-parent@^5.1.2:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
   integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
@@ -3282,7 +3249,7 @@ hastscript@^6.0.0:
     property-information "^5.0.0"
     space-separated-tokens "^1.0.0"
 
-highlight.js@^11.4.0, highlight.js@~11.4.0:
+highlight.js@~11.4.0:
   version "11.4.0"
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-11.4.0.tgz#34ceadd49e1596ee5aba3d99346cdfd4845ee05a"
   integrity sha512-nawlpCBCSASs7EdvZOYOYVkJpGmAOKMYZgZtUqSRqodZE0GRVcFKwo1RcpeOemqh9hyttTdd5wDBwHkuSyUfnA==
@@ -3344,11 +3311,6 @@ ignore@^5.1.4, ignore@^5.2.0:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.0.tgz#6d3bac8fa7fe0d45d9f9be7bac2fc279577e345a"
   integrity sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==
 
-immutable@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.0.0.tgz#b86f78de6adef3608395efb269a91462797e2c23"
-  integrity sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw==
-
 import-fresh@^3.0.0, import-fresh@^3.2.1:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
@@ -3434,13 +3396,6 @@ is-bigint@^1.0.1:
   dependencies:
     has-bigints "^1.0.1"
 
-is-binary-path@~2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
-  integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==
-  dependencies:
-    binary-extensions "^2.0.0"
-
 is-boolean-object@^1.1.0:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.1.2.tgz#5c6dc200246dd9321ae4b885a114bb1f75f63719"
@@ -3505,7 +3460,7 @@ is-fullwidth-code-point@^4.0.0:
   resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-4.0.0.tgz#fae3167c729e7463f8461ce512b080a49268aa88"
   integrity sha512-O4L094N2/dZ7xqVdrXhh9r1KODPJpFms8B5sGdJLPy664AgvXsreZUyCQQNItZRDlYug4xStLjNp/sz3HvBowQ==
 
-is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3, is-glob@~4.0.1:
+is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084"
   integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==
@@ -4179,7 +4134,7 @@ normalize-package-data@^3.0.0:
     semver "^7.3.4"
     validate-npm-package-license "^3.0.1"
 
-normalize-path@^3.0.0, normalize-path@~3.0.0:
+normalize-path@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
   integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
@@ -4470,7 +4425,7 @@ picocolors@^1.0.0:
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
   integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
 
-picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.3:
+picomatch@^2.2.3:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
@@ -4507,12 +4462,7 @@ postcss-safe-parser@^6.0.0:
   resolved "https://registry.yarnpkg.com/postcss-safe-parser/-/postcss-safe-parser-6.0.0.tgz#bb4c29894171a94bc5c996b9a30317ef402adaa1"
   integrity sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==
 
-postcss-scss@^4.0.2:
+postcss-selector-parser@^6.0.7:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-scss/-/postcss-scss-4.0.2.tgz#39ddcc0ab32f155d5ab328ee91353d67a52d537b"
-  integrity sha512-xfdkU128CkKKKVAwkyt0M8OdnelJ3MRcIRAPPQkRpoPeuzWY3RIeg7piRCpZ79MK7Q16diLXMMAD9dN5mauPlQ==
-
-postcss-selector-parser@^6.0.6, postcss-selector-parser@^6.0.7:
   version "6.0.8"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.8.tgz#f023ed7a9ea736cd7ef70342996e8e78645a7914"
   integrity sha512-D5PG53d209Z1Uhcc0qAZ5U3t5HagH3cxu+WLZ22jt3gLUpXM4eXXfiO14jiDWST3NNooX/E8wISfOhZ9eIjGTQ==
@@ -4711,13 +4661,6 @@ readable-stream@^3.5.0:
     string_decoder "^1.1.1"
     util-deprecate "^1.0.1"
 
-readdirp@~3.6.0:
-  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"
-  integrity sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==
-  dependencies:
-    picomatch "^2.2.1"
-
 redent@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/redent/-/redent-3.0.0.tgz#e557b7998316bb53c9f1f56fa626352c6963059f"
@@ -4975,15 +4918,6 @@ safe-buffer@~5.2.0:
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
   integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
 
-sass@^1.46.0:
-  version "1.46.0"
-  resolved "https://registry.yarnpkg.com/sass/-/sass-1.46.0.tgz#923117049525236026a7ede69715580eb0fac751"
-  integrity sha512-Z4BYTgioAOlMmo4LU3Ky2txR8KR0GRPLXxO38kklaYxgo7qMTgy+mpNN4eKsrXDTFlwS5vdruvazG4cihxHRVQ==
-  dependencies:
-    chokidar ">=3.0.0 <4.0.0"
-    immutable "^4.0.0"
-    source-map-js ">=0.6.2 <2.0.0"
-
 sax@^1.2.4:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
@@ -5115,7 +5049,7 @@ slice-ansi@^5.0.0:
     ansi-styles "^6.0.0"
     is-fullwidth-code-point "^4.0.0"
 
-"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.1:
+source-map-js@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.1.tgz#a1741c131e3c77d048252adfa24e23b908670caf"
   integrity sha512-4+TN2b3tqOCd/kaGRJ/sTYA0tR0mdXx26ipdolxcwtJVqEnqNYvlCAt1q3ypy4QMlYus+Zh34RNtYLoq2oQ4IA==
@@ -5369,35 +5303,6 @@ stylelint-config-prettier@~9.0.3:
   resolved "https://registry.yarnpkg.com/stylelint-config-prettier/-/stylelint-config-prettier-9.0.3.tgz#0dccebeff359dcc393c9229184408b08964d561c"
   integrity sha512-5n9gUDp/n5tTMCq1GLqSpA30w2sqWITSSEiAWQlpxkKGAUbjcemQ0nbkRvRUa0B1LgD3+hCvdL7B1eTxy1QHJg==
 
-stylelint-config-recommended-scss@^5.0.2:
-  version "5.0.2"
-  resolved "https://registry.yarnpkg.com/stylelint-config-recommended-scss/-/stylelint-config-recommended-scss-5.0.2.tgz#193f483861c76a36ece24c52eb6baca4838f4a48"
-  integrity sha512-b14BSZjcwW0hqbzm9b0S/ScN2+3CO3O4vcMNOw2KGf8lfVSwJ4p5TbNEXKwKl1+0FMtgRXZj6DqVUe/7nGnuBg==
-  dependencies:
-    postcss-scss "^4.0.2"
-    stylelint-config-recommended "^6.0.0"
-    stylelint-scss "^4.0.0"
-
-stylelint-config-recommended@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/stylelint-config-recommended/-/stylelint-config-recommended-6.0.0.tgz#fd2523a322836005ad9bf473d3e5534719c09f9d"
-  integrity sha512-ZorSSdyMcxWpROYUvLEMm0vSZud2uB7tX1hzBZwvVY9SV/uly4AvvJPPhCcymZL3fcQhEQG5AELmrxWqtmzacw==
-
-stylelint-config-standard-scss@~3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/stylelint-config-standard-scss/-/stylelint-config-standard-scss-3.0.0.tgz#dafc4fa5538d0ed833bf0a7d391e075683ffd96c"
-  integrity sha512-zt3ZbzIbllN1iCmc94e4pDxqpkzeR6CJo5DDXzltshuXr+82B8ylHyMMARNnUYrZH80B7wgY7UkKTYCFM0UUyw==
-  dependencies:
-    stylelint-config-recommended-scss "^5.0.2"
-    stylelint-config-standard "^24.0.0"
-
-stylelint-config-standard@^24.0.0:
-  version "24.0.0"
-  resolved "https://registry.yarnpkg.com/stylelint-config-standard/-/stylelint-config-standard-24.0.0.tgz#6823f207ab997ae0b641f9a636d007cc44d77541"
-  integrity sha512-+RtU7fbNT+VlNbdXJvnjc3USNPZRiRVp/d2DxOF/vBDDTi0kH5RX2Ny6errdtZJH3boO+bmqIYEllEmok4jiuw==
-  dependencies:
-    stylelint-config-recommended "^6.0.0"
-
 stylelint-prettier@~2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/stylelint-prettier/-/stylelint-prettier-2.0.0.tgz#ead781aea522379f2ffa2d136bafdfc451d699a5"
@@ -5405,17 +5310,6 @@ stylelint-prettier@~2.0.0:
   dependencies:
     prettier-linter-helpers "^1.0.0"
 
-stylelint-scss@^4.0.0, stylelint-scss@~4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/stylelint-scss/-/stylelint-scss-4.1.0.tgz#39b808696f8152081163d970449257ff80b5c041"
-  integrity sha512-BNYTo7MMamhFOlcaAWp2dMpjg6hPyM/FFqfDIYzmYVLMmQJqc8lWRIiTqP4UX5bresj9Vo0dKC6odSh43VP2NA==
-  dependencies:
-    lodash "^4.17.21"
-    postcss-media-query-parser "^0.2.3"
-    postcss-resolve-nested-selector "^0.1.1"
-    postcss-selector-parser "^6.0.6"
-    postcss-value-parser "^4.1.0"
-
 stylelint@~14.2.0:
   version "14.2.0"
   resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-14.2.0.tgz#da4f0f4580e66911c38c376ed82447b78e32b0fb"