chore: more fonts refactoring

3 months ago · 1dcd0705b5
parent 0abd1c4886
commit 1dcd0705b5
5 changed files with 11 additions and 10 deletions
--- a/src/styles/components.scss
+++ b/src/styles/components.scss
@ -29,7 +29,7 @@
    }

    .title {
-        font-family: 'Iosevka', monospace;
+        font-family: var(--font-display);
        font-weight: 700;
        font-size: 28px;
    }
--- a/src/styles/controls.scss
+++ b/src/styles/controls.scss
@ -35,7 +35,7 @@
            text-decoration: none;
            color: #222;

-            font-family: var(--font-control);
+            font-family: var(--font-secondary);
            font-weight: 600;

            cursor: pointer;
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@ -17,10 +17,10 @@ $screen-desktop-min: 1024px;

    --project-card-bg: #a2d4f3;

-    --font-base: 'Open Sans', sans-serif;
-    --font-title: 'Iosevka', monospace;
-    --font-code: 'Source Code Pro', monospace;
-    --font-control: 'Source Sans Pro', sans-serif;
+    --font-primary: 'Open Sans', sans-serif;
+    --font-display: 'Iosevka', monospace;
+    --font-mono: 'Source Code Pro', monospace;
+    --font-secondary: 'Source Sans Pro', sans-serif;
 }

@layer common, typography, component, page;
@ -46,7 +46,7 @@ $screen-desktop-min: 1024px;
        min-height: 100%;
        margin: 0;

-        font-family: var(--font-base);
+        font-family: var(--font-primary);
        font-size: 18px;
        color: #222;
    }
@ -117,7 +117,7 @@ body {
            padding: 0 1.5rem;

            a {
-                font-family: var(--font-title);
+                font-family: var(--font-display);
                font-size: 18px;
                font-weight: 500;
                letter-spacing: 1px;
@ -225,6 +225,7 @@ body {
        display: grid;
        place-content: center;

+        font-family: var(--font-secondary);
        font-size: 18px;

        scroll-snap-align: end;
--- a/src/styles/pages.scss
+++ b/src/styles/pages.scss
@ -763,7 +763,7 @@
                background: #eee;
                color: #000;

-                font-family: var(--font-title);
+                font-family: var(--font-display);
                font-size: 14px;

                border-radius: 0.25rem;
--- a/src/styles/typography.scss
+++ b/src/styles/typography.scss
@ -19,7 +19,7 @@

        h#{$i} {
            font-size: $base-font-size * $factor;
-            font-family: var(--font-title);
+            font-family: var(--font-display);
            font-weight: 700;
            margin-bottom: 0.25rem;
        }