Create two column layout for wide screen browsers

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>
+        <div class="content-box">
-            {{- block "content-header" . -}}
+            <header>
-            {{- end -}}
+                {{- 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>
+        </div>
-        <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>
     </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"; 
+  }
+}