From cc0e24a7520f4cf7028f00b559ed5bd55db53692 Mon Sep 17 00:00:00 2001
From: Joshua Goins <josh@redstrate.com>
Date: Wed, 14 Sep 2022 16:54:11 -0400
Subject: [PATCH] Adapt grid layout for mobile users

---
 themes/red/assets/css/site.css | 25 +++++++++++++++++++++----
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/themes/red/assets/css/site.css b/themes/red/assets/css/site.css
index 3e1a0ab..e05b8d3 100644
--- a/themes/red/assets/css/site.css
+++ b/themes/red/assets/css/site.css
@@ -1,11 +1,28 @@
+/* desktop devices */
+@media (min-width: 768px) {
+    body {
+        grid-template:
+        "head head"
+        "nav  main"
+        "nav  foot";
+    }
+}
+
+/* mobile devices */
+@media (max-width: 768px) {
+    body {
+        grid-template:
+        "head"
+        "nav"
+        "main"
+        "foot";
+    }
+}
+
 body {
     background-color: #eebebe;
 
     display: grid;
-    grid-template:
-        "head head"
-        "nav  main"
-        "nav  foot";
 }
 
 header {