@intergrav/dev.css 4.2.6 → 4.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +11 -0
- package/addon/responsive-sidebar.js +10 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -220,6 +220,17 @@ This addon creates a small "scroll to top" button in the bottom right corner of
|
|
|
220
220
|
></script>
|
|
221
221
|
```
|
|
222
222
|
|
|
223
|
+
### `responsive-sidebar.js`
|
|
224
|
+
|
|
225
|
+
This addon automatically opens and closes `<details>` elements inside sidebars at the 82rem breakpoint. This prevents sidebars from looking awkward on wide screens and improves usability on small screens. To use this addon, add the following line after the `dev.css` import:
|
|
226
|
+
|
|
227
|
+
```html
|
|
228
|
+
<script
|
|
229
|
+
src="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@4/addon/responsive-sidebar.min.js"
|
|
230
|
+
defer
|
|
231
|
+
></script>
|
|
232
|
+
```
|
|
233
|
+
|
|
223
234
|
## Themes
|
|
224
235
|
|
|
225
236
|
dev.css supports custom colors and fonts through themes. You can find some pre-made themes in the `/theme` folder. To use a theme, simply apply it after the dev.css stylesheet. There are night and day themes, a set of Catppuccin themes, and a terminal theme. For example, to apply the terminal theme, add the following line after the `dev.css` import:
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/* responsive-sidebar for dev.css v4, a lightweight CSS framework - https://github.com/intergrav/dev.css */
|
|
2
|
+
/* about: auto open/close `aside article details` at 82rem breakpoint. prevents sidebar from looking awkward on wide screens, improves usability on small screens */
|
|
3
|
+
|
|
4
|
+
const mediaQuery = matchMedia("(min-width: 82rem)");
|
|
5
|
+
const toggleDetails = (matches) =>
|
|
6
|
+
document
|
|
7
|
+
.querySelectorAll("aside article details")
|
|
8
|
+
.forEach((details) => details.toggleAttribute("open", matches));
|
|
9
|
+
toggleDetails(mediaQuery.matches);
|
|
10
|
+
mediaQuery.addEventListener("change", (event) => toggleDetails(event.matches));
|