Improve Search

docs/assets/scripts/docs.js

@@ -68,6 +68,19 @@ searchInput.addEventListener('input', (event) => {
 });
 const focusSearch = () => setTimeout(() => searchInput.focus(), 50);
 
+document.addEventListener('keydown', (event) => {
+  // Open Search modal on CTRL+F
+  if (event.ctrlKey && event.key === 'f') {
+    event.preventDefault();
+    window.location.hash = 'search';
+    focusSearch();
+  }
+  // Hide modals on ESC
+  if (event.key === 'Escape') {
+    window.location.hash = 'close';
+  }
+});
+
 // Core: Form
 const invalidInput = document.querySelector('#invalid-input');
 invalidInput?.setCustomValidity("Invalid field.");

docs/pages/getting-started/installation.md

@@ -1,7 +1,7 @@
 ---
 title: 'Installation - Sloth.css'
 description: Installation instructions and how to get started
-tags: cdn npm drop-in
+tags: cdn npm drop-in setup download
 ---
 
 ## Installation
@@ -46,4 +46,8 @@ If you don't want to use the CDN or manual download, you can install Sloth.css v
 npm i @devmount/sloth.css
 ```
 
-Now you need to make one of the CSS files under `node_modules/@devmount/sloth.css/` you want available to your app or include it in your build step or bundler.
+Now you need to make one of the CSS files under `node_modules/@devmount/sloth.css/` you want available to your app or include it in your build step or bundler. Since Sloth.css already serves minified styles, the simplest way would be to just include the file you want in your CSS, e.g.:
+
+```css
+@import '@devmount/sloth.css/sloth.min.css';
+```

docs/pages/utilities/border.md

@@ -1,7 +1,7 @@
 ---
 title: 'Utilities: Border - Sloth.css'
 description: Controlling the border of elements
-tags: rounded shape
+tags: rounded shape rounded-full
 ---
 
 ## Border

docs/pages/utilities/color.md

@@ -1,7 +1,7 @@
 ---
 title: 'Utilities: Color - Sloth.css'
 description: Controlling colors of text and backgrounds
-tags: colour accent muted neutral success alert inverted
+tags: colour text-accent text-muted text-success text-alert text-inverted bg-base bg-page bg-accent bg-accent-variant bg-muted bg-success bg-alert
 ---
 
 ## Color

docs/pages/utilities/cursor.md

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

docs/pages/utilities/dimension.md

@@ -1,7 +1,7 @@
 ---
 title: 'Utilities: Dimension - Sloth.css'
 description: Controlling the size of elements
-tags: width height maximum screen
+tags: width height maximum screen w-8 w-12 w-16 w-32 w-64 w-1/2 w-full max-w-screen-xs max-w-screen-sm max-w-screen-md max-w-screen-lg max-w-screen-xl max-w-screen-2xl h-8 h-12 h-16 h-32 h-64 h-1/2 h-full
 ---
 
 ## Dimension

docs/pages/utilities/display.md

@@ -1,7 +1,7 @@
 ---
 title: 'Utilities: Display - Sloth.css'
 description: Controlling the display type of elements
-tags: flex grid column wrap inline block visibility hidden
+tags: flex flex-col grid column grid-cols-1 grid-cols-2 grid-cols-3 flex-wrap inline block inline-block visibility invisible hidden
 ---
 
 ## Display

docs/pages/utilities/effects.md

@@ -1,7 +1,7 @@
 ---
 title: 'Utilities: Effects - Sloth.css'
 description: Controlling elevation and transformation of elements
-tags: shadow rotate
+tags: shadow shadow-float shadow-inset rotate rotate-90
 ---
 
 ## Effects

docs/pages/utilities/positioning.md

@@ -1,7 +1,7 @@
 ---
 title: 'Utilities: Positioning - Sloth.css'
 description: Controlling position, alignment and overflow of elements
-tags: relative absolute fixed sticky center scroll
+tags: relative absolute fixed sticky items-center items-start items-end items-stretch flex-center scroll overflow-hidden overflow-visible overflow-auto overflow-x-auto overflow-y-auto
 ---
 
 ## Positioning

docs/pages/utilities/spacing.md

@@ -1,7 +1,7 @@
 ---
 title: 'Utilities: Spacing - Sloth.css'
 description: Controlling margins, paddings and the space in between elements
-tags: gap placement inset left right bottom top
+tags: gap placement inset left right bottom top margin m-0 m-px m-1 m-2 m-4 m-8 padding p-0 p-px p-1 p-2 p-4 p-8 top-0 top-4 left-0 left-4 bottom-0 bottom-4 right-0 right-4 inset-0 inset-4
 ---
 
 ## Spacing

docs/pages/utilities/text.md

@@ -1,7 +1,7 @@
 ---
 title: 'Utilities: Text - Sloth.css'
 description: Controlling text and font appearance
-tags: underline line-through transnform uppercase lowercase capitalize font-weight font-family size truncate balance whitespace-nowrap vertical
+tags: underline line-through transnform uppercase lowercase capitalize font-weight font-family size truncate balance whitespace-nowrap vertical text-start text-center text-end text-left text-right font-light font-normal font-semibold font-bold font-mono font-sans text-xs text-sm text-base text-lg text-xl whitespace-nowrap text-balance text-vertical
 ---
 
 ## Text