Add some custom fonts

assets/index.scss

@@ -3,6 +3,55 @@
 @tailwind utilities;
 
 @layer base {
+  @font-face {
+    font-family: "Fira Code";
+    src: url("/assets/fonts/FiraCode-VF.woff2") format("woff2");
+  }
+
+  /* eb-garamond-regular - latin */
+  @font-face {
+    font-display: swap;
+    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: "EB Garamond";
+    font-style: normal;
+    font-weight: 400;
+    src: url("/assets/fonts/eb-garamond-v27-latin-regular.woff2") format("woff2");
+    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  }
+
+  /* eb-garamond-italic - latin */
+  @font-face {
+    font-display: swap;
+    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: "EB Garamond";
+    font-style: italic;
+    font-weight: 400;
+    src: url("/assets/fonts/eb-garamond-v27-latin-italic.woff2") format("woff2");
+    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  }
+
+  /* eb-garamond-700 - latin */
+  @font-face {
+    font-display: swap;
+    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: "EB Garamond";
+    font-style: normal;
+    font-weight: 700;
+    src: url("/assets/fonts/eb-garamond-v27-latin-700.woff2") format("woff2");
+    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  }
+
+  /* eb-garamond-700italic - latin */
+  @font-face {
+    font-display: swap;
+    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: "EB Garamond";
+    font-style: italic;
+    font-weight: 700;
+    src: url("/assets/fonts/eb-garamond-v27-latin-700italic.woff2") format("woff2");
+    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  }
+
   h1 {
     @apply text-3xl font-mono text-orange-200;
   }
@@ -41,6 +90,10 @@
       @apply text-blue-300 underline;
     }
 
+    code {
+      @apply text-sm;
+    }
+
     code:not(pre code) {
       @apply font-mono bg-gray-700 px-1.5 py-0.5 rounded;
     }

index.html

@@ -5,6 +5,7 @@
 	<title>lukechu</title>
 	<link data-trunk rel="tailwind-css" href="assets/index.scss" />
 	<link data-trunk rel="copy-file" href="404.html" />
+	<link data-trunk rel="copy-dir" href="assets" />
 	<script type="text/javascript">
 		// Single Page Apps for GitHub Pages
 		// MIT License

posts/2024/hello-world.mdx

@@ -1,10 +1,16 @@
 ---
 title: Hello, world!
-date: 2024-09-15
+date: 2024-09-14
 desc: This is the first post on my blog.
 tags: []
 ---
 
 # Hello, world!
 
 This is a test post. This is the first post on my blog.
+
+```rust
+fn main() {
+    println!("Hello, world!");
+}
+```

posts/2024/interplanetary-transport-network.mdx

@@ -0,0 +1,8 @@
+---
+title: The Interplanetary Transport Network
+date: 2024-09-17
+desc: Using the Interplanetary Transport Network to perform low energy transfers in space.
+tags: [physics]
+---
+
+# The Interplanetary Transport Network

posts/2024/test.mdx

@@ -1,6 +1,6 @@
 ---
 title: Test post
-date: 2024-09-17
+date: 2024-09-15
 desc: Testing various markdown elements.
 tags: []
 ---

src/components/mod.rs

@@ -16,7 +16,7 @@ pub fn ShowDate(date: PostDate) -> View {
 
 
     view! {
-        p(class="text-sm text-gray-400 -mt-1 font-sans") { (format!("{month} {day}, {year}")) }
+        p(class="text-sm text-gray-400 -mt-1 font-mono") { (format!("{month} {day}, {year}")) }
     }
 }
 

src/shell.rs

@@ -5,7 +5,7 @@ use crate::Routes;
 #[component]
 pub fn Route(route: ReadSignal<Routes>) -> View {
     view! {
-        div(class="app flex flex-col min-h-screen text-slate-200 bg-slate-900") {
+        div(class="app flex flex-col min-h-screen text-slate-200 bg-slate-900 text-base") {
             Header()
             main(class="mt-6 mx-3 flex-grow") {
                 (match route.get_clone() {
@@ -31,7 +31,7 @@ pub fn Route(route: ReadSignal<Routes>) -> View {
 #[component]
 fn Header() -> View {
     view! {
-        header(class="p-2 border-b-2 border-slate-500 font-mono") {
+        header(class="p-2 border-b-2 border-slate-500 text-sm font-mono") {
             nav(class="flex flex-row justify-between items-center") {
                 div(class="self-start") {
                     a(class="hover:underline font-bold", href="/") { "$ cd /home/lukechu" }

tailwind.config.js

@@ -1,11 +1,23 @@
+const defaultTheme = require("tailwindcss/defaultTheme");
+
 module.exports = {
 	content: ["./src/**/*.rs"],
 	darkMode: "class", // or 'media' or 'class'
 	theme: {
 		fontFamily: {
-			sans: ["Verdana", "Arial", "sans-serif"],
-			serif: ["Georgia", "Times New Roman", "serif"],
-			mono: ["Cascadia Code", "Courier New", "monospace"],
+			sans: ["Verdana", ...defaultTheme.fontFamily.sans],
+			serif: ["EB Garamond", ...defaultTheme.fontFamily.serif],
+			mono: ["Fira Code", ...defaultTheme.fontFamily.mono],
+		},
+		fontSize: {
+			xs: "12px",
+			sm: "16px",
+			base: "20px",
+			lg: "24px",
+			xl: "26px",
+			"2xl": "30px",
+			"3xl": "34px",
+			"4xl": "40px",
 		},
 	},
 	plugins: [],