Simplify div hierarchy; use grid display

1 files changed, 24 insertions, 10 deletions

diff --git a/commun.css b/commun.css
index a272264..7248bfc 100644
--- a/commun.css
+++ b/commun.css
@@ -1,4 +1,13 @@
+body {
+    height: 100vh;
+    display: grid;
+    grid-template-columns: 9fr 1fr;
+    grid-template-rows: auto 1fr auto;
+    margin: 0;
+}
+
 header.banner {
+    grid-column: 1 / -1;
     display: flex;
     align-items: center;
 }
@@ -47,8 +56,18 @@ nav ol li {
     flex: 1;
 }
 
-header.social {
-    float: right;
+main {
+    grid-row: 2;
+    grid-column: 1;
+    display: flex;
+    overflow: auto;
+    background: #f00;
+}
+
+footer.social {
+    grid-row: 2;
+    grid-column: 2;
+
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -68,18 +87,13 @@ header.social {
     /* but of course We Can't Have Nice Things. */
     writing-mode: vertical-rl;
     transform: rotate(180deg);
+
     margin: 0;
     margin-inline-start: 0.5em;
 }
 
 
-body {
-    height: 100vh;
-    display: flex;
-    flex-direction: column;
-    margin: 0;
-}
-
-footer {
+footer.legal {
+    grid-column: 1 / -1;
     margin: auto;
 }