more tinkering w fonts

raymondwang · Apr 6, 2024 · cc237f3 · cc237f3
1 parent 63b8f11
commit cc237f3
Show file tree

Hide file tree

Showing 13 changed files with 63 additions and 23 deletions.
diff --git a/src/app.css b/src/app.css
@@ -1,5 +1,12 @@
-@import url('https://fonts.googleapis.com/css2?family=Protest+Riot&family=Tilt+Warp&display=swap');
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import './fonts.css';
+
+@layer base {
+  :root {
+    --background-color: #051f82;
+    --text-color: #89c4f3;
+  }
+}
diff --git a/src/app.html b/src/app.html
@@ -1,9 +1,11 @@
 <!doctype html>
-<html lang="en" class="bg-slate-50 text-slate-900 dark:bg-slate-900 dark:text-slate-50">
+<html lang="en" class="bg-[--background-color] text-[--text-color]">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%sveltekit.assets%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" href="%sveltekit.assets%/favicon.ico" />
+    <link rel=”preload” href=”%sveltekit.assets%/fonts/Satoshi-Variable.woff2″ as=”font” type=”font/woff2″>
+    <link rel=”preload” href=”%sveltekit.assets%/fonts/Erode-Variable.woff2″ as=”font” type=”font/woff2″>
     <title>[email protected]</title>
     %sveltekit.head%
   </head>

diff --git a/src/fonts.css b/src/fonts.css
@@ -0,0 +1,41 @@
+@layer base {
+  @font-face {
+    font-family: 'Satoshi';
+    src:
+      url('/fonts/Satoshi-Variable.woff2') format('woff2'),
+      url('/fonts/Satoshi-Variable.woff') format('woff');
+    font-weight: 300 900;
+    font-display: block;
+    font-style: normal;
+  }
+
+  @font-face {
+    font-family: 'Satoshi';
+    src:
+      url('/fonts/Satoshi-VariableItalic.woff2') format('woff2'),
+      url('/fonts/Satoshi-VariableItalic.woff') format('woff');
+    font-weight: 300 900;
+    font-display: block;
+    font-style: italic;
+  }
+
+  @font-face {
+    font-family: 'Erode';
+    src:
+      url('/fonts/Erode-Variable.woff2') format('woff2'),
+      url('/fonts/Erode-Variable.woff') format('woff');
+    font-weight: 300 700;
+    font-display: block;
+    font-style: normal;
+  }
+
+  @font-face {
+    font-family: 'Erode';
+    src:
+      url('/fonts/Erode-VariableItalic.woff2') format('woff2'),
+      url('/fonts/Erode-VariableItalic.woff') format('woff');
+    font-weight: 300 700;
+    font-display: block;
+    font-style: italic;
+  }
+}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,15 +1,8 @@
 <main class="container px-8 sm:mx-auto">
-  <p class="mt-40 sm:mt-60">hey, I'm</p>
-  <h1 class="font-display text-4xl sm:text-6xl md:text-8xl">Raymond</h1>
-  <h2 class="mt-8 text-2xl">
-    Software Engineer at
-    <a
-      class="hover:underline hover:underline-offset-4"
-      href="https://www.atlassian.com/"
-      target="_blank">Atlassian</a
-    >
-  </h2>
-  <ul class="mt-4 flex flex-row gap-x-4">
+  <p class="mt-40 font-serif sm:mt-60">hey, I'm</p>
+  <h1 class="text-4xl font-bold sm:text-6xl md:text-8xl">Raymond</h1>
+  <h2 class="mt-8 font-serif text-2xl">& this page is ~under construction~</h2>
+  <ul class="mt-4 flex flex-row gap-x-4 font-serif">
     <li>
       <a class="hover:underline hover:underline-offset-4" href="mailto:[email protected]" target="_blank"
         >Email</a

diff --git a/static/fonts/Erode-Variable.woff b/static/fonts/Erode-Variable.woff
diff --git a/static/fonts/Erode-Variable.woff2 b/static/fonts/Erode-Variable.woff2
diff --git a/static/fonts/Erode-VariableItalic.woff b/static/fonts/Erode-VariableItalic.woff
diff --git a/static/fonts/Erode-VariableItalic.woff2 b/static/fonts/Erode-VariableItalic.woff2
diff --git a/static/fonts/Satoshi-Variable.woff b/static/fonts/Satoshi-Variable.woff
diff --git a/static/fonts/Satoshi-Variable.woff2 b/static/fonts/Satoshi-Variable.woff2
diff --git a/static/fonts/Satoshi-VariableItalic.woff b/static/fonts/Satoshi-VariableItalic.woff
diff --git a/static/fonts/Satoshi-VariableItalic.woff2 b/static/fonts/Satoshi-VariableItalic.woff2
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -6,13 +6,10 @@ const config: Config = {
   plugins: [],
   theme: {
     fontFamily: {
-      sans: ['"Tilt Warp"', ...defaultTheme.fontFamily.sans],
-    },
-    extend: {
-      fontFamily: {
-        display: ['"Protest Riot"', ...defaultTheme.fontFamily.sans],
-      },
+      sans: ['Satoshi', ...defaultTheme.fontFamily.sans],
+      serif: ['Erode', ...defaultTheme.fontFamily.serif],
     },
+    extend: {},
   },
 };