diff --git a/docs/assets/scripts/docs.js b/docs/assets/scripts/docs.js index 6ebffa3..5149a98 100644 --- a/docs/assets/scripts/docs.js +++ b/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."); diff --git a/docs/pages/getting-started/installation.md b/docs/pages/getting-started/installation.md index e882957..ba21000 100644 --- a/docs/pages/getting-started/installation.md +++ b/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'; +``` diff --git a/docs/pages/utilities/border.md b/docs/pages/utilities/border.md index e28d3d8..0aab7e8 100644 --- a/docs/pages/utilities/border.md +++ b/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 diff --git a/docs/pages/utilities/color.md b/docs/pages/utilities/color.md index a836dda..5f7e4de 100644 --- a/docs/pages/utilities/color.md +++ b/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 diff --git a/docs/pages/utilities/cursor.md b/docs/pages/utilities/cursor.md index 7af2716..2040342 100644 --- a/docs/pages/utilities/cursor.md +++ b/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 --- diff --git a/docs/pages/utilities/dimension.md b/docs/pages/utilities/dimension.md index 6de9d67..6fa7dab 100644 --- a/docs/pages/utilities/dimension.md +++ b/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 diff --git a/docs/pages/utilities/display.md b/docs/pages/utilities/display.md index 0b0d059..8f38fc8 100644 --- a/docs/pages/utilities/display.md +++ b/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 diff --git a/docs/pages/utilities/effects.md b/docs/pages/utilities/effects.md index 5263fd6..7a736cd 100644 --- a/docs/pages/utilities/effects.md +++ b/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 diff --git a/docs/pages/utilities/positioning.md b/docs/pages/utilities/positioning.md index 9b68bac..eb55fda 100644 --- a/docs/pages/utilities/positioning.md +++ b/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 diff --git a/docs/pages/utilities/spacing.md b/docs/pages/utilities/spacing.md index b925408..3614b71 100644 --- a/docs/pages/utilities/spacing.md +++ b/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 diff --git a/docs/pages/utilities/text.md b/docs/pages/utilities/text.md index 3f1b401..601473e 100644 --- a/docs/pages/utilities/text.md +++ b/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