yolo podkova for headings

Signed-off-by: Xe Iaso <me@xeiaso.net>

5 files changed, 166 insertions, 134 deletions

diff --git a/lume/_config.ts b/lume/_config.ts
index 4ccd4da..8e56616 100644
--- a/lume/_config.ts
+++ b/lume/_config.ts
@@ -58,7 +58,18 @@ site.use(date({
     "DATE_US": "MM/dd/yyyy",
   },
 }));
-site.use(esbuild({ esm: true }));
+site.use(esbuild({
+  extensions: [".ts", ".js", ".tsx"],
+  options: {
+    bundle: true,
+    format: "esm",
+    minify: true,
+    keepNames: true,
+    platform: "browser",
+    target: "esnext",
+    treeShaking: true,
+  },
+}));
 site.use(feed({
   output: ["/blog.rss", "/blog.json"],
   query: "index=true",
diff --git a/lume/src/_includes/base.njk b/lume/src/_includes/base.njk
index 0076771..5645645 100644
--- a/lume/src/_includes/base.njk
+++ b/lume/src/_includes/base.njk
@@ -104,38 +104,38 @@ la budza pu cusku lu
                     </svg>
                     <a class="hover:bg-white-500 flex flex-row items-center ml-2" href="/">
                         <span
-                        class="text-xl tracking-tight">Xe</span>
+                        class="text-xl font-aile tracking-tight">Xe</span>
                     </a>
                 </div>
                 <div class="flex items-center flex-shrink-0 mr-6">
                     <a href="/blog" class="text-fg-1 dark:text-fgDark-1">
-                        <span class="text-xl tracking-tight">Blog</span>
+                        <span class="text-xl font-aile tracking-tight">Blog</span>
                     </a>
                 </div>
                 <div class="flex items-center flex-shrink-0 mr-6">
                     <a href="/contact" class="text-fg-1 dark:text-fgDark-1">
-                        <span class="text-xl tracking-tight">Contact</span>
+                        <span class="text-xl font-aile tracking-tight">Contact</span>
                     </a>
                 </div>
                 <div class="flex items-center flex-shrink-0 mr-6">
                     <a href="/resume" class="text-fg-1 dark:text-fgDark-1">
-                        <span class="text-xl tracking-tight">Resume</span>
+                        <span class="text-xl font-aile tracking-tight">Resume</span>
                     </a>
                 </div>
                 <div class="flex items-center flex-shrink-0 mr-6">
                     <a href="/talks" class="text-fg-1 dark:text-fgDark-1">
-                        <span class="text-xl tracking-tight">Talks</span>
+                        <span class="text-xl font-aile tracking-tight">Talks</span>
                     </a>
                 </div>
                 <div class="flex items-center flex-shrink-0 mr-6">
                     <a href="/vods" class="text-fg-1 dark:text-fgDark-1">
-                        <span class="text-xl tracking-tight">VODs</span>
+                        <span class="text-xl font-aile tracking-tight">VODs</span>
                     </a>
                 </div>
                 <div class="mx-auto"></div>
                 <div class="flex items-center flex-shrink-0 mr-6">
                     <a href="/signalboost" class="ml-6 text-fg-1 dark:text-fgDark-1">
-                        <span class="text-xl tracking-tight">Signalboost</span>
+                        <span class="text-xl font-aile tracking-tight">Signalboost</span>
                     </a>
                 </div>
             </nav>
diff --git a/lume/src/static/font/Podkova.woff2 b/lume/src/static/font/Podkova.woff2
new file mode 100644
index 0000000..508f97d
--- /dev/null
+++ b/lume/src/static/font/Podkova.woff2
diff --git a/lume/src/styles.css b/lume/src/styles.css
index 06fb277..5f32a41 100644
--- a/lume/src/styles.css
+++ b/lume/src/styles.css
@@ -1,12 +1,31 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+@import url("https://cdn.xeiaso.net/file/christine-static/static/font/inter/inter.css");
+@import url("https://fonts.googleapis.com/css2?family=Podkova:wght@400..800&display=swap");
 
 @layer base {
+  @font-face {
+    font-family: "Podkova";
+    font-style: normal;
+    font-weight: 400 800;
+    font-display: swap;
+    src: url("/static/font/Podkova.woff2") format("woff2");
+  }
+
   a {
     @apply text-link-light-normal hover:text-link-light-hover hover:bg-link-light-hoverBg visited:text-link-light-visited visited:hover:text-link-light-visitedHover visited:hover:bg-link-light-visitedHoverBg underline;
   }
 
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    @apply font-serif;
+  }
+
   details {
     @apply p-4 bg-bg-soft;
   }
@@ -75,7 +94,8 @@
   code[class*="language-"],
   pre[class*="language-"] {
     color: #ebdbb2; /* fg1 / fg */
-    font-family: "Iosevka Curly Iaso", Consolas, Monaco, "Andale Mono", monospace;
+    font-family: "Iosevka Curly Iaso", Consolas, Monaco, "Andale Mono",
+      monospace;
     direction: ltr;
     text-align: left;
     white-space: pre;
diff --git a/lume/tailwind.config.js b/lume/tailwind.config.js
index 8f8cd51..40ba9dd 100644
--- a/lume/tailwind.config.js
+++ b/lume/tailwind.config.js
@@ -2,131 +2,132 @@ import forms from "npm:@tailwindcss/forms";
 import typography from "npm:@tailwindcss/typography";
 
 export default {
-    theme: {
-      extend: {
-        fontFamily: {
-          sans: ["Iosevka Aile Iaso", "sans-serif"],
-          mono: ["Iosevka Curly Iaso", "monospace"],
-          serif: ["Iosevka Etoile Iaso", "serif"],
-          startup: ["sans-serif"],
-        },
-        colors: {
-          bg: {
-            hard: "#f9f5d7",
-            soft: "#f2e5bc",
-            0: "#fbf1c7",
-            1: "#ebdbb2",
-            2: "#d5c4a1",
-            3: "#bdae93",
-            4: "#a89984",
-          },
-          bgDark: {
-            hard: "#1d2021",
-            soft: "#32302f",
-            0: "#282828",
-            1: "#3c3836",
-            2: "#504945",
-            3: "#665c54",
-            4: "#7c6f64",
-          },
-          fg: {
-            0: "#282828",
-            1: "#3c3836",
-            2: "#504945",
-            3: "#665c54",
-            4: "#7c6f64",
-          },
-          fgDark: {
-            0: "#fbf1c7",
-            1: "#ebdbb2",
-            2: "#d5c4a1",
-            3: "#bdae93",
-            4: "#a89984",
-          },
-          red: {
-            dark: "#9d0006",
-            light: "#cc241d",
-          },
-          redDark: {
-            dark: "#cc241d",
-            light: "#fb4934",
-          },
-          green: {
-            light: "#98971a",
-            dark: "#79740e",
-          },
-          greenDark: {
-            dark: "#98971a",
-            light: "#b8bb26",
-          },
-          yellow: {
-            light: "#d79921",
-            dark: "#b57614",
-          },
-          yellowDark: {
-            light: "#d79921",
-            dark: "#fabd2f",
-          },
-          blue: {
-            light: "#458588",
-            dark: "#076678",
-          },
-          blueDark: {
-            dark: "#458588",
-            light: "#83a598",
-          },
-          purple: {
-            light: "#b16286",
-            dark: "#8f3f71",
-          },
-          purpleDark: {
-            dark: "#b16286",
-            light: "#d3869b",
-          },
-          aqua: {
-            light: "#689d6a",
-            dark: "#427b58",
-          },
-          aquaDark: {
-            dark: "#689d6a",
-            light: "#8ec07c",
-          },
-          orange: {
-            light: "#d65d0e",
-            dark: "#af3a03",
-          },
-          orangeDark: {
-            dark: "#d65d0e",
-            light: "#fe8019",
-          },
-          gray: {
-            light: "#928374",
-            dark: "#7c6f64",
-          },
-          grayDark: {
-            dark: "#928374",
-            light: "#a89984",
-          },
-          link: {
-            light: {
-              normal: "#b80050",
-              hoverBg: "#9e0045",
-              hover: "#fdf4c1",
-              visited: "#53493c",
-              visitedHover: "#fff",
-              visitedHoverBg: "#282828",
-            },
-            dark: {
-              normal: "#ffa8ce",
-              hoverBg: "#b3004d",
-              hover: "#fff",
-              visited: "#c1b7a9",
-              visitedHover: "#fdf4c1",
-              visitedHoverBg: "#282828",
-            }
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ["Iosevka Aile Iaso", "sans-serif"],
+        mono: ["Iosevka Curly Iaso", "monospace"],
+        serif: ["Podkova", "Iosevka Etoile Iaso", "serif"],
+        aile: ["Iosevka Aile Iaso", "Inter"],
+        startup: ["sans-serif"],
+      },
+      colors: {
+        bg: {
+          hard: "#f9f5d7",
+          soft: "#f2e5bc",
+          0: "#fbf1c7",
+          1: "#ebdbb2",
+          2: "#d5c4a1",
+          3: "#bdae93",
+          4: "#a89984",
+        },
+        bgDark: {
+          hard: "#1d2021",
+          soft: "#32302f",
+          0: "#282828",
+          1: "#3c3836",
+          2: "#504945",
+          3: "#665c54",
+          4: "#7c6f64",
+        },
+        fg: {
+          0: "#282828",
+          1: "#3c3836",
+          2: "#504945",
+          3: "#665c54",
+          4: "#7c6f64",
+        },
+        fgDark: {
+          0: "#fbf1c7",
+          1: "#ebdbb2",
+          2: "#d5c4a1",
+          3: "#bdae93",
+          4: "#a89984",
+        },
+        red: {
+          dark: "#9d0006",
+          light: "#cc241d",
+        },
+        redDark: {
+          dark: "#cc241d",
+          light: "#fb4934",
+        },
+        green: {
+          light: "#98971a",
+          dark: "#79740e",
+        },
+        greenDark: {
+          dark: "#98971a",
+          light: "#b8bb26",
+        },
+        yellow: {
+          light: "#d79921",
+          dark: "#b57614",
+        },
+        yellowDark: {
+          light: "#d79921",
+          dark: "#fabd2f",
+        },
+        blue: {
+          light: "#458588",
+          dark: "#076678",
+        },
+        blueDark: {
+          dark: "#458588",
+          light: "#83a598",
+        },
+        purple: {
+          light: "#b16286",
+          dark: "#8f3f71",
+        },
+        purpleDark: {
+          dark: "#b16286",
+          light: "#d3869b",
+        },
+        aqua: {
+          light: "#689d6a",
+          dark: "#427b58",
+        },
+        aquaDark: {
+          dark: "#689d6a",
+          light: "#8ec07c",
+        },
+        orange: {
+          light: "#d65d0e",
+          dark: "#af3a03",
+        },
+        orangeDark: {
+          dark: "#d65d0e",
+          light: "#fe8019",
+        },
+        gray: {
+          light: "#928374",
+          dark: "#7c6f64",
+        },
+        grayDark: {
+          dark: "#928374",
+          light: "#a89984",
+        },
+        link: {
+          light: {
+            normal: "#b80050",
+            hoverBg: "#9e0045",
+            hover: "#fdf4c1",
+            visited: "#53493c",
+            visitedHover: "#fff",
+            visitedHoverBg: "#282828",
+          },
+          dark: {
+            normal: "#ffa8ce",
+            hoverBg: "#b3004d",
+            hover: "#fff",
+            visited: "#c1b7a9",
+            visitedHover: "#fdf4c1",
+            visitedHoverBg: "#282828",
           }
         }
-      },
+      }
     },
-    plugins: [forms, typography],
-  };
\ No newline at end of file
+  },
+  plugins: [forms, typography],
+};
\ No newline at end of file