denshooter
486555dbf2
- Shared SubpageShell (HeaderClient paper strip + ink footer) and SubpageIntro, btn/ghost/card helpers in app/_ui/subpage.tsx - Projects list: poster cards with hard ink shadows, filter pills, ink search field; no fake 800ms skeleton and no framer-motion opacity:0 in SSR - Project detail: poster hero, .plakat-prose markdown, links/stack aside, back link works without JS - Books: server-side fetch (visible without JS), cover + rating pills - Legal notice / privacy: moved to app/_ui/*Client.tsx, root routes removed (middleware always redirects to /[locale]), consent reset via useConsent - ProjectThumbnail rebuilt on Plakat tokens - Old Header.tsx + test removed; brown/cream/sand palettes and unused glass-panel/admin-glass(-light)/liquid-bg-blob/float CSS dropped (liquid palette, glass-card, admin-glass-card stay for admin + 404) - .plakat-prose replaces the missing typography plugin Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
342 lines
8.2 KiB
CSS
342 lines
8.2 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
|
|
:root {
|
|
/* Warm Brown & Off-White Palette */
|
|
--background: #faf8f3; /* Warm off-white */
|
|
--foreground: #3e2723; /* Rich brown */
|
|
--card: rgba(255, 252, 245, 0.7);
|
|
--card-foreground: #3e2723;
|
|
--popover: #fffcf5;
|
|
--popover-foreground: #3e2723;
|
|
--primary: #5d4037; /* Medium brown */
|
|
--primary-foreground: #faf8f3;
|
|
--secondary: #d7ccc8; /* Light taupe */
|
|
--secondary-foreground: #3e2723;
|
|
--muted: #efebe9; /* Very light brown */
|
|
--muted-foreground: #795548; /* Muted brown */
|
|
--accent: #bcaaa4; /* Warm taupe */
|
|
--accent-foreground: #3e2723;
|
|
--destructive: #d84315; /* Warm red-brown */
|
|
--destructive-foreground: #faf8f3;
|
|
--border: #d7ccc8;
|
|
--input: #efebe9;
|
|
--ring: #a1887f; /* Warm brown ring */
|
|
--radius: 1rem;
|
|
|
|
/* Motion tokens: enter/exit = ease-out, on-screen movement = ease-in-out */
|
|
--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 {
|
|
--background: #1c1917; /* stone-900 */
|
|
--foreground: #f5f5f4; /* stone-100 */
|
|
--card: rgba(28, 25, 23, 0.7);
|
|
--card-foreground: #f5f5f4;
|
|
--popover: #1c1917;
|
|
--popover-foreground: #f5f5f4;
|
|
--primary: #d6d3d1; /* stone-300 */
|
|
--primary-foreground: #1c1917;
|
|
--secondary: #44403c; /* stone-700 */
|
|
--secondary-foreground: #f5f5f4;
|
|
--muted: #292524; /* stone-800 */
|
|
--muted-foreground: #a8a29e; /* stone-400 */
|
|
--accent: #57534e; /* stone-600 */
|
|
--accent-foreground: #f5f5f4;
|
|
--destructive: #7f1d1d; /* dark red */
|
|
--destructive-foreground: #f5f5f4;
|
|
--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: 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;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
text-rendering: optimizeLegibility;
|
|
position: relative;
|
|
transition: background-color 0.3s ease, color 0.3s ease;
|
|
}
|
|
|
|
/* Custom Selection */
|
|
::selection {
|
|
background: rgb(var(--plakat-ink));
|
|
color: rgb(var(--plakat-paper));
|
|
}
|
|
|
|
/* Smooth Scrolling */
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
/* Reduced motion: drop movement, keep colour/opacity feedback */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
html {
|
|
scroll-behavior: auto;
|
|
}
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
animation-delay: 0ms !important;
|
|
}
|
|
}
|
|
|
|
/* Glass-Karten, nur noch im Editor */
|
|
.glass-card {
|
|
background: var(--card);
|
|
backdrop-filter: blur(30px) saturate(200%);
|
|
-webkit-backdrop-filter: blur(30px) saturate(200%);
|
|
border: 1px solid var(--border);
|
|
box-shadow:
|
|
0 4px 6px -1px rgba(0, 0, 0, 0.06),
|
|
0 2px 4px -1px rgba(0, 0, 0, 0.05);
|
|
transition:
|
|
transform 250ms var(--ease-out),
|
|
box-shadow 250ms var(--ease-out),
|
|
border-color 200ms ease;
|
|
}
|
|
|
|
@media (hover: hover) and (pointer: fine) {
|
|
.glass-card:hover {
|
|
background: var(--card);
|
|
box-shadow:
|
|
0 20px 25px -5px rgba(0, 0, 0, 0.15),
|
|
0 10px 10px -5px rgba(0, 0, 0, 0.08);
|
|
transform: translateY(-4px);
|
|
border-color: var(--ring);
|
|
}
|
|
}
|
|
|
|
/* Typography & Headings */
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
font-family: var(--font-bricolage), "Avenir Next", "Segoe UI", sans-serif;
|
|
letter-spacing: -0.02em;
|
|
font-weight: 700;
|
|
}
|
|
|
|
|
|
/* Hide scrollbar but keep functionality */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: #bcaaa4;
|
|
border-radius: 4px;
|
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #a1887f;
|
|
}
|
|
|
|
.scrollbar-hide::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.scrollbar-hide {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
/* Markdown Specifics for Blog/Projects */
|
|
.markdown h1 {
|
|
@apply text-4xl font-bold mb-6 tracking-tight;
|
|
color: var(--foreground);
|
|
}
|
|
.markdown h2 {
|
|
@apply text-2xl font-semibold mt-8 mb-4 tracking-tight;
|
|
color: var(--foreground);
|
|
}
|
|
.markdown p {
|
|
@apply mb-4 leading-relaxed;
|
|
color: var(--foreground);
|
|
}
|
|
.markdown a {
|
|
@apply underline decoration-2 underline-offset-2 hover:opacity-80 transition-colors duration-300;
|
|
color: var(--primary);
|
|
text-decoration-color: var(--accent);
|
|
}
|
|
.markdown ul {
|
|
@apply list-disc list-inside mb-4 space-y-2;
|
|
color: var(--foreground);
|
|
}
|
|
.markdown code {
|
|
@apply px-1.5 py-0.5 rounded text-sm font-mono;
|
|
background: var(--muted);
|
|
color: var(--foreground);
|
|
}
|
|
.markdown pre {
|
|
@apply p-4 rounded-xl overflow-x-auto mb-6;
|
|
background: var(--foreground);
|
|
color: var(--background);
|
|
}
|
|
|
|
/* Admin Dashboard Styles - Warm Brown Theme */
|
|
.animated-bg {
|
|
background: #faf8f3;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: -1;
|
|
}
|
|
|
|
.admin-glass-card {
|
|
background: #fffcf5;
|
|
border: 1px solid #d7ccc8;
|
|
box-shadow: 0 4px 6px -1px rgba(62, 39, 35, 0.06);
|
|
color: #3e2723;
|
|
}
|
|
|
|
/* Fließtext der Unterseiten (Markdown, CMS-HTML) im Plakat-Stil.
|
|
Ersetzt das nicht installierte Typography-Plugin. */
|
|
.plakat-prose {
|
|
font-size: 17px;
|
|
line-height: 1.7;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
.plakat-prose > * + * {
|
|
margin-top: 1em;
|
|
}
|
|
.plakat-prose h1,
|
|
.plakat-prose h2,
|
|
.plakat-prose h3,
|
|
.plakat-prose h4 {
|
|
font-family: var(--font-bricolage), "Avenir Next", "Segoe UI", sans-serif;
|
|
font-weight: 800;
|
|
letter-spacing: -0.035em;
|
|
line-height: 1;
|
|
margin-top: 1.8em;
|
|
}
|
|
.plakat-prose > :first-child {
|
|
margin-top: 0;
|
|
}
|
|
/* Markdown aus dem CMS beginnt oft mit dem Projekttitel als h1; die Seite hat schon einen */
|
|
.plakat-prose > h1:first-child {
|
|
display: none;
|
|
}
|
|
.plakat-prose > h1:first-child + * {
|
|
margin-top: 0;
|
|
}
|
|
.plakat-prose h1 {
|
|
font-size: clamp(2rem, 4vw, 2.75rem);
|
|
}
|
|
.plakat-prose h2 {
|
|
font-size: clamp(1.7rem, 3.2vw, 2.25rem);
|
|
}
|
|
.plakat-prose h3 {
|
|
font-size: 1.4rem;
|
|
}
|
|
.plakat-prose h4 {
|
|
font-size: 1.15rem;
|
|
}
|
|
.plakat-prose strong {
|
|
font-weight: 700;
|
|
}
|
|
.plakat-prose a {
|
|
text-decoration: underline;
|
|
text-decoration-thickness: 2px;
|
|
text-underline-offset: 3px;
|
|
text-decoration-color: rgb(var(--plakat-red));
|
|
transition: color 150ms var(--ease-out);
|
|
}
|
|
@media (hover: hover) and (pointer: fine) {
|
|
.plakat-prose a:hover {
|
|
color: rgb(var(--plakat-red));
|
|
}
|
|
}
|
|
.plakat-prose ul,
|
|
.plakat-prose ol {
|
|
padding-left: 1.25em;
|
|
}
|
|
.plakat-prose ul {
|
|
list-style: square;
|
|
}
|
|
.plakat-prose ol {
|
|
list-style: decimal;
|
|
}
|
|
.plakat-prose li + li {
|
|
margin-top: 0.35em;
|
|
}
|
|
.plakat-prose li::marker {
|
|
color: rgb(var(--plakat-red));
|
|
}
|
|
.plakat-prose blockquote {
|
|
border-left: 4px solid rgb(var(--plakat-red));
|
|
padding-left: 1em;
|
|
}
|
|
.plakat-prose code {
|
|
font-family: var(--font-geist-mono), "SF Mono", Menlo, monospace;
|
|
font-size: 0.9em;
|
|
background: rgb(var(--plakat-paper-2));
|
|
border-radius: 4px;
|
|
padding: 0.1em 0.35em;
|
|
}
|
|
.plakat-prose pre {
|
|
background: rgb(var(--plakat-ink));
|
|
color: rgb(var(--plakat-paper));
|
|
border-radius: 12px;
|
|
padding: 1rem 1.25rem;
|
|
overflow-x: auto;
|
|
overflow-wrap: normal;
|
|
}
|
|
.plakat-prose pre code {
|
|
background: transparent;
|
|
padding: 0;
|
|
color: inherit;
|
|
}
|
|
.plakat-prose img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
border: 2px solid rgb(var(--plakat-ink));
|
|
border-radius: 12px;
|
|
}
|
|
.plakat-prose hr {
|
|
border: 0;
|
|
border-top: 2px solid rgb(var(--plakat-ink));
|
|
}
|
|
.plakat-prose table {
|
|
display: block;
|
|
max-width: 100%;
|
|
overflow-x: auto;
|
|
border-collapse: collapse;
|
|
}
|
|
.plakat-prose th,
|
|
.plakat-prose td {
|
|
border-bottom: 1px solid rgb(var(--plakat-ink) / 0.2);
|
|
padding: 0.5em 0.75em;
|
|
text-align: left;
|
|
}
|
|
|