From 079e2067f30c099202fd51751ff966c527741b7a Mon Sep 17 00:00:00 2001
From: Kjetil Orbekk <kjetil.orbekk@gmail.com>
Date: Thu, 27 Feb 2020 06:45:55 -0500
Subject: Add a mobile layout

---
 static/default.css | 33 +++++++++++++++++++++++----------
 1 file changed, 23 insertions(+), 10 deletions(-)

diff --git a/static/default.css b/static/default.css
index b3003ab..d8e4345 100644
--- a/static/default.css
+++ b/static/default.css
@@ -1,31 +1,44 @@
 /* Placement */
+@media screen and (max-width: 800px) {
+    body {
+        grid-template:
+            "header" auto
+            "nav" auto
+            "main" 1fr
+            "footer" auto / 1fr;
+    }
+}
+
+@media screen and (min-width: 800px) {
+    body {
+        grid-template:
+            "header header" auto
+            "nav    main  " 1fr
+            "footer footer" auto / 200px minmax(600px, auto);
+    }
+}
+
 body {
     display: grid;
     margin: auto;
     max-width: 1224px;
-    grid-template-columns: 200px minmax(600px, auto);
-    grid-template-rows: fit-content 1fr auto;
     grid-gap: 0;
 }
 
 header {
-    grid-column: 2;
-    grid-row: 1;
+    grid-area: header;
 }
 
 nav {
-    grid-column: 1;
-    grid-row: 2 / 4;
+    grid-area: nav;
 }
 
 main {
-    grid-column: 2;
-    grid-row: 2;
+    grid-area: main;
 }
 
 footer {
-    grid-column: 1 / 3;
-    grid-row: 3;
+    grid-area: footer;
 }
 
 /* Style */
-- 
cgit v1.2.3