Compare commits
3 commits
910b0e42a6
...
79b6b85a94
| Author | SHA1 | Date | |
|---|---|---|---|
79b6b85a94
|
|||
|
9ace9ea2bb
|
|||
|
b602a8d54e
|
15 changed files with 1232 additions and 1201 deletions
|
|
@ -266,6 +266,27 @@
|
|||
|
||||
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(115, 115, 115)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
|
||||
/* Font weights */
|
||||
--weight-light: var(--font-weight-2);
|
||||
--weight-normal: var(--font-weight-4);
|
||||
--weight-medium: var(--font-weight-5);
|
||||
--weight-semibold: var(--font-weight-6);
|
||||
--weight-bold: var(--font-weight-7);
|
||||
|
||||
/* Shadows */
|
||||
--shadow-dropdown: var(--shadow-2);
|
||||
--shadow-modal: var(--shadow-4);
|
||||
|
||||
/* Focus ring */
|
||||
--focus-ring-width: var(--border-size-2);
|
||||
--border-width-thick: var(--border-size-3);
|
||||
|
||||
/* Dropdown */
|
||||
--dropdown-min-width: var(--size-px-12);
|
||||
|
||||
/* Gap in spacing scale */
|
||||
--space-5a: 1.25rem; /* between --space-4 (1rem) and --space-5 (1.5rem) */
|
||||
|
||||
|
||||
/* ══════════════════════════════════════════════════════════════════
|
||||
AGENT-NATIVE TOKENS
|
||||
|
|
@ -395,19 +416,3 @@
|
|||
@media (--lg-n-above) { html { font-size: 103%; } }
|
||||
@media (--xl-n-above) { html { font-size: 106%; } }
|
||||
@media (--xxl-n-above) { html { font-size: 109%; } }
|
||||
|
||||
|
||||
/* ══════════════════════════════════════════════════════════════════
|
||||
EDITORIAL DEFAULTS
|
||||
Opinionated ASW decisions that go beyond tokens — centering,
|
||||
spacing rhythms, and layout choices that define the ASW look.
|
||||
══════════════════════════════════════════════════════════════════ */
|
||||
|
||||
/* Nav content centered at --width-xl without a wrapper element.
|
||||
max() falls back to --container-padding on narrow viewports. */
|
||||
body > nav {
|
||||
padding-inline: max(var(--container-padding), calc((100% - var(--width-xl)) / 2));
|
||||
}
|
||||
[data-layout="docs"] > article {
|
||||
max-width: var(--width-prose);
|
||||
}
|
||||
|
|
@ -145,7 +145,7 @@ p {
|
|||
margin-bottom: var(--type-space);
|
||||
color: var(--text);
|
||||
font-style: normal;
|
||||
font-weight: var(--font-weight-4);
|
||||
font-weight: var(--weight-normal);
|
||||
}
|
||||
|
||||
/* ── Typography: Lists ─────────────────────────────────────────────── */
|
||||
|
|
@ -158,7 +158,7 @@ ul {
|
|||
margin-bottom: var(--type-space);
|
||||
color: var(--text);
|
||||
font-style: normal;
|
||||
font-weight: var(--font-weight-4);
|
||||
font-weight: var(--weight-normal);
|
||||
}
|
||||
|
||||
:where(ol, ul) li {
|
||||
|
|
@ -225,7 +225,7 @@ del {
|
|||
}
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: var(--border-size-1) dotted;
|
||||
border-bottom: var(--border-width) dotted;
|
||||
text-decoration: none;
|
||||
cursor: help;
|
||||
}
|
||||
|
|
@ -297,7 +297,7 @@ small {
|
|||
text-indent: 0;
|
||||
color: var(--text);
|
||||
font-style: normal;
|
||||
font-weight: var(--font-weight-4);
|
||||
font-weight: var(--weight-normal);
|
||||
}
|
||||
|
||||
th,
|
||||
|
|
@ -306,14 +306,14 @@ td {
|
|||
border-bottom: var(--border-width) solid var(--border);
|
||||
background-color: transparent;
|
||||
color: var(--text);
|
||||
font-weight: var(--font-weight-4);
|
||||
font-weight: var(--weight-normal);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
thead th,
|
||||
thead td {
|
||||
font-weight: 600;
|
||||
border-bottom-width: var(--border-size-2);
|
||||
border-bottom-width: var(--focus-ring-width);
|
||||
}
|
||||
|
||||
tfoot th,
|
||||
|
|
@ -339,7 +339,7 @@ samp {
|
|||
border-radius: var(--radius-md);
|
||||
background: var(--surface-1);
|
||||
color: var(--code-color);
|
||||
font-weight: var(--font-weight-4);
|
||||
font-weight: var(--weight-normal);
|
||||
line-height: initial;
|
||||
}
|
||||
|
||||
|
|
@ -471,10 +471,10 @@ pre[class*="language-"] {
|
|||
.token.important,
|
||||
.token.variable {
|
||||
color: var(--syntax-variable);
|
||||
font-weight: var(--font-weight-5);
|
||||
font-weight: var(--weight-medium);
|
||||
}
|
||||
|
||||
.token.bold { font-weight: var(--font-weight-7); }
|
||||
.token.bold { font-weight: var(--weight-bold); }
|
||||
.token.italic { font-style: italic; }
|
||||
|
||||
/* Light mode overrides */
|
||||
File diff suppressed because it is too large
Load diff
328
src/layers/03-landmarks.css
Normal file
328
src/layers/03-landmarks.css
Normal file
|
|
@ -0,0 +1,328 @@
|
|||
/**
|
||||
* 03-landmarks.css
|
||||
* HTML landmark elements — structural bones of a page.
|
||||
* Part of: Agentic Semantic Web
|
||||
*
|
||||
* Covers: body > nav, article, aside, section, hgroup, dt/dd, body > footer
|
||||
*/
|
||||
|
||||
/* ── Navigation ────────────────────────────────────────────────────────*/
|
||||
/* Semantic nav: <nav><strong>Brand</strong><ul><li><a>...</a></li></ul></nav> */
|
||||
|
||||
/* Nav content centered at --width-xl without a wrapper element.
|
||||
max() falls back to --container-padding on narrow viewports. */
|
||||
body > nav {
|
||||
padding-inline: max(var(--container-padding), calc((100% - var(--width-xl)) / 2));
|
||||
}
|
||||
|
||||
body > nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-top: var(--space-5);
|
||||
padding-bottom: var(--space-5);
|
||||
|
||||
margin-bottom: var(--space-6);
|
||||
border-bottom: var(--border-width) solid var(--border);
|
||||
}
|
||||
|
||||
body > nav strong {
|
||||
font-family: var(--font-mono);
|
||||
font-weight: 700;
|
||||
font-size: var(--text-base);
|
||||
letter-spacing: -0.03em;
|
||||
}
|
||||
|
||||
body > nav ul {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
gap: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
body > nav ul li {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body > nav ul li + li::before {
|
||||
content: "|";
|
||||
color: var(--text-dim);
|
||||
margin: 0 0.75rem;
|
||||
}
|
||||
|
||||
body > nav a {
|
||||
color: var(--text-2);
|
||||
text-decoration: none;
|
||||
transition: color var(--ease);
|
||||
}
|
||||
|
||||
body > nav a:hover,
|
||||
body > nav a[aria-current="page"] {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
/* Medium screens: allow links to wrap */
|
||||
@media (--nav-compact) {
|
||||
body > nav ul {
|
||||
flex-wrap: wrap;
|
||||
gap: 0.25rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Small screens: stack brand above links */
|
||||
@media (--md-n-below) {
|
||||
body > nav {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
body > nav ul:last-child {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
body > nav ul:last-child li + li::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Nav Dropdown ──────────────────────────────────────────────────────*/
|
||||
/* <details> inside <nav> becomes a dropdown menu. No classes needed.
|
||||
Usage: <nav><ul><li><details><summary>Menu</summary><ul><li>...</li></ul></details></li></ul></nav> */
|
||||
|
||||
body > nav li:has(details) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
body > nav details {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body > nav details summary {
|
||||
color: var(--text-2);
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-sm);
|
||||
list-style: none;
|
||||
cursor: pointer;
|
||||
transition: color var(--ease);
|
||||
}
|
||||
|
||||
body > nav details summary:hover {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
/* Override accordion chevron in nav context */
|
||||
body > nav details summary::after {
|
||||
content: "▾";
|
||||
float: none;
|
||||
margin-inline-start: 0.25rem;
|
||||
transform: none;
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
body > nav details[open] > summary::after {
|
||||
content: "▴";
|
||||
transform: none;
|
||||
}
|
||||
|
||||
/* Dropdown panel */
|
||||
body > nav details > ul,
|
||||
body > nav details > div {
|
||||
position: absolute;
|
||||
top: calc(100% + 0.5rem);
|
||||
left: 0;
|
||||
min-width: var(--dropdown-min-width);
|
||||
padding: 0.5rem 0;
|
||||
margin: 0;
|
||||
background: var(--surface-1);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-dropdown);
|
||||
z-index: 20;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
body > nav details > ul li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Remove pipe separator in dropdown items */
|
||||
body > nav details > ul li + li::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body > nav details > ul li a {
|
||||
display: block;
|
||||
padding: 0.35rem 1rem;
|
||||
color: var(--text-2);
|
||||
text-decoration: none;
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-sm);
|
||||
transition: background-color var(--ease-fast), color var(--ease-fast);
|
||||
}
|
||||
|
||||
body > nav details > ul li a:hover {
|
||||
background: var(--border-subtle);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
/* Close dropdown when clicking outside (CSS-only via :focus-within) */
|
||||
nav details:not(:focus-within) > ul,
|
||||
nav details:not(:focus-within) > div {
|
||||
/* Allow browser default open/close behavior —
|
||||
no forced hiding. Agent can add JS for click-outside. */
|
||||
}
|
||||
|
||||
/* Mobile: dropdown becomes full-width */
|
||||
@media (--md-n-below) {
|
||||
nav details > ul,
|
||||
nav details > div {
|
||||
position: static;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
border-left: 2px solid var(--border);
|
||||
margin-left: 0.5rem;
|
||||
padding: 0.25rem 0 0.25rem 0.5rem;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Articles & Cards ──────────────────────────────────────────────────*/
|
||||
/* Semantic article: <article><header><h3>Title</h3></header>Content</article> */
|
||||
/* Container query: layout adapts to article's own width, not viewport.
|
||||
An article in a sidebar shrinks gracefully; at full width it expands. */
|
||||
|
||||
article {
|
||||
container-type: inline-size;
|
||||
container-name: article;
|
||||
background: transparent;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--space-4) var(--space-5a);
|
||||
margin: var(--space-3) 0;
|
||||
}
|
||||
|
||||
article > header {
|
||||
margin: 0 0 var(--space-2) 0;
|
||||
padding: 0 0 0.4rem 0;
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
border-top: none;
|
||||
border-radius: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
article header h3 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--text-3);
|
||||
}
|
||||
|
||||
/* Narrow container: compact card (sidebar, grid cell) */
|
||||
@container article (max-width: 300px) {
|
||||
article > header {
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
article header h3 {
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
article > :is(p, dl, ul, ol) {
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
}
|
||||
|
||||
/* Wide container: spacious layout */
|
||||
@container article (min-width: 600px) {
|
||||
article {
|
||||
padding: var(--space-5) var(--space-6);
|
||||
}
|
||||
|
||||
article > header {
|
||||
margin-bottom: var(--space-3);
|
||||
padding-bottom: var(--space-2);
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Definition Lists ──────────────────────────────────────────────────*/
|
||||
/* Monospace data display for dt/dd pairs */
|
||||
|
||||
dt {
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 500;
|
||||
color: var(--text-2);
|
||||
margin-top: var(--space-3);
|
||||
}
|
||||
|
||||
dd {
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text);
|
||||
margin-left: 0;
|
||||
margin-top: 0.15rem;
|
||||
}
|
||||
|
||||
article dt:first-of-type {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/* ── Sections ──────────────────────────────────────────────────────────*/
|
||||
|
||||
section + section {
|
||||
padding-top: var(--space-5);
|
||||
border-top: var(--border-width) solid var(--border-subtle);
|
||||
}
|
||||
|
||||
hgroup p {
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-3);
|
||||
margin-top: var(--space-1);
|
||||
}
|
||||
|
||||
/* Section intro: hgroup as centered subtitle block */
|
||||
section > hgroup:first-child {
|
||||
text-align: center;
|
||||
margin-bottom: var(--space-6);
|
||||
}
|
||||
|
||||
/* Card variant: navigation cards use UI font h3, not session-log monospace */
|
||||
article[data-role="card"] header h3 {
|
||||
font-family: var(--font-ui);
|
||||
font-size: var(--h3-size);
|
||||
font-weight: var(--h3-weight);
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
/* ── Footer ────────────────────────────────────────────────────────────*/
|
||||
|
||||
body > footer,
|
||||
footer:last-child {
|
||||
margin-top: 3rem;
|
||||
padding-top: var(--space-5);
|
||||
padding-bottom: var(--space-6);
|
||||
border-top: var(--border-width) solid var(--border);
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-3);
|
||||
}
|
||||
250
src/layers/04-forms.css
Normal file
250
src/layers/04-forms.css
Normal file
|
|
@ -0,0 +1,250 @@
|
|||
/**
|
||||
* 04-forms.css
|
||||
* Form element styling: buttons, inputs, selects, textareas, checkboxes, radios.
|
||||
* Part of: Agentic Semantic Web
|
||||
*
|
||||
* Ported from: Pico CSS v2.1.1 (MIT)
|
||||
* Modernizations: accent-color for checkbox/radio, no class-based variants
|
||||
*/
|
||||
|
||||
/* ── Buttons ───────────────────────────────────────────────────────────*/
|
||||
|
||||
button {
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
font-family: inherit;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
button,
|
||||
[type=submit],
|
||||
[type=reset],
|
||||
[type=button],
|
||||
[role=button] {
|
||||
display: inline-block;
|
||||
padding: var(--input-py) var(--input-px);
|
||||
border: var(--border-width) solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
outline: none;
|
||||
background-color: var(--surface);
|
||||
color: var(--text);
|
||||
font-weight: var(--weight-normal);
|
||||
font-size: var(--text-base);
|
||||
line-height: var(--leading);
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: background-color var(--ease),
|
||||
border-color var(--ease),
|
||||
color var(--ease);
|
||||
}
|
||||
|
||||
button:is(:hover, :active, :focus-visible),
|
||||
[type=submit]:is(:hover, :active, :focus-visible),
|
||||
[type=reset]:is(:hover, :active, :focus-visible),
|
||||
[type=button]:is(:hover, :active, :focus-visible),
|
||||
[role=button]:is(:hover, :active, :focus-visible) {
|
||||
background-color: var(--surface-hover);
|
||||
border-color: var(--border);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
button:focus-visible,
|
||||
[type=submit]:focus-visible,
|
||||
[type=reset]:focus-visible,
|
||||
[type=button]:focus-visible,
|
||||
[role=button]:focus-visible {
|
||||
box-shadow: 0 0 0 var(--outline-width) var(--accent-focus);
|
||||
}
|
||||
|
||||
button[disabled],
|
||||
[type=submit][disabled],
|
||||
[type=reset][disabled],
|
||||
[type=button][disabled],
|
||||
[role=button][disabled] {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* ── Form Elements ─────────────────────────────────────────────────────*/
|
||||
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
margin: 0;
|
||||
font-size: var(--text-base);
|
||||
line-height: var(--leading);
|
||||
font-family: inherit;
|
||||
letter-spacing: inherit;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
margin-bottom: var(--space-4);
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
fieldset legend,
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: calc(var(--space-4) * 0.375);
|
||||
color: var(--text);
|
||||
font-weight: var(--weight-normal);
|
||||
}
|
||||
|
||||
input:not([type=checkbox], [type=radio], [type=range], [type=file]),
|
||||
select,
|
||||
textarea {
|
||||
width: 100%;
|
||||
padding: var(--input-py) var(--input-px);
|
||||
border: var(--border-width) solid var(--input-border);
|
||||
border-radius: var(--radius-md);
|
||||
outline: none;
|
||||
background-color: var(--input-bg);
|
||||
color: var(--text);
|
||||
font-weight: var(--weight-normal);
|
||||
transition: background-color var(--ease),
|
||||
border-color var(--ease),
|
||||
color var(--ease);
|
||||
}
|
||||
|
||||
input:not([type=checkbox], [type=radio], [type=range], [type=file], [readonly]):is(:active, :focus-visible),
|
||||
select:not([readonly]):is(:active, :focus-visible),
|
||||
textarea:not([readonly]):is(:active, :focus-visible) {
|
||||
border-color: var(--accent);
|
||||
background-color: var(--input-active-bg);
|
||||
}
|
||||
|
||||
input:not([type=checkbox], [type=radio], [type=range], [type=file], [readonly]):focus-visible,
|
||||
select:not([readonly]):focus-visible,
|
||||
textarea:not([readonly]):focus-visible {
|
||||
box-shadow: 0 0 0 var(--outline-width) var(--accent);
|
||||
}
|
||||
|
||||
input:not([type=checkbox], [type=radio], [type=range], [type=file])[disabled],
|
||||
select[disabled],
|
||||
textarea[disabled] {
|
||||
opacity: var(--disabled-opacity);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
input::placeholder,
|
||||
textarea::placeholder,
|
||||
select:invalid {
|
||||
color: var(--text-3);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
input:not([type=checkbox], [type=radio]),
|
||||
select,
|
||||
textarea {
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
/* ── Select Dropdown ───────────────────────────────────────────────────*/
|
||||
|
||||
select:not([multiple], [size]) {
|
||||
padding-right: calc(var(--input-px) + 1.5rem);
|
||||
background-image: var(--icon-chevron);
|
||||
background-position: center right 0.75rem;
|
||||
background-size: 1rem auto;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
select[multiple] option:checked {
|
||||
background: var(--input-selected);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
/* ── Textarea ──────────────────────────────────────────────────────────*/
|
||||
|
||||
textarea {
|
||||
display: block;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
/* ── Checkboxes & Radios (Modern CSS) ──────────────────────────────────*/
|
||||
|
||||
label:has([type=checkbox], [type=radio]) {
|
||||
width: fit-content;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
[type=checkbox],
|
||||
[type=radio] {
|
||||
width: 1.25em;
|
||||
height: 1.25em;
|
||||
margin-top: -0.125em;
|
||||
margin-right: 0.5em;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
|
||||
/* Modern CSS: use browser's native styling with our accent color */
|
||||
accent-color: var(--accent);
|
||||
}
|
||||
|
||||
[type=checkbox] ~ label,
|
||||
[type=radio] ~ label {
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
[type=checkbox] ~ label:not(:last-of-type),
|
||||
[type=radio] ~ label:not(:last-of-type) {
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
/* ── Validation States ─────────────────────────────────────────────────*/
|
||||
|
||||
input[aria-invalid=false],
|
||||
select[aria-invalid=false],
|
||||
textarea[aria-invalid=false] {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
input[aria-invalid=false]:is(:active, :focus-visible),
|
||||
select[aria-invalid=false]:is(:active, :focus-visible),
|
||||
textarea[aria-invalid=false]:is(:active, :focus-visible) {
|
||||
border-color: var(--accent-hover);
|
||||
box-shadow: 0 0 0 var(--outline-width) var(--accent-focus) !important;
|
||||
}
|
||||
|
||||
input[aria-invalid=true],
|
||||
select[aria-invalid=true],
|
||||
textarea[aria-invalid=true] {
|
||||
border-color: var(--error);
|
||||
}
|
||||
|
||||
input[aria-invalid=true]:is(:active, :focus-visible),
|
||||
select[aria-invalid=true]:is(:active, :focus-visible),
|
||||
textarea[aria-invalid=true]:is(:active, :focus-visible) {
|
||||
border-color: var(--error-active);
|
||||
box-shadow: 0 0 0 var(--outline-width) var(--error-focus) !important;
|
||||
}
|
||||
|
||||
/* ── Helper Text ───────────────────────────────────────────────────────*/
|
||||
|
||||
:where(input, select, textarea, fieldset) + small {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-top: calc(var(--space-4) * -0.75);
|
||||
margin-bottom: var(--space-4);
|
||||
color: var(--text-3);
|
||||
}
|
||||
|
||||
:where(input, select, textarea, fieldset)[aria-invalid=false] + small {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
:where(input, select, textarea, fieldset)[aria-invalid=true] + small {
|
||||
color: var(--accent-red);
|
||||
}
|
||||
|
||||
label > :where(input, select, textarea) {
|
||||
margin-top: calc(var(--space-4) * 0.25);
|
||||
}
|
||||
393
src/layers/05-components.css
Normal file
393
src/layers/05-components.css
Normal file
|
|
@ -0,0 +1,393 @@
|
|||
/**
|
||||
* 03-components.css → will become 05-components.css in Task 10
|
||||
* Compound UI patterns: accordion, dialog, breadcrumb, steps.
|
||||
* Part of: Agentic Semantic Web
|
||||
*
|
||||
* Buttons/forms extracted to 04-forms.css
|
||||
* Landmarks extracted to 03-landmarks.css
|
||||
* Sidebar/TOC extracted to 06-navigation.css
|
||||
*/
|
||||
|
||||
/* ── Accordion / Disclosure ────────────────────────────────────────────*/
|
||||
/* Standalone <details>/<summary> — no JS needed.
|
||||
Nav dropdown variant lives in 03-landmarks.css.
|
||||
Usage:
|
||||
<details>
|
||||
<summary>Title</summary>
|
||||
<p>Content</p>
|
||||
</details>
|
||||
Grouped variant:
|
||||
<div data-role="accordion">
|
||||
<details>…</details>
|
||||
<details>…</details>
|
||||
</div>
|
||||
*/
|
||||
|
||||
details:not(nav details) {
|
||||
border: var(--border-width) solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
margin-bottom: var(--space-3);
|
||||
background: var(--surface-1);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
details:not(nav details) > summary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: var(--space-3) var(--space-4);
|
||||
font-family: var(--font-ui);
|
||||
font-size: var(--text-base);
|
||||
font-weight: var(--weight-medium);
|
||||
color: var(--text);
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
user-select: none;
|
||||
transition: background-color var(--ease), color var(--ease);
|
||||
}
|
||||
|
||||
details:not(nav details) > summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Chevron indicator */
|
||||
details:not(nav details) > summary::after {
|
||||
content: "▾";
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-3);
|
||||
transition: transform var(--ease);
|
||||
flex-shrink: 0;
|
||||
margin-inline-start: var(--space-3);
|
||||
}
|
||||
|
||||
details:not(nav details)[open] > summary::after {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
details:not(nav details) > summary:hover {
|
||||
background-color: var(--surface-hover);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
details:not(nav details) > summary:focus-visible {
|
||||
outline: var(--outline-width) solid var(--accent-focus);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
/* Body content */
|
||||
details:not(nav details) > :not(summary) {
|
||||
padding: var(--space-3) var(--space-4) var(--space-4);
|
||||
border-top: var(--border-width) solid var(--border);
|
||||
}
|
||||
|
||||
details:not(nav details) > :not(summary):last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Grouped accordion: flush borders between items */
|
||||
[data-role="accordion"] > details:not(nav details) {
|
||||
margin-bottom: 0;
|
||||
border-radius: 0;
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
|
||||
[data-role="accordion"] > details:not(nav details):first-child {
|
||||
border-radius: var(--radius-md) var(--radius-md) 0 0;
|
||||
}
|
||||
|
||||
[data-role="accordion"] > details:not(nav details):last-child {
|
||||
border-radius: 0 0 var(--radius-md) var(--radius-md);
|
||||
border-bottom-width: var(--border-width);
|
||||
}
|
||||
|
||||
[data-role="accordion"] > details:not(nav details):only-child {
|
||||
border-radius: var(--radius-md);
|
||||
border-bottom-width: var(--border-width);
|
||||
}
|
||||
|
||||
/* ── Dialog / Modal ────────────────────────────────────────────────────*/
|
||||
/* Native <dialog> element. Works with dialog.showModal() / dialog.close().
|
||||
Usage:
|
||||
<dialog id="my-dialog">
|
||||
<header><h2>Title</h2></header>
|
||||
<p>Body content.</p>
|
||||
<footer><button>Close</button></footer>
|
||||
</dialog>
|
||||
*/
|
||||
|
||||
dialog {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
margin: auto;
|
||||
padding: 0;
|
||||
border: var(--border-width) solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--surface-1);
|
||||
color: var(--text);
|
||||
box-shadow: var(--shadow-modal);
|
||||
z-index: var(--layer-4);
|
||||
max-width: min(90vw, 42rem);
|
||||
max-height: min(90vh, 40rem);
|
||||
overflow: auto;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--border) transparent;
|
||||
}
|
||||
|
||||
dialog:not([open]) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Backdrop (modal mode only — showModal()) */
|
||||
dialog::backdrop {
|
||||
background: var(--modal-overlay);
|
||||
backdrop-filter: blur(4px);
|
||||
-webkit-backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
/* Internal layout */
|
||||
dialog > header {
|
||||
padding: var(--space-4) var(--space-5);
|
||||
border-bottom: var(--border-width) solid var(--border);
|
||||
background: transparent;
|
||||
border-top: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
dialog > header h1,
|
||||
dialog > header h2,
|
||||
dialog > header h3 {
|
||||
margin: 0;
|
||||
font-size: var(--text-2xl);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
dialog > :not(header):not(footer) {
|
||||
padding: var(--space-5);
|
||||
}
|
||||
|
||||
dialog > footer {
|
||||
padding: var(--space-3) var(--space-5);
|
||||
border-top: var(--border-width) solid var(--border);
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: var(--space-3);
|
||||
background: var(--surface);
|
||||
border-radius: 0 0 var(--radius-md) var(--radius-md);
|
||||
}
|
||||
|
||||
|
||||
/* ══════════════════════════════════════════════════════════════════════════
|
||||
Breadcrumb — <nav data-role="breadcrumb" aria-label="breadcrumb">
|
||||
Usage:
|
||||
<nav data-role="breadcrumb" aria-label="breadcrumb">
|
||||
<ol>
|
||||
<li><a href="/">Home</a></li>
|
||||
<li><a href="/docs/">Docs</a></li>
|
||||
<li aria-current="page">Token System</li>
|
||||
</ol>
|
||||
</nav>
|
||||
══════════════════════════════════════════════════════════════════════════ */
|
||||
|
||||
[data-role="breadcrumb"] {
|
||||
font-family: var(--font-ui);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
[data-role="breadcrumb"] ol {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
[data-role="breadcrumb"] li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Separator: slash before every item after the first */
|
||||
[data-role="breadcrumb"] li + li::before {
|
||||
content: "/";
|
||||
color: var(--text-3);
|
||||
padding-inline: var(--space-2);
|
||||
user-select: none;
|
||||
font-weight: var(--weight-normal);
|
||||
}
|
||||
|
||||
[data-role="breadcrumb"] a {
|
||||
color: var(--text-2);
|
||||
text-decoration: none;
|
||||
transition: color var(--ease);
|
||||
}
|
||||
|
||||
[data-role="breadcrumb"] a:hover {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
/* Current page: plain text, full colour, no link underline */
|
||||
[data-role="breadcrumb"] [aria-current="page"] {
|
||||
color: var(--text);
|
||||
font-weight: var(--weight-medium);
|
||||
}
|
||||
|
||||
|
||||
/* ══════════════════════════════════════════════════════════════════════════
|
||||
Steps — <ol data-role="steps"> with data-status on each <li>
|
||||
Usage:
|
||||
<ol data-role="steps">
|
||||
<li data-status="complete"><span>Plan</span></li>
|
||||
<li data-status="active"><span>Build</span></li>
|
||||
<li data-status="pending"><span>Deploy</span></li>
|
||||
</ol>
|
||||
|
||||
data-status values: complete / active / pending
|
||||
══════════════════════════════════════════════════════════════════════════ */
|
||||
|
||||
[data-role="steps"] {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
list-style: none;
|
||||
margin: var(--space-5) 0;
|
||||
padding: 0;
|
||||
gap: 0;
|
||||
counter-reset: steps-counter;
|
||||
}
|
||||
|
||||
[data-role="steps"] > li {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
position: relative;
|
||||
counter-increment: steps-counter;
|
||||
padding-top: calc(var(--space-5) + var(--space-3)); /* room for the node circle */
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Connector line between steps */
|
||||
[data-role="steps"] > li + li::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: calc(var(--space-3) / 2 + 0.75rem); /* vertically centred on the node */
|
||||
left: calc(-50% + 1.25rem);
|
||||
right: calc(50% + 1.25rem);
|
||||
height: var(--border-width);
|
||||
background: var(--border);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
/* Step node circle — drawn via ::after on the li */
|
||||
[data-role="steps"] > li::after {
|
||||
content: counter(steps-counter);
|
||||
position: absolute;
|
||||
top: var(--space-3);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: var(--weight-semibold);
|
||||
z-index: 1;
|
||||
/* default (pending) colours — overridden below */
|
||||
background: var(--surface-card);
|
||||
border: var(--border-width) solid var(--border);
|
||||
color: var(--text-3);
|
||||
transition: background var(--ease), border-color var(--ease), color var(--ease);
|
||||
}
|
||||
|
||||
/* Step label text */
|
||||
[data-role="steps"] > li > span {
|
||||
font-family: var(--font-ui);
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-3);
|
||||
transition: color var(--ease);
|
||||
padding-inline: var(--space-2);
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
/* ── Status variants ────────────────────────────────────────────── */
|
||||
|
||||
[data-role="steps"] > [data-status="complete"]::after {
|
||||
content: "✓";
|
||||
background: var(--accent-subtle);
|
||||
border-color: var(--accent);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
[data-role="steps"] > [data-status="complete"] > span {
|
||||
color: var(--text-2);
|
||||
}
|
||||
|
||||
/* Connector line from a completed step is accented */
|
||||
[data-role="steps"] > [data-status="complete"] + li::before {
|
||||
background: var(--accent);
|
||||
}
|
||||
|
||||
[data-role="steps"] > [data-status="active"]::after {
|
||||
background: var(--accent);
|
||||
border-color: var(--accent);
|
||||
color: var(--on-accent);
|
||||
box-shadow: 0 0 0 var(--focus-ring-width) var(--accent-focus);
|
||||
}
|
||||
|
||||
[data-role="steps"] > [data-status="active"] > span {
|
||||
color: var(--text);
|
||||
font-weight: var(--weight-medium);
|
||||
}
|
||||
|
||||
/* pending is the default — no additional rules needed */
|
||||
|
||||
/* ── Vertical variant ───────────────────────────────────────────── */
|
||||
/* Add data-layout="vertical" to the ol for a top-down flow */
|
||||
|
||||
[data-role="steps"][data-layout="vertical"] {
|
||||
flex-direction: column;
|
||||
gap: var(--space-5);
|
||||
}
|
||||
|
||||
[data-role="steps"][data-layout="vertical"] > li {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
text-align: left;
|
||||
padding-top: 0;
|
||||
padding-left: calc(1.5rem + var(--space-4)); /* room for the node */
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
[data-role="steps"][data-layout="vertical"] > li::after {
|
||||
top: 50%;
|
||||
left: 0;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
/* Vertical connector: vertical line */
|
||||
[data-role="steps"][data-layout="vertical"] > li + li::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: calc(-1 * var(--space-5));
|
||||
left: 0.675rem; /* centred on the 1.5rem node */
|
||||
width: var(--border-width);
|
||||
height: var(--space-5);
|
||||
right: auto;
|
||||
background: var(--border);
|
||||
}
|
||||
|
||||
[data-role="steps"][data-layout="vertical"] > [data-status="complete"] + li::before {
|
||||
background: var(--accent);
|
||||
}
|
||||
|
||||
[data-role="steps"][data-layout="vertical"] > li > span {
|
||||
padding-inline: 0;
|
||||
}
|
||||
96
src/layers/06-navigation.css
Normal file
96
src/layers/06-navigation.css
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
/**
|
||||
* 06-navigation.css
|
||||
* Navigation patterns beyond the basic nav landmark.
|
||||
* Part of: Agentic Semantic Web
|
||||
*
|
||||
* Covers: sidebar navigation, table of contents (TOC)
|
||||
*/
|
||||
|
||||
/* ── Sidebar nav ────────────────────────────────────────────────────── */
|
||||
|
||||
nav[data-nav="sidebar"] h3 {
|
||||
color: var(--text-3);
|
||||
font-size: var(--text-xs);
|
||||
font-family: var(--font-mono);
|
||||
font-weight: var(--weight-medium);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
margin-top: var(--space-4);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
nav[data-nav="sidebar"] h3:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
nav[data-nav="sidebar"] ul {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
gap: var(--space-1);
|
||||
font-family: var(--font-ui);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
nav[data-nav="sidebar"] a {
|
||||
display: block;
|
||||
padding: var(--space-2) var(--space-3);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--text-2);
|
||||
text-decoration: none;
|
||||
transition: background-color var(--ease), color var(--ease);
|
||||
}
|
||||
|
||||
nav[data-nav="sidebar"] a:hover {
|
||||
background-color: var(--surface-hover);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
nav[data-nav="sidebar"] a[aria-current] {
|
||||
background-color: var(--accent-subtle);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
/* ── TOC (aside) ────────────────────────────────────────────────────── */
|
||||
|
||||
aside[data-toc] h3 {
|
||||
color: var(--text-3);
|
||||
font-size: var(--text-xs);
|
||||
font-family: var(--font-mono);
|
||||
font-weight: var(--weight-medium);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
margin-bottom: var(--space-2);
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
aside[data-toc] nav ul {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
gap: var(--space-1);
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
aside[data-toc] nav a {
|
||||
display: block;
|
||||
padding: var(--space-1) var(--space-2);
|
||||
color: var(--text-3);
|
||||
text-decoration: none;
|
||||
border-left: var(--focus-ring-width) solid transparent;
|
||||
transition: color var(--ease), border-color var(--ease);
|
||||
}
|
||||
|
||||
aside[data-toc] nav a:hover {
|
||||
color: var(--text);
|
||||
border-left-color: var(--border);
|
||||
}
|
||||
|
||||
aside[data-toc] nav a[aria-current] {
|
||||
color: var(--accent);
|
||||
border-left-color: var(--accent);
|
||||
}
|
||||
|
|
@ -522,7 +522,7 @@
|
|||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: var(--border-size-2);
|
||||
height: var(--focus-ring-width);
|
||||
background: var(--accent);
|
||||
z-index: 9999;
|
||||
/* Subtle shadow so bar is visible on light pages too */
|
||||
|
|
@ -546,7 +546,7 @@
|
|||
|
||||
/* Subtle accent on AI-generated sections — light left border indicator */
|
||||
[data-ai-disclosure] {
|
||||
border-left: var(--border-size-2) solid transparent;
|
||||
border-left: var(--focus-ring-width) solid transparent;
|
||||
padding-left: var(--space-3);
|
||||
}
|
||||
|
||||
|
|
@ -561,7 +561,7 @@
|
|||
/* Autonomous — more distinct: full accent treatment */
|
||||
[data-ai-disclosure="autonomous"] {
|
||||
border-left-color: var(--accent);
|
||||
border-left-width: var(--border-size-2);
|
||||
border-left-width: var(--focus-ring-width);
|
||||
}
|
||||
|
||||
/* Mixed — yellow/amber to signal blended provenance */
|
||||
|
|
@ -649,14 +649,14 @@ a[data-role="secondary"]:hover {
|
|||
|
||||
[data-size="xs"] {
|
||||
font-size: var(--font-size-00, 0.6rem);
|
||||
padding: var(--size-1) var(--size-2);
|
||||
gap: var(--size-1);
|
||||
padding: var(--space-1) var(--space-2);
|
||||
gap: var(--space-1);
|
||||
}
|
||||
|
||||
[data-size="sm"] {
|
||||
font-size: var(--text-xs);
|
||||
padding: var(--size-1) var(--size-3);
|
||||
gap: var(--size-2);
|
||||
padding: var(--space-1) var(--space-4);
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
/* md is the default — explicit reset for override contexts */
|
||||
|
|
@ -111,7 +111,7 @@ dl[data-layout="inline"] dd {
|
|||
height: 1em;
|
||||
margin-right: 0.5em;
|
||||
vertical-align: -0.125em;
|
||||
border: var(--border-size-2) solid currentColor;
|
||||
border: var(--focus-ring-width) solid currentColor;
|
||||
border-top-color: transparent;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
|
@ -175,7 +175,7 @@ dl[data-layout="inline"] dd {
|
|||
--border-color-subtle: var(--border-subtle);
|
||||
--text-primary: var(--hc-text);
|
||||
--text-secondary: var(--text-2);
|
||||
--border-width: var(--border-size-2);
|
||||
--border-width: var(--focus-ring-width);
|
||||
}
|
||||
|
||||
/* Thicker borders on interactive elements */
|
||||
|
|
@ -185,13 +185,13 @@ dl[data-layout="inline"] dd {
|
|||
select,
|
||||
textarea,
|
||||
[data-wikilink] {
|
||||
border-width: var(--border-size-2);
|
||||
border-width: var(--focus-ring-width);
|
||||
}
|
||||
|
||||
/* Stronger focus indicators */
|
||||
:focus-visible {
|
||||
outline-width: var(--border-size-3);
|
||||
outline-offset: var(--border-size-3);
|
||||
outline-width: var(--border-width-thick);
|
||||
outline-offset: var(--border-width-thick);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,84 +0,0 @@
|
|||
/**
|
||||
* 08-paper.css
|
||||
* Long-form research / essay content type — article[data-paper]
|
||||
* Promoted from lab/hugo-demo paper/single.html inline <style> block.
|
||||
* Part of: Agentic Semantic Web
|
||||
*/
|
||||
|
||||
/* ── Reading column ─────────────────────────────────────────────────── */
|
||||
|
||||
article[data-paper] {
|
||||
max-width: 68ch;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
/* ── Centred masthead ───────────────────────────────────────────────── */
|
||||
|
||||
article[data-paper] > header {
|
||||
text-align: center;
|
||||
padding-bottom: var(--space-6);
|
||||
margin-bottom: var(--space-6);
|
||||
border-bottom: var(--border-width) solid var(--border-subtle);
|
||||
}
|
||||
|
||||
article[data-paper] > header h1 {
|
||||
font-size: clamp(1.6rem, 4vw, 2.4rem);
|
||||
font-weight: var(--font-weight-3);
|
||||
letter-spacing: -0.02em;
|
||||
line-height: 1.15;
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
/* ── Abstract / description ─────────────────────────────────────────── */
|
||||
|
||||
article[data-paper] > header [data-abstract] {
|
||||
font-size: var(--text-base);
|
||||
color: var(--text-2);
|
||||
max-width: 52ch;
|
||||
margin-inline: auto;
|
||||
margin-bottom: var(--space-4);
|
||||
line-height: var(--leading);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* ── Byline ─────────────────────────────────────────────────────────── */
|
||||
|
||||
article[data-paper] > header [data-byline] {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-3);
|
||||
font-family: var(--font-mono);
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
|
||||
article[data-paper] > header [data-byline] time {
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
/* ── Tags beneath byline ────────────────────────────────────────────── */
|
||||
|
||||
article[data-paper] > header nav[data-role="tag-cloud"] {
|
||||
justify-content: center;
|
||||
margin-top: var(--space-3);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* ── Footer prev/next ───────────────────────────────────────────────── */
|
||||
|
||||
article[data-paper] > footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-4);
|
||||
margin-top: var(--space-8);
|
||||
padding-top: var(--space-5);
|
||||
border-top: var(--border-width) solid var(--border-subtle);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
article[data-paper] > footer a {
|
||||
color: var(--text-2);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
article[data-paper] > footer a:hover {
|
||||
color: var(--text);
|
||||
}
|
||||
|
|
@ -69,7 +69,7 @@
|
|||
font-size: var(--text-sm);
|
||||
color: var(--text-3);
|
||||
text-align: start;
|
||||
padding-block-end: var(--size-3);
|
||||
padding-block-end: var(--space-4);
|
||||
caption-side: top;
|
||||
}
|
||||
|
||||
|
|
@ -118,7 +118,7 @@
|
|||
[data-chart="bar"] tr {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--size-3);
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
/* Row label (th) */
|
||||
|
|
@ -130,7 +130,7 @@
|
|||
max-inline-size: 8rem;
|
||||
text-align: end;
|
||||
padding-block: 0;
|
||||
padding-inline: var(--size-2) 0;
|
||||
padding-inline: var(--space-2) 0;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
|
@ -227,7 +227,7 @@
|
|||
justify-content: flex-end;
|
||||
flex: 1;
|
||||
block-size: 100%;
|
||||
gap: var(--size-1);
|
||||
gap: var(--space-1);
|
||||
}
|
||||
|
||||
/* Column label (th) at the bottom */
|
||||
|
|
@ -241,10 +241,10 @@
|
|||
text-overflow: ellipsis;
|
||||
max-inline-size: 100%;
|
||||
padding: 0;
|
||||
padding-block-start: var(--size-1);
|
||||
padding-block-start: var(--space-1);
|
||||
/* Move below axis */
|
||||
order: 2;
|
||||
margin-block-start: var(--size-2);
|
||||
margin-block-start: var(--space-2);
|
||||
}
|
||||
|
||||
/* Data cell — the column bar */
|
||||
|
|
@ -285,7 +285,7 @@
|
|||
[data-chart="column"][data-chart-labels] thead {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin-block-end: var(--size-2);
|
||||
margin-block-end: var(--space-2);
|
||||
}
|
||||
|
||||
[data-chart="column"][data-chart-labels] thead th {
|
||||
|
|
@ -332,7 +332,7 @@
|
|||
color: var(--chart-label);
|
||||
text-align: center;
|
||||
order: 2;
|
||||
padding-block-start: var(--size-1);
|
||||
padding-block-start: var(--space-1);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
|
@ -390,7 +390,7 @@
|
|||
color: var(--chart-label);
|
||||
text-align: center;
|
||||
order: 2;
|
||||
padding-block-start: var(--size-1);
|
||||
padding-block-start: var(--space-1);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
|
@ -456,9 +456,9 @@
|
|||
[data-chart="pie"] thead {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--size-2);
|
||||
gap: var(--space-2);
|
||||
justify-content: center;
|
||||
margin-block-end: var(--size-3);
|
||||
margin-block-end: var(--space-4);
|
||||
}
|
||||
|
||||
[data-chart="pie"] thead th {
|
||||
|
|
@ -549,7 +549,7 @@
|
|||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: var(--size-2);
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
[data-chart="radial"] caption {
|
||||
|
|
@ -557,7 +557,7 @@
|
|||
color: var(--chart-label);
|
||||
text-align: center;
|
||||
caption-side: bottom;
|
||||
padding-block-start: var(--size-2);
|
||||
padding-block-start: var(--space-2);
|
||||
}
|
||||
|
||||
[data-chart="radial"] tbody { display: flex; }
|
||||
|
|
@ -666,7 +666,7 @@
|
|||
justify-content: flex-end;
|
||||
flex: 1;
|
||||
block-size: 100%;
|
||||
gap: var(--size-1);
|
||||
gap: var(--space-1);
|
||||
}
|
||||
|
||||
/* Remaining-work bar — red, with ideal line overlay above it */
|
||||
|
|
@ -693,10 +693,10 @@
|
|||
color: var(--chart-label);
|
||||
text-align: center;
|
||||
order: 2;
|
||||
padding-block-start: var(--size-1);
|
||||
padding-block-start: var(--space-1);
|
||||
white-space: nowrap;
|
||||
padding: 0;
|
||||
margin-block-start: var(--size-2);
|
||||
margin-block-start: var(--space-2);
|
||||
}
|
||||
|
||||
/* ── Spacing modifiers for area and line (port from bar/column) ──── */
|
||||
|
|
@ -749,7 +749,7 @@
|
|||
|
||||
[data-chart="bar"][data-chart-labels] thead {
|
||||
display: block;
|
||||
margin-block-end: var(--size-2);
|
||||
margin-block-end: var(--space-2);
|
||||
}
|
||||
|
||||
[data-chart="bar"][data-chart-labels] thead th {
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
|
||||
.chroma pre {
|
||||
background: var(--surface-2);
|
||||
padding: var(--size-3);
|
||||
padding: var(--space-4);
|
||||
border-radius: var(--radius-2);
|
||||
overflow-x: auto;
|
||||
margin: 0;
|
||||
|
|
@ -134,5 +134,5 @@
|
|||
.chroma .lnt {
|
||||
color: var(--text-3);
|
||||
user-select: none;
|
||||
padding-inline-end: var(--size-3);
|
||||
padding-inline-end: var(--space-4);
|
||||
}
|
||||
|
|
@ -40,7 +40,7 @@ body > section {
|
|||
body {
|
||||
background-color: var(--surface);
|
||||
color: var(--text);
|
||||
font-weight: var(--font-weight-4);
|
||||
font-weight: var(--weight-normal);
|
||||
line-height: var(--leading);
|
||||
font-variant-emoji: text; /* render emoji as monochrome glyphs, not OS pictographs */
|
||||
min-height: 100vh;
|
||||
|
|
@ -202,9 +202,10 @@ nav[data-layout="actions"] a:hover {
|
|||
}
|
||||
}
|
||||
|
||||
/* Allow article as content column in docs layout — override body > article container sizing */
|
||||
/* Article content column: reading-optimised prose width.
|
||||
Overrides body > article container sizing from 08-layout.css. */
|
||||
[data-layout="docs"] > article {
|
||||
max-width: none;
|
||||
max-width: var(--width-prose);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
|
|
@ -299,7 +300,7 @@ nav[data-layout="actions"] a:hover {
|
|||
[data-layout="stats"] .value {
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-3xl);
|
||||
font-weight: var(--font-weight-7);
|
||||
font-weight: var(--weight-bold);
|
||||
color: var(--accent);
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -349,7 +350,7 @@ article[data-layout="prose"],
|
|||
left: 0.6rem;
|
||||
top: 0.5rem;
|
||||
bottom: 0.5rem;
|
||||
width: var(--border-size-1);
|
||||
width: var(--border-width);
|
||||
background: var(--border);
|
||||
}
|
||||
|
||||
|
|
@ -497,3 +498,88 @@ article[data-layout="prose"],
|
|||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* ══════════════════════════════════════════════════════════════════════════
|
||||
Essay / Paper layout — article[data-paper]
|
||||
Long-form research content with centred masthead.
|
||||
(Merged from 08a-essay.css)
|
||||
══════════════════════════════════════════════════════════════════════════ */
|
||||
|
||||
/* ── Reading column ─────────────────────────────────────────────────── */
|
||||
|
||||
article[data-paper] {
|
||||
max-width: 68ch;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
/* ── Centred masthead ───────────────────────────────────────────────── */
|
||||
|
||||
article[data-paper] > header {
|
||||
text-align: center;
|
||||
padding-bottom: var(--space-6);
|
||||
margin-bottom: var(--space-6);
|
||||
border-bottom: var(--border-width) solid var(--border-subtle);
|
||||
}
|
||||
|
||||
article[data-paper] > header h1 {
|
||||
font-size: clamp(1.6rem, 4vw, 2.4rem);
|
||||
font-weight: var(--weight-light);
|
||||
letter-spacing: -0.02em;
|
||||
line-height: 1.15;
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
/* ── Abstract / description ─────────────────────────────────────────── */
|
||||
|
||||
article[data-paper] > header [data-abstract] {
|
||||
font-size: var(--text-base);
|
||||
color: var(--text-2);
|
||||
max-width: 52ch;
|
||||
margin-inline: auto;
|
||||
margin-bottom: var(--space-4);
|
||||
line-height: var(--leading);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* ── Byline ─────────────────────────────────────────────────────────── */
|
||||
|
||||
article[data-paper] > header [data-byline] {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-3);
|
||||
font-family: var(--font-mono);
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
|
||||
article[data-paper] > header [data-byline] time {
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
/* ── Tags beneath byline ────────────────────────────────────────────── */
|
||||
|
||||
article[data-paper] > header nav[data-role="tag-cloud"] {
|
||||
justify-content: center;
|
||||
margin-top: var(--space-3);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* ── Footer prev/next ───────────────────────────────────────────────── */
|
||||
|
||||
article[data-paper] > footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-4);
|
||||
margin-top: var(--space-8);
|
||||
padding-top: var(--space-5);
|
||||
border-top: var(--border-width) solid var(--border-subtle);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
article[data-paper] > footer a {
|
||||
color: var(--text-2);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
article[data-paper] > footer a:hover {
|
||||
color: var(--text);
|
||||
}
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
|
||||
[data-layout="hero"] h1 {
|
||||
font-size: clamp(2.6rem, 6vw, 4.5rem);
|
||||
font-weight: var(--font-weight-2);
|
||||
font-weight: var(--weight-light);
|
||||
letter-spacing: -0.025em;
|
||||
line-height: 1.05;
|
||||
margin-bottom: var(--space-4);
|
||||
22
src/main.css
22
src/main.css
|
|
@ -12,13 +12,15 @@
|
|||
|
||||
/* 2. Framework layers */
|
||||
@import "./layers/00-reset.css";
|
||||
@import "./layers/01-asw.css";
|
||||
@import "./layers/02-semantic.css";
|
||||
@import "./layers/03-components.css";
|
||||
@import "./layers/04-data-attrs.css";
|
||||
@import "./layers/05-utilities.css";
|
||||
@import "./layers/06-charts.css";
|
||||
@import "./layers/07-chroma.css";
|
||||
@import "./layers/08-layout.css";
|
||||
@import "./layers/08a-essay.css";
|
||||
@import "./layers/09-landing.css";
|
||||
@import "./layers/01-tokens.css";
|
||||
@import "./layers/02-typography.css";
|
||||
@import "./layers/03-landmarks.css";
|
||||
@import "./layers/04-forms.css";
|
||||
@import "./layers/05-components.css";
|
||||
@import "./layers/06-navigation.css";
|
||||
@import "./layers/07-data-attrs.css";
|
||||
@import "./layers/08-utilities.css";
|
||||
@import "./layers/09-charts.css";
|
||||
@import "./layers/10-chroma.css";
|
||||
@import "./layers/11-layout.css";
|
||||
@import "./layers/12-landing.css";
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue