feat: typography attempt 1

app.vue

@@ -3,70 +3,3 @@
     <NuxtPage />
   </NuxtLayout>
 </template>
-
-<style lang="scss">
-* {
-  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;
-}
-
-.prose {
-  /*
-  override default tailwind styles
-
-  these have a default specificity of 0, 4, 0 so !important is basically the only way
-  */
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    & > a {
-      font-weight: bold !important;
-      text-decoration: none !important;
-    }
-  }
-}
-
-.prose article {
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    & > a:hover {
-      @apply hover:text-blue-700 dark:hover:text-blue-400;
-      &::before {
-        content: "#";
-        position: absolute;
-        opacity: 0.5;
-        left: -2rem;
-        font-style: italic;
-      }
-    }
-  }
-
-  a:hover {
-    @apply hover:text-blue-700 dark:hover:text-blue-400;
-  }
-}
-</style>

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;
+  }
+}

components/ProjectCard.vue

@@ -17,7 +17,7 @@ const imgUrl = props.project.img
       <div class="card-text h-full px-4 py-2">
         <div class="h-full flex flex-col justify-between">
           <div>
-            <h3 class="m-0">{{ project.name }}</h3>
+            <h3 class="m-0 font-bold font-sans">{{ project.name }}</h3>
             <div class="flex gap-1 items-center flex-nowrap">
               <img
                 class="h-5 w-5 m-0"

nuxt.config.ts

@@ -8,6 +8,7 @@ export default defineNuxtConfig({
     "@nuxtjs/color-mode",
     "@funken-studio/sitemap-nuxt-3",
   ],
+  css: ["@/assets/css/main.scss"],
   nitro: {
     prerender: {
       routes: ["/sitemap.xml"],

pages/index.vue

@@ -8,8 +8,10 @@ useTitle("Home", "Personal website!");
 
 <template>
   <main class="flex flex-col items-center justify-around gap-8">
-    <h1>Welcome!</h1>
+    <div class="flex flex-col items-center">
-    <p>What are you here to see?</p>
+      <h1 class="text-bitter font-bold">Welcome!</h1>
+      <p>What are you here to see?</p>
+    </div>
     <div
       class="flex justify-around items-stretch w-full flex-wrap gap-x-8 gap-y-10"
     >

tailwind.config.js

@@ -11,6 +11,31 @@ export default {
                 marginTop: "1.5em",
                 marginBottom: "1.5em",
               },
+              a: {
+                textDecoration: "underline",
+                fontWeight: "inherit",
+              },
+              "h1 a": {
+                textDecoration: "inherit",
+              },
+              "h2 a": {
+                textDecoration: "inherit",
+              },
+              "h3 a": {
+                textDecoration: "inherit",
+              },
+              "h4 a": {
+                textDecoration: "inherit",
+              },
+              "h5 a": {
+                textDecoration: "inherit",
+              },
+              "h6 a": {
+                textDecoration: "inherit",
+              },
+              "h1, h2, h3, h4, h5, h6": {
+                fontFamily: "Bitter, sans-serif",
+              },
             },
           ],
         },