From dc50ad58596e0a1bf2d340f8d7c29e72e23296ab Mon Sep 17 00:00:00 2001
From: "Florine W. Dekker" <florine@fwdekker.com>
Date: Wed, 23 Nov 2022 12:13:38 +0100
Subject: [PATCH] Rename container sidebar class

Fixes #29.
---
 README.md                        |  1 +
 src/main/css/snippets/common.css | 28 ++++++----------------------
 src/test/index.html              |  5 ++++-
 3 files changed, 11 insertions(+), 23 deletions(-)

diff --git a/README.md b/README.md
index 8b1cfc5..83b44d1 100644
--- a/README.md
+++ b/README.md
@@ -12,6 +12,7 @@ All JavaScript functionalities are exposed using the `window.fwdekker` object.
 Some functionalities are automatically executed after configuring some `<meta>` tags in the HTML.
 For example, set `<meta name="fwd:nav:target" content="#nav" />` to automatically put the navigation bar in the `#nav`
 element.
+All meta-tag behaviour is opt-in.
 
 Read the files' individual documentation for more information.
 
diff --git a/src/main/css/snippets/common.css b/src/main/css/snippets/common.css
index 15639c5..bfcc4e6 100644
--- a/src/main/css/snippets/common.css
+++ b/src/main/css/snippets/common.css
@@ -38,41 +38,25 @@ a[target="_blank"]::after {
     }
 }
 
-/* Container with aside, e.g. for table of contents */
-@media (min-width: 576px) {
+/* Container with sidebar, e.g. for table of contents */
+@media (min-width: 992px) {
     :root {
         --aside-width: 200px;
     }
 
-    .container-with-toc,
-    .container-with-aside-left,
-    .container-with-aside-right {
+    .grid-with-sidebar {
         display: grid;
         grid-column-gap: calc(var(--block-spacing-horizontal) * 3);
-    }
-
-    .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
-    {
+    .grid-with-sidebar aside {
         max-width: var(--aside-width);
     }
 }
 
-@media (max-width: 576px) {
-    .container-with-toc aside,
-    .container-with-aside-left aside,
-    .container-with-aside-right aside
-    {
+@media (max-width: 992px) {
+    .grid-with-sidebar aside {
         margin-bottom: var(--block-spacing-vertical);
     }
 }
diff --git a/src/test/index.html b/src/test/index.html
index c489611..a3ddc08 100644
--- a/src/test/index.html
+++ b/src/test/index.html
@@ -29,7 +29,10 @@
     </p>
 </noscript>
 <nav id="nav"></nav>
-<main class="container">
+<main class="container grid-with-sidebar">
+    <aside>
+        Table of contents test
+    </aside>
     <div role="document">
         <section>
             <header class="fwd-header">