Rename container sidebar class

Fixes #29.

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.
 

src/main/css/snippets/common.css

@@ -38,41 +38,25 @@ a[target="_blank"]::after {
     }
 }
 
-/* Container with aside, e.g. for table of contents */
+/* Container with sidebar, e.g. for table of contents */
-@media (min-width: 576px) {
+@media (min-width: 992px) {
     :root {
         --aside-width: 200px;
     }
 
-    .container-with-toc,
+    .grid-with-sidebar {
-    .container-with-aside-left,
-    .container-with-aside-right {
         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-with-sidebar aside {
-        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) {
+@media (max-width: 992px) {
-    .container-with-toc aside,
+    .grid-with-sidebar aside {
-    .container-with-aside-left aside,
-    .container-with-aside-right aside
-    {
         margin-bottom: var(--block-spacing-vertical);
     }
 }

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