From 871566ea9e487655ab68bfcd502b9fb006beda33 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andreas=20M=C3=BCller?= Date: Mon, 28 Oct 2024 13:46:12 +0100 Subject: [PATCH 1/4] =?UTF-8?q?=F0=9F=92=9A=20Replace=20quotes=20by=20call?= =?UTF-8?q?outs?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/pages/components/badge.md | 4 +++- docs/pages/components/separator.md | 4 +++- docs/pages/components/toast.md | 4 +++- docs/pages/index.md | 4 +++- docs/pages/utilities/color.md | 4 +++- docs/pages/utilities/display.md | 4 +++- docs/pages/utilities/positioning.md | 8 ++++++-- 7 files changed, 24 insertions(+), 8 deletions(-) diff --git a/docs/pages/components/badge.md b/docs/pages/components/badge.md index d825ad7..06088b5 100644 --- a/docs/pages/components/badge.md +++ b/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 CSS4 now available! ``` -> 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. +

+ 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. +

### Badge variants diff --git a/docs/pages/components/separator.md b/docs/pages/components/separator.md index b5f5a35..0866052 100644 --- a/docs/pages/components/separator.md +++ b/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. +

+ 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. +

diff --git a/docs/pages/components/toast.md b/docs/pages/components/toast.md index 67c5f81..2088ee6 100644 --- a/docs/pages/components/toast.md +++ b/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 Callout 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. +

+ 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. +

### Basic toast diff --git a/docs/pages/index.md b/docs/pages/index.md index 311d4c3..4e59b65 100644 --- a/docs/pages/index.md +++ b/docs/pages/index.md @@ -49,7 +49,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 soonTM +

+ This is still work-in-progress. There will be more components coming soonTM +

## License diff --git a/docs/pages/utilities/color.md b/docs/pages/utilities/color.md index 93c977e..a836dda 100644 --- a/docs/pages/utilities/color.md +++ b/docs/pages/utilities/color.md @@ -30,7 +30,9 @@ Text is colored according to the color scheme per default. Use the `text-inverte

Inverted color

``` -> 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. +

+ 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. +

Colors can be overwritten by the corresponding custom property: diff --git a/docs/pages/utilities/display.md b/docs/pages/utilities/display.md index 3958b50..0b0d059 100644 --- a/docs/pages/utilities/display.md +++ b/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 `flex flex-column`. Just use `flex-col`. +

+ 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 flex flex-column. Just use flex-col. +

User the `flex-wrap` class, if you want your flex items to break onto a new line when the container limit is reached. diff --git a/docs/pages/utilities/positioning.md b/docs/pages/utilities/positioning.md index 8caff6e..9b68bac 100644 --- a/docs/pages/utilities/positioning.md +++ b/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. +

+ Note that sticky always needs a value for the top property, hence top-0 or top-4 need to be set too. +

### 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 `flex justify-center items-center`. Just use `flex-center`. +

+ 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 flex justify-center items-center. Just use flex-center. +

### Overflow From 5ac6d8e8f4c2fcc03a7c2cc853f6ac004bdbdf96 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andreas=20M=C3=BCller?= Date: Mon, 28 Oct 2024 17:23:45 +0100 Subject: [PATCH 2/4] =?UTF-8?q?=E2=9E=95=20Add=20page=20toc=20(wip)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/_includes/default.njk | 7 ++++--- docs/assets/styles/docs.css | 3 ++- eleventy.config.js | 14 ++++++++++---- package.json | 3 ++- 4 files changed, 18 insertions(+), 9 deletions(-) diff --git a/docs/_includes/default.njk b/docs/_includes/default.njk index e7192a0..13eae3c 100644 --- a/docs/_includes/default.njk +++ b/docs/_includes/default.njk @@ -101,10 +101,11 @@
- {% block content %} - {{ content | safe }} - {% endblock %} + {{ content | safe }}
+