93 lines
2.5 KiB
TypeScript
93 lines
2.5 KiB
TypeScript
import type { Config } from "tailwindcss";
|
|
|
|
const config: Config = {
|
|
content: [
|
|
"./app/**/*.{ts,tsx}",
|
|
"./components/**/*.{ts,tsx}",
|
|
],
|
|
theme: {
|
|
container: {
|
|
center: true,
|
|
padding: {
|
|
DEFAULT: "1.25rem",
|
|
md: "2rem",
|
|
lg: "3rem",
|
|
},
|
|
screens: {
|
|
sm: "640px",
|
|
md: "768px",
|
|
lg: "1024px",
|
|
xl: "1200px",
|
|
"2xl": "1320px",
|
|
},
|
|
},
|
|
extend: {
|
|
colors: {
|
|
// Warme Naturpalette — ruhiger Spreewald-Ton
|
|
parchment: "#F5F1E8", // Hintergrund
|
|
cream: "#FBF9F4", // heller Hintergrund
|
|
ink: "#1C2620", // Haupttext (tiefes Waldgrün-Schwarz)
|
|
moss: {
|
|
50: "#EEF0EA",
|
|
100: "#D9DECF",
|
|
200: "#B4BFA3",
|
|
300: "#8A9876",
|
|
400: "#6B7D58",
|
|
500: "#5A6B4F", // Akzent
|
|
600: "#48593F",
|
|
700: "#3A4734",
|
|
800: "#2C3A2A",
|
|
900: "#1F2A1D",
|
|
},
|
|
sand: {
|
|
50: "#FAF5EB",
|
|
100: "#F0E6D2",
|
|
200: "#E2D3B0",
|
|
300: "#CDB582",
|
|
400: "#B6955A",
|
|
500: "#8B6F47", // warme Akzentfarbe
|
|
600: "#6E5836",
|
|
700: "#544229",
|
|
},
|
|
stone: {
|
|
muted: "#A9A391",
|
|
soft: "#DCD6C6",
|
|
},
|
|
},
|
|
fontFamily: {
|
|
display: ["var(--font-fraunces)", "Georgia", "serif"],
|
|
sans: ["var(--font-figtree)", "ui-sans-serif", "system-ui", "sans-serif"],
|
|
},
|
|
fontSize: {
|
|
"display-xl": ["clamp(3rem, 8vw, 6rem)", { lineHeight: "1.02", letterSpacing: "-0.03em" }],
|
|
"display-lg": ["clamp(2.25rem, 5vw, 4rem)", { lineHeight: "1.05", letterSpacing: "-0.025em" }],
|
|
"display-md": ["clamp(1.75rem, 3.5vw, 2.75rem)", { lineHeight: "1.1", letterSpacing: "-0.02em" }],
|
|
},
|
|
letterSpacing: {
|
|
tightest: "-0.04em",
|
|
},
|
|
boxShadow: {
|
|
soft: "0 2px 10px rgba(28, 38, 32, 0.04), 0 12px 30px rgba(28, 38, 32, 0.06)",
|
|
card: "0 1px 2px rgba(28, 38, 32, 0.04), 0 8px 24px rgba(28, 38, 32, 0.06)",
|
|
},
|
|
animation: {
|
|
"fade-up": "fadeUp 0.8s ease-out both",
|
|
"fade-in": "fadeIn 1s ease-out both",
|
|
},
|
|
keyframes: {
|
|
fadeUp: {
|
|
"0%": { opacity: "0", transform: "translateY(16px)" },
|
|
"100%": { opacity: "1", transform: "translateY(0)" },
|
|
},
|
|
fadeIn: {
|
|
"0%": { opacity: "0" },
|
|
"100%": { opacity: "1" },
|
|
},
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
};
|
|
|
|
export default config;
|