Matthias Giesselmann
b90ff252d1
Public archive with sidebar navigation, project pages, month archive, search and entry pages with image blocks. Admin area for brands, projects, post types, users, api clients, media and the entry editor with drag and drop images, preview per audience, scheduling and publish checks. Read and write API with bearer tokens, audience scoping, idempotent creation, OpenAPI document and editorial guide. Magic link login with configurable allowed domains, whole app behind the session gate. 456 tests including design rule checks.
139 lines
3.2 KiB
CSS
139 lines
3.2 KiB
CSS
@import "tailwindcss";
|
|
|
|
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
|
|
|
|
@theme {
|
|
--color-paper: #f2f1ec;
|
|
--color-surface: #fbfaf6;
|
|
--color-ink: #14161a;
|
|
--color-ink-2: #4c5157;
|
|
--color-ink-3: #8a8f95;
|
|
--color-rule: #dedcd3;
|
|
--color-signal: #c43a22;
|
|
--color-link: #2b4a9b;
|
|
--shadow-lift: 0 1.5rem 3rem -1.5rem rgb(20 22 26 / 0.18);
|
|
--color-positive: #2e7d5b;
|
|
--color-caution: #b4761a;
|
|
--color-shot-1: var(--color-rule);
|
|
--color-shot-2: var(--color-ink-3);
|
|
--container-page: 63rem;
|
|
--container-read: 38rem;
|
|
--font-display: var(--font-archivo), system-ui, sans-serif;
|
|
--font-body: var(--font-source-serif), Georgia, serif;
|
|
--font-mono: var(--font-jetbrains-mono), ui-monospace, monospace;
|
|
--text-micro: 0.6875rem;
|
|
--text-small: 0.8125rem;
|
|
--text-base: 1.0625rem;
|
|
--text-lead: 1.25rem;
|
|
--text-title: 1.75rem;
|
|
--text-hero: clamp(2.25rem, 4vw, 3.25rem);
|
|
--text-plate: clamp(2rem, 5vw, 3.5rem);
|
|
--text-mark: clamp(5rem, 13vw, 10rem);
|
|
--tracking-label: 0.28em;
|
|
--tracking-mark: 0.18em;
|
|
--tracking-plate: 0.42em;
|
|
--tracking-badge: 0.24em;
|
|
--tracking-chip: 0.14em;
|
|
--aspect-cover: 21 / 9;
|
|
--aspect-shot: 16 / 10;
|
|
--breakpoint-md: 46rem;
|
|
--animate-rise: rise 0.5s both cubic-bezier(0.22, 0.61, 0.36, 1);
|
|
}
|
|
|
|
@keyframes rise {
|
|
from { opacity: 0; transform: translateY(0.375rem); }
|
|
}
|
|
|
|
:root[data-theme="dark"] {
|
|
--shadow-lift: 0 1.5rem 3rem -1.5rem rgb(0 0 0 / 0.65);
|
|
--color-paper: #121417;
|
|
--color-surface: #191c20;
|
|
--color-ink: #edebe4;
|
|
--color-ink-2: #a9aeb4;
|
|
--color-ink-3: #757a80;
|
|
--color-rule: #2a2e34;
|
|
--color-signal: #e4603f;
|
|
--color-link: #8aa6ee;
|
|
--color-positive: #6dbd97;
|
|
--color-caution: #d9a34e;
|
|
color-scheme: dark;
|
|
}
|
|
|
|
:root[data-theme="light"] {
|
|
--color-paper: #f2f1ec;
|
|
--color-surface: #fbfaf6;
|
|
--color-ink: #14161a;
|
|
--color-ink-2: #4c5157;
|
|
--color-ink-3: #8a8f95;
|
|
--color-rule: #dedcd3;
|
|
--color-signal: #c43a22;
|
|
--color-link: #2b4a9b;
|
|
--color-positive: #2e7d5b;
|
|
--color-caution: #b4761a;
|
|
color-scheme: light;
|
|
}
|
|
|
|
@layer base {
|
|
html {
|
|
background: var(--color-paper);
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-body);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3 {
|
|
font-family: var(--font-display);
|
|
font-weight: 600;
|
|
letter-spacing: -0.02em;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
a {
|
|
color: var(--color-link);
|
|
text-decoration-thickness: 0.0625rem;
|
|
text-underline-offset: 0.15em;
|
|
}
|
|
|
|
:focus-visible {
|
|
outline: 0.125rem solid var(--color-signal);
|
|
outline-offset: 0.125rem;
|
|
}
|
|
|
|
::selection {
|
|
background: var(--color-signal);
|
|
color: var(--color-paper);
|
|
}
|
|
}
|
|
|
|
.plate-fill {
|
|
background: var(--plate);
|
|
}
|
|
|
|
:root[data-theme="dark"] .plate-fill {
|
|
background: color-mix(in srgb, var(--plate) 88%, var(--color-paper));
|
|
}
|
|
|
|
.os-theme-logbuch {
|
|
--os-size: 0.625rem;
|
|
--os-padding-perpendicular: 0.125rem;
|
|
--os-padding-axis: 0.125rem;
|
|
--os-track-border-radius: 1rem;
|
|
--os-track-bg: transparent;
|
|
--os-track-bg-hover: transparent;
|
|
--os-track-bg-active: transparent;
|
|
--os-handle-border-radius: 1rem;
|
|
--os-handle-min-size: 2rem;
|
|
--os-handle-interactive-area-offset: 0.25rem;
|
|
--os-handle-bg: color-mix(in srgb, var(--color-ink-3) 50%, transparent);
|
|
--os-handle-bg-hover: color-mix(in srgb, var(--color-ink-3) 75%, transparent);
|
|
--os-handle-bg-active: var(--color-ink-2);
|
|
}
|
|
|
|
.shadow-lift {
|
|
box-shadow: var(--shadow-lift);
|
|
}
|