mote.css 0.2.0 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +48 -2
- package/README.md +173 -168
- package/mote.components.css +109 -7
- package/mote.css +2 -2
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,50 @@ All notable changes to this project are documented in this file.
|
|
|
5
5
|
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
|
|
6
6
|
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
|
7
7
|
|
|
8
|
+
## [0.3.0] - 2026-10-19
|
|
9
|
+
|
|
10
|
+
### Added
|
|
11
|
+
|
|
12
|
+
- Layout module in `mote.components.css`:
|
|
13
|
+
- `.mote-doc` document shell — opt in with one class on `<body>` and the
|
|
14
|
+
landmarks become the layout via `:has()`: sticky left rail for `nav`,
|
|
15
|
+
right rail for `aside`, `main` flexing between them, footer pinned to the
|
|
16
|
+
viewport bottom on short pages (body-scoped `min-height: 100svh`),
|
|
17
|
+
everything collapsing to a single column under 50rem. No classes on the
|
|
18
|
+
landmarks; `:where()` keeps every rule overridable.
|
|
19
|
+
- `.mote-grid` card grid — auto-fill columns computed from the container;
|
|
20
|
+
no breakpoints, no column utilities.
|
|
21
|
+
- Classless page shell: `body > header` and its nav are styled from landmarks
|
|
22
|
+
alone (sticky translucent bar + nav pills). `.mote-header` / `.mote-nav`
|
|
23
|
+
remain for the one case landmarks cannot express — shells wrapped in a
|
|
24
|
+
`<div>`.
|
|
25
|
+
|
|
26
|
+
### Changed
|
|
27
|
+
|
|
28
|
+
- Documentation restructured: every element documented exactly once, with all
|
|
29
|
+
its status variants in place; the Status classes section is now the token
|
|
30
|
+
contract plus a consumer map. Complete status coverage (including muted)
|
|
31
|
+
across notes, badges, toasts, blockquotes, progress, meters, spinners and
|
|
32
|
+
summary markers.
|
|
33
|
+
|
|
34
|
+
## [0.2.1] - 2026-10-16
|
|
35
|
+
|
|
36
|
+
### Fixed
|
|
37
|
+
|
|
38
|
+
- README: correct minified CDN URL — jsDelivr publishes the minified variant
|
|
39
|
+
of a dotted filename as `mote.min.css`, not `mote.css.min.css` (verified live).
|
|
40
|
+
|
|
41
|
+
### Changed
|
|
42
|
+
|
|
43
|
+
- Release CI moved to GitLab CI (`.gitlab-ci.yml`): tag-triggered `npm stage
|
|
44
|
+
publish` with OIDC trusted publishing — no tokens anywhere; a maintainer
|
|
45
|
+
still approves every release with 2FA. The GitHub mirror is distribution-only.
|
|
46
|
+
- Provenance-ready: trusted publishing is configured and the source repository
|
|
47
|
+
is public; whether attestations survive the staged-approval flow gets proven
|
|
48
|
+
by the pipeline's `--provenance` flag at the next release.
|
|
49
|
+
- Package metadata points to the canonical GitLab source; GitHub remains the
|
|
50
|
+
distribution mirror.
|
|
51
|
+
|
|
8
52
|
## [0.2.0] - 2026-10-15
|
|
9
53
|
|
|
10
54
|
### Added
|
|
@@ -69,8 +113,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
69
113
|
- Opt-in helpers: `.mote-container`, `.mote-muted`, `.mote-note` surfaces.
|
|
70
114
|
- Element gallery demo page (`demo.html`).
|
|
71
115
|
|
|
72
|
-
[0.
|
|
73
|
-
[0.1
|
|
116
|
+
[0.3.0]: https://gitlab.com/abmach/mote/compare/v0.2.1...v0.3.0
|
|
117
|
+
[0.2.1]: https://gitlab.com/abmach/mote/compare/v0.2.0...v0.2.1
|
|
118
|
+
[0.2.0]: https://gitlab.com/abmach/mote/compare/v0.1.0...v0.2.0
|
|
119
|
+
[0.1.0]: https://gitlab.com/abmach/mote/-/tags/v0.1.0
|
|
74
120
|
|
|
75
121
|
---
|
|
76
122
|
|
package/README.md
CHANGED
|
@@ -1,168 +1,173 @@
|
|
|
1
|
-
# mote.css
|
|
2
|
-
|
|
3
|
-
> The smallest thing that can carry style — a tiny, semantic, classless CSS layer for plain HTML.
|
|
4
|
-
|
|
5
|
-
A mote of styling for plain HTML: **zero dependencies, zero build step, zero classes required**. Write semantic HTML, drop in one file, and it looks like a place you'd want to stay a while — modern, warm, unobtrusive. Inspired by the quiet excellence of [oat](https://github.com/knadh/oat), with its own cozy voice.
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
</
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
- **
|
|
27
|
-
- **
|
|
28
|
-
- **
|
|
29
|
-
- **
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
<!--
|
|
40
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mote.css@0.2.0/mote.
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
npm
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
:
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
|
81
|
-
|
|
82
|
-
| `--mote-
|
|
83
|
-
| `--mote-
|
|
84
|
-
| `--mote-
|
|
85
|
-
| `--mote-
|
|
86
|
-
| `--mote-
|
|
87
|
-
| `--mote-
|
|
88
|
-
| `--mote-
|
|
89
|
-
| `--mote-
|
|
90
|
-
| `--mote-
|
|
91
|
-
| `--mote-
|
|
92
|
-
| `--mote-
|
|
93
|
-
| `--mote-
|
|
94
|
-
| `--mote-
|
|
95
|
-
| `--mote-
|
|
96
|
-
| `--mote-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
|
130
|
-
|
|
131
|
-
| `.mote-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
|
141
|
-
|
|
142
|
-
|
|
|
143
|
-
| Sticky site header / nav pills | `.mote-header
|
|
144
|
-
| Breadcrumbs | `nav[aria-label="breadcrumb"]` — semantic, no class |
|
|
145
|
-
|
|
|
146
|
-
|
|
|
147
|
-
|
|
|
148
|
-
|
|
|
149
|
-
|
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
1
|
+
# mote.css
|
|
2
|
+
|
|
3
|
+
> The smallest thing that can carry style — a tiny, semantic, classless CSS layer for plain HTML.
|
|
4
|
+
|
|
5
|
+
A mote of styling for plain HTML: **zero dependencies, zero build step, zero classes required**. Write semantic HTML, drop in one file, and it looks like a place you'd want to stay a while — modern, warm, unobtrusive. Inspired by the quiet excellence of [oat](https://github.com/knadh/oat), with its own cozy voice.
|
|
6
|
+
|
|
7
|
+
Source on [GitLab](https://gitlab.com/abmach/mote) · mirrored on [GitHub](https://github.com/abmach/mote).
|
|
8
|
+
|
|
9
|
+
```html
|
|
10
|
+
<!DOCTYPE html>
|
|
11
|
+
<html lang="en">
|
|
12
|
+
<head>
|
|
13
|
+
<link rel="stylesheet" href="mote.css">
|
|
14
|
+
</head>
|
|
15
|
+
<body>
|
|
16
|
+
<main>
|
|
17
|
+
<h1>Hello, cozy.</h1>
|
|
18
|
+
<p>That's the whole setup.</p>
|
|
19
|
+
</main>
|
|
20
|
+
</body>
|
|
21
|
+
</html>
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
## Principles
|
|
25
|
+
|
|
26
|
+
- **Semantic HTML is the API.** mote styles elements by what they *are* — headings, forms, `dialog`, `menu` — not by the classes they wear. Classes exist only where the platform has no semantic carrier (a "card" is not a semantic concept).
|
|
27
|
+
- **The platform before the library.** Interactive components ride on native features: `popover`, `dialog`, `<details name>`, `:user-invalid`. Where the browser can do it, mote never ships JavaScript to do it worse.
|
|
28
|
+
- **Tokens all the way down.** Every color, radius, shadow, font and status is a `--mote-*` custom property, and derived tones are computed with `color-mix()`. Status classes set tokens and nothing else — one override re-skins every note, badge and toast. Re-theme by overriding variables, never by fighting selectors.
|
|
29
|
+
- **Weightless by default.** `mote.css` styles your elements; `mote.components.css` is opt-in and CSS-only. You ship zero bytes of library JavaScript, ever.
|
|
30
|
+
- **Framework-agnostic.** It's just CSS — plain HTML, Svelte, Vue, React, HTMX, PHP, your CMS, anything.
|
|
31
|
+
- **Cozy, and unobtrusive about it.** Warm neutrals, soft edges, generous rhythm — styling that never shouts. Automatic light/dark, AA+ contrast, visible focus, reduced-motion respected.
|
|
32
|
+
|
|
33
|
+
## Install
|
|
34
|
+
|
|
35
|
+
**CDN** — jsDelivr, serving the npm package, with auto-minified variants:
|
|
36
|
+
|
|
37
|
+
```html
|
|
38
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mote.css@0.2.0/mote.css">
|
|
39
|
+
<!-- minified variant (dotted filenames minify to <name>.min.css) -->
|
|
40
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mote.css@0.2.0/mote.min.css">
|
|
41
|
+
|
|
42
|
+
<!-- optional components file -->
|
|
43
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mote.css@0.2.0/mote.components.css">
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
Use `mote.css@0` to track the latest 0.x release. CDN URLs go live once the package is published.
|
|
47
|
+
|
|
48
|
+
**npm**:
|
|
49
|
+
|
|
50
|
+
```sh
|
|
51
|
+
npm install mote.css
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
**Download**: [`mote.css`](mote.css) and [`mote.components.css`](mote.components.css) — link them directly.
|
|
55
|
+
|
|
56
|
+
## Theming
|
|
57
|
+
|
|
58
|
+
Everything is a variable. Override the ones you care about:
|
|
59
|
+
|
|
60
|
+
```css
|
|
61
|
+
:root {
|
|
62
|
+
--mote-accent: #4a7a5b; /* your brand color */
|
|
63
|
+
--mote-bg: #fffdf5; /* your paper */
|
|
64
|
+
--mote-radius: 6px; /* your edges */
|
|
65
|
+
}
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
### The token cascade
|
|
69
|
+
|
|
70
|
+
Values flow in layers, each computed from the last — retune a base token and everything downstream re-derives automatically:
|
|
71
|
+
|
|
72
|
+
1. **Base palette** — the raw tokens: `--mote-bg`, `--mote-fg`, `--mote-accent`, the four semantics, fonts, radii, shadows. Light values live in `:root`; dark values swap in via `prefers-color-scheme` or `data-theme`.
|
|
73
|
+
2. **Derived tones** — computed from the base with `color-mix()`: `--mote-accent-deep` (hover deepening), `--mote-accent-soft`, the four `--mote-*-soft` tints, `--mote-focus-ring`, `--mote-border-strong`. They can never go stale — change `--mote-accent` and every tint, ring and hover shade follows.
|
|
74
|
+
3. **Status indirection** — status classes assign `--mote-status` / `--mote-status-soft` and nothing else. Components read them with accent fallbacks: `color: var(--mote-status, var(--mote-accent-deep))`.
|
|
75
|
+
|
|
76
|
+
The consequence: theming is a handful of variable overrides, and an inline tweak (`style="--mote-status: …"`) slots into the same chain at any level.
|
|
77
|
+
|
|
78
|
+
### Token reference
|
|
79
|
+
|
|
80
|
+
| Token | Light | Dark | Used for |
|
|
81
|
+
|---|---|---|---|
|
|
82
|
+
| `--mote-bg` | `#faf9f7` | `#1c1a17` | Page background |
|
|
83
|
+
| `--mote-surface` | `#f1eee7` | `#262320` | Code blocks, cards, inputs |
|
|
84
|
+
| `--mote-fg` | `#2b2924` | `#eae6de` | Body text |
|
|
85
|
+
| `--mote-muted` | `#716a60` | `#a49c90` | Secondary text, captions |
|
|
86
|
+
| `--mote-border` | `#e6e0d4` | `#3b362f` | Rules, borders |
|
|
87
|
+
| `--mote-accent` | `#6f5486` | `#b8a1ca` | Links, buttons, focus, markers |
|
|
88
|
+
| `--mote-on-accent` | `#ffffff` | `#241d28` | Text on accent (buttons) |
|
|
89
|
+
| `--mote-success` | `#4e7d51` | `#8ab88c` | Positive semantics |
|
|
90
|
+
| `--mote-warning` | `#8a6819` | `#d4b465` | Cautious semantics |
|
|
91
|
+
| `--mote-error` | `#b34d4d` | `#d98a8a` | Destructive semantics |
|
|
92
|
+
| `--mote-info` | `#527097` | `#96b1d1` | Neutral semantics |
|
|
93
|
+
| `--mote-font` | `"Inter", system-ui, …` | | Content typeface stack |
|
|
94
|
+
| `--mote-font-mono` | `"Commit Mono", ui-monospace, …` | | Code typeface stack |
|
|
95
|
+
| `--mote-radius` | `10px` | | Default corner softness |
|
|
96
|
+
| `--mote-radius-sm` | `6px` | | Controls, inline code |
|
|
97
|
+
| `--mote-radius-lg` | `16px` | | Dialogs |
|
|
98
|
+
| `--mote-shadow` / `--mote-shadow-sm` | warm diffuse | | Elevation |
|
|
99
|
+
| `--mote-transition` | `150ms ease` | | Hover/focus timing |
|
|
100
|
+
|
|
101
|
+
Derived tones (soft tints, focus ring, hover deepening) are computed from these via `color-mix()`, so changing a base token re-themes everything consistently — no redundant palette bookkeeping.
|
|
102
|
+
|
|
103
|
+
### Dark mode
|
|
104
|
+
|
|
105
|
+
By default, mote follows the user's system preference. To force a theme, set an attribute on `<html>`:
|
|
106
|
+
|
|
107
|
+
```html
|
|
108
|
+
<html data-theme="dark"> <!-- or "light" -->
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
The accent hue is deliberately plum: it's the one family that doesn't collide with the success/warning/error/info semantics, so a link never looks like a status.
|
|
112
|
+
|
|
113
|
+
### Fonts (optional, not bundled)
|
|
114
|
+
|
|
115
|
+
mote's stacks fall back to your system fonts out of the box. For the full experience, add Inter and Commit Mono (both free; Inter is OFL, Commit Mono is OFL):
|
|
116
|
+
|
|
117
|
+
```html
|
|
118
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/inter@5/index.css">
|
|
119
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/commit-mono@5/index.css">
|
|
120
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/commit-mono@5/700.css">
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
Or self-host with `npm install @fontsource-variable/inter @fontsource/commit-mono` — or any fonts you like; the stacks are just variables.
|
|
124
|
+
|
|
125
|
+
## Opt-in helpers
|
|
126
|
+
|
|
127
|
+
mote is classless by design; these are the only escape hatches, plus status classes that every status-consuming component reads:
|
|
128
|
+
|
|
129
|
+
| Class | Purpose |
|
|
130
|
+
|---|---|
|
|
131
|
+
| `.mote-container` | Centered page wrapper: `width: min(100% - 3rem, 70rem)` |
|
|
132
|
+
| `.mote-muted` | Dimmed secondary text (also a neutral status) |
|
|
133
|
+
| `.mote-note` + status class | Tinted message surfaces |
|
|
134
|
+
| `.mote-success` · `.mote-warning` · `.mote-error` · `.mote-info` | Pure status tokens: they only set `--mote-status` / `--mote-status-soft`, so one override re-skins every note, badge and toast |
|
|
135
|
+
|
|
136
|
+
## Components
|
|
137
|
+
|
|
138
|
+
`mote.components.css` is the optional second file: opt-in components, **CSS-only**, riding on native platform features — popovers, dialogs, exclusive `<details>` groups. No JavaScript anywhere.
|
|
139
|
+
|
|
140
|
+
| Component | Hook |
|
|
141
|
+
|---|---|
|
|
142
|
+
| Document layout (landmark grid) | `.mote-doc` on `<body>` — `:has()` reads your `header`/`nav`/`main`/`aside`/`footer` |
|
|
143
|
+
| Sticky site header / nav pills | `body > header` — classless; `.mote-header`/`.mote-nav` only for shells wrapped in a `<div>` |
|
|
144
|
+
| Breadcrumbs | `nav[aria-label="breadcrumb"]` — semantic, no class |
|
|
145
|
+
| Card grids | `.mote-grid` — auto-fill columns from the container, no breakpoints |
|
|
146
|
+
| Cards | `.mote-card` |
|
|
147
|
+
| Badges | `.mote-badge` + optional status class |
|
|
148
|
+
| Avatars | `.mote-avatar` |
|
|
149
|
+
| Skeleton / spinner | `.mote-skeleton`, `.mote-spinner` |
|
|
150
|
+
| Tooltips | `[popover].mote-tooltip` + `popovertarget` button |
|
|
151
|
+
| Menus | `menu[popover]` + `popovertarget` button |
|
|
152
|
+
| Toasts | `[popover].mote-toast` + status class |
|
|
153
|
+
| Exclusive accordions | `<details name="group">` — the browser closes siblings |
|
|
154
|
+
| Dialog & popover entrance animations | automatic when the file is loaded |
|
|
155
|
+
|
|
156
|
+
Full live documentation with copyable markup for everything above: **[docs/index.html](docs/index.html)**.
|
|
157
|
+
|
|
158
|
+
## Browser support
|
|
159
|
+
|
|
160
|
+
Modern evergreen browsers (uses `color-mix()`, `:focus-visible`, `accent-color`, `:user-invalid`):
|
|
161
|
+
Chrome/Edge 111+, Firefox 113+, Safari 16.2+. `color-mix()`-dependent niceties degrade gracefully on older browsers.
|
|
162
|
+
|
|
163
|
+
The components file additionally uses Baseline 2024 platform features — `popover`, `<details name>`,
|
|
164
|
+
`@starting-style`, `allow-discrete` — each degrading gracefully: accordions stay independent,
|
|
165
|
+
animations become instant, on older engines.
|
|
166
|
+
|
|
167
|
+
## Demo
|
|
168
|
+
|
|
169
|
+
Open [`docs/index.html`](docs/index.html) for the full live documentation, or [`demo.html`](demo.html) for a quick gallery of every styled element.
|
|
170
|
+
|
|
171
|
+
## License
|
|
172
|
+
|
|
173
|
+
[MIT](LICENSE). Fonts referenced by the stacks (Inter, Commit Mono) are SIL OFL 1.1 — see their respective projects.
|
package/mote.components.css
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* mote.components.css — opt-in components for mote.css.
|
|
3
|
-
* v0.
|
|
4
|
-
* https://github.com/abmach/mote
|
|
3
|
+
* v0.3.0 · MIT
|
|
4
|
+
* https://gitlab.com/abmach/mote · mirror: https://github.com/abmach/mote
|
|
5
5
|
*
|
|
6
6
|
* Requires mote.css loaded first (provides the --mote-* tokens).
|
|
7
7
|
* Everything here is CSS-only and rides on native platform features:
|
|
@@ -105,9 +105,15 @@
|
|
|
105
105
|
|
|
106
106
|
/* ---------------------------------------------------------------------------
|
|
107
107
|
* 6. Site header and nav
|
|
108
|
+
*
|
|
109
|
+
* The page shell is styled classlessly: a header that is a direct
|
|
110
|
+
* child of <body> is the site bar, its nav the pill row. The classes
|
|
111
|
+
* exist for the one case landmarks cannot express — a shell wrapped
|
|
112
|
+
* in a <div> (common with frameworks), where body > header cannot
|
|
113
|
+
* see it. All selectors keep :where() specificity so overrides win.
|
|
108
114
|
* ------------------------------------------------------------------------- */
|
|
109
115
|
|
|
110
|
-
.mote-header {
|
|
116
|
+
:where(body > header, .mote-header) {
|
|
111
117
|
position: sticky;
|
|
112
118
|
top: 0;
|
|
113
119
|
z-index: 10;
|
|
@@ -116,7 +122,7 @@
|
|
|
116
122
|
border-block-end: var(--mote-border-width) solid var(--mote-border);
|
|
117
123
|
}
|
|
118
124
|
|
|
119
|
-
.mote-nav ul {
|
|
125
|
+
:where(body > header nav, body > nav, .mote-nav) ul {
|
|
120
126
|
display: flex;
|
|
121
127
|
flex-wrap: wrap;
|
|
122
128
|
gap: 0.25rem;
|
|
@@ -125,7 +131,7 @@
|
|
|
125
131
|
list-style: none;
|
|
126
132
|
}
|
|
127
133
|
|
|
128
|
-
.mote-nav a {
|
|
134
|
+
:where(body > header nav, body > nav, .mote-nav) a {
|
|
129
135
|
display: inline-block;
|
|
130
136
|
padding: 0.35rem 0.8rem;
|
|
131
137
|
border-radius: 999px;
|
|
@@ -134,12 +140,12 @@
|
|
|
134
140
|
transition: background var(--mote-transition), color var(--mote-transition);
|
|
135
141
|
}
|
|
136
142
|
|
|
137
|
-
.mote-nav a:hover {
|
|
143
|
+
:where(body > header nav, body > nav, .mote-nav) a:hover {
|
|
138
144
|
background: var(--mote-accent-soft);
|
|
139
145
|
color: var(--mote-accent-deep);
|
|
140
146
|
}
|
|
141
147
|
|
|
142
|
-
.mote-nav a[aria-current="page"] {
|
|
148
|
+
:where(body > header nav, body > nav, .mote-nav) a[aria-current="page"] {
|
|
143
149
|
background: var(--mote-accent);
|
|
144
150
|
color: var(--mote-on-accent);
|
|
145
151
|
}
|
|
@@ -370,3 +376,99 @@ details[name] > :not(summary) {
|
|
|
370
376
|
}
|
|
371
377
|
}
|
|
372
378
|
}
|
|
379
|
+
|
|
380
|
+
/* ---------------------------------------------------------------------------
|
|
381
|
+
* 12. Layout — document shell and card grids
|
|
382
|
+
*
|
|
383
|
+
* The document layout is opted in with a single class on <body> (or any
|
|
384
|
+
* wrapper): .mote-doc. The landmarks you already write — header, nav,
|
|
385
|
+
* main, aside, footer — become the layout; no classes on the landmarks.
|
|
386
|
+
* A nav becomes a left rail, an aside a right rail, and everything
|
|
387
|
+
* collapses to a single column under 50rem.
|
|
388
|
+
*
|
|
389
|
+
* All :has() guards sit in :where(), so the rules carry zero specificity
|
|
390
|
+
* weight — your own styles on the same landmarks always win.
|
|
391
|
+
* ------------------------------------------------------------------------- */
|
|
392
|
+
|
|
393
|
+
.mote-doc {
|
|
394
|
+
display: grid;
|
|
395
|
+
column-gap: 1.5rem;
|
|
396
|
+
grid-template-rows: auto 1fr auto;
|
|
397
|
+
grid-template-columns: 1fr;
|
|
398
|
+
}
|
|
399
|
+
|
|
400
|
+
/* On <body>, the middle row stretches the page so the footer pins to
|
|
401
|
+
the viewport bottom even when content is short. :where() keeps this
|
|
402
|
+
at base specificity; wrappers (demo boxes, embeds) stay natural-size. */
|
|
403
|
+
:where(body).mote-doc {
|
|
404
|
+
min-height: 100svh;
|
|
405
|
+
}
|
|
406
|
+
|
|
407
|
+
.mote-doc > header { grid-row: 1; grid-column: 1 / -1; }
|
|
408
|
+
.mote-doc > footer { grid-row: 3; grid-column: 1 / -1; }
|
|
409
|
+
|
|
410
|
+
.mote-doc > main { grid-row: 2; grid-column: 1; }
|
|
411
|
+
|
|
412
|
+
/* nav = left rail */
|
|
413
|
+
.mote-doc > nav {
|
|
414
|
+
grid-row: 2;
|
|
415
|
+
grid-column: 1;
|
|
416
|
+
align-self: start;
|
|
417
|
+
position: sticky;
|
|
418
|
+
top: 1rem;
|
|
419
|
+
max-height: calc(100svh - 2rem);
|
|
420
|
+
overflow: auto;
|
|
421
|
+
}
|
|
422
|
+
|
|
423
|
+
.mote-doc:where(:has(> nav)) {
|
|
424
|
+
grid-template-columns: minmax(12rem, 16rem) 1fr;
|
|
425
|
+
}
|
|
426
|
+
|
|
427
|
+
.mote-doc:where(:has(> nav)) > main {
|
|
428
|
+
grid-column: 2;
|
|
429
|
+
}
|
|
430
|
+
|
|
431
|
+
/* aside = right rail (or the main column when there is no nav) */
|
|
432
|
+
.mote-doc > aside {
|
|
433
|
+
grid-row: 2;
|
|
434
|
+
grid-column: 2;
|
|
435
|
+
align-self: start;
|
|
436
|
+
}
|
|
437
|
+
|
|
438
|
+
.mote-doc:where(:has(> nav)) > aside {
|
|
439
|
+
grid-column: 3;
|
|
440
|
+
}
|
|
441
|
+
|
|
442
|
+
.mote-doc:where(:has(> aside)) {
|
|
443
|
+
grid-template-columns: 1fr minmax(10rem, 14rem);
|
|
444
|
+
}
|
|
445
|
+
|
|
446
|
+
.mote-doc:where(:has(> nav)):where(:has(> aside)) {
|
|
447
|
+
grid-template-columns: minmax(12rem, 16rem) 1fr minmax(10rem, 14rem);
|
|
448
|
+
}
|
|
449
|
+
|
|
450
|
+
@media (width < 50rem) {
|
|
451
|
+
.mote-doc:where(:has(> nav)),
|
|
452
|
+
.mote-doc:where(:has(> aside)),
|
|
453
|
+
.mote-doc:where(:has(> nav)):where(:has(> aside)) {
|
|
454
|
+
grid-template-columns: 1fr;
|
|
455
|
+
}
|
|
456
|
+
|
|
457
|
+
.mote-doc > :is(nav, aside, main) {
|
|
458
|
+
grid-column: 1 / -1;
|
|
459
|
+
}
|
|
460
|
+
|
|
461
|
+
.mote-doc > nav {
|
|
462
|
+
position: static;
|
|
463
|
+
max-height: none;
|
|
464
|
+
overflow: visible;
|
|
465
|
+
}
|
|
466
|
+
}
|
|
467
|
+
|
|
468
|
+
/* Card grids: one class, no breakpoints, no column utilities.
|
|
469
|
+
Columns are computed from the container: as many as fit in 16rem. */
|
|
470
|
+
.mote-grid {
|
|
471
|
+
display: grid;
|
|
472
|
+
gap: 1.25rem;
|
|
473
|
+
grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
|
|
474
|
+
}
|
package/mote.css
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* mote.css — a mote of styling for plain HTML.
|
|
3
|
-
* v0.
|
|
4
|
-
* https://github.com/abmach/mote
|
|
3
|
+
* v0.3.0 · MIT
|
|
4
|
+
* https://gitlab.com/abmach/mote · mirror: https://github.com/abmach/mote
|
|
5
5
|
*
|
|
6
6
|
* The smallest thing that can carry style:
|
|
7
7
|
* framework-agnostic, semantic, classless, zero dependencies.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "mote.css",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.0",
|
|
4
4
|
"description": "A mote of styling for plain HTML — tiny, semantic, classless CSS with zero dependencies and no build step.",
|
|
5
5
|
"style": "mote.css",
|
|
6
6
|
"files": [
|
|
@@ -22,9 +22,9 @@
|
|
|
22
22
|
],
|
|
23
23
|
"repository": {
|
|
24
24
|
"type": "git",
|
|
25
|
-
"url": "git+https://
|
|
25
|
+
"url": "git+https://gitlab.com/abmach/mote.git"
|
|
26
26
|
},
|
|
27
27
|
"author": "Arthur Biazon Machado",
|
|
28
28
|
"license": "MIT",
|
|
29
|
-
"homepage": "https://
|
|
29
|
+
"homepage": "https://gitlab.com/abmach/mote#readme"
|
|
30
30
|
}
|