Documentation: Secondary menu

docs/_includes/default.njk

@@ -95,16 +95,17 @@
     </aside>
 
     {# Menu overlay #}
-    <a class="menu-overlay" href="#"></a>
+    <a class="menu-overlay" href="#close"></a>
 
     {# Page content #}
     <main>
       <article id="content">
         <div>
-          {% block content %}
-            {{ content | safe }}
-          {% endblock %}
+          {{ content | safe }}
         </div>
+        {% if not notoc %}
+          {{ content | toc | safe }}
+        {% endif %}
       </article>
 
       <footer>

docs/assets/scripts/docs.js

@@ -73,7 +73,7 @@ const invalidInput = document.querySelector('#invalid-input');
 invalidInput?.setCustomValidity("Invalid field.");
 
 // Component: Toast
-const toast = document.querySelector('#toast');
+const toast = document.querySelector('#toast-demo');
 const toggleToast = () => toast.classList.toggle('active');
 const toastPositions = ['br', 'tr', 'tl', 'bl'];
 const positionToast = (pos) => {

docs/assets/styles/docs.css

@@ -1,5 +1,6 @@
 html {
   scrollbar-width: thin;
+  scroll-behavior: smooth;
 }
 
 /* Page layout with collapsible sidebar menu (CSS only) */
@@ -214,23 +215,60 @@ body {
     } 
   }
 
-  &>main {
-    padding: 4rem 1rem 1rem 1rem;
+  & > main {
+    padding: 5rem 1rem 1rem 1rem;
     max-width: 1260px;
     width: 100%;
     box-sizing: border-box;
     transition: var(--transition-spacing);
 
     #content {
-      transition: opacity .15s ease;;
+      position: relative;
+
+      .toc {
+        display: none;
+        font-size: .875rem;
+        position: absolute;
+        top: 5rem;
+        right: -16rem;
+        width: 14rem;
+        height: 100%;
+
+        & > ul {
+          position: sticky;
+          top: 5rem;
+          border-left: 1px solid var(--color-border);
+          list-style-type: none;
+          padding: .5rem 0 .5rem 1rem;
+
+          ul {
+            list-style-type: none;
+            padding: 0;
+
+            li {
+              padding: .125rem 0;
+
+              a {
+                &:not(:hover) {
+                  color: var(--color-text-muted);
+                }
+
+                &:hover {
+                  text-decoration-style: dashed;
+                }
+              }
+            }
+          }
+        }
+      }
     }
 
     footer {
       margin: 4rem 0;
     }
   }
 
-  &>.menu-overlay {
+  & > .menu-overlay {
     position: fixed;
     background: #00000077;
     border: none;
@@ -244,17 +282,18 @@ body {
   }
 }
 
+/* Responsiveness */
 @media (min-width: 1024px) {
   body {
-    &>.menu-trigger {
+    & > .menu-trigger {
       display: none;
     }
 
-    &>aside {
+    & > aside {
       transform: none;
     }
 
-    &>header {
+    & > header {
       background-color: transparent;
       backdrop-filter: initial;
 
@@ -265,16 +304,21 @@ body {
       }
     }
 
-    &>main {
+    & > main {
       padding-top: 2rem;
       padding-left: 18rem;
     }
 
-    &>.menu-overlay {
+    & > .menu-overlay {
       display: none;
     }
   }
 }
+@media (min-width: 1500px) {
+  body > main #content .toc {
+    display: block;
+  }
+}
 
 /* Code examples */
 .demo {

docs/pages/components/badge.md

@@ -26,7 +26,9 @@ Use the `badge` class to add a small bubble indicator at the top right corner of
 <span class="badge" data-badge="new">CSS4 now available!</span>
 ```
 
-> Note that the badge element itself is by design not part of the text flow to keep spacing between elements consistent. Therefore long badge contents should be avoided or only used where appropriate.
+<p class="callout accent">
+  Note that the badge element itself is by design not part of the text flow to keep spacing between elements consistent. Therefore long badge contents should be avoided or only used where appropriate.
+</p>
 
 ### Badge variants
 

docs/pages/components/separator.md

@@ -34,7 +34,9 @@ Use the `separator` class to add a horizontal line. Every content added to that
 
 Use the `separator` and the `vertical` class to add a vertical line. Every content added to that element appears as its label. No content will result in a single vertical line.
 
-> Note that vertical separators only work in a flex container with flex direction row. If you're using utility classes, you can just give it the `flex` class or set `display: flex;` on it.
+<p class="callout accent">
+  Note that vertical separators only work in a flex container with flex direction row. If you're using utility classes, you can just give it the <code>flex</code> class or set <code>display: flex;</code> on it.
+</p>
 
 <div class="demo">
   <div class="max-w-screen-md flex">

docs/pages/components/toast.md

@@ -8,7 +8,9 @@ tags: callout position variants neutral accent success alert
 
 A toast notificataion is a dynamic message component, that is only visible after a certain action. For this use case, the <a href="/components/callout">Callout</a> component is used and extended to show up on a fixed position.
 
-> Sloth.css is a CSS only library and does not ship any JavaScript. To handle appearance, and manual or autmatic closing of toast messages, you'll need to implement that with JavaScript.
+<p class="callout accent">
+  Sloth.css is a CSS only library and does not ship any JavaScript. To handle appearance, and manual or autmatic closing of toast messages, you'll need to implement that with JavaScript.
+</p>
 
 ### Basic toast
 
@@ -19,7 +21,7 @@ Use the `toast callout` classes to create a toast notification. The toast elemen
   <div class="flex gap-2">
     <button onclick="toggleToast()">Toggle</button>
   </div>
-  <div class="toast callout active" id="toast">
+  <div class="toast callout active" id="toast-demo">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   </div>
 </div>

docs/pages/getting-started/changelog.md

@@ -8,6 +8,26 @@ tags: release version changes
 
 Sloth.css uses [semantic versioning](https://semver.org/) to indicate breaking changes, major changes with downward compatibility or minor changes.
 
-### 0.1.0
+### 0.2.0-beta
+
+- 📜 Add documentation ([#1](https://github.com/devmount/sloth.css/pull/1), [#32](https://github.com/devmount/sloth.css/pull/32), [#38](https://github.com/devmount/sloth.css/pull/38))
+- 🚀 Build tool ([#2](https://github.com/devmount/sloth.css/pull/2), [#15](https://github.com/devmount/sloth.css/pull/15))
+- 📜 Code of conduct ([#7](https://github.com/devmount/sloth.css/pull/7))
+- 📜 Organize repository ([#8](https://github.com/devmount/sloth.css/pull/8), [#9](https://github.com/devmount/sloth.css/pull/9), [#10](https://github.com/devmount/sloth.css/pull/10), [#13](https://github.com/devmount/sloth.css/pull/13))
+- 📜 Contribution guidelines ([#11](https://github.com/devmount/sloth.css/pull/11))
+- 🔨 Fix deprecated overlow class ([#14](https://github.com/devmount/sloth.css/pull/14))
+- ➕ Component: Badge ([#16](https://github.com/devmount/sloth.css/pull/16))
+- ➕ Component: Separator ([#18](https://github.com/devmount/sloth.css/pull/18))
+- ➕ Component: Callout ([#25](https://github.com/devmount/sloth.css/pull/25))
+- ➕ Component: Breadcrumb ([#26](https://github.com/devmount/sloth.css/pull/26))
+- ➕ Component: State ([#27](https://github.com/devmount/sloth.css/pull/27))
+- ➕ Component: Toast ([#28](https://github.com/devmount/sloth.css/pull/28))
+- 💚 Color improvements ([#29](https://github.com/devmount/sloth.css/pull/29))
+- ➕ Component: Button ([#30](https://github.com/devmount/sloth.css/pull/30), [#34](https://github.com/devmount/sloth.css/pull/34))
+- ➕ Component: Loader ([#31](https://github.com/devmount/sloth.css/pull/31))
+- ⚡️ Performance optimizations ([#33](https://github.com/devmount/sloth.css/pull/33))
+- ➕ Input invalid state ([#39](https://github.com/devmount/sloth.css/pull/39))
+
+### 0.1.0-beta
 
 - 🚀 Initial release

docs/pages/getting-started/contributing.md

@@ -31,7 +31,7 @@ Enhancement suggestions are also tracked as [GitHub issues]({{ repoUrl }}/issues
 - [CSS component request]({{ repoUrl }}/issues/new?assignees=&labels=enhancement%2Ccomponent&projects=&template=css_component_request.md&title=New+CSS+component%3A+)
 - [Utility class request]({{ repoUrl }}/issues/new?assignees=&labels=enhancement%2Cutility&projects=&template=utility_class_request.md&title=New+utility+class%3A+)
 
-### Provide code changes via pull requests
+### Code changes via pull requests
 
 Complete the required template. Please do not include issue numbers in the PR title, but mention it in the PR body.
 
@@ -52,7 +52,7 @@ Complete the required template. Please do not include issue numbers in the PR ti
   - 👕 `:shirt:` when refactoring or removing linter warnings
   - ❌ `:x:` when removing code or files
 
-## Beta-Testing
+### Beta-Testing
 
 Testing the current state and reporting bugs is a great way to help! Here's how:
 

docs/pages/getting-started/usage.md

@@ -58,7 +58,7 @@ Here is an example of the badge component with a pulse variation:
 <span class="badge pulse" data-badge="99+">Inbox</span>
 ```
 
-## Customizing
+### Customizing
 
 Sloth.css uses CSS custom properties for core styles. You can customize and override them by using a `:root` selector, e.g.:
 

docs/pages/index.md

@@ -1,6 +1,7 @@
 ---
 title: 'Sloth.css: A drop-in utility component CSS library for lazy mammals.'
 description: Hand-crafted core styles, utility classes and components for dropping in
+notoc: true
 ---
 
 <header role="banner" class="text-center">
@@ -49,7 +50,9 @@ If you want to create quick mockups without leaving your markup, you can use Slo
 
 If you need more advanced elements on your page, you can use Sloth.css with prestyled components included. Badges, Cards, Modals, Tooltips and more - take a look at the complete list in the docs.
 
-> This is work-in-progress. There will be more components soon<sup><small>TM</small></sup>
+<p class="callout accent">
+  This is still work-in-progress. There will be more components coming soon<sup><small>TM</small></sup>
+</p>
 
 ## License
 

docs/pages/utilities/color.md

@@ -30,7 +30,9 @@ Text is colored according to the color scheme per default. Use the `text-inverte
 <p class="text-inverted">Inverted color</p>
 ```
 
-> Note that you can use `text-light` and `text-dark` to keep the text color despite the color scheme. But please only use this with sufficient contrast to the background.
+<p class="callout accent">
+  Note that you can use <code>text-light</code> and <code>text-dark</code> to keep the text color despite the color scheme. But please only use this with sufficient contrast to the background.
+</p>
 
 Colors can be overwritten by the corresponding custom property:
 

docs/pages/utilities/cursor.md

@@ -2,6 +2,7 @@
 title: 'Utilities: Cursor - Sloth.css'
 description: Controlling cursor types
 tags: default pointer help not-allowed
+notoc: true
 ---
 
 ## Cursor

docs/pages/utilities/display.md

@@ -57,7 +57,9 @@ Elements can also be position underneath each other (column direction) instead o
 }
 ```
 
-> Note that `flex-col` is a display utility and already includes the `display: flex;` rule. So there's no need to use two classes like in Tailwind <del>`flex flex-column`</del>. Just use <ins>`flex-col`</ins>.
+<p class="callout accent">
+  Note that <code>flex-col</code> is a display utility and already includes the <code>display: flex;</code> rule. So there's no need to use two classes like in Tailwind <del><code>flex flex-column</code></del>. Just use <ins><code>flex-col</code></ins>.
+</p>
 
 User the `flex-wrap` class, if you want your flex items to break onto a new line when the container limit is reached.
 

docs/pages/utilities/positioning.md

@@ -59,7 +59,9 @@ The following 4 values of positions are supported.
 .sticky   { position: sticky;   }
 ```
 
-> Note that `sticky` always needs a value for the [top property](https://developer.mozilla.org/en-US/docs/Web/CSS/top), hence `top-0` or `top-4` need to be set too.
+<p class="callout accent">
+  Note that <code>sticky</code> always needs a value for the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/top" target="_blank">top property</a>, hence <code>top-0</code> or <code>top-4</code> need to be set too.
+</p>
 
 ### Alignment
 
@@ -175,7 +177,9 @@ For centering content horizontally and vertically, the special utility class `fl
 }
 ```
 
-> Note that `flex-center` is a display utility and already includes the `display: flex;` rule. So there's no need to use three classes like in Tailwind <del>`flex justify-center items-center`</del>. Just use <ins>`flex-center`</ins>.
+<p class="callout accent">
+  Note that <code>flex-center</code> is a display utility and already includes the <code>display: flex;</code> rule. So there's no need to use three classes like in Tailwind <del><code>flex justify-center items-center</code></del>. Just use <ins><code>flex-center</code></ins>.
+</p>
 
 ### Overflow
 

eleventy.config.js

@@ -1,8 +1,12 @@
-const fs = require('fs');
-const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
+import fs from 'fs';
+import syntaxHighlight from "@11ty/eleventy-plugin-syntaxhighlight";
+import markdownit from "markdown-it";
+import anchor from "markdown-it-anchor";
+import tocPlugin from "eleventy-plugin-toc";
+
 const VERSION = '0.2.0';
 
-module.exports = function(eleventyConfig) {
+export default function (eleventyConfig) {
   // Get utility sections
   // Those can be retrieved from the single _utilities.css file.
   // Every section is a single line CSS comment
@@ -20,6 +24,11 @@ module.exports = function(eleventyConfig) {
 
   // Init plugins
   eleventyConfig.addPlugin(syntaxHighlight);
+  eleventyConfig.setLibrary("md", markdownit().set({ html: true }).use(anchor));
+  eleventyConfig.addPlugin(tocPlugin, {
+    tags: ["h2", "h3"],
+    ul: true,
+  });
 
   // Build search index
   const index = [];
@@ -57,7 +66,6 @@ module.exports = function(eleventyConfig) {
   eleventyConfig.addGlobalData('creatorUrl', 'https://devmount.com');
   eleventyConfig.addGlobalData('donationUrl', 'https://paypal.me/devmount');
   eleventyConfig.addGlobalData('layout', 'default');
-  eleventyConfig.addGlobalData('toc', true);
   eleventyConfig.addGlobalData('meta', {
     title: 'Sloth.css',
     version: VERSION,