142 lines
4 KiB
CSS
142 lines
4 KiB
CSS
/* Tofu — page, document typography and shared primitives.
|
|
Holds what both pages need: the paper column, .visually-hidden, .icon,
|
|
.button, .status, .check-report. The planning template lives in sheet.css. */
|
|
|
|
/* --- Reset (minimal) ---------------------------------------------------- */
|
|
|
|
*,
|
|
*::before,
|
|
*::after { box-sizing: border-box; }
|
|
|
|
html {
|
|
/* A sheet of paper is white. Assumed choice: no dark mode anywhere in Tofu. */
|
|
color-scheme: light;
|
|
-webkit-text-size-adjust: 100%;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
background-color: var(--desk);
|
|
color: var(--ink);
|
|
font-family: var(--font-document);
|
|
font-size: var(--size-body);
|
|
line-height: var(--line-body);
|
|
}
|
|
|
|
h1, h2, h3, p, ul, ol, figure { margin: 0; }
|
|
ul, ol { padding: 0; }
|
|
|
|
/* Inputs and buttons do not inherit type by default. */
|
|
input, button, textarea, select { font: inherit; color: inherit; }
|
|
|
|
/* --- The paper column --------------------------------------------------- */
|
|
/* <main id="root"> is the sheet of paper; --desk shows as gutters beside it.
|
|
No shadow: the paper is set apart by a hairline and by the tint of the desk. */
|
|
|
|
#root {
|
|
width: 100%;
|
|
max-width: var(--sheet-width);
|
|
min-height: 100vh;
|
|
margin-inline: auto;
|
|
padding: var(--space-6) var(--space-5);
|
|
background-color: var(--paper);
|
|
border-inline: var(--rule-width) solid var(--rule);
|
|
}
|
|
|
|
/* --- Document typography ------------------------------------------------ */
|
|
|
|
p {
|
|
max-width: var(--measure);
|
|
margin-block: var(--space-3);
|
|
color: var(--ink-soft);
|
|
}
|
|
|
|
/* --- Accessibility ------------------------------------------------------ */
|
|
/* Mechanical values below (not design values): the standard clip recipe. */
|
|
|
|
.visually-hidden {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
margin: -1px;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
clip-path: inset(50%);
|
|
white-space: nowrap;
|
|
border: 0;
|
|
}
|
|
|
|
/* --- Icon --------------------------------------------------------------- */
|
|
|
|
.icon {
|
|
display: block;
|
|
width: var(--icon-size);
|
|
height: var(--icon-size);
|
|
fill: none;
|
|
stroke: currentColor;
|
|
stroke-width: var(--icon-stroke);
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
/* --- Buttons ------------------------------------------------------------ */
|
|
/* One chrome and one focus pattern for every button in Tofu; .week-nav-button
|
|
only adds its square footprint (sheet.css). */
|
|
|
|
.button,
|
|
.week-nav-button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: var(--control-height);
|
|
font-family: var(--font-label);
|
|
font-size: var(--size-label);
|
|
letter-spacing: var(--tracking-label);
|
|
text-transform: uppercase;
|
|
color: var(--ink);
|
|
background-color: var(--paper);
|
|
border: var(--rule-width) solid var(--rule-strong);
|
|
border-radius: var(--radius);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.button { padding: var(--space-2) var(--space-4); }
|
|
|
|
.button:hover,
|
|
.week-nav-button:hover { background-color: var(--focus-wash); }
|
|
|
|
/* Two simultaneous focus signals: the wash AND a thickened dark bottom rule.
|
|
The 1px the border gains is absorbed by the flex centring — no visible shift. */
|
|
.button:focus-visible,
|
|
.week-nav-button:focus-visible {
|
|
outline: none;
|
|
background-color: var(--focus-wash);
|
|
border-color: var(--rule-focus);
|
|
border-bottom-width: var(--rule-width-focus);
|
|
}
|
|
|
|
.button:disabled { color: var(--ink-label); cursor: default; }
|
|
|
|
/* --- Status line -------------------------------------------------------- */
|
|
/* The sentence carries the meaning (§4.9): the modifier only changes weight. */
|
|
|
|
.status {
|
|
margin: 0; /* it is a <p>, but it sits in a flex footer, not in prose */
|
|
font-family: var(--font-label);
|
|
font-size: var(--size-label);
|
|
color: var(--ink-label);
|
|
}
|
|
|
|
.status--error { font-weight: var(--weight-strong); }
|
|
|
|
/* --- WebDAV check report ------------------------------------------------ */
|
|
/* Each <li> states OK / ÉCHEC in words — never colour alone. */
|
|
|
|
.check-report { list-style: none; }
|
|
|
|
.check-report > li {
|
|
padding-block: var(--space-2);
|
|
border-bottom: var(--rule-width) solid var(--rule);
|
|
}
|
|
|
|
.check-report > li:last-child { border-bottom: 0; }
|