From a16fe23d3fa6aab06a8db2e7c41b779e77f96ed6 Mon Sep 17 00:00:00 2001
From: Joshua Goins <josh@redstrate.com>
Date: Tue, 20 Sep 2022 12:34:16 -0400
Subject: [PATCH] Replace CSS grid with flexbox solution

---
 themes/red/assets/css/site.css | 40 +++++++++++++++-------------------
 1 file changed, 17 insertions(+), 23 deletions(-)

diff --git a/themes/red/assets/css/site.css b/themes/red/assets/css/site.css
index 7fd1e55..3aef5fb 100644
--- a/themes/red/assets/css/site.css
+++ b/themes/red/assets/css/site.css
@@ -1,27 +1,12 @@
 /* desktop devices */
 @media (min-width: 768px) {
-    body {
-        grid-template:
-        "head head"
-        "nav  main"
-        "nav  foot";
-    }
-
     aside {
-        width: 250px;
+        flex: 200px 0 0;
     }
 }
 
 /* mobile devices */
 @media (max-width: 768px) {
-    body {
-        grid-template:
-        "head"
-        "nav"
-        "main"
-        "foot";
-    }
-
     aside {
         width: 100%;
     }
@@ -33,39 +18,48 @@ body {
     background-color: #e3e3e3;
     accent-color: var(--accent-color);
 
-    display: grid;
+    display: flex;
+    flex-flow: row wrap;
 }
 
 header {
-    grid-area: head;
+    flex-grow: 1;
+    flex-basis: 100%;
+
+    margin: 10px;
 }
 
 aside {
     background-color: white;
 
-    grid-area: nav;
-
     text-align: center;
 
     border: 1px solid black;
     border-radius: 3px;
     padding: 15px;
+
+    margin: 10px;
 }
 
 article {
     background-color: white;
 
-    grid-area: main;
-
     border: 1px solid black;
     border-radius: 3px;
 
     padding: 15px;
+
+    flex: 2 0px;
+
+    margin: 10px;
 }
 
 footer {
     background-color: white;
 
-    grid-area: foot;
+    flex-grow: 1;
+    flex-basis: 100%;
+
+    margin: 10px;
 }