From 5e020a5692b0e1637fd7bcccf155e36afa522c89 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andreas=20M=C3=BCller?= Date: Fri, 29 Nov 2024 21:20:01 +0100 Subject: [PATCH 1/4] =?UTF-8?q?=E2=9E=95=20Add=20more=20utility=20tags?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/pages/utilities/border.md | 2 +- docs/pages/utilities/color.md | 2 +- docs/pages/utilities/cursor.md | 2 +- docs/pages/utilities/dimension.md | 2 +- docs/pages/utilities/display.md | 2 +- docs/pages/utilities/effects.md | 2 +- docs/pages/utilities/positioning.md | 2 +- docs/pages/utilities/spacing.md | 2 +- docs/pages/utilities/text.md | 2 +- 9 files changed, 9 insertions(+), 9 deletions(-) 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 From dade8442b04dfe9c4c1774371a7b82c1b433eeca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andreas=20M=C3=BCller?= Date: Fri, 29 Nov 2024 21:53:25 +0100 Subject: [PATCH 2/4] =?UTF-8?q?=E2=9E=95=20Add=20hotkey=20support=20for=20?= =?UTF-8?q?search?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/assets/scripts/docs.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) 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."); From 4c61bb3a08ba60280c8ee8c6d423c167bb86f899 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andreas=20M=C3=BCller?= Date: Fri, 29 Nov 2024 22:08:24 +0100 Subject: [PATCH 3/4] =?UTF-8?q?=E2=9E=95=20Add=20more=20get=20started=20ta?= =?UTF-8?q?gs?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/pages/getting-started/installation.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/pages/getting-started/installation.md b/docs/pages/getting-started/installation.md index e882957..014ed3e 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 From a7f2a359e8259251939648fbc33801d1d5e90183 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andreas=20M=C3=BCller?= Date: Fri, 29 Nov 2024 22:14:38 +0100 Subject: [PATCH 4/4] =?UTF-8?q?=F0=9F=93=9C=20Extend=20installation=20docs?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/pages/getting-started/installation.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/docs/pages/getting-started/installation.md b/docs/pages/getting-started/installation.md index 014ed3e..ba21000 100644 --- a/docs/pages/getting-started/installation.md +++ b/docs/pages/getting-started/installation.md @@ -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'; +```