Implement right-side aside

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",

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);
     }
 }

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 -->