fix nav bar not take too much space on mobile

diff --git a/about.html b/about.html
index 11ee996e20b8c9a996efa1c036c62f39a4370911..3af659c2900f877cd5bbe610757261e177bd3fdd 100644 (file)
--- 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 c37ecaee89b8883e8110f09606c0356d2b0cc9fd..85c8c97d1a2c05f4af87a643598abe82bb3d45eb 100644 (file)
--- 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 67eed052631d5add936436424f8843304bd24e30..8a84aa4584be0d1a35a20707d153a32cd64a6c63 100644 (file)
--- 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 4c9a7ac6dae1defffa7718fe4b3a1e6d9f8a5eb6..95c5e94f9e9106e5aa4cdf665b6c1964868ec33a 100644 (file)
--- 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 e4f9bb2d7a7a88364ce0b72ff6216194bf171ee6..f672745c260ce24fc155c272240132a00091a7e6 100644 (file)
--- 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;