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/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;