From d85b7117918c5f63220effa80ac3b3f84110c1e3 Mon Sep 17 00:00:00 2001
From: "Kevin C. Coram" <kcoram@gmail.com>
Date: Wed, 11 Dec 2019 22:36:32 -0500
Subject: [PATCH] Create two column layout for wide screen browsers

---
 layouts/_default/baseof.html | 40 ++++++++++++++++++++----------------
 static/css/layout.css        | 25 ++++++++++++++++++++++
 2 files changed, 47 insertions(+), 18 deletions(-)

diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 77c396f..26eb1b5 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -30,28 +30,32 @@
         </nav>
     </header>
     <main {{ if eq .Kind "page" }}class="h-entry"{{ else if in (slice "section" "taxonomy" "taxonomyTerm" ) .Kind  }}class="h-feed"{{ end }}>
-        <header>
-            {{- block "content-header" . -}}
-            {{- end -}}
+        <div class="content-box">
+            <header>
+                {{- block "content-header" . -}}
+                {{- end -}}
+            </header>
+            <section>
+                {{- block "content" . -}}
+                <!-- The part of the page that begins to differ between templates -->
+                {{ end }}
+            </section>
+            <footer>
+                {{- block "content-footer" . -}}
+                {{- end -}}
+            </footer>
+        </div>
+        <div class="asides-box">
+            <aside>
+                {{ block "author-card" . }}
+                {{ partial "author-card.html" . }}
+                {{ end }}
+            </aside>
             <nav>
                 {{- block "content-menu" . -}}
                 {{- end -}}
             </nav>
-        </header>
-        <section>
-            {{- block "content" . -}}
-            <!-- The part of the page that begins to differ between templates -->
-            {{ end }}
-        </section>
-        <footer>
-            {{- block "content-footer" . -}}
-            {{- end -}}
-        </footer>
-        <aside>
-            {{ block "author-card" . }}
-            {{ partial "author-card.html" . }}
-            {{ end }}
-        </aside>
+        </div>
     </main>
     <footer>
         {{- block "footer" . -}}
diff --git a/static/css/layout.css b/static/css/layout.css
index 1a25a14..d72d72d 100644
--- a/static/css/layout.css
+++ b/static/css/layout.css
@@ -1,5 +1,6 @@
 .box {
   display: flex;
+  flex-direction: row;
   align-items: center;
   flex-wrap: wrap;
 }
@@ -28,3 +29,27 @@ nav.paginator ul {
   padding-inline-start: 1em;
   padding-inline-end: 1em;
 }
+
+/* Define grid layout for wide screen browsers */
+div.content-box {
+  grid-area: content;
+}
+
+div.asides-box {
+  grid-area: aside;
+}
+
+@media (min-width: 1024px) {
+  div.asides-box {
+    max-width: 350px;
+    border-left: thin solid;
+    margin: 1em;
+  }
+
+  main {
+    display: grid;
+    grid-template-columns: 1fr 350px;
+    grid-template-areas:
+      "content aside"; 
+  }
+}
\ No newline at end of file