Compare commits
No commits in common. "79b6b85a94b3bf34aec041074dc8e3c82c3a6eda" and "910b0e42a6b7fe6fc5f54bc79466b23cedd7a797" have entirely different histories.
79b6b85a94
...
910b0e42a6
15 changed files with 1201 additions and 1232 deletions
|
|
@ -266,27 +266,6 @@
|
||||||
|
|
||||||
--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");
|
--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
|
AGENT-NATIVE TOKENS
|
||||||
|
|
@ -416,3 +395,19 @@
|
||||||
@media (--lg-n-above) { html { font-size: 103%; } }
|
@media (--lg-n-above) { html { font-size: 103%; } }
|
||||||
@media (--xl-n-above) { html { font-size: 106%; } }
|
@media (--xl-n-above) { html { font-size: 106%; } }
|
||||||
@media (--xxl-n-above) { html { font-size: 109%; } }
|
@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);
|
margin-bottom: var(--type-space);
|
||||||
color: var(--text);
|
color: var(--text);
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: var(--weight-normal);
|
font-weight: var(--font-weight-4);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ── Typography: Lists ─────────────────────────────────────────────── */
|
/* ── Typography: Lists ─────────────────────────────────────────────── */
|
||||||
|
|
@ -158,7 +158,7 @@ ul {
|
||||||
margin-bottom: var(--type-space);
|
margin-bottom: var(--type-space);
|
||||||
color: var(--text);
|
color: var(--text);
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: var(--weight-normal);
|
font-weight: var(--font-weight-4);
|
||||||
}
|
}
|
||||||
|
|
||||||
:where(ol, ul) li {
|
:where(ol, ul) li {
|
||||||
|
|
@ -225,7 +225,7 @@ del {
|
||||||
}
|
}
|
||||||
|
|
||||||
abbr[title] {
|
abbr[title] {
|
||||||
border-bottom: var(--border-width) dotted;
|
border-bottom: var(--border-size-1) dotted;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
cursor: help;
|
cursor: help;
|
||||||
}
|
}
|
||||||
|
|
@ -297,7 +297,7 @@ small {
|
||||||
text-indent: 0;
|
text-indent: 0;
|
||||||
color: var(--text);
|
color: var(--text);
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: var(--weight-normal);
|
font-weight: var(--font-weight-4);
|
||||||
}
|
}
|
||||||
|
|
||||||
th,
|
th,
|
||||||
|
|
@ -306,14 +306,14 @@ td {
|
||||||
border-bottom: var(--border-width) solid var(--border);
|
border-bottom: var(--border-width) solid var(--border);
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
color: var(--text);
|
color: var(--text);
|
||||||
font-weight: var(--weight-normal);
|
font-weight: var(--font-weight-4);
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
thead th,
|
thead th,
|
||||||
thead td {
|
thead td {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
border-bottom-width: var(--focus-ring-width);
|
border-bottom-width: var(--border-size-2);
|
||||||
}
|
}
|
||||||
|
|
||||||
tfoot th,
|
tfoot th,
|
||||||
|
|
@ -339,7 +339,7 @@ samp {
|
||||||
border-radius: var(--radius-md);
|
border-radius: var(--radius-md);
|
||||||
background: var(--surface-1);
|
background: var(--surface-1);
|
||||||
color: var(--code-color);
|
color: var(--code-color);
|
||||||
font-weight: var(--weight-normal);
|
font-weight: var(--font-weight-4);
|
||||||
line-height: initial;
|
line-height: initial;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -471,10 +471,10 @@ pre[class*="language-"] {
|
||||||
.token.important,
|
.token.important,
|
||||||
.token.variable {
|
.token.variable {
|
||||||
color: var(--syntax-variable);
|
color: var(--syntax-variable);
|
||||||
font-weight: var(--weight-medium);
|
font-weight: var(--font-weight-5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.token.bold { font-weight: var(--weight-bold); }
|
.token.bold { font-weight: var(--font-weight-7); }
|
||||||
.token.italic { font-style: italic; }
|
.token.italic { font-style: italic; }
|
||||||
|
|
||||||
/* Light mode overrides */
|
/* Light mode overrides */
|
||||||
1045
src/layers/03-components.css
Normal file
1045
src/layers/03-components.css
Normal file
File diff suppressed because it is too large
Load diff
|
|
@ -1,328 +0,0 @@
|
||||||
/**
|
|
||||||
* 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);
|
|
||||||
}
|
|
||||||
|
|
@ -522,7 +522,7 @@
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
height: var(--focus-ring-width);
|
height: var(--border-size-2);
|
||||||
background: var(--accent);
|
background: var(--accent);
|
||||||
z-index: 9999;
|
z-index: 9999;
|
||||||
/* Subtle shadow so bar is visible on light pages too */
|
/* Subtle shadow so bar is visible on light pages too */
|
||||||
|
|
@ -546,7 +546,7 @@
|
||||||
|
|
||||||
/* Subtle accent on AI-generated sections — light left border indicator */
|
/* Subtle accent on AI-generated sections — light left border indicator */
|
||||||
[data-ai-disclosure] {
|
[data-ai-disclosure] {
|
||||||
border-left: var(--focus-ring-width) solid transparent;
|
border-left: var(--border-size-2) solid transparent;
|
||||||
padding-left: var(--space-3);
|
padding-left: var(--space-3);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -561,7 +561,7 @@
|
||||||
/* Autonomous — more distinct: full accent treatment */
|
/* Autonomous — more distinct: full accent treatment */
|
||||||
[data-ai-disclosure="autonomous"] {
|
[data-ai-disclosure="autonomous"] {
|
||||||
border-left-color: var(--accent);
|
border-left-color: var(--accent);
|
||||||
border-left-width: var(--focus-ring-width);
|
border-left-width: var(--border-size-2);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Mixed — yellow/amber to signal blended provenance */
|
/* Mixed — yellow/amber to signal blended provenance */
|
||||||
|
|
@ -649,14 +649,14 @@ a[data-role="secondary"]:hover {
|
||||||
|
|
||||||
[data-size="xs"] {
|
[data-size="xs"] {
|
||||||
font-size: var(--font-size-00, 0.6rem);
|
font-size: var(--font-size-00, 0.6rem);
|
||||||
padding: var(--space-1) var(--space-2);
|
padding: var(--size-1) var(--size-2);
|
||||||
gap: var(--space-1);
|
gap: var(--size-1);
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-size="sm"] {
|
[data-size="sm"] {
|
||||||
font-size: var(--text-xs);
|
font-size: var(--text-xs);
|
||||||
padding: var(--space-1) var(--space-4);
|
padding: var(--size-1) var(--size-3);
|
||||||
gap: var(--space-2);
|
gap: var(--size-2);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* md is the default — explicit reset for override contexts */
|
/* md is the default — explicit reset for override contexts */
|
||||||
|
|
@ -1,250 +0,0 @@
|
||||||
/**
|
|
||||||
* 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);
|
|
||||||
}
|
|
||||||
|
|
@ -1,393 +0,0 @@
|
||||||
/**
|
|
||||||
* 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;
|
|
||||||
}
|
|
||||||
|
|
@ -111,7 +111,7 @@ dl[data-layout="inline"] dd {
|
||||||
height: 1em;
|
height: 1em;
|
||||||
margin-right: 0.5em;
|
margin-right: 0.5em;
|
||||||
vertical-align: -0.125em;
|
vertical-align: -0.125em;
|
||||||
border: var(--focus-ring-width) solid currentColor;
|
border: var(--border-size-2) solid currentColor;
|
||||||
border-top-color: transparent;
|
border-top-color: transparent;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
|
@ -175,7 +175,7 @@ dl[data-layout="inline"] dd {
|
||||||
--border-color-subtle: var(--border-subtle);
|
--border-color-subtle: var(--border-subtle);
|
||||||
--text-primary: var(--hc-text);
|
--text-primary: var(--hc-text);
|
||||||
--text-secondary: var(--text-2);
|
--text-secondary: var(--text-2);
|
||||||
--border-width: var(--focus-ring-width);
|
--border-width: var(--border-size-2);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Thicker borders on interactive elements */
|
/* Thicker borders on interactive elements */
|
||||||
|
|
@ -185,13 +185,13 @@ dl[data-layout="inline"] dd {
|
||||||
select,
|
select,
|
||||||
textarea,
|
textarea,
|
||||||
[data-wikilink] {
|
[data-wikilink] {
|
||||||
border-width: var(--focus-ring-width);
|
border-width: var(--border-size-2);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Stronger focus indicators */
|
/* Stronger focus indicators */
|
||||||
:focus-visible {
|
:focus-visible {
|
||||||
outline-width: var(--border-width-thick);
|
outline-width: var(--border-size-3);
|
||||||
outline-offset: var(--border-width-thick);
|
outline-offset: var(--border-size-3);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -69,7 +69,7 @@
|
||||||
font-size: var(--text-sm);
|
font-size: var(--text-sm);
|
||||||
color: var(--text-3);
|
color: var(--text-3);
|
||||||
text-align: start;
|
text-align: start;
|
||||||
padding-block-end: var(--space-4);
|
padding-block-end: var(--size-3);
|
||||||
caption-side: top;
|
caption-side: top;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -118,7 +118,7 @@
|
||||||
[data-chart="bar"] tr {
|
[data-chart="bar"] tr {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: var(--space-4);
|
gap: var(--size-3);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Row label (th) */
|
/* Row label (th) */
|
||||||
|
|
@ -130,7 +130,7 @@
|
||||||
max-inline-size: 8rem;
|
max-inline-size: 8rem;
|
||||||
text-align: end;
|
text-align: end;
|
||||||
padding-block: 0;
|
padding-block: 0;
|
||||||
padding-inline: var(--space-2) 0;
|
padding-inline: var(--size-2) 0;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
|
|
@ -227,7 +227,7 @@
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
block-size: 100%;
|
block-size: 100%;
|
||||||
gap: var(--space-1);
|
gap: var(--size-1);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Column label (th) at the bottom */
|
/* Column label (th) at the bottom */
|
||||||
|
|
@ -241,10 +241,10 @@
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
max-inline-size: 100%;
|
max-inline-size: 100%;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
padding-block-start: var(--space-1);
|
padding-block-start: var(--size-1);
|
||||||
/* Move below axis */
|
/* Move below axis */
|
||||||
order: 2;
|
order: 2;
|
||||||
margin-block-start: var(--space-2);
|
margin-block-start: var(--size-2);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Data cell — the column bar */
|
/* Data cell — the column bar */
|
||||||
|
|
@ -285,7 +285,7 @@
|
||||||
[data-chart="column"][data-chart-labels] thead {
|
[data-chart="column"][data-chart-labels] thead {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
margin-block-end: var(--space-2);
|
margin-block-end: var(--size-2);
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-chart="column"][data-chart-labels] thead th {
|
[data-chart="column"][data-chart-labels] thead th {
|
||||||
|
|
@ -332,7 +332,7 @@
|
||||||
color: var(--chart-label);
|
color: var(--chart-label);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
order: 2;
|
order: 2;
|
||||||
padding-block-start: var(--space-1);
|
padding-block-start: var(--size-1);
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
|
|
@ -390,7 +390,7 @@
|
||||||
color: var(--chart-label);
|
color: var(--chart-label);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
order: 2;
|
order: 2;
|
||||||
padding-block-start: var(--space-1);
|
padding-block-start: var(--size-1);
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -456,9 +456,9 @@
|
||||||
[data-chart="pie"] thead {
|
[data-chart="pie"] thead {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: var(--space-2);
|
gap: var(--size-2);
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
margin-block-end: var(--space-4);
|
margin-block-end: var(--size-3);
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-chart="pie"] thead th {
|
[data-chart="pie"] thead th {
|
||||||
|
|
@ -549,7 +549,7 @@
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: var(--space-2);
|
gap: var(--size-2);
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-chart="radial"] caption {
|
[data-chart="radial"] caption {
|
||||||
|
|
@ -557,7 +557,7 @@
|
||||||
color: var(--chart-label);
|
color: var(--chart-label);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
caption-side: bottom;
|
caption-side: bottom;
|
||||||
padding-block-start: var(--space-2);
|
padding-block-start: var(--size-2);
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-chart="radial"] tbody { display: flex; }
|
[data-chart="radial"] tbody { display: flex; }
|
||||||
|
|
@ -666,7 +666,7 @@
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
block-size: 100%;
|
block-size: 100%;
|
||||||
gap: var(--space-1);
|
gap: var(--size-1);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Remaining-work bar — red, with ideal line overlay above it */
|
/* Remaining-work bar — red, with ideal line overlay above it */
|
||||||
|
|
@ -693,10 +693,10 @@
|
||||||
color: var(--chart-label);
|
color: var(--chart-label);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
order: 2;
|
order: 2;
|
||||||
padding-block-start: var(--space-1);
|
padding-block-start: var(--size-1);
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin-block-start: var(--space-2);
|
margin-block-start: var(--size-2);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ── Spacing modifiers for area and line (port from bar/column) ──── */
|
/* ── Spacing modifiers for area and line (port from bar/column) ──── */
|
||||||
|
|
@ -749,7 +749,7 @@
|
||||||
|
|
||||||
[data-chart="bar"][data-chart-labels] thead {
|
[data-chart="bar"][data-chart-labels] thead {
|
||||||
display: block;
|
display: block;
|
||||||
margin-block-end: var(--space-2);
|
margin-block-end: var(--size-2);
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-chart="bar"][data-chart-labels] thead th {
|
[data-chart="bar"][data-chart-labels] thead th {
|
||||||
|
|
@ -1,96 +0,0 @@
|
||||||
/**
|
|
||||||
* 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);
|
|
||||||
}
|
|
||||||
|
|
@ -18,7 +18,7 @@
|
||||||
|
|
||||||
.chroma pre {
|
.chroma pre {
|
||||||
background: var(--surface-2);
|
background: var(--surface-2);
|
||||||
padding: var(--space-4);
|
padding: var(--size-3);
|
||||||
border-radius: var(--radius-2);
|
border-radius: var(--radius-2);
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
@ -134,5 +134,5 @@
|
||||||
.chroma .lnt {
|
.chroma .lnt {
|
||||||
color: var(--text-3);
|
color: var(--text-3);
|
||||||
user-select: none;
|
user-select: none;
|
||||||
padding-inline-end: var(--space-4);
|
padding-inline-end: var(--size-3);
|
||||||
}
|
}
|
||||||
|
|
@ -40,7 +40,7 @@ body > section {
|
||||||
body {
|
body {
|
||||||
background-color: var(--surface);
|
background-color: var(--surface);
|
||||||
color: var(--text);
|
color: var(--text);
|
||||||
font-weight: var(--weight-normal);
|
font-weight: var(--font-weight-4);
|
||||||
line-height: var(--leading);
|
line-height: var(--leading);
|
||||||
font-variant-emoji: text; /* render emoji as monochrome glyphs, not OS pictographs */
|
font-variant-emoji: text; /* render emoji as monochrome glyphs, not OS pictographs */
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
|
|
@ -202,10 +202,9 @@ nav[data-layout="actions"] a:hover {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Article content column: reading-optimised prose width.
|
/* Allow article as content column in docs layout — override body > article container sizing */
|
||||||
Overrides body > article container sizing from 08-layout.css. */
|
|
||||||
[data-layout="docs"] > article {
|
[data-layout="docs"] > article {
|
||||||
max-width: var(--width-prose);
|
max-width: none;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -300,7 +299,7 @@ nav[data-layout="actions"] a:hover {
|
||||||
[data-layout="stats"] .value {
|
[data-layout="stats"] .value {
|
||||||
font-family: var(--font-mono);
|
font-family: var(--font-mono);
|
||||||
font-size: var(--text-3xl);
|
font-size: var(--text-3xl);
|
||||||
font-weight: var(--weight-bold);
|
font-weight: var(--font-weight-7);
|
||||||
color: var(--accent);
|
color: var(--accent);
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
@ -350,7 +349,7 @@ article[data-layout="prose"],
|
||||||
left: 0.6rem;
|
left: 0.6rem;
|
||||||
top: 0.5rem;
|
top: 0.5rem;
|
||||||
bottom: 0.5rem;
|
bottom: 0.5rem;
|
||||||
width: var(--border-width);
|
width: var(--border-size-1);
|
||||||
background: var(--border);
|
background: var(--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -498,88 +497,3 @@ article[data-layout="prose"],
|
||||||
display: none !important;
|
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);
|
|
||||||
}
|
|
||||||
84
src/layers/08a-essay.css
Normal file
84
src/layers/08a-essay.css
Normal file
|
|
@ -0,0 +1,84 @@
|
||||||
|
/**
|
||||||
|
* 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);
|
||||||
|
}
|
||||||
|
|
@ -44,7 +44,7 @@
|
||||||
|
|
||||||
[data-layout="hero"] h1 {
|
[data-layout="hero"] h1 {
|
||||||
font-size: clamp(2.6rem, 6vw, 4.5rem);
|
font-size: clamp(2.6rem, 6vw, 4.5rem);
|
||||||
font-weight: var(--weight-light);
|
font-weight: var(--font-weight-2);
|
||||||
letter-spacing: -0.025em;
|
letter-spacing: -0.025em;
|
||||||
line-height: 1.05;
|
line-height: 1.05;
|
||||||
margin-bottom: var(--space-4);
|
margin-bottom: var(--space-4);
|
||||||
22
src/main.css
22
src/main.css
|
|
@ -12,15 +12,13 @@
|
||||||
|
|
||||||
/* 2. Framework layers */
|
/* 2. Framework layers */
|
||||||
@import "./layers/00-reset.css";
|
@import "./layers/00-reset.css";
|
||||||
@import "./layers/01-tokens.css";
|
@import "./layers/01-asw.css";
|
||||||
@import "./layers/02-typography.css";
|
@import "./layers/02-semantic.css";
|
||||||
@import "./layers/03-landmarks.css";
|
@import "./layers/03-components.css";
|
||||||
@import "./layers/04-forms.css";
|
@import "./layers/04-data-attrs.css";
|
||||||
@import "./layers/05-components.css";
|
@import "./layers/05-utilities.css";
|
||||||
@import "./layers/06-navigation.css";
|
@import "./layers/06-charts.css";
|
||||||
@import "./layers/07-data-attrs.css";
|
@import "./layers/07-chroma.css";
|
||||||
@import "./layers/08-utilities.css";
|
@import "./layers/08-layout.css";
|
||||||
@import "./layers/09-charts.css";
|
@import "./layers/08a-essay.css";
|
||||||
@import "./layers/10-chroma.css";
|
@import "./layers/09-landing.css";
|
||||||
@import "./layers/11-layout.css";
|
|
||||||
@import "./layers/12-landing.css";
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue