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>
141 lines
4.8 KiB
TypeScript
141 lines
4.8 KiB
TypeScript
// tailwind.config.ts
|
|
import type { Config } from "tailwindcss";
|
|
|
|
// tailwind.config.js
|
|
export default {
|
|
darkMode: "class", // Enables class-based dark mode
|
|
// Touch devices fire :hover on tap and keep it stuck; only apply hover styles
|
|
// where a real pointer exists.
|
|
future: {
|
|
hoverOnlyWhenSupported: true,
|
|
},
|
|
content: [
|
|
"./app/**/*.{js,ts,jsx,tsx}",
|
|
"./app/components/**/*.{js,ts,jsx,tsx}",
|
|
// Add other paths if necessary
|
|
],
|
|
theme: {
|
|
extend: {
|
|
// Stronger curves than the CSS defaults. Overriding `out` and `in-out`
|
|
// upgrades every existing `ease-out` / `ease-in-out` utility at once.
|
|
transitionTimingFunction: {
|
|
out: "cubic-bezier(0.23, 1, 0.32, 1)",
|
|
"in-out": "cubic-bezier(0.77, 0, 0.175, 1)",
|
|
drawer: "cubic-bezier(0.32, 0.72, 0, 1)",
|
|
},
|
|
keyframes: {
|
|
fadeIn: {
|
|
"0%": { opacity: "0", transform: "translateY(8px)" },
|
|
"100%": { opacity: "1", transform: "translateY(0)" },
|
|
},
|
|
slideDown: {
|
|
"0%": { opacity: "0", transform: "translateY(-12px)" },
|
|
"100%": { opacity: "1", transform: "translateY(0)" },
|
|
},
|
|
wordmarkUp: {
|
|
"0%": { opacity: "0", transform: "translateY(40%)" },
|
|
"100%": { opacity: "1", transform: "translateY(0)" },
|
|
},
|
|
marquee: {
|
|
"0%": { transform: "translateX(0)" },
|
|
"100%": { transform: "translateX(-50%)" },
|
|
},
|
|
scrollHint: {
|
|
"0%": { opacity: "0", transform: "scaleY(0.4)" },
|
|
"40%": { opacity: "1", transform: "scaleY(1)" },
|
|
"100%": { opacity: "0", transform: "scaleY(1)" },
|
|
},
|
|
},
|
|
animation: {
|
|
"fade-in": "fadeIn 600ms cubic-bezier(0.23, 1, 0.32, 1) both",
|
|
"slide-down": "slideDown 500ms cubic-bezier(0.23, 1, 0.32, 1) both",
|
|
"scroll-hint": "scrollHint 2.4s cubic-bezier(0.77, 0, 0.175, 1) infinite",
|
|
"spin-slow": "spin 4s linear infinite",
|
|
"wordmark-up": "wordmarkUp 900ms cubic-bezier(0.23, 1, 0.32, 1) both",
|
|
marquee: "marquee 32s linear infinite",
|
|
},
|
|
colors: {
|
|
background: "var(--background)",
|
|
foreground: "var(--foreground)",
|
|
card: {
|
|
DEFAULT: "var(--card)",
|
|
foreground: "var(--card-foreground)",
|
|
},
|
|
popover: {
|
|
DEFAULT: "var(--popover)",
|
|
foreground: "var(--popover-foreground)",
|
|
},
|
|
primary: {
|
|
DEFAULT: "var(--primary)",
|
|
foreground: "var(--primary-foreground)",
|
|
},
|
|
secondary: {
|
|
DEFAULT: "var(--secondary)",
|
|
foreground: "var(--secondary-foreground)",
|
|
},
|
|
muted: {
|
|
DEFAULT: "var(--muted)",
|
|
foreground: "var(--muted-foreground)",
|
|
},
|
|
accent: {
|
|
DEFAULT: "var(--accent)",
|
|
foreground: "var(--accent-foreground)",
|
|
},
|
|
destructive: {
|
|
DEFAULT: "var(--destructive)",
|
|
foreground: "var(--destructive-foreground)",
|
|
},
|
|
border: "var(--border)",
|
|
input: "var(--input)",
|
|
ring: "var(--ring)",
|
|
// Plakat-Design: Rot, Tinte, Papier. Tinte und Papier tauschen im Dark Mode die Rollen.
|
|
signal: "rgb(var(--plakat-red) / <alpha-value>)",
|
|
ink: "rgb(var(--plakat-ink) / <alpha-value>)",
|
|
paper: {
|
|
DEFAULT: "rgb(var(--plakat-paper) / <alpha-value>)",
|
|
2: "rgb(var(--plakat-paper-2) / <alpha-value>)",
|
|
},
|
|
ok: "rgb(var(--plakat-ok) / <alpha-value>)",
|
|
// Feste Objektfarben auf dem Tisch, unabhängig vom Theme
|
|
polaroid: { DEFAULT: "#fbfaf8", ink: "#140c0b" },
|
|
bookcover: { DEFAULT: "#2b1a14", text: "#f3e7dc" },
|
|
stone: {
|
|
50: "#FAFAF9",
|
|
100: "#F5F5F4",
|
|
200: "#E7E5E4",
|
|
300: "#D6D3D1",
|
|
400: "#A8A29E",
|
|
500: "#78716C",
|
|
600: "#57534E",
|
|
700: "#44403C",
|
|
800: "#292524",
|
|
900: "#1C1917",
|
|
},
|
|
// Alte Pastellpalette, nur noch im Admin-Bereich und auf der 404-Seite
|
|
liquid: {
|
|
mint: "#A7F3D0",
|
|
lavender: "#DDD6FE",
|
|
blue: "#BFDBFE",
|
|
rose: "#FECACA",
|
|
yellow: "#FDE68A",
|
|
peach: "#FED7AA",
|
|
pink: "#FBCFE8",
|
|
sky: "#BAE6FD",
|
|
lime: "#D9F99D",
|
|
coral: "#FCA5A5",
|
|
purple: "#E9D5FF",
|
|
teal: "#99F6E4",
|
|
amber: "#FDE047",
|
|
},
|
|
},
|
|
fontFamily: {
|
|
sans: ["var(--font-geist)", "Helvetica Neue", "Arial", "sans-serif"],
|
|
display: ["var(--font-bricolage)", "Avenir Next", "Segoe UI", "sans-serif"],
|
|
serif: ["var(--font-bricolage)", "Avenir Next", "Segoe UI", "sans-serif"],
|
|
mono: ["var(--font-geist-mono)", "SF Mono", "Menlo", "monospace"],
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
} satisfies Config;
|