update fonts

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 {