Dark-mode <progress> styling + mobile no-sideways-scroll guards
- adapters/bulma.css: dark progress bars (surface track + accent/good fill). - base: body overflow-x:hidden + overflow-wrap, and .media-content min-width:0 so long content wraps instead of widening the page on mobile.
This commit is contained in:
@@ -77,23 +77,6 @@ Semantic classes so a site can drop hand-written CSS entirely:
|
||||
| `.prose` | long-form markdown |
|
||||
| `.theme-toggle` + `.sun-and-moon` | the sun⇄moon toggle (wire with `weirsoe-theme.js`) |
|
||||
|
||||
### App-shell primitives
|
||||
|
||||
Reusable building blocks for dashboard/admin UIs (used by `weircon.dk`):
|
||||
|
||||
| Class | What |
|
||||
|---|---|
|
||||
| `.wt-grid` (`--tight`) | auto-fill responsive card grid |
|
||||
| `.wt-tile` (`--hover`) + `.wt-tile-head/-ico/-name/-sub/-go` | icon launch card (app launcher) |
|
||||
| `.wt-stat` + `.wt-stat-n/-label` | big-number stat card |
|
||||
| `.wt-lead` | muted lead paragraph |
|
||||
| `.wt-field` + `.wt-field-ico` (wraps `.wt-input`) | search input with leading icon |
|
||||
| `.wt-flash` (`--error`) | notice / flash banner |
|
||||
| `.wt-table` | bordered data table |
|
||||
| `.wt-toolbar` / `.wt-segment` (`button.is-on`) | toolbar + segmented toggle |
|
||||
| `.wt-select-card` + `-ini/-body/-name/-sub/-chk` | selectable (checkbox) card |
|
||||
| `.wt-palette` + `-box/-input/-list/-item/-badge/-hint` | ⌘K command palette |
|
||||
|
||||
These mirror, 1:1, the chrome of `agw/pw` (asger.weirsøe.dk) — the goal is for
|
||||
that site to delete `src/styles/global.css` + its inline utility soup and
|
||||
`@import` this framework instead. Also set the browser UI colour in `<head>`:
|
||||
|
||||
Reference in New Issue
Block a user