aa7480e003
- useSeoLabels(): the L8 dictionary (en, pl) of the page's content locale (resolve locale, then html_lang, then en), overridable and extendable in app.config.ts under seo.labels; no i18n dependency - seo-tokens.css (spacing, colour, small type, breadcrumb separator) and seo-base.css (.seo-visually-hidden, the focus ring of layer links), loaded before the app's CSS and styling only .seo-* classes
29 lines
1.6 KiB
CSS
29 lines
1.6 KiB
CSS
/* SEO layer design tokens (UI-SPEC L8). Every visual value of the layer's
|
||
public components comes from these. The defaults match the journal and
|
||
menu layer defaults, so an untouched site looks consistent. An app
|
||
overrides any of them in its own CSS, e.g. on :root:root. The layer sets
|
||
no font family, heading size or body size: everything else inherits from
|
||
the site. */
|
||
:root {
|
||
/* Spacing */
|
||
--seo-space-1: 0.25rem; /* gap between pagination items; breadcrumb link padding (24px target) */
|
||
--seo-space-2: 0.5rem; /* room around the breadcrumb separator; pagination link inline padding */
|
||
--seo-space-3: 1rem; /* gap between previous, the page list and next; sitemap list gaps */
|
||
--seo-space-4: 1.5rem; /* margin under the breadcrumbs; gap between sitemap groups */
|
||
--seo-space-5: 2.5rem; /* margin above the pagination (copies --journal-space-5) */
|
||
--seo-target-size: 2.75rem; /* minimum pagination link size (WCAG 2.5.5; copies --menu-toggle-size) */
|
||
--seo-sitemap-column-width: 16rem; /* HTML sitemap column width */
|
||
|
||
/* Colour */
|
||
--seo-color-muted: #59636e; /* separators, current breadcrumb, pagination gap, sitemap counts (6.2:1 on white) */
|
||
--seo-color-accent: #0969da; /* current pagination page, focus ring of layer links */
|
||
--seo-color-on-accent: #ffffff; /* text on the accent colour (5.0:1) */
|
||
--seo-color-border: #d1d9e0; /* not used by default; reserved for themes */
|
||
|
||
/* Type */
|
||
--seo-font-size-small: 0.875em; /* breadcrumbs */
|
||
|
||
/* Breadcrumbs */
|
||
--seo-breadcrumbs-separator: '›'; /* CSS-generated, never read by screen readers */
|
||
}
|