jacobh2/F-r-ldraledigplannerare
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Lay the Almanacka design foundation: tokens, type, shell

Browse Source 
New token system in global.css (near-white surfaces, one ink-blue
accent, no sub-12px type), self-hosted Schibsted Grotesk, rewritten
primitives (buttons, fields, modal shell, segmented, disclosure,
skeleton), a borderless 56px header with an SV | EN language toggle,
an Icon component replacing glyphs, page skeletons that keep the
layout during loading, and leave-type colours moved out of TS into
CSS variables. Feature blocks keep their structure for later phases.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
Jacob Hagstedt
2026-09-19 18:25:04 +02:00
parent 95444d3bf4
commit d14f86478a
44 changed files with 1358 additions and 485 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/styles/responsive.css
+30 -58
View File
@@ -1,4 +1,4 @@
/* S7 - Responsive & Accessibility
/* Responsive & Accessibility
*
* The ONLY file in the app allowed to contain @media (enforced by
* styles.test.ts) — every viewport/motion/contrast override lives here so
@@ -7,21 +7,15 @@
/* Mobile - Small screens (max 640px) */
@media (max-width: 640px) {
/* Sticky header with less padding */
.header {
padding: var(--sp-3) var(--sp-4);
}
/* Header — the same four groups (brand / nav / identity / tools) reorder
* into three rows: brand + language + logout, the nav as a full-width
* row, then the child select full-width below. 16px gutters. */
.header__bar {
row-gap: var(--sp-3);
padding: 0 var(--sp-4);
row-gap: var(--sp-2);
padding-bottom: var(--sp-2);
}
/* #5 — reorders the same four groups (brand/nav/identity/logout — no
* markup change, just `order`) into: brand + logout on row 1, the nav as
* a full-width row of three equal buttons, then the child select
* full-width below. The parent name is dropped at this width — the child
* select alone already identifies "whose plan this is" without a second,
* name-only line competing for the same row. */
.header__brand {
order: 1;
flex: 1 1 auto;
@@ -32,7 +26,7 @@
font-size: var(--fs-base);
}
.header__logout {
.header__tools {
order: 2;
flex-shrink: 0;
}
@@ -42,7 +36,7 @@
flex: 0 0 100%;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-2);
gap: var(--sp-1);
}
.header__nav-link {
@@ -59,6 +53,7 @@
.header__child-select {
width: 100%;
max-width: none;
padding-left: 0;
}
.header__parent-name {
@@ -66,11 +61,9 @@
}
/* Main content — the container picks up the horizontal gutter; sections
* themselves stay at zero horizontal padding at every width (see
* layout.css's `.dashboard__section` etc. base rule) so this must only
* ever add top spacing/margin here, never re-introduce side padding. */
[data-testid='layout-main'] {
padding: var(--sp-4);
* themselves stay at zero horizontal padding at every width. */
.layout__main {
padding: var(--sp-5) var(--sp-4);
}
.dashboard__section,
@@ -143,8 +136,7 @@
}
/* Delete-confirmation row: the warning text gets its own line, and the
* two buttons split the row evenly (still equal height, still no
* mid-phrase wrapping) rather than stacking into three separate rows. */
* two buttons split the row evenly. */
.modal__delete-confirm-text {
width: 100%;
margin-right: 0;
@@ -168,10 +160,6 @@
min-height: 200px;
}
.loading-spinner__icon {
font-size: var(--icon-md);
}
/* Calendar responsiveness */
.calendar__grid {
font-size: var(--fs-sm);
@@ -186,11 +174,9 @@
font-size: var(--fs-sm);
}
/* #4 — at 390px the month/year selects (each ~12ch/7ch min-width) plus the
* two prev/next icon buttons are tight against the header's title font
* size; dropping the select text down one step keeps the whole header row
* comfortably inside the viewport (it still wraps cleanly via
* `.calendar__title`'s `flex-wrap` if a locale's month name is wider). */
/* At 390px the month/year selects plus the two prev/next icon buttons are
* tight against the header's title size; one step down keeps the whole
* row inside the viewport. */
.calendar__month-select,
.calendar__year-select {
font-size: var(--fs-lg);
@@ -198,15 +184,10 @@
/* The fixed-width preset rail sits beside the month grid on desktop; on
* mobile the layout stacks and the rail goes full-width below the grid.
* `align-items: stretch` overrides the base rule's `flex-start` (there to
* top-align the rail next to the grid in the row layout) — without it, a
* column-direction flex item is sized by its own shrink-to-fit content
* width instead of stretching to the container's width. `.calendar__main`
* (a CSS Grid with a fixed 50px week-number column) then sized itself off
* its grid tracks' max-content width — well past the viewport — instead
* of the actual space available, which is exactly what caused the
* mobile horizontal-scroll bug once a band's content gave those tracks
* something to size around. */
* `align-items: stretch` overrides the base rule's `flex-start` — without
* it a column-direction flex item is sized by its own shrink-to-fit
* content width, which is what once let `.calendar__main` grow past the
* viewport. */
.calendar__layout {
flex-direction: column;
align-items: stretch;
@@ -217,9 +198,7 @@
}
/* A horizontally-scrollable row of presets, not a stack — keeps the rail
* from pushing the month grid far down the page on a short viewport,
* without ever growing the page itself wider than the viewport (the
* scrolling is contained to this row, see `overflow-x` below). */
* from pushing the month grid far down the page on a short viewport. */
.preset-rail__buttons {
flex-direction: row;
overflow-x: auto;
@@ -233,11 +212,7 @@
scroll-snap-align: start;
}
/* Footer — same side gutter as [data-testid='layout-main'] at this width. */
footer {
padding: var(--sp-4) 0;
}
/* Footer — same side gutter as .layout__main at this width. */
.footer__inner {
padding: 0 var(--sp-4);
}
@@ -253,8 +228,8 @@
grid-template-columns: repeat(2, 1fr);
}
[data-testid='layout-main'] {
padding: var(--sp-4);
.layout__main {
padding: var(--sp-6) var(--sp-5);
}
}
@@ -274,12 +249,14 @@
}
}
/* High Contrast Mode */
/* High Contrast Mode — the darkest step of the accent, pure black text and
* a visibly darker hairline. */
@media (prefers-contrast: more) {
:root {
--c-text: #000;
--c-accent: #1f4d2b;
--c-border: #333;
--c-text-muted: #333;
--c-accent: #1d3ca3;
--c-border: #555;
}
button:focus-visible,
@@ -291,11 +268,6 @@
}
}
/* Color Scheme Preference - Dark Mode (future-proofing) */
@media (prefers-color-scheme: dark) {
/* Currently not implemented, but prepared */
}
/* Keyboard Navigation */
:focus-visible {
outline: 2px solid var(--c-accent);