update fonts

pages/+Layout.vue

@@ -1,6 +1,6 @@
 <template>
     <lenis root>
-        <div :class="classes" :style="styles">
+        <div :class="classes">
             <slot />
         </div>
     </lenis>
@@ -27,9 +27,13 @@ onMounted(async () => {
     // Load fonts
     loadFonts([
         {
-            name: 'Office Times',
+            name: 'Leibniz Fraktur',
             weights: [400],
         },
+        {
+            name: 'Geist Mono',
+            weights: [400, 700],
+        },
     ])
         .then(() => {
             fontsLoading.value = false
@@ -38,15 +42,11 @@ onMounted(async () => {
             fontsLoading.value = false
         })
 })
-
-const styles = computed(() => ({
-    '--vh': height.value ? height.value / 100 + 'px' : '100vh',
-}))
 </script>
 
 <style lang="scss">
 .container {
-    min-height: calc(100 * var(--vh));
+    min-height: 100vh;
     max-width: 100vw;
     overflow-x: clip;
     background: var(--theme-bg);

pages/index/+Page.vue

@@ -32,7 +32,7 @@ const downloadUrl = computed(() => {
 onMounted(async () => {
     try {
         const response = await fetch(
-            `${BASE_URL}/dist/${os.value.toLowerCase()}/latest.yml`,
+            `${BASE_URL}/dist/latest-${os.value.toLowerCase()}.yml`,
         )
         if (!response.ok) throw new Error(response.statusText)
         const yaml = await response.text()
@@ -44,7 +44,8 @@ onMounted(async () => {
         if (pathMatch) downloadPath.value = pathMatch[1].trim()
     } catch {
         // fallback to placeholder
-        downloadPath.value = `takerofnotes-app-0.2.0.${os.value === 'Windows' ? 'exe' : os.value === 'macOS' ? 'dmg' : 'AppImage'}`
+        // downloadPath.value = `takerofnotes-app-0.2.0.${os.value === 'Windows' ? 'exe' : os.value === 'macOS' ? 'dmg' : 'AppImage'}`
+        console.error('Failed to fetch latest version info')
     } finally {
         loading.value = false
     }
@@ -53,7 +54,7 @@ onMounted(async () => {
 
 <style lang="scss">
 main.splash {
-    height: calc(100 * var(--vh));
+    height: 100vh;
     display: flex;
     justify-content: center;
     align-items: center;

styles/_font-style.scss

@@ -17,15 +17,23 @@
 }
 
 @mixin h1 {
-    font-family: var(--font-times);
+    font-family: var(--font-display);
     font-weight: 400;
-    letter-spacing: 0.1em;
-    @include size-font(42px, 27px);
+    letter-spacing: -0.02em;
+    line-height: 1.3;
+    @include size-font(30px, 30px);
+}
+
+@mixin h1-mono {
+    font-family: var(--font-mono);
+    font-weight: 400;
+    line-height: 1;
+    @include size-font(22px, 22px);
 }
 
 @mixin p {
-    font-family: var(--font-times);
+    font-family: var(--font-mono);
     font-weight: 400;
-    letter-spacing: 0.03em;
-    @include size-font(25px, 18px);
+    line-height: 1.4;
+    @include size-font(12px, 12px);
 }

styles/_fonts.scss

@@ -11,16 +11,35 @@
         900 - Black (Heavy)
 */
 
-/* OFFICE TIMES */
+/* Leibniz Fraktur */
 @font-face {
-    font-family: 'Office Times';
+    font-family: 'Leibniz Fraktur';
     font-style: normal;
     font-weight: 400;
     src:
-        url('/fonts/OfficeTimesRound-Regular.woff2') format('woff2'),
-        url('/fonts/OfficeTimesRound-Regular.woff') format('woff');
+        url('/fonts/neuefraktur.woff2') format('woff2'),
+        url('/fonts/neuefraktur.woff') format('woff');
+}
+
+/* Geist Mono */
+@font-face {
+    font-family: 'Geist Mono';
+    font-style: normal;
+    font-weight: 700;
+    src:
+        url('/fonts/geist-mono-bold.woff2') format('woff2'),
+        url('/fonts/geist-mono-bold.woff') format('woff');
+}
+@font-face {
+    font-family: 'Geist Mono';
+    font-style: normal;
+    font-weight: 400;
+    src:
+        url('/fonts/geist-mono.woff2') format('woff2'),
+        url('/fonts/geist-mono.woff') format('woff');
 }
 
 :root {
-    --font-times: 'Office Times', monospace;
+    --font-display: 'Leibniz Fraktur', serif;
+    --font-mono: 'Geist Mono', monospace;
 }

styles/main.scss

@@ -37,49 +37,24 @@ h4,
 h5,
 h6 {
     @include h1;
+
+    &.mono {
+        @include h1-mono;
+    }
 }
 .p,
 p,
 a,
 button,
 input,
-pre {
+pre,
+span,
+label,
+li {
     @include p;
 }
-
-.entry {
-    img {
-        max-width: 100%;
-        height: auto;
-    }
-    p {
-        min-height: 1px;
-    }
-    a {
-        text-decoration: underline;
-    }
-    & > * {
-        margin-bottom: 1em;
-        margin-top: 1em;
-    }
-    & > *:first-child {
-        margin-top: 0;
-    }
-    & > *:last-child {
-        margin-bottom: 0;
-    }
-
-    ul,
-    ol {
-        li {
-            margin-bottom: 1em;
-            width: desktop-vw(577px);
-        }
-    }
-    ul {
-        list-style: disc;
-        padding-left: 1em;
-    }
+.bold {
+    font-weight: 700;
 }
 
 #app {