Create two column layout for wide screen browsers

layouts/_default/baseof.html

@@ -30,13 +30,10 @@
         </nav>
     </header>
     <main {{ if eq .Kind "page" }}class="h-entry"{{ else if in (slice "section" "taxonomy" "taxonomyTerm" ) .Kind  }}class="h-feed"{{ end }}>
+        <div class="content-box">
             <header>
                 {{- block "content-header" . -}}
                 {{- end -}}
-            <nav>
-                {{- block "content-menu" . -}}
-                {{- end -}}
-            </nav>
             </header>
             <section>
                 {{- block "content" . -}}
@@ -47,11 +44,18 @@
                 {{- 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>
+        </div>
     </main>
     <footer>
         {{- block "footer" . -}}

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"; 
+  }
+}