From 59fe64ff1128bf7f6a1e4f409fb770a6c0379023 Mon Sep 17 00:00:00 2001 From: Simon Padbury Date: Wed, 27 Nov 2024 19:03:21 +0000 Subject: [PATCH] v.3.4.0 --- CHANGELOG.md | 35 +- README.md | 14 +- _src/buttons.md | 63 +- _src/colors.md | 543 ++++++------- _src/css/baselayer.css | 9 +- _src/css/min/baselayer.min.css | 4 +- _src/css/partials/accessibility.css | 64 ++ _src/css/partials/base.css | 41 +- _src/css/partials/colors-oklch.css | 747 ----------------- _src/css/partials/colors.css | 335 ++++---- _src/css/partials/decoration.css | 240 +++--- _src/css/partials/forms.css | 86 +- _src/css/partials/layout.css | 328 ++++---- _src/css/partials/reset.css | 18 +- _src/css/partials/typography.css | 229 +++--- _src/css/partials/variables.css | 339 ++++---- _src/data/metadata.json | 8 +- _src/decoration.md | 205 ++--- _src/examples.md | 424 +++++----- _src/forms.md | 20 +- _src/index.md | 87 +- _src/layout.md | 540 ++++++++----- _src/templates/base-fw.njk | 19 +- _src/templates/base.njk | 242 ++---- _src/templates/includes/docs.css | 94 +++ _src/templates/includes/menu.js | 28 +- _src/templates/includes/site-nav.njk | 156 ++-- _src/templates/includes/switcher.js | 104 +-- _src/typography.md | 379 +++++---- baselayer-3.code-workspace | 10 - docs/buttons/index.html | 655 ++++++++------- docs/colors/index.html | 1109 +++++++++++++------------- docs/css/min/baselayer.min.css | 4 +- docs/decoration/index.html | 790 +++++++++--------- docs/examples/index.html | 418 +++++----- docs/forms/index.html | 613 +++++++------- docs/index.html | 664 +++++++-------- docs/layout/index.html | 1097 +++++++++++++------------ docs/typography/index.html | 937 +++++++++++----------- frontmatter.json | 3 - package-lock.json | 992 ++++++++++++----------- 41 files changed, 6209 insertions(+), 6484 deletions(-) create mode 100644 _src/css/partials/accessibility.css delete mode 100644 _src/css/partials/colors-oklch.css create mode 100644 _src/templates/includes/docs.css delete mode 100644 baselayer-3.code-workspace delete mode 100644 frontmatter.json diff --git a/CHANGELOG.md b/CHANGELOG.md index db9c50a..1616b1b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,4 +1,4 @@ - + ... ``` @@ -78,16 +79,16 @@ Border, background, and text color utilities can be used.
- - + +
``` - + - + ``` When colorizing buttons, remember to set their `hover:` hover state shades too. @@ -97,7 +98,7 @@ When colorizing buttons, remember to set their `hover:` hover state shades too. - Link “button” + Link “button”

@@ -112,7 +113,8 @@ When colorizing buttons, remember to set their `hover:` hover state shades too. -Link “button” + +Link “button” ``` ## Buttons with icons @@ -157,55 +159,40 @@ The `r-pill` class on a square icon button will make it circular. (See [decorati

-   -   +

``` - + - + ``` ## Button sizes Buttons (and the `btn` utility) will resize according to the font-size of the block that they are inside. -You can also use the typographic size classes `t-small` and `t-big` to modify buttons directly. +You can also use the typographic size classes `t-sm` and `t-lg` to modify buttons directly.
- + - +
```
- + - +
``` -Button x-axis padding is `1em`, so that it will also respond to the text size of the button. - -## Stretch buttons - -You can increase the x-axis padding (using the responsive `px-2` or `px-3`) to make a button more impressive: +Notes on buttons: -
- - - -
- -``` - - - - - -``` +1. Button x-axis padding is `1em`, so that it will also respond to the text size of the button. +2. Buttons have the same min-height as form input fields, so that they can be used in combination. diff --git a/_src/colors.md b/_src/colors.md index c37766c..d922dbb 100644 --- a/_src/colors.md +++ b/_src/colors.md @@ -9,167 +9,183 @@ nextLink: "Forms" --- -
- Since March 2023, all “evergreen” browsers (Chrome, Edge, Firefox, Safari) have capability for the new color-mix() function (see Can I use). Baselayer 3.3.x uses this function to set up a range of shades for its built-in (example) colors. +
+ Since March 2023, all “evergreen” browsers (Chrome, Edge, Firefox, Safari) have capability for the new color-mix() function (see Can I use). Baselayer uses this function to set up a range of shades for its built-in (example) colors.
-Example using background `bg-*` utility classes: - -
-
-
bg-blue
-
bg-100
-
bg-200
-
bg-300
-
bg-400
-
bg-500
-
bg-600
-
bg-700
-
bg-800
-
bg-900
+## Rationale for Baselayer’s color system + +I wanted to develop a color system based on interpolating CSS variables for generating a series _lightness levels_ for each color, so that the stylesheet doesn’t need to be loaded with lighness classes for every color — most of which you’d never use. + +After experimenting with variables in _lightness channels_ within color codes, I discovered the new (mid-2023) [color-mix function](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix). Using `color-mix()` has proved to be better suited to what I was trying to do. With it we can build a series of lightness levels by mixing in white (tints) or black (shades). + +For repeatability in Baselayer CSS, starting color swatches need to have a mid-range lightness level, but they can be specified using any system. Currently, Baselayer default colors are set using Hex `#` codes. And the color-mix function now outputs colors in [OKLCH](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch) using `color-mix(in OKLCH ...)` because I this gives perceptually uniform lightness levels. + +The color utility CSS class names remain the same as before (explained below). Example using background `bg-*` utility classes: + +
+
+
blue
+
100
+
200
+
300
+
400
+
500
+
600
+
700
+
800
+
900
-
-
bg-green
-
bg-100
-
bg-200
-
bg-300
-
bg-400
-
bg-500
-
bg-600
-
bg-700
-
bg-800
-
bg-900
+
+
green
+
100
+
200
+
300
+
400
+
500
+
600
+
700
+
800
+
900
-
-
bg-amber
-
bg-100
-
bg-200
-
bg-300
-
bg-400
-
bg-500
-
bg-600
-
bg-700
-
bg-800
-
bg-900
+
+
amber
+
100
+
200
+
300
+
400
+
500
+
600
+
700
+
800
+
900
-
-
bg-red
-
bg-100
-
bg-200
-
bg-300
-
bg-400
-
bg-500
-
bg-600
-
bg-700
-
bg-800
-
bg-900
+
+
red
+
100
+
200
+
300
+
400
+
500
+
600
+
700
+
800
+
900
-
-
bg-gray
-
bg-100
-
bg-200
-
bg-300
-
bg-400
-
bg-500
-
bg-600
-
bg-700
-
bg-800
-
bg-900
+
+
gray
+
100
+
200
+
300
+
400
+
500
+
600
+
700
+
800
+
900
-## Rationale for Baselayer’s color system - -I wanted to develop a color system that was based on CSS variables for generating a series of shades for each color, so that the stylesheet didn’t need to be overloaded with all the shade permutations for each color — most of which you would never use. - -Previously, I experimented with setting **shades based on lightness channels**, first in the `hsl` (Baselayer 3.1.x) and later in the new `oklch` color systems (Baselayer 3.2.x). This was successful, but it involved the additional effort of converting colors to OKLCH and to separate out their color channels into different variables, for enabling them to work with the shade channel utilities. +Also available: -In Baselayer 3.3, I have switched to setting **shades based on mixing in white or black** using the new `color-mix()` function (see [MDN docs: color-mix()](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix)). The CSS classes remain the same as before, while the color format is now hex (#) based. This is easier to maintain, and stylesheet is smaller. +1. A built-in [dark theme](#dark-theme). +2. Black, white, and transparent — see [other Baselayer color utilities](#other-baselayer-color-utilities). ## Color and shade utility classes -All colors and shades are declared in `variables.css`. - -Color utility classes (declared in `@layer color-setup`) are prefixed acording to where the color will be applied: - -* Border color: - * `b-*` - * `hover:b-*` — border color on hover -* Text color: - * `t-*` - * `hover:t-*` — text color on hover -* Background color: - * `bg-*` - * `hover:bg-*` — background color on hover +All colors and lightness levels are declared in `variables.css`. -I have named the colors according to their common names (blue, green, amber, red, gray), instead of opting to name them according to the common user interface (UI) “success”, “warning”, “danger” etc. — so that you can make color utilities or components with colors dedicated to those purposes, meanwhile allowing you to adjust these built-in named colors and also add your own. +Color utility classes (declared in `@layer color` in `colors.css`) are prefixed acording to where the color will be applied — border `b-*` text `t-*` or background `bg-*`. I have named the colors according to their common names (blue, green, amber, red, gray). You can modify the root variables of these colors, and you can [add your own colors](#adding-more-colors). -All color utilities “start” at their `*-500` level, or mid-tone (this is what you will get if you don’t add a shade modifier utility). - -The shade modifier utilities (declared in `@layer color-shade`) are as follows: - -* Border: - * `b-100` through `b-900` - * `hover:b-100` through `hover:b-900` -* Text: - * `t-100` through `t-900` - * `hover:t-100` through `hover:t-900` -* Background: - * `bg-100` through `bg-900` - * `hover:bg-100` through `hover:bg-900` - -Also available: - -1. [Dark theme](#dark-theme), via the `theme-dark` wrapper — see . -2. `b-dark-invert`, `t-dark-invert`, and `bg-dark-invert` modifiers that invert the shade for dark mode, in those situations when you want light elements in light mode to become dark elements in dark mode (and _vise versa_) — see [darker and inverted shade utilities](#darker-and-inverted-shade-utilities). -3. Black, white, reversi, and transparent — see [other Baselayer color utilities](#other-baselayer-color-utilities). +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Border ColorText ColorBackground Color
Default stateHover stateDefault stateHover stateDefault stateHover state
Base color classb-*hover:b-*t-*hover:t-*bg-*hover:bg-*
Lightness modifierb-100
...
b-900		hover:b-100
...
hover:b-900		t-100
...
t-900		hover:t-100
...
hover:t-900		bg-100
...
bg-900		hover:bg-100
...
hover:bg-900
+
Example border, text and background utilities: -
-
b-green
-
t-green t-600 t-dark-invert
-
bg-green bg-200
+
+
b-green
+
t-green t-600 t-dark-invert
+
bg-green bg-200
+See also [inverting lightness levels for the dark theme](#inverting-lightness-levels-for-the-dark-theme) + ``` -
+
``` Example usage: -
- ⚠ Warning alert panel. +
+ ☆ Note (information) panel.
```html -
- ⚠ Warning alert panel. +
+ ☆ Note (information) panel.
``` -The shades `*-100` through `*-900`, if used alone, don’t provide color. But if you use them to supplement one of the other colors above, then that color class will provide the color, and the shade class will set its lightness level. +The lighness modifiers `*-100` through `*-900`, if used alone, do not provide color. But if you use them to supplement one of the base colors above, then that color class will provide the color, and the modifier will set its lightness level. ## Colors and accessibility -
+
In any color model, color combinations must be chosen with care so that there is sufficient contrast between text and background colors for purposes of assessibility.
-In your text and background color combinations, be careful to ensure that the text is readable — there needs to be an adequate contrast. Generally, you will want to aim at **WCAG level AA** for accessibility compliance. +In your text and background color combinations, be careful to ensure that the text is readable — there needs to be an adequate contrast. Most organizations should to aim for [WCAG level AA](https://www.w3.org/WAI/WCAG2AA-Conformance) for accessibility requirements. -For WCAG level AA compliance, most user interface colors need to be _darker than the middle shade_ (i.e. use `*-600` up) if the text color is white, or _lighter than the middle shade_ (i.e. use `*-400` down) if the text color is black. +For WCAG level AA conformance, most user interface colors need to be _darker than the mid-level_ (i.e. use `*-600` up) if the text color is white, or _lighter than the mid-level_ (i.e. use `*-400` down) if the text color is black. -However, any colors near yellow, such as Baselayer amber, as well as orange and yellow-green (not included) are notoriously difficult for accessibility. You may do better using a lighter background amber and pairing it with black text. +However, any colors near yellow such as Baselayer amber, as well as orange and yellow-green (not included), are especially difficult for accessibility. You may do better using a lighter background amber and pairing it with black text (or vise versa). -
+

- - + +

@@ -183,10 +199,10 @@ When colorizing buttons, remember to set their `hover:` hover state shades too. - + - + ``` Background reading on colors and accessibility: @@ -200,68 +216,127 @@ Background reading on colors and accessibility: * The [_Coolors_ contrast checker](https://coolors.co/contrast-checker/112a46-acc8e5) * [Web Accessibility: Understanding Colors and Luminance (Mozilla Developer Network Docs)](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_Colors_and_Luminance) -## Adding more colors and shades +## Adding more colors You can, of course, add any colors you want, and in any format you want. -However, if you want to use Baselayer 3.3.x’s shade classes `-100` thorugh `-900` on your color(s), then you need to start from a mid-tone that works as a `-500` shade. The `color-mix()` formulas mix in various levels of white to shades `-100` through `-400`, and various levels of black to shades `-600` through `-900`. +However, if you want to use Baselayer’s lightness modifier classes `-100` thorugh `-900` on your colors, then you need to start from a _mid-lightness_ color so that the `-100` and the `-900` generated by the `color-mix()` formulas are distinguishable (not to chose to white or too close to black). -Also, you will need to put your color(s) in `@layer color-setup {}` so that it gets added before `@layer color-shades {}`. +Also, you will need to put your color(s) in CSS layer `@layer colors {}` so that they take precence over the Baselayer lightness modifiers and other color utilities. -You can add your own project colors in any format, but the Baselayer `color-mix()` formulas will output shade in SRGB format. +You can add your own project colors in any format, but the Baselayer `color-mix()` formulas will output shade in OKLCH format. + +Examples: + +```css +:root { + --purple: #9400d3; + --teal: #0080A2; +} + +@layer colors { + .bg-purple, + .hover\:bg-purple:hover { + --bgc: var(--purple); + background: var(--bgc); + } + .bg-teal, + .hover\:bg-teal:hover { + --bgc: var(--teal); + background: var(--bgc); + } +} +``` ## Dark theme -Baselayer 3 has a simple dark theme built in. The dark theme is as follows: +Baselayer has a simple dark theme built in. Since v.3.4.0, the user’s operating system preference for light or dark mode is automatically detected on the HTML tag: -1. HTML elements are generally flipped from light to dark, or dark to light: - * Body background is near black - * Text is near white - * Table borders, horizontal rules, form inputs are dark gray - * Text links are a lighter blue - * Default buttons are a lighter gray -2. Color utilities (blue, green, amber, red, gray) are slightly darkened, to make them easier on the eye. -3. On hover, the link text color and the default button background color both are made lighter (inverted behavior). -4. Color utilities can optionally be inverted by adding the `*-dark-invert` modifier classes. +```css +html { + color-scheme: light dark; +} +``` -### The `theme-dark` class +For the dark theme, HTML elements are generally flipped from light to dark, or dark to light, as required: -In `baselayer.min.css` the dark theme is set by the CSS class `theme-dark` that can be programatically added to the `` tag by a [JavaScript toggle](#dark%2Flight-theme-toggle). +* Body background is near black +* Text is near white +* Table borders, horizontal rules, form inputs are dark gray +* Text links are a lighter blue +* Default buttons are a lighter gray -If you don’t want to give your visitors the option to toggle, then you can manually refactor the CSS to make the dark theme simply respond to the `prefers-color-scheme: dark` instead. +All the theme color variables in Baselayer (since v.3.4.0) involve a `light-dark()` CSS function. For example: ```css -@media (prefers-color-scheme: dark) { +:root { /* - Your dark theme styles + Body tag background color */ + --bgc-body: light-dark( + white, + color-mix(in OKLCH, var(--gray), var(--l1000)) + ); + + /* + Base text color (also set on the body tag) + */ + --tc-base: light-dark( + color-mix(in OKLCH, var(--gray), var(--l900)), + color-mix(in OKLCH, var(--gray), var(--l100)) + ); +} +``` + +Baselayer does not use `@media (prefers-color-scheme: dark) {}` anywhere. + +The color shade utilities can [optionally be inverted](#inverting-lightness-levels-for-the-dark-theme) by adding the `*-dark-invert` modifier classes. + +### Light and dark theme classes + +If you wish to give your visitors the option to switch between light and dark modes, you can include a JavaScript that swaps between CSS classes `theme-light` and `theme-dark` on the HTML tag. Baselayer has these two tags built in, so that you can implement the style selection: + +```css +html { + color-scheme: light dark; + &.theme-light { + color-scheme: light; + } + &.theme-dark { + color-scheme: dark; + } } ``` -### Darker and inverted shade utilities +Example implementation: the Baselayer documentation has demo JavaScript switches for light, dark, and auto modes. The auto mode removes `theme-light` and `theme-dark` from the `` tag, so that you simply get the Baselayer default, that is the user’s operating system theme preference setting. + +### Inverting lightness levels for the dark theme -Each color shade variant has a darker shade for the dark theme. For example, in dark mode `bg-100` is slightly darker than in light mode. This makes the shades easier on the eye in dark mode. +There will be many situations in your design where you want your utility color shades flipped for the dark theme, same way as the background color is flipped from white to near black, and son on. For handling this, Baselayer has three optional `*-dark-invert` modifier classes that flip the lightness modifier utility values. -There are, however, circumstances in your design where you don’t want colors to be merely darkened but also inverted (light shades become dark shades, and dark shades become light shades). +```css +/* Border lightness inverter */ +.b-dark-invert -This shade inverting has been built into the dark theme for (classless) `` background, text, links, form inputs, table borders, and horizontal rules. +/* Text lightness inverter */ +.t-dark-invert -Baselayer 3 has an optinal inverted version of of its shade utilities (for text, border, and background), as well as having them shoghtly darkened. To make this happen, all you need to do is add another modifier class to those elements you wish to shade invert for dark mode. +/* Background lightness inverter */ +.bg-dark-invert +``` Example using `bg-blue`: ```html -
-
``` - +
- + @@ -315,173 +390,69 @@ Example using `bg-blue`:
Shade (lightness)Shade bg-blue bg-blue bg-dark-invert
-The middle `t-500`, `b-500`, and `bg-500` do not invert, of course. So, e.g. `bg-500 bg-dark-invert` does not exist in `baselayer.css`. +(The middle `t-500`, `b-500`, and `bg-500` do not invert.) -

Baselayer 3.3.x’s color shades are darkened for the dark theme

-
-100200300400500600700800900100%90%80%70%60%50%40%30%20%10%0%Light theme shades(default)Dark themeshadesInverted darktheme shades(*-dark-invert)Shade suffix numbercolor-mix()shade value -
- -### Hover states for links and buttons - -In the default light theme, the blue link text becomes a darker blue, and the default gray button becomes a darker gray, on `:hover` states. But in the dark theme, this behaviour is inverted: links become a lighter blue and buttons become a lighter gray. +### Dark theme HTML body background color -You can easily change this. Lighter and darker options for blue links and gray buttons are included in variables as follows: +For dark teme, Baselayer’s `` background color has been set by `color-mix(in OKLCH, var(--gray), var(--l1000)`. This darkest shade level `--l1000` (near black) is only used on the `` tag, and it has been set so that all Baselayer `bg-900` shades will still be seen by many people. -```css -.theme-dark { - /* text color for links (default) */ - --tc-link: color-mix(in srgb, var(--blue) calc(var(--l400) * 2), white); - --tc-link-lighter: color-mix(in srgb, var(--blue) calc(var(--l300) * 2), white); - --tc-link-darker: color-mix(in srgb, var(--blue) calc(var(--l500) * 2), white); - --tc-link-hover: var(--tc-link-lighter); - - /* background color for buttons (default) */ - --bgc-btn: color-mix(in srgb, var(--gray) calc((100% - var(--l600)) * 2), black); - --bgc-btn-lighter: color-mix(in srgb, var(--gray) calc((100% - var(--l500)) * 2), white); - --bgc-btn-darker: color-mix(in srgb, var(--gray) calc((100% - var(--l700)) * 2), black); - --bgc-btn-hover: var(--bgc-btn-lighter); -} -``` +
+
+
+
+
+
+
-To make your styled links and buttons have an inverted behavior as above, you need to use `*-dark-invert` utilities. +### What if you don’t want a dark theme? -### Dark theme HTML body background color - -Baselayer 3’s dark theme `` color has been made darker than the color shades set by the `bg-900` utility, so that elements colored by those shades are still visible. For this purpose an shade variable of `--l1000` has been added. (Therefore, you can use `bg-900` or `bg-100 bg-dark-invert` to color the background of a panel, without it “disappearing” into the body background color.) +Then you can simply override or replace the HTML tag as follows: ```css -.theme-dark { - --l1000: 87.5%; - - --bgc-body: color-mix(in srgb, var(--gray) calc((100% - var(--l1000)) * 2), black); /* = #1e1e1e */ +html { + color-scheme: light; } ``` -As with all Baselayer’s variables, this dark theme `` color is an example that you can change to suit the needs of your project. +(And you won’t need to use any `*-dark-invert` classes.) -### Dark/light theme toggle - -Baselayer’s dark/light theme switcher JavaScript uses [sessionStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage) in the user’s browser to remember their theme preference as they visit multiple pages in this documentation. - -This script adds the CSS class `theme-dark` to the `` tag of the webpage, so that it is implimented (almost) immediately, before the `` is painted in the browser window. - -The switcher script also adds `theme-light` to the `` tag in light mode, but there are no `theme-light` classes in `baselayer.min.css`. The `theme-light` class is merely there for visual confirmation to the deleveloper viewing the browser inspector, and it is used for adjusting the dark/light theme state indicator symbol in the switcher button. - -The theme switcher in the Baselayer docs is built into its `switcher.js` demo toggling system, that powers the buttons in the sidebar. If you want to use the same dark/light mode toggler, here it is isolated below (no JS framework required): - -```js -const matchMediaDark = window.matchMedia('(prefers-color-scheme: dark)'); -const htmlClassList = document.querySelector('html').classList; - -function themeDark() { - sessionStorage.setItem("baselayerTheme", "dark"); - htmlClassList.remove('theme-light'); - htmlClassList.add('theme-dark'); -} - -function themeLight() { - sessionStorage.setItem("baselayerTheme", "light"); - htmlClassList.remove('theme-dark'); - htmlClassList.add('theme-light'); -} - -function toggleTheme() { - if ( sessionStorage.baselayerTheme === 'dark' ) { - themeLight(); - } else { - themeDark(); - } -}; - -function baselayerInit() { - if (sessionStorage.baselayerTheme === 'dark' || (!('baselayerTheme' in sessionStorage) && matchMediaDark.matches)) { - themeDark(); - } else { - themeLight(); - } -}; +## Other Baselayer color utilities -baselayerInit(); -``` +
+ The color utilities for black, white, and transparent can’t be used on the same element with the colors and shades above (i.e. as either default or hover states). These other utilities are declared after the colors and shades, and so they will override them. +
-You will also need a toggle button, like the one in the sidebar. The checkmarks are added in by CSS pseudo-selectors. - -

- -

- -Another, simpler example theme toggle button, using glyphs selected from [&what;](https://www.amp-what.com) - - - -

- -

+Other color utilities included in Baselayer cover black, white, and transparent. -``` - - - -``` +### Black and white -The simple example above uses `bg-reversi` to put a “night time” black background behind the moon and a “day time” white background behind the sun, meanwhile `t-reversi-` flips the text color the opposite way. See [black, white, reversi, and reversi-alt](/baselayer-3/colors/#black%2C-white%2C-reversi%2C-and-reversi-alt) below. +* `*-black` — named color black +* `*-white` — named color white -## Other Baselayer color utilities - -
- The color utilities for black, white, reversi, reversi-alt, and transparent can’t be used on the same element with the colors and shades above (i.e. as either default or hover states). These other utilities are declared after the colors and shades, and so they will override them. +
+
t-white bg-black
+
t-black bg-white
-Other color utilities included in Baselayer cover black, white, and transparent, as follows: - -### Black, white, reversi, and reversi-alt +#### Inverting black and white for the dark theme -There are utilities for border color, text color, and background color for each of the following (and `hover:` prefix states): +**New in Baselayer v.3.4.0:** The `*-dark-invert` classes also work on the black and white utilities, enabling a [reversi](https://en.wikipedia.org/wiki/Reversi) effect when the user prefers the dark theme. -* `-black` — named color black: -* `-white` — named color white: -* `-reversi` is black on a light theme, white on a dark theme: -* `-reversi-alt` is white on a light theme, black on a dark theme: - -
-
Black
-
White
-
Reversi
-
Reversi-alt
+
+
t-white t-dark-invert bg-black bg-dark-invert
+
t-black t-dark-invert bg-white bg-dark-invert
```html -
Black
+
...
-
White
+
...
-
Reversi
+
...
-
Reversi-alt
+
...
``` -You don’t need to use `*-dark-invert` on the reversi and reversi-alt utilities. And `*-dark-invert` doesn’t work on the black and white utilities. - ### Transparent background E.g. for outline buttons. @@ -489,4 +460,4 @@ E.g. for outline buttons. * Transparent: * `bg-transparent` -There are no hover states of `bg-transparent`. \ No newline at end of file +There are no hover states of `bg-transparent`. diff --git a/_src/css/baselayer.css b/_src/css/baselayer.css index f8a0282..405ffb2 100644 --- a/_src/css/baselayer.css +++ b/_src/css/baselayer.css @@ -1,15 +1,16 @@ /*! -Baselayer 3 CSS v.3.3.0 +Baselayer 3 CSS v.3.4.0 https://github.com/SimonPadbury/baselayer */ -@layer defaults, typography, forms-and-buttons, layout, decoration, color-setup, color-shade, color-other; +@layer defaults, links-and-accessibility, forms-and-buttons, typography, layout, decoration, colors, color-lightness, color-other,; @import "/partials/variables.css"; @import "/partials/reset.css"; @import "/partials/base.css"; -@import "/partials/typography.css"; +@import "/partials/accessibility.css"; @import "/partials/forms.css"; +@import "/partials/typography.css"; @import "/partials/layout.css"; @import "/partials/decoration.css"; -@import "/partials/colors.css"; \ No newline at end of file +@import "/partials/colors.css"; diff --git a/_src/css/min/baselayer.min.css b/_src/css/min/baselayer.min.css index 39f8ed0..91e8c7c 100644 --- a/_src/css/min/baselayer.min.css +++ b/_src/css/min/baselayer.min.css @@ -1,4 +1,4 @@ /*! -Baselayer 3 CSS v.3.3.0 +Baselayer 3 CSS v.3.4.0 https://github.com/SimonPadbury/baselayer -*/@layer defaults, typography, forms-and-buttons, layout, decoration, color-setup, color-shade, color-other;:root{--bgc-body:#fff;--tc-base:#222;--tc-link:#4162e3;--tc-link-hover:#344fb6;--focus-ring:#9baff9;--bgc-btn:grey;--bgc-btn-hover:#707070;--bgc-code:#e0e0e0;--bc-fineline:#d9d9d9;--blue:#3b6cff;--green:#01b236;--amber:#f0b300;--red:#f80200;--gray:#767676;--tc-base:color-mix(in srgb,var(--gray) calc((100% - var(--l900))*2),#000);--tc-link:color-mix(in srgb,var(--blue) calc((100% - var(--l600))*2),#000);--tc-link-hover:color-mix(in srgb,var(--blue) calc((100% - var(--l800))*2),#000);--focus-ring:color-mix(in srgb,var(--blue) calc(var(--l300)*2),#fff);--tc-input:#000;--bgc-input:#f5f5f5;--tc-btn:#fff;--tc-btn-hover:#fff;--bgc-btn:color-mix(in srgb,var(--gray) calc((100% - var(--l500))*2),#fff);--bgc-btn-hover:color-mix(in srgb,var(--gray) calc((100% - var(--l600))*2),#000);--tc-code:#000;--bgc-code:color-mix(in srgb,var(--gray) calc(var(--l200)*2),#fff);--bgc-highlight:#ffcc0066;--bc-fineline:color-mix(in srgb,var(--gray) calc(var(--l200)*2),#fff)}*{--l100:5%;--l200:15%;--l300:25%;--l400:35%;--l500:45%;--l600:55%;--l700:65%;--l800:75%;--l900:85%;--l1000:95%}.theme-dark,.theme-dark *{--l100:22%;--l200:30%;--l300:38%;--l400:46%;--l500:54%;--l600:62%;--l700:70%;--l800:78%;--l900:86%;--l1000:94%}.theme-dark .b-dark-invert,.theme-dark .bg-dark-invert,.theme-dark .t-dark-invert{--l100:86%;--l200:78%;--l300:70%;--l400:62%;--l500:54%;--l600:46%;--l700:38%;--l800:30%;--l900:22%}.theme-dark{--bgc-body:color-mix(in srgb,var(--gray) calc((100% - var(--l1000))*2),#000);--tc-base:color-mix(in srgb,var(--gray) calc(var(--l100)*2),#fff);--tc-link:color-mix(in srgb,var(--blue) calc(var(--l400)*2),#fff);--tc-link-lighter:color-mix(in srgb,var(--blue) calc(var(--l300)*2),#fff);--tc-link-darker:color-mix(in srgb,var(--blue) calc(var(--l500)*2),#fff);--tc-link-hover:var(--tc-link-lighter);--focus-ring:color-mix(in srgb,var(--blue) calc((100% - var(--l600))*2),#000);--tc-input:#fff;--bgc-input:color-mix(in srgb,var(--gray) calc((100% - var(--l900))*2),#000);--bgc-btn:color-mix(in srgb,var(--gray) calc((100% - var(--l600))*2),#000);--bgc-btn-lighter:color-mix(in srgb,var(--gray) calc((100% - var(--l500))*2),#fff);--bgc-btn-darker:color-mix(in srgb,var(--gray) calc((100% - var(--l700))*2),#000);--bgc-btn-hover:var(--bgc-btn-lighter);--tc-code:#fff;--bgc-code:color-mix(in srgb,var(--gray) calc((100% - var(--l800))*2),#000);--bc-fineline:color-mix(in srgb,var(--gray) calc((100% - var(--l700))*2),#000)}:root{--t-sans:ui-sans-serif,system-ui,sans-serif;--t-serif:ui-serif,Georgia,Cambria,"Times New Roman",Times,serif;--t-mono:ui-monospace,Menlo,Consolas,"Courier New",monospace;--t-old-serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;--t-base:var(--t-sans);--t-prose:var(--t-serif);--fs-base:100%;--lh-base:1.5;--m-lh:calc(var(--lh-base)*1rem);--t-small:.8em;--t-big:1.25em;--fw-lighter:200;--fw-normal:400;--fw-semibold:500;--fw-bold:700;--fw-heavy:900;--w-xs:320px;--w-sm:640px;--w-md:960px;--w-lg:1280px;--w-xl:1600px;--w-cg:40em;--w-expand:8.5em;--sp-1:0.5rem;--sp-2:clamp(1rem,0.5rem + 1.25vw,1.5rem);--sp-3:clamp(2rem,1rem + 2.5vw,3rem);--sp-4:clamp(3rem,1.5rem + 3.75vw,4.5rem);--p-cell:var(--sp-1) calc(var(--sp-1)*2);--sp-list:0.75em;--h1:2.441em;--h2:1.953em;--h3:1.563em;--h4:1.25em;--h5:1em;--h6:.8em;--h-font:inherit;--h-fw:var(--fw-bold);--h-lh:calc(1em + 0.5rem);--fs-long-read:clamp(1rem,0.625rem + 0.9375vw,1.375rem);--d-off-link:.3rem;--d-thick-link:1px;--h-input:2.5em;--fw-btn:var(--fw-semibold);--b-1:1px solid var(--bc-fineline);--b-2:4px solid var(--bc-fineline);--b-3:8px solid var(--bc-fineline);--r-2:4px;--r-3:8px;--r-4:16px}.container{--sp-2:clamp(1rem,0.5rem + 1.25cqi,1.5rem);--sp-3:clamp(2rem,1rem + 2.5cqi,3rem);--sp-4:clamp(3rem,1.5rem + 3.75cqi,4.5rem);--fs-long-read:clamp(1rem,0.625rem + 0.9375cqi,1.375rem)}@layer defaults{html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;box-sizing:border-box}*,:after,:before{box-sizing:inherit}body{-webkit-font-smoothing:antialiased;font-size:var(--fs-base);line-height:var(--lh-base);margin:0;min-height:100dvh;text-rendering:optimizeLegibility}canvas,img,picture,video{display:block;max-width:100%}iframe{border:0}summary{cursor:pointer}:target{scroll-margin-block:5ex}body{background-color:var(--bgc-body);color:var(--tc-base);font-family:var(--t-base)}}@layer defaults{:focus-visible{box-shadow:0 0 0 2px #fff;outline:2px dotted #000;outline-offset:0}.visually-hidden:not(:focus):not(:active){clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}}@layer typography{blockquote,dl,fieldset,figcaption,figure,ol,p,pre,table,ul{text-wrap:pretty;margin-block:0 var(--m-lh)}caption{margin-block:var(--sp-1)}.h1,h1{font-size:var(--h1);font-weight:var(--h-fw);line-height:var(--h-lh);margin-block:0 var(--m-lh)}.h2,h2{font-size:var(--h2)}.h3,h3{font-size:var(--h3)}.h4,h4{font-size:var(--h4)}.h5,h5{font-size:var(--h5)}.h6,h6{font-size:var(--h6)}.h2,.h3,.h4,.h5,.h6,h2,h3,h4,h5,h6{text-wrap:balance;font-weight:var(--h-fw);line-height:var(--h-lh);margin-block:var(--h-lh) var(--m-lh)}.content-grid>.h2,.content-grid>.h3,.content-grid>.h4,.content-grid>.h5,.content-grid>.h6,.content-grid>h2,.content-grid>h3,.content-grid>h4,.content-grid>h5,.content-grid>h6{margin-block:calc(var(--h-lh) - var(--m-lh)) var(--m-lh)}a{color:var(--tc-link);cursor:pointer;text-decoration:underline;transition:all .15s ease}a,a *{text-decoration-skip-ink:auto;text-decoration-thickness:var(--d-thick-link);text-underline-offset:var(--d-off-link)}a:focus,a:hover{color:var(--tc-link-hover)}ol,ul{margin-block:0 var(--m-lh);padding-left:1.5em}li ol,li ul,li+li{margin-block:var(--sp-list) 0}dl{margin:0 0 var(--m-lh)}dt{font-weight:700}dd{margin:0 0 var(--sp-list);padding-left:1.5em}ol ol{list-style-type:lower-alpha}ol ol ol{list-style-type:lower-roman}.table{border-collapse:collapse;border-spacing:0;width:100%}.table td,.table th{border:var(--b-1);padding:var(--p-cell);text-align:left;vertical-align:top}.table th{font-weight:700}hr{border:0;border-top:var(--b-1);height:0;margin-block:3rem;width:100%}blockquote{margin-inline:0;padding-inline:var(--sp-3)}blockquote p:last-child{margin-bottom:0}code,kbd,samp{font-family:var(--t-mono);font-style:normal;font-weight:400}code{background:var(--bgc-code);color:var(--tc-code);display:inline-block;padding-inline:.25em}pre{font-style:normal;font-weight:400;white-space:pre}pre,pre code{overflow-x:auto}pre code{background:var(--bgc-code);display:block;padding:1em}sub,sup{font-size:85%;line-height:0}.unlist,.unlist li{list-style-type:none;margin:0;padding:0}.t-noline,nav a{text-decoration:none}.hover\:t-line:hover{text-decoration:underline;text-decoration-skip-ink:auto;text-decoration-thickness:var(--d-thick-link);text-underline-offset:var(--d-off-link)}.t-nowrap{white-space:nowrap}.t-big{font-size:var(--t-big)!important}.t-small,small{font-size:var(--t-small)!important}.t-lighter{font-weight:var(--fw-lighter)}.t-normal{font-weight:var(--fw-normal)}.t-semibold{font-weight:var(--fw-semibold)}.t-bold{font-weight:var(--fw-bold)}.t-heavy{font-weight:var(--fw-heavy)}.t-italic{font-style:italic}.t-right{text-align:right}.t-center{text-align:center}.t-left{text-align:left}.t-balance{text-wrap:balance}.t-uppercase{text-transform:uppercase}.t-highlight,mark{background:var(--bgc-highlight);color:currentColor}.t-long-read{font-size:var(--fs-long-read)}.t-base{font-family:var(--t-base)}.t-prose{font-family:var(--t-prose)}}@layer forms-and-buttons{fieldset{border:var(--b-1)}label,legend{font-family:var(--t-base)}::placeholder{color:var(--tc-input);opacity:.7}input,select,textarea{background:var(--bgc-input);border:0;border-radius:unset;color:var(--tc-input);font-family:var(--t-base);font-size:inherit;min-height:var(--h-input);outline:0 none;padding:var(--p-cell);text-align:start}input:focus,select:focus,textarea:focus{box-shadow:0 0 0 4px var(--focus-ring);outline:0;position:relative;z-index:1}[type=color],select:not([multiple]){height:var(--h-input)}[type=color]{padding:.25em;width:var(--h-input)}[type=checkbox],[type=radio]{display:inline;height:.85em;min-height:unset;width:1em}[type=search]{-webkit-appearance:textfield;appearance:textfield}::file-selector-button{background:var(--bgc-btn);border:0;color:#fff;font-size:1em}.theme-dark input{color-scheme:dark}:disabled:hover{cursor:not-allowed}textarea:not([rows]){min-height:6em}.btn,[type=button],[type=reset],[type=submit],button{align-items:center;-webkit-appearance:none;appearance:none;background:var(--bgc-btn);border:1px solid transparent;color:var(--tc-btn);display:inline-flex;font-family:var(--t-base);font-size:inherit;font-weight:var(--fw-btn);height:var(--h-input);justify-content:center;margin:0;padding:var(--sp-1) 1em;position:relative;text-decoration:none;transition:all .15s ease}.btn:hover,[type=button]:hover,[type=reset]:hover,[type=submit]:hover,button:hover{background:var(--bgc-btn-hover);color:var(--tc-btn-hover);cursor:pointer}[type=button]:focus-visible,[type=reset]:focus-visible,[type=submit]:focus-visible,button:focus-visible{box-shadow:0 0 0 4px var(--focus-ring);outline:0;z-index:1}.btn-icon{height:var(--h-input);line-height:inherit;padding:0;width:var(--h-input)}}@layer layout{.container{container-type:inline-size}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.sticky{position:sticky}.top{top:0}.right{right:0}.bottom{bottom:0}.left{left:0}.z-1{z-index:1}.z-2{z-index:2}.z-3{z-index:3}.float-right{float:right}.float-left{float:left}.clearfix:after{clear:both;content:"";display:table}.overflow-x{overflow-x:auto}.overflow-y{overflow-y:auto}.overflow-hidden{overflow:hidden}.block{display:block}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.flex{display:flex}.flex-wrap{flex-wrap:wrap}.flex-column{flex-direction:column}.flex-start{justify-content:flex-start}.flex-center{justify-content:center}.flex-end{justify-content:flex-end}.flex-top{align-items:flex-start}.flex-middle{align-items:center}.flex-bottom{align-items:flex-end}.flex-space-between{justify-content:space-between}.flex-grow-equal>*{flex:1}.flex-grow-auto>*{flex:auto}.grow{flex-grow:1}@container (max-width: 639px){.sm\:hidden-below{display:none!important}}@container (max-width: 959px){.md\:hidden-below{display:none!important}}@container (max-width: 1279px){.lg\:hidden-below{display:none!important}}.grid{display:grid}.grid-dense{grid-auto-flow:dense}[class*=equal-]{grid-template-columns:repeat(var(--cols),minmax(1rem,1fr))}[class*=col-1],[class*=col-2],[class*=col-3],[class*=col-4]{grid-column:var(--col)}[class*=row-1],[class*=row-2],[class*=row-3],[class*=row-4]{grid-row:var(--row)}[class*=col-span-]{--col:auto;grid-column:var(--col) /span var(--cspan)}[class*=row-span-]{--row:auto;grid-row:var(--row) /span var(--rspan)}.equal-2-cols{--cols:2}.equal-3-cols{--cols:3}.equal-4-cols{--cols:4}.col-1{--col:1}.col-2{--col:2}.col-3{--col:3}.col-4{--col:4}.col-span-1{--cspan:1}.col-span-2{--cspan:2}.col-span-3{--cspan:3}.col-span-4{--cspan:4}.row-1{--row:1}.row-2{--row:2}.row-3{--row:3}.row-4{--row:4}.row-span-1{--rspan:1}.row-span-2{--rspan:2}.row-span-3{--rspan:3}.row-span-4{--rspan:4}@container (min-width: 640px){.sm\:flex{display:flex}.sm\:hidden{display:none!important}.sm\:equal-2-cols{--cols:2}.sm\:equal-3-cols{--cols:3}.sm\:equal-4-cols{--cols:4}.sm\:col-1{--col:1}.sm\:col-2{--col:2}.sm\:col-3{--col:3}.sm\:col-4{--col:4}.sm\:col-span-1{--cspan:1}.sm\:col-span-2{--cspan:2}.sm\:col-span-3{--cspan:3}.sm\:col-span-4{--cspan:4}.sm\:row-1{--row:1}.sm\:row-2{--row:2}.sm\:row-3{--row:3}.sm\:row-4{--row:4}.sm\:row-span-1{--rspan:1}.sm\:row-span-2{--rspan:2}.sm\:row-span-3{--rspan:3}.sm\:row-span-4{--rspan:4}}@container (min-width: 960px){.md\:flex{display:flex}.md\:hidden{display:none!important}.md\:equal-2-cols{--cols:2}.md\:equal-3-cols{--cols:3}.md\:equal-4-cols{--cols:4}.md\:col-1{--col:1}.md\:col-2{--col:2}.md\:col-3{--col:3}.md\:col-4{--col:4}.md\:col-span-1{--cspan:1}.md\:col-span-2{--cspan:2}.md\:col-span-3{--cspan:3}.md\:col-span-4{--cspan:4}.md\:row-1{--row:1}.md\:row-2{--row:2}.md\:row-3{--row:3}.md\:row-4{--row:4}.md\:row-span-1{--rspan:1}.md\:row-span-2{--rspan:2}.md\:row-span-3{--rspan:3}.md\:row-span-4{--rspan:4}}@container (min-width: 1280px){.lg\:flex{display:flex}.sm\:hidden{display:none!important}.lg\:equal-2-cols{--cols:2}.lg\:equal-3-cols{--cols:3}.lg\:equal-4-cols{--cols:4}.lg\:col-1{--col:1}.lg\:col-2{--col:2}.lg\:col-3{--col:3}.lg\:col-4{--col:4}.lg\:col-span-1{--cspan:1}.lg\:col-span-2{--cspan:2}.lg\:col-span-3{--cspan:3}.lg\:col-span-4{--cspan:4}.lg\:row-1{--row:1}.lg\:row-2{--row:2}.lg\:row-3{--row:3}.lg\:row-4{--row:4}.lg\:row-span-1{--rspan:1}.lg\:row-span-2{--rspan:2}.lg\:row-span-3{--rspan:3}.lg\:row-span-4{--rspan:4}}.gap-1{--gap:var(--sp-1)}.gap-1,.gap-2{gap:var(--gap)!important}.gap-2{--gap:var(--sp-2)}.gap-3{--gap:var(--sp-3)}.gap-3,.gap-4{gap:var(--gap)!important}.gap-4{--gap:var(--sp-4)}.content-grid{--full:minmax(var(--sp-2),1fr);--expand:minmax(0,var(--w-expand));--pop:minmax(0,var(--sp-2));--content:min(var(--w-cg),100% - (var(--sp-2) * 2));display:grid;grid-template-columns:[full-start] var(--full) [expand-start] var(--expand) [popout-start] var(--pop) [content-start] var(--content) [content-end] var(--pop) [popout-end] var(--expand) [expand-end] var(--full) [full-end]}.content-grid>*{grid-column:content}.popout{grid-column:popout}.expand{grid-column:expand}.full-bleed{grid-column:full}.content-grid>hr+*{margin-top:0}.wrapper,[class^=wrapper-]{--w-max:var(--w-xl);--sp-inline:var(--sp-2);margin-inline:auto;width:min(100% - (var(--sp-inline) * 2),var(--w-max))}.w-lg,.w-md,.w-sm,.w-xl,.w-xs{width:min(100%,var(--w-max))}.w-xs,.wrapper-xs{--w-max:var(--w-xs)}.w-sm,.wrapper-sm{--w-max:var(--w-sm)}.w-md,.wrapper-md{--w-max:var(--w-md)}.w-lg,.wrapper-lg{--w-max:var(--w-lg)}.w-xl,.wrapper-xl{--w-max:var(--w-xl)}.w-100\%{width:100%}.w-100vw{width:100vw}.w-max-100vw{max-width:100vw}.h-100\%{height:100%}.h-100dvh{height:100dvh}.h-max-100dvh{max-height:100dvh}.box{inset:0}.aspect-ratio-16x9{aspect-ratio:16/9}.aspect-ratio-21x9{aspect-ratio:21/9}.aspect-ratio-1x1{aspect-ratio:1/1}.aspect-ratio-4x3{aspect-ratio:4/3}}@layer decoration{.mx-auto{margin-inline:auto}.m-0{margin:0}.m-1{margin:var(--sp-1)}.m-2{margin:var(--sp-2)}.m-3{margin:var(--sp-3)}.m-4{margin:var(--sp-4)}.mt-0{margin-top:0}.mt-1{margin-top:var(--sp-1)}.mt-2{margin-top:var(--sp-2)}.mt-3{margin-top:var(--sp-3)}.mt-4{margin-top:var(--sp-4)}.mr-0{margin-right:0}.mr-1{margin-right:var(--sp-1)}.mr-2{margin-right:var(--sp-2)}.mr-3{margin-right:var(--sp-3)}.mr-4{margin-right:var(--sp-4)}.mb-0,.mb-1{margin-bottom:var(--sp-1)}.mb-2{margin-bottom:var(--sp-2)}.mb-3{margin-bottom:var(--sp-3)}.mb-4{margin-bottom:var(--sp-4)}.ml-0{margin-left:0}.ml-1{margin-left:var(--sp-1)}.ml-2{margin-left:var(--sp-2)}.ml-3{margin-left:var(--sp-3)}.ml-4{margin-left:var(--sp-4)}.mx-1{margin-inline:var(--sp-1)}.mx-2{margin-inline:var(--sp-2)}.mx-3{margin-inline:var(--sp-3)}.mx-4{margin-inline:var(--sp-4)}.my-1{margin-block:var(--sp-1)}.my-2{margin-block:var(--sp-2)}.my-3{margin-block:var(--sp-3)}.my-4{margin-block:var(--sp-4)}.p-cell{padding:var(--p-cell)}.p-0{padding:0}.p-1{padding:var(--sp-1)}.p-2{padding:var(--sp-2)}.p-3{padding:var(--sp-3)}.p-4{padding:var(--sp-4)}.pt-0{padding-top:0}.pt-1{padding-top:var(--sp-1)}.pt-2{padding-top:var(--sp-2)}.pt-3{padding-top:var(--sp-3)}.pt-4{padding-top:var(--sp-4)}.pr-0{padding-right:0}.pr-1{padding-right:var(--sp-1)}.pr-2{padding-right:var(--sp-2)}.pr-3{padding-right:var(--sp-3)}.pr-4{padding-right:var(--sp-4)}.pb-0{padding-bottom:0}.pb-1{padding-bottom:var(--sp-1)}.pb-2{padding-bottom:var(--sp-2)}.pb-3{padding-bottom:var(--sp-3)}.pb-4{padding-bottom:var(--sp-4)}.pl-0{padding-left:0}.pl-1{padding-left:var(--sp-1)}.pl-2{padding-left:var(--sp-2)}.pl-3{padding-left:var(--sp-3)}.pl-4{padding-left:var(--sp-4)}.px-1{padding-inline:var(--sp-1)}.px-2{padding-inline:var(--sp-2)}.px-3{padding-inline:var(--sp-3)}.px-4{padding-inline:var(--sp-4)}.py-1{padding-block:var(--sp-1)}.py-2{padding-block:var(--sp-2)}.py-3{padding-block:var(--sp-3)}.py-4{padding-block:var(--sp-4)}.b-0{border:0}.b-1{border:var(--b-1)}.b-2{border:var(--b-2)}.b-3{border:var(--b-3)}.bt-1{border-top:var(--b-1)}.bt-2{border-top:var(--b-2)}.bt-3{border-top:var(--b-3)}.br-1{border-right:var(--b-1)}.br-2{border-right:var(--b-2)}.br-3{border-right:var(--b-3)}.bb-1{border-bottom:var(--b-1)}.bb-2{border-bottom:var(--b-2)}.bb-3{border-bottom:var(--b-3)}.bl-1{border-left:var(--b-1)}.bl-2{border-left:var(--b-2)}.bl-3{border-left:var(--b-3)}.r-2{border-radius:var(--r-2)}.r-3{border-radius:var(--r-3)}.r-4{border-radius:var(--r-4)}.r-pill{border-radius:99em}.r-2,.r-3,.r-4,.r-pill{overflow:hidden}.img-cover{height:100%;object-fit:cover;object-position:center;width:100%}.hover\:opacity-25\%\:hover,.opacity-25\%{opacity:.25}.hover\:opacity-50\%\:hover,.opacity-50\%{opacity:.5}.hover\:opacity-75\%\:hover,.opacity-75\%{opacity:.75}.hover\:opacity-100\%\:hover{opacity:1}}@layer color-setup{[class*=b-]{--bl:var(--l500)}[class*=t-]{--tl:var(--l500)}[class*=bg-]{--bgl:var(--l500)}.b-blue,.hover\:b-blue:hover{--bc:var(--blue);border-color:var(--bc)}.b-green,.hover\:b-green:hover{--bc:var(--green);border-color:var(--bc)}.b-amber,.hover\:b-amber:hover{--bc:var(--amber);border-color:var(--bc)}.b-red,.hover\:b-red:hover{--bc:var(--red);border-color:var(--bc)}.b-gray,.hover\:b-gray:hover{--bc:var(--gray);border-color:var(--bc)}.hover\:t-blue:hover,.t-blue{--tc:var(--blue);color:var(--tc)}.hover\:t-green:hover,.t-green{--tc:var(--green);color:var(--tc)}.hover\:t-amber:hover,.t-amber{--tc:var(--amber);color:var(--tc)}.hover\:t-red:hover,.t-red{--tc:var(--red);color:var(--tc)}.hover\:t-gray:hover,.t-gray{--tc:var(--gray);color:var(--tc)}.bg-blue,.hover\:bg-blue:hover{--bgc:var(--blue);background:var(--bgc)}.bg-green,.hover\:bg-green:hover{--bgc:var(--green);background:var(--bgc)}.bg-amber,.hover\:bg-amber:hover{--bgc:var(--amber);background:var(--bgc)}.bg-red,.hover\:bg-red:hover{--bgc:var(--red);background:var(--bgc)}.bg-gray,.hover\:bg-gray:hover{--bgc:var(--gray);background:var(--bgc)}}@layer color-shade{[class*=b-100],[class*=b-200],[class*=b-300],[class*=b-400],[class*=b-500]{border-color:color-mix(in srgb,var(--bc) calc(var(--bl)*2),#fff)}.theme-dark [class*=b-500],[class*=b-600],[class*=b-700],[class*=b-800],[class*=b-900]{border-color:color-mix(in srgb,var(--bc) calc((100% - var(--bl))*2),#000)}.b-100,.hover\:b-100:hover{--bl:var(--l100)}.b-200,.hover\:b-200:hover{--bl:var(--l200)}.b-300,.hover\:b-300:hover{--bl:var(--l300)}.b-400,.hover\:b-400:hover{--bl:var(--l400)}.b-500,.hover\:b-500:hover{--bl:var(--l500)}.b-600,.hover\:b-600:hover{--bl:var(--l600)}.b-700,.hover\:b-700:hover{--bl:var(--l700)}.b-800,.hover\:b-800:hover{--bl:var(--l800)}.b-900,.hover\:b-900:hover{--bl:var(--l900)}[class*=t-100],[class*=t-200],[class*=t-300],[class*=t-400],[class*=t-500]{color:color-mix(in srgb,var(--tc) calc(var(--tl)*2),#fff)}.theme-dark [class*=t-500],[class*=t-600],[class*=t-700],[class*=t-800],[class*=t-900]{color:color-mix(in srgb,var(--tc) calc((100% - var(--tl))*2),#000)}.hover\:t-100:hover,.t-100{--tl:var(--l100)}.hover\:t-200:hover,.t-200{--tl:var(--l200)}.hover\:t-300:hover,.t-300{--tl:var(--l300)}.hover\:t-400:hover,.t-400{--tl:var(--l400)}.hover\:t-500:hover,.t-500{--tl:var(--l500)}.hover\:t-600:hover,.t-600{--tl:var(--l600)}.hover\:t-700:hover,.t-700{--tl:var(--l700)}.hover\:t-800:hover,.t-800{--tl:var(--l800)}.hover\:t-900:hover,.t-900{--tl:var(--l900)}[class*=bg-100],[class*=bg-200],[class*=bg-300],[class*=bg-400],[class*=bg-500]{background:color-mix(in srgb,var(--bgc) calc(var(--bgl)*2),#fff)}.theme-dark [class*=bg-500],[class*=bg-600],[class*=bg-700],[class*=bg-800],[class*=bg-900]{background:color-mix(in srgb,var(--bgc) calc((100% - var(--bgl))*2),#000)}.bg-100,.hover\:bg-100:hover{--bgl:var(--l100)}.bg-200,.hover\:bg-200:hover{--bgl:var(--l200)}.bg-300,.hover\:bg-300:hover{--bgl:var(--l300)}.bg-400,.hover\:bg-400:hover{--bgl:var(--l400)}.bg-500,.hover\:bg-500:hover{--bgl:var(--l500)}.bg-600,.hover\:bg-600:hover{--bgl:var(--l600)}.bg-700,.hover\:bg-700:hover{--bgl:var(--l700)}.bg-800,.hover\:bg-800:hover{--bgl:var(--l800)}.bg-900,.hover\:bg-900:hover{--bgl:var(--l900)}.theme-dark [class*=b-100].b-dark-invert,.theme-dark [class*=b-200].b-dark-invert,.theme-dark [class*=b-300].b-dark-invert,.theme-dark [class*=b-400].b-dark-invert,.theme-dark [class*=b-500].b-dark-invert{border-color:color-mix(in srgb,var(--bc) calc((100% - var(--bl))*2),#000)}.theme-dark [class*=b-600].t-dark-invert,.theme-dark [class*=b-700].t-dark-invert,.theme-dark [class*=b-800].t-dark-invert,.theme-dark [class*=b-900].t-dark-invert{border-color:color-mix(in srgb,var(--bc) calc(var(--bl)*2),#fff)}.theme-dark [class*=t-100].t-dark-invert,.theme-dark [class*=t-200].t-dark-invert,.theme-dark [class*=t-300].t-dark-invert,.theme-dark [class*=t-400].t-dark-invert{color:color-mix(in srgb,var(--tc) calc((100% - var(--tl))*2),#000)}.theme-dark [class*=t-600].t-dark-invert,.theme-dark [class*=t-700].t-dark-invert,.theme-dark [class*=t-800].t-dark-invert,.theme-dark [class*=t-900].t-dark-invert{color:color-mix(in srgb,var(--tc) calc(var(--tl)*2),#fff)}.theme-dark [class*=bg-100],.theme-dark [class*=bg-200],.theme-dark [class*=bg-300],.theme-dark [class*=bg-400]{background:color-mix(in srgb,var(--bgc) calc(var(--bgl)*2),#fff)}.theme-dark [class*=bg-100].bg-dark-invert,.theme-dark [class*=bg-200].bg-dark-invert,.theme-dark [class*=bg-300].bg-dark-invert,.theme-dark [class*=bg-400].bg-dark-invert{background:color-mix(in srgb,var(--bgc) calc((100% - var(--bgl))*2),#000)}.theme-dark [class*=bg-600].bg-dark-invert,.theme-dark [class*=bg-700].bg-dark-invert,.theme-dark [class*=bg-800].bg-dark-invert,.theme-dark [class*=bg-900].bg-dark-invert{background:color-mix(in srgb,var(--bgc) calc(var(--bgl)*2),#fff)}}@layer color-other{.bg-transparent:not(:hover){background:transparent}.hover\:t-white:hover,.t-white{color:#fff}.b-white,.hover\:b-white:hover{border-color:#fff}.bg-white,.hover\:bg-white:hover{background:#fff}.hover\:t-black:hover,.t-black{color:#000}.b-black,.hover\:b-black:hover{border-color:#000}.bg-black,.hover\:bg-black:hover{background:#000}.hover\:t-reversi:hover,.t-reversi{color:#000}.b-reversi,.hover\:b-reversi:hover{border-color:#000}.bg-reversi,.hover\:bg-reversi:hover{background:#000}.theme-dark .hover\:t-reversi:hover,.theme-dark .t-reversi{color:#fff}.theme-dark .b-reversi,.theme-dark .hover\:b-reversi:hover{border-color:#fff}.theme-dark .bg-reversi,.theme-dark .hover\:bg-reversi:hover{background:#fff}.hover\:t-reversi-alt:hover,.t-reversi-alt{color:#fff}.b-reversi-alt,.hover\:b-reversi-alt:hover{border-color:#fff}.bg-reversi-alt,.hover\:bg-reversi-alt:hover{background:#fff}.theme-dark .hover\:t-reversi-alt:hover,.theme-dark .t-reversi-alt{color:#000}.theme-dark .b-reversi-alt,.theme-dark .hover\:b-reversi-alt:hover{border-color:#000}.theme-dark .bg-reversi-alt,.theme-dark .hover\:bg-reversi-alt:hover{background:#000}} \ No newline at end of file +*/@layer defaults, links-and-accessibility, forms-and-buttons, typography, layout, decoration, colors, color-lightness, color-other,;:root{--w-xs:320px;--w-sm:640px;--w-md:960px;--w-lg:1280px;--w-xl:1600px;--w-content:40em;--w-expand:10.79em;--s-1:0.25rem;--s-2:0.5rem;--s-3:clamp(1rem,0.5rem + 1.25cqi,1.5rem);--s-4:clamp(2rem,1rem + 2.5cqi,3rem);--pill:99rem;--p-cell:0.5rem 1rem;--b-1:1px solid var(--bc-fineline);--b-2:var(--s-1) solid var(--bc-fineline);--b-3:var(--s-2) solid var(--bc-fineline);--ff-sans:ui-sans-serif,system-ui,Arial,sans-serif;--ff-serif:ui-serif,Georgia,Cambria,"Times New Roman",Times,serif;--ff-mono:ui-monospace,Menlo,Consolas,"Courier New",monospace;--ff-base:var(--ff-sans);--ff-prose:var(--ff-serif);--fs-base:100%;--fs-bump:112.5%;--fs-sm:0.8em;--fs-lg:1.325em;--fs-long-read:clamp(1em,0.8333cqi + 0.5208vw,1.25em);--fs-display:clamp(1.125rem,1.25cqi + 0.625rem,1.625rem);--fw-thin:200;--fw-normal:400;--fw-semibold:600;--fw-bold:700;--fw-heavy:900;--fw-btn:var(--fw-semibold);--b-form:1px solid var(--bc-form);--y-form:2.5em;--h1:2.25em;--h2:1.875em;--h3:1.5em;--h4:1.25em;--h5:1.125em;--h6:1em;--h-ff:inherit;--h-fw:var(--fw-semibold);--h-lh:calc(1em + 0.5rem);--h-mt:calc(var(--t-mb)*2);--t-mb:1rem;--t-lh:1.5;--a-deco-offset:0.3em;--a-deco-thickness:1px;--a-deco-thickness-hover:3px;--blue:#0040ff;--green:#128a12;--amber:#e6de00;--red:#e60000;--gray:grey;--bgc-body:light-dark(color-mix(in oklch,#fff),color-mix(in oklch,var(--gray),var(--l1000)));--tc-base:light-dark(color-mix(in oklch,var(--gray),var(--l900)),color-mix(in oklch,var(--gray),var(--l100)));--tc-link:light-dark(color-mix(in oklch,var(--blue),var(--l600)),color-mix(in oklch,var(--blue),var(--l400)));--tc-link-hover:light-dark(color-mix(in oklch,var(--blue),var(--l800)),color-mix(in oklch,var(--blue),var(--l500)));--tc-btn:#fff;--tc-btn-hover:#fff;--bgc-btn:light-dark(color-mix(in oklch,var(--gray),var(--l500)),color-mix(in oklch,var(--gray),var(--l600)));--bgc-btn-hover:light-dark(color-mix(in oklch,var(--gray),var(--l600)),color-mix(in oklch,var(--gray),var(--l700)));--bc-form:var(--bgc-btn);--tc-form:CanvasText;--bgc-form:Canvas;--tc-code:light-dark(color-mix(in oklch,var(--green),var(--l600)),color-mix(in oklch,var(--green),var(--l300)));--bgc-code:light-dark(#fff,#000);--bc-fineline:light-dark(color-mix(in oklch,var(--gray),var(--l300)),color-mix(in oklch,var(--gray),var(--l700)));--l100:#fff 90%;--l200:#fff 72%;--l300:#fff 54%;--l400:#fff 36%;--l500:#fff 18%;--l600:#000 0%;--l700:#000 18%;--l800:#000 36%;--l900:#000 54%;--l1000:#000 72%;--l100i:#000 54%;--l200i:#000 36%;--l300i:#000 18%;--l400i:#000 0%;--l500i:#fff 18%;--l600i:#fff 36%;--l700i:#fff 54%;--l800i:#fff 72%;--l900i:#fff 90%}@layer defaults{html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;box-sizing:border-box}*,:after,:before{box-sizing:inherit}body{font-size:var(--ff-base);line-height:var(--t-lh);margin:0;min-height:100dvh;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}canvas,img,picture,video{display:block;max-width:100%}iframe{border:0}summary{cursor:pointer}:target{scroll-margin-block:5ex}}@layer defaults{html{color-scheme:light dark;&.theme-light{color-scheme:light}&.theme-dark{color-scheme:dark}}body{background-color:var(--bgc-body);color:var(--tc-base);container-type:inline-size;font-family:var(--ff-base);font-size:var(--fs-base)}@container (min-width: 640px){body>*{font-size:var(--fs-bump)}}}@layer links-and-accessibility{a{color:var(--tc-link);cursor:pointer;text-decoration:underline;text-decoration-skip-ink:auto;text-decoration-thickness:var(--a-deco-thickness);text-underline-offset:var(--a-deco-offset);transition:all .15s ease;&:not(.t-no-underline):hover{color:var(--tc-link-hover);text-decoration:underline;text-decoration-thickness:var(--a-deco-thickness-hover)}}.links-not-underlined a,.links-not-underlined a:hover,.links-underlined-hover-only a,.t-no-underline,.t-underline-hover-only{text-decoration:none}a:focus-visible{background-color:var(--amber)!important;color:#000!important;outline:none;text-decoration:underline;text-decoration-thickness:var(--a-deco-thickness-hover)}a:focus-visible>img,button:focus-visible,form button:focus,input:focus,select:focus,textarea:focus{box-shadow:0 0 0 3px #000;outline:3px solid var(--amber);outline-offset:3px;position:relative;z-index:1}.visually-hidden:not(:focus):not(:active){height:1px;position:absolute;width:1px;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;white-space:nowrap}}@layer forms-and-buttons{fieldset{border:var(--b-1);padding:var(--s-2)}label,legend{font-family:var(--ff-base)}::placeholder{color:var(--tc-form);opacity:.7}input,select,textarea{background:var(--bgc-form);border:var(--b-form);border-radius:unset;color:var(--tc-form);font-family:var(--ff-base);font-size:inherit;min-height:var(--y-form);padding:var(--p-cell);text-align:start}[type=color],select:not([multiple]){height:var(--y-form)}[type=color]{padding:.25em;width:var(--y-form)}[type=checkbox],[type=radio]{display:inline-block;min-height:unset}[type=search]{-webkit-appearance:textfield;appearance:textfield}::file-selector-button{background:var(--bgc-btn);border:0;color:#fff;font-size:1em}:disabled:hover{cursor:not-allowed}textarea:not([rows]){min-height:6em}.btn,[type=button],[type=reset],[type=submit],button{align-items:center;-webkit-appearance:none;appearance:none;background:var(--bgc-btn);border:1px solid transparent;color:var(--tc-btn);display:inline-flex;font-family:var(--ff-base);font-size:inherit;font-weight:var(--fw-btn);justify-content:center;margin:0;min-height:var(--y-form);padding:var(--s-2) 1em;position:relative;text-decoration:none;transition:all .15s ease;&:hover{background:var(--bgc-btn-hover);color:var(--tc-btn-hover);cursor:pointer;text-decoration:none}}.btn-icon{height:var(--y-form);line-height:inherit;padding:0;width:var(--y-form)}}@layer typography{blockquote,dl,fieldset,figcaption,figure,ol,p,pre,table,ul{margin-block:0 var(--t-mb)}caption{margin-block:var(--s-2)}h1{font-family:var(--h-ff);font-weight:var(--h-fw);line-height:var(--h-lh);margin-block:0 var(--t-mb)}.h1,h1{font-size:var(--h1)}.h2,h2{font-size:var(--h2)}.h3,h3{font-size:var(--h3)}.h4,h4{font-size:var(--h4)}.h5,h5{font-size:var(--h5)}.h6,h6{font-size:var(--h6)}h2,h3,h4,h5,h6{font-family:var(--h-ff);font-weight:var(--h-fw);line-height:var(--h-lh);margin-block:var(--h-mt) var(--t-mb);text-wrap:balance;.content-grid &{margin-top:calc(var(--h-mt) - var(--t-mb))}}.content-grid>h2:first-child{margin-top:0}menu,ol,ul{margin-block:0 var(--t-mb);padding-left:1.5em}li{+li,ol,ul{margin-block:var(--t-mb) 0}}ol ol{list-style-type:lower-alpha;ol{list-style-type:lower-roman}}dl{margin:0 0 var(--t-mb)}dt{font-weight:700}dd{margin:var(--t-mb) 0;padding-left:1.5em}.unlist{list-style-type:none}.table{border-bottom:var(--b-1);border-collapse:collapse;border-spacing:0;border-top:var(--b-1);width:100%}td,th{padding:var(--p-cell);text-align:left;vertical-align:top;.table-grid &{border:var(--b-1)}}th{border-bottom:var(--b-1);font-weight:700}hr{border:0;border-top:var(--b-1);height:0;margin-block:3rem;width:100%}blockquote{margin-inline:0;padding-inline:var(--s-3)}blockquote p:last-child{margin-bottom:0}code,kbd,samp{font-family:var(--ff-mono);font-style:normal;font-weight:400}code{background:var(--bgc-code);border:var(--b-1);border-radius:var(--s-xs);color:var(--tc-code);display:inline-block;padding-inline:.25em}pre{font-style:normal;font-weight:400;white-space:pre;&:not(:has(code)){overflow-x:auto}code{background:var(--bgc-code);border-radius:var(--s-1);display:block;overflow-x:auto;padding:1em}}sub,sup{font-size:85%;line-height:0}.t-nowrap{white-space:nowrap}.t-lg{font-size:var(--fs-lg)}.t-sm,small{font-size:var(--fs-sm)}.t-thin{font-weight:var(--fw-thin)}.t-normal{font-weight:var(--fw-normal)}.t-semibold{font-weight:var(--fw-semibold)}.t-bold{font-weight:var(--fw-bold)}.t-heavy{font-weight:var(--fw-heavy)}.t-italic{font-style:italic}.t-right{text-align:right}.t-center{text-align:center}.t-left{text-align:left}@container (min-width: 640px){.sm\:t-right{text-align:right}.sm\:t-center{text-align:center}.sm\:t-left{text-align:left}}@container (min-width: 960px){.md\:t-right{text-align:right}.md\:t-center{text-align:center}.md\:t-left{text-align:left}}@container (min-width: 1280px){.lg\:t-right{text-align:right}.lg\:t-center{text-align:center}.lg\:t-left{text-align:left}}.t-balance{text-wrap:balance}.t-uppercase{text-transform:uppercase}.t-highlight,mark{background:var(--bgc-highlight);color:currentColor}.t-long-read{font-size:var(--fs-long-read)}.t-display{font-size:var(--fs-display)}.t-base{font-family:var(--ff-base)}.t-prose{font-family:var(--ff-prose)}}@layer layout{.container{container-type:inline-size}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.sticky{position:sticky}.top{top:0}.right{right:0}.bottom{bottom:0}.left{left:0}.z-1{z-index:1}.z-2{z-index:2}.z-3{z-index:3}.float-right{float:right}.float-left{float:left}.clearfix:after{clear:both;content:"";display:table}.overflow-x{overflow-x:auto}.overflow-y{overflow-y:auto}.overflow-clip{overflow:clip}.block{display:block}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.flex{display:flex}.flex-wrap{flex-wrap:wrap}.flex-column{flex-direction:column}.flex-start{justify-content:flex-start}.flex-center{justify-content:center}.flex-end{justify-content:flex-end}.flex-top{align-items:flex-start}.flex-middle{align-items:center}.flex-bottom{align-items:flex-end}.flex-space-between{justify-content:space-between}.flex-grow-equal>*{flex:1}.flex-grow-auto>*{flex:auto}.grow{flex:1}@container (max-width: 639px){.sm\:hidden-below{display:none!important}}@container (max-width: 959px){.md\:hidden-below{display:none!important}}@container (max-width: 1279px){.lg\:hidden-below{display:none!important}}[class*=grid]{--cols:1}.grid{display:grid}.grid-dense{grid-auto-flow:dense}[class*=equal-]{grid-template-columns:repeat(var(--cols),minmax(1rem,1fr))}[class*=col-1],[class*=col-2],[class*=col-3],[class*=col-4]{grid-column:var(--col)}[class*=row-1],[class*=row-2],[class*=row-3],[class*=row-4]{grid-row:var(--row)}[class*=col-span-]{--col:auto;grid-column:var(--col) /span var(--cspan)}[class*=row-span-]{--row:auto;grid-row:var(--row) /span var(--rspan)}.equal-2-cols{--cols:2}.equal-3-cols{--cols:3}.equal-4-cols{--cols:4}.col-1{--col:1}.col-2{--col:2}.col-3{--col:3}.col-4{--col:4}.col-span-1{--cspan:1}.col-span-2{--cspan:2}.col-span-3{--cspan:3}.col-span-4{--cspan:4}.row-1{--row:1}.row-2{--row:2}.row-3{--row:3}.row-4{--row:4}.row-span-1{--rspan:1}.row-span-2{--rspan:2}.row-span-3{--rspan:3}.row-span-4{--rspan:4}@container (min-width: 640px){.sm\:block{display:block}.sm\:flex{display:flex}.sm\:hidden{display:none!important}.sm\:grid{display:grid}.sm\:equal-2-cols{--cols:2}.sm\:equal-3-cols{--cols:3}.sm\:equal-4-cols{--cols:4}.sm\:col-1{--col:1}.sm\:col-2{--col:2}.sm\:col-3{--col:3}.sm\:col-4{--col:4}.sm\:col-span-1{--cspan:1}.sm\:col-span-2{--cspan:2}.sm\:col-span-3{--cspan:3}.sm\:col-span-4{--cspan:4}.sm\:row-1{--row:1}.sm\:row-2{--row:2}.sm\:row-3{--row:3}.sm\:row-4{--row:4}.sm\:row-span-1{--rspan:1}.sm\:row-span-2{--rspan:2}.sm\:row-span-3{--rspan:3}.sm\:row-span-4{--rspan:4}}@container (min-width: 960px){.md\:block{display:block}.md\:flex{display:flex}.md\:hidden{display:none!important}.md\:grid{display:grid}.md\:equal-2-cols{--cols:2}.md\:equal-3-cols{--cols:3}.md\:equal-4-cols{--cols:4}.md\:col-1{--col:1}.md\:col-2{--col:2}.md\:col-3{--col:3}.md\:col-4{--col:4}.md\:col-span-1{--cspan:1}.md\:col-span-2{--cspan:2}.md\:col-span-3{--cspan:3}.md\:col-span-4{--cspan:4}.md\:row-1{--row:1}.md\:row-2{--row:2}.md\:row-3{--row:3}.md\:row-4{--row:4}.md\:row-span-1{--rspan:1}.md\:row-span-2{--rspan:2}.md\:row-span-3{--rspan:3}.md\:row-span-4{--rspan:4}}@container (min-width: 1280px){.lg\:block{display:flex}.lg\:flex{display:block}.lg\:hidden{display:none!important}.lg\:grid{display:grid}.lg\:equal-2-cols{--cols:2}.lg\:equal-3-cols{--cols:3}.lg\:equal-4-cols{--cols:4}.lg\:col-1{--col:1}.lg\:col-2{--col:2}.lg\:col-3{--col:3}.lg\:col-4{--col:4}.lg\:col-span-1{--cspan:1}.lg\:col-span-2{--cspan:2}.lg\:col-span-3{--cspan:3}.lg\:col-span-4{--cspan:4}.lg\:row-1{--row:1}.lg\:row-2{--row:2}.lg\:row-3{--row:3}.lg\:row-4{--row:4}.lg\:row-span-1{--rspan:1}.lg\:row-span-2{--rspan:2}.lg\:row-span-3{--rspan:3}.lg\:row-span-4{--rspan:4}}.gap-1{gap:var(--s-1)}.gap-2{gap:var(--s-2)}.gap-3{gap:var(--s-3)}.gap-4{gap:var(--s-4)}.content-grid{--full:minmax(var(--s-3),1fr);--expand:minmax(0,var(--w-expand));--pop:minmax(0,var(--s-3));--content:min(var(--w-content),100% - (var(--s-3) * 2));display:grid;grid-template-columns:[full-start] var(--full) [expand-start] var(--expand) [popout-start] var(--pop) [content-start] var(--content) [content-end] var(--pop) [popout-end] var(--expand) [expand-end] var(--full) [full-end];>*{grid-column:content}}.popout{grid-column:popout}.expand{grid-column:expand}.full-bleed{grid-column:full}.content-grid>hr+*{margin-top:0}.wrapper,[class*=wrapper-]{--w-max:var(--w-xl);margin-inline:auto;width:min(100% - (var(--s-3) * 2),var(--w-max))}[class*=w-max-]{width:min(100%,var(--w-max))}.w-max-xs,.wrapper-xs{--w-max:var(--w-xs)}.w-max-sm,.wrapper-sm{--w-max:var(--w-sm)}.w-max-md,.wrapper-md{--w-max:var(--w-md)}.w-max-content,.wrapper-content{--w-max:var(--w-content)}.w-max-lg,.wrapper-lg{--w-max:var(--w-lg)}.w-max-xl,.wrapper-xl{--w-max:var(--w-xl)}.w-100\%{width:100%}.w-100vw{width:100vw}.w-max-100vw{max-width:100vw}.w-fit-content{width:fit-content}.h-100\%{height:100%}.h-100dvh{height:100dvh}.h-max-100dvh{max-height:100dvh}.box{inset:0}.aspect-ratio-16x9{aspect-ratio:16/9}.aspect-ratio-21x9{aspect-ratio:21/9}.aspect-ratio-4x3{aspect-ratio:4/3}.aspect-ratio-1x1{aspect-ratio:1/1}}@layer decoration{.mx-auto{margin-inline:auto}.m-0{margin:0}.m-1{margin:var(--s-1)}.m-2{margin:var(--s-2)}.m-3{margin:var(--s-3)}.m-4{margin:var(--s-4)}.mt-0{margin-top:0}.mt-1{margin-top:var(--s-1)}.mt-2{margin-top:var(--s-2)}.mt-3{margin-top:var(--s-3)}.mt-4{margin-top:var(--s-4)}.mr-0{margin-right:0}.mr-1{margin-right:var(--s-1)}.mr-2{margin-right:var(--s-2)}.mr-3{margin-right:var(--s-3)}.mr-4{margin-right:var(--s-4)}.mb-0{margin-bottom:0}.mb-1{margin-bottom:var(--s-1)}.mb-2{margin-bottom:var(--s-2)}.mb-3{margin-bottom:var(--s-3)}.mb-4{margin-bottom:var(--s-4)}.ml-0{margin-left:0}.ml-1{margin-left:var(--s-1)}.ml-2{margin-left:var(--s-2)}.ml-3{margin-left:var(--s-3)}.ml-4{margin-left:var(--s-4)}.mx-1{margin-inline:var(--s-1)}.mx-2{margin-inline:var(--s-2)}.mx-3{margin-inline:var(--s-3)}.mx-4{margin-inline:var(--s-4)}.my-1{margin-block:var(--s-1)}.my-2{margin-block:var(--s-2)}.my-3{margin-block:var(--s-3)}.my-4{margin-block:var(--s-4)}.p-0{padding:0}.p-1{padding:var(--s-1)}.p-2{padding:var(--s-2)}.p-3{padding:var(--s-3)}.p-4{padding:var(--s-4)}.pt-0{padding-top:0}.pt-1{padding-top:var(--s-1)}.pt-2{padding-top:var(--s-2)}.pt-3{padding-top:var(--s-3)}.pt-4{padding-top:var(--s-4)}.pr-0{padding-right:0}.pr-1{padding-right:var(--s-1)}.pr-2{padding-right:var(--s-2)}.pr-3{padding-right:var(--s-3)}.pr-4{padding-right:var(--s-4)}.pb-0{padding-bottom:0}.pb-1{padding-bottom:var(--s-1)}.pb-2{padding-bottom:var(--s-2)}.pb-3{padding-bottom:var(--s-3)}.pb-4{padding-bottom:var(--s-4)}.pl-0{padding-left:0}.pl-1{padding-left:var(--s-1)}.pl-2{padding-left:var(--s-2)}.pl-3{padding-left:var(--s-3)}.pl-4{padding-left:var(--s-4)}.px-1{padding-inline:var(--s-1)}.px-2{padding-inline:var(--s-2)}.px-3{padding-inline:var(--s-3)}.px-4{padding-inline:var(--s-4)}.py-1{padding-block:var(--s-1)}.py-2{padding-block:var(--s-2)}.py-3{padding-block:var(--s-3)}.py-4{padding-block:var(--s-4)}.p-cell{padding:var(--p-cell)}.b-0{border:0}.b-thin{border:var(--b-1)}.b-thick{border:var(--b-2)}.b-heavy{border:var(--b-3)}.bt-thin{border-top:var(--b-1)}.bt-thick{border-top:var(--b-2)}.bt-heavy{border-top:var(--b-3)}.br-thin{border-right:var(--b-1)}.br-thick{border-right:var(--b-2)}.br-heavy{border-right:var(--b-3)}.bb-thin{border-bottom:var(--b-1)}.bb-thick{border-bottom:var(--b-2)}.bb-heavy{border-bottom:var(--b-3)}.bl-thin{border-left:var(--b-1)}.bl-thick{border-left:var(--b-2)}.bl-heavy{border-left:var(--b-3)}.rad,.rad-1{--rad:var(--s-1);border-radius:var(--rad)}.rad-tl{border-top-left-radius:var(--rad)}.rad-tl,.rad-tr{--rad:var(--s-1)}.rad-tr{border-top-right-radius:var(--rad)}.rad-br{border-bottom-right-radius:var(--rad)}.rad-bl,.rad-br{--rad:var(--s-1)}.rad-bl{border-bottom-left-radius:var(--rad)}.rad-2{--rad:var(--s-2)}.rad-3{--rad:var(--s-3)}.rad-4{--rad:var(--s-4)}.rad-pill{--rad:var(--pill)}.img-cover{height:100%;object-fit:cover;object-position:center;width:100%}.hover\:opacity-25\%\:hover,.opacity-25\%{opacity:.25}.hover\:opacity-50\%\:hover,.opacity-50\%{opacity:.5}.hover\:opacity-75\%\:hover,.opacity-75\%{opacity:.75}.hover\:opacity-100\%\:hover{opacity:1}}@layer colors{[class*=b-]{--bl:var(--l500)}[class*=t-]{--tl:var(--l500)}[class*=bg-]{--bgl:var(--l500)}.b-blue,.hover\:b-blue:hover{--bc:var(--blue);border-color:var(--bc)}.b-green,.hover\:b-green:hover{--bc:var(--green);border-color:var(--bc)}.b-amber,.hover\:b-amber:hover{--bc:var(--amber);border-color:var(--bc)}.b-red,.hover\:b-red:hover{--bc:var(--red);border-color:var(--bc)}.b-gray,.hover\:b-gray:hover{--bc:var(--gray);border-color:var(--bc)}.hover\:t-blue:hover,.t-blue{--tc:var(--blue);color:var(--tc)}.hover\:t-green:hover,.t-green{--tc:var(--green);color:var(--tc)}.hover\:t-amber:hover,.t-amber{--tc:var(--amber);color:var(--tc)}.hover\:t-red:hover,.t-red{--tc:var(--red);color:var(--tc)}.hover\:t-gray:hover,.t-gray{--tc:var(--gray);color:var(--tc)}.bg-blue,.hover\:bg-blue:hover{--bgc:var(--blue);background:var(--bgc)}.bg-green,.hover\:bg-green:hover{--bgc:var(--green);background:var(--bgc)}.bg-amber,.hover\:bg-amber:hover{--bgc:var(--amber);background:var(--bgc)}.bg-red,.hover\:bg-red:hover{--bgc:var(--red);background:var(--bgc)}.bg-gray,.hover\:bg-gray:hover{--bgc:var(--gray);background:var(--bgc)}}@layer color-lightness{[class*=b-100],[class*=b-200],[class*=b-300],[class*=b-400],[class*=b-500],[class*=b-600],[class*=b-700],[class*=b-800],[class*=b-900]{border-color:color-mix(in OKLAB,var(--bc),var(--bl))}.b-dark-invert{&[class*=b-100],&[class*=b-200],&[class*=b-300],&[class*=b-400],&[class*=b-500],&[class*=b-600],&[class*=b-700],&[class*=b-800],&[class*=b-900]{border-color:light-dark(color-mix(in OKLAB,var(--bc),var(--bl)),color-mix(in OKLAB,var(--bc),var(--bli)))}}.b-100,.hover\:b-100:hover{--bl:var(--l100);--bli:var(--l100i)}.b-200,.hover\:b-200:hover{--bl:var(--l200);--bli:var(--l200i)}.b-300,.hover\:b-300:hover{--bl:var(--l300);--bli:var(--l300i)}.b-400,.hover\:b-400:hover{--bl:var(--l400);--bli:var(--l400i)}.b-500,.hover\:b-500:hover{--bl:var(--l500);--bli:var(--l500i)}.b-600,.hover\:b-600:hover{--bl:var(--l600);--bli:var(--l600i)}.b-700,.hover\:b-700:hover{--bl:var(--l700);--bli:var(--l700i)}.b-800,.hover\:b-800:hover{--bl:var(--l800);--bli:var(--l800i)}.b-900,.hover\:b-900:hover{--bl:var(--l900);--bli:var(--l900i)}[class*=t-100],[class*=t-200],[class*=t-300],[class*=t-400],[class*=t-500],[class*=t-600],[class*=t-700],[class*=t-800],[class*=t-900]{color:color-mix(in OKLAB,var(--tc),var(--tl))}.t-dark-invert{&[class*=t-100],&[class*=t-200],&[class*=t-300],&[class*=t-400],&[class*=t-500],&[class*=t-600],&[class*=t-700],&[class*=t-800],&[class*=t-900]{color:light-dark(color-mix(in OKLAB,var(--tc),var(--tl)),color-mix(in OKLAB,var(--tc),var(--tli)))}}.hover\:t-100:hover,.t-100{--tl:var(--l100);--tli:var(--l100i)}.hover\:t-200:hover,.t-200{--tl:var(--l200);--tli:var(--l200i)}.hover\:t-300:hover,.t-300{--tl:var(--l300);--tli:var(--l300i)}.hover\:t-400:hover,.t-400{--tl:var(--l400);--tli:var(--l400i)}.hover\:t-500:hover,.t-500{--tl:var(--l500);--tli:var(--l500i)}.hover\:t-600:hover,.t-600{--tl:var(--l600);--tli:var(--l600i)}.hover\:t-700:hover,.t-700{--tl:var(--l700);--tli:var(--l700i)}.hover\:t-800:hover,.t-800{--tl:var(--l800);--tli:var(--l800i)}.hover\:t-900:hover,.t-900{--tl:var(--l900);--tli:var(--l900i)}[class*=bg-100],[class*=bg-200],[class*=bg-300],[class*=bg-400],[class*=bg-500],[class*=bg-600],[class*=bg-700],[class*=bg-800],[class*=bg-900]{background:color-mix(in OKLAB,var(--bgc),var(--bgl))}.bg-dark-invert{&[class*=bg-100],&[class*=bg-200],&[class*=bg-300],&[class*=bg-400],&[class*=bg-500],&[class*=bg-600],&[class*=bg-700],&[class*=bg-800],&[class*=bg-900]{background-color:light-dark(color-mix(in OKLAB,var(--bgc),var(--bgl)),color-mix(in OKLAB,var(--bgc),var(--bgli)))}}.bg-100,.hover\:bg-100:hover{--bgl:var(--l100);--bgli:var(--l100i)}.bg-200,.hover\:bg-200:hover{--bgl:var(--l200);--bgli:var(--l200i)}.bg-300,.hover\:bg-300:hover{--bgl:var(--l300);--bgli:var(--l300i)}.bg-400,.hover\:bg-400:hover{--bgl:var(--l400);--bgli:var(--l400i)}.bg-500,.hover\:bg-500:hover{--bgl:var(--l500);--bgli:var(--l500i)}.bg-600,.hover\:bg-600:hover{--bgl:var(--l600);--bgli:var(--l600i)}.bg-700,.hover\:bg-700:hover{--bgl:var(--l700);--bgli:var(--l700i)}.bg-800,.hover\:bg-800:hover{--bgl:var(--l800);--bgli:var(--l800i)}.bg-900,.hover\:bg-900:hover{--bgl:var(--l900);--bgli:var(--l900i)}}@layer color-other{.bg-transparent:not(:hover){background:transparent}.hover\:t-white:hover,.t-white{color:#fff}.hover\:t-white.t-dark-invert:hover,.t-white.t-dark-invert{color:light-dark(#fff,#000)}.b-white,.hover\:b-white:hover{border-color:#fff}.b-white.b-dark-invert,.hover\:b-white.b-dark-invert:hover{border-color:light-dark(#fff,#000)}.bg-white,.hover\:bg-white:hover{background:#fff}.bg-white.bg-dark-invert,.hover\:bg-white.bg-dark-invert:hover{background:light-dark(#fff,#000)}.hover\:t-black:hover,.t-black{color:#000}.hover\:t-black.t-dark-invert:hover,.t-black.t-dark-invert{color:light-dark(#000,#fff)}.b-black,.hover\:b-black:hover{border-color:#000}.b-black.b-dark-invert,.hover\:b-black.b-dark-invert:hover{border-color:light-dark(#000,#fff)}.bg-black,.hover\:bg-black:hover{background:#000}.bg-black.bg-dark-invert,.hover\:bg-black.bg-dark-invert:hover{background:light-dark(#000,#fff)}} \ No newline at end of file diff --git a/_src/css/partials/accessibility.css b/_src/css/partials/accessibility.css new file mode 100644 index 0000000..b7983fd --- /dev/null +++ b/_src/css/partials/accessibility.css @@ -0,0 +1,64 @@ +@layer links-and-accessibility { + /* Accessibility */ + + a { + text-decoration: underline; + color: var(--tc-link); + cursor: pointer; + transition: all 0.15s ease; + text-decoration-skip-ink: auto; + text-underline-offset: var(--a-deco-offset); + text-decoration-thickness: var(--a-deco-thickness); + &:not(.t-no-underline):hover { + text-decoration: underline; + text-decoration-thickness: var(--a-deco-thickness-hover); + color: var(--tc-link-hover); + } + } + + .t-no-underline, + .t-underline-hover-only, + .links-not-underlined a, + .links-not-underlined a:hover, + .links-underlined-hover-only a { + text-decoration: none; + } + + /* + * Based on the design systems of the UK Government (GOV.UK) and the UK National Health Service (NHS) + * https://design-system.service.gov.uk/get-started/focus-states/ + * https://service-manual.nhs.uk/design-system/styles/focus-state + */ + a:focus-visible { + outline: none; + color: black !important; + text-decoration: underline; + /* text-underline-offset: var(--a-deco-offset); */ + text-decoration-thickness: var(--a-deco-thickness-hover); + background-color: var(--amber) !important; + } + + input:focus, + textarea:focus, + select:focus, + form button:focus, + button:focus-visible, + a:focus-visible > img { + position: relative; + box-shadow: 0 0 0 3px black; + outline: 3px solid var(--amber); + outline-offset: 3px; + z-index: 1; + } + + /* Screen-eader only (and appears when tabbing, etc.) */ + .visually-hidden:not(:focus):not(:active) { + position: absolute; + width: 1px; + height: 1px; + clip: rect(0 0 0 0); + clip-path: inset(50%); + overflow: hidden; + white-space: nowrap; + } +} diff --git a/_src/css/partials/base.css b/_src/css/partials/base.css index 039610b..543f37e 100644 --- a/_src/css/partials/base.css +++ b/_src/css/partials/base.css @@ -1,29 +1,24 @@ @layer defaults { + html { + color-scheme: light dark; + &.theme-light { + color-scheme: light; + } + &.theme-dark { + color-scheme: dark; + } + } + body { - font-family: var(--t-base); + container-type: inline-size; + font-family: var(--ff-base); + font-size: var(--fs-base); color: var(--tc-base); background-color: var(--bgc-body); } - - /* - Accessibility (see also form inputs and buttons) - */ - - :focus-visible { - outline: 2px dotted black; - outline-offset: 0; - box-shadow: 0 0 0 2px white; - /* for improved accessibility over dark backgrounds */ - } - - .visually-hidden:not(:focus):not(:active) { - clip: rect(0 0 0 0); - -webkit-clip-path: inset(50%); - clip-path: inset(50%); - height: 1px; - overflow: hidden; - position: absolute; - white-space: nowrap; - width: 1px; + @container (min-width: 640px) { + body > * { + font-size: var(--fs-bump); + } } -} \ No newline at end of file +} diff --git a/_src/css/partials/colors-oklch.css b/_src/css/partials/colors-oklch.css deleted file mode 100644 index 8783c6b..0000000 --- a/_src/css/partials/colors-oklch.css +++ /dev/null @@ -1,747 +0,0 @@ -/* -`t-*` = text color -`b-*` = border color -`bg-*` = background color -`.hover\:` = hover (mouseover) state -*/ - -:root { - --tx: #222; - --bx: #aaa; - --bgx: #ddd; - - /* - Baselayer oklch() theme colors - */ - --tc-base: oklch(var(--l900) var(--c0) var(--gray)); - --tc-link: oklch(var(--l600) var(--c30) var(--blue)); - --tc-link-hover: oklch(var(--l800) var(--c30) var(--blue)); - --focus-ring: oklch(var(--l200) var(--c30) var(--blue)); - --bgc-input: oklch(var(--l100) var(--c0) var(--gray)); - --bgc-btn: oklch(var(--l600) var(--c0) var(--gray)); - --bgc-btn-hover: oklch(var(--l700) var(--c0) var(--gray)); - --bgc-code: oklch(var(--l100) var(--c10) var(--blue)); - --bc-fineline: oklch(var(--l200) var(--c0) var(--gray)); -} - -* { - /* lightness (decrements: 8.5%) */ - --l100: 97%; - --l200: 88.5%; - --l300: 80%; - --l400: 71.5%; - --l500: 63%; - --l600: 54.5%; - --l700: 46%; - --l800: 37.5%; - --l900: 29%; - --l1000: 20.5%; - /* #171717 */ - - /* chroma */ - --c0: 0; - --c02: 0.02; - --c04: 0.04; - --c06: 0.06; - --c08: 0.08; - --c10: 0.10; - --c15: 0.15; - --c20: 0.20; - --c25: 0.25; - --c30: 0.3; - /* (higher chromas are out of gamut for many monitors) */ - - /* hue */ - --gray: 0; - --red: 30; - --orange: 90; - --green: 155; - --blue: 265; - /* --coolgray: 265; - --warmgray: 65; - --brown: 75; - --teal: 195; - --purple: 300; - --pink: 345; */ - - /* builders */ - --tx: oklch(var(--tl) var(--tc) var(--th)); - --bx: oklch(var(--bl) var(--bc) var(--bh)); - --bgx: oklch(var(--bgl) var(--bgc) var(--bgh)); -} - -/* -Baselayer dark oklch() theme colors -=================================== -*/ - -/* -Dark theme -========== -Alternatively, you could set these up using... - -@media (prefers-clr-scheme: dark) { - * { } -} - -... if you don’t want to give your users the opportunity of choosing light or dark theme. -*/ - -.theme-dark, -.theme-dark * { - /* lightness (decrements: 7%) */ - --l100: 85%; - --l200: 77.5%; - --l300: 70%; - --l400: 62.5%; - --l500: 55%; - --l600: 47.5%; - --l700: 40%; - --l800: 32.5%; - --l900: 25%; - --l1000: 18%; - /* #121212 */ -} - -.theme-dark { - --bgc-body: oklch(var(--l1000) var(--c0) var(--gray)); - --tc-base: oklch(var(--l100) var(--c0) var(--gray)); - --tc-link: oklch(var(--l300) var(--c30) var(--blue)); - --tc-link-hover: oklch(var(--l400) var(--c30) var(--blue)); - --tc-input: white; - --bgc-input: oklch(var(--l800) var(--c0) var(--gray)); - --tc-code: white; - --bgc-code: oklch(var(--l800) var(--c30) var(--blue)); - --bc-fineline: oklch(var(--l600) var(--c0) var(--gray)); -} - -/* ============ */ - -@layer color-setup { - - .t-gray, - .hover\:t-gray:hover { - --tl: var(--l500); - --tc: var(--c0) !important; - --th: var(--gray); - color: var(--tx); - } - - .b-gray, - .hover\:b-gray:hover { - --bl: var(--l500); - --bc: var(--c0) !important; - --bh: var(--gray); - border-color: var(--bx); - } - - .bg-gray, - .hover\:bg-gray:hover { - --bgl: var(--l500); - --bgc: var(--c0) !important; - --bgh: var(--gray); - background: var(--bgx); - } - - .t-red, - .hover\:t-red:hover { - --tl: var(--l500); - --tc: var(--c30); - --th: var(--red); - color: var(--tx); - } - - .b-red, - .hover\:b-red:hover { - --bl: var(--l500); - --bc: var(--c30); - --bh: var(--red); - border-color: var(--bx); - } - - .bg-red, - .hover\:bg-red:hover { - --bgl: var(--l500); - --bgc: var(--c30); - --bgh: var(--red); - background: var(--bgx); - } - - .t-amber, - .hover\:t-amber:hover { - --tl: var(--l500); - --tc: var(--c30); - --th: var(--amber); - color: var(--tx); - } - - .b-amber, - .hover\:b-amber:hover { - --bl: var(--l500); - --bc: var(--c30); - --bh: var(--amber); - border-color: var(--bx); - } - - .bg-amber, - .hover\:bg-amber:hover { - --bgl: var(--l500); - --bgc: var(--c30); - --bgh: var(--amber); - background: var(--bgx); - } - - .t-green, - .hover\:t-green:hover { - --tl: var(--l500); - --tc: var(--c30); - --th: var(--green); - color: var(--tx); - } - - .b-green, - .hover\:b-green:hover { - --bl: var(--l500); - --bc: var(--c30); - --bh: var(--green); - border-color: var(--bx); - } - - .bg-green, - .hover\:bg-green:hover { - --bgl: var(--l500); - --bgc: var(--c30); - --bgh: var(--green); - background: var(--bgx); - } - - .t-blue, - .hover\:t-blue:hover { - --tl: var(--l500); - --tc: var(--c30); - --th: var(--blue); - color: var(--tx); - } - - .b-blue, - .hover\:b-blue:hover { - --bl: var(--l500); - --bc: var(--c30); - --bh: var(--blue); - border-color: var(--bx); - } - - .bg-blue, - .hover\:bg-blue:hover { - --bgl: var(--l500); - --bgc: var(--c30); - --bgh: var(--blue); - background: var(--bgx); - } - - /* - .t-teal, - .hover\:t-teal:hover { - --tl: var(--l500); - --tc: var(--c30); - --th: var(--teal); - color: var(--tx); - } - - .b-teal, - .hover\:b-teal:hover { - --bl: var(--l500); - --bc: var(--c30); - --bh: var(--teal); - border-color: var(--bx); - } - - .bg-teal, - .hover\:bg-teal:hover { - --bgl: var(--l500); - --bgc: var(--c30); - --bgh: var(--teal); - background: var(--bgx); - } - - .t-purple, - .hover\:t-purple:hover { - --tl: var(--l500); - --tc: var(--c30); - --th: var(--purple); - color: var(--tx); - } - - .b-purple, - .hover\:b-purple:hover { - --bl: var(--l500); - --bc: var(--c30); - --bh: var(--purple); - border-color: var(--bx); - } - .bg-purple, - .hover\:bg-purple:hover { - --bgl: var(--l500); - --bgc: var(--c30); - --bgh: var(--purple); - background: var(--bgx); - } - - .t-pink, - .hover\:t-pink:hover { - --tl: var(--l500); - --tc: var(--c30); - --th: var(--pink); - color: var(--tx); - } - - .b-pink, - .hover\:b-pink:hover { - --bl: var(--l500); - --bc: var(--c30); - --bh: var(--pink); - border-color: var(--bx); - } - - .bg-pink, - .hover\:bg-pink:hover { - --bgl: var(--l500); - --bgc: var(--c30); - --bgh: var(--pink); - background: var(--bgx); - } - - .t-coolgray, - .hover\:t-coolgray:hover { - --tl: var(--l500); - --tc: var(--c02) !important; - --th: var(--coolgray); - color: var(--tx); - } - - .b-coolgray, - .hover\:b-coolgray:hover { - --bl: var(--l500); - --bc: var(--c02) !important; - --bh: var(--gray); - border-color: var(--bx); - } - - .bg-coolgray, - .hover\:bg-coolgray:hover { - --bgl: var(--l500); - --bgc: var(--c02) !important; - --bgh: var(--coolgray); - background: var(--bgx); - } - - .t-warmgray, - .hover\:t-warmgray:hover { - --tl: var(--l500); - --tc: var(--c02) !important; - --th: var(--warmgray); - color: var(--tx); - } - - .b-warmgray, - .hover\:b-warmgray:hover { - --bl: var(--l500); - --bc: var(--c02) !important; - --bh: var(--warmgray); - border-color: var(--bx); - } - - .bg-warmgray, - .hover\:bg-warmgray:hover { - --bgl: var(--l500); - --bgc: var(--c02) !important; - --bgh: var(--warmgray); - background: var(--bgx); - } - - .t-brown, - .hover\:t-brown:hover { - --tl: var(--l500); - --tc: var(--c08) !important; - --th: var(--brown); - color: var(--tx); - } - - .b-brown, - .hover\:b-brown:hover { - --bl: var(--l500); - --bc: var(--c08) !important; - --bh: var(--brown); - border-color: var(--bx); - } - - .bg-brown, - .hover\:bg-brown:hover { - --bgl: var(--l500); - --bgc: var(--c08) !important; - --bgh: var(--brown); - background: var(--bgx); - } - */ -} - -@layer color-shade { - /* Text shades */ - - .t-100, - .hover\:t-100:hover { - --tl: var(--l100); - --tc: var(--c10); - color: var(--tx); - } - - .t-200, - .hover\:t-200:hover { - --tl: var(--l200); - --tc: var(--c15); - color: var(--tx); - } - - .t-300, - .hover\:t-300:hover { - --tl: var(--l300); - --tc: var(--c20); - color: var(--tx); - } - - .t-400, - .hover\:t-400:hover { - --tl: var(--l400); - --tc: var(--c25); - color: var(--tx); - } - - .t-500, - .hover\:t-500:hover { - --tl: var(--l500); - --tc: var(--c30); - color: var(--tx); - } - - .t-600, - .hover\:t-600:hover { - --tl: var(--l600); - --tc: var(--c25); - color: var(--tx); - } - - .t-700, - .hover\:t-700:hover { - --tl: var(--l700); - --tc: var(--c20); - color: var(--tx); - } - - .t-800, - .hover\:t-800:hover { - --tl: var(--l800); - --tc: var(--c15); - color: var(--tx); - } - - .t-900, - .hover\:t-900:hover { - --tl: var(--l900); - --tc: var(--c10); - color: var(--tx); - } - - /* Border shades */ - - .b-100, - .hover\:b-100:hover { - --bl: var(--l100); - --bc: var(--c10); - border-color: var(--bx); - } - - .b-200, - .hover\:b-200:hover { - --bl: var(--l200); - --bc: var(--c15); - border-color: var(--bx); - } - - .b-300, - .hover\:b-300:hover { - --bl: var(--l300); - --bc: var(--c20); - border-color: var(--bx); - } - - .b-400, - .hover\:b-400:hover { - --bl: var(--l400); - --bc: var(--c25); - border-color: var(--bx); - } - - .b-500, - .hover\:b-500:hover { - --bl: var(--l500); - --bc: var(--c30); - border-color: var(--bx); - } - - .b-600, - .hover\:b-600:hover { - --bl: var(--l600); - --bc: var(--c25); - border-color: var(--bx); - } - - .b-700, - .hover\:b-700:hover { - --bl: var(--l700); - --bc: var(--c20); - border-color: var(--bx); - } - - .b-800, - .hover\:b-800:hover { - --bl: var(--l800); - --bc: var(--c15); - border-color: var(--bx); - } - - .b-900, - .hover\:b-900:hover { - --bl: var(--l900); - --bc: var(--c10); - border-color: var(--bx); - } - - /* Background shades */ - - .bg-100, - .hover\:bg-100:hover { - --bgl: var(--l100); - --bgc: var(--c10); - background: var(--bgx); - } - - .bg-200, - .hover\:bg-200:hover { - --bgl: var(--l200); - --bgc: var(--c15); - background: var(--bgx); - } - - .bg-300, - .hover\:bg-300:hover { - --bgl: var(--l300); - --bgc: var(--c20); - background: var(--bgx); - } - - .bg-400, - .hover\:bg-400:hover { - --bgl: var(--l400); - --bgc: var(--c25); - background: var(--bgx); - } - - .bg-500, - .hover\:bg-500:hover { - --bgl: var(--l500); - --bgc: var(--c30); - background: var(--bgx); - } - - .bg-600, - .hover\:bg-600:hover { - --bgl: var(--l600); - --bgc: var(--c25); - background: var(--bgx); - } - - .bg-700, - .hover\:bg-700:hover { - --bgl: var(--l700); - --bgc: var(--c20); - background: var(--bgx); - } - - .bg-800, - .hover\:bg-800:hover { - --bgl: var(--l800); - --bgc: var(--c15); - background: var(--bgx); - } - - .bg-900, - .hover\:bg-900:hover { - --bgl: var(--l900); - --bgc: var(--c10); - background: var(--bgx); - } - - /* Dark theme shade inverters */ - - .theme-dark [class*=t-100].t-dark-invert { - --tl: var(--l900) - } - - .theme-dark [class*=t-200].t-dark-invert { - --tl: var(--l800) - } - - .theme-dark [class*=t-300].t-dark-invert { - --tl: var(--l700) - } - - .theme-dark [class*=t-400].t-dark-invert { - --tl: var(--l600) - } - - /* .theme-dark [class*=t-500].t-dark-invert { - --tl: var(--l500) - } */ - - .theme-dark [class*=t-600].t-dark-invert { - --tl: var(--l400) - } - - .theme-dark [class*=t-700].t-dark-invert { - --tl: var(--l300) - } - - .theme-dark [class*=t-800].t-dark-invert { - --tl: var(--l200) - } - - .theme-dark [class*=t-900].t-dark-invert { - --tl: var(--l100) - } - - .theme-dark [class*=b-100].b-dark-invert { - --bl: var(--l900) - } - - .theme-dark [class*=b-200].b-dark-invert { - --bl: var(--l800) - } - - .theme-dark [class*=b-300].b-dark-invert { - --bl: var(--l700) - } - - .theme-dark [class*=b-400].b-dark-invert { - --bl: var(--l600) - } - - /* .theme-dark [class*=b-500].b-dark-invert { - --bl: var(--l500) - } */ - - .theme-dark [class*=b-600].b-dark-invert { - --bl: var(--l400) - } - - .theme-dark [class*=b-700].b-dark-invert { - --bl: var(--l300) - } - - .theme-dark [class*=b-800].b-dark-invert { - --bl: var(--l200) - } - - .theme-dark [class*=b-900].b-dark-invert { - --bl: var(--l100) - } - - .theme-dark [class*=bg-100].bg-dark-invert { - --bgl: var(--l900) - } - - .theme-dark [class*=bg-200].bg-dark-invert { - --bgl: var(--l800) - } - - .theme-dark [class*=bg-300].bg-dark-invert { - --bgl: var(--l700) - } - - .theme-dark [class*=bg-400].bg-dark-invert { - --bgl: var(--l600) - } - - /* .theme-dark [class*=bg-500].bg-dark-invert { - --bgl: var(--l500) - } */ - - .theme-dark [class*=bg-600].bg-dark-invert { - --bgl: var(--l400) - } - - .theme-dark [class*=bg-700].bg-dark-invert { - --bgl: var(--l300) - } - - .theme-dark [class*=bg-800].bg-dark-invert { - --bgl: var(--l200) - } - - .theme-dark [class*=bg-900].bg-dark-invert { - --bgl: var(--l100) - } -} - -@layer color-other { - - /* Other color utilities */ - .bg-transparent:not(:hover) { - background: transparent; - } - - .t-white, - .hover\:t-white:hover { - color: white; - } - - .b-white, - .hover\:b-white:hover { - border-color: white; - } - - .bg-white, - .hover\:bg-white:hover { - background: white; - } - - .t-black, - .hover\:t-black:hover { - color: black; - } - - .b-black, - .hover\:b-black:hover { - border-color: black; - } - - .bg-black, - .hover\:bg-black:hover { - background: black; - } -} - -/* -Dark theme variables -*/ - -.theme-dark { - --bgc-body: oklch(var(--l1000) var(--c0) var(--gray)); - --tc-base: oklch(var(--l100) var(--c0) var(--gray)); - --tc-link: oklch(var(--l300) var(--c30) var(--blue)); - --tc-link-hover: oklch(var(--l400) var(--c30) var(--blue)); - --tc-input: white; - --bgc-input: oklch(var(--l800) var(--c0) var(--gray)); - --tc-code: white; - --bgc-code: oklch(var(--l800) var(--c30) var(--blue)); - --bc-fineline: oklch(var(--l600) var(--c0) var(--gray)); -} \ No newline at end of file diff --git a/_src/css/partials/colors.css b/_src/css/partials/colors.css index 185857e..a60d2bb 100644 --- a/_src/css/partials/colors.css +++ b/_src/css/partials/colors.css @@ -10,21 +10,20 @@ Variables: --bl = border lightness --tc = text color --tl = text lightness ---bgc = background color +--bgc = background color --bgl = background lightness */ -@layer color-setup { - - [class*=b-] { +@layer colors { + [class*="b-"] { --bl: var(--l500); } - [class*=t-] { + [class*="t-"] { --tl: var(--l500); } - [class*=bg-] { + [class*="bg-"] { --bgl: var(--l500); } @@ -125,265 +124,266 @@ Variables: } } -@layer color-shade { - - /* Border shades */ - - [class*=b-100], - [class*=b-200], - [class*=b-300], - [class*=b-400], - [class*=b-500] { - border-color: color-mix(in srgb, var(--bc) calc(var(--bl) * 2), white); - } - - .theme-dark [class*=b-500], - [class*=b-600], - [class*=b-700], - [class*=b-800], - [class*=b-900] { - border-color: color-mix(in srgb, var(--bc) calc((100% - var(--bl)) * 2), black); +@layer color-lightness { + /* Border */ + + [class*="b-100"], + [class*="b-200"], + [class*="b-300"], + [class*="b-400"], + [class*="b-500"], + [class*="b-600"], + [class*="b-700"], + [class*="b-800"], + [class*="b-900"] { + border-color: color-mix(in OKLAB, var(--bc), var(--bl)); + } + + .b-dark-invert { + &[class*="b-100"], + &[class*="b-200"], + &[class*="b-300"], + &[class*="b-400"], + &[class*="b-500"], + &[class*="b-600"], + &[class*="b-700"], + &[class*="b-800"], + &[class*="b-900"] { + border-color: light-dark( + color-mix(in OKLAB, var(--bc), var(--bl)), + color-mix(in OKLAB, var(--bc), var(--bli)) + ); + } } .b-100, .hover\:b-100:hover { --bl: var(--l100); + --bli: var(--l100i); } .b-200, .hover\:b-200:hover { --bl: var(--l200); + --bli: var(--l200i); } .b-300, .hover\:b-300:hover { --bl: var(--l300); + --bli: var(--l300i); } .b-400, .hover\:b-400:hover { --bl: var(--l400); + --bli: var(--l400i); } .b-500, .hover\:b-500:hover { --bl: var(--l500); + --bli: var(--l500i); } .b-600, .hover\:b-600:hover { --bl: var(--l600); + --bli: var(--l600i); } .b-700, .hover\:b-700:hover { --bl: var(--l700); + --bli: var(--l700i); } .b-800, .hover\:b-800:hover { --bl: var(--l800); + --bli: var(--l800i); } .b-900, .hover\:b-900:hover { --bl: var(--l900); - } - - /* Text shades */ - - [class*=t-100], - [class*=t-200], - [class*=t-300], - [class*=t-400], - [class*=t-500] { - color: color-mix(in srgb, var(--tc) calc(var(--tl) * 2), white); - } - - .theme-dark [class*=t-500], - [class*=t-600], - [class*=t-700], - [class*=t-800], - [class*=t-900] { - color: color-mix(in srgb, var(--tc) calc((100% - var(--tl)) * 2), black); + --bli: var(--l900i); + } + + /* Text */ + + [class*="t-100"], + [class*="t-200"], + [class*="t-300"], + [class*="t-400"], + [class*="t-500"], + [class*="t-600"], + [class*="t-700"], + [class*="t-800"], + [class*="t-900"] { + color: color-mix(in OKLAB, var(--tc), var(--tl)); + } + + .t-dark-invert { + &[class*="t-100"], + &[class*="t-200"], + &[class*="t-300"], + &[class*="t-400"], + &[class*="t-500"], + &[class*="t-600"], + &[class*="t-700"], + &[class*="t-800"], + &[class*="t-900"] { + color: light-dark( + color-mix(in OKLAB, var(--tc), var(--tl)), + color-mix(in OKLAB, var(--tc), var(--tli)) + ); + } } .t-100, .hover\:t-100:hover { --tl: var(--l100); + --tli: var(--l100i); } .t-200, .hover\:t-200:hover { --tl: var(--l200); + --tli: var(--l200i); } .t-300, .hover\:t-300:hover { --tl: var(--l300); + --tli: var(--l300i); } .t-400, .hover\:t-400:hover { --tl: var(--l400); + --tli: var(--l400i); } .t-500, .hover\:t-500:hover { --tl: var(--l500); + --tli: var(--l500i); } .t-600, .hover\:t-600:hover { --tl: var(--l600); + --tli: var(--l600i); } .t-700, .hover\:t-700:hover { --tl: var(--l700); + --tli: var(--l700i); } .t-800, .hover\:t-800:hover { --tl: var(--l800); + --tli: var(--l800i); } .t-900, .hover\:t-900:hover { --tl: var(--l900); - } - - /* Background-shades */ - - [class*=bg-100], - [class*=bg-200], - [class*=bg-300], - [class*=bg-400], - [class*=bg-500] { - background: color-mix(in srgb, var(--bgc) calc(var(--bgl) * 2), white); - } - - .theme-dark [class*=bg-500], - [class*=bg-600], - [class*=bg-700], - [class*=bg-800], - [class*=bg-900] { - background: color-mix(in srgb, var(--bgc) calc((100% - var(--bgl)) * 2), black); + --tli: var(--l900i); + } + + /* Background */ + + [class*="bg-100"], + [class*="bg-200"], + [class*="bg-300"], + [class*="bg-400"], + [class*="bg-500"], + [class*="bg-600"], + [class*="bg-700"], + [class*="bg-800"], + [class*="bg-900"] { + background: color-mix(in OKLAB, var(--bgc), var(--bgl)); + } + + .bg-dark-invert { + &[class*="bg-100"], + &[class*="bg-200"], + &[class*="bg-300"], + &[class*="bg-400"], + &[class*="bg-500"], + &[class*="bg-600"], + &[class*="bg-700"], + &[class*="bg-800"], + &[class*="bg-900"] { + background-color: light-dark( + color-mix(in OKLAB, var(--bgc), var(--bgl)), + color-mix(in OKLAB, var(--bgc), var(--bgli)) + ); + } } .bg-100, .hover\:bg-100:hover { --bgl: var(--l100); + --bgli: var(--l100i); } .bg-200, .hover\:bg-200:hover { --bgl: var(--l200); + --bgli: var(--l200i); } .bg-300, .hover\:bg-300:hover { --bgl: var(--l300); + --bgli: var(--l300i); } .bg-400, .hover\:bg-400:hover { --bgl: var(--l400); + --bgli: var(--l400i); } .bg-500, .hover\:bg-500:hover { --bgl: var(--l500); + --bgli: var(--l500i); } .bg-600, .hover\:bg-600:hover { --bgl: var(--l600); + --bgli: var(--l600i); } .bg-700, .hover\:bg-700:hover { --bgl: var(--l700); + --bgli: var(--l700i); } .bg-800, .hover\:bg-800:hover { --bgl: var(--l800); + --bgli: var(--l800i); } .bg-900, .hover\:bg-900:hover { --bgl: var(--l900); - } - - /* - Dark theme shade inverters - */ - - /* Border colors */ - - .theme-dark [class*=b-100].b-dark-invert, - .theme-dark [class*=b-200].b-dark-invert, - .theme-dark [class*=b-300].b-dark-invert, - .theme-dark [class*=b-400].b-dark-invert, - .theme-dark [class*=b-500].b-dark-invert { - border-color: color-mix(in srgb, var(--bc) calc((100% - var(--bl)) * 2), black); - } - - .theme-dark [class*=b-600].t-dark-invert, - .theme-dark [class*=b-700].t-dark-invert, - .theme-dark [class*=b-800].t-dark-invert, - .theme-dark [class*=b-900].t-dark-invert { - border-color: color-mix(in srgb, var(--bc) calc(var(--bl) * 2), white); - } - - /* Text colors (note: no `-500` needed */ - - .theme-dark [class*=t-100].t-dark-invert, - .theme-dark [class*=t-200].t-dark-invert, - .theme-dark [class*=t-300].t-dark-invert, - .theme-dark [class*=t-400].t-dark-invert { - color: color-mix(in srgb, var(--tc) calc((100% - var(--tl)) * 2), black); - } - - .theme-dark [class*=t-600].t-dark-invert, - .theme-dark [class*=t-700].t-dark-invert, - .theme-dark [class*=t-800].t-dark-invert, - .theme-dark [class*=t-900].t-dark-invert { - color: color-mix(in srgb, var(--tc) calc(var(--tl) * 2), white); - } - - /* Background colors */ - .theme-dark [class*=bg-100], - .theme-dark [class*=bg-200], - .theme-dark [class*=bg-300], - .theme-dark [class*=bg-400] { - background: color-mix(in srgb, var(--bgc) calc(var(--bgl) * 2), white); - } - - .theme-dark [class*=bg-600].bg-dark-invert, - .theme-dark [class*=bg-700].bg-dark-invert, - .theme-dark [class*=bg-800].bg-dark-invert, - .theme-dark [class*=bg-900].bg-dark-invert { - background: color-mix(in srgb, var(--bgc) calc(var(--bgl) * 2), white); - } - - .theme-dark [class*=bg-100].bg-dark-invert, - .theme-dark [class*=bg-200].bg-dark-invert, - .theme-dark [class*=bg-300].bg-dark-invert, - .theme-dark [class*=bg-400].bg-dark-invert { - background: color-mix(in srgb, var(--bgc) calc((100% - var(--bgl)) * 2), black); - } - - .theme-dark [class*=bg-600].bg-dark-invert, - .theme-dark [class*=bg-700].bg-dark-invert, - .theme-dark [class*=bg-800].bg-dark-invert, - .theme-dark [class*=bg-900].bg-dark-invert { - background: color-mix(in srgb, var(--bgc) calc(var(--bgl) * 2), white); + --bgli: var(--l900i); } } @layer color-other { + /* Colors - other */ + .bg-transparent:not(:hover) { background: transparent; } @@ -392,89 +392,54 @@ Variables: .hover\:t-white:hover { color: white; } + .t-white.t-dark-invert, + .hover\:t-white.t-dark-invert:hover { + color: light-dark(white, black); + } .b-white, .hover\:b-white:hover { border-color: white; } + .b-white.b-dark-invert, + .hover\:b-white.b-dark-invert:hover { + border-color: light-dark(white, black); + } .bg-white, .hover\:bg-white:hover { background: white; } + .bg-white.bg-dark-invert, + .hover\:bg-white.bg-dark-invert:hover { + background: light-dark(white, black); + } .t-black, .hover\:t-black:hover { color: black; } + .t-black.t-dark-invert, + .hover\:t-black.t-dark-invert:hover { + color: light-dark(black, white); + } .b-black, .hover\:b-black:hover { border-color: black; } + .b-black.b-dark-invert, + .hover\:b-black.b-dark-invert:hover { + border-color: light-dark(black, white); + } .bg-black, .hover\:bg-black:hover { background: black; } - .t-reversi, - .hover\:t-reversi:hover { - color: black; - } - - .b-reversi, - .hover\:b-reversi:hover { - border-color: black; - } - - .bg-reversi, - .hover\:bg-reversi:hover { - background: black; - } - - .theme-dark .t-reversi, - .theme-dark .hover\:t-reversi:hover { - color: white; - } - - .theme-dark .b-reversi, - .theme-dark .hover\:b-reversi:hover { - border-color: white; - } - - .theme-dark .bg-reversi, - .theme-dark .hover\:bg-reversi:hover { - background: white; - } - - .t-reversi-alt, - .hover\:t-reversi-alt:hover { - color: white; - } - - .b-reversi-alt, - .hover\:b-reversi-alt:hover { - border-color: white; + .bg-black.bg-dark-invert, + .hover\:bg-black.bg-dark-invert:hover { + background: light-dark(black, white); } - - .bg-reversi-alt, - .hover\:bg-reversi-alt:hover { - background: white; - } - - .theme-dark .t-reversi-alt, - .theme-dark .hover\:t-reversi-alt:hover { - color: black; - } - - .theme-dark .b-reversi-alt, - .theme-dark .hover\:b-reversi-alt:hover { - border-color: black; - } - - .theme-dark .bg-reversi-alt, - .theme-dark .hover\:bg-reversi-alt:hover { - background: black; - } -} \ No newline at end of file +} diff --git a/_src/css/partials/decoration.css b/_src/css/partials/decoration.css index f72db57..0fb3abf 100644 --- a/_src/css/partials/decoration.css +++ b/_src/css/partials/decoration.css @@ -1,46 +1,46 @@ @layer decoration { .mx-auto { - margin-inline: auto + margin-inline: auto; } .m-0 { - margin: 0 + margin: 0; } .m-1 { - margin: var(--sp-1) + margin: var(--s-1); } .m-2 { - margin: var(--sp-2) + margin: var(--s-2); } .m-3 { - margin: var(--sp-3) + margin: var(--s-3); } .m-4 { - margin: var(--sp-4) + margin: var(--s-4); } .mt-0 { - margin-top: 0 + margin-top: 0; } .mt-1 { - margin-top: var(--sp-1) + margin-top: var(--s-1); } .mt-2 { - margin-top: var(--sp-2) + margin-top: var(--s-2); } .mt-3 { - margin-top: var(--sp-3) + margin-top: var(--s-3); } .mt-4 { - margin-top: var(--sp-4) + margin-top: var(--s-4); } .mr-0 { @@ -48,39 +48,39 @@ } .mr-1 { - margin-right: var(--sp-1) + margin-right: var(--s-1); } .mr-2 { - margin-right: var(--sp-2) + margin-right: var(--s-2); } .mr-3 { - margin-right: var(--sp-3) + margin-right: var(--s-3); } .mr-4 { - margin-right: var(--sp-4) + margin-right: var(--s-4); } .mb-0 { - margin-bottom: var(--sp-1) + margin-bottom: 0; } .mb-1 { - margin-bottom: var(--sp-1) + margin-bottom: var(--s-1); } .mb-2 { - margin-bottom: var(--sp-2) + margin-bottom: var(--s-2); } .mb-3 { - margin-bottom: var(--sp-3) + margin-bottom: var(--s-3); } .mb-4 { - margin-bottom: var(--sp-4) + margin-bottom: var(--s-4); } .ml-0 { @@ -88,75 +88,71 @@ } .ml-1 { - margin-left: var(--sp-1) + margin-left: var(--s-1); } .ml-2 { - margin-left: var(--sp-2) + margin-left: var(--s-2); } .ml-3 { - margin-left: var(--sp-3) + margin-left: var(--s-3); } .ml-4 { - margin-left: var(--sp-4) + margin-left: var(--s-4); } .mx-1 { - margin-inline: var(--sp-1) + margin-inline: var(--s-1); } .mx-2 { - margin-inline: var(--sp-2) + margin-inline: var(--s-2); } .mx-3 { - margin-inline: var(--sp-3) + margin-inline: var(--s-3); } .mx-4 { - margin-inline: var(--sp-4) + margin-inline: var(--s-4); } .my-1 { - margin-block: var(--sp-1) + margin-block: var(--s-1); } .my-2 { - margin-block: var(--sp-2) + margin-block: var(--s-2); } .my-3 { - margin-block: var(--sp-3) + margin-block: var(--s-3); } .my-4 { - margin-block: var(--sp-4) - } - - .p-cell { - padding: var(--p-cell) + margin-block: var(--s-4); } .p-0 { - padding: 0 + padding: 0; } .p-1 { - padding: var(--sp-1) + padding: var(--s-1); } .p-2 { - padding: var(--sp-2) + padding: var(--s-2); } .p-3 { - padding: var(--sp-3) + padding: var(--s-3); } .p-4 { - padding: var(--sp-4) + padding: var(--s-4); } .pt-0 { @@ -164,19 +160,19 @@ } .pt-1 { - padding-top: var(--sp-1) + padding-top: var(--s-1); } .pt-2 { - padding-top: var(--sp-2) + padding-top: var(--s-2); } .pt-3 { - padding-top: var(--sp-3) + padding-top: var(--s-3); } .pt-4 { - padding-top: var(--sp-4) + padding-top: var(--s-4); } .pr-0 { @@ -184,19 +180,19 @@ } .pr-1 { - padding-right: var(--sp-1) + padding-right: var(--s-1); } .pr-2 { - padding-right: var(--sp-2) + padding-right: var(--s-2); } .pr-3 { - padding-right: var(--sp-3) + padding-right: var(--s-3); } .pr-4 { - padding-right: var(--sp-4) + padding-right: var(--s-4); } .pb-0 { @@ -204,19 +200,19 @@ } .pb-1 { - padding-bottom: var(--sp-1) + padding-bottom: var(--s-1); } .pb-2 { - padding-bottom: var(--sp-2) + padding-bottom: var(--s-2); } .pb-3 { - padding-bottom: var(--sp-3) + padding-bottom: var(--s-3); } .pb-4 { - padding-bottom: var(--sp-4) + padding-bottom: var(--s-4); } .pl-0 { @@ -224,138 +220,161 @@ } .pl-1 { - padding-left: var(--sp-1) + padding-left: var(--s-1); } .pl-2 { - padding-left: var(--sp-2) + padding-left: var(--s-2); } .pl-3 { - padding-left: var(--sp-3) + padding-left: var(--s-3); } .pl-4 { - padding-left: var(--sp-4) + padding-left: var(--s-4); } .px-1 { - padding-inline: var(--sp-1) + padding-inline: var(--s-1); } .px-2 { - padding-inline: var(--sp-2) + padding-inline: var(--s-2); } .px-3 { - padding-inline: var(--sp-3) + padding-inline: var(--s-3); } .px-4 { - padding-inline: var(--sp-4) + padding-inline: var(--s-4); } .py-1 { - padding-block: var(--sp-1) + padding-block: var(--s-1); } .py-2 { - padding-block: var(--sp-2) + padding-block: var(--s-2); } .py-3 { - padding-block: var(--sp-3) + padding-block: var(--s-3); } .py-4 { - padding-block: var(--sp-4) + padding-block: var(--s-4); + } + + .p-cell { + padding: var(--p-cell); } .b-0 { - border: 0 + border: 0; + } + + .b-thin { + border: var(--b-1); } - .b-1 { - border: var(--b-1) + .b-thick { + border: var(--b-2); } - .b-2 { - border: var(--b-2) + .b-heavy { + border: var(--b-3); } - .b-3 { - border: var(--b-3) + .bt-thin { + border-top: var(--b-1); } - .bt-1 { - border-top: var(--b-1) + .bt-thick { + border-top: var(--b-2); } - .bt-2 { - border-top: var(--b-2) + .bt-heavy { + border-top: var(--b-3); } - .bt-3 { - border-top: var(--b-3) + .br-thin { + border-right: var(--b-1); } - .br-1 { - border-right: var(--b-1) + .br-thick { + border-right: var(--b-2); } - .br-2 { - border-right: var(--b-2) + .br-heavy { + border-right: var(--b-3); } - .br-3 { - border-right: var(--b-3) + .bb-thin { + border-bottom: var(--b-1); } - .bb-1 { - border-bottom: var(--b-1) + .bb-thick { + border-bottom: var(--b-2); } - .bb-2 { - border-bottom: var(--b-2) + .bb-heavy { + border-bottom: var(--b-3); } - .bb-3 { - border-bottom: var(--b-3) + .bl-thin { + border-left: var(--b-1); } - .bl-1 { - border-left: var(--b-1) + .bl-thick { + border-left: var(--b-2); } - .bl-2 { - border-left: var(--b-2) + .bl-heavy { + border-left: var(--b-3); } - .bl-3 { - border-left: var(--b-3) + .rad, + .rad-1 { + --rad: var(--s-1); + border-radius: var(--rad); } - .r-2 { - border-radius: var(--r-2) + .rad-tl { + --rad: var(--s-1); + border-top-left-radius: var(--rad); } - .r-3 { - border-radius: var(--r-3) + .rad-tr { + --rad: var(--s-1); + border-top-right-radius: var(--rad); } - .r-4 { - border-radius: var(--r-4) + .rad-br { + --rad: var(--s-1); + border-bottom-right-radius: var(--rad); } - .r-pill { - border-radius: 99em + .rad-bl { + --rad: var(--s-1); + border-bottom-left-radius: var(--rad); } - .r-2, - .r-3, - .r-4, - .r-pill { - overflow: hidden; + .rad-2 { + --rad: var(--s-2); + } + + .rad-3 { + --rad: var(--s-3); + } + + .rad-4 { + --rad: var(--s-4); + } + + .rad-pill { + --rad: var(--pill); } .img-cover { @@ -383,5 +402,4 @@ .hover\:opacity-100\%\:hover { opacity: 1; } - -} \ No newline at end of file +} diff --git a/_src/css/partials/forms.css b/_src/css/partials/forms.css index 0926ac1..c5d5e37 100644 --- a/_src/css/partials/forms.css +++ b/_src/css/partials/forms.css @@ -1,62 +1,50 @@ @layer forms-and-buttons { - fieldset { border: var(--b-1); + padding: var(--s-2); } label, legend { - font-family: var(--t-base); + font-family: var(--ff-base); } ::placeholder { - color: var(--tc-input); - opacity: .7; + color: var(--tc-form); + opacity: 0.7; } input, select, textarea { - outline: 0 none; - min-height: var(--h-input); - border: 0; + min-height: var(--y-form); + border: var(--b-form); border-radius: unset; padding: var(--p-cell); - font-family: var(--t-base); + font-family: var(--ff-base); font-size: inherit; text-align: start; - color: var(--tc-input); - background: var(--bgc-input); - } - - input:focus, - select:focus, - textarea:focus { - position: relative; - z-index: 1; - outline: 0; - box-shadow: 0 0 0 4px var(--focus-ring); + color: var(--tc-form); + background: var(--bgc-form); } select:not([multiple]) { - height: var(--h-input); + height: var(--y-form); } [type="color"] { - width: var(--h-input); - height: var(--h-input); - padding: .25em; + width: var(--y-form); + height: var(--y-form); + padding: 0.25em; } [type="checkbox"], [type="radio"] { - display: inline; - height: 0.85em; + display: inline-block; min-height: unset; - width: 1em; } - [type=search] { + [type="search"] { -webkit-appearance: textfield; appearance: textfield; } @@ -68,10 +56,6 @@ background: var(--bgc-btn); } - .theme-dark input { - color-scheme: dark; - } - :disabled:hover { cursor: not-allowed; } @@ -88,48 +72,32 @@ position: relative; -webkit-appearance: none; appearance: none; - height: var(--h-input); + min-height: var(--y-form); display: inline-flex; justify-content: center; align-items: center; margin: 0; border: 1px solid transparent; - padding: var(--sp-1) 1em; - font-family: var(--t-base); + padding: var(--s-2) 1em; + font-family: var(--ff-base); font-size: inherit; font-weight: var(--fw-btn); text-decoration: none; color: var(--tc-btn); background: var(--bgc-btn); transition: all 0.15s ease; + &:hover { + text-decoration: none; + color: var(--tc-btn-hover); + background: var(--bgc-btn-hover); + cursor: pointer; + } } - button:hover, - [type="button"]:hover, - [type="submit"]:hover, - [type="reset"]:hover, - .btn:hover { - color: var(--tc-btn-hover); - background: var(--bgc-btn-hover); - cursor: pointer; - } - - button:focus-visible, - [type="button"]:focus-visible, - [type="submit"]:focus-visible, - [type="reset"]:focus-visible { - z-index: 1; - outline: 0; - box-shadow: 0 0 0 4px var(--focus-ring); - } - - /* Note: The .btn class doesn’t get this input focus ring. As normal, it will - get the link focus ring insead when you do .... */ - .btn-icon { - width: var(--h-input); - height: var(--h-input); + width: var(--y-form); + height: var(--y-form); padding: 0; line-height: inherit; } -} \ No newline at end of file +} diff --git a/_src/css/partials/layout.css b/_src/css/partials/layout.css index 2d32c23..b09e42e 100644 --- a/_src/css/partials/layout.css +++ b/_src/css/partials/layout.css @@ -1,5 +1,4 @@ @layer layout { - .container { container-type: inline-size; } @@ -56,9 +55,9 @@ float: left; } - .clearfix:after { - /* use on immediate parent elements around float sets */ - content: ''; + /* use on immediate parent elements around float sets */ + .clearfix::after { + content: ""; display: table; clear: both; } @@ -71,8 +70,8 @@ overflow-y: auto; } - .overflow-hidden { - overflow: hidden; + .overflow-clip { + overflow: clip; } .block { @@ -127,20 +126,20 @@ justify-content: space-between; } - .flex-grow-equal>* { + .flex-grow-equal > * { flex: 1; } - .flex-grow-auto>* { + .flex-grow-auto > * { flex: auto; } .grow { - flex-grow: 1; + flex: 1; } /* - Invisibility + Invisibility for smaller viewports (“hidden-below”) */ @container (max-width: 639px) { @@ -161,131 +160,131 @@ } } - /* + /* Grid system */ + [class*="grid"] { + --cols: 1; /* preventing unexpected inheritance when nesting grids */ + } + .grid { display: grid; } .grid-dense { - grid-auto-flow: dense + grid-auto-flow: dense; } - [class*=equal-] { - grid-template-columns: repeat(var(--cols), minmax(1rem, 1fr)) + [class*="equal-"] { + grid-template-columns: repeat(var(--cols), minmax(1rem, 1fr)); } - [class*=col-1], - [class*=col-2], - [class*=col-3], - [class*=col-4] { - grid-column: var(--col) + [class*="col-1"], + [class*="col-2"], + [class*="col-3"], + [class*="col-4"] { + grid-column: var(--col); } - [class*=row-1], - [class*=row-2], - [class*=row-3], - [class*=row-4] { - grid-row: var(--row) + [class*="row-1"], + [class*="row-2"], + [class*="row-3"], + [class*="row-4"] { + grid-row: var(--row); } - [class*=col-span-] { + [class*="col-span-"] { --col: auto; - grid-column: var(--col) / span var(--cspan) + grid-column: var(--col) / span var(--cspan); } - [class*=row-span-] { + [class*="row-span-"] { --row: auto; - grid-row: var(--row) / span var(--rspan) + grid-row: var(--row) / span var(--rspan); } - /* - Tier Zero (all viewport widths) - */ - .equal-2-cols { - --cols: 2 + --cols: 2; } .equal-3-cols { - --cols: 3 + --cols: 3; } .equal-4-cols { - --cols: 4 + --cols: 4; } .col-1 { - --col: 1 + --col: 1; } .col-2 { - --col: 2 + --col: 2; } .col-3 { - --col: 3 + --col: 3; } .col-4 { - --col: 4 + --col: 4; } .col-span-1 { - --cspan: 1 + --cspan: 1; } .col-span-2 { - --cspan: 2 + --cspan: 2; } .col-span-3 { - --cspan: 3 + --cspan: 3; } .col-span-4 { - --cspan: 4 + --cspan: 4; } .row-1 { - --row: 1 + --row: 1; } .row-2 { - --row: 2 + --row: 2; } .row-3 { - --row: 3 + --row: 3; } .row-4 { - --row: 4 + --row: 4; } .row-span-1 { - --rspan: 1 + --rspan: 1; } .row-span-2 { - --rspan: 2 + --rspan: 2; } .row-span-3 { - --rspan: 3 + --rspan: 3; } .row-span-4 { - --rspan: 4 + --rspan: 4; } - /* - Tier 1 (sm) - */ - @container (min-width: 640px) { + .sm\:block { + display: block; + } + .sm\:flex { display: flex; } @@ -294,88 +293,92 @@ display: none !important; } + .sm\:grid { + display: grid; + } + .sm\:equal-2-cols { - --cols: 2 + --cols: 2; } .sm\:equal-3-cols { - --cols: 3 + --cols: 3; } .sm\:equal-4-cols { - --cols: 4 + --cols: 4; } .sm\:col-1 { - --col: 1 + --col: 1; } .sm\:col-2 { - --col: 2 + --col: 2; } .sm\:col-3 { - --col: 3 + --col: 3; } .sm\:col-4 { - --col: 4 + --col: 4; } .sm\:col-span-1 { - --cspan: 1 + --cspan: 1; } .sm\:col-span-2 { - --cspan: 2 + --cspan: 2; } .sm\:col-span-3 { - --cspan: 3 + --cspan: 3; } .sm\:col-span-4 { - --cspan: 4 + --cspan: 4; } .sm\:row-1 { - --row: 1 + --row: 1; } .sm\:row-2 { - --row: 2 + --row: 2; } .sm\:row-3 { - --row: 3 + --row: 3; } .sm\:row-4 { - --row: 4 + --row: 4; } .sm\:row-span-1 { - --rspan: 1 + --rspan: 1; } .sm\:row-span-2 { - --rspan: 2 + --rspan: 2; } .sm\:row-span-3 { - --rspan: 3 + --rspan: 3; } .sm\:row-span-4 { - --rspan: 4 + --rspan: 4; } } - /* - Tier 2 (md) - */ - @container (min-width: 960px) { + .md\:block { + display: block; + } + .md\:flex { display: flex; } @@ -384,196 +387,200 @@ display: none !important; } + .md\:grid { + display: grid; + } + .md\:equal-2-cols { - --cols: 2 + --cols: 2; } .md\:equal-3-cols { - --cols: 3 + --cols: 3; } .md\:equal-4-cols { - --cols: 4 + --cols: 4; } .md\:col-1 { - --col: 1 + --col: 1; } .md\:col-2 { - --col: 2 + --col: 2; } .md\:col-3 { - --col: 3 + --col: 3; } .md\:col-4 { - --col: 4 + --col: 4; } .md\:col-span-1 { - --cspan: 1 + --cspan: 1; } .md\:col-span-2 { - --cspan: 2 + --cspan: 2; } .md\:col-span-3 { - --cspan: 3 + --cspan: 3; } .md\:col-span-4 { - --cspan: 4 + --cspan: 4; } .md\:row-1 { - --row: 1 + --row: 1; } .md\:row-2 { - --row: 2 + --row: 2; } .md\:row-3 { - --row: 3 + --row: 3; } .md\:row-4 { - --row: 4 + --row: 4; } .md\:row-span-1 { - --rspan: 1 + --rspan: 1; } .md\:row-span-2 { - --rspan: 2 + --rspan: 2; } .md\:row-span-3 { - --rspan: 3 + --rspan: 3; } .md\:row-span-4 { - --rspan: 4 + --rspan: 4; } } - /* - Tier 3 (lg) - */ - @container (min-width: 1280px) { - .lg\:flex { + .lg\:block { display: flex; } - .sm\:hidden { + .lg\:flex { + display: block; + } + + .lg\:hidden { display: none !important; } + .lg\:grid { + display: grid; + } + .lg\:equal-2-cols { - --cols: 2 + --cols: 2; } .lg\:equal-3-cols { - --cols: 3 + --cols: 3; } .lg\:equal-4-cols { - --cols: 4 + --cols: 4; } .lg\:col-1 { - --col: 1 + --col: 1; } .lg\:col-2 { - --col: 2 + --col: 2; } .lg\:col-3 { - --col: 3 + --col: 3; } .lg\:col-4 { - --col: 4 + --col: 4; } .lg\:col-span-1 { - --cspan: 1 + --cspan: 1; } .lg\:col-span-2 { - --cspan: 2 + --cspan: 2; } .lg\:col-span-3 { - --cspan: 3 + --cspan: 3; } .lg\:col-span-4 { - --cspan: 4 + --cspan: 4; } .lg\:row-1 { - --row: 1 + --row: 1; } .lg\:row-2 { - --row: 2 + --row: 2; } .lg\:row-3 { - --row: 3 + --row: 3; } .lg\:row-4 { - --row: 4 + --row: 4; } .lg\:row-span-1 { - --rspan: 1 + --rspan: 1; } .lg\:row-span-2 { - --rspan: 2 + --rspan: 2; } .lg\:row-span-3 { - --rspan: 3 + --rspan: 3; } .lg\:row-span-4 { - --rspan: 4 + --rspan: 4; } } /* Gaps - these work for both flexbox (including inside buttons) and the grid system. - (However, don’t use these on container-grid.) + (However, don’t use these on `content-grid` (see below).) */ .gap-1 { - --gap: var(--sp-1); - gap: var(--gap) !important; + gap: var(--s-1); } .gap-2 { - --gap: var(--sp-2); - gap: var(--gap) !important; + gap: var(--s-2); } .gap-3 { - --gap: var(--sp-3); - gap: var(--gap) !important; + gap: var(--s-3); } .gap-4 { - --gap: var(--sp-4); - gap: var(--gap) !important; + gap: var(--s-4); } /* @@ -581,17 +588,22 @@ */ .content-grid { - --full: minmax(var(--sp-2), 1fr); + --full: minmax(var(--s-3), 1fr); --expand: minmax(0, var(--w-expand)); - --pop: minmax(0, var(--sp-2)); - --content: min(var(--w-cg), 100% - (var(--sp-2) * 2)); + --pop: minmax(0, var(--s-3)); + --content: min(var(--w-content), 100% - (var(--s-3) * 2)); display: grid; grid-template-columns: - [full-start] var(--full) [expand-start] var(--expand) [popout-start] var(--pop) [content-start] var(--content) [content-end] var(--pop) [popout-end] var(--expand) [expand-end] var(--full) [full-end]; - } - - .content-grid>* { - grid-column: content; + [full-start] var(--full) + [expand-start] var(--expand) + [popout-start] var(--pop) + [content-start] var(--content) [content-end] + var(--pop) [popout-end] + var(--expand) [expand-end] + var(--full) [full-end]; + > * { + grid-column: content; + } } .popout { @@ -606,52 +618,51 @@ grid-column: full; } - .content-grid>hr+* { + .content-grid > hr + * { margin-top: 0; } /* - wrapper (f.k.a. containers) and max-widths + wrappers (f.k.a. containers) and max-widths */ .wrapper, - [class^=wrapper-] { + [class*="wrapper-"] { --w-max: var(--w-xl); - --sp-inline: var(--sp-2); - width: min(100% - (var(--sp-inline) * 2), var(--w-max)); + width: min(100% - (var(--s-3) * 2), var(--w-max)); margin-inline: auto; } - .w-xs, - .w-sm, - .w-md, - .w-lg, - .w-xl { + [class*="w-max-"] { width: min(100%, var(--w-max)); } .wrapper-xs, - .w-xs { + .w-max-xs { --w-max: var(--w-xs); } .wrapper-sm, - .w-sm { + .w-max-sm { --w-max: var(--w-sm); } .wrapper-md, - .w-md { + .w-max-md { --w-max: var(--w-md); } + .wrapper-content, + .w-max-content { + --w-max: var(--w-content); + } .wrapper-lg, - .w-lg { + .w-max-lg { --w-max: var(--w-lg); } .wrapper-xl, - .w-xl { + .w-max-xl { --w-max: var(--w-xl); } @@ -667,6 +678,10 @@ max-width: 100vw; } + .w-fit-content { + width: fit-content; + } + .h-100\% { height: 100%; } @@ -699,4 +714,7 @@ aspect-ratio: 4 / 3; } -} \ No newline at end of file + .aspect-ratio-1x1 { + aspect-ratio: 1 / 1; + } +} diff --git a/_src/css/partials/reset.css b/_src/css/partials/reset.css index 66ddcfd..2c1fdea 100644 --- a/_src/css/partials/reset.css +++ b/_src/css/partials/reset.css @@ -1,10 +1,10 @@ -/** - * CSS Reset -- based on - * https://www.joshwcomeau.com/css/custom-css-reset/ - * https://andy-bell.co.uk/a-more-modern-css-reset/ - */ - @layer defaults { + /** + * CSS Reset -- based on: + * https://www.joshwcomeau.com/css/custom-css-reset/ + * https://andy-bell.co.uk/a-more-modern-css-reset/ + */ + html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; @@ -21,8 +21,8 @@ body { min-height: 100dvh; margin: 0; - font-size: var(--fs-base); - line-height: var(--lh-base); + font-size: var(--ff-base); + line-height: var(--t-lh); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } @@ -46,4 +46,4 @@ :target { scroll-margin-block: 5ex; } -} \ No newline at end of file +} diff --git a/_src/css/partials/typography.css b/_src/css/partials/typography.css index 0af1ed0..cd59073 100644 --- a/_src/css/partials/typography.css +++ b/_src/css/partials/typography.css @@ -1,5 +1,4 @@ @layer typography { - p, ol, ul, @@ -10,20 +9,22 @@ figure, figcaption, blockquote { - margin-block: 0 var(--m-lh); - text-wrap: pretty; + margin-block: 0 var(--t-mb); } caption { - margin-block: var(--sp-1); + margin-block: var(--s-2); } + h1 { + font-family: var(--h-ff); + font-weight: var(--h-fw); + line-height: var(--h-lh); + margin-block: 0 var(--t-mb); + } h1, .h1 { font-size: var(--h1); - font-weight: var(--h-fw); - line-height: var(--h-lh); - margin-block: 0 var(--m-lh); } h2, @@ -52,71 +53,48 @@ } h2, - .h2, h3, - .h3, h4, - .h4, h5, - .h5, - h6, - .h6 { - margin-block: var(--h-lh) var(--m-lh); + h6 { + margin-block: var(--h-mt) var(--t-mb); + font-family: var(--h-ff); font-weight: var(--h-fw); line-height: var(--h-lh); text-wrap: balance; + .content-grid & { + /* This because CSS grid prevents margin-collapse on neighboring grid items */ + margin-top: calc(var(--h-mt) - var(--t-mb)); + } } - - .content-grid>h2, - .content-grid>.h2, - .content-grid>h3, - .content-grid>.h3, - .content-grid>h4, - .content-grid>.h4, - .content-grid>h5, - .content-grid>.h5, - .content-grid>h6, - .content-grid>.h6 { - /* This because CSS grid prevents margin-collapse on grid items */ - margin-block: - calc(var(--h-lh) - var(--m-lh)) var(--m-lh); - ; - } - - a { - text-decoration: underline; - color: var(--tc-link); - cursor: pointer; - transition: all 0.15s ease; - } - - a, - a * { - text-decoration-skip-ink: auto; - text-decoration-thickness: var(--d-thick-link); - text-underline-offset: var(--d-off-link); - } - - a:hover, - a:focus { - color: var(--tc-link-hover); + .content-grid > h2:first-child { + margin-top: 0; } ol, - ul { - margin-block: 0 var(--m-lh); + ul, + menu { + margin-block: 0 var(--t-mb); padding-left: 1.5em; } - li ol, - li ul, - li+li { - margin-block: var(--sp-list) 0; + li { + ol, + ul, + + li { + margin-block: var(--t-mb) 0; + } + } + + ol ol { + list-style-type: lower-alpha; + ol { + list-style-type: lower-roman; + } } dl { - margin: 0 0 var(--m-lh); - ; + margin: 0 0 var(--t-mb); } dt { @@ -124,33 +102,32 @@ } dd { - margin: 0 0 var(--sp-list); + margin: var(--t-mb) 0; padding-left: 1.5em; } - ol ol { - list-style-type: lower-alpha; - } - - ol ol ol { - list-style-type: lower-roman; + .unlist { + list-style-type: none; } .table { width: 100%; border-collapse: collapse; border-spacing: 0; + border-top: var(--b-1); + border-bottom: var(--b-1); } - - .table th, - .table td { - border: var(--b-1); + th, + td { padding: var(--p-cell); vertical-align: top; text-align: left; + .table-grid & { + border: var(--b-1); + } } - - .table th { + th { + border-bottom: var(--b-1); font-weight: bold; } @@ -164,7 +141,7 @@ blockquote { margin-inline: 0; - padding-inline: var(--sp-3); + padding-inline: var(--s-3); } blockquote p:last-child { @@ -174,14 +151,16 @@ code, kbd, samp { - font-family: var(--t-mono); + font-family: var(--ff-mono); font-style: normal; font-weight: normal; } code { display: inline-block; - padding-inline: .25em; + border: var(--b-1); + border-radius: var(--s-xs); + padding-inline: 0.25em; color: var(--tc-code); background: var(--bgc-code); } @@ -190,15 +169,17 @@ font-style: normal; font-weight: normal; white-space: pre; - overflow-x: auto; - } - - pre code { - display: block; - padding: 1em; - background: var(--bgc-code); - overflow-x: auto; - /* so that the background color extends into the hidden overflow area */ + &:not(:has(code)) { + overflow-x: auto; + } + code { + display: block; + border-radius: var(--s-1); + padding: 1em; + background: var(--bgc-code); + overflow-x: auto; + /* So that the :focus-visible ring works, and so that the background color extends into the overflowing area */ + } } sub, @@ -207,40 +188,21 @@ line-height: 0; } - .unlist, - .unlist li { - list-style-type: none; - padding: 0; - margin: 0; - } - - nav a, - .t-noline { - text-decoration: none; - } - - .hover\:t-line:hover { - text-decoration: underline; - text-decoration-skip-ink: auto; - text-decoration-thickness: var(--d-thick-link); - text-underline-offset: var(--d-off-link); - } - .t-nowrap { white-space: nowrap; } - .t-big { - font-size: var(--t-big) !important; + .t-lg { + font-size: var(--fs-lg); } small, - .t-small { - font-size: var(--t-small) !important; + .t-sm { + font-size: var(--fs-sm); } - .t-lighter { - font-weight: var(--fw-lighter); + .t-thin { + font-weight: var(--fw-thin); } .t-normal { @@ -275,6 +237,48 @@ text-align: left; } + @container (min-width: 640px) { + .sm\:t-right { + text-align: right; + } + + .sm\:t-center { + text-align: center; + } + + .sm\:t-left { + text-align: left; + } + } + + @container (min-width: 960px) { + .md\:t-right { + text-align: right; + } + + .md\:t-center { + text-align: center; + } + + .md\:t-left { + text-align: left; + } + } + + @container (min-width: 1280px) { + .lg\:t-right { + text-align: right; + } + + .lg\:t-center { + text-align: center; + } + + .lg\:t-left { + text-align: left; + } + } + .t-balance { text-wrap: balance; } @@ -293,19 +297,23 @@ font-size: var(--fs-long-read); } + .t-display { + font-size: var(--fs-display); + } + .t-base { - font-family: var(--t-base); + font-family: var(--ff-base); } .t-prose { - font-family: var(--t-prose); + font-family: var(--ff-prose); } /* Un-comment these if required */ /* .t-prose.t-normal, .t-prose { - font-family: var(--t-prose); + font-family: var(--ff-prose); font-size: var(--fs-baseprose); font-weight: var(--fwprose); } @@ -317,5 +325,4 @@ .t-prose .t-long-read { font-size: var(--fs-long-read-prose); } */ - -} \ No newline at end of file +} diff --git a/_src/css/partials/variables.css b/_src/css/partials/variables.css index 8fae027..8441230 100644 --- a/_src/css/partials/variables.css +++ b/_src/css/partials/variables.css @@ -1,227 +1,158 @@ :root { - /* Fallback colors (pre `color-mix()` */ - --bgc-body: white; - --tc-base: #222; - --tc-link: #4162e3; - --tc-link-hover: #344fb6; - --focus-ring: #9BAFF9; - --tc-input: black; - --bgc-input: #f5f5f5; - --tc-btn: white; - --tc-btn-hover: white; - --bgc-btn: #808080; - --bgc-btn-hover: #707070; - --tc-code: black; - --bgc-code: #e0e0e0; - --bgc-highlight: #ffcc0066; - --bc-fineline: #d9d9d9; - - /* Theme base colors */ - --blue: #3b6cff; - --green: #01b236; - --amber: #f0b300; - --red: #f80200; - --gray: #767676; - - /* Light theme colors */ - --tc-base: color-mix(in srgb, var(--gray) calc((100% - var(--l900)) * 2), black); - --tc-link: color-mix(in srgb, var(--blue) calc((100% - var(--l600)) * 2), black); - --tc-link-hover: color-mix(in srgb, var(--blue) calc((100% - var(--l800)) * 2), black); - --focus-ring: color-mix(in srgb, var(--blue) calc(var(--l300) * 2), white); - --tc-input: black; - --bgc-input: #f5f5f5; - --tc-btn: white; - --tc-btn-hover: white; - --bgc-btn: color-mix(in srgb, var(--gray) calc((100% - var(--l500)) * 2), white); - --bgc-btn-hover: color-mix(in srgb, var(--gray) calc((100% - var(--l600)) * 2), black); - --tc-code: black; - --bgc-code: color-mix(in srgb, var(--gray) calc(var(--l200) * 2), white); - --bgc-highlight: #ffcc0066; - --bc-fineline: color-mix(in srgb, var(--gray) calc(var(--l200) * 2), white); -} - -* { - /* Color shades; increments: 10% */ - --l100: 5%; - --l200: 15%; - --l300: 25%; - --l400: 35%; - --l500: 45%; - --l600: 55%; - --l700: 65%; - --l800: 75%; - --l900: 85%; - --l1000: 95%; -} - -/* Dark theme; increments: 8% */ -.theme-dark, -.theme-dark * { - --l100: 22%; - --l200: 30%; - --l300: 38%; - --l400: 46%; - --l500: 54%; - --l600: 62%; - --l700: 70%; - --l800: 78%; - --l900: 86%; - --l1000: 94% -} - -.theme-dark .b-dark-invert, -.theme-dark .t-dark-invert, -.theme-dark .bg-dark-invert { - --l100: 86%; - --l200: 78%; - --l300: 70%; - --l400: 62%; - --l500: 54%; - --l600: 46%; - --l700: 38%; - --l800: 30%; - --l900: 22%; -} - -.theme-dark { - --bgc-body: color-mix(in srgb, var(--gray) calc((100% - var(--l1000)) * 2), black); - --tc-base: color-mix(in srgb, var(--gray) calc(var(--l100) * 2), white); - --tc-link: color-mix(in srgb, var(--blue) calc(var(--l400) * 2), white); - --tc-link-lighter: color-mix(in srgb, var(--blue) calc(var(--l300) * 2), white); - --tc-link-darker: color-mix(in srgb, var(--blue) calc(var(--l500) * 2), white); - --tc-link-hover: var(--tc-link-lighter); - --focus-ring: color-mix(in srgb, var(--blue) calc((100% - var(--l600)) * 2), black); - --tc-input: white; - --bgc-input: color-mix(in srgb, var(--gray) calc((100% - var(--l900)) * 2), black); - --bgc-btn: color-mix(in srgb, var(--gray) calc((100% - var(--l600)) * 2), black); - --bgc-btn-lighter: color-mix(in srgb, var(--gray) calc((100% - var(--l500)) * 2), white); - --bgc-btn-darker: color-mix(in srgb, var(--gray) calc((100% - var(--l700)) * 2), black); - --bgc-btn-hover: var(--bgc-btn-lighter); - --tc-code: white; - --bgc-code: color-mix(in srgb, var(--gray) calc((100% - var(--l800)) * 2), black); - --bc-fineline: color-mix(in srgb, var(--gray) calc((100% - var(--l700)) * 2), black); -} - -:root { - /* Native Typeface Stacks */ - --t-sans: ui-sans-serif, system-ui, sans-serif; - --t-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; - --t-mono: ui-monospace, Menlo, Consolas, "Courier New", monospace; - - /* Alternative serif font stack (not used anywhere) */ - --t-old-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; - - --t-base: var(--t-sans); - --t-prose: var(--t-serif); - - /* Base font size */ - --fs-base: 100%; - /* Base line-height (no unit required) */ - --lh-base: 1.5; - /* margin line-height in rems */ - --m-lh: calc(var(--lh-base) * 1rem); - - --t-small: .8em; - --t-big: 1.25em; - - /* Font weights */ - --fw-lighter: 200; - --fw-normal: 400; - --fw-semibold: 500; - --fw-bold: 700; - --fw-heavy: 900; - /* - Widths set at 320px intervals - Same as `@media` and `@container` min-widths + Widths + ====== + Note: sm, md, and lg are the same as `@container` min-widths. */ --w-xs: 320px; --w-sm: 640px; --w-md: 960px; --w-lg: 1280px; --w-xl: 1600px; + --w-content: 40em; /* Used in the content grid, and in `w-content` */ + --w-expand: 10.79em; /* 40em + (2 x 10.79em) = 1280px */ /* - Content grid - ============ - Default content becomes max width 640px when font-size is 16px (1rem) - Expand panels becomes max width 960px when font-size is 16px (1rem) + Spacing (and border-radius) + =========================== + Used for margins, paddings, flexbox gaps, and grid gaps. + Note: `--s-3` and `--s-4` are based on https://clamp.font-size.app/ + (but using cqi), expanding to 1.5× of initial value from 640px to 1280px. */ - --w-cg: 40em; - --w-expand: 8.5em; + --s-1: 0.25rem; /* 4px */ + --s-2: 0.5rem; /* 8px */ + --s-3: clamp(1rem, 0.5rem + 1.25cqi, 1.5rem); + --s-4: clamp(2rem, 1rem + 2.5cqi, 3rem); + --pill: 99rem; + --p-cell: 0.5rem 1rem; /* table cells, form inputs, and a utility class */ + /* Borders */ + --b-1: 1px solid var(--bc-fineline); + --b-2: var(--s-1) solid var(--bc-fineline); + --b-3: var(--s-2) solid var(--bc-fineline); + + /* Native Typeface Stacks */ + --ff-sans: ui-sans-serif, system-ui, Arial, sans-serif; + --ff-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; + --ff-mono: ui-monospace, Menlo, Consolas, "Courier New", monospace; + --ff-base: var(--ff-sans); + --ff-prose: var(--ff-serif); + + /* Font sizes */ + --fs-base: 100%; /* usually 16ppx */ + --fs-bump: 112.5%; /* usually 18px */ + --fs-sm: 0.8em; + --fs-lg: 1.325em; + --fs-long-read: clamp(1em, 0.8333cqi + 0.5208vw, 1.25em); + --fs-display: clamp(1.125rem, 1.25cqi + 0.625rem, 1.625rem); /* - Spacing - ======= - Used for margins, paddings, flexbox gaps, and grid gaps. Notes: - * `--sp-2` through `--sp-4` clamps are based on https://clamp.font-size.app/, - expanding each to 1.5× of initial value from 640px to 1280px. - * `--sp-2` through `--sp-4` involve viewport widths (vw) or container widths (cqi) - depending on context. See also “container query powered variables” below. + 20px ramp to 32px (thru 640 --> 1280). H1 will max out at 72px. + Used https://clamp.font-size.app/ but changed vw to cqi */ - --sp-1: 0.5rem; - --sp-2: clamp(1rem, 0.5rem + 1.25vw, 1.5rem); - --sp-3: clamp(2rem, 1rem + 2.5vw, 3rem); - --sp-4: clamp(3rem, 1.5rem + 3.75vw, 4.5rem); - /* table cells, form inputs, and similar utility class */ - --p-cell: var(--sp-1) calc(2 * var(--sp-1)); - /* list spacing (between items) */ - --sp-list: 0.75em; - /* - Major third typographic scale - ============================= - Salculated by https://type-scale.com + /* Font weights */ + --fw-thin: 200; + --fw-normal: 400; + --fw-semibold: 600; + --fw-bold: 700; + --fw-heavy: 900; + --fw-btn: var(--fw-semibold); + + /* Forms */ + --b-form: 1px solid var(--bc-form); + --y-form: 2.5em; + + /* + Headings + ======== Set heading sizes using ems, so that all headings can be `clamp()` - enlarged by wrapping with `.t-long-read` + enlarged by wrapping with `.t-display` */ - --h1: 2.441em; - --h2: 1.953em; - --h3: 1.563em; + --h1: 2.25em; + --h2: 1.875em; + --h3: 1.5em; --h4: 1.25em; - --h5: 1em; - --h6: .8em; - /* headings font */ - --h-font: inherit; - /* headings font-weight */ - --h-fw: var(--fw-bold); - /* headings line-height */ + --h5: 1.125em; + --h6: 1em; + --h-ff: inherit; /* headings font family */ + --h-fw: var(--fw-semibold); --h-lh: calc(1em + 0.5rem); + --h-mt: calc(var(--t-mb) * 2); - /* - Long-read utility - See also “container query powered variables” below. - */ - --fs-long-read: clamp(1rem, 0.625rem + 0.9375vw, 1.375rem); - ; + --t-mb: 1rem; /* typographic elements margin-bottom */ + --t-lh: 1.5; /* Base line-height (no unit required) */ - /* link decoration offset */ - --d-off-link: .3rem; - /* link decoration thickness */ - --d-thick-link: 1px; - /* input and button height */ - --h-input: 2.5em; - /* button font-weight */ - --fw-btn: var(--fw-semibold); + --a-deco-offset: 0.3em; /* link decoration offset */ + --a-deco-thickness: 1px; /* link decoration thickness */ + --a-deco-thickness-hover: 3px; /* link decoration thickness :hover */ - /* Borders */ - --b-1: 1px solid var(--bc-fineline); - --b-2: 4px solid var(--bc-fineline); - --b-3: 8px solid var(--bc-fineline); - - /* Border radius (rounded corners) */ - --r-2: 4px; - --r-3: 8px; - --r-4: 16px; + /* Theme base colors */ + --blue: #0040ff; + --green: #128a12; + --amber: #e6de00; + --red: #e60000; + --gray: #808080; + + /* Light and dark theme colors */ + --bgc-body: light-dark( + color-mix(in oklch, white), + color-mix(in oklch, var(--gray), var(--l1000)) + ); + --tc-base: light-dark( + color-mix(in oklch, var(--gray), var(--l900)), + color-mix(in oklch, var(--gray), var(--l100)) + ); + --tc-link: light-dark( + color-mix(in oklch, var(--blue), var(--l600)), + color-mix(in oklch, var(--blue), var(--l400)) + ); + --tc-link-hover: light-dark( + color-mix(in oklch, var(--blue), var(--l800)), + color-mix(in oklch, var(--blue), var(--l500)) + ); + --tc-btn: white; + --tc-btn-hover: white; + --bgc-btn: light-dark( + color-mix(in oklch, var(--gray), var(--l500)), + color-mix(in oklch, var(--gray), var(--l600)) + ); + --bgc-btn-hover: light-dark( + color-mix(in oklch, var(--gray), var(--l600)), + color-mix(in oklch, var(--gray), var(--l700)) + ); + --bc-form: var(--bgc-btn); + --tc-form: CanvasText; + --bgc-form: Canvas; + --tc-code: light-dark( + color-mix(in oklch, var(--green), var(--l600)), + color-mix(in oklch, var(--green), var(--l300)) + ); + --bgc-code: light-dark(white, black); + --bc-fineline: light-dark( + color-mix(in oklch, var(--gray), var(--l300)), + color-mix(in oklch, var(--gray), var(--l700)) + ); + + /* Color shades */ + --l100: white 90%; + --l200: white 72%; + --l300: white 54%; + --l400: white 36%; + --l500: white 18%; + --l600: black 0%; + --l700: black 18%; + --l800: black 36%; + --l900: black 54%; + --l1000: black 72%; + + /* Color shades inverted (used for `*-dark-invert`) */ + --l100i: black 54%; + --l200i: black 36%; + --l300i: black 18%; + --l400i: black 0%; + --l500i: white 18%; + --l600i: white 36%; + --l700i: white 54%; + --l800i: white 72%; + --l900i: white 90%; } - -/* Container query powered variables */ -.container { - /* No need for `--sp-1` here, because it’s always 0.5rem */ - --sp-2: clamp(1rem, 0.5rem + 1.25cqi, 1.5rem); - --sp-3: clamp(2rem, 1rem + 2.5cqi, 3rem); - --sp-4: clamp(3rem, 1.5rem + 3.75cqi, 4.5rem); - - --fs-long-read: clamp(1rem, 0.625rem + 0.9375cqi, 1.375rem); - ; -} \ No newline at end of file diff --git a/_src/data/metadata.json b/_src/data/metadata.json index 66df330..0846507 100644 --- a/_src/data/metadata.json +++ b/_src/data/metadata.json @@ -1,10 +1,10 @@ { - "title": "Baselayer 3 CSS", - "version": "3.3.0", + "title": "Baselayer CSS", + "version": "3.4.0", "licence": "MIT", - "filesize": "22.65 KB", + "filesize": "22 KB", "developer": { "name": "Simon Padbury", "url": "https://github.com/SimonPadbury" } -} \ No newline at end of file +} diff --git a/_src/decoration.md b/_src/decoration.md index 1da9844..1f50d0b 100644 --- a/_src/decoration.md +++ b/_src/decoration.md @@ -8,78 +8,109 @@ prevLink: "Layout" nextLink: "Colors" --- -## Spacing (margins and paddings) +## Spacing -[Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model) margin and padding spacing have both 4 levels based on 4 CSS variables. +[Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model) margin and padding spacing have both 4 levels based on 4 CSS variables. These spacing variables are also used for gaps (in flexbox and the grid system), and for border radius utilities. The smallest level simply adds 0.5rem spacing, whereas levels 2 thorugh 4 increase responsively depending how how much width is available, using `clamp()` functions to ramp up to 1.5× their base size. -If the spacing decoration class is _not_ inside a `container` (see [container query powered layouts](/baselayer-3/layout/#container-query-powered-layouts)), the spacing ramp of levels 2 thorugh 4 uses the viewport width unit, `vw`. But the same spacing utility classes used inside a `container` will ramp up using the container query inline width unit, `cqi`. Both these ramps achieve 1.5× their base sizes at approximately 1280px available width. +The middle ramp within the clamp uses container query dependant units, `cqi`. This will either take effect from the container query context on the `` tag, or from any inner `container` classes that may be added on block elements (see [Layouts/ container query contexts]({{ "/layout/#container-query-contexts" | url }})). ```css -/* -Default spacing -*/ :root { - --sp-1: 0.5rem; - --sp-2: clamp(1rem, 0.5rem + 1.25vw, 1.5rem); - --sp-3: clamp(2rem, 1rem + 2.5vw, 3rem); - --sp-4: clamp(3rem, 1.5rem + 3.75vw, 4.5rem); -} - -/* -Container query powered spacing -*/ -.container { - --sp-2: clamp(1rem, 0.5rem + 1.25cqi, 1.5rem); - --sp-3: clamp(2rem, 1rem + 2.5cqi, 3rem); - --sp-4: clamp(3rem, 1.5rem + 3.75cqi, 4.5rem); + --s-1: 0.25rem; /* 4px */ + --s-2: 0.5rem; /* 8px */ + --s-3: clamp(1rem, 0.5rem + 1.25cqi, 1.5rem); /* 16px --> 24px */ + --s-4: clamp(2rem, 1rem + 2.5cqi, 3rem); /* 32px --> 40px */ } ``` This makes the negative space (“whitespace”) for spacing levels 2 through 4 larger where there is a larger container (or viewport) width available. -Both margin and padding spacers are controlled on the 4 sides of blocks, as follows: - -* All: `m-1` through `m-4` / `p-1` through `p-4` (all four sides) -* Top: `mt-1` through `mt-4` / `pt-1` through `pt-4` -* Right: `mr-1` through `mr-4` / `pr-1` through `pr-4` -* Bottom: `mb-1` through `mb-4` / `pb-1` through `pb-4` -* Left: `ml-1` through `ml-4` / `pl-1` through `pl-4` -* Inline axis, or x-axis (right and left): `mx-1` through `mx-4` / `px-4` through `px-4` -* Block acis, or y-axis (top and bottom): `my-1` through `my-4` / `py-4` through `py-4` +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Spacing variableDefault valueMargin (e.g.)Padding (e.g.)Border radiusGap (flexbox and grid)
--s-10.25remm-1p-1rad-1gap-1
--s-20.5remm-2p-2rad-2gap-2
--s-3clamp(1rem, 0.5rem + 1.25cqi, 1.5rem)m-3p-3rad-3gap-3
--s-4clamp(2rem, 1rem + 2.5cqi, 3rem)m-4p-4rad-4gap-4
+
Spacing example with paddings: -
p-1
+
+
p-1
+
p-2
+
p-3
+
p-4
+
-
p-2
+Both margin and padding spacers are controlled on the 4 sides of blocks, as follows: -
p-3
+* All: `m-0` through `m-4` / `p-0` through `p-4` (all four sides) +* Top: `mt-0` through `mt-4` / `pt-0` through `pt-4` +* Right: `mr-0` through `mr-4` / `pr-0` through `pr-4` +* Bottom: `mb-0` through `mb-4` / `pb-0` through `pb-4` +* Left: `ml-0` through `ml-4` / `pl-0` through `pl-4` +* Inline axis, or x-axis (right and left): `mx-1` through `mx-4` / `px-4` through `px-4` +* Block axis, or y-axis (top and bottom): `my-1` through `my-4` / `py-4` through `py-4` -
p-4
+The zero `*-0` options (top, roght, bottom, or left) are for removing (resetting) unwanted margin and padding. ### Spacing extras In addition, there are the following specials: -* `p-cell` — adds y-axis padding `--sp-1` and x-axis padding of double `--sp-1` for creating menu items. Same as the padding for table cells and buttons -* `mx-auto` — for x-axis margin auto-centering -* `m-0`, `mt-0`, `mb-0`, and `p-0` — for removing (resetting) unwanted space. - -`mb-0` is commonly used for removing the bottom margin on the last paragraph (or other typographic block) inside a `
` panel. `mt-0` is commonly used for removing top margin for headers used in side-columns (e.g. for navigation menus). - -These zero spacing utilities are declared before the spacers above in `decoration.css` so that you can use them to _reset_ and then use spacers to set spacing the way you want it. +* `p-cell` — adds y-axis padding `--s-1` and x-axis padding of double `--s-1` for creating menu items. Same as the padding for table cells and buttons +* `mx-auto` — for x-axis margin auto-centering ## Borders Baselayer provides three thicknesses of border (plus a zero border override): -
b-1 (1px)
- -
b-2 (4px)
- -
b-3 (8px)
+
+
b-thin (1px)
+
b-thick (4px)
+
b-heavy (8px)
+
Borders can be set as follows: @@ -95,61 +126,49 @@ Borders can be set as follows: ## Rounded corners -* `r-2` — 4px border radius -* `r-3` — 8px border radius -* `r-4` — 16px border radius +All Baselayer border radius classes apply their border radius _potentially to all four corners_. If you want different radii on different corners of the same element, then you can access each of the spacing variables in your CSS, or set your own values. -
-
r-2
-
r-3
-
r-4
-
+**Tip:** If you are putting rounded corners on a block element that contains an image, you will also need to add `overflow-clip`. -**Note:** border-radius classes have `overflow: hidden` built in, so that they can “clip” the corners of images. - -Border and border-radius variables pair as follows: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Border variableBorder-radius variableValue
--b1n/a1px
--b2--r24px
--b3--r38px
n/a--r416px
+The first five border radius classes below supply the property `border-{...}-radius` and the default spacing variable `--s-1` (0.5rem). + +* `rad`, `rad-1` — `border-radius:` (all) `--s-1` (0.5rem) +* `rad-tl` — `border-top-left-radius: `--s-1` +* `rad-tr` — `border-top-right-radius: `--s-1` +* `rad-br` — `border-bottom-right-radius: `--s-1` +* `rad-bl` — `border-bottom-left-radius: `--s-1` -**Note:** There is no `--r1` (a border radius of 1px) or `--b4` (border radius of 16px) in Baselayer. +Then there are five modifier classes. These only supply a spacing variable — they do not contain the `border-{...}-radius` property. Therefore, they need to be paired with (at least) one of the five border radius utilities above. -* `r-pill` — 99em border radius (more than sufficient to put x-axis semi-circular ends on even mid-sized blocks) +* `rad-xs` — `--s-xs` 0.25rem +* `rad-2` — `--s-2` clamp(1rem, 0.5rem + 1.25cqi, 1.5rem) +* `rad-3` — `--s-3` clamp(2rem, 1rem + 2.5cqi, 3rem) +* `rad-4` — `--s-4` clamp(3rem, 1.5rem + 3.75cqi, 4.5rem) +* `rad-pill` — `--s-pill` 99rem -
pill
+Examples: + +
+
rad rad-xs
+
rad or rad-1
+
rad rad-2
+
rad rad-3
+
rad rad-4
+
rad rad-pill
+
rad-tl rad-br rad-3
+
rad-tl rad-bl rad-pill
+
rad-tr rad-pill
+
+ +If the element is a square, then `rad rad-pill` makes a circle. + +
+
rad rad-pill
+
-If `r-pill` is used on a square, then the result will be a circle. +### Rounded corners extra -
280px²
square pill
+* `unrounded` — in some sutuations (e.g. if you code-in rounded corners on form elements and buttons), you may need to remove rounded corners with `unrounded`. ## The `img-cover` class @@ -180,4 +199,4 @@ The hover states are provided in case you want an image inside a link to change If you use these on an image over a colored background, then you get a color-tinted image. -If you have text over an image (e.g. in a hero component), then you can use opacity over a black (or dark color) background to make white text more readable — and _vise versa_. \ No newline at end of file +If you have text over an image (e.g. in a hero component), then you can use opacity over a black (or dark color) background to make white text more readable — and _vise versa_. diff --git a/_src/examples.md b/_src/examples.md index f9ec855..e79307b 100644 --- a/_src/examples.md +++ b/_src/examples.md @@ -4,236 +4,174 @@ mainHeading: Examples layout: base-fw.njk --- - - -

- -

- -## Layout [widths](/baselayer-3/layout/#widths) - -
wrapper
-
-
w-xs / 320px
-
w-xs
-
w-xs
-
w-xs
-
w-xs
-
-
-
w-sm / 640px
-
w-xs
-
w-xs
-
w-xs
-
-
-
w-md / 960px
-
w-xs
-
w-xs
-
-
-
w-lg / 1280px
-
w-xs
-
-
-
w-xl / 1600px
+
+
-## [Centered layout wrappers](/baselayer-3/layout/#centered-layout-wrappers) +* * * -
wrapper
-
wrapper-xl
-
wrapper-lg
-
wrapper-md
-
wrapper-sm
-
wrapper-xs
+## [Centered layout wrappers]({{ "/layout/#centered-layout-wrappers" | url }}) -## Labels (see [decoration](/baselayer-3/decoration/)) +**Note:** `container` is simply used for adding a [container query context]({{ "/layout/#container-query-contexts" | url }}) — it doesn’t add any constraints. + +
wrapper / wrapper-xl — max 1600px
+
wrapper-lg — max 1280px
+
wrapper-md — max 960px
+
wrapper-sm — max 640px
+
wrapper-xs — max 320px
+ +* * * + +## Labels (see [decoration]({{ '/decoration/' | url }}))
- + - +
-## [Buttons](/baselayer-3/buttons/) +* * * + +## [Buttons]({{ "/buttons/" | url }})
- - + + Link pseudo-button - - Link ghost pseudo-button + + Link ghost pseudo-button
-

Full width button inside a small wrapper

+

Full width button inside wrapper-sm

-## [Grid](/baselayer-3/layout/#grid) layouts +* * * -
-

A malleable grid without equalization set. on the cell widths. In this example, for sm up, columns will adopt whatever width they require for their content. CSS grid requires column placement classes to know where you want your columns, so that it can figure out how many columns you need.

+## Up to four column [grid layouts]({{ "/layout/#grid" | url }}) + +A malleable grid without setting equalization on cell widths. In this example, for sm up, columns will adopt whatever width they require for their content. Specify where you want your _grid items_ using column placement classes — then _CSS grid_ will figure out how many columns you need. + +

grid gap-1

-
-
sm:col-1 A narrow column
-
sm:col-2 This will be a wide column because it has a lot of content. This will be a wide column because it has a lot of content. This will be a wide column because it has a lot of content.
-
sm:col-3 Another narrow column
-
+
sm:col-1 A narrow column
+
sm:col-2 This will be a wide column because it has a lot of content. This will be a wide column because it has a lot of content. This will be a wide column because it has a lot of content.
+
sm:col-3 Another narrow column
-
+Using `equal-` modifiers on the grid wrapper will both equalize column width and specify the number of columns. Then for simple layouts (e.g. galleries), you won’t need column placement classes. + +
grid sm:equal-2-cols gap-2 -
-
#
-
#
+
+
#
+
#
grid sm:equal-2-cols md:equal-3-cols gap-2 -
-
#
-
#
-
#
-
#
-
sm:col-span-2
+
+
#
+
#
+
#
+
#
+
sm:col-span-2
-grid sm:equal-4-cols gap-2 -
-
#
-
#
-
sm:col-span-2
-
sm:col-span-3
-
#
+

sm:grid takes effect at 640px up. Below 640px, gap-2 will have no effect.

+sm:grid sm:equal-4-cols gap-2 +
+
#
+
sm:col-span-2
+
sm:col-span-3
+
sm:col-4 sm:row-1 sm:row-span-2
-## Example components - -
-
-
-
- ☆ Information panel -
-
- ⚠ Warning alert panel. -
-
-
-
-
Card category
-
- -
-
-

Card title

-

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni rem animi quaerat accusantium illum architecto, nemo, ex harum voluptatum adipisci eum blanditiis dolorum.

-

Get this thing

-
-
-
-
-
- -## Example components using [grid](/baselayer-3/layout/#grid) +* * * -
-
-
-
-
- -
-
-
-

Media object

-

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni rem animi quaerat accusantium illum architecto, nemo, ex harum voluptatum adipisci eum blanditiis dolorum.

- -
-
-
-
+## Text sizes -
-
-
-
-
- Form inputs etc. as grid items -
- - - - - -
-
-
-
-
-
-
- -
-
-

Media object

-

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni rem animi quaerat accusantium illum architecto, nemo, ex harum voluptatum adipisci eum blanditiis dolorum.

- -
-
-
-
-
+See [typography]({{ "/typography/" | url }}). `t-lg` simply enlarges by 1.325em. `t-long-read` and `t-display` involve a `clamp()`. -
-
-
-
- -
-
-
-

A “two-up” feature block

-

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni rem animi quaerat accusantium illum architecto, nemo, ex harum voluptatum adipisci eum blanditiis dolorum.

-

Discover more

-
-
-
+
+ + + + + + + + + + + + + + + +
Defaultt-lg wrappert-long-read wrappert-display wrapper
+

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+

Paragraph. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni rem animi quaerat accusantium illum architecto, nemo, ex harum voluptatum adipisci eum blanditiis dolorum. Natus debitis quisquam, expedita accusantium quos cumque?

+ 		+

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+

Paragraph. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni rem animi quaerat accusantium illum architecto, nemo, ex harum voluptatum adipisci eum blanditiis dolorum. Natus debitis quisquam, expedita accusantium quos cumque?

+ 		+

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+

Paragraph. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni rem animi quaerat accusantium illum architecto, nemo, ex harum voluptatum adipisci eum blanditiis dolorum. Natus debitis quisquam, expedita accusantium quos cumque?

+ 		+

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+

Paragraph. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni rem animi quaerat accusantium illum architecto, nemo, ex harum voluptatum adipisci eum blanditiis dolorum. Natus debitis quisquam, expedita accusantium quos cumque?

+
-## Research article page layout using [grid](/baselayer-3/layout/#grid) +## Example “research article” page layout using [grid](/baselayer-3/layout/#grid) -
+
grid md:equal-3-cols lg:equal-4-cols gap-3
-
+
md:col-2 md:col-span-2

Title of This Article

-
- md:col-2 md:col-span-2 lg:col-4 lg:row-span-2 p-1 relative
+
+ md:col-2 md:col-span-2 lg:col-4 lg:row-span-2 relative
sticky top

On this page TOC

    -
  • Introduction
    • +
  • Abstract
    • +
  • Materials and Methods
  • Discussion
  • Conclusion
@@ -242,7 +180,9 @@ Back
md:col-2 md:col-span-2 -

Introduction

+

Abstract

+

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni rem animi quaerat accusantium illum architecto, nemo, ex harum voluptatum adipisci eum blanditiis dolorum. Natus debitis quisquam, expedita accusantium quos cumque?

+

Materials and Methods

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni rem animi quaerat accusantium illum architecto, nemo, ex harum voluptatum adipisci eum blanditiis dolorum. Natus debitis quisquam, expedita accusantium quos cumque?

Discussion

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni rem animi quaerat accusantium illum architecto, nemo, ex harum voluptatum adipisci eum blanditiis dolorum. Natus debitis quisquam, expedita accusantium quos cumque?

@@ -250,7 +190,7 @@ Back

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni rem animi quaerat accusantium illum architecto, nemo, ex harum voluptatum adipisci eum blanditiis dolorum. Natus debitis quisquam, expedita accusantium quos cumque?

-
+
md:col-1 md:row-1 md:rows-1-3 lg:rows-1-2

Navigation menu

    @@ -262,22 +202,24 @@ Back
+* * * + ## [Content-grid](/baselayer-3/layout/#content-grid) layouts

Title of this content-grid demo

-

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni rem animi quaerat accusantium illum architecto, nemo, ex harum voluptatum adipisci eum blanditiis dolorum. Natus debitis quisquam, expedita accusantium quos cumque?

+

content-grid is intended for long-form articles. Its 7-column grid places the content in column 4, where each immediate-child elment will be its own grid item. popout spans rows 3-5. expand spans rows 2-6. full-bleed spans rows 1-7.

Here’s a styled <p class="popout">:

-
+
☆ Information panel

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni rem animi quaerat accusantium illum architecto, nemo, ex harum voluptatum adipisci eum blanditiis dolorum. Natus debitis quisquam, expedita accusantium quos cumque?

Here’s a styled <div class="expand">:

-
-

This is a lot of example text that may or may not distort the aspect ratio (16×9) of this expand component.

-

See what it does on a small viewport width (e.g. phone).

+
+

This example text may or may not distort the 16×9 aspect ratio that has been given to this demo component.

+

The SVG image rectangle will be 1280px by 720px if your viewport is big enough. See what it does on a narrow viewport width (e.g. phone).

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni rem animi quaerat accusantium illum architecto, nemo, ex harum voluptatum adipisci eum blanditiis dolorum. Natus debitis quisquam, expedita accusantium quos cumque?

@@ -285,4 +227,116 @@ Back
full-bleed — expands to the full width of the avilable space. If there are no sidebars, it will reach the sides of the viewport.
-
\ No newline at end of file +

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni rem animi quaerat accusantium illum architecto, nemo, ex harum voluptatum adipisci eum blanditiis dolorum. Natus debitis quisquam, expedita accusantium quos cumque?

+
+ +* * * + +## Example components + +Styled by utility classes. + +
+
+
+

Without *-dark-invert

+
+ ☆ Information panel +
+
+ ⚠ Warning alert panel. +
+

With *-dark-invert

+
+ ☆ Information panel +
+
+ ⚠ Warning alert panel. +
+
+
+
+
Card category
+
+ +
+
+

Card title

+

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni rem animi quaerat accusantium illum architecto, nemo, ex harum voluptatum adipisci eum blanditiis dolorum.

+

Get this thing

+
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+

Flexbox media object

+

In this example, the media object “collapses” to a single column below container width 640px, using sm:flex. And below that width, the title and button are centered using t-center, which is overridden by sm:t-left.

+

+ +

+
+
+
+
+ +
+
+
+
+
+
+ Form inputs etc. as grid items +
+ + + + +
+ +
+
+
+
+
+
+
+
+ +
+
+

Grid media object

+

This example will behave as a grid for all container widths, even down to phones in portrait orientation.

+ +
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+

A “two-up” feature block

+

In this exmple, the image is before the text content in the HTML. But for container width above 768px, the grid system places the image to the right (in the 2nd column). The text content is positioned vertical-center by flex flex-column flex-center

+

Discover more

+
+
+
+
+
diff --git a/_src/forms.md b/_src/forms.md index 735487a..9f16526 100644 --- a/_src/forms.md +++ b/_src/forms.md @@ -8,15 +8,16 @@ prevLink: "Colors" nextLink: "Buttons" --- -Baselayer form elements have simple background and focus styling (no default border). +Baselayer form elements have simple background and focus styling. **Notes:** 1. In Baselayer, form elements do not have set width. You can control widths them by one of two ways (same as for [buttons]({{ '/buttons/' | url }})): * By adding the `w-100%` utility class to the form element, or * By involving the form elements as immediate children of [flex layout]({{ '/layout/' | url }}#flex-layouts) or [grid layout]({{ '/layout/' | url }}#grid-layouts) wrappers. +2. Form inputs (exclusing buttons) and textareas have a 1px solid border colored by `:root { --b-form: var(--tc-base); }`, so that the border will be the same as the default text color (near black on light theme, bear white on dark theme). This border color makes forms stand out more obvious as an interactive element. 2. Form inputs, textareas, buttons, and the `btn` class, have `font-size: inherit`. This means their font sizes can be modified by any font-size class in Baselayer. -3. The font-family of form elements, buttons, and `btn` is controlled by `var(--base)` (default is sans-serif). +3. The font-family of form elements, buttons, and `btn` is controlled by `var(--ff-base)` (default is sans-serif). ## Textual form input fields @@ -128,6 +129,19 @@ On some devices (e.g. iOS Safari), these inputs get modified by number pickers (

+## List and datalist + + + + + + + + + + + + ## Text area (multiline)
@@ -201,4 +215,4 @@ Groups of form elements can be wrapped in `
` tags. Add a `` to ``` -See [buttons](/baselayer-3/buttons) for more information. \ No newline at end of file +See [buttons](/baselayer-3/buttons) for more information. diff --git a/_src/index.md b/_src/index.md index 6dee524..c900f84 100644 --- a/_src/index.md +++ b/_src/index.md @@ -1,6 +1,6 @@ --- -title: Baselayer 3 -mainHeading: Baselayer 3 is a powerful, modern, tiny CSS library +title: Getting started +mainHeading: Getting started with Baselayer layout: base.njk nextPage: "/typography/" nextLink: "Typography" @@ -8,19 +8,19 @@ nextLink: "Typography" ## Introduction -

Designed as a good place to start, Baselayer may be all you need — for small static websites and blogs. Or you may use it as a baselayer to quick-start your mega project.

+

Designed as a good place to start, Baselayer may be all you need for small projects such as static websites and blogs. Or you may use it as a baselayer to quick-start your mega project.

-Ready to use as-is, Baselayer 3’s {{ metadata.filesize }} (minified) stylesheet gives you all this: +Ready to use as-is, Baselayer’s {{ metadata.filesize }} (minified) stylesheet gives you all this: * A modern CSS reset -* Foundational accessibility features -* A lightweight system of utility classes for controlling dimensions, positioning, spacing, borders, text, images, and colors -* Container-responsive typography and spacing -* **Since v.3.2.0:** Container query responsive layouts using grid and flexbox -* Styled form elements and buttons -* **Since v.3.3.0:** A `color-mix()` based shade scale system of utilities for text, borders, and backgrounds -* Built-in dark mode -* Control of many of these things using CSS variables (a.k.a. custom properties) +* Minimalist styled classless typographic, and form elements +* Foundational accessibility features: outline based focus fings and a `visually-hidden` class +* A lightweight system of utility classes for controlling dimensions, positioning, flexbox, spacing, borders, text, images, and colors +* Container query responsive layouts using CSS grid +* Responsive typography and spacing (margins, paddings, gaps) clases controlled by `clamp()` +* A `color-mix(in OKLCH)` based shade scale system for utilities for text, borders, and backgrounds +* Built-in dark mode using `light-dark()` +* Control of many of these things using CSS `var()` (custom properties) * And more ## Using several modern CSS technologies @@ -31,19 +31,20 @@ Such as: * [Grid](https://caniuse.com/css-grid) * [Math functions (e.g. clamp)](https://caniuse.com/?search=css%20math%20functions) * [Custom properties (variables)](https://caniuse.com/css-variables) -* [Cascade layers](https://caniuse.com/css-cascade-layers) * [color-mix() function](https://caniuse.com/?search=color-mix()) +* [light-dark() function](https://caniuse.com/mdn-css_types_color_light-dark) +* [CSS class nesting](https://caniuse.com/css-nesting) +* [Cascade layers](https://caniuse.com/css-cascade-layers) -Therefore Baselayer supports only up-to-date (mid-2023 forward) “evergreen” web browsers (Safari, Firefox, Chrome, Edge, etc.). - -## Baselayer’s design philosophy +Baselayer supports only up-to-date (2023 forward) [baseline compatibility](https://developer.mozilla.org/en-US/docs/Glossary/Baseline/Compatibility) web browsers (Safari, Firefox, Chrome, Edge, etc.). + +## Baselayer’s design philosophy The design philosophy behind the Baselayer CSS project is as follows: * Aim at being a good place to start — a _baselayer_ for a web design project. -* Being so small ({{ metadata.filesize }}), there’s less you need to overwrite in order to style it your own way (and most things in Baselayer can be restyles by CSS variables ). So, there’s no need for a purge process to remove a heavy payload of unused Baselayer styles. +* Being so small ({{ metadata.filesize }}), there’s less you need to overwrite in order to style it your own way (and most things in Baselayer can be restyles by CSS variables). So, there’s no need for a purge process to remove a heavy payload of unused Baselayer styles. * PostCSS only — no need for Sass, Less, Stylus etc. -* Plus, if you include the whole of `baselayer.min.css` along with your styles in a content management system (CMS), then you will still have it all available when you need to style simple components in the content editor. ## Built using PostCSS @@ -54,23 +55,31 @@ Baselayer is built using [PostCSS](https://postcss.org) and some plugins. The pl **Note:** neither [postcss-preset-env](https://preset-env.cssdb.org) nor [autoprefixer](https://github.com/postcss/autoprefixer) have been used in Baselayer. And preprocessors such as Sass are not required. -## Modern CSS reset +## A modern CSS reset The Baselayer reset is a “best of both” combination of [Josh W Comeau’s custom CSS reset](https://www.joshwcomeau.com/css/custom-css-reset/) and [Andy Bell’s (more) modern CSS reset”](https://andy-bell.co.uk/a-more-modern-css-reset/). From that basis, Baselayer then takes care of the basics by setting some minimalist, easy-to-read typography, and styles for buttons and forms. -## Basic accessibility features +## Baselayer’s built-in accessibility features Baselayer has two “must have” accessibility features built-in. -### (1.) Focus rings +### (1.) Focus states + +After experimenting and testing various focus state styles, I have decided to base Baselayer’s on the ones in the design systems of the UK National Health Service [NHS.uk design system](https://design-system.service.gov.uk/get-started/focus-states/) and the UK Government [GOV.UK design system](https://design-system.service.gov.uk/get-started/focus-states/). -**(a.) Form focus ring:** +1. Links receive an amber background, black text and a thick black underline on `:focus-visible` — so that the element is clearly visible in a wide range of contexts. -For form inputs and buttons on `:focus`, there’s a 4px light blue ring (see [colors](/colors)). Example: +2. Interacive elements such as form inputs, form buttons*, collapsible details, and elements with overflowing content[^1] have what looks like a yellow and black “double border” that appears on `:focus` (actually its created by an outline and a box shadow). -
+***Note:** A `

Link

-

+

-
+

Link

-

+

+
+
+

Link

+

@@ -124,4 +127,4 @@ The `visually-hidden` is used to provide additional content for screen-readers,
...
-``` \ No newline at end of file +``` diff --git a/_src/layout.md b/_src/layout.md index d2e38fb..c23bbf0 100644 --- a/_src/layout.md +++ b/_src/layout.md @@ -8,10 +8,20 @@ prevLink: "Typography" nextLink: "Decoration" --- -
- Since September 2023, all “evergreen” browsers (Chrome, Edge, Firefox, Safari) have capability for the new CSS Container Queries (see Can I use Container Queries). Baselayer 3.2.x has container query powered layouts to control flex, grid, and hidden utility classes. +
+ Since September 2023, all “evergreen” browsers (Chrome, Edge, Firefox, Safari) have capability for the new CSS Container Queries (see Can I use Container Queries). So, Baselayer now has container query powered layouts to control flex, grid, and hidden utility classes.
+## Container query contexts + +Since Baselayer v.3.4.0, The `` tag now has container query context applied by `container-type: inline-size`. + +There is also a `container` class whose role is to add another container query context wherever you need it. + +There are no `@media` queries in Baseayer. Responsive [flexbox](#flex-layouts), [grid](#grid-layouts), and [invisibility](#invisibility-(hidden)-classes) classes are all set using `@container` queries. Since the `` tag now has container query context by default, these will all behave in much the same way as media-query controlled grid systems in other CSS libraries. + +Spacing variables `--s-2`, `--s-3`, and `--s-4`, involve a `clamp()` that has its middle value set using `cqi` (container query percentile unit). These spacing variables are used on margin, padding, gap, and border radius utilities (see [decoration utilities]({{ "/decoration/" | url }})). + ## Blocks * `block` — make an inline element behave as a block element @@ -21,11 +31,11 @@ nextLink: "Decoration" ## Dimensions -### Content wrappers +### Wrappers (f.k.a. containers) Baselayer’s `wrapper` classes add a constrained layout width, inline margin (x-axis) auto centering, and side edge whitespace when the viewport width is at or narrower then the wrapper width. -
Baselayer’s wrapper classes were previously known as container classes, copying the name from other CSS frameworks such as Bootstrap. But with Baselayer 3.2.x switching from @media queries to @container queries, a context-container was required for parent elements of container query controlled layout systems. Therefore, the container class is now specifically used for that purpose. See container query powered layouts. +
Baselayer’s wrapper classes were formerly known as container classes, copying the name from other CSS frameworks such as Bootstrap. But after switching from @media queries to @container queries, a context-container was required for parent elements of container query controlled layout systems. Therefore, the Baselayer container class is now exclusively used for that purpose. See container query powered layouts.
The centered layout `wrapper` is set up as follows: @@ -35,31 +45,23 @@ In `variables.css`: ```css :root { --w-xl: 1600px; - - --sp-2: clamp(1rem, 0.5rem + 1.25vw, 1.5rem); -} - -/* -Container query context -*/ -.container { - --sp-2: clamp(1rem, 0.5rem + 1.25cqi, 1.5rem); + --s-3: clamp(1rem, 0.5rem + 1.25cqi, 1.5rem); } ``` -For viewport widths below `--w-max` side spacing is provided by `--sp-2`. This adds a negative space (whitespace) right and left of the wrapper, to prevent text being difficult to read when up against the sides of the viewport. `--sp-2` involes viewport widths (vw), or container query widths (cqi) if the `wrapper` is places _inside_ a `container`. +Wrapper side spacing is provided by `--s-2` when the viewport width is less than `--w-max`. This adds 0.5rem (8px) negative space (whitespace) right and left of the wrapper, to prevent text being difficult to read when up against the sides of the viewport. In `layout.css`: ```css .wrapper { --w-max: var(--w-xl); - width: min(100% - (var(--sp-2) * 2), var(--w-max)); + width: min(100% - (var(--s-3) * 2), var(--w-max)); margin-inline: auto; } ``` -There are several `wrapper` width modifiers, same as the width modifiers — see below. +There are several `wrapper` utilities, with maximum widths same as the width utilities (see below). ### Widths @@ -67,39 +69,34 @@ There are several `wrapper` width modifiers, same as the width modifiers — see The difference between width utilities and wrapper utilities is that wrappers have x-axis side padding and x-axis centering (see above). -* `wrapper-xs` / `w-xs` — max width 320px -* `wrapper-sm` / `w-sm` — max width 640px -* `wrapper-md` / `w-md` — max width 960px -* `wrapper-lg` / `w-lg` — max width 1280px -* `wrapper-xl` / `w-xl` — max width 1600px -* `wrapper` — max width 1600px - -Both the `-xs`, `-sm`, `-md`, `-lg`, `-xl` wrapper and width utilities have their widths set using: - -```css -width: min(100%, {variable}); -``` +* `wrapper-xs` / `w-max-xs` — maximum width 320px +* `wrapper-sm` / `w-max-sm` — maximum width 640px +* `wrapper-content` / `w-max-content` — maximum width 40rem +* `wrapper-md` / `w-max-md` — maximum width 960px +* `wrapper-lg` / `w-max-lg` — maximum width 1280px +* `wrapper-xl` / `w-max-xl` — maximum width 1600px +* `wrapper` — maximum width 1600px -This means they will responsively expand to width 100% within the space available, until they max out at their set width variable. +The `-content` width constraints max out at 40rem, giving a comfortable ~67 characters per line for paragraphs. -Three more: - -* `w-100%` — width 100% -* `w-100vw` — width 100vw -* `w-max-100vw` — max-width 100vw +Four more: +* `w-100%` — width expands to 100% of available space +* `w-100vw` — width expands to 100vw (viewport width) +* `w-max-100vw` — width constrained to 100vw (viewport width) +* `w-fit-content` — width constrained to content max-width (for “shrink wrapping”) ### Heights -* `h-100%` — height 100%, e.g. for making cards equal to the height of their wrapper -* `h-100dvh` — height 100dvh, e.g. for making “full cover” panels -* `h-max-100dvh` — max-height 100dvh, e.g. for tall sidebars (use `h-max-100dvh` with `overflow-y`) +* `h-100%` — height expands to 100%, e.g. for making cards equal to the height of their wrapper +* `h-100dvh` — height expands to 100dvh, e.g. for making “full cover” panels +* `h-max-100dvh` — height constrained to 100dvh, e.g. for tall sidebars (use `h-max-100dvh` with `overflow-y`) -Baselayer uses `100dvh` (dynamic viewport height) that gives a different viewport height for some devices — i.e. it compensates for the scroll-retracting interface toolbars on iOS Safari. +Baselayer uses `100dvh` (dynamic viewport height) that gives a different viewport height for some devices — i.e. it compensates for the retracting interface toolbars on iOS Safari. ### Box -* `box` — expands an inner element using `inset: 0` to fill the size of its wrapper (you must put `relative` on a `box` wrapper). Useful for setting up a panel (e.g. hero or card) background image with text overlay. +* `box` — expands an inner element using `inset: 0` to fill the size of its wrapper (you must put `relative` on the parent element of a `box`). Useful for setting up a panel (e.g. hero or card) background image with text overlay. ## Positions @@ -114,11 +111,11 @@ Baselayer uses `100dvh` (dynamic viewport height) that gives a different viewpor * `z-2` — z-index: 2 * `z-3` — z-index: 3 -For centering and middling, you also need [flex](#flex-layouts). +For centering and middling, you will also need [flex](#flex-layouts). -Example: +Example: -
+
Top
Right
Bottom
@@ -136,15 +133,15 @@ Example:
Right
- +
Bottom
- +
Left
- +
Centered and middled
@@ -154,73 +151,95 @@ Example: ## Container query powered layouts -Since Baselyer 3.2.x, [flex](#flex-layouts), [grid](#grid-layouts), and [invisibility](#invisibility) (hidden) utilities have `@container` variants that only work if they are wrapped in a `container` class, that provides the _container query context_: - -```css -.container { - container-type: inline-size; -} -``` - -This `container` class does not constrain the outer element’s width in any way. You will need to control the widths of your content with e.g. [wrapper](#centered-layout-wrappers) or [width](#widths) utilities, or by placing the container within a grid cell, etc. - -There are three `@container` variants for `flex`, `grid`, and `hidden` classes corresponding to prefix widths: - -* `sm:` (640px) -* `md:` (960px) -* `lg:` (1280px) +Since Baselayer 3.4.0, the `` tag provides a _container query context_, using `container-type: inline-size`. Additionally you can set another (inner) container query context ising the `container` class. -
- Layout classes with sm:, md:, and lg: prefixes do not work unless they are inside a container. +
The container class does not constrain the outer element’s width in any way. You may also need to control the widths of your content with e.g. wrapper or width utilities, or by placing the container within a grid cell, etc.
-You can place the `container` class on e.g.: +There are four `@container` variants for `flex`, `grid`, and `hidden` classes corresponding to prefix widths: -* The `` tag (so that the container query will behave the same as a media query) -* Semantic layout sections, such as your page `
`, `
`, or `
` -* `
`’s of course -* Nested within other `container` elements (e.g. so you can have sidebars or arrays of cards within your `
`) -* And more. +* `xs:*` (512px) +* `sm:*` (768px) +* `md:*` (1024px) +* `lg:*` (1280px) -### Supporting older browsers +There are no `xxs` (256px), `xl` (1536px) or `xxl` (1672px) container queries in Baselayer. -What if you want to use Baselayer’s `flex`, `grid` and `hidden` clases but you really prefer media queries, or if you need to support pre-container query browsers? +Classes with container query variants are: -Then all you need to do is find every instance of `@container` in `layout.css` and replace it with `@media`, and this will convert everything to media queries. (And then the `container` class will be redundant — you won’t need it.) +1. `block` — block wrapper utilities +2. `flex` — flexbox wrapper utilities +3. `grid` — grid system wrapper utilities (using CSS Grid) +4. `col` and `row` — grid system column and row utilities +5. `hidden` — invisibility utilities -### Container query demos +([content-grid](#content-grid) is not controlled by a container query). -This entire documentation template is built using a full-width container query powered [grid](#grid-layouts) that takes effect when the _viewport_ is at or above Baselayer’s `md` container query breakpoint (default ≥ 960px). Above `md`, the top navigation bar becomes the sidebar in column 1, with everything else in column 2. +**Note:** There are small demos of container query layouts on this page below, demonstrating `flex`, `grid`, and `hidden` classes each set within their own `container` — and they have an _x-axis resizer_, so that you can test them out and see how they work. The resizer is indicated by a dashed border and a resizer symbol in the bottom right corner. Here is an example resizer without a container query demo inside: -The “everything else” area is organized in another grid within the same `container` context as the outer grid above, that becomes a two column grid when _that container’s_ width is at `lg` or above (≥ 1280px). Then the table of contents (TOC) block is placed in column 2 of this inner grid (that appear to be the third column in the overall page layout). +
+
Resizer symbol ↘
+
-So, the page layout deonstrates two `grid` layouts, one nested inside the other, and both are inside one outer `container` — they share the same container query context. +## Responsive blocks -The main content (everything else below the title) is organised within a [content-grid](#content-grid) (that is not powered by a container query). +* `xs:block` / `sm:block` / `md:block` / `lg:block` -Also, there There are small demos of container query layouts on this page below, demonstrating `flex`, `grid`, and `hidden classes` all set within their own `container`s. Some of those demos have an _x-axis resizer_, so that you can test them out and see how they work. The resizer is indicated by a dashed border and a resizer symbol in the bottom right corner. Example resizer without a container query demo inside: +These set `display: block` at and above the four container-responsive breakpoint widths. Use one of these utilities as an _override_ when you only need some element to behave as a `flex` or a `grid` within a smaller width. -
-
Resize symbol ↘
-
+Example: in the template for this documentation, at body-container width 1024px and up (same as viewport width), the Baselayer logo and title in the used `md:block` to switch off the `flex` that’s required to push these to the left of the menubar. This push is not required when the menubar is a sidebar from `md` up. -### Flex layouts +## Flex layouts Flexbox utilities for simple layout, menubars, pagination lists, cards, etc. * `inline-flex` — inline flexbox at all viewport widths * `flex` — flexbox at all viewport widths -#### Flex gaps +Example: + +
+
One
+
Two
+
Three
+
Four
+
+ +```html +
+
One
+
Two
+
Three
+
Four
+
+``` + +### Flex gaps `gap-*` — adds a _horizontal and vertical_ gap (same as for [grid layouts](#grid-layouts)): -* `gap-1` — `--sp-1` -* `gap-2` — `--sp-2` -* `gap-3` — `--sp-3` -* `gap-4` — `--sp-4` +* `gap-1` — `--s-1` +* `gap-2` — `--s-2` +* `gap-3` — `--s-3` +* `gap-4` — `--s-4` + +
+
One
+
Two
+
Three
+
Four
+
+ +```html +
+
One
+
Two
+
Three
+
Four
+
+``` -#### Flex modifiers +### Flex modifiers * X-axis: `flex-start` / `flex-center` / `flex-end` * Y-axis: `flex-top` / `flex-middle` / `flex-bottom` @@ -228,17 +247,65 @@ Flexbox utilities for simple layout, menubars, pagination lists, cards, etc. * `flex-column` — gives you flex-direction: column * `flex-space-between` — gives you justify-content: space-between * `flex-grow-equal` — makes grid item expand so that they occupy an equal fraction of the total width (or height, if used with `flex-column`) -* `flex-grow-auto` — makes grid item expand so that they occupy an unequal fraction of the total width (or height, if used with `flex-column`): each expanding as required by their respective content. +* `flex-grow-auto` — makes grid item expand so that they occupy an unequal fraction of the total width (or height, if used with `flex-column`). Each flex item will expand as required by its respective content. **Note:** the gaps have the same spacing CSS variables as [margins and paddings]({{ '/decoration/' | url }}#spacing-(margins-and-paddings)). -#### Flex-item grow +
+
One
+
Two
+
Three
+
Four
+
+ +```html +
+
One
+
Two
+
Three
+
Four
+
+``` + +
+
One
+
Two
+
Three
+
Four
+
+ +```html +
+
One
+
Two
+
Three
+
Four
+
+``` + +
+
One
+
Two
+
Three
+
Four
+
+ +```html +
+
One
+
Two
+
Three
+
Four
+
+``` + +### Flex-item grow * `grow` — gives you `flex-grow: 1` -
-
(no grow)
-
grow
+
+
(no grow)
+
grow
```html @@ -248,57 +315,59 @@ Flexbox utilities for simple layout, menubars, pagination lists, cards, etc.
``` -#### Flex and container queries +### Flex and container queries -If you wrap the following in a `container` class, they will take effect at the following container widths up: +Baselayer has three `@contaner` controlled `flex` classes that will take effect at the following container widths up — use one of these instead of simply `flex` on your outer block element: -* `sm:flex` — flexbox at container width 640px and up -* `md:flex` — flexbox at container width 960px and up -* `lg:flex` — flexbox at container width 1280px and up +* `sm:grid` — grid at container width 640px and up +* `md:grid` — grid at container width 960px and up +* `lg:grid` — grid at container width 1280px and up -Example using `sm:flex` (container query breakpoint width 640px): +Example using a `container` outer with `sm:flex` (`s:` supplies container query breakpoint width 640px): -
+
-
```html
-
``` In the example above, each button has a y-axis (block axis) margin, so that they still have whitepace gaps below the `sm:flex` breakpoint width. -### Grid layouts +## Grid layouts -#### Setting up a grid +### Setting up a grid Controlling tracks at _grid wrapper_ level: -* **Grid** — the `grid` class initializes the CSS grid. It only adds `display: grid` — it doesn’t provide information about how many columns you want, or what their widths will be. To control columns, use `equal-` classes on the grid wrapper, or control the position of grid items. +* **Grid** — the `grid` class initializes the CSS grid. It only adds `display: grid` — it doesn’t provide information about how many columns you want, or what their widths will be. To control the number of columns, you either: + * Use the explicit grid by adding `equal-` classes on the grid wrapper (see below); or + * Use the implicit grid by controlling the position of grid items. * **Gap (optional)** — adds vertical _and_ horizontal whitespace (a.k.a. gutters) along internal grid tracks. See [grid gaps](#grid-gaps). * **Equal width grid cell control (optional)** — `equal-*-cols` etc. specifies how many columns your layout has (2, 3, or 4), where each column width is equalized. -* **Dense packing (optional)** — `grid-dense` can be used as a quick way to _reorder_ grid items: packing so later items into earlier empty cells if there’s enough space for them. There is a [dense packing example](#grid-items-and-dense-packing) below, after where we have described per-item control. +* **Dense packing (optional)** — `grid-dense` can be used as a quick way to _reorder_ grid items: packing later items into earlier empty cells if there’s enough space for them. There is a [dense packing example](#grid-items-and-dense-packing) below, after where we have described per-item control. -Having 2, 3, or 4 _CSS grid_ columns covers most use cases for the traditional 12 column grid system in webpage design. The Baselayer 3 grid can do all that and so much more. +Having 2, 3, or 4 explicit _CSS grid_ columns covers most use cases for the traditional 12 column grid system in webpage design. The Baselayer 3 grid can do all that, and so much more. -
-
1
-
2
-
3
+
+
1
+
2
+
3
```html @@ -309,14 +378,14 @@ Having 2, 3, or 4 _CSS grid_ columns covers most use cases for the traditional 1
``` -If this is all you do to set up a grid, each _grid item_ will automatically span one _grid cell_. If you have more grid items than set columns, the excess will wrap onto new row(s). +If you do only this to set up a Baselayer grid, then each _grid item_ will automatically occupy the next available _grid cell_ and span one grid cell. If you have more grid items than set columns, the surplus will wrap onto new row(s). -
-
1
-
2
-
3
-
4
-
5
+
+
1
+
2
+
3
+
4
+
5
```html @@ -329,22 +398,22 @@ If this is all you do to set up a grid, each _grid item_ will automatically span
``` -#### Grid gaps +### Grid gaps * `gap-*` — adds a _horizontal and vertical_ gap between grid cells, using the same spacing variables as for margins and paddings: - * `gap-1` — `--sp-1` - * `gap-2` — `--sp-2` - * `gap-3` — `--sp-3` - * `gap-4` — `--sp-4` + * `gap-1` — using spaing variable `--s-1` + * `gap-2` — using spaing variable `--s-2` + * `gap-3` — using spaing variable `--s-3` + * `gap-4` — using spaing variable `--s-4` These same `gap-*` classes are used for [flex layouts](#flex-layouts). -
-
1
-
2
-
3
-
4
-
5
+
+
1
+
2
+
3
+
4
+
5
```html @@ -357,18 +426,28 @@ These same `gap-*` classes are used for [flex layouts](#flex-layouts).
``` -#### Controlling grid items +### Controlling grid items + +If you want your grid items to simply be placed in adjacent cells and to span one cell each — and you wanted your columns to be equal width — then there's nothing else you need to do. E.g. this is sufficient for setting up a gallery that has 3 columns: + +```html +
+
...
+
...
+
...
+
+``` Controlling positioning and spanning at _per-grid-item_ level: +* **Positioning (optional)** — `col-*` and `row-*` etc. – for positioning each grid item over non-adjacent grid cells. * **Spanning (optional)** — `col-span-*` and `row-span-*`etc. – spanning 2, 3, or 4 columns or rows. -* **Positioning (optional)** — `col-*` and `row-*` etc. – for positioning each grid item over the grid cells. -CSS grid positions grid items _automatically_ on the available grid cells — so an item will be placed on the _next_ available cell until required to begin again on the _next_ (i.e. new) row. You can use this automatic positioning to your advantage, allowing CSS grid to presume where you want your next item to be. As in the following simple example: +CSS grid positions grid items _automatically_ on the available grid cells — so an item will be placed on the _next_ available cell until required to begin again on the _next_ (i.e. new) row. You can use this automatic positioning to your advantage, allowing CSS grid to presume where you want your next item to be. As in the following simple example: -
-
1
-
columns 2 to 3
+
+
1
+
columns 2 to 3
```html @@ -380,13 +459,15 @@ CSS grid positions grid items _automatically_ on the available grid cells — so The `col-span-` and `row-span-` spanning classes can be used to make grid items to span up to 4 columns and/or 4 rows. -You can also control positioning by using the responsive `col-` and `row-` classes. In the following example, all we needed todo is specify that the third grid item should go on `row-2` and the CSS grid _automatically_ figured out that the fourth item should start in the next available grid cell — in column 3 of row 1: +The `col-` and `row-` positioning classes are used to instruct the grid which grid cell you want your grid item to be placed on (up to 4 columns and/or 4 rows). + +Pairing spanning with positioning gives yo even more control. In the following example, we specified that item 3 should go on `row-2` and the CSS grid automatically figured out that item 4 should start in the next available grid column (i.e. column 3): -
-
1
-
2
-
columns 1 to 2, row 2
-
columns 3 to 4, rows 1 to 2
+
+
1
+
2
+
3
+
4
```html @@ -398,18 +479,16 @@ You can also control positioning by using the responsive `col-` and `row-` class
``` -The responsive `col-` and `row-` positioning classes are used to instruct the grid which grid cell you want your grid item to be placed on (up to 4 columns and/or 4 rows). - -#### Grid items and dense packing +### Grid items and dense packing When you control the positioning of grid items, you cam sometimes leave leave spaces of unoccupied cells. This is because CSS grid automatially tries to place the next item in the next available cell — it does not automatically back-fill any empty cells that you have left: -
-
Item 1
-
Item 2
-
Item 3
-
Item 4
-
Item 5
+
+
Item 1
+
Item 2
+
Item 3
+
Item 4
+
Item 5
```html @@ -424,27 +503,42 @@ When you control the positioning of grid items, you cam sometimes leave leave sp With the `grid-dense` modifier you can back-fill some or all of these unoccupied cells, by CSS grid reordering (rearranging) your grid items to fill in the spaces. Here’s the example above again, but with `grid grid-dense`: -
-
Item 1
-
Item 2
-
Item 3
-
Item 4
-
Item 5
+
+
Item 1
+
Item 2
+
Item 3
+
Item 4
+
Item 5
+```html +
+
Item 1
+
Item 2
+
Item 3
+
Item 4
+
Item 5
+
+``` + +### Grid and container queries + +The Baselayer grid system has five tiers of container query breakpoint widths, for creating different grid layouts for different sized containers: all widths, `sm:`, `md:`, and `lg:`. -#### Grid and container queries +* Tier 0: grid layout effective at all container widths (including below 640px) +* Tier 1: `sm:` grid layout effective at container widths 640px and up +* Tier 2: `md:` grid layout effective at container widths 960px and up +* Tier 3: `lg:` grid layout effective at container widths 1280px and up -The Baselayer grid system has four tiers of container query breakpoint widths, for creating different grid layouts for different sized containers: all widths, `sm:`, `md:`, and `lg:`. +These three breakpoint prefixes can be added to grid wrapper: -* Tier 1: grid layout effective at all container widths (including below 640px) -* Tier 2: `sm:` grid layout effective at container widths 640px and up -* Tier 3: `md:` grid layout effective at container widths 960px and up -* Tier 4: `lg:` grid layout effective at container widths 1280px and up +* `sm:grid` — grid at container width 640px and up +* `md:grid` — grid at container width 960px and up +* `lg:grid` — grid at container width 1280px and up -These three breakpoint prefixes can be added to grid wrapper `equal-` classes (to specify that you want 2, 3, or 4 equalized columns at those container widths). And they can also be added to the per-item positioning and spanning classes. Meanwhile the `grid`, `grid-dense`, and `gap-*` classes cannot be controlled by breatkpoints — because they don’t need to be. +**Note:** Below these breakpoints `grid-dense` and `gap-*` will not work, because they are dependant on CSS grid. -**Note:** the `grid` class is effective at all widths, therefore the `gap-*` class will still work all the way down. +These three breakpoint prefixes can also be added to grid wrapper modifier `equal-` classes (to specify that you want 2, 3, or 4 equalized columns at those container widths). And they can also be added to the per-item positioning and spanning classes. The _tier 1_ grid system has no container query prefixes (and doesn’t need to be surrounded by a `container`) — it takes effect at all widths. This makes the _tier 1_ `grid` ideal for creating small icon galleries, or for making small media objects that you don’t want to “stack collapse” in narrow columns or on phones (e.g. social messaging or comment cards). @@ -452,15 +546,15 @@ The three responsive (container query powered) grid layout prefixes can be _comb Simple example: With just adding a `container` around your grid, and then width prefixes on `equal-` classes, this is all you need for setting up equal width items such as in image galleries, or sets of cards: -
+
-
1
-
2
-
3
-
4
-
5
-
6
+
1
+
2
+
3
+
4
+
5
+
6
@@ -480,7 +574,7 @@ Simple example: With just adding a `container` around your grid, and then width Another example: -
+
@@ -497,7 +591,7 @@ Another example: A few more examples can be found in [examples](/baselayer-3/examples/), where you can see how container query breakpoint width tiers can be used on grid items for positioning and spanning. -### Invisibility (hidden) classes +## Invisibility (hidden) classes There may be situation where you require some element(s) to be displayed on smaller or larger container widths, but hidden otherwise. Baselayer has: @@ -508,24 +602,25 @@ There may be situation where you require some element(s) to be displayed on smal * `lg:hidden` — hides elements in containers with width 1280px and up * `lg:hidden-below` — hides elements in containers with width below 1280px -
+
+
- + - + - + @@ -535,7 +630,7 @@ There may be situation where you require some element(s) to be displayed on smal @@ -545,17 +640,17 @@ There may be situation where you require some element(s) to be displayed on smal - + @@ -565,7 +660,7 @@ There may be situation where you require some element(s) to be displayed on smal @@ -575,7 +670,7 @@ There may be situation where you require some element(s) to be displayed on smal @@ -585,43 +680,40 @@ There may be situation where you require some element(s) to be displayed on smal
Invisilility: ✓ = displayed; ✗ = hiddenInvisibility: ✓ = displayed; ✗ = hidden
Class Example ≤639px 640px–959px960px–1280px960px–1279px ≥1280px
sm:hidden-below -
Example
+
Example
 ✗ ✓
md:hidden-below -
Example
+
Example
 ✗ ✗
lg:hidden-below -
Example
+
Example
 ✗ ✗ ✗ ✓
sm:hidden -
Example
+
Example
 ✓ ✗
md:hidden -
Example
+
Example
 ✓ ✓
lg:hidden -
Example
+
Example
 ✓ ✓
+
## Content-grid -**Note:** `content-grid` is not a [container query powered layout](#container-query-powered-layouts). - -`content-grid` is intended for long-read (a.k.a. long-form) prose such as blog losts, news articles, and academic papers. +`content-grid` is intended for long-read (a.k.a. long-form) prose such as blog losts, news articles, and academic papers. Using a 7 column CSS Grid layout, the default behavior of `content-grid` will place your content in the middle (column 4), where it will have maximum width `--w-cg` = `768px`. It expects your content typographic blocks (headings, paragraphs, lists, tables, etc.), and the panel blocks below, to be its _immediate children_. -`content-grid` uses CSS Grid to set up a 7 column layout. The default behavior of `content-grid` will place your content in the middle (column 4), where it will have maximum width `--w-cg` = `40em`. This max width will be 640px for the default font size (1rem = 16px) and 800px when used with `t-long-read` (see [the long-lead utility class](/baselayer-3/typography/#the-long-lead-utility-class)). - -`content-grid` expects your content typographic blocks (headings, paragraphs, lists, tables, etc.), and the panel blocks below, to be its _immediate children_. +
Note: content-grid is not a container query powered layout.
### Popout panels -Use the `popout` utility class on an immediate child of `content-grid` to make an element span the middle 3 columns (3 to 5) instead of just column 4. Columns 3 and 5 have width `--sp-2`. +Use the `popout` utility class on an immediate child of `content-grid` to make an element span the middle 3 columns (3 to 5) instead of just column 4. Columns 3 and 5 have width `--s-2`. Example information panel using `popout`: -
+
☆ Information panel
```html -
+
☆ Information panel
``` ### Expanded panels -Sometimes you need to expand a panel more than as is done in the popout above. You can do this using the `expand` class, that makes an immediate child of `container-grid` to span the middle 5 columns (2 to 6). +Sometimes you need to expand a panel more than as is done in the popout above. You can do this using the `expand` class, that makes an immediate child of `container-grid` to span the middle 5 columns (2 to 6). The expanded area has max-width equivalent to Baselayer `var(--w-md)` (1024px default). Example “poster” infographic panel using `expand` (and showing how Baselayer’s [aspect ratio](#aspect-ratios) utilities work): -
+
-
+

This is a lot of example text that may or may not distort the aspect ratio (16×9) of this expand component.

See what it does on a small viewport width (e.g. phone).

@@ -633,9 +725,9 @@ Example “poster” infographic panel using `expand` (and showing how Baselayer A z-index positioning layer (e.g. `z-1`) is required to make the text overlay the image layer. (Alternatively, you can add another `relative` context.) ```html -
+
... -
+

This is a lot of example text that may or may not distort the aspect ratio (16×9) of this expand component.

See what it does on a small viewport width (e.g. phone).

@@ -646,13 +738,13 @@ A z-index positioning layer (e.g. `z-1`) is required to make the text overlay th Use the `full-bleed` utility class to make an element span all 7 columns of a `content-grid`. -Columns 1 and 7 (the first and last column) have a minimum width of `--sp-2` — providing the middle columns with inline (x-axis) side whitespace. +Columns 1 and 7 (the first and last column) have a minimum width of `--s-2` — providing the middle columns with inline (x-axis) side whitespace. If your layout has no sidebars, side spacing (margin or padding), or other object that takes up some of the viewport width, then your `content-grid full-bleed` will expand to the full width of the viewport. But if it can’t get to the full viewport width, then it will expand to the available width (as seen in the docs example below). Example colored stripe using `full-bleed`: -
+
full-bleed — expands to the full width of the avilable space. If there are no sidebars, it will reach the sides of the viewport.
@@ -666,19 +758,19 @@ Example colored stripe using `full-bleed`: Common aspect ratio constraints for images, video, and hero blocks. -
+
-
aspect-ratio-1x1
+
aspect-ratio-1x1
-
aspect-ratio-4x3
+
aspect-ratio-4x3
-
aspect-ratio-16x9
+
aspect-ratio-16x9
-
aspect-ratio-21x9
+
aspect-ratio-21x9
@@ -688,4 +780,26 @@ Common aspect ratio constraints for images, video, and hero blocks. Using `auto` to add scrollling when the content of a block exceeds its constrained height or width. * `overflow-x` — e.g. for wrapping tables with a lots of columns, that would break a template layout in small viewports -* `overflow-y` — e.g. for sidebar menus loaded with content \ No newline at end of file +* `overflow-y` — e.g. for sidebar menus loaded with content + +### Overflow clip + +* `overflow-clip` — for hiding content that overflows your set dimensions on an element, and for preventing images to show in the corners of elements that have [rounded corners]({{ "/decoration/#rounded-corners" | url}}). + +## Floats + +
+
+
This is an example of
float-right
+
+

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corporis dolore quis iste fuga molestias necessitatibus. Autem quidem, consequuntur dicta illo rem nobis ratione vel? Cupiditate beatae similique nobis temporibus sequi rerum mollitia, saepe architecto ad, necessitatibus placeat repudiandae commodi laboriosam quos molestiae sed modi dignissimos nisi magni adipisci eligendi.

+
+ +
+
+
This is an example of
float-left
+
+

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corporis dolore quis iste fuga molestias necessitatibus. Autem quidem, consequuntur dicta illo rem nobis ratione vel? Cupiditate beatae similique nobis temporibus sequi rerum mollitia, saepe architecto ad, necessitatibus placeat repudiandae commodi laboriosam quos molestiae sed modi dignissimos nisi magni adipisci eligendi.

+
+ +There's also a `clearfix` class, if you need it. diff --git a/_src/templates/base-fw.njk b/_src/templates/base-fw.njk index 323c892..ad81427 100644 --- a/_src/templates/base-fw.njk +++ b/_src/templates/base-fw.njk @@ -10,6 +10,20 @@ + {% include "includes/switcher.js" %} + + {% include "includes/menu.js" %} - - - - + + - - -
-
- - {% include "includes/site-nav.njk" %} - -
-
-
-
-
-

{{ mainHeading }}

-
-
- -
+
+ + + + + + + + + + + {{ metadata.title }} + + Version: {{ metadata.version }} +
+ +

+ Download CSS ({{ metadata.filesize }}) + GitHub Repository + Changelog + MIT license +

+

Developer: {{ metadata.developer.name }} +

+
-
-
+ +
- \ No newline at end of file + diff --git a/_src/templates/includes/docs.css b/_src/templates/includes/docs.css new file mode 100644 index 0000000..56d067d --- /dev/null +++ b/_src/templates/includes/docs.css @@ -0,0 +1,94 @@ +html { + scroll-behavior: smooth; +} + +.resize-x { + margin-inline: -5px; + padding: 5px; + resize: horizontal; + overflow-x: auto; + background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='silver' stroke-width='2' stroke-dasharray='8%2c 8' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e"); +} + +button.toggler { + height: 3.625em; +} +.check-box { + width: 1rem; + height: 1rem; +} + +.font-base #baseSwitch .check-box::before { + content: "✓"; +} +.font-prose #proseSwitch .check-box::before { + content: "✓"; +} +.theme-auto #autoSwitch .check-box::before { + content: "✓"; +} +.theme-light #lightSwitch .check-box::before { + content: "✓"; +} +.theme-dark #darkSwitch .check-box::before { + content: "✓"; +} + +.font-prose #content-wrap { + font-family: var(--ff-prose); +} + +:target { + scroll-margin-top: var(--s-3); +} + +pre code { + max-height: 80vh; + overflow-y: auto; +} + +@container (min-width: 960px) { + #content-wrap { + width: calc(100vw - var(--w-xs)); + } + #site-nav { + position: sticky; + top: 0; + width: var(--w-xs); + height: 100dvh; + } + #site-title { + padding-top: var(--s-3); + flex-direction: column; + align-self: center; + } + #site-menu { + min-width: var(--w-xs); + } + .ms-windows #site-nav > div { + scrollbar-gutter: stable; + overflow-y: hidden; + } + .ms-windows #site-nav:hover > div { + overflow-y: auto; + } +} + +@container (min-width: 1280px) { + #toc-wrapper > p { + padding-top: var(--s-3); + } + .ms-windows #toc > div { + scrollbar-gutter: stable; + overflow-y: hidden; + } + .ms-windows #toc:hover > div { + overflow-y: auto; + } +} + +@container page (max-width: 1279px) { + #toc ul ul { + display: none; + } +} diff --git a/_src/templates/includes/menu.js b/_src/templates/includes/menu.js index 3a63e91..b549953 100644 --- a/_src/templates/includes/menu.js +++ b/_src/templates/includes/menu.js @@ -1,29 +1,29 @@ - /** - * Site Navigation Toggle (Phones) - */ +/** + * Site Navigation Toggle (Phones and tablet in portrait orientation) + */ window.addEventListener("DOMContentLoaded", () => { - let navButton = document.querySelector('#site-nav-toggle'); - let menu = document.querySelector('#site-nav-menu'); - let windowTest = function() { - if (window.matchMedia('(max-width: 959px)').matches) { - navButton.setAttribute('aria-expanded', 'false'); + let navButton = document.querySelector("#site-menu-toggle"); + let menu = document.querySelector("#js-menu-wrapper"); + let windowTest = function () { + if (window.matchMedia("(max-width: 959px)").matches) { + navButton.setAttribute("aria-expanded", "false"); menu.hidden = true; } else { - navButton.setAttribute('aria-expanded', 'true'); + navButton.setAttribute("aria-expanded", "true"); menu.hidden = false; } - } + }; windowTest(); - window.addEventListener('resize', function () { + window.addEventListener("resize", function () { windowTest(); }); - navButton.addEventListener('click', function() { - let expanded = this.getAttribute('aria-expanded') === 'true' || false; - this.setAttribute('aria-expanded', !expanded); + navButton.addEventListener("click", function () { + let expanded = this.getAttribute("aria-expanded") === "true" || false; + this.setAttribute("aria-expanded", !expanded); menu.hidden = !menu.hidden; }); }); diff --git a/_src/templates/includes/site-nav.njk b/_src/templates/includes/site-nav.njk index 5454eb9..84ae378 100644 --- a/_src/templates/includes/site-nav.njk +++ b/_src/templates/includes/site-nav.njk @@ -1,75 +1,99 @@ - \ No newline at end of file +
diff --git a/_src/templates/includes/switcher.js b/_src/templates/includes/switcher.js index 590a9d8..cc95768 100644 --- a/_src/templates/includes/switcher.js +++ b/_src/templates/includes/switcher.js @@ -1,86 +1,62 @@ -const matchMediaDark = window.matchMedia('(prefers-color-scheme: dark)'); -const htmlClassList = document.querySelector('html').classList; +// Using sessionStorage so that it is discarded as soon as a visitor leaves this site or closes the current window/tab. -function fontProse() { - sessionStorage.setItem('baselayerFont', 'prose'); - htmlClassList.remove('font-base'); - htmlClassList.add('font-prose'); -} +const htmlClassList = document.querySelector("html").classList; +const lightSwitch = document.querySelector("#lightSwitch"); +const darkSwitch = document.querySelector("#darkSwitch"); +const autoSwitch = document.querySelector("#autoSwitch"); function fontBase() { - sessionStorage.setItem('baselayerFont', 'base'); - htmlClassList.remove('font-prose'); - htmlClassList.add('font-base'); -} - -function fsLongRead() { - sessionStorage.setItem('baselayerFS', 'longread'); - htmlClassList.remove('font-normal'); - htmlClassList.add('font-longread'); + sessionStorage.setItem("baselayerFont", "base"); + htmlClassList.remove("font-prose"); + htmlClassList.add("font-base"); } -function fsNormal() { - sessionStorage.setItem('baselayerFS', 'normal'); - htmlClassList.remove('font-longread'); - htmlClassList.add('font-normal'); +function fontProse() { + sessionStorage.setItem("baselayerFont", "prose"); + htmlClassList.remove("font-base"); + htmlClassList.add("font-prose"); } -function themeDark() { - sessionStorage.setItem("baselayerTheme", "dark"); - htmlClassList.remove('theme-light'); - htmlClassList.add('theme-dark'); +function themeAuto() { + sessionStorage.setItem("baselayerTheme", "auto"); + htmlClassList.add("theme-auto"); + htmlClassList.remove("theme-light"); + htmlClassList.remove("theme-dark"); } function themeLight() { sessionStorage.setItem("baselayerTheme", "light"); - htmlClassList.remove('theme-dark'); - htmlClassList.add('theme-light'); + htmlClassList.remove("theme-auto"); + htmlClassList.add("theme-light"); + htmlClassList.remove("theme-dark"); } -// Toggles - -function toggleFont() { - if ( sessionStorage.baselayerFont === 'prose' ) { - fontBase(); - } else { - fontProse(); - } -}; - -function toggleFS() { - if ( sessionStorage.baselayerFS === 'normal' ) { - fsLongRead(); - } else { - fsNormal(); - } -}; - -function toggleTheme() { - if ( sessionStorage.baselayerTheme === 'dark' ) { - themeLight(); - } else { - themeDark(); - } -}; +function themeDark() { + sessionStorage.setItem("baselayerTheme", "dark"); + htmlClassList.remove("theme-auto"); + htmlClassList.remove("theme-light"); + htmlClassList.add("theme-dark"); +} -// init +// Init function baselayerInit() { - if (sessionStorage.baselayerTheme === 'dark' || (!('baselayerTheme' in sessionStorage) && matchMediaDark.matches)) { - themeDark(); - } else { - themeLight(); + switch (sessionStorage.baselayerTheme) { + case "light": + result: themeLight(); + break; + case "dark": + result: themeDark(); + break; + default: + result: themeAuto(); } - if ( sessionStorage.baselayerFont === 'prose' ) { + + if (sessionStorage.baselayerFont === "prose") { fontProse(); } else { fontBase(); } - if ( sessionStorage.baselayerFS === 'longread' ) { - fsLongRead(); - } else { - fsNormal(); - } -}; +} -baselayerInit(); \ No newline at end of file +baselayerInit(); diff --git a/_src/typography.md b/_src/typography.md index a1b5322..4ce713d 100644 --- a/_src/typography.md +++ b/_src/typography.md @@ -14,78 +14,31 @@ A few native font stacks are set in the `root-vars.css` file. ``` :root { - --t-sans: ui-sans-serif, system-ui, sans-serif; - --t-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; - --t-mono: ui-monospace, Menlo, Consolas, "Courier New", monospace; - - /* Alternative serif font stack (not used anywhere) */ - --t-old-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; - - --t-base: var(--t-sans); - --t-prose: var(--t-serif); + --ff-sans: ui-sans-serif, system-ui, Arial, sans-serif; + --ff-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; + --ff-mono: ui-monospace, Menlo, Consolas, "Courier New", monospace; + --ff-base: var(--t-sans); + --ff-prose: var(--t-serif); } ``` Everything here is an example, a place to start. Your own `--base` and `--prose` don’t need to be both sans-serif and serif. See [setting font stacks](#setting-font-stacks) for more information. -The Baselayer docs make use of JavaScript and some extra CSS to enable a demo toggle, so that you can switch between `--base` and `--prose` in this main content area. - -

- -

+The Baselayer docs make use of JavaScript and some extra CSS to enable a demo toggle, so that you can switch between `--base` and `--prose` in this main content area — see main menu. Font stack usage in Baselayer: -* The base font stack is set in the `` tag (in `base.css`) and via the `t-base` utility class. -* The prose is only available via the `t-prose` utility class +* The base font stack `--ff-base` is set in the `` tag and via the `t-base` utility class. It is also set on form inputs and on heading tags (using `--h-lh` so that you can override all six headings at once). +* The prose is only available via the `t-prose` utility class. * The monotype is available via the ``, ``, and `` HTML tags, and in the `t-mono` utility class. ### Setting font stacks In choosing your own font stacks, you will probably need two fonts that have similar _x-height_, so that you can set them using the same font size and line-height. Some other factors to compare are hights for lowercase ascenders and descenders, letter width, and stroke thickness. -If you prefer Baselayer’s ealier “Old Serif” font stack, this is still available in the variable `--t-old-serif`. You can easily revert to it by putting something like this in your own stylesheet: - -```css -.t-prose { - font-family: var(--t-old-serif); -} -``` - If you want to stick with using native font stacks, the [Modern Font Stacks](https://modernfontstacks.com) website has several examples that you can easily copy. -In choosing your own typefaces from elsewhere, a good place to start is by pairing serif and sans-serif (or slab serif) fonts of the same typeface, if both are available. For example, [Google Fonts](https://fonts.google.com) has several typefaces to choose from, such as: - -* Alegreya and Alegreya Sans -* IBM Plex and IBM Plex Sans -* Inria Serif and Inria Sans -* Noto Serif and Noto Sans -* PT Serif and PT Sans -* Roboto and Roboto Slab -* Source Sans 3 and Source Serif 4 - -Google provides examples of how to use their fonts in your CSS, where the fallback for each is only e.g. `sans-serif` or `serif`. But it may be better to use Baselayer’s native font stack variables instead. For example: - -```css -@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital@0;1&display=swap'); - -body { - /* Example from Google Fonts */ - font-family: 'IBM Plex Serif', serif; - - /* You can use this instead */ - font-family: 'IBM Plex Serif', var(--t-serif); -} -``` +In choosing your own typefaces from elsewhere, a good place to start is by pairing serif and sans-serif (or slab serif) fonts of the same typeface, if both are available. [Google Fonts](https://fonts.google.com) has several such typefaces to choose from. In Baselayer, sizes and weights for the base and prose typefaces can optionally be set independently — but you will still want them to share the same line height. For using another set of sizes and weights for prose, you will need to do some un-commenting in two files: `variables.css` and `typography.css`. @@ -103,17 +56,36 @@ For inspiration: * [Pair & Compare](https://www.pairandcompare.net) * [Top 50 Google Font Pairings [Handpicked by Pro Designers] (Pagecloud)](https://www.pagecloud.com/blog/best-google-fonts-pairings) -## Typographic block elements +## Base font size -Most typographic blocks have zero top margin, and bottom margin set to the _line height in rems_ using these two variables: +The default font size in Baselayer is 100% for small viewports, and bumped up to 112.5% from width 640px up (equivalent to Baselayer width variable `sm`). ```css +/* in variables.css */ :root { - --lh: 1.5; /* Base lineheight (no unit) */ - --mlh: calc(var(--lh) * 1rem); /* margin line height in rems */ + --fs-base: 100%; + --fs-bump: 112.5%; +} + +/* in base.css */ +body{ + container-type: inline-size; + font-family: var(--ff-base); + font-size: var(--fs-base); +} +@container (min-width: 640px) { + body > * { + font-size: var(--fs-bump); + } } ``` +(As this comfortable reading size hs now a default setting, the `t-long-read` class has been removed as no longer required.) + +## Typographic block elements + +Most typographic blocks have zero top margin, and bottom margin set to `var(--s-2)` (1rem). + ### Headings Example heading sizes (using utility classes, so that they don’t show up in the automatic table-of-contents generator): @@ -127,41 +99,36 @@ Example heading sizes (using utility classes, so that they don’t show up in th All headings `

` to `

` and matching utility classes `h1` to `h6` have: -* Headings font sizes set in the variables file. The typographic scale is 1.250 (major third), calculated using the [Type Scale](https://type-scale.com) webapp. -* Headings also have their font-family set using `--hf: inherit`. This has been done so that you can use the variable to override it. Your headings don’t need to be the same typeface as your paragraphs. -* Headings font weight is set using `--hfw: var(--bold)` — which you can also override. -* Headings line heights set using the formula 1em + 0.5rem. Meanwhile the bottom margin is the same as for paragraphs: the line-height of _defaut_ text (1.5) made into rems (1.5rem), set by the variable `--mlh`. (When the default text size is 16px, the line height and margin-bottom of typographic block elements is 24px.) -* Headings `

` to `

` and matching utility classes `h2` to `h6` also have top margins equal to their respective line heights (so H2 has a bigger top margin than H3, and so on) +* Headings font sizes set in the variables file. +* Headings also have their font-family set using `--h-ff: inherit`. This has been done so that you can use the variable to override it. So, your headings don’t need to be the same typeface as your paragraphs. +* Headings font weight is set using `--h-fw: var(--fwsemibold)` — which you can also override. +* Headings line heights set using the formula `1em + 0.5rem`. +* Headings have their bottom margin set the same as for paragraphs, `var(t--mb)`. The top margin for `

` thorugh `

` is double that — except then used as immediate child items of the [content-grid]({{ "/layout/#content-grid" | url }}) where the top margin is reduced to `var(t--mb)`. This is because _margin collapse_ is prevented by CSS grid. (And the top margin of `

` is totally removed when it’s the first immediate child of a `.content-grid`.) +* Matching utility classes `h2` to `h6` only affect font-size. These utilities do not include margin or font-weight styling. ```css :root { - /* Heading font sizes */ - --h1: 2.441em; - --h2: 1.953em; - --h3: 1.563em; + --h1: 2.25em; + --h2: 1.875em; + --h3: 1.5em; --h4: 1.25em; - --h5: 1em; - --h6: .8em; - - /* headings font */ - --hf: inherit; - - /* headings font-weight */ - --hfw: var(--bold); - - /* headings line-height */ - --hlh: calc(1em + 0.5rem); + --h5: 1.125em; + --h6: 1em; + --h-ff: inherit; /* headings font-family */ + --h-fw: var(--fw-semibold); + --h-lh: calc(1em + 0.5rem); + --h-mt: calc(var(--t-mb) * 2); } ``` Tips: 1. In some contexts (e.g. in card components) you may not want any built-in spacing for typographic block elements. Then, you can remove margins by using the `m-0` utility class. -2. You can also remove top margin “remotely” e.g. you can target the first item inside its wrapper using `.your-wrapper:first-child { margin-top: 0; }`, or the first sibling after the `
` or `

` e.g. as I have done in these docs: `.content-grid header + * { margin-top: 0; }`. This takes care of any pages that start their content with an `

` as the first element under the title (header) block. +2. You can also remove top margin “remotely” e.g. you can target the first item inside its wrapper using `.your-wrapper:first-child { margin-top: 0; }`, or the first sibling after the `
` or `

` e.g. as I have done in Baselayer: `.content-grid > h2:first-child { margin-top: 0; }`. ### Block quotes -Baselayer styles `
` tags with some inline (x-axis) padding, to give the effect of indentation. This inline padding is set using the responsive spacing variable `--sp-3` so that it increases if there is more available width. Whitespace `--sp-3` is either based on viewport width or container width, depending on context. +Baselayer styles `
` tags with some inline (x-axis) padding, to give the effect of indentation. This inline padding is set using the container-responsive spacing variable `--s-3` so that it increases if there is more available width. Otherwise, blockquotes have the same as paragraph styling. @@ -229,20 +196,119 @@ For definition lists, the title is bold and the data-item is indented with the s ## The link tag -The default underline for links has been moved downwards slightly to improve legibility. The link decoration (underscore) thickness has been set at 1px, so that it doesn’t become thicker when used on larger text (e.g. in headings) where link underscores can be too bulky). +The default underline for links has been moved downwards slightly to improve legibility. The link decoration (underline) thickness has been set at 1px, so that it doesn’t become thicker when used on larger text (e.g. in headings) where link underline can be too bulky). On `:hover`, the link text color becomes slightly darker and underline becomes thicker, increasing to 3px. All these styles are controlled by CSS variables so that you can change them. + +Then there are the following two classes that apply to links, that may be handy in some situations: + +* This link has no underline — `t-no-underline` +* This link has no underline unless hovered — `t-underline-hover-only` + +
The browser default, and the best practice for accessability, is to have links indicated by an underline (and the default color of links is blue). But in the context of menus it is permissible to deviate from the best practice, provided there are other visual and non-visual indicators. This is the reason why we should use semantic HTML tags on menus, and and why we should place navigation menus in their expected locations (in sitewide menubar ribbons, sidebars, and footers.
+ +## Menus + +* `nav` / `` / `` + +The semantic `

```html @@ -296,10 +363,46 @@ Baselayer tables are set using the `.table` class. + ...
Table content 2.2 Table content 3.2
``` +With `table table-grid`: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
This is a Table Caption
Table Header 1Table Header 2Table Header 3
Table content 1.1Table content 2.1Table content 3.1
Table content 1.2Table content 2.2Table content 3.2
Table content 1.3Table content 2.3Table content 3.3
Table content 1.4Table content 2.4Table content 3.4
+ ### Making wide tables responsive If you have a lot of content in your table, it will probably break your page layout on small viewports (e.g. phones). The simplest way to make a table “responsive” is to wrap your table in a DIV with the `overflow-x` class to make it horizontally scrollable. @@ -312,48 +415,19 @@ If you have a lot of content in your table, it will probably break your page lay
``` -## The long-lead utility class - -Intended for long-read essays, articles and blog posts, the `t-long-read` utility class (used on a wrapping element around your article content) will enlarge all text, including any headings, depending on how much width is available. - -The base font size is expanded to 125% over the middle range — for container widths 640px to 1280px (i.e. same as the `sm` to `md` default breakpoints). Starting from 1rem (16px), this expands the base sext size to 1.375rem (22px). This `clamp()` has been calculated using Petter Walbø Johnsgård’s [Font-size Clamp Generator](https://clamp.font-size.app/). - -The default behavior of `t-long-read` is to be responsive to viewport width using the viewport width unit, `vw`. But the same `t-long-read` utility class _if used inside a `container`_ (see [container query powered layouts](/baselayer-3/layout/#container-query-powered-layouts)) will ramp up using the container query inline width unit, `cqi`. +## Making text bigger -These two CSS clamp variables are set in `variables.css`: +The base font size is 100% (usually 16px), bumping up to 112.5% (usually 18px) for more comfortable reading on tablet devices up. -```css -/* -Default long-read -*/ -:root { - --fs-long-read: clamp(1rem, 0.625rem + 0.9375vw, 1.375rem); -} - -/* -Container query powered long-read -*/ -.container { - --fs-long-read: clamp(1rem, 0.625rem + 0.9375cqi, 1.375rem); -} -``` +Additionally: -The Baselayer docs make use of JavaScript and some extra CSS to enable a demo toggle, so that you can switch between normal and long-read font size in this main article column. +1. There’s a `t-lg` class that can be used to make text 1.325em — good for a lead paragraph or important messaging. +2. Classes `.h1` through `.h6` will resize text the same amount as for heading tag sizes — use when you want to make text larger (or large text smaller) without adversly affecting the SEO heading hierarchy. +3. The `t-display` wrapping class uses a `clamp()` to raise text from starting size 1.25em up to 1.625rem depending on container size — e.g. used for responsively increasing text size in hero components. An `

` inside a `t-display` will have maximum font size 72px. -

- -

+The `t-display` text size clamp have been calculated using Petter Walbø Johnsgård’s [Font-size Clamp Generator](https://clamp.font-size.app/) and changed to a container query width controlled `cqi` unit instead of viewport-width controlled `vm`. -## Code blocks +## Code `` tags have monospaced text over a pale blue background (set by `--cbgcode`) with a little padding to improve readability. @@ -363,62 +437,13 @@ If the `` tag is wrapped in a `
` tag, then it becomes a block level e
 
 Besides those already introduced, Baselayer also has utility classes for:
 
-* `t-big` — increase font size by 1.25em. Use it directly on a `
` to enlarge the font (e.g. for a lead paragraph). Note: don’t use `t-big`  directly on a heading, because that will override the heading size. But you can use it on a wrapping element around a heading that you wish to enlarge (e.g. for a title or hero component).
-* `t-small` (or use the `` HTML tag) — decrease font-size to 0.8em
+* `t-lg` — increase font size by 1.5em. Use it directly on a `
` to enlarge the font (e.g. for a lead paragraph).
+* `t-sm` (or use the `` HTML tag) — decrease font-size to 0.8em
 * `t-highlight` (or use the `` HTML tag) — text highlighter
-* `t-right`, `t-center`, and `t-left` — text alignment
-* `t-lighter`, `t-normal`, `t-semibold`, `t-bold`, `t-heavy` — font weights
+* `t-thin`, `t-normal`, `t-semibold`, `t-bold`, `t-heavy` — font weights
 * `t-italic` — font style italic
 * `t-balance` — balances word-wrap, so that e.g. long headings don't have orphans
 * `t-uppercase` — text transform to capitals
-* `t-noline` — use to remove the underline (underscore) from links where having it may be inappropriate (e.g. in menus)
-* `hover:t-line` – make underline appear on hover (pair as `t-noline hover:t-line` on a link)
-  * Example `t-noline hover:t-line`: example
 * `t-nowrap` — prevents text wrapping (spaces behave as non-breaking spaces)
-* `unlist` — sets `list-style-type: none` on `
    `, `
      `, or `
    • `. You can use this when you want to use a list in a navigation menu. And you can combine it with `p-0` to remove the list inset padding.
 
 **Note:** links can also be styled as though they are buttons using the `btn` utility class. See [buttons]({{ '/buttons/' | url }}).
-
-## Simple menus
-
-If you wrap links in a `

-
-
-
-
-
-

Buttons

-
-
- - -
-
-

Baselayer form elements have simple background, hovers and focus styling (border is set to 1px solid transparent).

+
+
+
+
+
+

Buttons

+
+
+
+
+ +
+
+
+

Baselayer form elements have simple background, hovers and focus styling (border is set to 1px solid transparent).

- - + + Link “button” 
<button type="button" name="button">Button</button>
@@ -371,7 +376,8 @@ 
Full-width buttons

 
 
<button class="flex-space-between" type="button" name="button">
   Button
-  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><polyline points="208 96 128 176 48 96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="24"></polyline></svg>
+  <!-- Icon -->
+  <svg>...</svg>
 </button>
 

 
Down-caret SVG icon from Phosphor Icons, with color set by currentColor, and width and height 16px — same as font size (1rem).

@@ -380,14 +386,14 @@ 
Adding colors

 
Border, background, and text color utilities can be used.

 

   
-  
-  
+  
+  
 

 
<label for="example-input-text">Label</label>
 
-<input class="b-2 b-red" type="text" id="example-input-text" placeholder="Enter some text here">
+<input class="b-thick b-red" type="text" id="example-input-text" placeholder="Enter some text here">
 
-<input class="b-2 b-green" type="text" id="example-input-text" placeholder="Enter some text here">
+<input class="b-thick b-green" type="text" id="example-input-text" placeholder="Enter some text here">
 

 
When colorizing buttons, remember to set their hover: hover state shades too.

 

@@ -395,7 +401,7 @@ 
Adding colors

     
     
     
-    Link “button”
+    Link “button”
   

 

 
<!-- Default button -->
@@ -408,7 +414,8 @@ 
Adding colors

 <button class="t-black hover:t-black bg-amber bg-400 hover:bg-500" type="button" name="button">Button</button>
 
 <!-- Green outline (a.k.a. ghost) link “button” -->
-<a class="btn b-green hover:b-700 bg-transparent bg-600 t-green t-600 hover:t-white hover:bg-green hover:bg-700" href="#/">Link “button”</a>
+
+<a class="btn b-green bg-transparent t-green hover:t-white hover:bg-green" href="#/">Link “button”</a>
 

 
Buttons with icons

 
In Baselayer, buttons are pre-styled with display: inline-flex and centering and middling flexbox alignment. So, all you need to do is add an icon and it will all line up.

@@ -441,93 +448,83 @@ 
Pill buttons

 
The r-pill class on a square icon button will make it circular. (See decoration: rounded corners.)

 

   

-     
-     
+    
   

 

-
<button class="r-pill" type="button" name="button">Button</button>
+
<button class="rad rad-pill" type="button" name="button">Button</button>
 
-<button class="btn-icon r-pill" type="button" name="button">I</button>
+<button class="btn-icon rad rad-pill" type="button" name="button">I</button>
 

 
Button sizes

 
Buttons (and the btn utility) will resize according to the font-size of the block that they are inside.

-
You can also use the typographic size classes t-small and t-big to modify buttons directly.

+
You can also use the typographic size classes t-sm and t-lg to modify buttons directly.

 

-  
+  
   
-  
+  
 

 
<form class="flex flex-middle gap-1">
-  <button type="button" name="button" class="t-small">Button</button>
+  <button type="button" name="button" class="t-sm">Button</button>
   <button type="button" name="button">Button</button>
-  <button type="button" name="button" class="t-big">Button</button>
+  <button type="button" name="button" class="t-lg">Button</button>
 </form>
 

-
Button x-axis padding is 1em, so that it will also respond to the text size of the button.

-
Stretch buttons

-
You can increase the x-axis padding (using the responsive px-2 or px-3) to make a button more impressive:

-

-  
-  
-  
-

-
<button type="button" name="button">Button</button>
-
-<button class="px-2" type="button" name="button">Button</button>
+
Notes on buttons:

+
    
+
  1. Button x-axis padding is 1em, so that it will also respond to the text size of the button.
    2. 
+
  2. Buttons have the same min-height as form input fields, so that they can be used in combination.
    3. 
+

 
-<button class="px-3" type="button" name="button">Button</button>
-

+
+
+
+
-
- - -
-
+

+ Download CSS (22 KB) + GitHub Repository + Changelog + MIT license +

+

Developer: Simon Padbury + +

-
-
+ +
- \ No newline at end of file + diff --git a/docs/colors/index.html b/docs/colors/index.html index 820aef7..182970f 100644 --- a/docs/colors/index.html +++ b/docs/colors/index.html @@ -5,485 +5,487 @@ - Colors · Baselayer 3 CSS + Colors · Baselayer CSS - + - - - - + + - + -
-
+
- -
-
-
-
-
-

Colors

-
-
- - -
-
-
- Since March 2023, all “evergreen” browsers (Chrome, Edge, Firefox, Safari) have capability for the new color-mix() function (see Can I use). Baselayer 3.3.x uses this function to set up a range of shades for its built-in (example) colors. +
+
+
+
+
+

Colors

+
+
+
+
+ +
+
+
+
+ Since March 2023, all “evergreen” browsers (Chrome, Edge, Firefox, Safari) have capability for the new color-mix() function (see Can I use). Baselayer uses this function to set up a range of shades for its built-in (example) colors.
-

Example using background bg-* utility classes:

-
-
-
bg-blue
-
bg-100
-
bg-200
-
bg-300
-
bg-400
-
bg-500
-
bg-600
-
bg-700
-
bg-800
-
bg-900
+

Rationale for Baselayer’s color system

+

I wanted to develop a color system based on interpolating CSS variables for generating a series lightness levels for each color, so that the stylesheet doesn’t need to be loaded with lighness classes for every color — most of which you’d never use.

+

After experimenting with variables in lightness channels within color codes, I discovered the new (mid-2023) color-mix function. Using color-mix() has proved to be better suited to what I was trying to do. With it we can build a series of lightness levels by mixing in white (tints) or black (shades).

+

For repeatability in Baselayer CSS, starting color swatches need to have a mid-range lightness level, but they can be specified using any system. Currently, Baselayer default colors are set using Hex # codes. And the color-mix function now outputs colors in OKLCH using color-mix(in OKLCH ...) because I this gives perceptually uniform lightness levels.

+

The color utility CSS class names remain the same as before (explained below). Example using background bg-* utility classes:

+
+
+
blue
+
100
+
200
+
300
+
400
+
500
+
600
+
700
+
800
+
900
-
-
bg-green
-
bg-100
-
bg-200
-
bg-300
-
bg-400
-
bg-500
-
bg-600
-
bg-700
-
bg-800
-
bg-900
+
+
green
+
100
+
200
+
300
+
400
+
500
+
600
+
700
+
800
+
900
-
-
bg-amber
-
bg-100
-
bg-200
-
bg-300
-
bg-400
-
bg-500
-
bg-600
-
bg-700
-
bg-800
-
bg-900
+
+
amber
+
100
+
200
+
300
+
400
+
500
+
600
+
700
+
800
+
900
-
-
bg-red
-
bg-100
-
bg-200
-
bg-300
-
bg-400
-
bg-500
-
bg-600
-
bg-700
-
bg-800
-
bg-900
+
+
red
+
100
+
200
+
300
+
400
+
500
+
600
+
700
+
800
+
900
-
-
bg-gray
-
bg-100
-
bg-200
-
bg-300
-
bg-400
-
bg-500
-
bg-600
-
bg-700
-
bg-800
-
bg-900
+
+
gray
+
100
+
200
+
300
+
400
+
500
+
600
+
700
+
800
+
900
-

Rationale for Baselayer’s color system

-

I wanted to develop a color system that was based on CSS variables for generating a series of shades for each color, so that the stylesheet didn’t need to be overloaded with all the shade permutations for each color — most of which you would never use.

-

Previously, I experimented with setting shades based on lightness channels, first in the hsl (Baselayer 3.1.x) and later in the new oklch color systems (Baselayer 3.2.x). This was successful, but it involved the additional effort of converting colors to OKLCH and to separate out their color channels into different variables, for enabling them to work with the shade channel utilities.

-

In Baselayer 3.3, I have switched to setting shades based on mixing in white or black using the new color-mix() function (see MDN docs: color-mix()). The CSS classes remain the same as before, while the color format is now hex (#) based. This is easier to maintain, and stylesheet is smaller.

-

Color and shade utility classes

-

All colors and shades are declared in variables.css.

-

Color utility classes (declared in @layer color-setup) are prefixed acording to where the color will be applied:

-
    -
  • Border color: -
      -
    • b-*
      • -
    • hover:b-* — border color on hover
      • -
    -
    • -
  • Text color: -
      -
    • t-*
      • -
    • hover:t-* — text color on hover
      • -
    -
    • -
  • Background color: -
      -
    • bg-*
      • -
    • hover:bg-* — background color on hover
      • -
    -
    • -
-

I have named the colors according to their common names (blue, green, amber, red, gray), instead of opting to name them according to the common user interface (UI) “success”, “warning”, “danger” etc. — so that you can make color utilities or components with colors dedicated to those purposes, meanwhile allowing you to adjust these built-in named colors and also add your own.

-

All color utilities “start” at their *-500 level, or mid-tone (this is what you will get if you don’t add a shade modifier utility).

-

The shade modifier utilities (declared in @layer color-shade) are as follows:

-
    -
  • Border: -
      -
    • b-100 through b-900
      • -
    • hover:b-100 through hover:b-900
      • -
    -
    • -
  • Text: -
      -
    • t-100 through t-900
      • -
    • hover:t-100 through hover:t-900
      • -
    -
    • -
  • Background: -
      -
    • bg-100 through bg-900
      • -
    • hover:bg-100 through hover:bg-900
      • -
    -
    • -

Also available:

    -
  1. Dark theme, via the theme-dark wrapper — see .
    2. -
  2. b-dark-invert, t-dark-invert, and bg-dark-invert modifiers that invert the shade for dark mode, in those situations when you want light elements in light mode to become dark elements in dark mode (and vise versa) — see darker and inverted shade utilities.
    3. -
  3. Black, white, reversi, and transparent — see other Baselayer color utilities.
    4. +
  4. A built-in dark theme.
    5. +
  5. Black, white, and transparent — see other Baselayer color utilities.
+

Color and shade utility classes

+

All colors and lightness levels are declared in variables.css.

+

Color utility classes (declared in @layer color in colors.css) are prefixed acording to where the color will be applied — border b-* text t-* or background bg-*. I have named the colors according to their common names (blue, green, amber, red, gray). You can modify the root variables of these colors, and you can add your own colors.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Border ColorText ColorBackground Color
Default stateHover stateDefault stateHover stateDefault stateHover state
Base color classb-*hover:b-*t-*hover:t-*bg-*hover:bg-*
Lightness modifierb-100
...
b-900		hover:b-100
...
hover:b-900		t-100
...
t-900		hover:t-100
...
hover:t-900		bg-100
...
bg-900		hover:bg-100
...
hover:bg-900
+

Example border, text and background utilities:

-
-
b-green
-
t-green t-600 t-dark-invert
-
bg-green bg-200
+
+
b-green
+
t-green t-600 t-dark-invert
+
bg-green bg-200
-
<div class="b-3 b-green"></div>
+
See also inverting lightness levels for the dark theme

+
<div class="b-heavy b-green"></div>
 <div class="t-green t-600 t-dark-invert"></div>
 <div class="t-black bg-green bg-300"></div>
 

 
Example usage:

-

-  ⚠ Warning alert panel.
+

+  ☆ Note (information) panel.
 

-
<div aria-label="Note" class="popout mb-2 bl-3 b-amber b-300 p-2 t-black bg-amber bg-100">
-  &#9888; Warning alert panel.
+
<div aria-label="Note" class="popout mt-3 mb-4 bl-heavy b-blue b-400 b-dark-invert p-3 t-black t-dark-invert bg-blue bg-200 bg-dark-invert">
+  &star; Note (information) panel.
 </div>
 

-
The shades *-100 through *-900, if used alone, don’t provide color. But if you use them to supplement one of the other colors above, then that color class will provide the color, and the shade class will set its lightness level.

+
The lighness modifiers *-100 through *-900, if used alone, do not provide color. But if you use them to supplement one of the base colors above, then that color class will provide the color, and the modifier will set its lightness level.

 
Colors and accessibility

-

+

   In any color model, color combinations must be chosen with care so that there is sufficient contrast between text and background colors for purposes of assessibility.
 

-
In your text and background color combinations, be careful to ensure that the text is readable — there needs to be an adequate contrast. Generally, you will want to aim at WCAG level AA for accessibility compliance.

-
For WCAG level AA compliance, most user interface colors need to be darker than the middle shade (i.e. use *-600 up) if the text color is white, or lighter than the middle shade (i.e. use *-400 down) if the text color is black.

-
However, any colors near yellow, such as Baselayer amber, as well as orange and yellow-green (not included) are notoriously difficult for accessibility. You may do better using a lighter background amber and pairing it with black text.

-

+
In your text and background color combinations, be careful to ensure that the text is readable — there needs to be an adequate contrast. Most organizations should to aim for WCAG level AA for accessibility requirements.

+
For WCAG level AA conformance, most user interface colors need to be darker than the mid-level (i.e. use *-600 up) if the text color is white, or lighter than the mid-level (i.e. use *-400 down) if the text color is black.

+
However, any colors near yellow such as Baselayer amber, as well as orange and yellow-green (not included), are especially difficult for accessibility. You may do better using a lighter background amber and pairing it with black text (or vise versa).

+
   

     
     
-    
-    
+    
+    
   

 

 
When colorizing buttons, remember to set their hover: hover state shades too.

@@ -494,10 +496,10 @@ 
Colors and accessibility

 <button class="bg-blue bg-600 hover:bg-700" type="button" name="button">Button</button>
 
 <!-- Amber button -->
-<button class="t-black hover:t-black bg-amber bg-400 hover:bg-500" type="button" name="button">Button</button>
+<button class="t-black hover:t-black bg-amber bg-500 hover:bg-600" type="button" name="button">Button</button>
 
 <!-- Green outline (a.k.a. ghost) button -->
-<button class="b-1 b-green bg-transparent t-green t-600 hover:b-700 hover:t-white hover:bg-green hover:bg-700" type="button" name="button">Button</button>
+<button class="b-thin b-green bg-transparent t-green t-600 hover:b-700 hover:t-white hover:bg-green hover:bg-700" type="button" name="button">Button</button>
 

 
Background reading on colors and accessibility:

 
-
Adding more colors and shades

+
Adding more colors

 
You can, of course, add any colors you want, and in any format you want.

-
However, if you want to use Baselayer 3.3.x’s shade classes -100 thorugh -900 on your color(s), then you need to start from a mid-tone that works as a -500 shade. The color-mix() formulas mix in various levels of white to shades -100 through -400, and various levels of black to shades -600 through -900.

-
Also, you will need to put your color(s) in @layer color-setup {} so that it gets added before @layer color-shades {}.

-
You can add your own project colors in any format, but the Baselayer color-mix() formulas will output shade in SRGB format.

+
However, if you want to use Baselayer’s lightness modifier classes -100 thorugh -900 on your colors, then you need to start from a mid-lightness color so that the -100 and the -900 generated by the color-mix() formulas are distinguishable (not to chose to white or too close to black).

+
Also, you will need to put your color(s) in CSS layer @layer colors {} so that they take precence over the Baselayer lightness modifiers and other color utilities.

+
You can add your own project colors in any format, but the Baselayer color-mix() formulas will output shade in OKLCH format.

+
Examples:

+
:root {
+  --purple: #9400d3;
+  --teal: #0080A2;
+}
+
+@layer colors {
+  .bg-purple,
+  .hover\:bg-purple:hover {
+    --bgc: var(--purple);
+    background: var(--bgc);
+  }
+  .bg-teal,
+  .hover\:bg-teal:hover {
+    --bgc: var(--teal);
+    background: var(--bgc);
+  }
+}
+

 
Dark theme

-
Baselayer 3 has a simple dark theme built in. The dark theme is as follows:

-
    
-
  1. HTML elements are generally flipped from light to dark, or dark to light:
+
    Baselayer has a simple dark theme built in. Since v.3.4.0, the user’s operating system preference for light or dark mode is automatically detected on the HTML tag:
    
+
    html {
+  color-scheme: light dark;
+}
+
    
+
    For the dark theme, HTML elements are generally flipped from light to dark, or dark to light, as required:
    
 
      
 
    • Body background is near black
      • 
 
    • Text is near white
      • 
@@ -529,36 +553,60 @@ 
      Dark theme
      
 
    • Text links are a lighter blue
      • 
 
    • Default buttons are a lighter gray
      • 
 
    
-
    2. 
-
  2. Color utilities (blue, green, amber, red, gray) are slightly darkened, to make them easier on the eye.
    3. 
-
  3. On hover, the link text color and the default button background color both are made lighter (inverted behavior).
    4. 
-
  4. Color utilities can optionally be inverted by adding the *-dark-invert modifier classes.
    5. 
-

-
The theme-dark class

-
In baselayer.min.css the dark theme is set by the CSS class theme-dark that can be programatically added to the <html> tag by a JavaScript toggle.

-
If you don’t want to give your visitors the option to toggle, then you can manually refactor the CSS to make the dark theme simply respond to the prefers-color-scheme: dark instead.

-
@media (prefers-color-scheme: dark) {
+
All the theme color variables in Baselayer (since v.3.4.0) involve a light-dark() CSS function. For example:

+
:root {
   /*
-  Your dark theme styles
+  Body tag background color
   */
+  --bgc-body: light-dark(
+    white,
+    color-mix(in OKLCH, var(--gray), var(--l1000))
+  );
+
+  /*
+  Base text color (also set on the body tag)
+  */
+  --tc-base: light-dark(
+    color-mix(in OKLCH, var(--gray), var(--l900)),
+    color-mix(in OKLCH, var(--gray), var(--l100))
+  );
+}
+

+
Baselayer does not use @media (prefers-color-scheme: dark) {} anywhere.

+
The color shade utilities can optionally be inverted by adding the *-dark-invert modifier classes.

+
Light and dark theme classes

+
If you wish to give your visitors the option to switch between light and dark modes, you can include a JavaScript  that swaps between CSS classes theme-light and theme-dark on the HTML tag. Baselayer has these two tags built in, so that you can implement the style selection:

+
html {
+  color-scheme: light dark;
+  &.theme-light {
+    color-scheme: light;
+  }
+  &.theme-dark {
+    color-scheme: dark;
+  }
 }
 

-
Darker and inverted shade utilities

-
Each color shade variant has a darker shade for the dark theme. For example, in dark mode bg-100 is slightly darker than in light mode. This makes the shades easier on the eye in dark mode.

-
There are, however, circumstances in your design where you don’t want colors to be merely darkened but also inverted (light shades become dark shades, and dark shades become light shades).

-
This shade inverting has been built into the dark theme for (classless) <body> background, text, links, form inputs, table borders, and horizontal rules.

-
Baselayer 3 has an optinal inverted version of of its shade utilities (for text, border, and background), as well as having them shoghtly darkened. To make this happen, all you need to do is add another modifier class to those elements you wish to shade invert for dark mode.

+
Example implementation: the Baselayer documentation has demo JavaScript switches for light, dark, and auto modes. The auto mode removes theme-light and theme-dark from the <html> tag, so that you simply get the Baselayer default, that is the user’s operating system theme preference setting.

+
Inverting lightness levels for the dark theme

+
There will be many situations in your design where you want your utility color shades flipped for the dark theme, same way as the background color is flipped from white to near black, and son on. For handling this, Baselayer has three optional *-dark-invert modifier classes that flip the lightness modifier utility values.

+
/* Border lightness inverter */
+.b-dark-invert
+
+/* Text lightness inverter */
+.t-dark-invert
+
+/* Background lightness inverter */
+.bg-dark-invert
+

 
Example using bg-blue:

-
<!-- will slightly darken in dark mode -->
-<div class="bg-blue bg-100"></div>
+
<div class="bg-blue bg-100"></div>
 
-<!-- will slightly darken AND invert in dark mode -->
 <div class="bg-blue bg-100 bg-dark-invert"></div>
 

-
+

-
+
@@ -611,137 +659,51 @@ 
Darker and inverted s
 
 
 

 
 
Shade (lightness)Shade
 bg-blue
 bg-blue bg-dark-invert
 

-
The middle t-500, b-500, and bg-500 do not invert, of course. So, e.g. bg-500 bg-dark-invert does not exist in baselayer.css.

-
Baselayer 3.3.x’s color shades are darkened for the dark theme

-

-100200300400500600700800900100%90%80%70%60%50%40%30%20%10%0%Light theme shades(default)Dark themeshadesInverted darktheme shades(*-dark-invert)Shade suffix numbercolor-mix()shade value
-

-
-
In the default light theme, the blue link text becomes a darker blue, and the default gray button becomes a darker gray, on :hover states. But in the dark theme, this behaviour is inverted: links become a lighter blue and buttons become a lighter gray.

-
You can easily change this. Lighter and darker options for blue links and gray buttons are included in variables as follows:

-
.theme-dark {
-  /* text color for links (default) */
-  --tc-link: color-mix(in srgb, var(--blue) calc(var(--l400) * 2), white);
-  --tc-link-lighter: color-mix(in srgb, var(--blue) calc(var(--l300) * 2), white);
-  --tc-link-darker: color-mix(in srgb, var(--blue) calc(var(--l500) * 2), white);
-  --tc-link-hover: var(--tc-link-lighter);
-
-  /* background color for buttons (default) */
-  --bgc-btn: color-mix(in srgb, var(--gray) calc((100% - var(--l600)) * 2), black);
-  --bgc-btn-lighter: color-mix(in srgb, var(--gray) calc((100% - var(--l500)) * 2), white);
-  --bgc-btn-darker: color-mix(in srgb, var(--gray) calc((100% - var(--l700)) * 2), black);
-  --bgc-btn-hover: var(--bgc-btn-lighter);
-}
-

-
To make your styled links and buttons have an inverted behavior as above, you need to use *-dark-invert utilities.

+
(The middle t-500, b-500, and bg-500 do not invert.)

 
Dark theme HTML body background color

-
Baselayer 3’s dark theme <body> color has been made darker than the color shades set by the bg-900 utility, so that elements colored by those shades are still visible. For this purpose an shade variable of --l1000 has been added. (Therefore, you can  use bg-900 or bg-100 bg-dark-invert to color the background of a panel, without it “disappearing” into the body background color.)

-
.theme-dark {
-  --l1000: 87.5%;
-
-  --bgc-body: color-mix(in srgb, var(--gray) calc((100% - var(--l1000)) * 2), black); /* = #1e1e1e */
-}
-

-
As with all Baselayer’s variables, this dark theme <body> color is an example that you can change to suit the needs of your project.

-
Dark/light theme toggle

-
Baselayer’s dark/light theme switcher JavaScript uses sessionStorage in the user’s browser to remember their theme preference as they visit multiple pages in this documentation.

-
This script adds the CSS class theme-dark to the <html> tag of the webpage, so that it is implimented (almost) immediately, before the <body> is painted in the browser window.

-
The switcher script also adds theme-light to the <html> tag in light mode, but there are no theme-light classes in baselayer.min.css. The theme-light class is merely there for visual confirmation to the deleveloper viewing the browser inspector, and it is used for adjusting the dark/light theme state indicator symbol in the switcher button.

-
The theme switcher in the Baselayer docs is built into its switcher.js demo toggling system, that powers the buttons in the sidebar. If you want to use the same dark/light mode toggler, here it is isolated below (no JS framework required):

-
const matchMediaDark = window.matchMedia('(prefers-color-scheme: dark)');
-const htmlClassList = document.querySelector('html').classList;
-
-function themeDark() {
-  sessionStorage.setItem("baselayerTheme", "dark");
-  htmlClassList.remove('theme-light');
-  htmlClassList.add('theme-dark');
-}
-
-function themeLight() {
-  sessionStorage.setItem("baselayerTheme", "light");
-  htmlClassList.remove('theme-dark');
-  htmlClassList.add('theme-light');
+
For dark teme, Baselayer’s <body> background color has been set by color-mix(in OKLCH, var(--gray), var(--l1000). This darkest shade level --l1000 (near black) is only used on the <body> tag, and it has been set so that all Baselayer bg-900 shades will still be seen by many people.

+

+  

+  

+  

+  

+  

+

+
What if you don’t want a dark theme?

+
Then you can simply override or replace the HTML tag as follows:

+
html {
+  color-scheme: light;
 }
-
-function toggleTheme() {
-  if ( sessionStorage.baselayerTheme === 'dark' ) {
-    themeLight();
-  } else {
-    themeDark();
-  }
-};
-
-function baselayerInit() {
-  if (sessionStorage.baselayerTheme === 'dark' || (!('baselayerTheme' in sessionStorage) && matchMediaDark.matches)) {
-    themeDark();
-  } else {
-    themeLight();
-  }
-};
-
-baselayerInit();
 

-
You will also need a toggle button, like the one in the sidebar. The checkmarks are added in by CSS pseudo-selectors.

-

-  
-

-
Another, simpler example theme toggle button, using glyphs selected from &what;

-
-

-  
-

-
<style>
-  .theme-dark .theme-toggle span::before { content: '☀️ light '; }
-  .theme-light .theme-toggle span::before { content: '🌙 dark '; }
-</style>
-
-<button class="theme-toggle pl-1 t-reversi-alt bg-reversi" onclick="toggleTheme()">
-  <span>theme</span>
-</button>
-

-
The simple example above uses bg-reversi to put a “night time” black background behind the moon and a “day time” white background behind the sun, meanwhile t-reversi- flips the text color the opposite way. See black, white, reversi, and reversi-alt below.

+
(And you won’t need to use any *-dark-invert classes.)

 
Other Baselayer color utilities

-

-  The color utilities for black, white, reversi, reversi-alt, and transparent can’t be used on the same element with the colors and shades above (i.e. as either default or hover states). These other utilities are declared after the colors and shades, and so they will override them. 
+

+  The color utilities for black, white, and transparent can’t be used on the same element with the colors and shades above (i.e. as either default or hover states). These other utilities are declared after the colors and shades, and so they will override them.
 

-
Other color utilities included in Baselayer cover black, white, and transparent, as follows:

-
Black, white, reversi, and reversi-alt

-
There are utilities for border color, text color, and background color for each of the following (and hover: prefix states):

+
Other color utilities included in Baselayer cover black, white, and transparent.

+
Black and white

 
    
-
  • -black — named color black:
    • 
-
  • -white — named color white:
    • 
-
  • -reversi is black on a light theme, white on a dark theme:
    • 
-
  • -reversi-alt is white on a light theme, black on a dark theme:
    • 
+
  • *-black — named color black
    • 
+
  • *-white — named color white
    • 
 

-

-
Black

-
White

-
Reversi

-
Reversi-alt

+

+
t-white bg-black

+
t-black bg-white

+

+
Inverting black and white for the dark theme

+
New in Baselayer v.3.4.0: The *-dark-invert classes also work on the black and white utilities, enabling a reversi effect when the user prefers the dark theme.

+

+
t-white t-dark-invert bg-black bg-dark-invert

+
t-black t-dark-invert bg-white bg-dark-invert

 

-
<div class="t-white bg-black">Black</div>
+
<div class="t-white bg-black">...</div>
 
-<div class="t-black bg-white">White</div>
+<div class="t-black bg-white">...</div>
 
-<div class="t-reversi-alt bg-reversi">Reversi</div>
+<div class="t-white t-dark-invert bg-black bg-dark-invert">...</div>
 
-<div class="t-reversi bg-reversi-alt">Reversi-alt</div>
+<div class="t-black t-dark-invert bg-white bg-dark-invert">...</div>
 

-
You don’t need to use *-dark-invert on the reversi and reversi-alt utilities. And *-dark-invert doesn’t work on the black and white utilities.

 
Transparent background

 
E.g. for outline buttons.

 
    
@@ -753,54 +715,53 @@ 
    Transparent background
    
 

 
There are no hover states of bg-transparent.

 
-              

-
- - -
-
-
+ +
+
+ +
+
-
+ +
- \ No newline at end of file + diff --git a/docs/css/min/baselayer.min.css b/docs/css/min/baselayer.min.css index 39f8ed0..91e8c7c 100644 --- a/docs/css/min/baselayer.min.css +++ b/docs/css/min/baselayer.min.css @@ -1,4 +1,4 @@ /*! -Baselayer 3 CSS v.3.3.0 +Baselayer 3 CSS v.3.4.0 https://github.com/SimonPadbury/baselayer -*/@layer defaults, typography, forms-and-buttons, layout, decoration, color-setup, color-shade, color-other;:root{--bgc-body:#fff;--tc-base:#222;--tc-link:#4162e3;--tc-link-hover:#344fb6;--focus-ring:#9baff9;--bgc-btn:grey;--bgc-btn-hover:#707070;--bgc-code:#e0e0e0;--bc-fineline:#d9d9d9;--blue:#3b6cff;--green:#01b236;--amber:#f0b300;--red:#f80200;--gray:#767676;--tc-base:color-mix(in srgb,var(--gray) calc((100% - var(--l900))*2),#000);--tc-link:color-mix(in srgb,var(--blue) calc((100% - var(--l600))*2),#000);--tc-link-hover:color-mix(in srgb,var(--blue) calc((100% - var(--l800))*2),#000);--focus-ring:color-mix(in srgb,var(--blue) calc(var(--l300)*2),#fff);--tc-input:#000;--bgc-input:#f5f5f5;--tc-btn:#fff;--tc-btn-hover:#fff;--bgc-btn:color-mix(in srgb,var(--gray) calc((100% - var(--l500))*2),#fff);--bgc-btn-hover:color-mix(in srgb,var(--gray) calc((100% - var(--l600))*2),#000);--tc-code:#000;--bgc-code:color-mix(in srgb,var(--gray) calc(var(--l200)*2),#fff);--bgc-highlight:#ffcc0066;--bc-fineline:color-mix(in srgb,var(--gray) calc(var(--l200)*2),#fff)}*{--l100:5%;--l200:15%;--l300:25%;--l400:35%;--l500:45%;--l600:55%;--l700:65%;--l800:75%;--l900:85%;--l1000:95%}.theme-dark,.theme-dark *{--l100:22%;--l200:30%;--l300:38%;--l400:46%;--l500:54%;--l600:62%;--l700:70%;--l800:78%;--l900:86%;--l1000:94%}.theme-dark .b-dark-invert,.theme-dark .bg-dark-invert,.theme-dark .t-dark-invert{--l100:86%;--l200:78%;--l300:70%;--l400:62%;--l500:54%;--l600:46%;--l700:38%;--l800:30%;--l900:22%}.theme-dark{--bgc-body:color-mix(in srgb,var(--gray) calc((100% - var(--l1000))*2),#000);--tc-base:color-mix(in srgb,var(--gray) calc(var(--l100)*2),#fff);--tc-link:color-mix(in srgb,var(--blue) calc(var(--l400)*2),#fff);--tc-link-lighter:color-mix(in srgb,var(--blue) calc(var(--l300)*2),#fff);--tc-link-darker:color-mix(in srgb,var(--blue) calc(var(--l500)*2),#fff);--tc-link-hover:var(--tc-link-lighter);--focus-ring:color-mix(in srgb,var(--blue) calc((100% - var(--l600))*2),#000);--tc-input:#fff;--bgc-input:color-mix(in srgb,var(--gray) calc((100% - var(--l900))*2),#000);--bgc-btn:color-mix(in srgb,var(--gray) calc((100% - var(--l600))*2),#000);--bgc-btn-lighter:color-mix(in srgb,var(--gray) calc((100% - var(--l500))*2),#fff);--bgc-btn-darker:color-mix(in srgb,var(--gray) calc((100% - var(--l700))*2),#000);--bgc-btn-hover:var(--bgc-btn-lighter);--tc-code:#fff;--bgc-code:color-mix(in srgb,var(--gray) calc((100% - var(--l800))*2),#000);--bc-fineline:color-mix(in srgb,var(--gray) calc((100% - var(--l700))*2),#000)}:root{--t-sans:ui-sans-serif,system-ui,sans-serif;--t-serif:ui-serif,Georgia,Cambria,"Times New Roman",Times,serif;--t-mono:ui-monospace,Menlo,Consolas,"Courier New",monospace;--t-old-serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;--t-base:var(--t-sans);--t-prose:var(--t-serif);--fs-base:100%;--lh-base:1.5;--m-lh:calc(var(--lh-base)*1rem);--t-small:.8em;--t-big:1.25em;--fw-lighter:200;--fw-normal:400;--fw-semibold:500;--fw-bold:700;--fw-heavy:900;--w-xs:320px;--w-sm:640px;--w-md:960px;--w-lg:1280px;--w-xl:1600px;--w-cg:40em;--w-expand:8.5em;--sp-1:0.5rem;--sp-2:clamp(1rem,0.5rem + 1.25vw,1.5rem);--sp-3:clamp(2rem,1rem + 2.5vw,3rem);--sp-4:clamp(3rem,1.5rem + 3.75vw,4.5rem);--p-cell:var(--sp-1) calc(var(--sp-1)*2);--sp-list:0.75em;--h1:2.441em;--h2:1.953em;--h3:1.563em;--h4:1.25em;--h5:1em;--h6:.8em;--h-font:inherit;--h-fw:var(--fw-bold);--h-lh:calc(1em + 0.5rem);--fs-long-read:clamp(1rem,0.625rem + 0.9375vw,1.375rem);--d-off-link:.3rem;--d-thick-link:1px;--h-input:2.5em;--fw-btn:var(--fw-semibold);--b-1:1px solid var(--bc-fineline);--b-2:4px solid var(--bc-fineline);--b-3:8px solid var(--bc-fineline);--r-2:4px;--r-3:8px;--r-4:16px}.container{--sp-2:clamp(1rem,0.5rem + 1.25cqi,1.5rem);--sp-3:clamp(2rem,1rem + 2.5cqi,3rem);--sp-4:clamp(3rem,1.5rem + 3.75cqi,4.5rem);--fs-long-read:clamp(1rem,0.625rem + 0.9375cqi,1.375rem)}@layer defaults{html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;box-sizing:border-box}*,:after,:before{box-sizing:inherit}body{-webkit-font-smoothing:antialiased;font-size:var(--fs-base);line-height:var(--lh-base);margin:0;min-height:100dvh;text-rendering:optimizeLegibility}canvas,img,picture,video{display:block;max-width:100%}iframe{border:0}summary{cursor:pointer}:target{scroll-margin-block:5ex}body{background-color:var(--bgc-body);color:var(--tc-base);font-family:var(--t-base)}}@layer defaults{:focus-visible{box-shadow:0 0 0 2px #fff;outline:2px dotted #000;outline-offset:0}.visually-hidden:not(:focus):not(:active){clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}}@layer typography{blockquote,dl,fieldset,figcaption,figure,ol,p,pre,table,ul{text-wrap:pretty;margin-block:0 var(--m-lh)}caption{margin-block:var(--sp-1)}.h1,h1{font-size:var(--h1);font-weight:var(--h-fw);line-height:var(--h-lh);margin-block:0 var(--m-lh)}.h2,h2{font-size:var(--h2)}.h3,h3{font-size:var(--h3)}.h4,h4{font-size:var(--h4)}.h5,h5{font-size:var(--h5)}.h6,h6{font-size:var(--h6)}.h2,.h3,.h4,.h5,.h6,h2,h3,h4,h5,h6{text-wrap:balance;font-weight:var(--h-fw);line-height:var(--h-lh);margin-block:var(--h-lh) var(--m-lh)}.content-grid>.h2,.content-grid>.h3,.content-grid>.h4,.content-grid>.h5,.content-grid>.h6,.content-grid>h2,.content-grid>h3,.content-grid>h4,.content-grid>h5,.content-grid>h6{margin-block:calc(var(--h-lh) - var(--m-lh)) var(--m-lh)}a{color:var(--tc-link);cursor:pointer;text-decoration:underline;transition:all .15s ease}a,a *{text-decoration-skip-ink:auto;text-decoration-thickness:var(--d-thick-link);text-underline-offset:var(--d-off-link)}a:focus,a:hover{color:var(--tc-link-hover)}ol,ul{margin-block:0 var(--m-lh);padding-left:1.5em}li ol,li ul,li+li{margin-block:var(--sp-list) 0}dl{margin:0 0 var(--m-lh)}dt{font-weight:700}dd{margin:0 0 var(--sp-list);padding-left:1.5em}ol ol{list-style-type:lower-alpha}ol ol ol{list-style-type:lower-roman}.table{border-collapse:collapse;border-spacing:0;width:100%}.table td,.table th{border:var(--b-1);padding:var(--p-cell);text-align:left;vertical-align:top}.table th{font-weight:700}hr{border:0;border-top:var(--b-1);height:0;margin-block:3rem;width:100%}blockquote{margin-inline:0;padding-inline:var(--sp-3)}blockquote p:last-child{margin-bottom:0}code,kbd,samp{font-family:var(--t-mono);font-style:normal;font-weight:400}code{background:var(--bgc-code);color:var(--tc-code);display:inline-block;padding-inline:.25em}pre{font-style:normal;font-weight:400;white-space:pre}pre,pre code{overflow-x:auto}pre code{background:var(--bgc-code);display:block;padding:1em}sub,sup{font-size:85%;line-height:0}.unlist,.unlist li{list-style-type:none;margin:0;padding:0}.t-noline,nav a{text-decoration:none}.hover\:t-line:hover{text-decoration:underline;text-decoration-skip-ink:auto;text-decoration-thickness:var(--d-thick-link);text-underline-offset:var(--d-off-link)}.t-nowrap{white-space:nowrap}.t-big{font-size:var(--t-big)!important}.t-small,small{font-size:var(--t-small)!important}.t-lighter{font-weight:var(--fw-lighter)}.t-normal{font-weight:var(--fw-normal)}.t-semibold{font-weight:var(--fw-semibold)}.t-bold{font-weight:var(--fw-bold)}.t-heavy{font-weight:var(--fw-heavy)}.t-italic{font-style:italic}.t-right{text-align:right}.t-center{text-align:center}.t-left{text-align:left}.t-balance{text-wrap:balance}.t-uppercase{text-transform:uppercase}.t-highlight,mark{background:var(--bgc-highlight);color:currentColor}.t-long-read{font-size:var(--fs-long-read)}.t-base{font-family:var(--t-base)}.t-prose{font-family:var(--t-prose)}}@layer forms-and-buttons{fieldset{border:var(--b-1)}label,legend{font-family:var(--t-base)}::placeholder{color:var(--tc-input);opacity:.7}input,select,textarea{background:var(--bgc-input);border:0;border-radius:unset;color:var(--tc-input);font-family:var(--t-base);font-size:inherit;min-height:var(--h-input);outline:0 none;padding:var(--p-cell);text-align:start}input:focus,select:focus,textarea:focus{box-shadow:0 0 0 4px var(--focus-ring);outline:0;position:relative;z-index:1}[type=color],select:not([multiple]){height:var(--h-input)}[type=color]{padding:.25em;width:var(--h-input)}[type=checkbox],[type=radio]{display:inline;height:.85em;min-height:unset;width:1em}[type=search]{-webkit-appearance:textfield;appearance:textfield}::file-selector-button{background:var(--bgc-btn);border:0;color:#fff;font-size:1em}.theme-dark input{color-scheme:dark}:disabled:hover{cursor:not-allowed}textarea:not([rows]){min-height:6em}.btn,[type=button],[type=reset],[type=submit],button{align-items:center;-webkit-appearance:none;appearance:none;background:var(--bgc-btn);border:1px solid transparent;color:var(--tc-btn);display:inline-flex;font-family:var(--t-base);font-size:inherit;font-weight:var(--fw-btn);height:var(--h-input);justify-content:center;margin:0;padding:var(--sp-1) 1em;position:relative;text-decoration:none;transition:all .15s ease}.btn:hover,[type=button]:hover,[type=reset]:hover,[type=submit]:hover,button:hover{background:var(--bgc-btn-hover);color:var(--tc-btn-hover);cursor:pointer}[type=button]:focus-visible,[type=reset]:focus-visible,[type=submit]:focus-visible,button:focus-visible{box-shadow:0 0 0 4px var(--focus-ring);outline:0;z-index:1}.btn-icon{height:var(--h-input);line-height:inherit;padding:0;width:var(--h-input)}}@layer layout{.container{container-type:inline-size}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.sticky{position:sticky}.top{top:0}.right{right:0}.bottom{bottom:0}.left{left:0}.z-1{z-index:1}.z-2{z-index:2}.z-3{z-index:3}.float-right{float:right}.float-left{float:left}.clearfix:after{clear:both;content:"";display:table}.overflow-x{overflow-x:auto}.overflow-y{overflow-y:auto}.overflow-hidden{overflow:hidden}.block{display:block}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.flex{display:flex}.flex-wrap{flex-wrap:wrap}.flex-column{flex-direction:column}.flex-start{justify-content:flex-start}.flex-center{justify-content:center}.flex-end{justify-content:flex-end}.flex-top{align-items:flex-start}.flex-middle{align-items:center}.flex-bottom{align-items:flex-end}.flex-space-between{justify-content:space-between}.flex-grow-equal>*{flex:1}.flex-grow-auto>*{flex:auto}.grow{flex-grow:1}@container (max-width: 639px){.sm\:hidden-below{display:none!important}}@container (max-width: 959px){.md\:hidden-below{display:none!important}}@container (max-width: 1279px){.lg\:hidden-below{display:none!important}}.grid{display:grid}.grid-dense{grid-auto-flow:dense}[class*=equal-]{grid-template-columns:repeat(var(--cols),minmax(1rem,1fr))}[class*=col-1],[class*=col-2],[class*=col-3],[class*=col-4]{grid-column:var(--col)}[class*=row-1],[class*=row-2],[class*=row-3],[class*=row-4]{grid-row:var(--row)}[class*=col-span-]{--col:auto;grid-column:var(--col) /span var(--cspan)}[class*=row-span-]{--row:auto;grid-row:var(--row) /span var(--rspan)}.equal-2-cols{--cols:2}.equal-3-cols{--cols:3}.equal-4-cols{--cols:4}.col-1{--col:1}.col-2{--col:2}.col-3{--col:3}.col-4{--col:4}.col-span-1{--cspan:1}.col-span-2{--cspan:2}.col-span-3{--cspan:3}.col-span-4{--cspan:4}.row-1{--row:1}.row-2{--row:2}.row-3{--row:3}.row-4{--row:4}.row-span-1{--rspan:1}.row-span-2{--rspan:2}.row-span-3{--rspan:3}.row-span-4{--rspan:4}@container (min-width: 640px){.sm\:flex{display:flex}.sm\:hidden{display:none!important}.sm\:equal-2-cols{--cols:2}.sm\:equal-3-cols{--cols:3}.sm\:equal-4-cols{--cols:4}.sm\:col-1{--col:1}.sm\:col-2{--col:2}.sm\:col-3{--col:3}.sm\:col-4{--col:4}.sm\:col-span-1{--cspan:1}.sm\:col-span-2{--cspan:2}.sm\:col-span-3{--cspan:3}.sm\:col-span-4{--cspan:4}.sm\:row-1{--row:1}.sm\:row-2{--row:2}.sm\:row-3{--row:3}.sm\:row-4{--row:4}.sm\:row-span-1{--rspan:1}.sm\:row-span-2{--rspan:2}.sm\:row-span-3{--rspan:3}.sm\:row-span-4{--rspan:4}}@container (min-width: 960px){.md\:flex{display:flex}.md\:hidden{display:none!important}.md\:equal-2-cols{--cols:2}.md\:equal-3-cols{--cols:3}.md\:equal-4-cols{--cols:4}.md\:col-1{--col:1}.md\:col-2{--col:2}.md\:col-3{--col:3}.md\:col-4{--col:4}.md\:col-span-1{--cspan:1}.md\:col-span-2{--cspan:2}.md\:col-span-3{--cspan:3}.md\:col-span-4{--cspan:4}.md\:row-1{--row:1}.md\:row-2{--row:2}.md\:row-3{--row:3}.md\:row-4{--row:4}.md\:row-span-1{--rspan:1}.md\:row-span-2{--rspan:2}.md\:row-span-3{--rspan:3}.md\:row-span-4{--rspan:4}}@container (min-width: 1280px){.lg\:flex{display:flex}.sm\:hidden{display:none!important}.lg\:equal-2-cols{--cols:2}.lg\:equal-3-cols{--cols:3}.lg\:equal-4-cols{--cols:4}.lg\:col-1{--col:1}.lg\:col-2{--col:2}.lg\:col-3{--col:3}.lg\:col-4{--col:4}.lg\:col-span-1{--cspan:1}.lg\:col-span-2{--cspan:2}.lg\:col-span-3{--cspan:3}.lg\:col-span-4{--cspan:4}.lg\:row-1{--row:1}.lg\:row-2{--row:2}.lg\:row-3{--row:3}.lg\:row-4{--row:4}.lg\:row-span-1{--rspan:1}.lg\:row-span-2{--rspan:2}.lg\:row-span-3{--rspan:3}.lg\:row-span-4{--rspan:4}}.gap-1{--gap:var(--sp-1)}.gap-1,.gap-2{gap:var(--gap)!important}.gap-2{--gap:var(--sp-2)}.gap-3{--gap:var(--sp-3)}.gap-3,.gap-4{gap:var(--gap)!important}.gap-4{--gap:var(--sp-4)}.content-grid{--full:minmax(var(--sp-2),1fr);--expand:minmax(0,var(--w-expand));--pop:minmax(0,var(--sp-2));--content:min(var(--w-cg),100% - (var(--sp-2) * 2));display:grid;grid-template-columns:[full-start] var(--full) [expand-start] var(--expand) [popout-start] var(--pop) [content-start] var(--content) [content-end] var(--pop) [popout-end] var(--expand) [expand-end] var(--full) [full-end]}.content-grid>*{grid-column:content}.popout{grid-column:popout}.expand{grid-column:expand}.full-bleed{grid-column:full}.content-grid>hr+*{margin-top:0}.wrapper,[class^=wrapper-]{--w-max:var(--w-xl);--sp-inline:var(--sp-2);margin-inline:auto;width:min(100% - (var(--sp-inline) * 2),var(--w-max))}.w-lg,.w-md,.w-sm,.w-xl,.w-xs{width:min(100%,var(--w-max))}.w-xs,.wrapper-xs{--w-max:var(--w-xs)}.w-sm,.wrapper-sm{--w-max:var(--w-sm)}.w-md,.wrapper-md{--w-max:var(--w-md)}.w-lg,.wrapper-lg{--w-max:var(--w-lg)}.w-xl,.wrapper-xl{--w-max:var(--w-xl)}.w-100\%{width:100%}.w-100vw{width:100vw}.w-max-100vw{max-width:100vw}.h-100\%{height:100%}.h-100dvh{height:100dvh}.h-max-100dvh{max-height:100dvh}.box{inset:0}.aspect-ratio-16x9{aspect-ratio:16/9}.aspect-ratio-21x9{aspect-ratio:21/9}.aspect-ratio-1x1{aspect-ratio:1/1}.aspect-ratio-4x3{aspect-ratio:4/3}}@layer decoration{.mx-auto{margin-inline:auto}.m-0{margin:0}.m-1{margin:var(--sp-1)}.m-2{margin:var(--sp-2)}.m-3{margin:var(--sp-3)}.m-4{margin:var(--sp-4)}.mt-0{margin-top:0}.mt-1{margin-top:var(--sp-1)}.mt-2{margin-top:var(--sp-2)}.mt-3{margin-top:var(--sp-3)}.mt-4{margin-top:var(--sp-4)}.mr-0{margin-right:0}.mr-1{margin-right:var(--sp-1)}.mr-2{margin-right:var(--sp-2)}.mr-3{margin-right:var(--sp-3)}.mr-4{margin-right:var(--sp-4)}.mb-0,.mb-1{margin-bottom:var(--sp-1)}.mb-2{margin-bottom:var(--sp-2)}.mb-3{margin-bottom:var(--sp-3)}.mb-4{margin-bottom:var(--sp-4)}.ml-0{margin-left:0}.ml-1{margin-left:var(--sp-1)}.ml-2{margin-left:var(--sp-2)}.ml-3{margin-left:var(--sp-3)}.ml-4{margin-left:var(--sp-4)}.mx-1{margin-inline:var(--sp-1)}.mx-2{margin-inline:var(--sp-2)}.mx-3{margin-inline:var(--sp-3)}.mx-4{margin-inline:var(--sp-4)}.my-1{margin-block:var(--sp-1)}.my-2{margin-block:var(--sp-2)}.my-3{margin-block:var(--sp-3)}.my-4{margin-block:var(--sp-4)}.p-cell{padding:var(--p-cell)}.p-0{padding:0}.p-1{padding:var(--sp-1)}.p-2{padding:var(--sp-2)}.p-3{padding:var(--sp-3)}.p-4{padding:var(--sp-4)}.pt-0{padding-top:0}.pt-1{padding-top:var(--sp-1)}.pt-2{padding-top:var(--sp-2)}.pt-3{padding-top:var(--sp-3)}.pt-4{padding-top:var(--sp-4)}.pr-0{padding-right:0}.pr-1{padding-right:var(--sp-1)}.pr-2{padding-right:var(--sp-2)}.pr-3{padding-right:var(--sp-3)}.pr-4{padding-right:var(--sp-4)}.pb-0{padding-bottom:0}.pb-1{padding-bottom:var(--sp-1)}.pb-2{padding-bottom:var(--sp-2)}.pb-3{padding-bottom:var(--sp-3)}.pb-4{padding-bottom:var(--sp-4)}.pl-0{padding-left:0}.pl-1{padding-left:var(--sp-1)}.pl-2{padding-left:var(--sp-2)}.pl-3{padding-left:var(--sp-3)}.pl-4{padding-left:var(--sp-4)}.px-1{padding-inline:var(--sp-1)}.px-2{padding-inline:var(--sp-2)}.px-3{padding-inline:var(--sp-3)}.px-4{padding-inline:var(--sp-4)}.py-1{padding-block:var(--sp-1)}.py-2{padding-block:var(--sp-2)}.py-3{padding-block:var(--sp-3)}.py-4{padding-block:var(--sp-4)}.b-0{border:0}.b-1{border:var(--b-1)}.b-2{border:var(--b-2)}.b-3{border:var(--b-3)}.bt-1{border-top:var(--b-1)}.bt-2{border-top:var(--b-2)}.bt-3{border-top:var(--b-3)}.br-1{border-right:var(--b-1)}.br-2{border-right:var(--b-2)}.br-3{border-right:var(--b-3)}.bb-1{border-bottom:var(--b-1)}.bb-2{border-bottom:var(--b-2)}.bb-3{border-bottom:var(--b-3)}.bl-1{border-left:var(--b-1)}.bl-2{border-left:var(--b-2)}.bl-3{border-left:var(--b-3)}.r-2{border-radius:var(--r-2)}.r-3{border-radius:var(--r-3)}.r-4{border-radius:var(--r-4)}.r-pill{border-radius:99em}.r-2,.r-3,.r-4,.r-pill{overflow:hidden}.img-cover{height:100%;object-fit:cover;object-position:center;width:100%}.hover\:opacity-25\%\:hover,.opacity-25\%{opacity:.25}.hover\:opacity-50\%\:hover,.opacity-50\%{opacity:.5}.hover\:opacity-75\%\:hover,.opacity-75\%{opacity:.75}.hover\:opacity-100\%\:hover{opacity:1}}@layer color-setup{[class*=b-]{--bl:var(--l500)}[class*=t-]{--tl:var(--l500)}[class*=bg-]{--bgl:var(--l500)}.b-blue,.hover\:b-blue:hover{--bc:var(--blue);border-color:var(--bc)}.b-green,.hover\:b-green:hover{--bc:var(--green);border-color:var(--bc)}.b-amber,.hover\:b-amber:hover{--bc:var(--amber);border-color:var(--bc)}.b-red,.hover\:b-red:hover{--bc:var(--red);border-color:var(--bc)}.b-gray,.hover\:b-gray:hover{--bc:var(--gray);border-color:var(--bc)}.hover\:t-blue:hover,.t-blue{--tc:var(--blue);color:var(--tc)}.hover\:t-green:hover,.t-green{--tc:var(--green);color:var(--tc)}.hover\:t-amber:hover,.t-amber{--tc:var(--amber);color:var(--tc)}.hover\:t-red:hover,.t-red{--tc:var(--red);color:var(--tc)}.hover\:t-gray:hover,.t-gray{--tc:var(--gray);color:var(--tc)}.bg-blue,.hover\:bg-blue:hover{--bgc:var(--blue);background:var(--bgc)}.bg-green,.hover\:bg-green:hover{--bgc:var(--green);background:var(--bgc)}.bg-amber,.hover\:bg-amber:hover{--bgc:var(--amber);background:var(--bgc)}.bg-red,.hover\:bg-red:hover{--bgc:var(--red);background:var(--bgc)}.bg-gray,.hover\:bg-gray:hover{--bgc:var(--gray);background:var(--bgc)}}@layer color-shade{[class*=b-100],[class*=b-200],[class*=b-300],[class*=b-400],[class*=b-500]{border-color:color-mix(in srgb,var(--bc) calc(var(--bl)*2),#fff)}.theme-dark [class*=b-500],[class*=b-600],[class*=b-700],[class*=b-800],[class*=b-900]{border-color:color-mix(in srgb,var(--bc) calc((100% - var(--bl))*2),#000)}.b-100,.hover\:b-100:hover{--bl:var(--l100)}.b-200,.hover\:b-200:hover{--bl:var(--l200)}.b-300,.hover\:b-300:hover{--bl:var(--l300)}.b-400,.hover\:b-400:hover{--bl:var(--l400)}.b-500,.hover\:b-500:hover{--bl:var(--l500)}.b-600,.hover\:b-600:hover{--bl:var(--l600)}.b-700,.hover\:b-700:hover{--bl:var(--l700)}.b-800,.hover\:b-800:hover{--bl:var(--l800)}.b-900,.hover\:b-900:hover{--bl:var(--l900)}[class*=t-100],[class*=t-200],[class*=t-300],[class*=t-400],[class*=t-500]{color:color-mix(in srgb,var(--tc) calc(var(--tl)*2),#fff)}.theme-dark [class*=t-500],[class*=t-600],[class*=t-700],[class*=t-800],[class*=t-900]{color:color-mix(in srgb,var(--tc) calc((100% - var(--tl))*2),#000)}.hover\:t-100:hover,.t-100{--tl:var(--l100)}.hover\:t-200:hover,.t-200{--tl:var(--l200)}.hover\:t-300:hover,.t-300{--tl:var(--l300)}.hover\:t-400:hover,.t-400{--tl:var(--l400)}.hover\:t-500:hover,.t-500{--tl:var(--l500)}.hover\:t-600:hover,.t-600{--tl:var(--l600)}.hover\:t-700:hover,.t-700{--tl:var(--l700)}.hover\:t-800:hover,.t-800{--tl:var(--l800)}.hover\:t-900:hover,.t-900{--tl:var(--l900)}[class*=bg-100],[class*=bg-200],[class*=bg-300],[class*=bg-400],[class*=bg-500]{background:color-mix(in srgb,var(--bgc) calc(var(--bgl)*2),#fff)}.theme-dark [class*=bg-500],[class*=bg-600],[class*=bg-700],[class*=bg-800],[class*=bg-900]{background:color-mix(in srgb,var(--bgc) calc((100% - var(--bgl))*2),#000)}.bg-100,.hover\:bg-100:hover{--bgl:var(--l100)}.bg-200,.hover\:bg-200:hover{--bgl:var(--l200)}.bg-300,.hover\:bg-300:hover{--bgl:var(--l300)}.bg-400,.hover\:bg-400:hover{--bgl:var(--l400)}.bg-500,.hover\:bg-500:hover{--bgl:var(--l500)}.bg-600,.hover\:bg-600:hover{--bgl:var(--l600)}.bg-700,.hover\:bg-700:hover{--bgl:var(--l700)}.bg-800,.hover\:bg-800:hover{--bgl:var(--l800)}.bg-900,.hover\:bg-900:hover{--bgl:var(--l900)}.theme-dark [class*=b-100].b-dark-invert,.theme-dark [class*=b-200].b-dark-invert,.theme-dark [class*=b-300].b-dark-invert,.theme-dark [class*=b-400].b-dark-invert,.theme-dark [class*=b-500].b-dark-invert{border-color:color-mix(in srgb,var(--bc) calc((100% - var(--bl))*2),#000)}.theme-dark [class*=b-600].t-dark-invert,.theme-dark [class*=b-700].t-dark-invert,.theme-dark [class*=b-800].t-dark-invert,.theme-dark [class*=b-900].t-dark-invert{border-color:color-mix(in srgb,var(--bc) calc(var(--bl)*2),#fff)}.theme-dark [class*=t-100].t-dark-invert,.theme-dark [class*=t-200].t-dark-invert,.theme-dark [class*=t-300].t-dark-invert,.theme-dark [class*=t-400].t-dark-invert{color:color-mix(in srgb,var(--tc) calc((100% - var(--tl))*2),#000)}.theme-dark [class*=t-600].t-dark-invert,.theme-dark [class*=t-700].t-dark-invert,.theme-dark [class*=t-800].t-dark-invert,.theme-dark [class*=t-900].t-dark-invert{color:color-mix(in srgb,var(--tc) calc(var(--tl)*2),#fff)}.theme-dark [class*=bg-100],.theme-dark [class*=bg-200],.theme-dark [class*=bg-300],.theme-dark [class*=bg-400]{background:color-mix(in srgb,var(--bgc) calc(var(--bgl)*2),#fff)}.theme-dark [class*=bg-100].bg-dark-invert,.theme-dark [class*=bg-200].bg-dark-invert,.theme-dark [class*=bg-300].bg-dark-invert,.theme-dark [class*=bg-400].bg-dark-invert{background:color-mix(in srgb,var(--bgc) calc((100% - var(--bgl))*2),#000)}.theme-dark [class*=bg-600].bg-dark-invert,.theme-dark [class*=bg-700].bg-dark-invert,.theme-dark [class*=bg-800].bg-dark-invert,.theme-dark [class*=bg-900].bg-dark-invert{background:color-mix(in srgb,var(--bgc) calc(var(--bgl)*2),#fff)}}@layer color-other{.bg-transparent:not(:hover){background:transparent}.hover\:t-white:hover,.t-white{color:#fff}.b-white,.hover\:b-white:hover{border-color:#fff}.bg-white,.hover\:bg-white:hover{background:#fff}.hover\:t-black:hover,.t-black{color:#000}.b-black,.hover\:b-black:hover{border-color:#000}.bg-black,.hover\:bg-black:hover{background:#000}.hover\:t-reversi:hover,.t-reversi{color:#000}.b-reversi,.hover\:b-reversi:hover{border-color:#000}.bg-reversi,.hover\:bg-reversi:hover{background:#000}.theme-dark .hover\:t-reversi:hover,.theme-dark .t-reversi{color:#fff}.theme-dark .b-reversi,.theme-dark .hover\:b-reversi:hover{border-color:#fff}.theme-dark .bg-reversi,.theme-dark .hover\:bg-reversi:hover{background:#fff}.hover\:t-reversi-alt:hover,.t-reversi-alt{color:#fff}.b-reversi-alt,.hover\:b-reversi-alt:hover{border-color:#fff}.bg-reversi-alt,.hover\:bg-reversi-alt:hover{background:#fff}.theme-dark .hover\:t-reversi-alt:hover,.theme-dark .t-reversi-alt{color:#000}.theme-dark .b-reversi-alt,.theme-dark .hover\:b-reversi-alt:hover{border-color:#000}.theme-dark .bg-reversi-alt,.theme-dark .hover\:bg-reversi-alt:hover{background:#000}} \ No newline at end of file +*/@layer defaults, links-and-accessibility, forms-and-buttons, typography, layout, decoration, colors, color-lightness, color-other,;:root{--w-xs:320px;--w-sm:640px;--w-md:960px;--w-lg:1280px;--w-xl:1600px;--w-content:40em;--w-expand:10.79em;--s-1:0.25rem;--s-2:0.5rem;--s-3:clamp(1rem,0.5rem + 1.25cqi,1.5rem);--s-4:clamp(2rem,1rem + 2.5cqi,3rem);--pill:99rem;--p-cell:0.5rem 1rem;--b-1:1px solid var(--bc-fineline);--b-2:var(--s-1) solid var(--bc-fineline);--b-3:var(--s-2) solid var(--bc-fineline);--ff-sans:ui-sans-serif,system-ui,Arial,sans-serif;--ff-serif:ui-serif,Georgia,Cambria,"Times New Roman",Times,serif;--ff-mono:ui-monospace,Menlo,Consolas,"Courier New",monospace;--ff-base:var(--ff-sans);--ff-prose:var(--ff-serif);--fs-base:100%;--fs-bump:112.5%;--fs-sm:0.8em;--fs-lg:1.325em;--fs-long-read:clamp(1em,0.8333cqi + 0.5208vw,1.25em);--fs-display:clamp(1.125rem,1.25cqi + 0.625rem,1.625rem);--fw-thin:200;--fw-normal:400;--fw-semibold:600;--fw-bold:700;--fw-heavy:900;--fw-btn:var(--fw-semibold);--b-form:1px solid var(--bc-form);--y-form:2.5em;--h1:2.25em;--h2:1.875em;--h3:1.5em;--h4:1.25em;--h5:1.125em;--h6:1em;--h-ff:inherit;--h-fw:var(--fw-semibold);--h-lh:calc(1em + 0.5rem);--h-mt:calc(var(--t-mb)*2);--t-mb:1rem;--t-lh:1.5;--a-deco-offset:0.3em;--a-deco-thickness:1px;--a-deco-thickness-hover:3px;--blue:#0040ff;--green:#128a12;--amber:#e6de00;--red:#e60000;--gray:grey;--bgc-body:light-dark(color-mix(in oklch,#fff),color-mix(in oklch,var(--gray),var(--l1000)));--tc-base:light-dark(color-mix(in oklch,var(--gray),var(--l900)),color-mix(in oklch,var(--gray),var(--l100)));--tc-link:light-dark(color-mix(in oklch,var(--blue),var(--l600)),color-mix(in oklch,var(--blue),var(--l400)));--tc-link-hover:light-dark(color-mix(in oklch,var(--blue),var(--l800)),color-mix(in oklch,var(--blue),var(--l500)));--tc-btn:#fff;--tc-btn-hover:#fff;--bgc-btn:light-dark(color-mix(in oklch,var(--gray),var(--l500)),color-mix(in oklch,var(--gray),var(--l600)));--bgc-btn-hover:light-dark(color-mix(in oklch,var(--gray),var(--l600)),color-mix(in oklch,var(--gray),var(--l700)));--bc-form:var(--bgc-btn);--tc-form:CanvasText;--bgc-form:Canvas;--tc-code:light-dark(color-mix(in oklch,var(--green),var(--l600)),color-mix(in oklch,var(--green),var(--l300)));--bgc-code:light-dark(#fff,#000);--bc-fineline:light-dark(color-mix(in oklch,var(--gray),var(--l300)),color-mix(in oklch,var(--gray),var(--l700)));--l100:#fff 90%;--l200:#fff 72%;--l300:#fff 54%;--l400:#fff 36%;--l500:#fff 18%;--l600:#000 0%;--l700:#000 18%;--l800:#000 36%;--l900:#000 54%;--l1000:#000 72%;--l100i:#000 54%;--l200i:#000 36%;--l300i:#000 18%;--l400i:#000 0%;--l500i:#fff 18%;--l600i:#fff 36%;--l700i:#fff 54%;--l800i:#fff 72%;--l900i:#fff 90%}@layer defaults{html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;box-sizing:border-box}*,:after,:before{box-sizing:inherit}body{font-size:var(--ff-base);line-height:var(--t-lh);margin:0;min-height:100dvh;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}canvas,img,picture,video{display:block;max-width:100%}iframe{border:0}summary{cursor:pointer}:target{scroll-margin-block:5ex}}@layer defaults{html{color-scheme:light dark;&.theme-light{color-scheme:light}&.theme-dark{color-scheme:dark}}body{background-color:var(--bgc-body);color:var(--tc-base);container-type:inline-size;font-family:var(--ff-base);font-size:var(--fs-base)}@container (min-width: 640px){body>*{font-size:var(--fs-bump)}}}@layer links-and-accessibility{a{color:var(--tc-link);cursor:pointer;text-decoration:underline;text-decoration-skip-ink:auto;text-decoration-thickness:var(--a-deco-thickness);text-underline-offset:var(--a-deco-offset);transition:all .15s ease;&:not(.t-no-underline):hover{color:var(--tc-link-hover);text-decoration:underline;text-decoration-thickness:var(--a-deco-thickness-hover)}}.links-not-underlined a,.links-not-underlined a:hover,.links-underlined-hover-only a,.t-no-underline,.t-underline-hover-only{text-decoration:none}a:focus-visible{background-color:var(--amber)!important;color:#000!important;outline:none;text-decoration:underline;text-decoration-thickness:var(--a-deco-thickness-hover)}a:focus-visible>img,button:focus-visible,form button:focus,input:focus,select:focus,textarea:focus{box-shadow:0 0 0 3px #000;outline:3px solid var(--amber);outline-offset:3px;position:relative;z-index:1}.visually-hidden:not(:focus):not(:active){height:1px;position:absolute;width:1px;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;white-space:nowrap}}@layer forms-and-buttons{fieldset{border:var(--b-1);padding:var(--s-2)}label,legend{font-family:var(--ff-base)}::placeholder{color:var(--tc-form);opacity:.7}input,select,textarea{background:var(--bgc-form);border:var(--b-form);border-radius:unset;color:var(--tc-form);font-family:var(--ff-base);font-size:inherit;min-height:var(--y-form);padding:var(--p-cell);text-align:start}[type=color],select:not([multiple]){height:var(--y-form)}[type=color]{padding:.25em;width:var(--y-form)}[type=checkbox],[type=radio]{display:inline-block;min-height:unset}[type=search]{-webkit-appearance:textfield;appearance:textfield}::file-selector-button{background:var(--bgc-btn);border:0;color:#fff;font-size:1em}:disabled:hover{cursor:not-allowed}textarea:not([rows]){min-height:6em}.btn,[type=button],[type=reset],[type=submit],button{align-items:center;-webkit-appearance:none;appearance:none;background:var(--bgc-btn);border:1px solid transparent;color:var(--tc-btn);display:inline-flex;font-family:var(--ff-base);font-size:inherit;font-weight:var(--fw-btn);justify-content:center;margin:0;min-height:var(--y-form);padding:var(--s-2) 1em;position:relative;text-decoration:none;transition:all .15s ease;&:hover{background:var(--bgc-btn-hover);color:var(--tc-btn-hover);cursor:pointer;text-decoration:none}}.btn-icon{height:var(--y-form);line-height:inherit;padding:0;width:var(--y-form)}}@layer typography{blockquote,dl,fieldset,figcaption,figure,ol,p,pre,table,ul{margin-block:0 var(--t-mb)}caption{margin-block:var(--s-2)}h1{font-family:var(--h-ff);font-weight:var(--h-fw);line-height:var(--h-lh);margin-block:0 var(--t-mb)}.h1,h1{font-size:var(--h1)}.h2,h2{font-size:var(--h2)}.h3,h3{font-size:var(--h3)}.h4,h4{font-size:var(--h4)}.h5,h5{font-size:var(--h5)}.h6,h6{font-size:var(--h6)}h2,h3,h4,h5,h6{font-family:var(--h-ff);font-weight:var(--h-fw);line-height:var(--h-lh);margin-block:var(--h-mt) var(--t-mb);text-wrap:balance;.content-grid &{margin-top:calc(var(--h-mt) - var(--t-mb))}}.content-grid>h2:first-child{margin-top:0}menu,ol,ul{margin-block:0 var(--t-mb);padding-left:1.5em}li{+li,ol,ul{margin-block:var(--t-mb) 0}}ol ol{list-style-type:lower-alpha;ol{list-style-type:lower-roman}}dl{margin:0 0 var(--t-mb)}dt{font-weight:700}dd{margin:var(--t-mb) 0;padding-left:1.5em}.unlist{list-style-type:none}.table{border-bottom:var(--b-1);border-collapse:collapse;border-spacing:0;border-top:var(--b-1);width:100%}td,th{padding:var(--p-cell);text-align:left;vertical-align:top;.table-grid &{border:var(--b-1)}}th{border-bottom:var(--b-1);font-weight:700}hr{border:0;border-top:var(--b-1);height:0;margin-block:3rem;width:100%}blockquote{margin-inline:0;padding-inline:var(--s-3)}blockquote p:last-child{margin-bottom:0}code,kbd,samp{font-family:var(--ff-mono);font-style:normal;font-weight:400}code{background:var(--bgc-code);border:var(--b-1);border-radius:var(--s-xs);color:var(--tc-code);display:inline-block;padding-inline:.25em}pre{font-style:normal;font-weight:400;white-space:pre;&:not(:has(code)){overflow-x:auto}code{background:var(--bgc-code);border-radius:var(--s-1);display:block;overflow-x:auto;padding:1em}}sub,sup{font-size:85%;line-height:0}.t-nowrap{white-space:nowrap}.t-lg{font-size:var(--fs-lg)}.t-sm,small{font-size:var(--fs-sm)}.t-thin{font-weight:var(--fw-thin)}.t-normal{font-weight:var(--fw-normal)}.t-semibold{font-weight:var(--fw-semibold)}.t-bold{font-weight:var(--fw-bold)}.t-heavy{font-weight:var(--fw-heavy)}.t-italic{font-style:italic}.t-right{text-align:right}.t-center{text-align:center}.t-left{text-align:left}@container (min-width: 640px){.sm\:t-right{text-align:right}.sm\:t-center{text-align:center}.sm\:t-left{text-align:left}}@container (min-width: 960px){.md\:t-right{text-align:right}.md\:t-center{text-align:center}.md\:t-left{text-align:left}}@container (min-width: 1280px){.lg\:t-right{text-align:right}.lg\:t-center{text-align:center}.lg\:t-left{text-align:left}}.t-balance{text-wrap:balance}.t-uppercase{text-transform:uppercase}.t-highlight,mark{background:var(--bgc-highlight);color:currentColor}.t-long-read{font-size:var(--fs-long-read)}.t-display{font-size:var(--fs-display)}.t-base{font-family:var(--ff-base)}.t-prose{font-family:var(--ff-prose)}}@layer layout{.container{container-type:inline-size}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.sticky{position:sticky}.top{top:0}.right{right:0}.bottom{bottom:0}.left{left:0}.z-1{z-index:1}.z-2{z-index:2}.z-3{z-index:3}.float-right{float:right}.float-left{float:left}.clearfix:after{clear:both;content:"";display:table}.overflow-x{overflow-x:auto}.overflow-y{overflow-y:auto}.overflow-clip{overflow:clip}.block{display:block}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.flex{display:flex}.flex-wrap{flex-wrap:wrap}.flex-column{flex-direction:column}.flex-start{justify-content:flex-start}.flex-center{justify-content:center}.flex-end{justify-content:flex-end}.flex-top{align-items:flex-start}.flex-middle{align-items:center}.flex-bottom{align-items:flex-end}.flex-space-between{justify-content:space-between}.flex-grow-equal>*{flex:1}.flex-grow-auto>*{flex:auto}.grow{flex:1}@container (max-width: 639px){.sm\:hidden-below{display:none!important}}@container (max-width: 959px){.md\:hidden-below{display:none!important}}@container (max-width: 1279px){.lg\:hidden-below{display:none!important}}[class*=grid]{--cols:1}.grid{display:grid}.grid-dense{grid-auto-flow:dense}[class*=equal-]{grid-template-columns:repeat(var(--cols),minmax(1rem,1fr))}[class*=col-1],[class*=col-2],[class*=col-3],[class*=col-4]{grid-column:var(--col)}[class*=row-1],[class*=row-2],[class*=row-3],[class*=row-4]{grid-row:var(--row)}[class*=col-span-]{--col:auto;grid-column:var(--col) /span var(--cspan)}[class*=row-span-]{--row:auto;grid-row:var(--row) /span var(--rspan)}.equal-2-cols{--cols:2}.equal-3-cols{--cols:3}.equal-4-cols{--cols:4}.col-1{--col:1}.col-2{--col:2}.col-3{--col:3}.col-4{--col:4}.col-span-1{--cspan:1}.col-span-2{--cspan:2}.col-span-3{--cspan:3}.col-span-4{--cspan:4}.row-1{--row:1}.row-2{--row:2}.row-3{--row:3}.row-4{--row:4}.row-span-1{--rspan:1}.row-span-2{--rspan:2}.row-span-3{--rspan:3}.row-span-4{--rspan:4}@container (min-width: 640px){.sm\:block{display:block}.sm\:flex{display:flex}.sm\:hidden{display:none!important}.sm\:grid{display:grid}.sm\:equal-2-cols{--cols:2}.sm\:equal-3-cols{--cols:3}.sm\:equal-4-cols{--cols:4}.sm\:col-1{--col:1}.sm\:col-2{--col:2}.sm\:col-3{--col:3}.sm\:col-4{--col:4}.sm\:col-span-1{--cspan:1}.sm\:col-span-2{--cspan:2}.sm\:col-span-3{--cspan:3}.sm\:col-span-4{--cspan:4}.sm\:row-1{--row:1}.sm\:row-2{--row:2}.sm\:row-3{--row:3}.sm\:row-4{--row:4}.sm\:row-span-1{--rspan:1}.sm\:row-span-2{--rspan:2}.sm\:row-span-3{--rspan:3}.sm\:row-span-4{--rspan:4}}@container (min-width: 960px){.md\:block{display:block}.md\:flex{display:flex}.md\:hidden{display:none!important}.md\:grid{display:grid}.md\:equal-2-cols{--cols:2}.md\:equal-3-cols{--cols:3}.md\:equal-4-cols{--cols:4}.md\:col-1{--col:1}.md\:col-2{--col:2}.md\:col-3{--col:3}.md\:col-4{--col:4}.md\:col-span-1{--cspan:1}.md\:col-span-2{--cspan:2}.md\:col-span-3{--cspan:3}.md\:col-span-4{--cspan:4}.md\:row-1{--row:1}.md\:row-2{--row:2}.md\:row-3{--row:3}.md\:row-4{--row:4}.md\:row-span-1{--rspan:1}.md\:row-span-2{--rspan:2}.md\:row-span-3{--rspan:3}.md\:row-span-4{--rspan:4}}@container (min-width: 1280px){.lg\:block{display:flex}.lg\:flex{display:block}.lg\:hidden{display:none!important}.lg\:grid{display:grid}.lg\:equal-2-cols{--cols:2}.lg\:equal-3-cols{--cols:3}.lg\:equal-4-cols{--cols:4}.lg\:col-1{--col:1}.lg\:col-2{--col:2}.lg\:col-3{--col:3}.lg\:col-4{--col:4}.lg\:col-span-1{--cspan:1}.lg\:col-span-2{--cspan:2}.lg\:col-span-3{--cspan:3}.lg\:col-span-4{--cspan:4}.lg\:row-1{--row:1}.lg\:row-2{--row:2}.lg\:row-3{--row:3}.lg\:row-4{--row:4}.lg\:row-span-1{--rspan:1}.lg\:row-span-2{--rspan:2}.lg\:row-span-3{--rspan:3}.lg\:row-span-4{--rspan:4}}.gap-1{gap:var(--s-1)}.gap-2{gap:var(--s-2)}.gap-3{gap:var(--s-3)}.gap-4{gap:var(--s-4)}.content-grid{--full:minmax(var(--s-3),1fr);--expand:minmax(0,var(--w-expand));--pop:minmax(0,var(--s-3));--content:min(var(--w-content),100% - (var(--s-3) * 2));display:grid;grid-template-columns:[full-start] var(--full) [expand-start] var(--expand) [popout-start] var(--pop) [content-start] var(--content) [content-end] var(--pop) [popout-end] var(--expand) [expand-end] var(--full) [full-end];>*{grid-column:content}}.popout{grid-column:popout}.expand{grid-column:expand}.full-bleed{grid-column:full}.content-grid>hr+*{margin-top:0}.wrapper,[class*=wrapper-]{--w-max:var(--w-xl);margin-inline:auto;width:min(100% - (var(--s-3) * 2),var(--w-max))}[class*=w-max-]{width:min(100%,var(--w-max))}.w-max-xs,.wrapper-xs{--w-max:var(--w-xs)}.w-max-sm,.wrapper-sm{--w-max:var(--w-sm)}.w-max-md,.wrapper-md{--w-max:var(--w-md)}.w-max-content,.wrapper-content{--w-max:var(--w-content)}.w-max-lg,.wrapper-lg{--w-max:var(--w-lg)}.w-max-xl,.wrapper-xl{--w-max:var(--w-xl)}.w-100\%{width:100%}.w-100vw{width:100vw}.w-max-100vw{max-width:100vw}.w-fit-content{width:fit-content}.h-100\%{height:100%}.h-100dvh{height:100dvh}.h-max-100dvh{max-height:100dvh}.box{inset:0}.aspect-ratio-16x9{aspect-ratio:16/9}.aspect-ratio-21x9{aspect-ratio:21/9}.aspect-ratio-4x3{aspect-ratio:4/3}.aspect-ratio-1x1{aspect-ratio:1/1}}@layer decoration{.mx-auto{margin-inline:auto}.m-0{margin:0}.m-1{margin:var(--s-1)}.m-2{margin:var(--s-2)}.m-3{margin:var(--s-3)}.m-4{margin:var(--s-4)}.mt-0{margin-top:0}.mt-1{margin-top:var(--s-1)}.mt-2{margin-top:var(--s-2)}.mt-3{margin-top:var(--s-3)}.mt-4{margin-top:var(--s-4)}.mr-0{margin-right:0}.mr-1{margin-right:var(--s-1)}.mr-2{margin-right:var(--s-2)}.mr-3{margin-right:var(--s-3)}.mr-4{margin-right:var(--s-4)}.mb-0{margin-bottom:0}.mb-1{margin-bottom:var(--s-1)}.mb-2{margin-bottom:var(--s-2)}.mb-3{margin-bottom:var(--s-3)}.mb-4{margin-bottom:var(--s-4)}.ml-0{margin-left:0}.ml-1{margin-left:var(--s-1)}.ml-2{margin-left:var(--s-2)}.ml-3{margin-left:var(--s-3)}.ml-4{margin-left:var(--s-4)}.mx-1{margin-inline:var(--s-1)}.mx-2{margin-inline:var(--s-2)}.mx-3{margin-inline:var(--s-3)}.mx-4{margin-inline:var(--s-4)}.my-1{margin-block:var(--s-1)}.my-2{margin-block:var(--s-2)}.my-3{margin-block:var(--s-3)}.my-4{margin-block:var(--s-4)}.p-0{padding:0}.p-1{padding:var(--s-1)}.p-2{padding:var(--s-2)}.p-3{padding:var(--s-3)}.p-4{padding:var(--s-4)}.pt-0{padding-top:0}.pt-1{padding-top:var(--s-1)}.pt-2{padding-top:var(--s-2)}.pt-3{padding-top:var(--s-3)}.pt-4{padding-top:var(--s-4)}.pr-0{padding-right:0}.pr-1{padding-right:var(--s-1)}.pr-2{padding-right:var(--s-2)}.pr-3{padding-right:var(--s-3)}.pr-4{padding-right:var(--s-4)}.pb-0{padding-bottom:0}.pb-1{padding-bottom:var(--s-1)}.pb-2{padding-bottom:var(--s-2)}.pb-3{padding-bottom:var(--s-3)}.pb-4{padding-bottom:var(--s-4)}.pl-0{padding-left:0}.pl-1{padding-left:var(--s-1)}.pl-2{padding-left:var(--s-2)}.pl-3{padding-left:var(--s-3)}.pl-4{padding-left:var(--s-4)}.px-1{padding-inline:var(--s-1)}.px-2{padding-inline:var(--s-2)}.px-3{padding-inline:var(--s-3)}.px-4{padding-inline:var(--s-4)}.py-1{padding-block:var(--s-1)}.py-2{padding-block:var(--s-2)}.py-3{padding-block:var(--s-3)}.py-4{padding-block:var(--s-4)}.p-cell{padding:var(--p-cell)}.b-0{border:0}.b-thin{border:var(--b-1)}.b-thick{border:var(--b-2)}.b-heavy{border:var(--b-3)}.bt-thin{border-top:var(--b-1)}.bt-thick{border-top:var(--b-2)}.bt-heavy{border-top:var(--b-3)}.br-thin{border-right:var(--b-1)}.br-thick{border-right:var(--b-2)}.br-heavy{border-right:var(--b-3)}.bb-thin{border-bottom:var(--b-1)}.bb-thick{border-bottom:var(--b-2)}.bb-heavy{border-bottom:var(--b-3)}.bl-thin{border-left:var(--b-1)}.bl-thick{border-left:var(--b-2)}.bl-heavy{border-left:var(--b-3)}.rad,.rad-1{--rad:var(--s-1);border-radius:var(--rad)}.rad-tl{border-top-left-radius:var(--rad)}.rad-tl,.rad-tr{--rad:var(--s-1)}.rad-tr{border-top-right-radius:var(--rad)}.rad-br{border-bottom-right-radius:var(--rad)}.rad-bl,.rad-br{--rad:var(--s-1)}.rad-bl{border-bottom-left-radius:var(--rad)}.rad-2{--rad:var(--s-2)}.rad-3{--rad:var(--s-3)}.rad-4{--rad:var(--s-4)}.rad-pill{--rad:var(--pill)}.img-cover{height:100%;object-fit:cover;object-position:center;width:100%}.hover\:opacity-25\%\:hover,.opacity-25\%{opacity:.25}.hover\:opacity-50\%\:hover,.opacity-50\%{opacity:.5}.hover\:opacity-75\%\:hover,.opacity-75\%{opacity:.75}.hover\:opacity-100\%\:hover{opacity:1}}@layer colors{[class*=b-]{--bl:var(--l500)}[class*=t-]{--tl:var(--l500)}[class*=bg-]{--bgl:var(--l500)}.b-blue,.hover\:b-blue:hover{--bc:var(--blue);border-color:var(--bc)}.b-green,.hover\:b-green:hover{--bc:var(--green);border-color:var(--bc)}.b-amber,.hover\:b-amber:hover{--bc:var(--amber);border-color:var(--bc)}.b-red,.hover\:b-red:hover{--bc:var(--red);border-color:var(--bc)}.b-gray,.hover\:b-gray:hover{--bc:var(--gray);border-color:var(--bc)}.hover\:t-blue:hover,.t-blue{--tc:var(--blue);color:var(--tc)}.hover\:t-green:hover,.t-green{--tc:var(--green);color:var(--tc)}.hover\:t-amber:hover,.t-amber{--tc:var(--amber);color:var(--tc)}.hover\:t-red:hover,.t-red{--tc:var(--red);color:var(--tc)}.hover\:t-gray:hover,.t-gray{--tc:var(--gray);color:var(--tc)}.bg-blue,.hover\:bg-blue:hover{--bgc:var(--blue);background:var(--bgc)}.bg-green,.hover\:bg-green:hover{--bgc:var(--green);background:var(--bgc)}.bg-amber,.hover\:bg-amber:hover{--bgc:var(--amber);background:var(--bgc)}.bg-red,.hover\:bg-red:hover{--bgc:var(--red);background:var(--bgc)}.bg-gray,.hover\:bg-gray:hover{--bgc:var(--gray);background:var(--bgc)}}@layer color-lightness{[class*=b-100],[class*=b-200],[class*=b-300],[class*=b-400],[class*=b-500],[class*=b-600],[class*=b-700],[class*=b-800],[class*=b-900]{border-color:color-mix(in OKLAB,var(--bc),var(--bl))}.b-dark-invert{&[class*=b-100],&[class*=b-200],&[class*=b-300],&[class*=b-400],&[class*=b-500],&[class*=b-600],&[class*=b-700],&[class*=b-800],&[class*=b-900]{border-color:light-dark(color-mix(in OKLAB,var(--bc),var(--bl)),color-mix(in OKLAB,var(--bc),var(--bli)))}}.b-100,.hover\:b-100:hover{--bl:var(--l100);--bli:var(--l100i)}.b-200,.hover\:b-200:hover{--bl:var(--l200);--bli:var(--l200i)}.b-300,.hover\:b-300:hover{--bl:var(--l300);--bli:var(--l300i)}.b-400,.hover\:b-400:hover{--bl:var(--l400);--bli:var(--l400i)}.b-500,.hover\:b-500:hover{--bl:var(--l500);--bli:var(--l500i)}.b-600,.hover\:b-600:hover{--bl:var(--l600);--bli:var(--l600i)}.b-700,.hover\:b-700:hover{--bl:var(--l700);--bli:var(--l700i)}.b-800,.hover\:b-800:hover{--bl:var(--l800);--bli:var(--l800i)}.b-900,.hover\:b-900:hover{--bl:var(--l900);--bli:var(--l900i)}[class*=t-100],[class*=t-200],[class*=t-300],[class*=t-400],[class*=t-500],[class*=t-600],[class*=t-700],[class*=t-800],[class*=t-900]{color:color-mix(in OKLAB,var(--tc),var(--tl))}.t-dark-invert{&[class*=t-100],&[class*=t-200],&[class*=t-300],&[class*=t-400],&[class*=t-500],&[class*=t-600],&[class*=t-700],&[class*=t-800],&[class*=t-900]{color:light-dark(color-mix(in OKLAB,var(--tc),var(--tl)),color-mix(in OKLAB,var(--tc),var(--tli)))}}.hover\:t-100:hover,.t-100{--tl:var(--l100);--tli:var(--l100i)}.hover\:t-200:hover,.t-200{--tl:var(--l200);--tli:var(--l200i)}.hover\:t-300:hover,.t-300{--tl:var(--l300);--tli:var(--l300i)}.hover\:t-400:hover,.t-400{--tl:var(--l400);--tli:var(--l400i)}.hover\:t-500:hover,.t-500{--tl:var(--l500);--tli:var(--l500i)}.hover\:t-600:hover,.t-600{--tl:var(--l600);--tli:var(--l600i)}.hover\:t-700:hover,.t-700{--tl:var(--l700);--tli:var(--l700i)}.hover\:t-800:hover,.t-800{--tl:var(--l800);--tli:var(--l800i)}.hover\:t-900:hover,.t-900{--tl:var(--l900);--tli:var(--l900i)}[class*=bg-100],[class*=bg-200],[class*=bg-300],[class*=bg-400],[class*=bg-500],[class*=bg-600],[class*=bg-700],[class*=bg-800],[class*=bg-900]{background:color-mix(in OKLAB,var(--bgc),var(--bgl))}.bg-dark-invert{&[class*=bg-100],&[class*=bg-200],&[class*=bg-300],&[class*=bg-400],&[class*=bg-500],&[class*=bg-600],&[class*=bg-700],&[class*=bg-800],&[class*=bg-900]{background-color:light-dark(color-mix(in OKLAB,var(--bgc),var(--bgl)),color-mix(in OKLAB,var(--bgc),var(--bgli)))}}.bg-100,.hover\:bg-100:hover{--bgl:var(--l100);--bgli:var(--l100i)}.bg-200,.hover\:bg-200:hover{--bgl:var(--l200);--bgli:var(--l200i)}.bg-300,.hover\:bg-300:hover{--bgl:var(--l300);--bgli:var(--l300i)}.bg-400,.hover\:bg-400:hover{--bgl:var(--l400);--bgli:var(--l400i)}.bg-500,.hover\:bg-500:hover{--bgl:var(--l500);--bgli:var(--l500i)}.bg-600,.hover\:bg-600:hover{--bgl:var(--l600);--bgli:var(--l600i)}.bg-700,.hover\:bg-700:hover{--bgl:var(--l700);--bgli:var(--l700i)}.bg-800,.hover\:bg-800:hover{--bgl:var(--l800);--bgli:var(--l800i)}.bg-900,.hover\:bg-900:hover{--bgl:var(--l900);--bgli:var(--l900i)}}@layer color-other{.bg-transparent:not(:hover){background:transparent}.hover\:t-white:hover,.t-white{color:#fff}.hover\:t-white.t-dark-invert:hover,.t-white.t-dark-invert{color:light-dark(#fff,#000)}.b-white,.hover\:b-white:hover{border-color:#fff}.b-white.b-dark-invert,.hover\:b-white.b-dark-invert:hover{border-color:light-dark(#fff,#000)}.bg-white,.hover\:bg-white:hover{background:#fff}.bg-white.bg-dark-invert,.hover\:bg-white.bg-dark-invert:hover{background:light-dark(#fff,#000)}.hover\:t-black:hover,.t-black{color:#000}.hover\:t-black.t-dark-invert:hover,.t-black.t-dark-invert{color:light-dark(#000,#fff)}.b-black,.hover\:b-black:hover{border-color:#000}.b-black.b-dark-invert,.hover\:b-black.b-dark-invert:hover{border-color:light-dark(#000,#fff)}.bg-black,.hover\:bg-black:hover{background:#000}.bg-black.bg-dark-invert,.hover\:bg-black.bg-dark-invert:hover{background:light-dark(#000,#fff)}} \ No newline at end of file diff --git a/docs/decoration/index.html b/docs/decoration/index.html index 72506df..35e897d 100644 --- a/docs/decoration/index.html +++ b/docs/decoration/index.html @@ -5,384 +5,425 @@ - Decoration · Baselayer 3 CSS + Decoration · Baselayer CSS - + - - - - + + - + -
-
+
- -
-
-
-
-
-

Decoration

-
-
- - -
-
-

Spacing (margins and paddings)

-

Box model margin and padding spacing have both 4 levels based on 4 CSS variables.

+
+
+
+
+
+

Decoration

+
+
+
+
+ +
+
+
+

Spacing

+

Box model margin and padding spacing have both 4 levels based on 4 CSS variables. These spacing variables are also used for gaps (in flexbox and the grid system), and for border radius utilities.

The smallest level simply adds 0.5rem spacing, whereas levels 2 thorugh 4 increase responsively depending how how much width is available, using clamp() functions to ramp up to 1.5× their base size.

-

If the spacing decoration class is not inside a container (see container query powered layouts), the spacing ramp of levels 2 thorugh 4 uses the viewport width unit, vw. But the same spacing utility classes used inside a container will ramp up using the container query inline width unit, cqi. Both these ramps achieve 1.5× their base sizes at approximately 1280px available width.

-
/*
-Default spacing
-*/
-:root {
-  --sp-1: 0.5rem;
-  --sp-2: clamp(1rem, 0.5rem + 1.25vw, 1.5rem);
-  --sp-3: clamp(2rem, 1rem + 2.5vw, 3rem);
-  --sp-4: clamp(3rem, 1.5rem + 3.75vw, 4.5rem);
-}
-
-/*
-Container query powered spacing
-*/
-.container {
-  --sp-2: clamp(1rem, 0.5rem + 1.25cqi, 1.5rem);
-  --sp-3: clamp(2rem, 1rem + 2.5cqi, 3rem);
-  --sp-4: clamp(3rem, 1.5rem + 3.75cqi, 4.5rem);
+
The middle ramp within the clamp uses container query dependant units, cqi. This will either take effect from the container query context on the <body> tag, or from any inner container classes that may be added on block elements (see Layouts/ container query contexts).

+
:root {
+  --s-1: 0.25rem; /* 4px */
+  --s-2: 0.5rem; /* 8px */
+  --s-3: clamp(1rem, 0.5rem + 1.25cqi, 1.5rem); /* 16px --> 24px */
+  --s-4: clamp(2rem, 1rem + 2.5cqi, 3rem); /* 32px --> 40px */
 }
 

 
This makes the negative space (“whitespace”) for spacing levels 2 through 4 larger where there is a larger container (or viewport) width available.

+

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Spacing variableDefault valueMargin (e.g.)Padding (e.g.)Border radiusGap (flexbox and grid)
--s-10.25remm-1p-1rad-1gap-1
--s-20.5remm-2p-2rad-2gap-2
--s-3clamp(1rem, 0.5rem + 1.25cqi, 1.5rem)m-3p-3rad-3gap-3
--s-4clamp(2rem, 1rem + 2.5cqi, 3rem)m-4p-4rad-4gap-4

+

+
Spacing example with paddings:

+

+
p-1

+
p-2

+
p-3

+
p-4

+

 
Both margin and padding spacers are controlled on the 4 sides of blocks, as follows:

 
    
-
  • All: m-1 through m-4 / p-1 through p-4 (all four sides)
    • 
-
  • Top: mt-1 through mt-4 / pt-1 through pt-4
    • 
-
  • Right: mr-1 through mr-4 / pr-1 through pr-4
    • 
-
  • Bottom: mb-1 through mb-4 / pb-1 through pb-4
    • 
-
  • Left: ml-1 through ml-4 / pl-1 through pl-4
    • 
+
  • All: m-0 through m-4 / p-0 through p-4 (all four sides)
    • 
+
  • Top: mt-0 through mt-4 / pt-0 through pt-4
    • 
+
  • Right: mr-0 through mr-4 / pr-0 through pr-4
    • 
+
  • Bottom: mb-0 through mb-4 / pb-0 through pb-4
    • 
+
  • Left: ml-0 through ml-4 / pl-0 through pl-4
    • 
 
  • Inline axis, or x-axis (right and left): mx-1 through mx-4 / px-4 through px-4
    • 
-
  • Block acis, or y-axis (top and bottom): my-1 through my-4 / py-4 through py-4
    • 
+
  • Block axis, or y-axis (top and bottom): my-1 through my-4 / py-4 through py-4
    • 
 

-
Spacing example with paddings:

-
p-1

-
p-2

-
p-3

-
p-4

+
The zero *-0 options (top, roght, bottom, or left) are for removing (resetting) unwanted margin and padding.

 
Spacing extras

 
In addition, there are the following specials:

 
    
-
  • p-cell — adds y-axis padding --sp-1 and x-axis padding of double --sp-1 for creating menu items. Same as the padding for table cells and buttons
    • 
-
  • mx-auto — for x-axis margin auto-centering
    • 
-
  • m-0, mt-0, mb-0, and p-0 — for removing (resetting) unwanted space.
    • 
+
  • p-cell — adds y-axis padding --s-1 and x-axis padding of double --s-1 for creating menu items. Same as the padding for table cells and buttons
    • 
+
  • mx-auto — for x-axis margin auto-centering
    • 
 

-
mb-0 is commonly used for removing the bottom margin on the last paragraph (or other typographic block) inside a <div> panel. mt-0 is commonly used for removing top margin for headers used in side-columns (e.g. for navigation menus).

-
These zero spacing utilities are declared before the spacers above in decoration.css so that you can use them to reset and then use spacers to set spacing the way you want it.

 
Borders

 
Baselayer provides three thicknesses of border (plus a zero border override):

-
b-1 (1px)

-
b-2 (4px)

-
b-3 (8px)

+

+
b-thin (1px)

+
b-thick (4px)

+
b-heavy (8px)

+

 
Borders can be set as follows:

 
    
 
  • All: b-*
    • 
@@ -396,56 +437,44 @@ 
    Border extra
    
 
  • b-0 — for removing (resetting) all borders
    • 
 

 
Rounded corners

+
All Baselayer border radius classes apply their border radius potentially to all four corners. If you want different radii on different corners of the same element, then you can access each of the spacing variables in your CSS, or set your own values.

+
Tip: If you are putting rounded corners on a block element that contains an image, you will also need to add overflow-clip.

+
The first five border radius classes below supply the property border-{...}-radius and the default spacing variable --s-1 (0.5rem).

+
    
+
  • rad, rad-1 — border-radius: (all) --s-1 (0.5rem)
    • 
+
  • rad-tl — border-top-left-radius: --s-1`
    • 
+
  • rad-tr — border-top-right-radius: --s-1`
    • 
+
  • rad-br — border-bottom-right-radius: --s-1`
    • 
+
  • rad-bl — border-bottom-left-radius: --s-1`
    • 
+

+
Then there are five modifier classes. These only supply a spacing variable — they do not contain the border-{...}-radius property. Therefore, they need to be paired with (at least) one of the five border radius utilities above.

 
    
-
  • r-2 — 4px border radius
    • 
-
  • r-3 — 8px border radius
    • 
-
  • r-4 — 16px border radius
    • 
+
  • rad-xs — --s-xs 0.25rem
    • 
+
  • rad-2 — --s-2 clamp(1rem, 0.5rem + 1.25cqi, 1.5rem)
    • 
+
  • rad-3 — --s-3 clamp(2rem, 1rem + 2.5cqi, 3rem)
    • 
+
  • rad-4 — --s-4 clamp(3rem, 1.5rem + 3.75cqi, 4.5rem)
    • 
+
  • rad-pill — --s-pill 99rem
    • 
 

-

-  
r-2

-  
r-3

-  
r-4

+
Examples:

+

+  
rad rad-xs

+  
rad or rad-1

+  
rad rad-2

+  
rad rad-3

+  
rad rad-4

+  
rad rad-pill

+  
rad-tl rad-br rad-3

+  
rad-tl rad-bl rad-pill

+  
rad-tr rad-pill

 

-
Note: border-radius classes have overflow: hidden built in, so that they can “clip” the corners of images.

-
Border and border-radius variables pair as follows:

-
-  
-    
-      
-      
-      
-    
-  
-  
-    
-      
-      
-      
-    
-    
-      
-      
-      
-    
-    
-      
-      
-      
-    
-    
-      
-      
-      
-    
-  
-
Border variableBorder-radius variableValue
--b1n/a1px
--b2--r24px
--b3--r38px
n/a--r416px

-
Note: There is no --r1 (a border radius of 1px) or --b4 (border radius of 16px) in Baselayer.

+
If the element is a square, then rad rad-pill makes a circle.

+

+
rad rad-pill

+

+
Rounded corners extra

 
    
-
  • r-pill — 99em border radius (more than sufficient to put x-axis semi-circular ends on even mid-sized blocks)
    • 
+
  • unrounded — in some sutuations (e.g. if you code-in rounded corners on form elements and buttons), you may need to remove rounded corners with unrounded.
    • 
 

-
pill

-
If r-pill is used on a square, then the result will be a circle.

-
280px²
square pill

 
The img-cover class

 
The Baselayer cover class can be used to make an image expand or contract to fully cover a container block rectangle. It is designed for use on an <img src=""> tag.

 
.img-cover {
@@ -469,54 +498,53 @@ 
Opacity

 
If you use these on an image over a colored background, then you get a color-tinted image.

 
If you have text over an image (e.g. in a hero component), then you can use opacity over a black (or dark color) background to make white text more readable — and vise versa.

 
-              

-
- - -
-
-
+ +
+
+ +
+
-
+ +
- \ No newline at end of file + diff --git a/docs/examples/index.html b/docs/examples/index.html index 74fe2d1..658ba63 100644 --- a/docs/examples/index.html +++ b/docs/examples/index.html @@ -5,11 +5,25 @@ - Examples · Baselayer 3 CSS + Examples · Baselayer CSS - + -

- -

-

Layout widths

-
wrapper
-
-
w-xs / 320px
-
w-xs
-
w-xs
-
w-xs
-
w-xs
-
-
-
w-sm / 640px
-
w-xs
-
w-xs
-
w-xs
-
-
-
w-md / 960px
-
w-xs
-
w-xs
-
-
-
w-lg / 1280px
-
w-xs
-
-
-
w-xl / 1600px
+
+
+
+

Centered layout wrappers

-
wrapper
-
wrapper-xl
-
wrapper-lg
-
wrapper-md
-
wrapper-sm
-
wrapper-xs
+

Note: container is simply used for adding a container query context — it doesn’t add any constraints.

+
wrapper / wrapper-xl — max 1600px
+
wrapper-lg — max 1280px
+
wrapper-md — max 960px
+
wrapper-sm — max 640px
+
wrapper-xs — max 320px
+

Labels (see decoration)

- + - +
+

Buttons

- - + + Link pseudo-button - - Link ghost pseudo-button + + Link ghost pseudo-button
-

Full width button inside a small wrapper

+

Full width button inside wrapper-sm

-

Grid layouts

-
-

A malleable grid without equalization set. on the cell widths. In this example, for sm up, columns will adopt whatever width they require for their content. CSS grid requires column placement classes to know where you want your columns, so that it can figure out how many columns you need.

+
+

Up to four column grid layouts

+

A malleable grid without setting equalization on cell widths. In this example, for sm up, columns will adopt whatever width they require for their content. Specify where you want your grid items using column placement classes — then CSS grid will figure out how many columns you need.

+

grid gap-1

-
-
sm:col-1 A narrow column
-
sm:col-2 This will be a wide column because it has a lot of content. This will be a wide column because it has a lot of content. This will be a wide column because it has a lot of content.
-
sm:col-3 Another narrow column
-
+
sm:col-1 A narrow column
+
sm:col-2 This will be a wide column because it has a lot of content. This will be a wide column because it has a lot of content. This will be a wide column because it has a lot of content.
+
sm:col-3 Another narrow column
-
+

Using equal- modifiers on the grid wrapper will both equalize column width and specify the number of columns. Then for simple layouts (e.g. galleries), you won’t need column placement classes.

+
grid sm:equal-2-cols gap-2 -
-
#
-
#
+
+
#
+
#
grid sm:equal-2-cols md:equal-3-cols gap-2 -
-
#
-
#
-
#
-
#
-
sm:col-span-2
+
+
#
+
#
+
#
+
#
+
sm:col-span-2
-grid sm:equal-4-cols gap-2 -
-
#
-
#
-
sm:col-span-2
-
sm:col-span-3
-
#
+

sm:grid takes effect at 640px up. Below 640px, gap-2 will have no effect.

+sm:grid sm:equal-4-cols gap-2 +
+
#
+
sm:col-span-2
+
sm:col-span-3
+
sm:col-4 sm:row-1 sm:row-span-2
-

Example components

-
-
-
-
- ☆ Information panel -
-
- ⚠ Warning alert panel. -
-
-
-
-
Card category
-
- -
-
-

Card title

-

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni rem animi quaerat accusantium illum architecto, nemo, ex harum voluptatum adipisci eum blanditiis dolorum.

-

Get this thing

-
-
-
+
+

Text sizes

+

See typography. t-lg simply enlarges by 1.325em. t-long-read and t-display involve a clamp().

+
+ + + + + + + + + + + + + + + +
Defaultt-lg wrappert-long-read wrappert-display wrapper
+

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+

Paragraph. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni rem animi quaerat accusantium illum architecto, nemo, ex harum voluptatum adipisci eum blanditiis dolorum. Natus debitis quisquam, expedita accusantium quos cumque?

+ 		+

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+

Paragraph. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni rem animi quaerat accusantium illum architecto, nemo, ex harum voluptatum adipisci eum blanditiis dolorum. Natus debitis quisquam, expedita accusantium quos cumque?

+ 		+

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+

Paragraph. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni rem animi quaerat accusantium illum architecto, nemo, ex harum voluptatum adipisci eum blanditiis dolorum. Natus debitis quisquam, expedita accusantium quos cumque?

+ 		+

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+

Paragraph. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni rem animi quaerat accusantium illum architecto, nemo, ex harum voluptatum adipisci eum blanditiis dolorum. Natus debitis quisquam, expedita accusantium quos cumque?

+
-

Example components using grid

-
-
-
-
-
- -
-
-
-

Media object

-

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni rem animi quaerat accusantium illum architecto, nemo, ex harum voluptatum adipisci eum blanditiis dolorum.

- -
-
-
-
-
-
-
-
-
- Form inputs etc. as grid items -
- - - - - -
-
-
-
-
-
-
- -
-
-

Media object

-

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni rem animi quaerat accusantium illum architecto, nemo, ex harum voluptatum adipisci eum blanditiis dolorum.

- -
-
-
-
-
-
-
-
-
- -
-
-
-

A “two-up” feature block

-

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni rem animi quaerat accusantium illum architecto, nemo, ex harum voluptatum adipisci eum blanditiis dolorum.

-

Discover more

-
-
-
-
-
-

Research article page layout using grid

-
+

Example “research article” page layout using grid

+
grid md:equal-3-cols lg:equal-4-cols gap-3
-
+
md:col-2 md:col-span-2

Title of This Article

-
- md:col-2 md:col-span-2 lg:col-4 lg:row-span-2 p-1 relative
+
+ md:col-2 md:col-span-2 lg:col-4 lg:row-span-2 relative
sticky top

On this page TOC

    -
  • Introduction
    • +
  • Abstract
    • +
  • Materials and Methods
  • Discussion
  • Conclusion
@@ -248,7 +199,9 @@

Research article
md:col-2 md:col-span-2 -

Introduction

+

Abstract

+

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni rem animi quaerat accusantium illum architecto, nemo, ex harum voluptatum adipisci eum blanditiis dolorum. Natus debitis quisquam, expedita accusantium quos cumque?

+

Materials and Methods

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni rem animi quaerat accusantium illum architecto, nemo, ex harum voluptatum adipisci eum blanditiis dolorum. Natus debitis quisquam, expedita accusantium quos cumque?

Discussion

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni rem animi quaerat accusantium illum architecto, nemo, ex harum voluptatum adipisci eum blanditiis dolorum. Natus debitis quisquam, expedita accusantium quos cumque?

@@ -256,7 +209,7 @@

Research article

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni rem animi quaerat accusantium illum architecto, nemo, ex harum voluptatum adipisci eum blanditiis dolorum. Natus debitis quisquam, expedita accusantium quos cumque?

-
+
md:col-1 md:row-1 md:rows-1-3 lg:rows-1-2

Navigation menu

    @@ -267,21 +220,22 @@

    Research article

+

Content-grid layouts

Title of this content-grid demo

-

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni rem animi quaerat accusantium illum architecto, nemo, ex harum voluptatum adipisci eum blanditiis dolorum. Natus debitis quisquam, expedita accusantium quos cumque?

+

content-grid is intended for long-form articles. Its 7-column grid places the content in column 4, where each immediate-child elment will be its own grid item. popout spans rows 3-5. expand spans rows 2-6. full-bleed spans rows 1-7.

Here’s a styled <p class="popout">:

-
+
☆ Information panel

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni rem animi quaerat accusantium illum architecto, nemo, ex harum voluptatum adipisci eum blanditiis dolorum. Natus debitis quisquam, expedita accusantium quos cumque?

Here’s a styled <div class="expand">:

-
-

This is a lot of example text that may or may not distort the aspect ratio (16×9) of this expand component.

-

See what it does on a small viewport width (e.g. phone).

+
+

This example text may or may not distort the 16×9 aspect ratio that has been given to this demo component.

+

The SVG image rectangle will be 1280px by 720px if your viewport is big enough. See what it does on a narrow viewport width (e.g. phone).

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni rem animi quaerat accusantium illum architecto, nemo, ex harum voluptatum adipisci eum blanditiis dolorum. Natus debitis quisquam, expedita accusantium quos cumque?

@@ -289,7 +243,113 @@

Title of this content-grid demo

full-bleed — expands to the full width of the avilable space. If there are no sidebars, it will reach the sides of the viewport.
+

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni rem animi quaerat accusantium illum architecto, nemo, ex harum voluptatum adipisci eum blanditiis dolorum. Natus debitis quisquam, expedita accusantium quos cumque?

+
+
+

Example components

+

Styled by utility classes.

+
+
+
+

Without *-dark-invert

+
+ ☆ Information panel +
+
+ ⚠ Warning alert panel. +
+

With *-dark-invert

+
+ ☆ Information panel +
+
+ ⚠ Warning alert panel. +
+
+
+
+
Card category
+
+ +
+
+

Card title

+

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni rem animi quaerat accusantium illum architecto, nemo, ex harum voluptatum adipisci eum blanditiis dolorum.

+

Get this thing

+
+
+
+
+
+
+
+
+
+
+ +
+
+
+

Flexbox media object

+

In this example, the media object “collapses” to a single column below container width 640px, using sm:flex. And below that width, the title and button are centered using t-center, which is overridden by sm:t-left.

+

+ +

+
+
+
+
+
+
+
+
+
+
+ Form inputs etc. as grid items +
+ + + + +
+ +
+
+
+
+
+
+
+
+ +
+
+

Grid media object

+

This example will behave as a grid for all container widths, even down to phones in portrait orientation.

+ +
+
+
+
+
+
+
+
+
+
+ +
+
+
+

A “two-up” feature block

+

In this exmple, the image is before the text content in the HTML. But for container width above 768px, the grid system places the image to the right (in the 2nd column). The text content is positioned vertical-center by flex flex-column flex-center

+

Discover more

+
+
+
+
+
- \ No newline at end of file + diff --git a/docs/forms/index.html b/docs/forms/index.html index 77b1de4..8641388 100644 --- a/docs/forms/index.html +++ b/docs/forms/index.html @@ -5,332 +5,337 @@ - Forms · Baselayer 3 CSS + Forms · Baselayer CSS - + - - - - + + - + -
-
+
- -
-
-
-
-
-

Forms

-
-
- - -
-
-

Baselayer form elements have simple background and focus styling (no default border).

+
+
+
+
+
+

Forms

+
+
+
+
+ +
+
+
+

Baselayer form elements have simple background and focus styling.

Notes:

  1. In Baselayer, form elements do not have set width. You can control widths them by one of two ways (same as for buttons): @@ -339,8 +344,9 @@

    Forms

  2. By involving the form elements as immediate children of flex layout or grid layout wrappers.
    3. +
  3. Form inputs (exclusing buttons) and textareas have a 1px solid border colored by :root { --b-form: var(--tc-base); }, so that the border will be the same as the default text color (near black on light theme, bear white on dark theme). This border color makes forms stand out more obvious as an interactive element.
  4. Form inputs, textareas, buttons, and the btn class, have font-size: inherit. This means their font sizes can be modified by any font-size class in Baselayer.
    5. -
  5. The font-family of form elements, buttons, and btn is controlled by var(--base) (default is sans-serif).
    6. +
  6. The font-family of form elements, buttons, and btn is controlled by var(--ff-base) (default is sans-serif).

Textual form input fields

@@ -435,6 +441,16 @@

Select and multi-select

+

List and datalist

+

+

+ + + + + + +

Text area (multiline)


@@ -496,54 +512,53 @@

Form buttons

See buttons for more information.

-
-
- - -
-
-
+ +
+
+ +
+
-
+ +
- \ No newline at end of file + diff --git a/docs/index.html b/docs/index.html index f2d9f3c..c1786d4 100644 --- a/docs/index.html +++ b/docs/index.html @@ -5,344 +5,349 @@ - Baselayer 3 · Baselayer 3 CSS + Getting started · Baselayer CSS - + - - - - + + - + -
-
+
- -
-
-
-
-
-

Baselayer 3 is a powerful, modern, tiny CSS library

-
-
- - -
-
-

Introduction

-

Designed as a good place to start, Baselayer may be all you need — for small static websites and blogs. Or you may use it as a baselayer to quick-start your mega project.

-

Ready to use as-is, Baselayer 3’s 22.65 KB (minified) stylesheet gives you all this:

+
+
+
+
+
+

Getting started with Baselayer

+
+
+
+
+ +
+
+
+

Introduction

+

Designed as a good place to start, Baselayer may be all you need for small projects such as static websites and blogs. Or you may use it as a baselayer to quick-start your mega project.

+

Ready to use as-is, Baselayer’s 22 KB (minified) stylesheet gives you all this:

  • A modern CSS reset
    • -
  • Foundational accessibility features
    • -
  • A lightweight system of utility classes for controlling dimensions, positioning, spacing, borders, text, images, and colors
    • -
  • Container-responsive typography and spacing
    • -
  • Since v.3.2.0: Container query responsive layouts using grid and flexbox
    • -
  • Styled form elements and buttons
    • -
  • Since v.3.3.0: A color-mix() based shade scale system of utilities for text, borders, and backgrounds
    • -
  • Built-in dark mode
    • -
  • Control of many of these things using CSS variables (a.k.a. custom properties)
    • +
  • Minimalist styled classless typographic, and form elements
    • +
  • Foundational accessibility features: outline based focus fings and a visually-hidden class
    • +
  • A lightweight system of utility classes for controlling dimensions, positioning, flexbox, spacing, borders, text, images, and colors
    • +
  • Container query responsive layouts using CSS grid
    • +
  • Responsive typography and spacing (margins, paddings, gaps) clases controlled by clamp()
    • +
  • A color-mix(in OKLCH) based shade scale system for utilities for text, borders, and backgrounds
    • +
  • Built-in dark mode using light-dark()
    • +
  • Control of many of these things using CSS var() (custom properties)
  • And more

Using several modern CSS technologies

@@ -352,17 +357,18 @@

Using several moder
  • Grid
  • Math functions (e.g. clamp)
  • Custom properties (variables)
    • -
  • Cascade layers
  • color-mix() function
    • +
  • light-dark() function
    • +
  • CSS class nesting
    • +
  • Cascade layers
    • -

    Therefore Baselayer supports only up-to-date (mid-2023 forward) “evergreen” web browsers (Safari, Firefox, Chrome, Edge, etc.).

    +

    Baselayer supports only up-to-date (2023 forward) baseline compatibility web browsers (Safari, Firefox, Chrome, Edge, etc.).

    Baselayer’s design philosophy

    The design philosophy behind the Baselayer CSS project is as follows:

    • Aim at being a good place to start — a baselayer for a web design project.
      • -
    • Being so small (22.65 KB), there’s less you need to overwrite in order to style it your own way (and most things in Baselayer can be restyles by CSS variables ). So, there’s no need for a purge process to remove a heavy payload of unused Baselayer styles.
      • +
    • Being so small (22 KB), there’s less you need to overwrite in order to style it your own way (and most things in Baselayer can be restyles by CSS variables). So, there’s no need for a purge process to remove a heavy payload of unused Baselayer styles.
    • PostCSS only — no need for Sass, Less, Stylus etc.
      • -
    • Plus, if you include the whole of baselayer.min.css along with your styles in a content management system (CMS), then you will still have it all available when you need to style simple components in the content editor.

    Built using PostCSS

    Baselayer is built using PostCSS and some plugins. The plugins used by Baselayer are:

    @@ -371,40 +377,49 @@

    Built using PostCSS

  • cssnano — to remove comments and minify the output baselayer.min.css

    • Note: neither postcss-preset-env nor autoprefixer have been used in Baselayer. And preprocessors such as Sass are not required.

    -

    Modern CSS reset

    +

    A modern CSS reset

    The Baselayer reset is a “best of both” combination of Josh W Comeau’s custom CSS reset and Andy Bell’s (more) modern CSS reset”.

    From that basis, Baselayer then takes care of the basics by setting some minimalist, easy-to-read typography, and styles for buttons and forms.

    -

    Basic accessibility features

    +

    Baselayer’s built-in accessibility features

    Baselayer has two “must have” accessibility features built-in.

    -

    (1.) Focus rings

    -

    (a.) Form focus ring:

    -

    For form inputs and buttons on :focus, there’s a 4px light blue ring (see colors). Example:

    - +

    (1.) Focus states

    +

    After experimenting and testing various focus state styles, I have decided to base Baselayer’s on the ones in the design systems of the UK National Health Service NHS.uk design system and the UK Government GOV.UK design system.

    +
      +
    1. +

      Links receive an amber background, black text and a thick black underline on :focus-visible — so that the element is clearly visible in a wide range of contexts.

      +
      2. +
    2. +

      Interacive elements such as form inputs, form buttons*, collapsible details, and elements with overflowing content[^1] have what looks like a yellow and black “double border” that appears on :focus (actually its created by an outline and a box shadow).

      +
      3. +
    +

    *Note: A <button> that is not within a <form>, and a <button type="button"> will not receive the :focus ring (but it will receive the ring on :focus-visible). Ths is true for most browsers except Safari: Safari does not show :focus rings on buttons, and it does not place tabbing focus on overflowing elements, or on the color-picker input.

    +

    These focus states are visible on a wide range of colored backgrounds, in both light and dark themes. (See also colors and accessibility.) A z-index raise has been added to prevent the focus ring tucking under a neighbouring item, e.g. in input/button groups.

    +

    Examples:

    +
    Example e-newsletter subscribe
    -

    The zero outline resets the browser defaults, while the box shadow provides the same style across different browsers. Box-shadow has been used so that the focus ring curves around the corners that have border-radius.

    -

    (b.) Button focus ring:

    -

    Buttons (<button>, <input type="button">, etc.) get the same focus ring as for other form inputs, but only for :focus-visible.

    -

    (c.) Link focus ring:

    -

    For links, collapsible <details>, pseudo-buttons (i.e. links styled with the btn class), and anything else that is not a form input or button, the focus ring is a 2px dotted black outline supported by a 2px solid white box shadow. This white will appear between the outline black dots, so that you get what loooks like alternating black and white dots.

    -

    Keyboard-tab through these links and buttons to see the accessibility rings:

    -
    -
    -
    +

    Keyboard-tab through these links and buttons to see the focus rings:

    +
    +
    +

    Link

    Link

    -

    +

    -
    +

    Link

    -

    +

    +
    +
    +

    Link

    +

    @@ -424,49 +439,48 @@

    (2.) The visually-hi </div> -

    -
    - - -
    -
    -
    + +
    +
    + +
    +
    -
    + +
    - \ No newline at end of file + diff --git a/docs/layout/index.html b/docs/layout/index.html index 7c079e6..6f20537 100644 --- a/docs/layout/index.html +++ b/docs/layout/index.html @@ -5,334 +5,344 @@ - Layout · Baselayer 3 CSS + Layout · Baselayer CSS - + - - - - + + - + -
    -
    +
    - -
    -
    -
    -
    -
    -

    Layout

    -
    -
    - - -
    -
    -
    - Since September 2023, all “evergreen” browsers (Chrome, Edge, Firefox, Safari) have capability for the new CSS Container Queries (see Can I use Container Queries). Baselayer 3.2.x has container query powered layouts to control flex, grid, and hidden utility classes. +
    +
    +
    +
    +
    +

    Layout

    +
    +
    +
    +
    + +
    +
    +
    +
    + Since September 2023, all “evergreen” browsers (Chrome, Edge, Firefox, Safari) have capability for the new CSS Container Queries (see Can I use Container Queries). So, Baselayer now has container query powered layouts to control flex, grid, and hidden utility classes.
    +

    Container query contexts

    +

    Since Baselayer v.3.4.0, The <body> tag now has container query context applied by container-type: inline-size.

    +

    There is also a container class whose role is to add another container query context wherever you need it.

    +

    There are no @media queries in Baseayer. Responsive flexbox, grid, and invisibility classes are all set using @container queries. Since the <body> tag now has container query context by default, these will all behave in much the same way as media-query controlled grid systems in other CSS libraries.

    +

    Spacing variables --s-2, --s-3, and --s-4, involve a clamp() that has its middle value set using cqi (container query percentile unit). These spacing variables are used on margin, padding, gap, and border radius utilities (see decoration utilities).

    Blocks

    • block — make an inline element behave as a block element
      • @@ -341,65 +351,56 @@

      Blocks

    • grid — see grid layouts

    Dimensions

    -

    Content wrappers

    +

    Wrappers (f.k.a. containers)

    Baselayer’s wrapper classes add a constrained layout width, inline margin (x-axis) auto centering, and side edge whitespace when the viewport width is at or narrower then the wrapper width.

    -
    Baselayer’s wrapper classes were previously known as container classes, copying the name from other CSS frameworks such as Bootstrap. But with Baselayer 3.2.x switching from @media queries to @container queries, a context-container was required for parent elements of container query controlled layout systems. Therefore, the container class is now specifically used for that purpose. See container query powered layouts. +
    Baselayer’s wrapper classes were formerly known as container classes, copying the name from other CSS frameworks such as Bootstrap. But after switching from @media queries to @container queries, a context-container was required for parent elements of container query controlled layout systems. Therefore, the Baselayer container class is now exclusively used for that purpose. See container query powered layouts.

    The centered layout wrapper is set up as follows:

    In variables.css:

    :root {
   --w-xl: 1600px;
-
-  --sp-2: clamp(1rem, 0.5rem + 1.25vw, 1.5rem);
-}
-
-/*
-Container query context
-*/
-.container {
-  --sp-2: clamp(1rem, 0.5rem + 1.25cqi, 1.5rem);  
+  --s-3: clamp(1rem, 0.5rem + 1.25cqi, 1.5rem);
 }
    -

    For viewport widths below --w-max side spacing is provided by --sp-2. This adds a negative space (whitespace) right and left of the wrapper, to prevent text being difficult to read when up against the sides of the viewport. --sp-2 involes viewport widths (vw), or container query widths (cqi) if the wrapper is places inside a container.

    +

    Wrapper side spacing is provided by --s-2 when the viewport width is less than --w-max. This adds 0.5rem (8px) negative space (whitespace) right and left of the wrapper, to prevent text being difficult to read when up against the sides of the viewport.

    In layout.css:

    .wrapper {
   --w-max: var(--w-xl);
-  width: min(100% - (var(--sp-2) * 2), var(--w-max));
+  width: min(100% - (var(--s-3) * 2), var(--w-max));
   margin-inline: auto;
 }
    -

    There are several wrapper width modifiers, same as the width modifiers — see below.

    +

    There are several wrapper utilities, with maximum widths same as the width utilities (see below).

    Widths

    320px intervals. w- classes will have widths 100% until their max width. wrapper- classes will have widths (100% minus side space) until their max width.

    The difference between width utilities and wrapper utilities is that wrappers have x-axis side padding and x-axis centering (see above).

      -
    • wrapper-xs / w-xs — max width 320px
      • -
    • wrapper-sm / w-sm — max width 640px
      • -
    • wrapper-md / w-md — max width 960px
      • -
    • wrapper-lg / w-lg — max width 1280px
      • -
    • wrapper-xl / w-xl — max width 1600px
      • -
    • wrapper — max width 1600px
      • +
    • wrapper-xs / w-max-xs — maximum width 320px
      • +
    • wrapper-sm / w-max-sm — maximum width 640px
      • +
    • wrapper-content / w-max-content — maximum width 40rem
      • +
    • wrapper-md / w-max-md — maximum width 960px
      • +
    • wrapper-lg / w-max-lg — maximum width 1280px
      • +
    • wrapper-xl / w-max-xl — maximum width 1600px
      • +
    • wrapper — maximum width 1600px
    -

    Both the -xs, -sm, -md, -lg, -xl wrapper and width utilities have their widths set using:

    -
    width: min(100%, {variable});
-
    -

    This means they will responsively expand to width 100% within the space available, until they max out at their set width variable.

    -

    Three more:

    +

    The -content width constraints max out at 40rem, giving a comfortable ~67 characters per line for paragraphs.

    +

    Four more:

      -
    • w-100% — width 100%
      • -
    • w-100vw — width 100vw
      • -
    • w-max-100vw — max-width 100vw
      • +
    • w-100% — width expands to 100% of available space
      • +
    • w-100vw — width expands to 100vw (viewport width)
      • +
    • w-max-100vw — width constrained to 100vw (viewport width)
      • +
    • w-fit-content — width constrained to content max-width (for “shrink wrapping”)

    Heights

      -
    • h-100% — height 100%, e.g. for making cards equal to the height of their wrapper
      • -
    • h-100dvh — height 100dvh, e.g. for making “full cover” panels
      • -
    • h-max-100dvh — max-height 100dvh, e.g. for tall sidebars (use h-max-100dvh with overflow-y)
      • +
    • h-100% — height expands to 100%, e.g. for making cards equal to the height of their wrapper
      • +
    • h-100dvh — height expands to 100dvh, e.g. for making “full cover” panels
      • +
    • h-max-100dvh — height constrained to 100dvh, e.g. for tall sidebars (use h-max-100dvh with overflow-y)
    -

    Baselayer uses 100dvh (dynamic viewport height) that gives a different viewport height for some devices — i.e. it compensates for the scroll-retracting interface toolbars on iOS Safari.

    +

    Baselayer uses 100dvh (dynamic viewport height) that gives a different viewport height for some devices — i.e. it compensates for the retracting interface toolbars on iOS Safari.

    Box

      -
    • box — expands an inner element using inset: 0 to fill the size of its wrapper (you must put relative on a box wrapper). Useful for setting up a panel (e.g. hero or card) background image with text overlay.
      • +
    • box — expands an inner element using inset: 0 to fill the size of its wrapper (you must put relative on the parent element of a box). Useful for setting up a panel (e.g. hero or card) background image with text overlay.

    Positions

      @@ -414,9 +415,9 @@

      Positions

    • z-2 — z-index: 2
    • z-3 — z-index: 3
    -

    For centering and middling, you also need flex.

    +

    For centering and middling, you will also need flex.

    Example:

    -
    +
    Top
    Right
    Bottom
    @@ -432,15 +433,15 @@

    Positions

    <div class="absolute right"> Right </div> - + <div class="absolute bottom"> Bottom </div> - + <div class="absolute left"> Left </div> - + <div class="absolute box flex flex-center flex-middle"> Centered and middled </div> @@ -448,56 +449,78 @@

    Positions

    </div>

    Container query powered layouts

    -

    Since Baselyer 3.2.x, flex, grid, and invisibility (hidden) utilities have @container variants that only work if they are wrapped in a container class, that provides the container query context:

    -
    .container {
-  container-type: inline-size;
-}
-
    -

    This container class does not constrain the outer element’s width in any way. You will need to control the widths of your content with e.g. wrapper or width utilities, or by placing the container within a grid cell, etc.

    -

    There are three @container variants for flex, grid, and hidden classes corresponding to prefix widths:

    +

    Since Baselayer 3.4.0, the <body> tag provides a container query context, using container-type: inline-size. Additionally you can set another (inner) container query context ising the container class.

    +
    The container class does not constrain the outer element’s width in any way. You may also need to control the widths of your content with e.g. wrapper or width utilities, or by placing the container within a grid cell, etc. +
    +

    There are four @container variants for flex, grid, and hidden classes corresponding to prefix widths:

      -
    • sm: (640px)
      • -
    • md: (960px)
      • -
    • lg: (1280px)
      • +
    • xs:* (512px)
      • +
    • sm:* (768px)
      • +
    • md:* (1024px)
      • +
    • lg:* (1280px)
    -
    - Layout classes with sm:, md:, and lg: prefixes do not work unless they are inside a container. +

    There are no xxs (256px), xl (1536px) or xxl (1672px) container queries in Baselayer.

    +

    Classes with container query variants are:

    +
      +
    1. block — block wrapper utilities
      2. +
    2. flex — flexbox wrapper utilities
      3. +
    3. grid — grid system wrapper utilities (using CSS Grid)
      4. +
    4. col and row — grid system column and row utilities
      5. +
    5. hidden — invisibility utilities
      6. +
    +

    (content-grid is not controlled by a container query).

    +

    Note: There are small demos of container query layouts on this page below, demonstrating flex, grid, and hidden classes each set within their own container — and they have an x-axis resizer, so that you can test them out and see how they work. The resizer is indicated by a dashed border and a resizer symbol in the bottom right corner. Here is an example resizer without a container query demo inside:

    +
    +
    Resizer symbol ↘
    -

    You can place the container class on e.g.:

    +

    Responsive blocks

      -
    • The <body> tag (so that the container query will behave the same as a media query)
      • -
    • Semantic layout sections, such as your page <header>, <main>, or <footer>
      • -
    • <div>’s of course
      • -
    • Nested within other container elements (e.g. so you can have sidebars or arrays of cards within your <main>)
      • -
    • And more.
      • +
    • xs:block / sm:block / md:block / lg:block
    -

    Supporting older browsers

    -

    What if you want to use Baselayer’s flex, grid and hidden clases but you really prefer media queries, or if you need to support pre-container query browsers?

    -

    Then all you need to do is find every instance of @container in layout.css and replace it with @media, and this will convert everything to media queries. (And then the container class will be redundant — you won’t need it.)

    -

    Container query demos

    -

    This entire documentation template is built using a full-width container query powered grid that takes effect when the viewport is at or above Baselayer’s md container query breakpoint (default ≥ 960px). Above md, the top navigation bar becomes the sidebar in column 1, with everything else in column 2.

    -

    The “everything else” area is organized in another grid within the same container context as the outer grid above, that becomes a two column grid when that container’s width is at lg or above (≥ 1280px). Then the table of contents (TOC) block is placed in column 2 of this inner grid (that appear to be the third column in the overall page layout).

    -

    So, the page layout deonstrates two grid layouts, one nested inside the other, and both are inside one outer container — they share the same container query context.

    -

    The main content (everything else below the title) is organised within a content-grid (that is not powered by a container query).

    -

    Also, there There are small demos of container query layouts on this page below, demonstrating flex, grid, and hidden classes all set within their own containers. Some of those demos have an x-axis resizer, so that you can test them out and see how they work. The resizer is indicated by a dashed border and a resizer symbol in the bottom right corner. Example resizer without a container query demo inside:

    -
    -
    Resize symbol ↘
    -
    -

    Flex layouts

    +

    These set display: block at and above the four container-responsive breakpoint widths. Use one of these utilities as an override when you only need some element to behave as a flex or a grid within a smaller width.

    +

    Example: in the template for this documentation, at body-container width 1024px and up (same as viewport width), the Baselayer logo and title in the used md:block to switch off the flex that’s required to push these to the left of the menubar. This push is not required when the menubar is a sidebar from md up.

    +

    Flex layouts

    Flexbox utilities for simple layout, menubars, pagination lists, cards, etc.

    • inline-flex — inline flexbox at all viewport widths
    • flex — flexbox at all viewport widths
    -

    Flex gaps

    +

    Example:

    +
    +
    One
    +
    Two
    +
    Three
    +
    Four
    +
    +
    <div class="flex">
+  <div>One</div>
+  <div>Two</div>
+  <div>Three</div>
+  <div>Four</div>
+</div>
+
    +

    Flex gaps

    gap-* — adds a horizontal and vertical gap (same as for grid layouts):

      -
    • gap-1 — --sp-1
      • -
    • gap-2 — --sp-2
      • -
    • gap-3 — --sp-3
      • -
    • gap-4 — --sp-4
      • +
    • gap-1 — --s-1
      • +
    • gap-2 — --s-2
      • +
    • gap-3 — --s-3
      • +
    • gap-4 — --s-4
    -

    Flex modifiers

    +
    +
    One
    +
    Two
    +
    Three
    +
    Four
    +
    +
    <div class="flex gap-2">
+  <div>One</div>
+  <div>Two</div>
+  <div>Three</div>
+  <div>Four</div>
+</div>
+
    +

    Flex modifiers

    • X-axis: flex-start / flex-center / flex-end
    • Y-axis: flex-top / flex-middle / flex-bottom
      • @@ -505,64 +528,108 @@

      Flex modifiers

    • flex-column — gives you flex-direction: column
    • flex-space-between — gives you justify-content: space-between
    • flex-grow-equal — makes grid item expand so that they occupy an equal fraction of the total width (or height, if used with flex-column)
      • -
    • flex-grow-auto — makes grid item expand so that they occupy an unequal fraction of the total width (or height, if used with flex-column): each expanding as required by their respective content.
      • +
    • flex-grow-auto — makes grid item expand so that they occupy an unequal fraction of the total width (or height, if used with flex-column). Each flex item will expand as required by its respective content.

    Note: the gaps have the same spacing CSS variables as margins and paddings.

    -

    Flex-item grow

    +
    +
    One
    +
    Two
    +
    Three
    +
    Four
    +
    +
    <div class="flex flex-grow-equal">
+  <div>One</div>
+  <div>Two</div>
+  <div>Three</div>
+  <div>Four</div>
+</div>
+
    +
    +
    One
    +
    Two
    +
    Three
    +
    Four
    +
    +
    <div class="flex flex-space-between">
+  <div>One</div>
+  <div>Two</div>
+  <div>Three</div>
+  <div>Four</div>
+</div>
+
    +
    +
    One
    +
    Two
    +
    Three
    +
    Four
    +
    +
    <div class="flex flex-column">
+  <div>One</div>
+  <div>Two</div>
+  <div>Three</div>
+  <div>Four</div>
+</div>
+
    +

    Flex-item grow

    • grow — gives you flex-grow: 1
    -
    -
    (no grow)
    -
    grow
    +
    +
    (no grow)
    +
    grow
    <div class="flex">
   <div></div>
   <div class="grow"></div>
 </div>
    -

    Flex and container queries

    -

    If you wrap the following in a container class, they will take effect at the following container widths up:

    +

    Flex and container queries

    +

    Baselayer has three @contaner controlled flex classes that will take effect at the following container widths up — use one of these instead of simply flex on your outer block element:

      -
    • sm:flex — flexbox at container width 640px and up
      • -
    • md:flex — flexbox at container width 960px and up
      • -
    • lg:flex — flexbox at container width 1280px and up
      • +
    • sm:grid — grid at container width 640px and up
      • +
    • md:grid — grid at container width 960px and up
      • +
    • lg:grid — grid at container width 1280px and up
    -

    Example using sm:flex (container query breakpoint width 640px):

    -
    +

    Example using a container outer with sm:flex (s: supplies container query breakpoint width 640px):

    +
    - 
    <div class="container">
-  <nav class="sm:flex gap-1 flex-end">
-    <a class="my-1 btn block" href="">Home</a>
-    <a class="my-1 btn block" href="">About</a>
-    <a class="my-1 btn block" href="">Blog</a>
-    <a class="my-1 btn block" href="">Contact</a>
+  <nav class="sm:flex gap-2 flex-end">
+    <a class="my-2 btn block" href="">Home</a>
+    <a class="my-2 btn block" href="">About</a>
+    <a class="my-2 btn block" href="">Blog</a>
+    <a class="my-2 btn block" href="">Contact</a>
   </nav>
 </div>

    In the example above, each button has a y-axis (block axis) margin, so that they still have whitepace gaps below the sm:flex breakpoint width.

    -

    Grid layouts

    -

    Setting up a grid

    +

    Grid layouts

    +

    Setting up a grid

    Controlling tracks at grid wrapper level:

      -
    • Grid — the grid class initializes the CSS grid. It only adds display: grid — it doesn’t provide information about how many columns you want, or what their widths will be. To control columns, use equal- classes on the grid wrapper, or control the position of grid items.
      • +
    • Grid — the grid class initializes the CSS grid. It only adds display: grid — it doesn’t provide information about how many columns you want, or what their widths will be. To control the number of columns, you either: +
        +
      • Use the explicit grid by adding equal- classes on the grid wrapper (see below); or
        • +
      • Use the implicit grid by controlling the position of grid items.
        • +
      +
    • Gap (optional) — adds vertical and horizontal whitespace (a.k.a. gutters) along internal grid tracks. See grid gaps.
    • Equal width grid cell control (optional) — equal-*-cols etc. specifies how many columns your layout has (2, 3, or 4), where each column width is equalized.
      • -
    • Dense packing (optional) — grid-dense can be used as a quick way to reorder grid items: packing so later items into earlier empty cells if there’s enough space for them. There is a dense packing example below, after where we have described per-item control.
      • +
    • Dense packing (optional) — grid-dense can be used as a quick way to reorder grid items: packing later items into earlier empty cells if there’s enough space for them. There is a dense packing example below, after where we have described per-item control.
    -

    Having 2, 3, or 4 CSS grid columns covers most use cases for the traditional 12 column grid system in webpage design. The Baselayer 3 grid can do all that and so much more.

    -
    -
    1
    -
    2
    -
    3
    +

    Having 2, 3, or 4 explicit CSS grid columns covers most use cases for the traditional 12 column grid system in webpage design. The Baselayer 3 grid can do all that, and so much more.

    +
    +
    1
    +
    2
    +
    3
    <div class="grid equal-3-cols">
   <div></div>
@@ -570,13 +637,13 @@ 
    Setting up a grid
    
   <div></div>
 </div>
    -

    If this is all you do to set up a grid, each grid item will automatically span one grid cell. If you have more grid items than set columns, the excess will wrap onto new row(s).

    -
    -
    1
    -
    2
    -
    3
    -
    4
    -
    5
    +

    If you do only this to set up a Baselayer grid, then each grid item will automatically occupy the next available grid cell and span one grid cell. If you have more grid items than set columns, the surplus will wrap onto new row(s).

    +
    +
    1
    +
    2
    +
    3
    +
    4
    +
    5
    <div class="grid equal-3-cols">
   <div></div>
@@ -586,24 +653,24 @@ 
    Setting up a grid
    
   <div></div>
 </div>
    -

    Grid gaps

    +

    Grid gaps

    • gap-* — adds a horizontal and vertical gap between grid cells, using the same spacing variables as for margins and paddings:
        -
      • gap-1 — --sp-1
        • -
      • gap-2 — --sp-2
        • -
      • gap-3 — --sp-3
        • -
      • gap-4 — --sp-4
        • +
      • gap-1 — using spaing variable --s-1
        • +
      • gap-2 — using spaing variable --s-2
        • +
      • gap-3 — using spaing variable --s-3
        • +
      • gap-4 — using spaing variable --s-4

    These same gap-* classes are used for flex layouts.

    -
    -
    1
    -
    2
    -
    3
    -
    4
    -
    5
    +
    +
    1
    +
    2
    +
    3
    +
    4
    +
    5
    <div class="grid equal-3-cols gap-2">
   <div></div>
@@ -613,16 +680,23 @@ 
    Grid gaps
    
   <div></div>
 </div>
    -

    Controlling grid items

    +

    Controlling grid items

    +

    If you want your grid items to simply be placed in adjacent cells and to span one cell each — and you wanted your columns to be equal width — then there's nothing else you need to do. E.g. this is sufficient for setting up a gallery that has 3 columns:

    +
    <div class="grid equal-3-cols">
+  <div>...</div>
+  <div>...</div>
+  <div>...</div>
+<div>
+

    Controlling positioning and spanning at per-grid-item level:

      +
    • Positioning (optional) — col-* and row-* etc. – for positioning each grid item over non-adjacent grid cells.
    • Spanning (optional) — col-span-* and row-span-*etc. – spanning 2, 3, or 4 columns or rows.
      • -
    • Positioning (optional) — col-* and row-* etc. – for positioning each grid item over the grid cells.

    CSS grid positions grid items automatically on the available grid cells — so an item will be placed on the next available cell until required to begin again on the next (i.e. new) row. You can use this automatic positioning to your advantage, allowing CSS grid to presume where you want your next item to be. As in the following simple example:

    -
    -
    1
    -
    columns 2 to 3
    +
    +
    1
    +
    columns 2 to 3
    <div class="grid equal-3-cols gap-2">
   <div></div>
@@ -630,12 +704,13 @@ 
    Controlling grid items
    
 </div>

    The col-span- and row-span- spanning classes can be used to make grid items to span up to 4 columns and/or 4 rows.

    -

    You can also control positioning by using the responsive col- and row- classes. In the following example, all we needed todo is specify that the third grid item should go on row-2 and the CSS grid automatically figured out that the fourth item should start in the next available grid cell — in column 3 of row 1:

    -
    -
    1
    -
    2
    -
    columns 1 to 2, row 2
    -
    columns 3 to 4, rows 1 to 2
    +

    The col- and row- positioning classes are used to instruct the grid which grid cell you want your grid item to be placed on (up to 4 columns and/or 4 rows).

    +

    Pairing spanning with positioning gives yo even more control. In the following example, we specified that item 3 should go on row-2 and the CSS grid automatically figured out that item 4 should start in the next available grid column (i.e. column 3):

    +
    +
    1
    +
    2
    +
    3
    +
    4
    <div class="grid equal-4-cols gap-1">
   <div>1</div>
@@ -644,15 +719,14 @@ 
    Controlling grid items
    
   <div class="col-span-2 row-span-2">columns 3 to 4, rows 1 to 2</div>
 </div>
    -

    The responsive col- and row- positioning classes are used to instruct the grid which grid cell you want your grid item to be placed on (up to 4 columns and/or 4 rows).

    -

    Grid items and dense packing

    +

    Grid items and dense packing

    When you control the positioning of grid items, you cam sometimes leave leave spaces of unoccupied cells. This is because CSS grid automatially tries to place the next item in the next available cell — it does not automatically back-fill any empty cells that you have left:

    -
    -
    Item 1
    -
    Item 2
    -
    Item 3
    -
    Item 4
    -
    Item 5
    +
    +
    Item 1
    +
    Item 2
    +
    Item 3
    +
    Item 4
    +
    Item 5
    <div class="grid gap-1 equal-4-cols">
   <div>Item 1</div>
@@ -663,35 +737,49 @@ 
    Grid items and dense packing
 </div>

    With the grid-dense modifier you can back-fill some or all of these unoccupied cells, by CSS grid reordering (rearranging) your grid items to fill in the spaces. Here’s the example above again, but with grid grid-dense:

    -
    -
    Item 1
    -
    Item 2
    -
    Item 3
    -
    Item 4
    -
    Item 5
    -
    -

    Grid and container queries

    -

    The Baselayer grid system has four tiers of container query breakpoint widths, for creating different grid layouts for different sized containers: all widths, sm:, md:, and lg:.

    +
    +
    Item 1
    +
    Item 2
    +
    Item 3
    +
    Item 4
    +
    Item 5
    +
    +
    <div class="grid gap-1 equal-4-cols grid-dense">
+  <div>Item 1</div>
+  <div class="col-1 col-span-2">Item 2</div>
+  <div class="col-2 col-span-3">Item 3</div>
+  <div class="col-4">Item 4</div>
+  <div class="col-3">Item 5</div>
+</div>
+
    +

    Grid and container queries

    +

    The Baselayer grid system has five tiers of container query breakpoint widths, for creating different grid layouts for different sized containers: all widths, sm:, md:, and lg:.

      -
    • Tier 1: grid layout effective at all container widths (including below 640px)
      • -
    • Tier 2: sm: grid layout effective at container widths 640px and up
      • -
    • Tier 3: md: grid layout effective at container widths 960px and up
      • -
    • Tier 4: lg: grid layout effective at container widths 1280px and up
      • +
    • Tier 0: grid layout effective at all container widths (including below 640px)
      • +
    • Tier 1: sm: grid layout effective at container widths 640px and up
      • +
    • Tier 2: md: grid layout effective at container widths 960px and up
      • +
    • Tier 3: lg: grid layout effective at container widths 1280px and up
    -

    These three breakpoint prefixes can be added to grid wrapper equal- classes (to specify that you want 2, 3, or 4 equalized columns at those container widths). And they can also be added to the per-item positioning and spanning classes. Meanwhile the grid, grid-dense, and gap-* classes cannot be controlled by breatkpoints — because they don’t need to be.

    -

    Note: the grid class is effective at all widths, therefore the gap-* class will still work all the way down.

    +

    These three breakpoint prefixes can be added to grid wrapper:

    +
      +
    • sm:grid — grid at container width 640px and up
      • +
    • md:grid — grid at container width 960px and up
      • +
    • lg:grid — grid at container width 1280px and up
      • +
    +

    Note: Below these breakpoints grid-dense and gap-* will not work, because they are dependant on CSS grid.

    +

    These three breakpoint prefixes can also be added to grid wrapper modifier equal- classes (to specify that you want 2, 3, or 4 equalized columns at those container widths). And they can also be added to the per-item positioning and spanning classes.

    The tier 1 grid system has no container query prefixes (and doesn’t need to be surrounded by a container) — it takes effect at all widths. This makes the tier 1 grid ideal for creating small icon galleries, or for making small media objects that you don’t want to “stack collapse” in narrow columns or on phones (e.g. social messaging or comment cards).

    The three responsive (container query powered) grid layout prefixes can be combined on the same HTML elements, so that you can create up to four different layouts on the same grid.

    Simple example: With just adding a container around your grid, and then width prefixes on equal- classes, this is all you need for setting up equal width items such as in image galleries, or sets of cards:

    -
    +
    -
    1
    -
    2
    -
    3
    -
    4
    -
    5
    -
    6
    +
    1
    +
    2
    +
    3
    +
    4
    +
    5
    +
    6
    @@ -707,7 +795,7 @@

    Grid and container queries

    Another example:

    -
    +
    @@ -722,7 +810,7 @@

    Grid and container queries

    A few more examples can be found in examples, where you can see how container query breakpoint width tiers can be used on grid items for positioning and spanning.

    -

    Invisibility (hidden) classes

    +

    Invisibility (hidden) classes

    There may be situation where you require some element(s) to be displayed on smaller or larger container widths, but hidden otherwise. Baselayer has:

    • sm:hidden — hides elements in containers with width 640px and up
      • @@ -732,24 +820,25 @@

      Invisibility (hidden) class
    • lg:hidden — hides elements in containers with width 1280px and up
    • lg:hidden-below — hides elements in containers with width below 1280px

    -
    +
    +
    - + - + - + @@ -759,7 +848,7 @@

    Invisibility (hidden) class

    @@ -769,17 +858,17 @@

    Invisibility (hidden) class

    - + @@ -789,7 +878,7 @@

    Invisibility (hidden) class

    @@ -799,7 +888,7 @@

    Invisibility (hidden) class

    @@ -809,28 +898,27 @@

    Invisibility (hidden) class

    Invisilility: ✓ = displayed; ✗ = hiddenInvisibility: ✓ = displayed; ✗ = hidden
    Class Example ≤639px 640px–959px960px–1280px960px–1279px ≥1280px
    sm:hidden-below -
    Example
    +
    Example
    		 ✗ ✓
    md:hidden-below -
    Example
    +
    Example
    		 ✗ ✗
    lg:hidden-below -
    Example
    +
    Example
    		 ✗ ✗ ✗ ✓
    sm:hidden -
    Example
    +
    Example
    		 ✓ ✗
    md:hidden -
    Example
    +
    Example
    		 ✓ ✓
    lg:hidden -
    Example
    +
    Example
    		 ✓ ✓
    +

    Content-grid

    -

    Note: content-grid is not a container query powered layout.

    -

    content-grid is intended for long-read (a.k.a. long-form) prose such as blog losts, news articles, and academic papers.

    -

    content-grid uses CSS Grid to set up a 7 column layout. The default behavior of content-grid will place your content in the middle (column 4), where it will have maximum width --w-cg = 40em. This max width will be 640px for the default font size (1rem = 16px) and 800px when used with t-long-read (see the long-lead utility class).

    -

    content-grid expects your content typographic blocks (headings, paragraphs, lists, tables, etc.), and the panel blocks below, to be its immediate children.

    +

    content-grid is intended for long-read (a.k.a. long-form) prose such as blog losts, news articles, and academic papers. Using a 7 column CSS Grid layout, the default behavior of content-grid will place your content in the middle (column 4), where it will have maximum width --w-cg = 768px. It expects your content typographic blocks (headings, paragraphs, lists, tables, etc.), and the panel blocks below, to be its immediate children.

    +
    Note: content-grid is not a container query powered layout.

    Popout panels

    -

    Use the popout utility class on an immediate child of content-grid to make an element span the middle 3 columns (3 to 5) instead of just column 4. Columns 3 and 5 have width --sp-2.

    +

    Use the popout utility class on an immediate child of content-grid to make an element span the middle 3 columns (3 to 5) instead of just column 4. Columns 3 and 5 have width --s-2.

    Example information panel using popout:

    -
    +
    ☆ Information panel
    -
    <div aria-label="Note" class="popout mb-2 bt-3 b-blue b-300 b-dark-invert r-2 p-2 t-black bg-gray bg-100 bg-dark-invert">
+
    <div aria-label="Note" class="popout mb-2 bt-heavy b-blue b-300 b-dark-invert rad-1 p-2 t-black bg-gray bg-100 bg-dark-invert">
   &star; Information panel
 </div>
 
    
 
    Expanded panels
    
-
    Sometimes you need to expand a panel more than as is done in the popout above. You can do this using the expand class, that makes an immediate child of container-grid to span the middle 5 columns (2 to 6).
    
+
    Sometimes you need to expand a panel more than as is done in the popout above. You can do this using the expand class, that makes an immediate child of container-grid to span the middle 5 columns (2 to 6). The expanded area has max-width equivalent to Baselayer var(--w-md) (1024px default).
    
 
    Example “poster” infographic panel using expand (and showing how Baselayer’s aspect ratio utilities work):
    
-
    
+
    
   
    
     
-    
    
+    
    
       
    
         
    This is a lot of example text that may or may not distort the aspect ratio (16×9) of this expand component.
    
         
    See what it does on a small viewport width (e.g. phone).
    
@@ -839,9 +927,9 @@ 
    Expanded panels
    
   
    
 
    
 
    A z-index positioning layer (e.g. z-1) is required to make the text overlay the image layer. (Alternatively, you can add another relative context.)
    
-
    <div class="expand mt-2 mb-3 aspect-ratio-16x9 flex flex-center flex-middle relative">
+
    <div class="expand mb-2 aspect-ratio-16x9 flex flex-center flex-middle relative">
   <svg>...</svg>
-  <div class="z-1 w-sm aspect-ratio-16x9 p-3">
+  <div class="z-1 w-max-sm aspect-ratio-16x9 p-3">
     <p class="h1 t-bold">This is a lot of example text that may or may not distort the aspect ratio (16×9) of this expand component.</p>
     <p class="h1 t-bold">See what it does on a small viewport width (e.g. phone).</p>
   </div>
@@ -849,10 +937,10 @@ 
    Expanded panels
    
 
    
 
    Full-bleed panels
    
 
    Use the full-bleed utility class to make an element span all 7 columns of a content-grid.
    
-
    Columns 1 and 7 (the first and last column) have a minimum width of --sp-2 — providing the middle columns with inline (x-axis) side whitespace.
    
+
    Columns 1 and 7 (the first and last column) have a minimum width of --s-2 — providing the middle columns with inline (x-axis) side whitespace.
    
 
    If your layout has no sidebars, side spacing (margin or padding), or other object that takes up some of the viewport width, then your content-grid full-bleed will expand to the full width of the viewport. But if it can’t get to the full viewport width, then it will expand to the available width (as seen in the docs example below).
    
 
    Example colored stripe using full-bleed:
    
-
    
+
    
  full-bleed — expands to the full width of the avilable space. If there are no sidebars, it will reach the sides of the viewport.
 
    
 
    <div class="full-bleed">
@@ -861,19 +949,19 @@ 
    Full-bleed panels
    
 
    
 
    Aspect ratios
    
 
    Common aspect ratio constraints for images, video, and hero blocks.
    
-
    
+
    
   
    
     
    
-      
    aspect-ratio-1x1
    
+      
    aspect-ratio-1x1
    
     
    
     
    
-      
    aspect-ratio-4x3
    
+      
    aspect-ratio-4x3
    
     
    
     
    
-      
    aspect-ratio-16x9
    
+      
    aspect-ratio-16x9
    
     
    
     
    
-      
    aspect-ratio-21x9
    
+      
    aspect-ratio-21x9
    
     
    
   
    
 
    
@@ -883,55 +971,72 @@ 
    Overflows
    
 
  • overflow-x — e.g. for wrapping tables with a lots of columns, that would break a template layout in small viewports
    • 
 
  • overflow-y — e.g. for sidebar menus loaded with content
    • 
 
+
    Overflow clip
    
+
      
+
    • overflow-clip — for hiding content that overflows your set dimensions on an element, and for preventing images to show in the corners of elements that have rounded corners.
      • 
+
    
+
    Floats
    
+
    
+  
    
+    
    This is an example of
     float-right
    
+  
    
+  
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corporis dolore quis iste fuga molestias necessitatibus. Autem quidem, consequuntur dicta illo rem nobis ratione vel? Cupiditate beatae similique nobis temporibus sequi rerum mollitia, saepe architecto ad, necessitatibus placeat repudiandae commodi laboriosam quos molestiae sed modi dignissimos nisi magni adipisci eligendi.
    
+
    
+
    
+  
    
+    
    This is an example of
     float-left
    
+  
    
+  
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corporis dolore quis iste fuga molestias necessitatibus. Autem quidem, consequuntur dicta illo rem nobis ratione vel? Cupiditate beatae similique nobis temporibus sequi rerum mollitia, saepe architecto ad, necessitatibus placeat repudiandae commodi laboriosam quos molestiae sed modi dignissimos nisi magni adipisci eligendi.
    
+
    
+
    There's also a clearfix class, if you need it.
    
 
-              
    
-
    - - -
    -
    -
    + +
    +
    + +
    +
    -
    + +
    - \ No newline at end of file + diff --git a/docs/typography/index.html b/docs/typography/index.html index 93e763b..11e3b8b 100644 --- a/docs/typography/index.html +++ b/docs/typography/index.html @@ -5,394 +5,358 @@ - Typography · Baselayer 3 CSS + Typography · Baselayer CSS - + - - - - + + - + -
    -
    +
    - -
    -
    -
    -
    -
    -

    Typography

    -
    -
    - - -
    -
    -

    Font stacks

    +
    +
    +
    +
    +
    +

    Typography

    +
    +
    +
    +
    + +
    +
    +
    +

    Font stacks

    A few native font stacks are set in the root-vars.css file.

    :root {
-  --t-sans: ui-sans-serif, system-ui, sans-serif;
-  --t-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
-  --t-mono: ui-monospace, Menlo, Consolas, "Courier New", monospace;
-
-  /* Alternative serif font stack (not used anywhere) */
-  --t-old-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
-
-  --t-base: var(--t-sans);
-  --t-prose: var(--t-serif);
+  --ff-sans: ui-sans-serif, system-ui, Arial, sans-serif;
+  --ff-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+  --ff-mono: ui-monospace, Menlo, Consolas, "Courier New", monospace;
+  --ff-base: var(--t-sans);
+  --ff-prose: var(--t-serif);
 }

    Everything here is an example, a place to start. Your own --base and --prose don’t need to be both sans-serif and serif. See setting font stacks for more information.

    -

    The Baselayer docs make use of JavaScript and some extra CSS to enable a demo toggle, so that you can switch between --base and --prose in this main content area.

    -

    - -

    +

    The Baselayer docs make use of JavaScript and some extra CSS to enable a demo toggle, so that you can switch between --base and --prose in this main content area — see main menu.

    Font stack usage in Baselayer:

      -
    • The base font stack is set in the <body> tag (in base.css) and via the t-base utility class.
      • -
    • The prose is only available via the t-prose utility class
      • +
    • The base font stack --ff-base is set in the <body> tag and via the t-base utility class. It is also set on form inputs and on heading tags (using --h-lh so that you can override all six headings at once).
      • +
    • The prose is only available via the t-prose utility class.
    • The monotype is available via the <code>, <kbd>, and <samp> HTML tags, and in the t-mono utility class.

    Setting font stacks

    In choosing your own font stacks, you will probably need two fonts that have similar x-height, so that you can set them using the same font size and line-height. Some other factors to compare are hights for lowercase ascenders and descenders, letter width, and stroke thickness.

    -

    If you prefer Baselayer’s ealier “Old Serif” font stack, this is still available in the variable --t-old-serif. You can easily revert to it by putting something like this in your own stylesheet:

    -
    .t-prose {
-  font-family: var(--t-old-serif);
-}
-

    If you want to stick with using native font stacks, the Modern Font Stacks website has several examples that you can easily copy.

    -

    In choosing your own typefaces from elsewhere, a good place to start is by pairing serif and sans-serif (or slab serif) fonts of the same typeface, if both are available. For example, Google Fonts has several typefaces to choose from, such as:

    -
      -
    • Alegreya and Alegreya Sans
      • -
    • IBM Plex and IBM Plex Sans
      • -
    • Inria Serif and Inria Sans
      • -
    • Noto Serif and Noto Sans
      • -
    • PT Serif and PT Sans
      • -
    • Roboto and Roboto Slab
      • -
    • Source Sans 3 and Source Serif 4
      • -
    -

    Google provides examples of how to use their fonts in your CSS, where the fallback for each is only e.g. sans-serif or serif. But it may be better to use Baselayer’s native font stack variables instead. For example:

    -
    @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital@0;1&display=swap');
-
-body {
-  /* Example from Google Fonts */
-  font-family: 'IBM Plex Serif', serif;
-
-  /* You can use this instead */
-  font-family: 'IBM Plex Serif', var(--t-serif);
-}
-
    +

    In choosing your own typefaces from elsewhere, a good place to start is by pairing serif and sans-serif (or slab serif) fonts of the same typeface, if both are available. Google Fonts has several such typefaces to choose from.

    In Baselayer, sizes and weights for the base and prose typefaces can optionally be set independently — but you will still want them to share the same line height. For using another set of sizes and weights for prose, you will need to do some un-commenting in two files: variables.css and typography.css.

    So, for example:

    -

    Typographic block elements

    -

    Most typographic blocks have zero top margin, and bottom margin set to the line height in rems using these two variables:

    -
    :root {
-  --lh: 1.5; /* Base lineheight (no unit) */
-  --mlh: calc(var(--lh) * 1rem); /* margin line height in rems */
+
    Base font size
    
+
    The default font size in Baselayer is 100% for small viewports, and bumped up to 112.5% from width 640px up (equivalent to Baselayer width variable sm).
    
+
    /* in variables.css */
+:root {
+  --fs-base: 100%;
+  --fs-bump: 112.5%;
+}
+
+/* in base.css */
+body{
+  container-type: inline-size;
+  font-family: var(--ff-base);
+  font-size: var(--fs-base);
+}
+@container (min-width: 640px) {
+  body > * {
+    font-size: var(--fs-bump);
+  }
 }
 
    
+
    (As this comfortable reading size hs now a default setting, the t-long-read class has been removed as no longer required.)
    
+
    Typographic block elements
    
+
    Most typographic blocks have zero top margin, and bottom margin set to var(--s-2) (1rem).
    
 
    Headings
    
 
    Example heading sizes (using utility classes, so that they don’t show up in the automatic table-of-contents generator):
    
 
    Heading h1
    
@@ -425,38 +405,33 @@ 
    Headings
    
 
    Heading h6
    
 
    All headings <h1> to <h6> and matching utility classes h1 to h6 have:
    
 
      
-
    • Headings font sizes set in the variables file. The typographic scale is 1.250 (major third), calculated using the Type Scale webapp.
      • 
-
    • Headings also have their font-family set using --hf: inherit. This has been done so that you can use the variable to override it. Your headings don’t need to be the same typeface as your paragraphs.
      • 
-
    • Headings font weight is set using --hfw: var(--bold) — which you can also override.
      • 
-
    • Headings line heights set using the formula 1em + 0.5rem. Meanwhile the bottom margin is the same as for paragraphs: the line-height of defaut text (1.5) made into rems (1.5rem), set by the variable --mlh. (When the default text size is 16px, the line height and margin-bottom of typographic block elements is 24px.)
      • 
-
    • Headings <h2> to <h6> and matching utility classes h2 to h6 also have top margins equal to their respective line heights (so H2 has a bigger top margin than H3, and so on)
      • 
+
    • Headings font sizes set in the variables file.
      • 
+
    • Headings also have their font-family set using --h-ff: inherit. This has been done so that you can use the variable to override it. So, your headings don’t need to be the same typeface as your paragraphs.
      • 
+
    • Headings font weight is set using --h-fw: var(--fwsemibold) — which you can also override.
      • 
+
    • Headings line heights set using the formula 1em + 0.5rem.
      • 
+
    • Headings have their bottom margin set the same as for paragraphs, var(t--mb). The top margin for <h2> thorugh <h6> is double that — except then used as immediate child items of the content-grid where the top margin is reduced to var(t--mb). This is because margin collapse is prevented by CSS grid. (And the top margin of <h2> is totally removed when it’s the first immediate child of a .content-grid.)
      • 
+
    • Matching utility classes h2 to h6 only affect font-size. These utilities do not include margin or font-weight styling.
      • 
 
    
 
    :root {
-  /* Heading font sizes */
-  --h1: 2.441em;
-  --h2: 1.953em;
-  --h3: 1.563em;
+  --h1: 2.25em;
+  --h2: 1.875em;
+  --h3: 1.5em;
   --h4: 1.25em;
-  --h5: 1em;
-  --h6: .8em;
-
-  /* headings font */
-  --hf: inherit;
-
-  /* headings font-weight */
-  --hfw: var(--bold);
-
-  /* headings line-height */
-  --hlh: calc(1em + 0.5rem);
+  --h5: 1.125em;
+  --h6: 1em;
+  --h-ff: inherit; /* headings font-family */
+  --h-fw: var(--fw-semibold);
+  --h-lh: calc(1em + 0.5rem);
+  --h-mt: calc(var(--t-mb) * 2);
 }
 
    
 
    Tips:
    
 
      
 
    1. In some contexts (e.g. in card components) you may not want any built-in spacing for typographic block elements. Then, you can remove margins by using the m-0 utility class.
      2. 
-
    2. You can also remove top margin “remotely” e.g. you can target the first item inside its wrapper using .your-wrapper:first-child { margin-top: 0; }, or the first sibling after the <header> or <h1> e.g. as I have done in these docs: .content-grid header + * { margin-top: 0; }. This takes care of any pages that start their content with an <h2> as the first element under the title (header) block.
      3. 
+
    3. You can also remove top margin “remotely” e.g. you can target the first item inside its wrapper using .your-wrapper:first-child { margin-top: 0; }, or the first sibling after the <header> or <h1> e.g. as I have done in Baselayer: .content-grid > h2:first-child { margin-top: 0; }.
      4. 
 
    
 
    Block quotes
    
-
    Baselayer styles <blockquote> tags with some inline (x-axis) padding, to give the effect of indentation. This inline padding is set using the responsive spacing variable --sp-3 so that it increases if there is more available width. Whitespace --sp-3 is either based on viewport width or container width, depending on context.
    
+
    Baselayer styles <blockquote> tags with some inline (x-axis) padding, to give the effect of indentation. This inline padding is set using the container-responsive spacing variable --s-3 so that it increases if there is more available width.
    
 
    Otherwise, blockquotes have the same as paragraph styling.
    
 
    
 
    Lorem ipsum dolor sit amet, adipiscing honestatis ius ut, nisl consulatu pro in. Imperdiet evertitur no usu, his te suavitate salutatus. Nullam ridens deterruisset an duo. Cum harum insolens ei, cum probo placerat praesent et.
    
@@ -520,17 +495,96 @@ 
    Lists
    
 </dl>
    -

    The default underline for links has been moved downwards slightly to improve legibility. The link decoration (underscore) thickness has been set at 1px, so that it doesn’t become thicker when used on larger text (e.g. in headings) where link underscores can be too bulky).

    -

    Link color is set by --tc-link, which is the Baselayer theme middle blue (see colors). The hover state is a shade darker.

    +

    The default underline for links has been moved downwards slightly to improve legibility. The link decoration (underline) thickness has been set at 1px, so that it doesn’t become thicker when used on larger text (e.g. in headings) where link underline can be too bulky). On :hover, the link text color becomes slightly darker and underline becomes thicker, increasing to 3px. All these styles are controlled by CSS variables so that you can change them.

    +

    Then there are the following two classes that apply to links, that may be handy in some situations:

    + +
    The browser default, and the best practice for accessability, is to have links indicated by an underline (and the default color of links is blue). But in the context of menus it is permissible to deviate from the best practice, provided there are other visual and non-visual indicators. This is the reason why we should use semantic HTML tags on menus, and and why we should place navigation menus in their expected locations (in sitewide menubar ribbons, sidebars, and footers.
    + +
      +
    • nav / <menu> / <menuitem>
      • +
    +

    The semantic <nav> tag has no styling of its own, other than its being a block element (similar to a div). Use it to organize your major navigation blocks of links (whether to other pages in your website, or “on this page”).

    +

    Semantic <menu> tags are treated by the browser as no different to an <ul>, but they are announced as a menu by screen readers. Baselayer gives <menu>, <ul>, and <ol> the same styling: some left padding and bottom margin (and you can remove these you don't require them, using spacing utility classes).

    +

    Using an <li> within a <menu> will give you bulletpoint block items. This will be OK for sidebars and dropdown menus, for example, but there’s also the <menuitem> tag. This is an inline tag (like a <span>), and it doesn’t come with a bulletpoint.

    +

    This is what you get if you add no styling, other than the Baselayer defaults (but you will want to add more styling):

    + +
    <nav>
+  <menu>
+    <menuitem><a href="">Menu item 1</a></menuitem>
+    <menuitem><a href="">Menu item 2</a></menuitem>
+    <menuitem><a href="">Menu item 3</a></menuitem>
+  </menu>
+</nav>
+
    +

    (Note: inside a <menuitem> can be a link, a button, or other interactive element in a user interface for a web application.)

    +

    If you want the group of links to not have underlines, or to have underlines only when hovered (because you intend to style them differently in your menu):

    +
      +
    • links-not-underlined
      • +
    • links-underlined-hover-only
      • +
    +

    And with a few other Baselayer utilities, you have a menubar:

    + +
    <nav>
+  <menu class="p-3 flex flex-wrap gap-4 bg-gray bg-100 bg-dark-invert links-not-underlined">
+    <menuitem><a href="">Menu item 1</a></menuitem>
+    <menuitem><a href="">Menu item 2</a></menuitem>
+    <menuitem><a href="">Menu item 3</a></menuitem>
+  </menu>
+</nav>
+
    +

    Or a menu for a sidebar or footer buffet:

    + +
    <menu class="pl-0 flex flex-column gap-3 links-underlined-hover-only">
+  <menuitem><a href="">Menu item 1</a></menuitem>
+  <menuitem><a href="">Menu item 2</a></menuitem>
+  <menuitem><a href="">Menu item 3</a></menuitem>
+</menu>
+
    +

    Text alignment

    +
      +
    • t-right, t-center, and t-left
      • +
    +

    In addition to the (default) text alignment classes above, Baselayer also has several container-query responsive variants, for xs:, sm:, md: and lg: container breakpoints widths.

    +

    Example: The hearing in the card below is left aligned by default, but becomes center aligned when its container is sm (640px) wide and above, using sm:t-center:

    +
    +
    +

    A title

    +

    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni rem animi quaerat accusantium illum architecto, nemo, ex harum voluptatum adipisci eum blanditiis dolorum. Natus debitis quisquam, expedita accusantium quos cumque?

    +
    +
    +

    For more information on Baselayer container queries, see contaner query contexts and container query powered layouts.

    Tables

    Baselayer tables are set using the .table class.

      -
    • Paddings are set by --p-cell (see decoration spacing extras)
    • Table headers <th> are bold.
    • Table cells <th> and <td> have a border set by var(--b-1) – the same detail as <hr> and border utility classes.
      • -
    • All cell content is left-aligned. You can change that on the whole <table> or on a per-cell basis using the text alignment classes.
      • +
    • Table cell paddings are set by --p-cell (see decoration spacing extras)
      • +
    • All cell content is left-aligned. You can change that on the whole <table> or on a per-cell basis using the text alignment classes.
      • +
    • Optional modifier table-grid will add the outline to all th and td cells.
    - +
    +
    @@ -562,6 +616,7 @@

    Tables

    This is a Table Caption
    +
    <table class="table">
   <caption>This is a Table Caption</caption>
   <thead>
@@ -582,9 +637,43 @@ 
    Tables
    
       <td>Table content 2.2</td>
       <td>Table content 3.2</td>
     </tr>
+    ...
   </tbody>
 </table>
    +

    With table table-grid:

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    This is a Table Caption
    Table Header 1Table Header 2Table Header 3
    Table content 1.1Table content 2.1Table content 3.1
    Table content 1.2Table content 2.2Table content 3.2
    Table content 1.3Table content 2.3Table content 3.3
    Table content 1.4Table content 2.4Table content 3.4

    Making wide tables responsive

    If you have a lot of content in your table, it will probably break your page layout on small viewports (e.g. phones). The simplest way to make a table “responsive” is to wrap your table in a DIV with the overflow-x class to make it horizontally scrollable.

    <div class="overflow-x">
@@ -593,143 +682,79 @@ 
    Making wide tables responsi
   </table>
 </div>
    -

    The long-lead utility class

    -

    Intended for long-read essays, articles and blog posts, the t-long-read utility class (used on a wrapping element around your article content) will enlarge all text, including any headings, depending on how much width is available.

    -

    The base font size is expanded to 125% over the middle range — for container widths 640px to 1280px (i.e. same as the sm to md default breakpoints). Starting from 1rem (16px), this expands the base sext size to 1.375rem (22px). This clamp() has been calculated using Petter Walbø Johnsgård’s Font-size Clamp Generator.

    -

    The default behavior of t-long-read is to be responsive to viewport width using the viewport width unit, vw. But the same t-long-read utility class if used inside a container (see container query powered layouts) will ramp up using the container query inline width unit, cqi.

    -

    These two CSS clamp variables are set in variables.css:

    -
    /*
-Default long-read
-*/
-:root {
-  --fs-long-read: clamp(1rem, 0.625rem + 0.9375vw, 1.375rem);
-}
-
-/*
-Container query powered long-read
-*/
-.container {
-  --fs-long-read: clamp(1rem, 0.625rem + 0.9375cqi, 1.375rem);
-}
-
    -

    The Baselayer docs make use of JavaScript and some extra CSS to enable a demo toggle, so that you can switch between normal and long-read font size in this main article column.

    -

    - -

    -

    Code blocks

    +

    Making text bigger

    +

    The base font size is 100% (usually 16px), bumping up to 112.5% (usually 18px) for more comfortable reading on tablet devices up.

    +

    Additionally:

    +
      +
    1. There’s a t-lg class that can be used to make text 1.325em — good for a lead paragraph or important messaging.
      2. +
    2. Classes .h1 through .h6 will resize text the same amount as for heading tag sizes — use when you want to make text larger (or large text smaller) without adversly affecting the SEO heading hierarchy.
      3. +
    3. The t-display wrapping class uses a clamp() to raise text from starting size 1.25em up to 1.625rem depending on container size — e.g. used for responsively increasing text size in hero components. An <h1> inside a t-display will have maximum font size 72px.
      4. +
    +

    The t-display text size clamp have been calculated using Petter Walbø Johnsgård’s Font-size Clamp Generator and changed to a container query width controlled cqi unit instead of viewport-width controlled vm.

    +

    Code

    <code> tags have monospaced text over a pale blue background (set by --cbgcode) with a little padding to improve readability.

    If the <code> tag is wrapped in a <pre> tag, then it becomes a block level element with more padding, a max-width of 100%, and y-axis overflow scrolling.

    Other typographic utility classes

    Besides those already introduced, Baselayer also has utility classes for:

      -
    • t-big — increase font size by 1.25em. Use it directly on a <p> to enlarge the font (e.g. for a lead paragraph). Note: don’t use t-big directly on a heading, because that will override the heading size. But you can use it on a wrapping element around a heading that you wish to enlarge (e.g. for a title or hero component).
      • -
    • t-small (or use the <small> HTML tag) — decrease font-size to 0.8em
      • +
    • t-lg — increase font size by 1.5em. Use it directly on a <p> to enlarge the font (e.g. for a lead paragraph).
      • +
    • t-sm (or use the <small> HTML tag) — decrease font-size to 0.8em
    • t-highlight (or use the <mark> HTML tag) — text highlighter
      • -
    • t-right, t-center, and t-left — text alignment
      • -
    • t-lighter, t-normal, t-semibold, t-bold, t-heavy — font weights
      • +
    • t-thin, t-normal, t-semibold, t-bold, t-heavy — font weights
    • t-italic — font style italic
    • t-balance — balances word-wrap, so that e.g. long headings don't have orphans
    • t-uppercase — text transform to capitals
      • -
    • t-noline — use to remove the underline (underscore) from links where having it may be inappropriate (e.g. in menus)
      • -
    • hover:t-line – make underline appear on hover (pair as t-noline hover:t-line on a link) -
        -
      • Example t-noline hover:t-line: example
        • -
      -
    • t-nowrap — prevents text wrapping (spaces behave as non-breaking spaces)
      • -
    • unlist — sets list-style-type: none on <ol>, <ul>, or <li>. You can use this when you want to use a list in a navigation menu. And you can combine it with p-0 to remove the list inset padding.

    Note: links can also be styled as though they are buttons using the btn utility class. See buttons.

    -

    Simple menus

    -

    If you wrap links in a <nav> tag, as you should do when creating a menu, then the links have their underscores removed. (So, there is no need to use noline inside a <nav> tag.)

    -

    Simple menus can created in this way, whether or not you involve an <ul> unordered list.

    -

    Example: simple links inside a <nav> (spacing controlled by flex layout):

    - -
    <nav class="p-2 flex flex-wrap gap-2 bg-gray bg-100 bg-dark-invert">
-  <a href="">Home</a>
-  <a href="">About</a>
-  <a href="">Contact</a>
-</nav>
-
    -

    Read more about Baselayer’s color utility classes.

    -

    Another example: a flex-column involving an unordered list:

    - -
    <nav class="b-1 p-2">
-  <ul class="unlist flex flex-column flex-wrap gap-2">
-    <li><a href="">Home</a></li>
-    <li><a href="">About</a></li>
-    <li><a href="">Contact</a></li>
-  </ul>
-</nav>
-
    -
    -
    - - -
    -
    -
    + +
    +
    + +
    +
    -
    + +
    - \ No newline at end of file + diff --git a/frontmatter.json b/frontmatter.json deleted file mode 100644 index 561c5b4..0000000 --- a/frontmatter.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "$schema": "https://frontmatter.codes/frontmatter.schema.json" -} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 847534a..92f6937 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,9 +12,9 @@ "@11ty/eleventy": "^2.0.1", "cssnano": "^6.0.1", "eleventy-plugin-toc": "^1.1.5", - "markdown-it": "^13.0.1", + "markdown-it": "^13.0.2", "markdown-it-anchor": "^8.6.7", - "postcss": "^8.4.24", + "postcss": "^8.4.31", "postcss-cli": "^10.1.0", "postcss-import": "^15.1.0" } @@ -111,9 +111,9 @@ } }, "node_modules/@11ty/eleventy-utils": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/@11ty/eleventy-utils/-/eleventy-utils-1.0.2.tgz", - "integrity": "sha512-Zy2leMK1DQR6Q6ZPSagv7QpJaAz9uVbb+RmVetYFp3foMeQtOSZx7w2u5daRFmP+PeNq9vO9H4xtBToYFWZwHA==", + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@11ty/eleventy-utils/-/eleventy-utils-1.0.3.tgz", + "integrity": "sha512-nULO91om7vQw4Y/UBjM8i7nJ1xl+/nyK4rImZ41lFxiY2d+XUz7ChAj1CDYFjrLZeu0utAYJTZ45LlcHTkUG4g==", "dev": true, "dependencies": { "normalize-path": "^3.0.0" @@ -140,28 +140,31 @@ } }, "node_modules/@babel/helper-string-parser": { - "version": "7.23.4", - "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.23.4.tgz", - "integrity": "sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==", + "version": "7.25.9", + "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz", + "integrity": "sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==", "dev": true, "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/helper-validator-identifier": { - "version": "7.22.20", - "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz", - "integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==", + "version": "7.25.9", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz", + "integrity": "sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==", "dev": true, "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/parser": { - "version": "7.23.5", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.5.tgz", - "integrity": "sha512-hOOqoiNXrmGdFbhgCzu6GiURxUgM27Xwd/aPuu8RfHEZPBzL1Z54okAHAQjXfcQNwvrlkAmAp4SlRTZ45vlthQ==", + "version": "7.26.2", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.2.tgz", + "integrity": "sha512-DWMCZH9WA4Maitz2q21SRKHo9QXZxkDsbNZoVD62gusNtNBBqDg9i7uOhASfTfIGNzW+O+r7+jAlM8dwphcJKQ==", "dev": true, + "dependencies": { + "@babel/types": "^7.26.0" + }, "bin": { "parser": "bin/babel-parser.js" }, @@ -170,14 +173,13 @@ } }, "node_modules/@babel/types": { - "version": "7.23.5", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.5.tgz", - "integrity": "sha512-ON5kSOJwVO6xXVRTvOI0eOnWe7VdUcIpsovGo9U/Br4Ie4UVFQTboO2cYnDhAGU6Fp+UxSiT+pMft0SMHfuq6w==", + "version": "7.26.0", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.0.tgz", + "integrity": "sha512-Z/yiTPj+lDVnF7lWeKCIJzaIkI0vYO87dMpZ4bg4TDrFe4XXLFWL1TbXU27gBP3QccxV9mZICCrnjnYlJjXHOA==", "dev": true, "dependencies": { - "@babel/helper-string-parser": "^7.23.4", - "@babel/helper-validator-identifier": "^7.22.20", - "to-fast-properties": "^2.0.0" + "@babel/helper-string-parser": "^7.25.9", + "@babel/helper-validator-identifier": "^7.25.9" }, "engines": { "node": ">=6.9.0" @@ -275,27 +277,27 @@ } }, "node_modules/@types/linkify-it": { - "version": "3.0.5", - "resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-3.0.5.tgz", - "integrity": "sha512-yg6E+u0/+Zjva+buc3EIb+29XEg4wltq7cSmd4Uc2EE/1nUVmxyzpX6gUXD0V8jIrG0r7YeOGVIbYRkxeooCtw==", + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-5.0.0.tgz", + "integrity": "sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==", "dev": true, "peer": true }, "node_modules/@types/markdown-it": { - "version": "13.0.7", - "resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-13.0.7.tgz", - "integrity": "sha512-U/CBi2YUUcTHBt5tjO2r5QV/x0Po6nsYwQU4Y04fBS6vfoImaiZ6f8bi3CjTCxBPQSO1LMyUqkByzi8AidyxfA==", + "version": "14.1.2", + "resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-14.1.2.tgz", + "integrity": "sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog==", "dev": true, "peer": true, "dependencies": { - "@types/linkify-it": "*", - "@types/mdurl": "*" + "@types/linkify-it": "^5", + "@types/mdurl": "^2" } }, "node_modules/@types/mdurl": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-1.0.5.tgz", - "integrity": "sha512-6L6VymKTzYSrEf4Nev4Xa1LCHKrlTlYCBMTlQKFuddo1CvQcE52I0mwfOJayueUC7MJuXOeHTcIU683lzd0cUA==", + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-2.0.0.tgz", + "integrity": "sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==", "dev": true, "peer": true }, @@ -418,15 +420,15 @@ "dev": true }, "node_modules/assert-never": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/assert-never/-/assert-never-1.2.1.tgz", - "integrity": "sha512-TaTivMB6pYI1kXwrFlEhLeGfOqoDNdTxjCdwRfFFkEA30Eu+k48W34nlok2EYWJfFFzqaEmichdNM7th6M5HNw==", + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/assert-never/-/assert-never-1.3.0.tgz", + "integrity": "sha512-9Z3vxQ+berkL/JJo0dK+EY3Lp0s3NtSnP3VCLsh5HDcZPrh0M+KQRK5sWhUeyPPH+/RCxZqOxLMR+YC6vlviEQ==", "dev": true }, "node_modules/async": { - "version": "3.2.5", - "resolved": "https://registry.npmjs.org/async/-/async-3.2.5.tgz", - "integrity": "sha512-baNZyqaaLhyLVKm/DlvdW051MSgO6b8eVfIezl9E5PqWxFgzLm/wQntEW4zOytVburDEr0JlALEpdOFwvErLsg==", + "version": "3.2.6", + "resolved": "https://registry.npmjs.org/async/-/async-3.2.6.tgz", + "integrity": "sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==", "dev": true }, "node_modules/babel-walk": { @@ -487,12 +489,15 @@ } }, "node_modules/binary-extensions": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", - "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz", + "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==", "dev": true, "engines": { "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" } }, "node_modules/boolbase": { @@ -512,21 +517,21 @@ } }, "node_modules/braces": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", - "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz", + "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==", "dev": true, "dependencies": { - "fill-range": "^7.0.1" + "fill-range": "^7.1.1" }, "engines": { "node": ">=8" } }, "node_modules/browserslist": { - "version": "4.22.1", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.22.1.tgz", - "integrity": "sha512-FEVc202+2iuClEhZhrWy6ZiAcRLvNMyYcxZ8raemul1DYVOVdFsbqckWLdsixQZCpJlwe77Z3UTalE7jsjnKfQ==", + "version": "4.24.2", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.2.tgz", + "integrity": "sha512-ZIc+Q62revdMcqC6aChtW4jz3My3klmCO1fEmINZY/8J3EpBg5/A/D0AKmBveUh6pgoeycoMkVMko84tuYS+Gg==", "dev": true, "funding": [ { @@ -543,10 +548,10 @@ } ], "dependencies": { - "caniuse-lite": "^1.0.30001541", - "electron-to-chromium": "^1.4.535", - "node-releases": "^2.0.13", - "update-browserslist-db": "^1.0.13" + "caniuse-lite": "^1.0.30001669", + "electron-to-chromium": "^1.5.41", + "node-releases": "^2.0.18", + "update-browserslist-db": "^1.1.1" }, "bin": { "browserslist": "cli.js" @@ -556,14 +561,19 @@ } }, "node_modules/call-bind": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.5.tgz", - "integrity": "sha512-C3nQxfFZxFRVoJoGKKI8y3MOEo129NQ+FgQ08iye+Mk4zNZZGdjfs06bVTr+DBSlA66Q2VEcMki/cUCP4SercQ==", + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz", + "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==", "dev": true, "dependencies": { + "es-define-property": "^1.0.0", + "es-errors": "^1.3.0", "function-bind": "^1.1.2", - "get-intrinsic": "^1.2.1", - "set-function-length": "^1.1.1" + "get-intrinsic": "^1.2.4", + "set-function-length": "^1.2.1" + }, + "engines": { + "node": ">= 0.4" }, "funding": { "url": "https://github.com/sponsors/ljharb" @@ -582,9 +592,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001565", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001565.tgz", - "integrity": "sha512-xrE//a3O7TP0vaJ8ikzkD2c2NgcVUvsEe2IvFTntV4Yd1Z9FVzh+gW+enX96L0psrbaFMcVcH2l90xNuGDWc8w==", + "version": "1.0.30001678", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001678.tgz", + "integrity": "sha512-RR+4U/05gNtps58PEBDZcPWTgEO2MBeoPZ96aQcjmfkBWRIDfN451fW2qyDA9/+HohLLIL5GqiMwA+IB1pWarw==", "dev": true, "funding": [ { @@ -627,21 +637,25 @@ } }, "node_modules/cheerio": { - "version": "1.0.0-rc.12", - "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.12.tgz", - "integrity": "sha512-VqR8m68vM46BNnuZ5NtnGBKIE/DfN0cRIzg9n40EIq9NOv90ayxLBXA8fXC5gquFRGJSTRqBq25Jt2ECLR431Q==", + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0.tgz", + "integrity": "sha512-quS9HgjQpdaXOvsZz82Oz7uxtXiy6UIsIQcpBj7HRw2M63Skasm9qlDocAM7jNuaxdhpPU7c4kJN+gA5MCu4ww==", "dev": true, "dependencies": { "cheerio-select": "^2.1.0", "dom-serializer": "^2.0.0", "domhandler": "^5.0.3", - "domutils": "^3.0.1", - "htmlparser2": "^8.0.1", - "parse5": "^7.0.0", - "parse5-htmlparser2-tree-adapter": "^7.0.0" + "domutils": "^3.1.0", + "encoding-sniffer": "^0.2.0", + "htmlparser2": "^9.1.0", + "parse5": "^7.1.2", + "parse5-htmlparser2-tree-adapter": "^7.0.0", + "parse5-parser-stream": "^7.1.2", + "undici": "^6.19.5", + "whatwg-mimetype": "^4.0.0" }, "engines": { - "node": ">= 6" + "node": ">=18.17" }, "funding": { "url": "https://github.com/cheeriojs/cheerio?sponsor=1" @@ -665,16 +679,10 @@ } }, "node_modules/chokidar": { - "version": "3.5.3", - "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", - "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==", + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz", + "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==", "dev": true, - "funding": [ - { - "type": "individual", - "url": "https://paulmillr.com/funding/" - } - ], "dependencies": { "anymatch": "~3.1.2", "braces": "~3.0.2", @@ -687,6 +695,9 @@ "engines": { "node": ">= 8.10.0" }, + "funding": { + "url": "https://paulmillr.com/funding/" + }, "optionalDependencies": { "fsevents": "~2.3.2" } @@ -769,12 +780,12 @@ } }, "node_modules/css-declaration-sorter": { - "version": "6.4.1", - "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.4.1.tgz", - "integrity": "sha512-rtdthzxKuyq6IzqX6jEcIzQF/YqccluefyCYheovBOLhFT/drQA9zj/UbRAa9J7C0o6EG6u3E6g+vKkay7/k3g==", + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-7.2.0.tgz", + "integrity": "sha512-h70rUM+3PNFuaBDTLe8wF/cdWu+dOZmb7pJt8Z2sedYbAcQVQV/tEchueg3GWxwqS0cxtbxmaHEdkNACqcvsow==", "dev": true, "engines": { - "node": "^10 || ^12 || >=14" + "node": "^14 || ^16 || >=18" }, "peerDependencies": { "postcss": "^8.0.9" @@ -834,13 +845,13 @@ } }, "node_modules/cssnano": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-6.0.1.tgz", - "integrity": "sha512-fVO1JdJ0LSdIGJq68eIxOqFpIJrZqXUsBt8fkrBcztCQqAjQD51OhZp7tc0ImcbwXD4k7ny84QTV90nZhmqbkg==", + "version": "6.1.2", + "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-6.1.2.tgz", + "integrity": "sha512-rYk5UeX7VAM/u0lNqewCdasdtPK81CgX8wJFLEIXHbV2oldWRgJAsZrdhRXkV1NJzA2g850KiFm9mMU2HxNxMA==", "dev": true, "dependencies": { - "cssnano-preset-default": "^6.0.1", - "lilconfig": "^2.1.0" + "cssnano-preset-default": "^6.1.2", + "lilconfig": "^3.1.1" }, "engines": { "node": "^14 || ^16 || >=18.0" @@ -850,62 +861,63 @@ "url": "https://opencollective.com/cssnano" }, "peerDependencies": { - "postcss": "^8.2.15" + "postcss": "^8.4.31" } }, "node_modules/cssnano-preset-default": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/cssnano-preset-default/-/cssnano-preset-default-6.0.1.tgz", - "integrity": "sha512-7VzyFZ5zEB1+l1nToKyrRkuaJIx0zi/1npjvZfbBwbtNTzhLtlvYraK/7/uqmX2Wb2aQtd983uuGw79jAjLSuQ==", - "dev": true, - "dependencies": { - "css-declaration-sorter": "^6.3.1", - "cssnano-utils": "^4.0.0", - "postcss-calc": "^9.0.0", - "postcss-colormin": "^6.0.0", - "postcss-convert-values": "^6.0.0", - "postcss-discard-comments": "^6.0.0", - "postcss-discard-duplicates": "^6.0.0", - "postcss-discard-empty": "^6.0.0", - "postcss-discard-overridden": "^6.0.0", - "postcss-merge-longhand": "^6.0.0", - "postcss-merge-rules": "^6.0.1", - "postcss-minify-font-values": "^6.0.0", - "postcss-minify-gradients": "^6.0.0", - "postcss-minify-params": "^6.0.0", - "postcss-minify-selectors": "^6.0.0", - "postcss-normalize-charset": "^6.0.0", - "postcss-normalize-display-values": "^6.0.0", - "postcss-normalize-positions": "^6.0.0", - "postcss-normalize-repeat-style": "^6.0.0", - "postcss-normalize-string": "^6.0.0", - "postcss-normalize-timing-functions": "^6.0.0", - "postcss-normalize-unicode": "^6.0.0", - "postcss-normalize-url": "^6.0.0", - "postcss-normalize-whitespace": "^6.0.0", - "postcss-ordered-values": "^6.0.0", - "postcss-reduce-initial": "^6.0.0", - "postcss-reduce-transforms": "^6.0.0", - "postcss-svgo": "^6.0.0", - "postcss-unique-selectors": "^6.0.0" + "version": "6.1.2", + "resolved": "https://registry.npmjs.org/cssnano-preset-default/-/cssnano-preset-default-6.1.2.tgz", + "integrity": "sha512-1C0C+eNaeN8OcHQa193aRgYexyJtU8XwbdieEjClw+J9d94E41LwT6ivKH0WT+fYwYWB0Zp3I3IZ7tI/BbUbrg==", + "dev": true, + "dependencies": { + "browserslist": "^4.23.0", + "css-declaration-sorter": "^7.2.0", + "cssnano-utils": "^4.0.2", + "postcss-calc": "^9.0.1", + "postcss-colormin": "^6.1.0", + "postcss-convert-values": "^6.1.0", + "postcss-discard-comments": "^6.0.2", + "postcss-discard-duplicates": "^6.0.3", + "postcss-discard-empty": "^6.0.3", + "postcss-discard-overridden": "^6.0.2", + "postcss-merge-longhand": "^6.0.5", + "postcss-merge-rules": "^6.1.1", + "postcss-minify-font-values": "^6.1.0", + "postcss-minify-gradients": "^6.0.3", + "postcss-minify-params": "^6.1.0", + "postcss-minify-selectors": "^6.0.4", + "postcss-normalize-charset": "^6.0.2", + "postcss-normalize-display-values": "^6.0.2", + "postcss-normalize-positions": "^6.0.2", + "postcss-normalize-repeat-style": "^6.0.2", + "postcss-normalize-string": "^6.0.2", + "postcss-normalize-timing-functions": "^6.0.2", + "postcss-normalize-unicode": "^6.1.0", + "postcss-normalize-url": "^6.0.2", + "postcss-normalize-whitespace": "^6.0.2", + "postcss-ordered-values": "^6.0.2", + "postcss-reduce-initial": "^6.1.0", + "postcss-reduce-transforms": "^6.0.2", + "postcss-svgo": "^6.0.3", + "postcss-unique-selectors": "^6.0.4" }, "engines": { "node": "^14 || ^16 || >=18.0" }, "peerDependencies": { - "postcss": "^8.2.15" + "postcss": "^8.4.31" } }, "node_modules/cssnano-utils": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-4.0.0.tgz", - "integrity": "sha512-Z39TLP+1E0KUcd7LGyF4qMfu8ZufI0rDzhdyAMsa/8UyNUU8wpS0fhdBxbQbv32r64ea00h4878gommRVg2BHw==", + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-4.0.2.tgz", + "integrity": "sha512-ZR1jHg+wZ8o4c3zqf1SIUSTIvm/9mU343FMR6Obe/unskbvpGhZOo1J6d/r8D1pzkRQYuwbcH3hToOuoA2G7oQ==", "dev": true, "engines": { "node": "^14 || ^16 || >=18.0" }, "peerDependencies": { - "postcss": "^8.2.15" + "postcss": "^8.4.31" } }, "node_modules/csso": { @@ -942,12 +954,12 @@ "dev": true }, "node_modules/debug": { - "version": "4.3.4", - "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", - "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==", + "version": "4.3.7", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz", + "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==", "dev": true, "dependencies": { - "ms": "2.1.2" + "ms": "^2.1.3" }, "engines": { "node": ">=6.0" @@ -959,17 +971,20 @@ } }, "node_modules/define-data-property": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.1.tgz", - "integrity": "sha512-E7uGkTzkk1d0ByLeSc6ZsFS79Axg+m1P/VsgYsxHgiuc3tFSj+MjMIwe90FC4lOAZzNBdY7kkO2P2wKdsQ1vgQ==", + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz", + "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==", "dev": true, "dependencies": { - "get-intrinsic": "^1.2.1", - "gopd": "^1.0.1", - "has-property-descriptors": "^1.0.0" + "es-define-property": "^1.0.0", + "es-errors": "^1.3.0", + "gopd": "^1.0.1" }, "engines": { "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" } }, "node_modules/dependency-graph": { @@ -1073,9 +1088,9 @@ "dev": true }, "node_modules/ejs": { - "version": "3.1.9", - "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.9.tgz", - "integrity": "sha512-rC+QVNMJWv+MtPgkt0y+0rVEIdbtxVADApW9JXrUVlzHetgcyczP/E7DJmWJ4fJCZF2cPcBk0laWO9ZHMG3DmQ==", + "version": "3.1.10", + "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.10.tgz", + "integrity": "sha512-UeJmFfOrAQS8OJWPZ4qtgHyWExa088/MtK5UEyoJGFH67cDEXkZSviOiKRCZ4Xij0zxI3JECgYs3oKx+AizQBA==", "dev": true, "dependencies": { "jake": "^10.8.5" @@ -1088,9 +1103,9 @@ } }, "node_modules/electron-to-chromium": { - "version": "1.4.597", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.597.tgz", - "integrity": "sha512-0XOQNqHhg2YgRVRUrS4M4vWjFCFIP2ETXcXe/0KIQBjXE9Cpy+tgzzYfuq6HGai3hWq0YywtG+5XK8fyG08EjA==", + "version": "1.5.52", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.52.tgz", + "integrity": "sha512-xtoijJTZ+qeucLBDNztDOuQBE1ksqjvNjvqFoST3nGC7fSpqJ+X6BdTBaY5BHG+IhWWmpc6b/KfpeuEDupEPOQ==", "dev": true }, "node_modules/eleventy-plugin-toc": { @@ -1109,14 +1124,27 @@ "dev": true }, "node_modules/encodeurl": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", - "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==", + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz", + "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==", "dev": true, "engines": { "node": ">= 0.8" } }, + "node_modules/encoding-sniffer": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/encoding-sniffer/-/encoding-sniffer-0.2.0.tgz", + "integrity": "sha512-ju7Wq1kg04I3HtiYIOrUrdfdDvkyO9s5XM8QAj/bN61Yo/Vb4vgJxy5vi4Yxk01gWHbrofpPtpxM8bKger9jhg==", + "dev": true, + "dependencies": { + "iconv-lite": "^0.6.3", + "whatwg-encoding": "^3.1.1" + }, + "funding": { + "url": "https://github.com/fb55/encoding-sniffer?sponsor=1" + } + }, "node_modules/entities": { "version": "4.5.0", "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz", @@ -1141,10 +1169,31 @@ "errno": "cli.js" } }, + "node_modules/es-define-property": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz", + "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==", + "dev": true, + "dependencies": { + "get-intrinsic": "^1.2.4" + }, + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/es-errors": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz", + "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==", + "dev": true, + "engines": { + "node": ">= 0.4" + } + }, "node_modules/escalade": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz", - "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==", + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz", + "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==", "dev": true, "engines": { "node": ">=6" @@ -1210,9 +1259,9 @@ } }, "node_modules/fastq": { - "version": "1.15.0", - "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.15.0.tgz", - "integrity": "sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==", + "version": "1.17.1", + "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz", + "integrity": "sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==", "dev": true, "dependencies": { "reusify": "^1.0.4" @@ -1249,9 +1298,9 @@ } }, "node_modules/fill-range": { - "version": "7.0.1", - "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", - "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz", + "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==", "dev": true, "dependencies": { "to-regex-range": "^5.0.1" @@ -1261,13 +1310,13 @@ } }, "node_modules/finalhandler": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz", - "integrity": "sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==", + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.1.tgz", + "integrity": "sha512-6BN9trH7bp3qvnrRyzsBz+g3lZxTNZTbVO2EV1CS0WIcDbawYVdYvGflME/9QP0h0pYlCDBCTjYa9nZzMDpyxQ==", "dev": true, "dependencies": { "debug": "2.6.9", - "encodeurl": "~1.0.2", + "encodeurl": "~2.0.0", "escape-html": "~1.0.3", "on-finished": "2.4.1", "parseurl": "~1.3.3", @@ -1346,16 +1395,20 @@ } }, "node_modules/get-intrinsic": { - "version": "1.2.2", - "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.2.tgz", - "integrity": "sha512-0gSo4ml/0j98Y3lngkFEot/zhiCeWsbYIlZ+uZOVgzLyLaUw7wxUL+nCTP0XJvJg1AXulJRI3UJi8GsbDuxdGA==", + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz", + "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==", "dev": true, "dependencies": { + "es-errors": "^1.3.0", "function-bind": "^1.1.2", "has-proto": "^1.0.1", "has-symbols": "^1.0.3", "hasown": "^2.0.0" }, + "engines": { + "node": ">= 0.4" + }, "funding": { "url": "https://github.com/sponsors/ljharb" } @@ -1376,6 +1429,7 @@ "version": "7.2.3", "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz", "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==", + "deprecated": "Glob versions prior to v9 are no longer supported", "dev": true, "dependencies": { "fs.realpath": "^1.0.0", @@ -1505,21 +1559,21 @@ } }, "node_modules/has-property-descriptors": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.1.tgz", - "integrity": "sha512-VsX8eaIewvas0xnvinAe9bw4WfIeODpGYikiWYLH+dma0Jw6KHYqWiWfhQlgOVK8D6PvjubK5Uc4P0iIhIcNVg==", + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz", + "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==", "dev": true, "dependencies": { - "get-intrinsic": "^1.2.2" + "es-define-property": "^1.0.0" }, "funding": { "url": "https://github.com/sponsors/ljharb" } }, "node_modules/has-proto": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.1.tgz", - "integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==", + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.3.tgz", + "integrity": "sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==", "dev": true, "engines": { "node": ">= 0.4" @@ -1541,12 +1595,12 @@ } }, "node_modules/has-tostringtag": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz", - "integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==", + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz", + "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==", "dev": true, "dependencies": { - "has-symbols": "^1.0.2" + "has-symbols": "^1.0.3" }, "engines": { "node": ">= 0.4" @@ -1556,9 +1610,9 @@ } }, "node_modules/hasown": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.0.tgz", - "integrity": "sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==", + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz", + "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==", "dev": true, "dependencies": { "function-bind": "^1.1.2" @@ -1568,9 +1622,9 @@ } }, "node_modules/htmlparser2": { - "version": "8.0.2", - "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.2.tgz", - "integrity": "sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==", + "version": "9.1.0", + "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-9.1.0.tgz", + "integrity": "sha512-5zfg6mHUoaer/97TxnGpxmbR7zJtPwIYFMZ/H5ucTlPZhKvtum05yiPK3Mgai3a0DyVxv7qYqoweaEd2nrYQzQ==", "dev": true, "funding": [ "https://github.com/fb55/htmlparser2?sponsor=1", @@ -1582,8 +1636,8 @@ "dependencies": { "domelementtype": "^2.3.0", "domhandler": "^5.0.3", - "domutils": "^3.0.1", - "entities": "^4.4.0" + "domutils": "^3.1.0", + "entities": "^4.5.0" } }, "node_modules/http-equiv-refresh": { @@ -1595,10 +1649,22 @@ "node": ">= 0.10" } }, + "node_modules/iconv-lite": { + "version": "0.6.3", + "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz", + "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==", + "dev": true, + "dependencies": { + "safer-buffer": ">= 2.1.2 < 3.0.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/ignore": { - "version": "5.3.0", - "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.0.tgz", - "integrity": "sha512-g7dmpshy+gD7mh88OC9NwSGTKoc3kyLAZQRU1mt53Aw/vnvfXnbC+F/7F7QoYVKbV+KNvJx8wArewKy1vXMtlg==", + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz", + "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==", "dev": true, "engines": { "node": ">= 4" @@ -1608,6 +1674,7 @@ "version": "1.0.6", "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==", + "deprecated": "This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.", "dev": true, "dependencies": { "once": "^1.3.0", @@ -1657,12 +1724,15 @@ } }, "node_modules/is-core-module": { - "version": "2.13.1", - "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz", - "integrity": "sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==", + "version": "2.15.1", + "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.15.1.tgz", + "integrity": "sha512-z0vtXSwucUJtANQWldhbtbt7BnL0vxiFjIdDLAatwhDYty2bad6s+rijD6Ri4YuYJubLzIJLUidCh09e1djEVQ==", "dev": true, "dependencies": { - "hasown": "^2.0.0" + "hasown": "^2.0.2" + }, + "engines": { + "node": ">= 0.4" }, "funding": { "url": "https://github.com/sponsors/ljharb" @@ -1780,9 +1850,9 @@ } }, "node_modules/jake": { - "version": "10.8.7", - "resolved": "https://registry.npmjs.org/jake/-/jake-10.8.7.tgz", - "integrity": "sha512-ZDi3aP+fG/LchyBzUM804VjddnwfSfsdeYkwt8NcbKRvo4rFkjhs456iLFn3k2ZUWvNe4i48WACDbza8fhq2+w==", + "version": "10.9.2", + "resolved": "https://registry.npmjs.org/jake/-/jake-10.9.2.tgz", + "integrity": "sha512-2P4SQ0HrLQ+fw6llpLnOaGAvN2Zu6778SJMrCUwns4fOoG9ayrTiZk3VV8sCPkVZF8ab0zksVpS8FDY5pRCNBA==", "dev": true, "dependencies": { "async": "^3.2.3", @@ -1866,12 +1936,15 @@ } }, "node_modules/lilconfig": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz", - "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==", + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.2.tgz", + "integrity": "sha512-eop+wDAvpItUys0FWkHIKeC9ybYrTGbU41U5K7+bttZZeohvnY7M9dZ5kB21GNWiFT2q1OoPTvncPCgSOVO5ow==", "dev": true, "engines": { - "node": ">=10" + "node": ">=14" + }, + "funding": { + "url": "https://github.com/sponsors/antonk52" } }, "node_modules/linkify-it": { @@ -1884,9 +1957,9 @@ } }, "node_modules/liquidjs": { - "version": "10.9.4", - "resolved": "https://registry.npmjs.org/liquidjs/-/liquidjs-10.9.4.tgz", - "integrity": "sha512-E7SmGMwhv0Pa1Yau6odd2EgNPAmrx1OOjzvpm9AFxBGVtCX2Bx4fOCDtDCML13L7g6zjLPN7Kb/kakyAl2HTPQ==", + "version": "10.18.0", + "resolved": "https://registry.npmjs.org/liquidjs/-/liquidjs-10.18.0.tgz", + "integrity": "sha512-gCJPmpmZ3oi2rMMHo/c+bW1LaRF+ZAKYTWQmKXPp0uK9EkWMFRmgbk3+Io4LSJGAOnpCZSgHJbNzcygx3kfAAQ==", "dev": true, "dependencies": { "commander": "^10.0.0" @@ -1927,22 +2000,10 @@ "integrity": "sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==", "dev": true }, - "node_modules/lru-cache": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", - "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", - "dev": true, - "dependencies": { - "yallist": "^4.0.0" - }, - "engines": { - "node": ">=10" - } - }, "node_modules/luxon": { - "version": "3.4.4", - "resolved": "https://registry.npmjs.org/luxon/-/luxon-3.4.4.tgz", - "integrity": "sha512-zobTr7akeGHnv7eBOXcRgMeCP6+uyYsczwmeRCauvpvaAltgNyTbLH/+VaEAPUeWBT+1GuNmz4wC/6jtQzbbVA==", + "version": "3.5.0", + "resolved": "https://registry.npmjs.org/luxon/-/luxon-3.5.0.tgz", + "integrity": "sha512-rh+Zjr6DNfUYR3bPwJEnuwDdqMbxZW7LOQfUN4B54+Cl+0o5zaU9RJ6bcidfDtC1cWCZXQ+nvX8bf6bAji37QQ==", "dev": true, "engines": { "node": ">=12" @@ -2059,12 +2120,12 @@ } }, "node_modules/micromatch": { - "version": "4.0.5", - "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz", - "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==", + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz", + "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==", "dev": true, "dependencies": { - "braces": "^3.0.2", + "braces": "^3.0.3", "picomatch": "^2.3.1" }, "engines": { @@ -2135,15 +2196,15 @@ "dev": true }, "node_modules/morphdom": { - "version": "2.7.1", - "resolved": "https://registry.npmjs.org/morphdom/-/morphdom-2.7.1.tgz", - "integrity": "sha512-LwrrjplMolniWtOGluKF1EHZ0y78Fa4sq7f/MXCydyNkDof+POf+ruCn+k08l7H7b/JISfRo8Zd0HazuqySY9w==", + "version": "2.7.4", + "resolved": "https://registry.npmjs.org/morphdom/-/morphdom-2.7.4.tgz", + "integrity": "sha512-ATTbWMgGa+FaMU3FhnFYB6WgulCqwf6opOll4CBzmVDTLvPMmUPrEv8CudmLPK0MESa64+6B89fWOxP3+YIlxQ==", "dev": true }, "node_modules/ms": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", - "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", + "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==", "dev": true }, "node_modules/multimatch": { @@ -2199,9 +2260,9 @@ "dev": true }, "node_modules/node-releases": { - "version": "2.0.13", - "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.13.tgz", - "integrity": "sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==", + "version": "2.0.18", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.18.tgz", + "integrity": "sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==", "dev": true }, "node_modules/normalize-path": { @@ -2296,24 +2357,36 @@ "dev": true }, "node_modules/parse5": { - "version": "7.1.2", - "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz", - "integrity": "sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==", + "version": "7.2.1", + "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.2.1.tgz", + "integrity": "sha512-BuBYQYlv1ckiPdQi/ohiivi9Sagc9JG+Ozs0r7b/0iK3sKmrb0b9FdWdBbOdx6hBCM/F9Ir82ofnBhtZOjCRPQ==", "dev": true, "dependencies": { - "entities": "^4.4.0" + "entities": "^4.5.0" }, "funding": { "url": "https://github.com/inikulin/parse5?sponsor=1" } }, "node_modules/parse5-htmlparser2-tree-adapter": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-7.0.0.tgz", - "integrity": "sha512-B77tOZrqqfUfnVcOrUvfdLbz4pu4RopLD/4vmu3HUPswwTA8OH0EMW9BlWR2B0RCoiZRAHEUu7IxeP1Pd1UU+g==", + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-7.1.0.tgz", + "integrity": "sha512-ruw5xyKs6lrpo9x9rCZqZZnIUntICjQAd0Wsmp396Ul9lN/h+ifgVV1x1gZHi8euej6wTfpqX8j+BFQxF0NS/g==", + "dev": true, + "dependencies": { + "domhandler": "^5.0.3", + "parse5": "^7.0.0" + }, + "funding": { + "url": "https://github.com/inikulin/parse5?sponsor=1" + } + }, + "node_modules/parse5-parser-stream": { + "version": "7.1.2", + "resolved": "https://registry.npmjs.org/parse5-parser-stream/-/parse5-parser-stream-7.1.2.tgz", + "integrity": "sha512-JyeQc9iwFLn5TbvvqACIF/VXG6abODeB3Fwmv/TGdLk2LfbWkaySGY72at4+Ty7EkPZj854u4CrICqNk2qIbow==", "dev": true, "dependencies": { - "domhandler": "^5.0.2", "parse5": "^7.0.0" }, "funding": { @@ -2354,9 +2427,9 @@ "dev": true }, "node_modules/path-to-regexp": { - "version": "6.2.1", - "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.2.1.tgz", - "integrity": "sha512-JLyh7xT1kizaEvcaXOQwOc2/Yhw6KZOvPf1S8401UyLk86CU79LN3vl7ztXGm/pZ+YjoyAJ4rxmHwbkBXJX+yw==", + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.3.0.tgz", + "integrity": "sha512-Yhpw4T9C6hPpgPeA28us07OJeqZ5EzQTkbfwuhsUg0c237RomFoETJgmp2sa3F/41gfLE6G5cqcYwznmeEeOlQ==", "dev": true }, "node_modules/path-type": { @@ -2369,9 +2442,9 @@ } }, "node_modules/picocolors": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", - "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==", + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz", + "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==", "dev": true }, "node_modules/picomatch": { @@ -2405,9 +2478,9 @@ } }, "node_modules/postcss": { - "version": "8.4.31", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz", - "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==", + "version": "8.4.47", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.47.tgz", + "integrity": "sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==", "dev": true, "funding": [ { @@ -2424,9 +2497,9 @@ } ], "dependencies": { - "nanoid": "^3.3.6", - "picocolors": "^1.0.0", - "source-map-js": "^1.0.2" + "nanoid": "^3.3.7", + "picocolors": "^1.1.0", + "source-map-js": "^1.2.1" }, "engines": { "node": "^10 || ^12 || >=14" @@ -2478,85 +2551,85 @@ } }, "node_modules/postcss-colormin": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-6.0.0.tgz", - "integrity": "sha512-EuO+bAUmutWoZYgHn2T1dG1pPqHU6L4TjzPlu4t1wZGXQ/fxV16xg2EJmYi0z+6r+MGV1yvpx1BHkUaRrPa2bw==", + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-6.1.0.tgz", + "integrity": "sha512-x9yX7DOxeMAR+BgGVnNSAxmAj98NX/YxEMNFP+SDCEeNLb2r3i6Hh1ksMsnW8Ub5SLCpbescQqn9YEbE9554Sw==", "dev": true, "dependencies": { - "browserslist": "^4.21.4", + "browserslist": "^4.23.0", "caniuse-api": "^3.0.0", - "colord": "^2.9.1", + "colord": "^2.9.3", "postcss-value-parser": "^4.2.0" }, "engines": { "node": "^14 || ^16 || >=18.0" }, "peerDependencies": { - "postcss": "^8.2.15" + "postcss": "^8.4.31" } }, "node_modules/postcss-convert-values": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/postcss-convert-values/-/postcss-convert-values-6.0.0.tgz", - "integrity": "sha512-U5D8QhVwqT++ecmy8rnTb+RL9n/B806UVaS3m60lqle4YDFcpbS3ae5bTQIh3wOGUSDHSEtMYLs/38dNG7EYFw==", + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/postcss-convert-values/-/postcss-convert-values-6.1.0.tgz", + "integrity": "sha512-zx8IwP/ts9WvUM6NkVSkiU902QZL1bwPhaVaLynPtCsOTqp+ZKbNi+s6XJg3rfqpKGA/oc7Oxk5t8pOQJcwl/w==", "dev": true, "dependencies": { - "browserslist": "^4.21.4", + "browserslist": "^4.23.0", "postcss-value-parser": "^4.2.0" }, "engines": { "node": "^14 || ^16 || >=18.0" }, "peerDependencies": { - "postcss": "^8.2.15" + "postcss": "^8.4.31" } }, "node_modules/postcss-discard-comments": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-6.0.0.tgz", - "integrity": "sha512-p2skSGqzPMZkEQvJsgnkBhCn8gI7NzRH2683EEjrIkoMiwRELx68yoUJ3q3DGSGuQ8Ug9Gsn+OuDr46yfO+eFw==", + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-6.0.2.tgz", + "integrity": "sha512-65w/uIqhSBBfQmYnG92FO1mWZjJ4GL5b8atm5Yw2UgrwD7HiNiSSNwJor1eCFGzUgYnN/iIknhNRVqjrrpuglw==", "dev": true, "engines": { "node": "^14 || ^16 || >=18.0" }, "peerDependencies": { - "postcss": "^8.2.15" + "postcss": "^8.4.31" } }, "node_modules/postcss-discard-duplicates": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-6.0.0.tgz", - "integrity": "sha512-bU1SXIizMLtDW4oSsi5C/xHKbhLlhek/0/yCnoMQany9k3nPBq+Ctsv/9oMmyqbR96HYHxZcHyK2HR5P/mqoGA==", + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-6.0.3.tgz", + "integrity": "sha512-+JA0DCvc5XvFAxwx6f/e68gQu/7Z9ud584VLmcgto28eB8FqSFZwtrLwB5Kcp70eIoWP/HXqz4wpo8rD8gpsTw==", "dev": true, "engines": { "node": "^14 || ^16 || >=18.0" }, "peerDependencies": { - "postcss": "^8.2.15" + "postcss": "^8.4.31" } }, "node_modules/postcss-discard-empty": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-6.0.0.tgz", - "integrity": "sha512-b+h1S1VT6dNhpcg+LpyiUrdnEZfICF0my7HAKgJixJLW7BnNmpRH34+uw/etf5AhOlIhIAuXApSzzDzMI9K/gQ==", + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-6.0.3.tgz", + "integrity": "sha512-znyno9cHKQsK6PtxL5D19Fj9uwSzC2mB74cpT66fhgOadEUPyXFkbgwm5tvc3bt3NAy8ltE5MrghxovZRVnOjQ==", "dev": true, "engines": { "node": "^14 || ^16 || >=18.0" }, "peerDependencies": { - "postcss": "^8.2.15" + "postcss": "^8.4.31" } }, "node_modules/postcss-discard-overridden": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-6.0.0.tgz", - "integrity": "sha512-4VELwssYXDFigPYAZ8vL4yX4mUepF/oCBeeIT4OXsJPYOtvJumyz9WflmJWTfDwCUcpDR+z0zvCWBXgTx35SVw==", + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-6.0.2.tgz", + "integrity": "sha512-j87xzI4LUggC5zND7KdjsI25APtyMuynXZSujByMaav2roV6OZX+8AaCUcZSWqckZpjAjRyFDdpqybgjFO0HJQ==", "dev": true, "engines": { "node": "^14 || ^16 || >=18.0" }, "peerDependencies": { - "postcss": "^8.2.15" + "postcss": "^8.4.31" } }, "node_modules/postcss-import": { @@ -2611,53 +2684,44 @@ } } }, - "node_modules/postcss-load-config/node_modules/lilconfig": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.0.0.tgz", - "integrity": "sha512-K2U4W2Ff5ibV7j7ydLr+zLAkIg5JJ4lPn1Ltsdt+Tz/IjQ8buJ55pZAxoP34lqIiwtF9iAvtLv3JGv7CAyAg+g==", - "dev": true, - "engines": { - "node": ">=14" - } - }, "node_modules/postcss-merge-longhand": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-6.0.0.tgz", - "integrity": "sha512-4VSfd1lvGkLTLYcxFuISDtWUfFS4zXe0FpF149AyziftPFQIWxjvFSKhA4MIxMe4XM3yTDgQMbSNgzIVxChbIg==", + "version": "6.0.5", + "resolved": "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-6.0.5.tgz", + "integrity": "sha512-5LOiordeTfi64QhICp07nzzuTDjNSO8g5Ksdibt44d+uvIIAE1oZdRn8y/W5ZtYgRH/lnLDlvi9F8btZcVzu3w==", "dev": true, "dependencies": { "postcss-value-parser": "^4.2.0", - "stylehacks": "^6.0.0" + "stylehacks": "^6.1.1" }, "engines": { "node": "^14 || ^16 || >=18.0" }, "peerDependencies": { - "postcss": "^8.2.15" + "postcss": "^8.4.31" } }, "node_modules/postcss-merge-rules": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/postcss-merge-rules/-/postcss-merge-rules-6.0.1.tgz", - "integrity": "sha512-a4tlmJIQo9SCjcfiCcCMg/ZCEe0XTkl/xK0XHBs955GWg9xDX3NwP9pwZ78QUOWB8/0XCjZeJn98Dae0zg6AAw==", + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/postcss-merge-rules/-/postcss-merge-rules-6.1.1.tgz", + "integrity": "sha512-KOdWF0gju31AQPZiD+2Ar9Qjowz1LTChSjFFbS+e2sFgc4uHOp3ZvVX4sNeTlk0w2O31ecFGgrFzhO0RSWbWwQ==", "dev": true, "dependencies": { - "browserslist": "^4.21.4", + "browserslist": "^4.23.0", "caniuse-api": "^3.0.0", - "cssnano-utils": "^4.0.0", - "postcss-selector-parser": "^6.0.5" + "cssnano-utils": "^4.0.2", + "postcss-selector-parser": "^6.0.16" }, "engines": { "node": "^14 || ^16 || >=18.0" }, "peerDependencies": { - "postcss": "^8.2.15" + "postcss": "^8.4.31" } }, "node_modules/postcss-minify-font-values": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/postcss-minify-font-values/-/postcss-minify-font-values-6.0.0.tgz", - "integrity": "sha512-zNRAVtyh5E8ndZEYXA4WS8ZYsAp798HiIQ1V2UF/C/munLp2r1UGHwf1+6JFu7hdEhJFN+W1WJQKBrtjhFgEnA==", + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/postcss-minify-font-values/-/postcss-minify-font-values-6.1.0.tgz", + "integrity": "sha512-gklfI/n+9rTh8nYaSJXlCo3nOKqMNkxuGpTn/Qm0gstL3ywTr9/WRKznE+oy6fvfolH6dF+QM4nCo8yPLdvGJg==", "dev": true, "dependencies": { "postcss-value-parser": "^4.2.0" @@ -2666,74 +2730,74 @@ "node": "^14 || ^16 || >=18.0" }, "peerDependencies": { - "postcss": "^8.2.15" + "postcss": "^8.4.31" } }, "node_modules/postcss-minify-gradients": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/postcss-minify-gradients/-/postcss-minify-gradients-6.0.0.tgz", - "integrity": "sha512-wO0F6YfVAR+K1xVxF53ueZJza3L+R3E6cp0VwuXJQejnNUH0DjcAFe3JEBeTY1dLwGa0NlDWueCA1VlEfiKgAA==", + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/postcss-minify-gradients/-/postcss-minify-gradients-6.0.3.tgz", + "integrity": "sha512-4KXAHrYlzF0Rr7uc4VrfwDJ2ajrtNEpNEuLxFgwkhFZ56/7gaE4Nr49nLsQDZyUe+ds+kEhf+YAUolJiYXF8+Q==", "dev": true, "dependencies": { - "colord": "^2.9.1", - "cssnano-utils": "^4.0.0", + "colord": "^2.9.3", + "cssnano-utils": "^4.0.2", "postcss-value-parser": "^4.2.0" }, "engines": { "node": "^14 || ^16 || >=18.0" }, "peerDependencies": { - "postcss": "^8.2.15" + "postcss": "^8.4.31" } }, "node_modules/postcss-minify-params": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/postcss-minify-params/-/postcss-minify-params-6.0.0.tgz", - "integrity": "sha512-Fz/wMQDveiS0n5JPcvsMeyNXOIMrwF88n7196puSuQSWSa+/Ofc1gDOSY2xi8+A4PqB5dlYCKk/WfqKqsI+ReQ==", + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/postcss-minify-params/-/postcss-minify-params-6.1.0.tgz", + "integrity": "sha512-bmSKnDtyyE8ujHQK0RQJDIKhQ20Jq1LYiez54WiaOoBtcSuflfK3Nm596LvbtlFcpipMjgClQGyGr7GAs+H1uA==", "dev": true, "dependencies": { - "browserslist": "^4.21.4", - "cssnano-utils": "^4.0.0", + "browserslist": "^4.23.0", + "cssnano-utils": "^4.0.2", "postcss-value-parser": "^4.2.0" }, "engines": { "node": "^14 || ^16 || >=18.0" }, "peerDependencies": { - "postcss": "^8.2.15" + "postcss": "^8.4.31" } }, "node_modules/postcss-minify-selectors": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/postcss-minify-selectors/-/postcss-minify-selectors-6.0.0.tgz", - "integrity": "sha512-ec/q9JNCOC2CRDNnypipGfOhbYPuUkewGwLnbv6omue/PSASbHSU7s6uSQ0tcFRVv731oMIx8k0SP4ZX6be/0g==", + "version": "6.0.4", + "resolved": "https://registry.npmjs.org/postcss-minify-selectors/-/postcss-minify-selectors-6.0.4.tgz", + "integrity": "sha512-L8dZSwNLgK7pjTto9PzWRoMbnLq5vsZSTu8+j1P/2GB8qdtGQfn+K1uSvFgYvgh83cbyxT5m43ZZhUMTJDSClQ==", "dev": true, "dependencies": { - "postcss-selector-parser": "^6.0.5" + "postcss-selector-parser": "^6.0.16" }, "engines": { "node": "^14 || ^16 || >=18.0" }, "peerDependencies": { - "postcss": "^8.2.15" + "postcss": "^8.4.31" } }, "node_modules/postcss-normalize-charset": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-6.0.0.tgz", - "integrity": "sha512-cqundwChbu8yO/gSWkuFDmKrCZ2vJzDAocheT2JTd0sFNA4HMGoKMfbk2B+J0OmO0t5GUkiAkSM5yF2rSLUjgQ==", + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-6.0.2.tgz", + "integrity": "sha512-a8N9czmdnrjPHa3DeFlwqst5eaL5W8jYu3EBbTTkI5FHkfMhFZh1EGbku6jhHhIzTA6tquI2P42NtZ59M/H/kQ==", "dev": true, "engines": { "node": "^14 || ^16 || >=18.0" }, "peerDependencies": { - "postcss": "^8.2.15" + "postcss": "^8.4.31" } }, "node_modules/postcss-normalize-display-values": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/postcss-normalize-display-values/-/postcss-normalize-display-values-6.0.0.tgz", - "integrity": "sha512-Qyt5kMrvy7dJRO3OjF7zkotGfuYALETZE+4lk66sziWSPzlBEt7FrUshV6VLECkI4EN8Z863O6Nci4NXQGNzYw==", + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/postcss-normalize-display-values/-/postcss-normalize-display-values-6.0.2.tgz", + "integrity": "sha512-8H04Mxsb82ON/aAkPeq8kcBbAtI5Q2a64X/mnRRfPXBq7XeogoQvReqxEfc0B4WPq1KimjezNC8flUtC3Qz6jg==", "dev": true, "dependencies": { "postcss-value-parser": "^4.2.0" @@ -2742,13 +2806,13 @@ "node": "^14 || ^16 || >=18.0" }, "peerDependencies": { - "postcss": "^8.2.15" + "postcss": "^8.4.31" } }, "node_modules/postcss-normalize-positions": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/postcss-normalize-positions/-/postcss-normalize-positions-6.0.0.tgz", - "integrity": "sha512-mPCzhSV8+30FZyWhxi6UoVRYd3ZBJgTRly4hOkaSifo0H+pjDYcii/aVT4YE6QpOil15a5uiv6ftnY3rm0igPg==", + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/postcss-normalize-positions/-/postcss-normalize-positions-6.0.2.tgz", + "integrity": "sha512-/JFzI441OAB9O7VnLA+RtSNZvQ0NCFZDOtp6QPFo1iIyawyXg0YI3CYM9HBy1WvwCRHnPep/BvI1+dGPKoXx/Q==", "dev": true, "dependencies": { "postcss-value-parser": "^4.2.0" @@ -2757,13 +2821,13 @@ "node": "^14 || ^16 || >=18.0" }, "peerDependencies": { - "postcss": "^8.2.15" + "postcss": "^8.4.31" } }, "node_modules/postcss-normalize-repeat-style": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-6.0.0.tgz", - "integrity": "sha512-50W5JWEBiOOAez2AKBh4kRFm2uhrT3O1Uwdxz7k24aKtbD83vqmcVG7zoIwo6xI2FZ/HDlbrCopXhLeTpQib1A==", + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-6.0.2.tgz", + "integrity": "sha512-YdCgsfHkJ2jEXwR4RR3Tm/iOxSfdRt7jplS6XRh9Js9PyCR/aka/FCb6TuHT2U8gQubbm/mPmF6L7FY9d79VwQ==", "dev": true, "dependencies": { "postcss-value-parser": "^4.2.0" @@ -2772,13 +2836,13 @@ "node": "^14 || ^16 || >=18.0" }, "peerDependencies": { - "postcss": "^8.2.15" + "postcss": "^8.4.31" } }, "node_modules/postcss-normalize-string": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/postcss-normalize-string/-/postcss-normalize-string-6.0.0.tgz", - "integrity": "sha512-KWkIB7TrPOiqb8ZZz6homet2KWKJwIlysF5ICPZrXAylGe2hzX/HSf4NTX2rRPJMAtlRsj/yfkrWGavFuB+c0w==", + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/postcss-normalize-string/-/postcss-normalize-string-6.0.2.tgz", + "integrity": "sha512-vQZIivlxlfqqMp4L9PZsFE4YUkWniziKjQWUtsxUiVsSSPelQydwS8Wwcuw0+83ZjPWNTl02oxlIvXsmmG+CiQ==", "dev": true, "dependencies": { "postcss-value-parser": "^4.2.0" @@ -2787,13 +2851,13 @@ "node": "^14 || ^16 || >=18.0" }, "peerDependencies": { - "postcss": "^8.2.15" + "postcss": "^8.4.31" } }, "node_modules/postcss-normalize-timing-functions": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/postcss-normalize-timing-functions/-/postcss-normalize-timing-functions-6.0.0.tgz", - "integrity": "sha512-tpIXWciXBp5CiFs8sem90IWlw76FV4oi6QEWfQwyeREVwUy39VSeSqjAT7X0Qw650yAimYW5gkl2Gd871N5SQg==", + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/postcss-normalize-timing-functions/-/postcss-normalize-timing-functions-6.0.2.tgz", + "integrity": "sha512-a+YrtMox4TBtId/AEwbA03VcJgtyW4dGBizPl7e88cTFULYsprgHWTbfyjSLyHeBcK/Q9JhXkt2ZXiwaVHoMzA==", "dev": true, "dependencies": { "postcss-value-parser": "^4.2.0" @@ -2802,29 +2866,29 @@ "node": "^14 || ^16 || >=18.0" }, "peerDependencies": { - "postcss": "^8.2.15" + "postcss": "^8.4.31" } }, "node_modules/postcss-normalize-unicode": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/postcss-normalize-unicode/-/postcss-normalize-unicode-6.0.0.tgz", - "integrity": "sha512-ui5crYkb5ubEUDugDc786L/Me+DXp2dLg3fVJbqyAl0VPkAeALyAijF2zOsnZyaS1HyfPuMH0DwyY18VMFVNkg==", + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/postcss-normalize-unicode/-/postcss-normalize-unicode-6.1.0.tgz", + "integrity": "sha512-QVC5TQHsVj33otj8/JD869Ndr5Xcc/+fwRh4HAsFsAeygQQXm+0PySrKbr/8tkDKzW+EVT3QkqZMfFrGiossDg==", "dev": true, "dependencies": { - "browserslist": "^4.21.4", + "browserslist": "^4.23.0", "postcss-value-parser": "^4.2.0" }, "engines": { "node": "^14 || ^16 || >=18.0" }, "peerDependencies": { - "postcss": "^8.2.15" + "postcss": "^8.4.31" } }, "node_modules/postcss-normalize-url": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/postcss-normalize-url/-/postcss-normalize-url-6.0.0.tgz", - "integrity": "sha512-98mvh2QzIPbb02YDIrYvAg4OUzGH7s1ZgHlD3fIdTHLgPLRpv1ZTKJDnSAKr4Rt21ZQFzwhGMXxpXlfrUBKFHw==", + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/postcss-normalize-url/-/postcss-normalize-url-6.0.2.tgz", + "integrity": "sha512-kVNcWhCeKAzZ8B4pv/DnrU1wNh458zBNp8dh4y5hhxih5RZQ12QWMuQrDgPRw3LRl8mN9vOVfHl7uhvHYMoXsQ==", "dev": true, "dependencies": { "postcss-value-parser": "^4.2.0" @@ -2833,13 +2897,13 @@ "node": "^14 || ^16 || >=18.0" }, "peerDependencies": { - "postcss": "^8.2.15" + "postcss": "^8.4.31" } }, "node_modules/postcss-normalize-whitespace": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/postcss-normalize-whitespace/-/postcss-normalize-whitespace-6.0.0.tgz", - "integrity": "sha512-7cfE1AyLiK0+ZBG6FmLziJzqQCpTQY+8XjMhMAz8WSBSCsCNNUKujgIgjCAmDT3cJ+3zjTXFkoD15ZPsckArVw==", + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/postcss-normalize-whitespace/-/postcss-normalize-whitespace-6.0.2.tgz", + "integrity": "sha512-sXZ2Nj1icbJOKmdjXVT9pnyHQKiSAyuNQHSgRCUgThn2388Y9cGVDR+E9J9iAYbSbLHI+UUwLVl1Wzco/zgv0Q==", "dev": true, "dependencies": { "postcss-value-parser": "^4.2.0" @@ -2848,45 +2912,45 @@ "node": "^14 || ^16 || >=18.0" }, "peerDependencies": { - "postcss": "^8.2.15" + "postcss": "^8.4.31" } }, "node_modules/postcss-ordered-values": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/postcss-ordered-values/-/postcss-ordered-values-6.0.0.tgz", - "integrity": "sha512-K36XzUDpvfG/nWkjs6d1hRBydeIxGpKS2+n+ywlKPzx1nMYDYpoGbcjhj5AwVYJK1qV2/SDoDEnHzlPD6s3nMg==", + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/postcss-ordered-values/-/postcss-ordered-values-6.0.2.tgz", + "integrity": "sha512-VRZSOB+JU32RsEAQrO94QPkClGPKJEL/Z9PCBImXMhIeK5KAYo6slP/hBYlLgrCjFxyqvn5VC81tycFEDBLG1Q==", "dev": true, "dependencies": { - "cssnano-utils": "^4.0.0", + "cssnano-utils": "^4.0.2", "postcss-value-parser": "^4.2.0" }, "engines": { "node": "^14 || ^16 || >=18.0" }, "peerDependencies": { - "postcss": "^8.2.15" + "postcss": "^8.4.31" } }, "node_modules/postcss-reduce-initial": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-6.0.0.tgz", - "integrity": "sha512-s2UOnidpVuXu6JiiI5U+fV2jamAw5YNA9Fdi/GRK0zLDLCfXmSGqQtzpUPtfN66RtCbb9fFHoyZdQaxOB3WxVA==", + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-6.1.0.tgz", + "integrity": "sha512-RarLgBK/CrL1qZags04oKbVbrrVK2wcxhvta3GCxrZO4zveibqbRPmm2VI8sSgCXwoUHEliRSbOfpR0b/VIoiw==", "dev": true, "dependencies": { - "browserslist": "^4.21.4", + "browserslist": "^4.23.0", "caniuse-api": "^3.0.0" }, "engines": { "node": "^14 || ^16 || >=18.0" }, "peerDependencies": { - "postcss": "^8.2.15" + "postcss": "^8.4.31" } }, "node_modules/postcss-reduce-transforms": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/postcss-reduce-transforms/-/postcss-reduce-transforms-6.0.0.tgz", - "integrity": "sha512-FQ9f6xM1homnuy1wLe9lP1wujzxnwt1EwiigtWwuyf8FsqqXUDUp2Ulxf9A5yjlUOTdCJO6lonYjg1mgqIIi2w==", + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/postcss-reduce-transforms/-/postcss-reduce-transforms-6.0.2.tgz", + "integrity": "sha512-sB+Ya++3Xj1WaT9+5LOOdirAxP7dJZms3GRcYheSPi1PiTMigsxHAdkrbItHxwYHr4kt1zL7mmcHstgMYT+aiA==", "dev": true, "dependencies": { "postcss-value-parser": "^4.2.0" @@ -2895,14 +2959,24 @@ "node": "^14 || ^16 || >=18.0" }, "peerDependencies": { - "postcss": "^8.2.15" + "postcss": "^8.4.31" } }, "node_modules/postcss-reporter": { - "version": "7.0.5", - "resolved": "https://registry.npmjs.org/postcss-reporter/-/postcss-reporter-7.0.5.tgz", - "integrity": "sha512-glWg7VZBilooZGOFPhN9msJ3FQs19Hie7l5a/eE6WglzYqVeH3ong3ShFcp9kDWJT1g2Y/wd59cocf9XxBtkWA==", + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/postcss-reporter/-/postcss-reporter-7.1.0.tgz", + "integrity": "sha512-/eoEylGWyy6/DOiMP5lmFRdmDKThqgn7D6hP2dXKJI/0rJSO1ADFNngZfDzxL0YAxFvws+Rtpuji1YIHj4mySA==", "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], "dependencies": { "picocolors": "^1.0.0", "thenby": "^1.3.4" @@ -2910,18 +2984,14 @@ "engines": { "node": ">=10" }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/postcss/" - }, "peerDependencies": { "postcss": "^8.1.0" } }, "node_modules/postcss-selector-parser": { - "version": "6.0.13", - "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz", - "integrity": "sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==", + "version": "6.1.2", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz", + "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==", "dev": true, "dependencies": { "cssesc": "^3.0.0", @@ -2932,34 +3002,34 @@ } }, "node_modules/postcss-svgo": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-6.0.0.tgz", - "integrity": "sha512-r9zvj/wGAoAIodn84dR/kFqwhINp5YsJkLoujybWG59grR/IHx+uQ2Zo+IcOwM0jskfYX3R0mo+1Kip1VSNcvw==", + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-6.0.3.tgz", + "integrity": "sha512-dlrahRmxP22bX6iKEjOM+c8/1p+81asjKT+V5lrgOH944ryx/OHpclnIbGsKVd3uWOXFLYJwCVf0eEkJGvO96g==", "dev": true, "dependencies": { "postcss-value-parser": "^4.2.0", - "svgo": "^3.0.2" + "svgo": "^3.2.0" }, "engines": { "node": "^14 || ^16 || >= 18" }, "peerDependencies": { - "postcss": "^8.2.15" + "postcss": "^8.4.31" } }, "node_modules/postcss-unique-selectors": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/postcss-unique-selectors/-/postcss-unique-selectors-6.0.0.tgz", - "integrity": "sha512-EPQzpZNxOxP7777t73RQpZE5e9TrnCrkvp7AH7a0l89JmZiPnS82y216JowHXwpBCQitfyxrof9TK3rYbi7/Yw==", + "version": "6.0.4", + "resolved": "https://registry.npmjs.org/postcss-unique-selectors/-/postcss-unique-selectors-6.0.4.tgz", + "integrity": "sha512-K38OCaIrO8+PzpArzkLKB42dSARtC2tmG6PvD4b1o1Q2E9Os8jzfWFfSy/rixsHwohtsDdFtAWGjFVFUdwYaMg==", "dev": true, "dependencies": { - "postcss-selector-parser": "^6.0.5" + "postcss-selector-parser": "^6.0.16" }, "engines": { "node": "^14 || ^16 || >=18.0" }, "peerDependencies": { - "postcss": "^8.2.15" + "postcss": "^8.4.31" } }, "node_modules/postcss-value-parser": { @@ -3137,12 +3207,12 @@ "dev": true }, "node_modules/pug": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/pug/-/pug-3.0.2.tgz", - "integrity": "sha512-bp0I/hiK1D1vChHh6EfDxtndHji55XP/ZJKwsRqrz6lRia6ZC2OZbdAymlxdVFwd1L70ebrVJw4/eZ79skrIaw==", + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/pug/-/pug-3.0.3.tgz", + "integrity": "sha512-uBi6kmc9f3SZ3PXxqcHiUZLmIXgfgWooKWXcwSGwQd2Zi5Rb0bT14+8CJjJgI8AB+nndLaNgHGrcc6bPIB665g==", "dev": true, "dependencies": { - "pug-code-gen": "^3.0.2", + "pug-code-gen": "^3.0.3", "pug-filters": "^4.0.0", "pug-lexer": "^5.0.1", "pug-linker": "^4.0.0", @@ -3164,25 +3234,25 @@ } }, "node_modules/pug-code-gen": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/pug-code-gen/-/pug-code-gen-3.0.2.tgz", - "integrity": "sha512-nJMhW16MbiGRiyR4miDTQMRWDgKplnHyeLvioEJYbk1RsPI3FuA3saEP8uwnTb2nTJEKBU90NFVWJBk4OU5qyg==", + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/pug-code-gen/-/pug-code-gen-3.0.3.tgz", + "integrity": "sha512-cYQg0JW0w32Ux+XTeZnBEeuWrAY7/HNE6TWnhiHGnnRYlCgyAUPoyh9KzCMa9WhcJlJ1AtQqpEYHc+vbCzA+Aw==", "dev": true, "dependencies": { "constantinople": "^4.0.1", "doctypes": "^1.1.0", "js-stringify": "^1.0.2", "pug-attrs": "^3.0.0", - "pug-error": "^2.0.0", - "pug-runtime": "^3.0.0", + "pug-error": "^2.1.0", + "pug-runtime": "^3.0.1", "void-elements": "^3.1.0", "with": "^7.0.0" } }, "node_modules/pug-error": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/pug-error/-/pug-error-2.0.0.tgz", - "integrity": "sha512-sjiUsi9M4RAGHktC1drQfCr5C5eriu24Lfbt4s+7SykztEOwVZtbFk1RRq0tzLxcMxMYTBR+zMQaG07J/btayQ==", + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/pug-error/-/pug-error-2.1.0.tgz", + "integrity": "sha512-lv7sU9e5Jk8IeUheHata6/UThZ7RK2jnaaNztxfPYUY+VxZyk/ePVaNZ/vwmH8WqGvDz3LrNYt/+gA55NDg6Pg==", "dev": true }, "node_modules/pug-filters": { @@ -3367,6 +3437,7 @@ "version": "2.7.1", "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz", "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==", + "deprecated": "Rimraf versions prior to v4 are no longer supported", "dev": true, "dependencies": { "glob": "^7.1.3" @@ -3398,6 +3469,12 @@ "queue-microtask": "^1.2.2" } }, + "node_modules/safer-buffer": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", + "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", + "dev": true + }, "node_modules/section-matter": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/section-matter/-/section-matter-1.0.0.tgz", @@ -3412,13 +3489,10 @@ } }, "node_modules/semver": { - "version": "7.5.4", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", - "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", + "version": "7.6.3", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz", + "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==", "dev": true, - "dependencies": { - "lru-cache": "^6.0.0" - }, "bin": { "semver": "bin/semver.js" }, @@ -3433,15 +3507,17 @@ "dev": true }, "node_modules/set-function-length": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.1.1.tgz", - "integrity": "sha512-VoaqjbBJKiWtg4yRcKBQ7g7wnGnLV3M8oLvVWwOk2PdYY6PEFegR1vezXR0tw6fZGF9csVakIRjrJiy2veSBFQ==", + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz", + "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==", "dev": true, "dependencies": { - "define-data-property": "^1.1.1", - "get-intrinsic": "^1.2.1", + "define-data-property": "^1.1.4", + "es-errors": "^1.3.0", + "function-bind": "^1.1.2", + "get-intrinsic": "^1.2.4", "gopd": "^1.0.1", - "has-property-descriptors": "^1.0.0" + "has-property-descriptors": "^1.0.2" }, "engines": { "node": ">= 0.4" @@ -3499,9 +3575,9 @@ } }, "node_modules/source-map-js": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", - "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz", + "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==", "dev": true, "engines": { "node": ">=0.10.0" @@ -3570,19 +3646,19 @@ } }, "node_modules/stylehacks": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-6.0.0.tgz", - "integrity": "sha512-+UT589qhHPwz6mTlCLSt/vMNTJx8dopeJlZAlBMJPWA3ORqu6wmQY7FBXf+qD+FsqoBJODyqNxOUP3jdntFRdw==", + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-6.1.1.tgz", + "integrity": "sha512-gSTTEQ670cJNoaeIp9KX6lZmm8LJ3jPB5yJmX8Zq/wQxOsAFXV3qjWzHas3YYk1qesuVIyYWWUpZ0vSE/dTSGg==", "dev": true, "dependencies": { - "browserslist": "^4.21.4", - "postcss-selector-parser": "^6.0.4" + "browserslist": "^4.23.0", + "postcss-selector-parser": "^6.0.16" }, "engines": { "node": "^14 || ^16 || >=18.0" }, "peerDependencies": { - "postcss": "^8.2.15" + "postcss": "^8.4.31" } }, "node_modules/supports-color": { @@ -3610,17 +3686,17 @@ } }, "node_modules/svgo": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/svgo/-/svgo-3.0.4.tgz", - "integrity": "sha512-T+Xul3JwuJ6VGXKo/p2ndqx1ibxNKnLTvRc1ZTWKCfyKS/GgNjRZcYsK84fxTsy/izr91g/Rwx6fGnVgaFSI5g==", + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/svgo/-/svgo-3.3.2.tgz", + "integrity": "sha512-OoohrmuUlBs8B8o6MB2Aevn+pRIH9zDALSR+6hhqVfa6fRwG/Qw9VUMSMW9VNg2CFc/MTIfabtdOVl9ODIJjpw==", "dev": true, "dependencies": { "@trysound/sax": "0.2.0", "commander": "^7.2.0", "css-select": "^5.1.0", - "css-tree": "^2.2.1", + "css-tree": "^2.3.1", "css-what": "^6.1.0", - "csso": "5.0.5", + "csso": "^5.0.5", "picocolors": "^1.0.0" }, "bin": { @@ -3649,15 +3725,6 @@ "integrity": "sha512-89Gi5raiWA3QZ4b2ePcEwswC3me9JIg+ToSgtE0JWeCynLnLxNr/f9G+xfo9K+Oj4AFdom8YNJjibIARTJmapQ==", "dev": true }, - "node_modules/to-fast-properties": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", - "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==", - "dev": true, - "engines": { - "node": ">=4" - } - }, "node_modules/to-regex-range": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", @@ -3683,9 +3750,9 @@ "dev": true }, "node_modules/uglify-js": { - "version": "3.17.4", - "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.17.4.tgz", - "integrity": "sha512-T9q82TJI9e/C1TAxYvfb16xO120tMVFZrGA3f9/P4424DNu6ypK103y0GPFVa17yotwSyZW5iYXgjYHkGrJW/g==", + "version": "3.19.3", + "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.19.3.tgz", + "integrity": "sha512-v3Xu+yuwBXisp6QYTcH4UbH+xYJXqnq2m/LtQVWKWzYc1iehYnLixoQDN9FH6/j9/oybfd6W9Ghwkl8+UMKTKQ==", "dev": true, "optional": true, "bin": { @@ -3695,6 +3762,15 @@ "node": ">=0.8.0" } }, + "node_modules/undici": { + "version": "6.20.1", + "resolved": "https://registry.npmjs.org/undici/-/undici-6.20.1.tgz", + "integrity": "sha512-AjQF1QsmqfJys+LXfGTNum+qw4S88CojRInG/6t31W/1fk6G59s92bnAvGz5Cmur+kQv2SURXEvvudLmbrE8QA==", + "dev": true, + "engines": { + "node": ">=18.17" + } + }, "node_modules/universalify": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz", @@ -3714,9 +3790,9 @@ } }, "node_modules/update-browserslist-db": { - "version": "1.0.13", - "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz", - "integrity": "sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==", + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.1.tgz", + "integrity": "sha512-R8UzCaa9Az+38REPiJ1tXlImTJXlVfgHZsglwBD/k6nj76ctsH1E3q4doGrukiLQd3sGQYu56r5+lo5r94l29A==", "dev": true, "funding": [ { @@ -3733,8 +3809,8 @@ } ], "dependencies": { - "escalade": "^3.1.1", - "picocolors": "^1.0.0" + "escalade": "^3.2.0", + "picocolors": "^1.1.0" }, "bin": { "update-browserslist-db": "cli.js" @@ -3758,6 +3834,27 @@ "node": ">=0.10.0" } }, + "node_modules/whatwg-encoding": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-3.1.1.tgz", + "integrity": "sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==", + "dev": true, + "dependencies": { + "iconv-lite": "0.6.3" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/whatwg-mimetype": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-4.0.0.tgz", + "integrity": "sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==", + "dev": true, + "engines": { + "node": ">=18" + } + }, "node_modules/which": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", @@ -3818,9 +3915,9 @@ "dev": true }, "node_modules/ws": { - "version": "8.14.2", - "resolved": "https://registry.npmjs.org/ws/-/ws-8.14.2.tgz", - "integrity": "sha512-wEBG1ftX4jcglPxgFCMJmZ2PLtSbJ2Peg6TmpJFTbe9GZYOQCDPdMYu/Tm0/bGZkw8paZnJY45J4K2PZrLYq8g==", + "version": "8.18.0", + "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz", + "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==", "dev": true, "engines": { "node": ">=10.0.0" @@ -3854,10 +3951,13 @@ "dev": true }, "node_modules/yaml": { - "version": "2.3.4", - "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.4.tgz", - "integrity": "sha512-8aAvwVUSHpfEqTQ4w/KMlf3HcRdt50E5ODIQJBw1fQ5RL34xabzxtUlzTXVqc4rkZsPbvrXKWnABCD7kWSmocA==", + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.6.0.tgz", + "integrity": "sha512-a6ae//JvKDEra2kdi1qzCyrJW/WZCgFi8ydDV+eXExl95t+5R+ijnqHJbz9tmMh8FUjx3iv2fCQ4dclAQlO2UQ==", "dev": true, + "bin": { + "yaml": "bin.mjs" + }, "engines": { "node": ">= 14" } @@ -3890,4 +3990,4 @@ } } } -} \ No newline at end of file +}