feat: update font (#23)

# What 💻 
* update font for readability
* Use fira mono for code font

README.md

@@ -32,7 +32,7 @@ bun run dev -o
 
 ## Local Preview
 
-To locally preview the production build:
+To locally preview the production build, first run `bun run generate` to build the project, then run the following:
 
 ```shell
 bun run preview

components/content/ProseCodeInline.vue

@@ -0,0 +1,18 @@
+<template>
+  <code class="inline-code border-0 text-base font-normal"><slot /></code>
+</template>
+
+<style>
+.prose :where(a code):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
+  color: var(--tw-prose-links);
+}
+
+.prose :where(a:hover code):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
+  text-decoration: underline;
+}
+
+.prose :where(h2 code, h3 code, h4 code, h5 code, h6 code) {
+  font-size: inherit;
+  line-height: inherit;
+}
+</style>

nuxt.config.ts

@@ -6,7 +6,10 @@ export default defineNuxtConfig({
   extends: ['@nuxt/ui-pro'],
   app: {
     head: {
-      link: [{ rel: 'stylesheet', href: '/katex.min.css' }],
+      link: [
+        { rel: 'stylesheet', href: '/main.css' },
+        { rel: 'stylesheet', href: '/katex.min.css' },
+      ],
     },
   },
   modules: [
@@ -26,6 +29,13 @@ export default defineNuxtConfig({
       globals.forEach((c) => (c.global = true));
     },
   },
+  fonts: {
+    families: [
+      { name: 'Raleway', provider: 'google' },
+      { name: 'Montserrat', provider: 'google' },
+      { name: 'Fira Mono', provider: 'google' },
+    ],
+  },
   ui: {
     icons: {
       collections: {

public/main.css

@@ -0,0 +1,5 @@
+body {
+  -webkit-font-smoothing: auto !important;
+  text-rendering: optimizeLegibility;
+  letter-spacing: 0.1px;
+}

tailwind.config.ts

@@ -5,8 +5,9 @@ export default <Partial<Config>>{
   theme: {
     extend: {
       fontFamily: {
-        sans: ['Inter', ...defaultTheme.fontFamily.sans],
+        sans: ['Raleway', ...defaultTheme.fontFamily.sans],
         serif: ['Montserrat', ...defaultTheme.fontFamily.serif],
+        mono: ['Fira Mono', ...defaultTheme.fontFamily.mono],
       },
       colors: {
         zkSlate: {