feat: plakat redesign phase 1 (tokens, fonts, poster hero, header) (#74)
- New design tokens: signal red, ink and paper as RGB channels; ink and paper swap roles in dark mode so every component inverts cleanly - Fonts via next/font: Bricolage Grotesque (with wdth/opsz axes), Geist, Geist Mono; drop Inter and Playfair - Poster hero: kicker, giant DK0 wordmark that reacts to pointer distance (weight and width through a damped spring, desktop only, off for reduced motion), claim as h1, intro with thesis countdown, marquee strip - Header in poster style: transparent over the red hero, paper strip with ink rule when scrolled or on subpages; drawer menu restyled - Remove wavy SVG separators, CSS shader gradient, background blobs and unused providers that caused the pink/purple bands between sections - Drop the global p/span/div color override so colors inherit properly - New hero texts in de/en, tests and i18n key check updated Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
+19
-13
@@ -30,6 +30,13 @@
|
||||
--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
|
||||
--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
|
||||
--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
|
||||
|
||||
/* Plakat-Design (RGB-Kanäle, damit Tailwind-Deckkraft funktioniert) */
|
||||
--plakat-red: 232 64 47;
|
||||
--plakat-ink: 20 12 11;
|
||||
--plakat-paper: 246 243 241;
|
||||
--plakat-paper-2: 235 230 226;
|
||||
--plakat-ok: 31 157 99;
|
||||
}
|
||||
|
||||
.dark {
|
||||
@@ -52,12 +59,18 @@
|
||||
--border: #44403c;
|
||||
--input: #292524;
|
||||
--ring: #d6d3d1;
|
||||
|
||||
/* Tinte und Papier tauschen die Rollen, das Rot bleibt */
|
||||
--plakat-ink: 243 238 233;
|
||||
--plakat-paper: 21 16 15;
|
||||
--plakat-paper-2: 36 30 28;
|
||||
--plakat-ok: 60 199 138;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: "Inter", sans-serif;
|
||||
background: rgb(var(--plakat-paper));
|
||||
color: rgb(var(--plakat-ink));
|
||||
font-family: var(--font-geist), "Helvetica Neue", Arial, sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow-x: hidden;
|
||||
@@ -70,8 +83,8 @@ body {
|
||||
|
||||
/* Custom Selection */
|
||||
::selection {
|
||||
background: var(--primary); /* Rich brown for better contrast */
|
||||
color: var(--primary-foreground); /* Off-white */
|
||||
background: rgb(var(--plakat-ink));
|
||||
color: rgb(var(--plakat-paper));
|
||||
}
|
||||
|
||||
/* Smooth Scrolling */
|
||||
@@ -135,18 +148,11 @@ h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: var(--font-playfair), Georgia, serif;
|
||||
font-family: var(--font-bricolage), "Avenir Next", "Segoe UI", sans-serif;
|
||||
letter-spacing: -0.02em;
|
||||
font-weight: 700;
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
/* Improve text contrast - using foreground variable for WCAG AA compliance */
|
||||
p,
|
||||
span,
|
||||
div {
|
||||
color: var(--foreground); /* #3e2723 - meets WCAG AA standards */
|
||||
}
|
||||
|
||||
/* Hide scrollbar but keep functionality */
|
||||
::-webkit-scrollbar {
|
||||
|
||||
Reference in New Issue
Block a user