mirror of
https://codeberg.org/PostERG/xamxam.git
synced 2026-08-10 23:31:21 +02:00
- colors.css: added --scrollbar-thumb, --scrollbar-thumb-hover, --scrollbar-track, --scrollbar-corner custom properties - base.css: consolidated all scrollbar rules (WebKit ::-webkit-scrollbar* + Firefox scrollbar-width/color), added ::-webkit-scrollbar-corner, changed selector from * to html (scrollbar-width inherits), added scrollbar-gutter: stable - admin.css: removed redundant scrollbar-width: thin on header nav - toc.css: removed redundant scrollbar-width: thin on desktop .toc
82 lines
2.0 KiB
CSS
82 lines
2.0 KiB
CSS
/* ============================================================
|
|
BASE — Minimal site-wide rules. Keep this extremely small
|
|
(≤ 5 rules). Promote a pattern from a component to base
|
|
only once it's clearly universal.
|
|
============================================================ */
|
|
|
|
/* Full-height flex layout: header → main → (optional footer) */
|
|
html,
|
|
body {
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* ── Discreet scrollbars (WebKit / Blink / Firefox) ──────────────── */
|
|
/* CSS custom properties defined in colors.css:
|
|
--scrollbar-thumb, --scrollbar-thumb-hover, --scrollbar-track, --scrollbar-corner */
|
|
::-webkit-scrollbar {
|
|
width: var(--scrollbar-width, 5px);
|
|
height: var(--scrollbar-width, 5px);
|
|
}
|
|
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
|
|
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }
|
|
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }
|
|
::-webkit-scrollbar-corner { background: var(--scrollbar-corner); }
|
|
|
|
html {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
|
|
scrollbar-gutter: stable;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-body);
|
|
font-weight: 300;
|
|
color: var(--text-primary);
|
|
background: linear-gradient(
|
|
180deg,
|
|
rgba(0, 0, 0, 0) 85%,
|
|
rgba(149, 87, 181, 0.8) 100%
|
|
);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
main {
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
main * {
|
|
overflow-wrap: anywhere;
|
|
word-break: break-word;
|
|
}
|
|
|
|
/* Global heading scale — used by admin + public pages */
|
|
h1 {
|
|
font-size: var(--step-4);
|
|
}
|
|
h2 {
|
|
font-size: var(--step-3);
|
|
}
|
|
h3 {
|
|
font-size: var(--step-2);
|
|
}
|
|
h4 {
|
|
font-size: var(--step-1);
|
|
}
|
|
h5 {
|
|
font-size: var(--step--1);
|
|
}
|
|
h6 {
|
|
font-size: var(--step--2);
|
|
}
|
|
|
|
:where(h1, h2, h3, h4, h5, h6) {
|
|
font-family: var(--font-display);
|
|
font-weight: 400;
|
|
margin: 0 0 var(--space-m) 0;
|
|
line-height: 1.15;
|
|
}
|