From 4cda87aac5334bba8c3cd38df8243781c76c2222 Mon Sep 17 00:00:00 2001
From: Skullheadx <admonty1@protonmail.com>
Date: Thu, 7 May 2026 00:57:27 -0400
Subject: [PATCH] fix nav bar not take too much space on mobile

---
 about.html |  4 ++++
 index.html |  4 ++++
 links.html |  4 ++++
 now.html   |  4 ++++
 style.css  | 39 ++++++++++++++++++++++++++++++++-------
 5 files changed, 48 insertions(+), 7 deletions(-)

diff --git a/about.html b/about.html
index 11ee996..3af659c 100644
--- a/about.html
+++ b/about.html
@@ -16,6 +16,7 @@
             </a>
         </header>
         <nav class="main-nav">
+            <div class="nav-pin">
             <section>
                 <h2>General</h2>
                 <ul>
@@ -25,6 +26,8 @@
                     <li><a href="links.html">Links</a></li>
                 </ul>
             </section>
+            </div>
+            <div class="nav-unpinned">
             <section>
                 <h2>Blog</h2>
                 <ul>
@@ -45,6 +48,7 @@
                 <h2>Contact</h2>
                 <a href="mailto:skull@skullheadx.com">Email</a>
             </section>
+            </div>
         </nav>
         <main class="content">
             <article>
diff --git a/index.html b/index.html
index c37ecae..85c8c97 100644
--- a/index.html
+++ b/index.html
@@ -18,6 +18,7 @@
             </a>
         </header>
         <nav class="main-nav">
+            <div class="nav-pin">
             <section>
                 <h2>General</h2>
                 <ul>
@@ -27,6 +28,8 @@
                     <li><a href="links.html">Links</a></li>
                 </ul>
             </section>
+            </div>
+            <div class="nav-unpinned">
             <section>
                 <h2>Blog</h2>
                 <ul>
@@ -47,6 +50,7 @@
                 <h2>Contact</h2>
                 <a href="mailto:skull@skullheadx.com">Email</a>
             </section>
+            </div>
         </nav>
         <aside class="main-aside">
             <section>
diff --git a/links.html b/links.html
index 67eed05..8a84aa4 100644
--- a/links.html
+++ b/links.html
@@ -16,6 +16,7 @@
             </a>
         </header>
         <nav class="main-nav">
+            <div class="nav-pin">
             <section>
                 <h2>General</h2>
                 <ul>
@@ -25,6 +26,8 @@
                     <li><a href="links.html">Links</a></li>
                 </ul>
             </section>
+            </div>
+            <div class="nav-unpinned">
             <section>
                 <h2>Blog</h2>
                 <ul>
@@ -45,6 +48,7 @@
                 <h2>Contact</h2>
                 <a href="mailto:skull@skullheadx.com">Email</a>
             </section>
+            </div>
         </nav>
         <main class="content">
             <article>
diff --git a/now.html b/now.html
index 4c9a7ac..95c5e94 100644
--- a/now.html
+++ b/now.html
@@ -16,6 +16,7 @@
             </a>
         </header>
         <nav class="main-nav">
+            <div class="nav-pin">
             <section>
                 <h2>General</h2>
                 <ul>
@@ -25,6 +26,8 @@
                     <li><a href="links.html">Links</a></li>
                 </ul>
             </section>
+            </div>
+            <div class="nav-unpinned">
             <section>
                 <h2>Blog</h2>
                 <ul>
@@ -45,6 +48,7 @@
                 <h2>Contact</h2>
                 <a href="mailto:skull@skullheadx.com">Email</a>
             </section>
+            </div>
         </nav>
         <main class="content">
             <article>
diff --git a/style.css b/style.css
index e4f9bb2..f672745 100644
--- a/style.css
+++ b/style.css
@@ -71,6 +71,12 @@ li {
 .main-nav {
   grid-area: nav;
 }
+.nav-pin {
+  grid-area: nav-pin;
+}
+.nav-unpinned {
+  grid-area: nav-unpinned;
+}
 .main-aside {
   grid-area: aside;
 }
@@ -89,40 +95,59 @@ li {
     "footer";
 }
 
-@media (width >= 300px) {
-  .main-wrapper .content-wrapper {
-    grid-template-columns: 1fr 3fr;
+@media (width < 500px) {
+  .main-wrapper {
     grid-template-areas:
       "header"
-      "nav"
+      "nav-pin"
+      "content"
       "aside"
+      "nav-unpinned"
+      "footer";
+  }
+  .content-wrapper {
+    grid-template-areas:
+      "header"
+      "nav-pin"
       "content"
+      "nav-unpinned"
       "footer";
   }
+  nav {
+      display: contents;
+  }
   nav ul {
     display: flex;
     justify-content: space-between;
   }
+  h2 {
+      padding: 0.25em;
+  }
 }
 
 /* grid layout for header, nav, content, aside and footer */
-@media (width >= 500px) {
+@media (width < 700px) and (width >= 500px) {
   .main-wrapper {
     grid-template-columns: 1fr 3fr;
     grid-template-areas:
       "header  header"
-      "nav     nav"
+      "nav-pin     nav-pin"
       "aside content"
+      "nav-unpinned nav-unpinned"
       "footer      footer";
   }
   .content-wrapper {
     grid-template-columns: 1fr 3fr;
     grid-template-areas:
       "header  header"
-      "nav     nav"
+      "nav-pin     nav-pin"
       "content content"
+      "nav-unpinned nav-unpinned"
       "footer      footer";
   }
+  nav {
+      display: contents;
+  }
   nav ul {
     display: flex;
     justify-content: space-between;
-- 
2.54.0