From 64eb21dfb8d498b36c9b2023ae52ded721806b85 Mon Sep 17 00:00:00 2001
From: "Florine W. Dekker" <florine@fwdekker.com>
Date: Mon, 21 Nov 2022 18:03:34 +0100
Subject: [PATCH] Implement right-side aside

---
 package.json                     |  2 +-
 src/main/css/snippets/common.css | 32 ++++++++++++++++++++++++++------
 src/test/index.html              | 22 +++++++++++-----------
 3 files changed, 38 insertions(+), 18 deletions(-)

diff --git a/package.json b/package.json
index 8d14879..1eeb64f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@fwdekker/template",
-    "version": "3.1.1",
+    "version": "3.2.0",
     "description": "The base template for pages on fwdekker.com.",
     "author": "Florine W. Dekker",
     "license": "MIT",
diff --git a/src/main/css/snippets/common.css b/src/main/css/snippets/common.css
index 01a04dd..15639c5 100644
--- a/src/main/css/snippets/common.css
+++ b/src/main/css/snippets/common.css
@@ -38,21 +38,41 @@ a[target="_blank"]::after {
     }
 }
 
-/* Container with table of contents */
+/* Container with aside, e.g. for table of contents */
 @media (min-width: 576px) {
-    .container-with-toc {
+    :root {
+        --aside-width: 200px;
+    }
+
+    .container-with-toc,
+    .container-with-aside-left,
+    .container-with-aside-right {
         display: grid;
-        grid-template-columns: 200px auto;
         grid-column-gap: calc(var(--block-spacing-horizontal) * 3);
     }
 
-    .container-with-toc nav {
-        max-width: 200px;
+    .container-with-toc,
+    .container-with-aside-left {
+        grid-template-columns: var(--aside-width) auto;
+    }
+
+    .container-with-aside-right {
+        grid-template-columns: auto var(--aside-width);
+    }
+
+    .container-with-toc nav,
+    .container-with-aside-left nav,
+    .container-with-aside-right nav
+    {
+        max-width: var(--aside-width);
     }
 }
 
 @media (max-width: 576px) {
-    .container-with-toc aside {
+    .container-with-toc aside,
+    .container-with-aside-left aside,
+    .container-with-aside-right aside
+    {
         margin-bottom: var(--block-spacing-vertical);
     }
 }
diff --git a/src/test/index.html b/src/test/index.html
index f10dc5d..b87160f 100644
--- a/src/test/index.html
+++ b/src/test/index.html
@@ -29,17 +29,7 @@
     </p>
 </noscript>
 <nav id="nav"></nav>
-<main class="container container-with-toc">
-    <aside>
-        <nav>
-            <b class="hidden-no-mobile">Table of contents</b>
-            <ul>
-                <li>Item 1</li>
-                <li>Item 2</li>
-            </ul>
-            <hr class="hidden-no-mobile" />
-        </nav>
-    </aside>
+<main class="container container-with-aside-right">
     <div role="document">
         <section>
             <header class="fwd-header">
@@ -91,6 +81,16 @@
         </section>
         <footer id="footer"></footer>
     </div>
+    <aside>
+        <nav>
+            <b class="hidden-no-mobile">Table of contents</b>
+            <ul>
+                <li>Item 1</li>
+                <li>Item 2</li>
+            </ul>
+            <hr class="hidden-no-mobile" />
+        </nav>
+    </aside>
 </main>
 
 <!--suppress HtmlUnknownTarget -->