From: Ardis Lu <ardisglu@gmail.com>
Date: Thu, 23 Mar 2023 02:09:09 +0000 (-0700)
Subject: Move nav to top on small screens
X-Git-Url: https://git.ardis.lu/?a=commitdiff_plain;h=75cfaa8dfa1fc70a1f2d69da45e589b607d13e49;p=minimal-routing

Move nav to top on small screens
---

diff --git a/index.html b/index.html
index f98f9cf..c49040c 100644
--- a/index.html
+++ b/index.html
@@ -20,25 +20,28 @@
       margin-inline: auto;
     }
 
-    header,
-    main {
+    header {
       display: flex;
       justify-content: center;
-    }
-
-    header {
       border-block-end: 2px solid hsl(275deg 90% 10%);
       margin-block-end: 8px;
     }
 
+    main {
+      display: grid;
+      grid-template:
+        "nav content"
+        / 1fr 4fr;
+    }
+
     nav {
-      flex-basis: 20%;
+      grid-area: nav;
       display: flex;
       flex-direction: column;
     }
 
     section {
-      flex-basis: 80%;
+      grid-area: content;
       display: flex;
       flex-direction: column;
     }
@@ -81,6 +84,24 @@
     p.subtitle {
       font-weight: 700;
     }
+    
+    @media (max-width: 800px) {
+      main {
+        grid-template: 
+          "nav"
+          "content";
+      }
+
+      nav {
+        flex-direction: row;
+        justify-content: space-between;
+      }
+
+      nav>a {
+        padding: 16px;
+        margin-inline-end: 0;
+      }
+    }
   </style>
 </head>