feat: typography attempt 1

assets/css/base.scss

@@ -0,0 +1,49 @@
+@import url("https://fonts.googleapis.com/css2?family=Bitter:wght@300;400;600;700;800;900&display=swap");
+
+@mixin headings {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    @content;
+  }
+}
+
+* {
+  box-sizing: border-box;
+  // for that cool wave dark mode effect
+  z-index: 1;
+  position: relative;
+}
+
+html,
+body,
+div#__nuxt {
+  height: 100%;
+  width: 100%;
+}
+
+:root {
+  --text-color: #243746;
+  --bg: #f1e7d0;
+}
+
+.dark {
+  --text-color: #ebf4f1;
+  --bg: #091a28;
+}
+
+.text-bitter {
+  font-family: Bitter, ui-sans-serif, system-ui, -apple-system,
+    BlinkMacSystemFont, "Segoe UI", Roboto, "Open Sans", "Helvetica Neue",
+    sans-serif;
+}
+
+.text-article {
+  font-family: "Source Serif Pro", serif;
+  line-height: 1.8;
+  color: #111;
+  font-size: 1.25rem;
+}

assets/css/main.scss

@@ -0,0 +1,23 @@
+@import "base.scss";
+
+.prose article {
+  @include headings {
+    @apply hover:text-blue-700 dark:hover:text-blue-400;
+    & > a:hover,
+    & > a:active {
+      text-decoration: underline;
+      text-decoration-skip-ink: all;
+      &::before {
+        content: "#";
+        position: absolute;
+        opacity: 0.5;
+        left: -2rem;
+        font-style: italic;
+      }
+    }
+  }
+
+  a:hover {
+    @apply hover:text-blue-700 dark:hover:text-blue-400;
+  }
+}