feat: better mobile responsiveness

Author: fizzyizzy05

config.toml

@@ -16,6 +16,6 @@ theme = "catppuccin-mocha"
 # Put all your custom variables here
 links = [
   { url = "/downloads", label = "Downloads"},
-  { url = "https://docs.getapollo.dev", label = "Docs"},  
-  { url = "https://docs.getapollo.dev/posts", label = "Blog"}
+  { url = "https://docs.getapollo.dev", label = "Documentation"},  
+  { url = "https://docs.getapollo.dev/posts", label = "Blog"},
 ]

sass/_header.scss

@@ -30,14 +30,46 @@
     }
 }
 
+@media (max-width: 424px) {
+    header {
+        nav {
+            justify-content: center;
+            flex-direction: column;
+            text-align: center;
+
+            div.links, a#header-home-link {
+                justify-content: center;
+            }
+        }
+    }
+}
+
+@media (min-width: 425px) {
+    nav, div.links {
+        justify-content: space-between;
+
+        div.links {
+            justify-content: flex-end;
+        }
+    }
+}
+
 
 header {
     margin-block: 1em;
+
+    nav {
+        gap: 8px;
+    }
+
     nav, div.links {
-        justify-content: space-between;
         display: flex;
         vertical-align: middle;
 
+        div.links {
+            flex-wrap: wrap;
+        }
+
         a#header-home-link {
             display: flex;