feat: improve global responsivity

sass/parts/_navbar.scss

@@ -1,17 +1,6 @@
-@mixin header_link($color, $hover-color) {
-    a {
-        color: $color;
-        text-decoration: none;
+@use '../constants' as *;
+@use '../mixins' as *;
 
-        &:visited {
-            color: $color;
-        }
-
-        &:hover {
-            color: $hover-color;
-        }
-    }
-}
 
 header {
     background-color: var(--crust);
@@ -37,12 +26,12 @@ nav {
         font-size: 2.5rem;
         font-weight: 100;
         text-transform: uppercase;
-        @include header_link(var(--text), var(--text));
+        @include link(var(--text), var(--text));
     }
 
     .nav-bar {
         flex: 1 auto;
-        @include header_link(var(--subtext1), var(--subtext0));
+        @include link(var(--subtext1), var(--subtext0));
         font-size: 1.2rem;
         text-transform: lowercase;
     }
@@ -70,7 +59,11 @@ nav {
     }
 }
 
-@media only screen and (max-width: 600px) {
+@media only screen and (max-width: $smartphone) {
+    header {
+        margin-bottom: 1.5rem;
+    }
+
     nav {
         max-width: 100%;
         flex-direction: column;
@@ -83,6 +76,7 @@ nav {
 
         .home-title {
             text-align: center;
+            font-size: 1.8rem;
         }
     }
 }

sass/parts/_page_title.scss

@@ -1,3 +1,5 @@
+@use '../constants' as *;
+
 section {
     &.title {
         margin-bottom: 4rem;
@@ -47,4 +49,18 @@ section {
             }
         }
     }
+}
+
+@media only screen and (max-width: $smartphone) {
+    section.title {
+        margin-bottom: 2.5rem;
+
+        h1.title {
+            font-size: 2.2rem;
+        }
+
+        p.subtitle {
+            font-size: 1.3rem;
+        }
+    }
 }