Even better nav

styles/Blog/Blog.module.scss

@@ -3,6 +3,7 @@
     color: var(--blog_color);
     padding-bottom: 20px;
     min-height: 100vh;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 
     header {
         position: sticky;
@@ -15,7 +16,6 @@
         border: 1px solid var(--blog_content-border);
         background: var(--blog_content-background);
         backdrop-filter: blur(var(--blog_content-blur));
-        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     }
   
     main {

styles/Blog/Navigation.module.scss

@@ -34,7 +34,7 @@
     .navLink {
         transition: text-decoration 0.3s ease-in-out;
         display: block;
-        margin: auto 5px;
+        margin-right: 10px;
         cursor: pointer;
 
         &:hover {
@@ -44,12 +44,27 @@
 
     .navIcon {
         margin-right: 15px;
-        cursor: pointer;
+        height: 1.8em;
         display: block;
-        height: 2em;
     }
 
-    @media screen and (min-width: 300px) {
+    .navLink .linkIcon {
+        cursor: pointer;
+        height: 1.8em;
+        display: block;
+    }
+
+    .navLink {
+        .linkText {
+            display: none;
+        }
+
+        .linkIcon {
+            display: block;
+        }
+    }
+
+    @media screen and (min-width: 450px) {
         .imgContainer {
             display: block;
         }
@@ -58,6 +73,18 @@
         }
     }
 
+    @media screen and (min-width: 350px) {
+        .navLink {
+            .linkText {
+                display: inline;
+            }
+
+            .linkIcon {
+                display: none;
+            }
+        }
+    }
+
     .spacer {
         flex-grow: 2;
     }