diff --git a/.gitignore b/.gitignore index 3c3629e..1380c2e 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ node_modules +.next \ No newline at end of file diff --git a/components/PerformanceOptimizedFontCard.jsx b/components/PerformanceOptimizedFontCard.jsx index 7f2cb58..64ffc49 100644 --- a/components/PerformanceOptimizedFontCard.jsx +++ b/components/PerformanceOptimizedFontCard.jsx @@ -96,6 +96,9 @@ const PerformanceOptimizedFontCard = forwardRef(({ const getFontStyle = useCallback((name) => { const baseStyle = { wordBreak: "break-word", lineHeight: "1.3", willChange: "auto" }; const fontEntry = fontTransforms[name]; + if (!fontEntry) { + console.warn(`Font definition missing for ${name}`); + } if (!fontEntry) return baseStyle; const style = { ...baseStyle }; diff --git a/components/fontTransforms.jsx b/components/fontTransforms.jsx index 2fe528a..05cc69f 100644 --- a/components/fontTransforms.jsx +++ b/components/fontTransforms.jsx @@ -25,24 +25,25 @@ const createTransform = (blockKey) => (text) => // 3) Font-Definitionen const fontList = [ - "abril-fatface", "alegreya", "alfa-slab-one", "almendra", "amatic-sc", "andika", - "architects-daughter", "audiowide", "averia-libre", "bebas-neue", "black-ops-one", - "caveat", "cinzel-decorative", "courgette", "dancing-script", "exo", "fjalla-one", - "germania-one", "glass-antiqua", "gloria-hallelujah", "great-vibes", "holtwood-one-sc", - "indie-flower", "italiana", "jost", "kaushan-script", "lato", "metal-mania", "montserrat", - "neucha", "noto-sans", "open-sans", "orbitron", "oswald", "pacifico", "permanent-marker", - "philosopher", "playfair-display", "poppins", "press-start-2p", "questrial", "quicksand", - "rajdhani", "raleway", "righteous", "roboto", "sacramento", "satisfy", "space-mono", - "spectral", "staatliches", "stint-ultra-condensed", "syncopate", "ultra", "unica-one", - "work-sans", "yellowtail" + "Abril Fatface", "Alegreya", "Alfa Slab One", "Almendra", "Amatic SC", "Andika", + "Architects Daughter", "Audiowide", "Averia Libre", "Bebas Neue", "Black Ops One", + "Caveat", "Cinzel Decorative", "Courgette", "Dancing Script", "Exo", "Fjalla One", + "Germania One", "Glass Antiqua", "Gloria Hallelujah", "Great Vibes", "Holtwood One SC", + "Indie Flower", "Italiana", "Jost", "Kaushan Script", "Lato", "Metal Mania", "Montserrat", + "Neucha", "Noto Sans", "Open Sans", "Orbitron", "Oswald", "Pacifico", "Permanent Marker", + "Philosopher", "Playfair Display", "Poppins", "Press Start 2P", "Questrial", "Quicksand", + "Rajdhani", "Raleway", "Righteous", "Roboto", "Sacramento", "Satisfy", "Space Mono", + "Spectral", "Staatliches", "Stint Ultra Condensed", "Syncopate", "Ultra", "Unica One", + "Work Sans", "Yellowtail" ]; -// 4) Kategorie-Regeln (vereinfacht) +// 4) Kategorie-Regeln (angepasst an neue Namen) const getCategory = (name) => { - if (["caveat", "dancing-script", "pacifico", "amatic-sc", "kaushan-script", "courgette", "great-vibes", "satisfy", "sacramento", "neucha", "gloria-hallelujah", "almendra", "indie-flower", "architects-daughter"].includes(name)) return "handwriting"; - if (["bebas-neue", "black-ops-one", "holtwood-one-sc", "abril-fatface", "playfair-display", "permanent-marker", "alfa-slab-one", "germania-one", "oswald", "stint-ultra-condensed"].includes(name)) return "statement"; - if (["exo", "orbitron", "audiowide", "rajdhani", "space-mono", "questrial", "syncopate", "unica-one", "italiana", "staatliches"].includes(name)) return "futuristic"; - if (["press-start-2p", "righteous", "metal-mania", "alegreya", "spectral", "fjalla-one", "glass-antiqua", "cinzel-decorative", "andika"].includes(name)) return "aesthetic"; + const normalizedName = name.toLowerCase().replace(/ /g, "-"); + if (["caveat", "dancing-script", "pacifico", "amatic-sc", "kaushan-script", "courgette", "great-vibes", "satisfy", "sacramento", "neucha", "gloria-hallelujah", "almendra", "indie-flower", "architects-daughter"].includes(normalizedName)) return "handwriting"; + if (["bebas-neue", "black-ops-one", "holtwood-one-sc", "abril-fatface", "playfair-display", "permanent-marker", "alfa-slab-one", "germania-one", "oswald", "stint-ultra-condensed"].includes(normalizedName)) return "statement"; + if (["exo", "orbitron", "audiowide", "rajdhani", "space-mono", "questrial", "syncopate", "unica-one", "italiana", "staatliches"].includes(normalizedName)) return "futuristic"; + if (["press-start-2p", "righteous", "metal-mania", "alegreya", "spectral", "fjalla-one", "glass-antiqua", "cinzel-decorative", "andika"].includes(normalizedName)) return "aesthetic"; return "modern"; }; @@ -56,14 +57,14 @@ const blockForCategory = { export const fontTransforms = Object.fromEntries( fontList.map((font) => { - const name = font.replace(/-/g, " ").replace(/\b\w/g, (l) => l.toUpperCase()); + const normalizedFont = font.toLowerCase().replace(/ /g, "-"); const category = getCategory(font); const block = blockForCategory[category]; - return [name, { + return [font, { transform: createTransform(block), category, - description: `${name} – Unicode-Stil automatisch zugewiesen` , - className: `font-${font}` + description: `${font} – Unicode-Stil automatisch zugewiesen`, + className: `font-${normalizedFont}` }]; }) ); @@ -72,8 +73,8 @@ export const transformText = (text, fontName) => { const font = fontTransforms[fontName]; if (!font || !text) return { transformed: text, fontClassName: "" }; return { - transformed: font.transform(text), - fontClassName: font.className + transformed: font.transform(text), // Unicode-Transformation anwenden + fontClassName: font.className // Tailwind-Klasse für Font-Familie }; }; diff --git a/lib/fonts.js b/lib/fonts.js deleted file mode 100644 index c0051e3..0000000 --- a/lib/fonts.js +++ /dev/null @@ -1,73 +0,0 @@ -// lib/fonts.js - -export const fonts = { - // 🔤 Modern - montserrat: "font-montserrat", - lato: "font-lato", - raleway: "font-raleway", - poppins: "font-poppins", - opensans: "font-open-sans", - roboto: "font-roboto", - worksans: "font-work-sans", - notosans: "font-noto-sans", - jost: "font-jost", - quicksand: "font-quicksand", - averialibre: "font-averia-libre", - philosopher: "font-philosopher", - - // ✍️ Handwriting - pacifico: "font-pacifico", - sacramento: "font-sacramento", - caveat: "font-caveat", - dancingscript: "font-dancing-script", - indieflower: "font-indie-flower", - amatic: "font-amatic-sc", - kaushan: "font-kaushan-script", - architects: "font-architects-daughter", - neucha: "font-neucha", - greatvibes: "font-great-vibes", - satisfy: "font-satisfy", - yellowtail: "font-yellowtail", - gloria: "font-gloria-hallelujah", - courgette: "font-courgette", - almendra: "font-almendra", - - // 🧑‍🎤 Statement - oswald: "font-oswald", - bebasneue: "font-bebas-neue", - ultra: "font-ultra", - stint: "font-stint-ultra-condensed", - playfair: "font-playfair-display", - abril: "font-abril-fatface", - permanentmarker: "font-permanent-marker", - alfaslab: "font-alfa-slab-one", - blackops: "font-black-ops-one", - germania: "font-germania-one", - holtwood: "font-holtwood-one-sc", - - // 🚀 Futuristic - exo: "font-exo", - orbitron: "font-orbitron", - audiowide: "font-audiowide", - rajdhani: "font-rajdhani", - spacemono: "font-space-mono", - questrial: "font-questrial", - syncopate: "font-syncopate", - unicaone: "font-unica-one", - italiana: "font-italiana", - staatliches: "font-staatliches", - - // 🧢 Aesthetic - pressstart2p: "font-press-start-2p", - righteous: "font-righteous", - metalmania: "font-metal-mania", - alegreya: "font-alegreya", - spectral: "font-spectral", - fjallaone: "font-fjalla-one", - glassantiqua: "font-glass-antiqua", - cinzeldecorative: "font-cinzel-decorative", - andika: "font-andika", -}; - -export const getFontData = (key) => - fonts[key?.toLowerCase()] ?? fonts["montserrat"]; diff --git a/lib/tailwind‑font‑map.js b/lib/tailwind‑font‑map.js deleted file mode 100644 index 2e3655f..0000000 --- a/lib/tailwind‑font‑map.js +++ /dev/null @@ -1,68 +0,0 @@ -/** - * Enthält **nur** die CSS‑Variablen‑Namen, die next/font im Browser setzt. - * In fonts.js oder per @font-face werden sie erzeugt – hier referenzieren wir sie. - */ - -export default { - montserrat: "--font-montserrat", - lato: "--font-lato", - raleway: "--font-raleway", - poppins: "--font-poppins", - "open-sans": "--font-open-sans", - roboto: "--font-roboto", - "work-sans": "--font-work-sans", - "noto-sans": "--font-noto-sans", - jost: "--font-jost", - quicksand: "--font-quicksand", - "averia-libre": "--font-averia-libre", - philosopher: "--font-philosopher", - - pacifico: "--font-pacifico", - sacramento: "--font-sacramento", - caveat: "--font-caveat", - "dancing-script": "--font-dancing-script", - "indie-flower": "--font-indie-flower", - "amatic-sc": "--font-amatic-sc", - "kaushan-script": "--font-kaushan-script", - "architects-daughter": "--font-architects-daughter", - neucha: "--font-neucha", - "great-vibes": "--font-great-vibes", - satisfy: "--font-satisfy", - yellowtail: "--font-yellowtail", - "gloria-hallelujah": "--font-gloria-hallelujah", - - oswald: "--font-oswald", - "bebas-neue": "--font-bebas-neue", - ultra: "--font-ultra", - "stint-ultra-condensed": "--font-stint-ultra-condensed", - "playfair-display": "--font-playfair-display", - "abril-fatface": "--font-abril-fatface", - "permanent-marker": "--font-permanent-marker", - "alfa-slab-one": "--font-alfa-slab-one", - "black-ops-one": "--font-black-ops-one", - "germania-one": "--font-germania-one", - "holtwood-one-sc": "--font-holtwood-one-sc", - courgette: "--font-courgette", - - exo: "--font-exo", - orbitron: "--font-orbitron", - audiowide: "--font-audiowide", - rajdhani: "--font-rajdhani", - "space-mono": "--font-space-mono", - questrial: "--font-questrial", - syncopate: "--font-syncopate", - "unica-one": "--font-unica-one", - italiana: "--font-italiana", - staatliches: "--font-staatliches", - - "press-start-2p": "--font-press-start-2p", - righteous: "--font-righteous", - "metal-mania": "--font-metal-mania", - alegreya: "--font-alegreya", - spectral: "--font-spectral", - "fjalla-one": "--font-fjalla-one", - "glass-antiqua": "--font-glass-antiqua", - "cinzel-decorative": "--font-cinzel-decorative", - andika: "--font-andika", - almendra: "--font-almendra", -}; diff --git a/next.config.mjs b/next.config.mjs deleted file mode 100644 index 583dc3a..0000000 --- a/next.config.mjs +++ /dev/null @@ -1,12 +0,0 @@ -// next.config.mjs -import path from "path"; -import withFlowbiteReact from "flowbite-react/plugin/nextjs"; - -const nextConfig = { - webpack: (config) => { - config.resolve.alias["@"] = path.resolve(process.cwd()); - return config; - }, -}; - -export default withFlowbiteReact(nextConfig); \ No newline at end of file diff --git a/pages/_app.js b/pages/_app.js index 20729b5..ac7ff0a 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -1,18 +1,6 @@ -// pages/_app.jsx -import "@/styles/tailwind.build.css"; // dein Tailwind‑Build -import { fonts } from "@/lib/fonts"; -import "../styles/local-fonts.css"; - -// CSS-Variablen für alle Fonts aus next/font/google -const allFontVars = Object.values(fonts) - .filter((f) => f?.variable) - .map((f) => f.variable) - .join(" "); +import "@/styles/tailwind.build.css"; // dein Tailwind-Build +import "../styles/globals.css"; export default function MyApp({ Component, pageProps }) { - return ( -
- -
- ); + return ; } diff --git a/styles/globals.css b/styles/globals.css index 0d25aa7..94de242 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -1,639 +1,585 @@ -/* in globals.css oder styles/index.css */ -@import "./local-fonts.css"; +/* globals.css */ +@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Alegreya&family=Alfa+Slab+One&family=Almendra&family=Amatic+SC&family=Andika&family=Architects+Daughter&family=Audiowide&family=Averia+Libre&family=Bebas+Neue&family=Black+Ops+One&family=Caveat&family=Cinzel+Decorative&family=Courgette&family=Dancing+Script&family=Exo&family=Fjalla+One&family=Germania+One&family=Gloria+Hallelujah&family=Great+Vibes&family=Holtwood+One+SC&family=Indie+Flower&family=Italiana&family=Jost&family=Kaushan+Script&family=Lato&family=Metal+Mania&family=Montserrat&family=Neucha&family=Noto+Sans&family=Open+Sans&family=Orbitron&family=Oswald&family=Pacifico&family=Permanent+Marker&family=Philosopher&family=Playfair+Display&family=Poppins&family=Press+Start+2P&family=Questrial&family=Quicksand&family=Rajdhani&family=Raleway&family=Righteous&family=Roboto&family=Sacramento&family=Satisfy&family=Space+Mono&family=Spectral&family=Staatliches&family=Stint+Ultra+Condensed&family=Syncopate&family=Ultra&family=Unica+One&family=Work+Sans&family=Yellowtail&display=swap'); @tailwind base; @tailwind components; @tailwind utilities; -/* === Lokale Fonts via woff2 einbinden === */ +/* === Hybrid Font-Definitionen (Google primär, lokal als Fallback) === */ @font-face { - font-family: "AbrilFatface"; - src: url("/fonts/abril-fatface.woff2") format("woff2"); + font-family: 'Abril Fatface'; + src: local('Abril Fatface'), url("/fonts/abril-fatface.woff2") format("woff2"); font-weight: 400; font-style: normal; + font-display: swap; } - @font-face { - font-family: "Alegreya"; - src: url("/fonts/alegreya.woff2") format("woff2"); + font-family: 'Alegreya'; + src: local('Alegreya'), url("/fonts/alegreya.woff2") format("woff2"); font-weight: 400; font-style: normal; + font-display: swap; } - @font-face { - font-family: "AlfaSlabOne"; - src: url("/fonts/alfa-slab-one.woff2") format("woff2"); + font-family: 'Alfa Slab One'; + src: local('Alfa Slab One'), url("/fonts/alfa-slab-one.woff2") format("woff2"); font-weight: 400; font-style: normal; + font-display: swap; } - @font-face { - font-family: "Almendra"; - src: url("/fonts/almendra.woff2") format("woff2"); + font-family: 'Almendra'; + src: local('Almendra'), url("/fonts/almendra.woff2") format("woff2"); font-weight: 400; font-style: normal; + font-display: swap; } - @font-face { - font-family: "AmaticSc"; - src: url("/fonts/amatic-sc.woff2") format("woff2"); + font-family: 'Amatic SC'; + src: local('Amatic SC'), url("/fonts/amatic-sc.woff2") format("woff2"); font-weight: 400; font-style: normal; + font-display: swap; } - @font-face { - font-family: "Andika"; - src: url("/fonts/andika.woff2") format("woff2"); + font-family: 'Andika'; + src: local('Andika'), url("/fonts/andika.woff2") format("woff2"); font-weight: 400; font-style: normal; + font-display: swap; } - @font-face { - font-family: "ArchitectsDaughter"; - src: url("/fonts/architects-daughter.woff2") format("woff2"); + font-family: 'Architects Daughter'; + src: local('Architects Daughter'), url("/fonts/architects-daughter.woff2") format("woff2"); font-weight: 400; font-style: normal; + font-display: swap; } - @font-face { - font-family: "Audiowide"; - src: url("/fonts/audiowide.woff2") format("woff2"); + font-family: 'Audiowide'; + src: local('Audiowide'), url("/fonts/audiowide.woff2") format("woff2"); font-weight: 400; font-style: normal; + font-display: swap; } - @font-face { - font-family: "AveriaLibre"; - src: url("/fonts/averia-libre.woff2") format("woff2"); + font-family: 'Averia Libre'; + src: local('Averia Libre'), url("/fonts/averia-libre.woff2") format("woff2"); font-weight: 400; font-style: normal; + font-display: swap; } - @font-face { - font-family: "BebasNeue"; - src: url("/fonts/bebas-neue.woff2") format("woff2"); + font-family: 'Bebas Neue'; + src: local('Bebas Neue'), url("/fonts/bebas-neue.woff2") format("woff2"); font-weight: 400; font-style: normal; + font-display: swap; } - @font-face { - font-family: "BlackOpsOne"; - src: url("/fonts/black-ops-one.woff2") format("woff2"); + font-family: 'Black Ops One'; + src: local('Black Ops One'), url("/fonts/black-ops-one.woff2") format("woff2"); font-weight: 400; font-style: normal; + font-display: swap; } - @font-face { - font-family: "Caveat"; - src: url("/fonts/caveat.woff2") format("woff2"); + font-family: 'Caveat'; + src: local('Caveat'), url("/fonts/caveat.woff2") format("woff2"); font-weight: 400; font-style: normal; + font-display: swap; } - @font-face { - font-family: "CinzelDecorative"; - src: url("/fonts/cinzel-decorative.woff2") format("woff2"); + font-family: 'Cinzel Decorative'; + src: local('Cinzel Decorative'), url("/fonts/cinzel-decorative.woff2") format("woff2"); font-weight: 400; font-style: normal; + font-display: swap; } - @font-face { - font-family: "Courgette"; - src: url("/fonts/courgette.woff2") format("woff2"); + font-family: 'Courgette'; + src: local('Courgette'), url("/fonts/courgette.woff2") format("woff2"); font-weight: 400; font-style: normal; + font-display: swap; } - @font-face { - font-family: "DancingScript"; - src: url("/fonts/dancing-script.woff2") format("woff2"); + font-family: 'Dancing Script'; + src: local('Dancing Script'), url("/fonts/dancing-script.woff2") format("woff2"); font-weight: 400; font-style: normal; + font-display: swap; } - @font-face { - font-family: "Exo"; - src: url("/fonts/exo.woff2") format("woff2"); + font-family: 'Exo'; + src: local('Exo'), url("/fonts/exo.woff2") format("woff2"); font-weight: 400; font-style: normal; + font-display: swap; } - @font-face { - font-family: "FjallaOne"; - src: url("/fonts/fjalla-one.woff2") format("woff2"); + font-family: 'Fjalla One'; + src: local('Fjalla One'), url("/fonts/fjalla-one.woff2") format("woff2"); font-weight: 400; font-style: normal; + font-display: swap; } - @font-face { - font-family: "GermaniaOne"; - src: url("/fonts/germania-one.woff2") format("woff2"); + font-family: 'Germania One'; + src: local('Germania One'), url("/fonts/germania-one.woff2") format("woff2"); font-weight: 400; font-style: normal; + font-display: swap; } - @font-face { - font-family: "GlassAntiqua"; + font-family: 'Glass Antiqua'; src: url("/fonts/glass-antiqua.woff2") format("woff2"); font-weight: 400; font-style: normal; + font-display: swap; } - @font-face { - font-family: "GloriaHallelujah"; - src: url("/fonts/gloria-hallelujah.woff2") format("woff2"); + font-family: 'Gloria Hallelujah'; + src: local('Gloria Hallelujah'), url("/fonts/gloria-hallelujah.woff2") format("woff2"); font-weight: 400; font-style: normal; + font-display: swap; } - @font-face { - font-family: "GreatVibes"; - src: url("/fonts/great-vibes.woff2") format("woff2"); + font-family: 'Great Vibes'; + src: local('Great Vibes'), url("/fonts/great-vibes.woff2") format("woff2"); font-weight: 400; font-style: normal; + font-display: swap; } - @font-face { - font-family: "HoltwoodOneSc"; - src: url("/fonts/holtwood-one-sc.woff2") format("woff2"); + font-family: 'Holtwood One SC'; + src: local('Holtwood One SC'), url("/fonts/holtwood-one-sc.woff2") format("woff2"); font-weight: 400; font-style: normal; + font-display: swap; } - @font-face { - font-family: "IndieFlower"; - src: url("/fonts/indie-flower.woff2") format("woff2"); + font-family: 'Indie Flower'; + src: local('Indie Flower'), url("/fonts/indie-flower.woff2") format("woff2"); font-weight: 400; font-style: normal; + font-display: swap; } - @font-face { - font-family: "Italiana"; - src: url("/fonts/italiana.woff2") format("woff2"); + font-family: 'Italiana'; + src: local('Italiana'), url("/fonts/italiana.woff2") format("woff2"); font-weight: 400; font-style: normal; + font-display: swap; } - @font-face { - font-family: "Jost"; - src: url("/fonts/jost.woff2") format("woff2"); + font-family: 'Jost'; + src: local('Jost'), url("/fonts/jost.woff2") format("woff2"); font-weight: 400; font-style: normal; + font-display: swap; } - @font-face { - font-family: "KaushanScript"; - src: url("/fonts/kaushan-script.woff2") format("woff2"); + font-family: 'Kaushan Script'; + src: local('Kaushan Script'), url("/fonts/kaushan-script.woff2") format("woff2"); font-weight: 400; font-style: normal; + font-display: swap; } - @font-face { - font-family: "Lato"; - src: url("/fonts/lato.woff2") format("woff2"); + font-family: 'Lato'; + src: local('Lato'), url("/fonts/lato.woff2") format("woff2"); font-weight: 400; font-style: normal; + font-display: swap; } - @font-face { - font-family: "MetalMania"; - src: url("/fonts/metal-mania.woff2") format("woff2"); + font-family: 'Metal Mania'; + src: local('Metal Mania'), url("/fonts/metal-mania.woff2") format("woff2"); font-weight: 400; font-style: normal; + font-display: swap; } - @font-face { - font-family: "Montserrat"; - src: url("/fonts/montserrat.woff2") format("woff2"); + font-family: 'Montserrat'; + src: local('Montserrat'), url("/fonts/montserrat.woff2") format("woff2"); font-weight: 400; font-style: normal; + font-display: swap; } - @font-face { - font-family: "Neucha"; - src: url("/fonts/neucha.woff2") format("woff2"); + font-family: 'Neucha'; + src: local('Neucha'), url("/fonts/neucha.woff2") format("woff2"); font-weight: 400; font-style: normal; + font-display: swap; } - @font-face { - font-family: "NotoSans"; - src: url("/fonts/noto-sans.woff2") format("woff2"); + font-family: 'Noto Sans'; + src: local('Noto Sans'), url("/fonts/noto-sans.woff2") format("woff2"); font-weight: 400; font-style: normal; + font-display: swap; } - @font-face { - font-family: "OpenSans"; - src: url("/fonts/open-sans.woff2") format("woff2"); + font-family: 'Open Sans'; + src: local('Open Sans'), url("/fonts/open-sans.woff2") format("woff2"); font-weight: 400; font-style: normal; + font-display: swap; } - @font-face { - font-family: "Orbitron"; - src: url("/fonts/orbitron.woff2") format("woff2"); + font-family: 'Orbitron'; + src: local('Orbitron'), url("/fonts/orbitron.woff2") format("woff2"); font-weight: 400; font-style: normal; + font-display: swap; } - @font-face { - font-family: "Oswald"; - src: url("/fonts/oswald.woff2") format("woff2"); + font-family: 'Oswald'; + src: local('Oswald'), url("/fonts/oswald.woff2") format("woff2"); font-weight: 400; font-style: normal; + font-display: swap; } - @font-face { - font-family: "Pacifico"; - src: url("/fonts/pacifico.woff2") format("woff2"); + font-family: 'Pacifico'; + src: local('Pacifico'), url("/fonts/pacifico.woff2") format("woff2"); font-weight: 400; font-style: normal; + font-display: swap; } - @font-face { - font-family: "PermanentMarker"; - src: url("/fonts/permanent-marker.woff2") format("woff2"); + font-family: 'Permanent Marker'; + src: local('Permanent Marker'), url("/fonts/permanent-marker.woff2") format("woff2"); font-weight: 400; font-style: normal; + font-display: swap; } - @font-face { - font-family: "Philosopher"; - src: url("/fonts/philosopher.woff2") format("woff2"); + font-family: 'Philosopher'; + src: local('Philosopher'), url("/fonts/philosopher.woff2") format("woff2"); font-weight: 400; font-style: normal; + font-display: swap; } - @font-face { - font-family: "PlayfairDisplay"; - src: url("/fonts/playfair-display.woff2") format("woff2"); + font-family: 'Playfair Display'; + src: local('Playfair Display'), url("/fonts/playfair-display.woff2") format("woff2"); font-weight: 400; font-style: normal; + font-display: swap; } - @font-face { - font-family: "Poppins"; - src: url("/fonts/poppins.woff2") format("woff2"); + font-family: 'Poppins'; + src: local('Poppins'), url("/fonts/poppins.woff2") format("woff2"); font-weight: 400; font-style: normal; + font-display: swap; } - @font-face { - font-family: "PressStart2P"; - src: url("/fonts/press-start-2p.woff2") format("woff2"); + font-family: 'Press Start 2P'; + src: local('Press Start 2P'), url("/fonts/press-start-2p.woff2") format("woff2"); font-weight: 400; font-style: normal; + font-display: swap; } - @font-face { - font-family: "Questrial"; - src: url("/fonts/questrial.woff2") format("woff2"); + font-family: 'Questrial'; + src: local('Questrial'), url("/fonts/questrial.woff2") format("woff2"); font-weight: 400; font-style: normal; + font-display: swap; } - @font-face { - font-family: "Quicksand"; - src: url("/fonts/quicksand.woff2") format("woff2"); + font-family: 'Quicksand'; + src: local('Quicksand'), url("/fonts/quicksand.woff2") format("woff2"); font-weight: 400; font-style: normal; + font-display: swap; } - @font-face { - font-family: "Rajdhani"; - src: url("/fonts/rajdhani.woff2") format("woff2"); + font-family: 'Rajdhani'; + src: local('Rajdhani'), url("/fonts/rajdhani.woff2") format("woff2"); font-weight: 400; font-style: normal; + font-display: swap; } - @font-face { - font-family: "Raleway"; - src: url("/fonts/raleway.woff2") format("woff2"); + font-family: 'Raleway'; + src: local('Raleway'), url("/fonts/raleway.woff2") format("woff2"); font-weight: 400; font-style: normal; + font-display: swap; } - @font-face { - font-family: "Righteous"; - src: url("/fonts/righteous.woff2") format("woff2"); + font-family: 'Righteous'; + src: local('Righteous'), url("/fonts/righteous.woff2") format("woff2"); font-weight: 400; font-style: normal; + font-display: swap; } - @font-face { - font-family: "Roboto"; - src: url("/fonts/roboto.woff2") format("woff2"); + font-family: 'Roboto'; + src: local('Roboto'), url("/fonts/roboto.woff2") format("woff2"); font-weight: 400; font-style: normal; + font-display: swap; } - @font-face { - font-family: "Sacramento"; - src: url("/fonts/sacramento.woff2") format("woff2"); + font-family: 'Sacramento'; + src: local('Sacramento'), url("/fonts/sacramento.woff2") format("woff2"); font-weight: 400; font-style: normal; + font-display: swap; } - @font-face { - font-family: "Satisfy"; - src: url("/fonts/satisfy.woff2") format("woff2"); + font-family: 'Satisfy'; + src: local('Satisfy'), url("/fonts/satisfy.woff2") format("woff2"); font-weight: 400; font-style: normal; + font-display: swap; } - @font-face { - font-family: "SpaceMono"; - src: url("/fonts/space-mono.woff2") format("woff2"); + font-family: 'Space Mono'; + src: local('Space Mono'), url("/fonts/space-mono.woff2") format("woff2"); font-weight: 400; font-style: normal; + font-display: swap; } - @font-face { - font-family: "Spectral"; - src: url("/fonts/spectral.woff2") format("woff2"); + font-family: 'Spectral'; + src: local('Spectral'), url("/fonts/spectral.woff2") format("woff2"); font-weight: 400; font-style: normal; + font-display: swap; } - @font-face { - font-family: "Staatliches"; - src: url("/fonts/staatliches.woff2") format("woff2"); + font-family: 'Staatliches'; + src: local('Staatliches'), url("/fonts/staatliches.woff2") format("woff2"); font-weight: 400; font-style: normal; + font-display: swap; } - @font-face { - font-family: "StintUltraCondensed"; - src: url("/fonts/stint-ultra-condensed.woff2") format("woff2"); + font-family: 'Stint Ultra Condensed'; + src: local('Stint Ultra Condensed'), url("/fonts/stint-ultra-condensed.woff2") format("woff2"); font-weight: 400; font-style: normal; + font-display: swap; } - @font-face { - font-family: "Syncopate"; - src: url("/fonts/syncopate.woff2") format("woff2"); + font-family: 'Syncopate'; + src: local('Syncopate'), url("/fonts/syncopate.woff2") format("woff2"); font-weight: 400; font-style: normal; + font-display: swap; } - @font-face { - font-family: "Ultra"; - src: url("/fonts/ultra.woff2") format("woff2"); + font-family: 'Ultra'; + src: local('Ultra'), url("/fonts/ultra.woff2") format("woff2"); font-weight: 400; font-style: normal; + font-display: swap; } - @font-face { - font-family: "UnicaOne"; - src: url("/fonts/unica-one.woff2") format("woff2"); + font-family: 'Unica One'; + src: local('Unica One'), url("/fonts/unica-one.woff2") format("woff2"); font-weight: 400; font-style: normal; + font-display: swap; } - @font-face { - font-family: "WorkSans"; - src: url("/fonts/work-sans.woff2") format("woff2"); + font-family: 'Work Sans'; + src: local('Work Sans'), url("/fonts/work-sans.woff2") format("woff2"); font-weight: 400; font-style: normal; + font-display: swap; } - @font-face { - font-family: "Yellowtail"; - src: url("/fonts/yellowtail.woff2") format("woff2"); + font-family: 'Yellowtail'; + src: local('Yellowtail'), url("/fonts/yellowtail.woff2") format("woff2"); font-weight: 400; font-style: normal; + font-display: swap; } @layer utilities { .font-abril-fatface { - font-family: "AbrilFatface", serif; + font-family: 'Abril Fatface', serif; } - .font-alegreya { - font-family: "Alegreya", sans-serif; + font-family: 'Alegreya', sans-serif; } - .font-alfa-slab-one { - font-family: "AlfaSlabOne", sans-serif; + font-family: 'Alfa Slab One', sans-serif; } - .font-almendra { - font-family: "Almendra", serif; + font-family: 'Almendra', serif; } - .font-amatic-sc { - font-family: "AmaticSc", cursive; + font-family: 'Amatic SC', cursive; } - .font-andika { - font-family: "Andika", sans-serif; + font-family: 'Andika', sans-serif; } - .font-architects-daughter { - font-family: "ArchitectsDaughter", cursive; + font-family: 'Architects Daughter', cursive; } - .font-audiowide { - font-family: "Audiowide", sans-serif; + font-family: 'Audiowide', sans-serif; } - .font-averia-libre { - font-family: "AveriaLibre", cursive; + font-family: 'Averia Libre', cursive; } - .font-bebas-neue { - font-family: "BebasNeue", sans-serif; + font-family: 'Bebas Neue', sans-serif; } - .font-black-ops-one { - font-family: "BlackOpsOne", sans-serif; + font-family: 'Black Ops One', sans-serif; } - .font-caveat { - font-family: "Caveat", cursive; + font-family: 'Caveat', cursive; } - .font-cinzel-decorative { - font-family: "CinzelDecorative", serif; + font-family: 'Cinzel Decorative', serif; } - .font-courgette { - font-family: "Courgette", cursive; + font-family: 'Courgette', cursive; } - .font-dancing-script { - font-family: "DancingScript", cursive; + font-family: 'Dancing Script', cursive; } - .font-exo { - font-family: "Exo", sans-serif; + font-family: 'Exo', sans-serif; } - .font-fjalla-one { - font-family: "FjallaOne", sans-serif; + font-family: 'Fjalla One', sans-serif; } - .font-germania-one { - font-family: "GermaniaOne", sans-serif; + font-family: 'Germania One', sans-serif; } - .font-glass-antiqua { - font-family: "GlassAntiqua", cursive; + font-family: 'Glass Antiqua', cursive; } - .font-gloria-hallelujah { - font-family: "GloriaHallelujah", cursive; + font-family: 'Gloria Hallelujah', cursive; } - .font-great-vibes { - font-family: "GreatVibes", cursive; + font-family: 'Great Vibes', cursive; } - .font-holtwood-one-sc { - font-family: "HoltwoodOneSc", sans-serif; + font-family: 'Holtwood One SC', sans-serif; } - .font-indie-flower { - font-family: "IndieFlower", cursive; + font-family: 'Indie Flower', cursive; } - .font-italiana { - font-family: "Italiana", serif; + font-family: 'Italiana', serif; } - .font-jost { - font-family: "Jost", sans-serif; + font-family: 'Jost', sans-serif; } - .font-kaushan-script { - font-family: "KaushanScript", cursive; + font-family: 'Kaushan Script', cursive; } - .font-lato { - font-family: "Lato", sans-serif; + font-family: 'Lato', sans-serif; } - .font-metal-mania { - font-family: "MetalMania", sans-serif; + font-family: 'Metal Mania', sans-serif; } - .font-montserrat { - font-family: "Montserrat", sans-serif; + font-family: 'Montserrat', sans-serif; } - .font-neucha { - font-family: "Neucha", sans-serif; + font-family: 'Neucha', sans-serif; } - .font-noto-sans { - font-family: "NotoSans", sans-serif; + font-family: 'Noto Sans', sans-serif; } - .font-open-sans { - font-family: "OpenSans", sans-serif; + font-family: 'Open Sans', sans-serif; } - .font-orbitron { - font-family: "Orbitron", sans-serif; + font-family: 'Orbitron', sans-serif; } - .font-oswald { - font-family: "Oswald", sans-serif; + font-family: 'Oswald', sans-serif; } - .font-pacifico { - font-family: "Pacifico", cursive; + font-family: 'Pacifico', cursive; } - .font-permanent-marker { - font-family: "PermanentMarker", sans-serif; + font-family: 'Permanent Marker', sans-serif; } - .font-philosopher { - font-family: "Philosopher", serif; + font-family: 'Philosopher', serif; } - .font-playfair-display { - font-family: "PlayfairDisplay", serif; + font-family: 'Playfair Display', serif; } - .font-poppins { - font-family: "Poppins", sans-serif; + font-family: 'Poppins', sans-serif; } - .font-press-start-2p { - font-family: "PressStart2P", monospace; + font-family: 'Press Start 2P', monospace; } - .font-questrial { - font-family: "Questrial", sans-serif; + font-family: 'Questrial', sans-serif; } - .font-quicksand { - font-family: "Quicksand", sans-serif; + font-family: 'Quicksand', sans-serif; } - .font-rajdhani { - font-family: "Rajdhani", sans-serif; + font-family: 'Rajdhani', sans-serif; } - .font-raleway { - font-family: "Raleway", serif; + font-family: 'Raleway', serif; } - .font-righteous { - font-family: "Righteous", sans-serif; + font-family: 'Righteous', sans-serif; } - .font-roboto { - font-family: "Roboto", sans-serif; + font-family: 'Roboto', sans-serif; } - .font-sacramento { - font-family: "Sacramento", cursive; + font-family: 'Sacramento', cursive; } - .font-satisfy { - font-family: "Satisfy", cursive; + font-family: 'Satisfy', cursive; } - .font-space-mono { - font-family: "SpaceMono", sans-serif; + font-family: 'Space Mono', sans-serif; } - .font-spectral { - font-family: "Spectral", sans-serif; + font-family: 'Spectral', sans-serif; } - .font-staatliches { - font-family: "Staatliches", serif; + font-family: 'Staatliches', serif; } - .font-stint-ultra-condensed { - font-family: "StintUltraCondensed", sans-serif; + font-family: 'Stint Ultra Condensed', sans-serif; } - .font-syncopate { - font-family: "Syncopate", sans-serif; + font-family: 'Syncopate', sans-serif; } - .font-ultra { - font-family: "Ultra", serif; + font-family: 'Ultra', serif; } - .font-unica-one { - font-family: "UnicaOne", sans-serif; + font-family: 'Unica One', sans-serif; } - .font-work-sans { - font-family: "WorkSans", sans-serif; + font-family: 'Work Sans', sans-serif; } - .font-yellowtail { - font-family: "Yellowtail", cursive; + font-family: 'Yellowtail', cursive; } } + /* Komponenten */ @layer components { .text-shadow-lg { @@ -645,4 +591,4 @@ body { background: #111; color: #fff; -} +} \ No newline at end of file diff --git a/styles/local-fonts.css b/styles/local-fonts.css index 1d548f9..e69de29 100644 --- a/styles/local-fonts.css +++ b/styles/local-fonts.css @@ -1,522 +0,0 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; - -/* ========== FONT-FACE DEFINITIONS ========== */ -@font-face { - font-family: "abril-fatface"; - src: url("/fonts/abril-fatface.woff2") format("woff2"); - font-weight: 400; - font-style: normal; -} -@font-face { - font-family: "alegreya"; - src: url("/fonts/alegreya.woff2") format("woff2"); - font-weight: 400; - font-style: normal; -} -@font-face { - font-family: "alfa-slab-one"; - src: url("/fonts/alfa-slab-one.woff2") format("woff2"); - font-weight: 400; - font-style: normal; -} -@font-face { - font-family: "almendra"; - src: url("/fonts/almendra.woff2") format("woff2"); - font-weight: 400; - font-style: normal; -} -@font-face { - font-family: "amatic-sc"; - src: url("/fonts/amatic-sc.woff2") format("woff2"); - font-weight: 400; - font-style: normal; -} -@font-face { - font-family: "andika"; - src: url("/fonts/andika.woff2") format("woff2"); - font-weight: 400; - font-style: normal; -} -@font-face { - font-family: "architects-daughter"; - src: url("/fonts/architects-daughter.woff2") format("woff2"); - font-weight: 400; - font-style: normal; -} -@font-face { - font-family: "audiowide"; - src: url("/fonts/audiowide.woff2") format("woff2"); - font-weight: 400; - font-style: normal; -} -@font-face { - font-family: "averia-libre"; - src: url("/fonts/averia-libre.woff2") format("woff2"); - font-weight: 400; - font-style: normal; -} -@font-face { - font-family: "bebas-neue"; - src: url("/fonts/bebas-neue.woff2") format("woff2"); - font-weight: 400; - font-style: normal; -} -@font-face { - font-family: "black-ops-one"; - src: url("/fonts/black-ops-one.woff2") format("woff2"); - font-weight: 400; - font-style: normal; -} -@font-face { - font-family: "caveat"; - src: url("/fonts/caveat.woff2") format("woff2"); - font-weight: 400; - font-style: normal; -} -@font-face { - font-family: "cinzel-decorative"; - src: url("/fonts/cinzel-decorative.woff2") format("woff2"); - font-weight: 400; - font-style: normal; -} -@font-face { - font-family: "courgette"; - src: url("/fonts/courgette.woff2") format("woff2"); - font-weight: 400; - font-style: normal; -} -@font-face { - font-family: "dancing-script"; - src: url("/fonts/dancing-script.woff2") format("woff2"); - font-weight: 400; - font-style: normal; -} -@font-face { - font-family: "exo"; - src: url("/fonts/exo.woff2") format("woff2"); - font-weight: 400; - font-style: normal; -} -@font-face { - font-family: "fjalla-one"; - src: url("/fonts/fjalla-one.woff2") format("woff2"); - font-weight: 400; - font-style: normal; -} -@font-face { - font-family: "germania-one"; - src: url("/fonts/germania-one.woff2") format("woff2"); - font-weight: 400; - font-style: normal; -} -@font-face { - font-family: "glass-antiqua"; - src: url("/fonts/glass-antiqua.woff2") format("woff2"); - font-weight: 400; - font-style: normal; -} -@font-face { - font-family: "gloria-hallelujah"; - src: url("/fonts/gloria-hallelujah.woff2") format("woff2"); - font-weight: 400; - font-style: normal; -} -@font-face { - font-family: "great-vibes"; - src: url("/fonts/great-vibes.woff2") format("woff2"); - font-weight: 400; - font-style: normal; -} -@font-face { - font-family: "holtwood-one-sc"; - src: url("/fonts/holtwood-one-sc.woff2") format("woff2"); - font-weight: 400; - font-style: normal; -} -@font-face { - font-family: "indie-flower"; - src: url("/fonts/indie-flower.woff2") format("woff2"); - font-weight: 400; - font-style: normal; -} -@font-face { - font-family: "italiana"; - src: url("/fonts/italiana.woff2") format("woff2"); - font-weight: 400; - font-style: normal; -} -@font-face { - font-family: "jost"; - src: url("/fonts/jost.woff2") format("woff2"); - font-weight: 400; - font-style: normal; -} -@font-face { - font-family: "kaushan-script"; - src: url("/fonts/kaushan-script.woff2") format("woff2"); - font-weight: 400; - font-style: normal; -} -@font-face { - font-family: "lato"; - src: url("/fonts/lato.woff2") format("woff2"); - font-weight: 400; - font-style: normal; -} -@font-face { - font-family: "metal-mania"; - src: url("/fonts/metal-mania.woff2") format("woff2"); - font-weight: 400; - font-style: normal; -} -@font-face { - font-family: "montserrat"; - src: url("/fonts/montserrat.woff2") format("woff2"); - font-weight: 400; - font-style: normal; -} -@font-face { - font-family: "neucha"; - src: url("/fonts/neucha.woff2") format("woff2"); - font-weight: 400; - font-style: normal; -} -@font-face { - font-family: "noto-sans"; - src: url("/fonts/noto-sans.woff2") format("woff2"); - font-weight: 400; - font-style: normal; -} -@font-face { - font-family: "open-sans"; - src: url("/fonts/open-sans.woff2") format("woff2"); - font-weight: 400; - font-style: normal; -} -@font-face { - font-family: "orbitron"; - src: url("/fonts/orbitron.woff2") format("woff2"); - font-weight: 400; - font-style: normal; -} -@font-face { - font-family: "oswald"; - src: url("/fonts/oswald.woff2") format("woff2"); - font-weight: 400; - font-style: normal; -} -@font-face { - font-family: "pacifico"; - src: url("/fonts/pacifico.woff2") format("woff2"); - font-weight: 400; - font-style: normal; -} -@font-face { - font-family: "permanent-marker"; - src: url("/fonts/permanent-marker.woff2") format("woff2"); - font-weight: 400; - font-style: normal; -} -@font-face { - font-family: "philosopher"; - src: url("/fonts/philosopher.woff2") format("woff2"); - font-weight: 400; - font-style: normal; -} -@font-face { - font-family: "playfair-display"; - src: url("/fonts/playfair-display.woff2") format("woff2"); - font-weight: 400; - font-style: normal; -} -@font-face { - font-family: "poppins"; - src: url("/fonts/poppins.woff2") format("woff2"); - font-weight: 400; - font-style: normal; -} -@font-face { - font-family: "press-start-2p"; - src: url("/fonts/press-start-2p.woff2") format("woff2"); - font-weight: 400; - font-style: normal; -} -@font-face { - font-family: "questrial"; - src: url("/fonts/questrial.woff2") format("woff2"); - font-weight: 400; - font-style: normal; -} -@font-face { - font-family: "quicksand"; - src: url("/fonts/quicksand.woff2") format("woff2"); - font-weight: 400; - font-style: normal; -} -@font-face { - font-family: "rajdhani"; - src: url("/fonts/rajdhani.woff2") format("woff2"); - font-weight: 400; - font-style: normal; -} -@font-face { - font-family: "raleway"; - src: url("/fonts/raleway.woff2") format("woff2"); - font-weight: 400; - font-style: normal; -} -@font-face { - font-family: "righteous"; - src: url("/fonts/righteous.woff2") format("woff2"); - font-weight: 400; - font-style: normal; -} -@font-face { - font-family: "roboto"; - src: url("/fonts/roboto.woff2") format("woff2"); - font-weight: 400; - font-style: normal; -} -@font-face { - font-family: "sacramento"; - src: url("/fonts/sacramento.woff2") format("woff2"); - font-weight: 400; - font-style: normal; -} -@font-face { - font-family: "satisfy"; - src: url("/fonts/satisfy.woff2") format("woff2"); - font-weight: 400; - font-style: normal; -} -@font-face { - font-family: "space-mono"; - src: url("/fonts/space-mono.woff2") format("woff2"); - font-weight: 400; - font-style: normal; -} -@font-face { - font-family: "spectral"; - src: url("/fonts/spectral.woff2") format("woff2"); - font-weight: 400; - font-style: normal; -} -@font-face { - font-family: "staatliches"; - src: url("/fonts/staatliches.woff2") format("woff2"); - font-weight: 400; - font-style: normal; -} -@font-face { - font-family: "stint-ultra-condensed"; - src: url("/fonts/stint-ultra-condensed.woff2") format("woff2"); - font-weight: 400; - font-style: normal; -} -@font-face { - font-family: "syncopate"; - src: url("/fonts/syncopate.woff2") format("woff2"); - font-weight: 400; - font-style: normal; -} -@font-face { - font-family: "ultra"; - src: url("/fonts/ultra.woff2") format("woff2"); - font-weight: 400; - font-style: normal; -} -@font-face { - font-family: "unica-one"; - src: url("/fonts/unica-one.woff2") format("woff2"); - font-weight: 400; - font-style: normal; -} -@font-face { - font-family: "work-sans"; - src: url("/fonts/work-sans.woff2") format("woff2"); - font-weight: 400; - font-style: normal; -} -@font-face { - font-family: "yellowtail"; - src: url("/fonts/yellowtail.woff2") format("woff2"); - font-weight: 400; - font-style: normal; -} - -/* ========== TAILWIND UTILITY CLASSES ========== */ -@layer utilities { - .font-abril-fatface { - font-family: "abril-fatface", sans-serif; - } - .font-alegreya { - font-family: "alegreya", sans-serif; - } - .font-alfa-slab-one { - font-family: "alfa-slab-one", sans-serif; - } - .font-almendra { - font-family: "almendra", sans-serif; - } - .font-amatic-sc { - font-family: "amatic-sc", sans-serif; - } - .font-andika { - font-family: "andika", sans-serif; - } - .font-architects-daughter { - font-family: "architects-daughter", sans-serif; - } - .font-audiowide { - font-family: "audiowide", sans-serif; - } - .font-averia-libre { - font-family: "averia-libre", sans-serif; - } - .font-bebas-neue { - font-family: "bebas-neue", sans-serif; - } - .font-black-ops-one { - font-family: "black-ops-one", sans-serif; - } - .font-caveat { - font-family: "caveat", sans-serif; - } - .font-cinzel-decorative { - font-family: "cinzel-decorative", sans-serif; - } - .font-courgette { - font-family: "courgette", sans-serif; - } - .font-dancing-script { - font-family: "dancing-script", sans-serif; - } - .font-exo { - font-family: "exo", sans-serif; - } - .font-fjalla-one { - font-family: "fjalla-one", sans-serif; - } - .font-germania-one { - font-family: "germania-one", sans-serif; - } - .font-glass-antiqua { - font-family: "glass-antiqua", sans-serif; - } - .font-gloria-hallelujah { - font-family: "gloria-hallelujah", sans-serif; - } - .font-great-vibes { - font-family: "great-vibes", sans-serif; - } - .font-holtwood-one-sc { - font-family: "holtwood-one-sc", sans-serif; - } - .font-indie-flower { - font-family: "indie-flower", sans-serif; - } - .font-italiana { - font-family: "italiana", sans-serif; - } - .font-jost { - font-family: "jost", sans-serif; - } - .font-kaushan-script { - font-family: "kaushan-script", sans-serif; - } - .font-lato { - font-family: "lato", sans-serif; - } - .font-metal-mania { - font-family: "metal-mania", sans-serif; - } - .font-montserrat { - font-family: "montserrat", sans-serif; - } - .font-neucha { - font-family: "neucha", sans-serif; - } - .font-noto-sans { - font-family: "noto-sans", sans-serif; - } - .font-open-sans { - font-family: "open-sans", sans-serif; - } - .font-orbitron { - font-family: "orbitron", sans-serif; - } - .font-oswald { - font-family: "oswald", sans-serif; - } - .font-pacifico { - font-family: "pacifico", sans-serif; - } - .font-permanent-marker { - font-family: "permanent-marker", sans-serif; - } - .font-philosopher { - font-family: "philosopher", sans-serif; - } - .font-playfair-display { - font-family: "playfair-display", sans-serif; - } - .font-poppins { - font-family: "poppins", sans-serif; - } - .font-press-start-2p { - font-family: "press-start-2p", sans-serif; - } - .font-questrial { - font-family: "questrial", sans-serif; - } - .font-quicksand { - font-family: "quicksand", sans-serif; - } - .font-rajdhani { - font-family: "rajdhani", sans-serif; - } - .font-raleway { - font-family: "raleway", sans-serif; - } - .font-righteous { - font-family: "righteous", sans-serif; - } - .font-roboto { - font-family: "roboto", sans-serif; - } - .font-sacramento { - font-family: "sacramento", sans-serif; - } - .font-satisfy { - font-family: "satisfy", sans-serif; - } - .font-space-mono { - font-family: "space-mono", sans-serif; - } - .font-spectral { - font-family: "spectral", sans-serif; - } - .font-staatliches { - font-family: "staatliches", sans-serif; - } - .font-stint-ultra-condensed { - font-family: "stint-ultra-condensed", sans-serif; - } - .font-syncopate { - font-family: "syncopate", sans-serif; - } - .font-ultra { - font-family: "ultra", sans-serif; - } - .font-unica-one { - font-family: "unica-one", sans-serif; - } - .font-work-sans { - font-family: "work-sans", sans-serif; - } - .font-yellowtail { - font-family: "yellowtail", sans-serif; - } -} diff --git a/styles/tailwind.build.css b/styles/tailwind.build.css index b23b991..ea9fc62 100644 --- a/styles/tailwind.build.css +++ b/styles/tailwind.build.css @@ -1,4 +1,8 @@ -*, ::before, ::after { +@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Alegreya&family=Alfa+Slab+One&family=Almendra&family=Amatic+SC&family=Andika&family=Architects+Daughter&family=Audiowide&family=Averia+Libre&family=Bebas+Neue&family=Black+Ops+One&family=Caveat&family=Cinzel+Decorative&family=Courgette&family=Dancing+Script&family=Exo&family=Fjalla+One&family=Germania+One&family=Gloria+Hallelujah&family=Great+Vibes&family=Holtwood+One+SC&family=Indie+Flower&family=Italiana&family=Jost&family=Kaushan+Script&family=Lato&family=Metal+Mania&family=Montserrat&family=Neucha&family=Noto+Sans&family=Open+Sans&family=Orbitron&family=Oswald&family=Pacifico&family=Permanent+Marker&family=Philosopher&family=Playfair+Display&family=Poppins&family=Press+Start+2P&family=Questrial&family=Quicksand&family=Rajdhani&family=Raleway&family=Righteous&family=Roboto&family=Sacramento&family=Satisfy&family=Space+Mono&family=Spectral&family=Staatliches&family=Stint+Ultra+Condensed&family=Syncopate&family=Ultra&family=Unica+One&family=Work+Sans&family=Yellowtail&display=swap'); + +/* globals.css */ + +*, ::before, ::after{ --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; @@ -52,7 +56,7 @@ --tw-contain-style: ; } -::backdrop { +::backdrop{ --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; @@ -106,9 +110,7 @@ --tw-contain-style: ; } -/* -! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com -*/ +/* ! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com */ /* 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) @@ -554,41 +556,45 @@ video { display: none; } -.container { +.container{ width: 100%; } -@media (min-width: 640px) { - .container { +@media (min-width: 640px){ + .container{ max-width: 640px; } } -@media (min-width: 768px) { - .container { +@media (min-width: 768px){ + .container{ max-width: 768px; } } -@media (min-width: 1024px) { - .container { +@media (min-width: 1024px){ + .container{ max-width: 1024px; } } -@media (min-width: 1280px) { - .container { +@media (min-width: 1280px){ + .container{ max-width: 1280px; } } -@media (min-width: 1536px) { - .container { +@media (min-width: 1536px){ + .container{ max-width: 1536px; } } -.sr-only { +.text-shadow-lg { + text-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +} + +.sr-only{ position: absolute; width: 1px; height: 1px; @@ -600,1030 +606,1499 @@ video { border-width: 0; } -.visible { +.pointer-events-auto{ + pointer-events: auto; +} + +.visible{ visibility: visible; } -.absolute { +.collapse{ + visibility: collapse; +} + +.fixed{ + position: fixed; +} + +.absolute{ position: absolute; } -.relative { +.relative{ position: relative; } -.inset-0 { +.inset-0{ inset: 0px; } -.-bottom-1 { +.-bottom-1{ bottom: -0.25rem; } -.-bottom-8 { +.-bottom-8{ bottom: -2rem; } -.left-0\.5 { +.left-0{ + left: 0px; +} + +.left-0\.5{ left: 0.125rem; } -.left-10 { +.left-10{ left: 2.5rem; } -.left-20 { +.left-20{ left: 5rem; } -.right-10 { +.right-10{ right: 2.5rem; } -.right-4 { +.right-4{ right: 1rem; } -.top-0\.5 { +.top-0{ + top: 0px; +} + +.top-0\.5{ top: 0.125rem; } -.top-20 { +.top-20{ top: 5rem; } -.top-40 { +.top-4{ + top: 1rem; +} + +.top-40{ top: 10rem; } -.z-10 { +.z-10{ z-index: 10; } -.mx-auto { +.z-50{ + z-index: 50; +} + +.z-\[100\]{ + z-index: 100; +} + +.mx-auto{ margin-left: auto; margin-right: auto; } -.mb-1 { +.mb-1{ margin-bottom: 0.25rem; } -.mb-2 { +.mb-10{ + margin-bottom: 2.5rem; +} + +.mb-12{ + margin-bottom: 3rem; +} + +.mb-16{ + margin-bottom: 4rem; +} + +.mb-2{ margin-bottom: 0.5rem; } -.mb-3 { +.mb-3{ margin-bottom: 0.75rem; } -.mb-4 { +.mb-4{ margin-bottom: 1rem; } -.mb-6 { +.mb-6{ margin-bottom: 1.5rem; } -.mb-8 { +.mb-8{ margin-bottom: 2rem; } -.ml-2 { +.mb-\[20px\]{ + margin-bottom: 20px; +} + +.ml-2{ margin-left: 0.5rem; } -.mr-1 { +.mr-1{ margin-right: 0.25rem; } -.mr-2 { +.mr-2{ margin-right: 0.5rem; } -.mr-3 { +.mr-3{ margin-right: 0.75rem; } -.mt-0\.5 { +.mt-0{ + margin-top: 0px; +} + +.mt-0\.5{ margin-top: 0.125rem; } -.mt-4 { +.mt-1{ + margin-top: 0.25rem; +} + +.mt-10{ + margin-top: 2.5rem; +} + +.mt-12{ + margin-top: 3rem; +} + +.mt-4{ margin-top: 1rem; } -.mt-6 { +.mt-6{ margin-top: 1.5rem; } -.mt-8 { +.mt-8{ margin-top: 2rem; } -.block { +.mt-\[250px\]{ + margin-top: 250px; +} + +.block{ display: block; } -.inline-block { +.inline-block{ display: inline-block; } -.inline { +.inline{ display: inline; } -.flex { +.flex{ display: flex; } -.inline-flex { +.inline-flex{ display: inline-flex; } -.grid { +.table{ + display: table; +} + +.grid{ display: grid; } -.hidden { +.contents{ + display: contents; +} + +.hidden{ display: none; } -.h-12 { +.h-12{ height: 3rem; } -.h-3 { +.h-3{ height: 0.75rem; } -.h-4 { +.h-4{ height: 1rem; } -.h-5 { +.h-5{ height: 1.25rem; } -.h-6 { +.h-6{ height: 1.5rem; } -.h-72 { +.h-72{ height: 18rem; } -.h-8 { +.h-8{ height: 2rem; } -.h-auto { +.h-auto{ height: auto; } -.min-h-\[70px\] { +.min-h-\[70px\]{ min-height: 70px; } -.min-h-\[80px\] { +.min-h-\[80px\]{ min-height: 80px; } -.min-h-screen { +.min-h-screen{ min-height: 100vh; } -.w-10 { +.w-10{ width: 2.5rem; } -.w-12 { +.w-12{ width: 3rem; } -.w-3 { +.w-3{ width: 0.75rem; } -.w-4 { +.w-4{ width: 1rem; } -.w-5 { +.w-5{ width: 1.25rem; } -.w-6 { +.w-6{ width: 1.5rem; } -.w-72 { +.w-72{ width: 18rem; } -.w-8 { +.w-8{ width: 2rem; } -.w-full { +.w-full{ width: 100%; } -.min-w-0 { +.min-w-0{ min-width: 0px; } -.max-w-6xl { +.max-w-3xl{ + max-width: 48rem; +} + +.max-w-6xl{ max-width: 72rem; } -.max-w-md { +.max-w-md{ max-width: 28rem; } -.flex-1 { +.flex-1{ flex: 1 1 0%; } -.shrink-0 { +.flex-shrink{ + flex-shrink: 1; +} + +.shrink-0{ flex-shrink: 0; } -.translate-x-5 { +.border-collapse{ + border-collapse: collapse; +} + +.translate-x-5{ --tw-translate-x: 1.25rem; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } -.scale-105 { +.scale-105{ --tw-scale-x: 1.05; --tw-scale-y: 1.05; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } -.scale-\[1\.02\] { +.scale-110{ + --tw-scale-x: 1.1; + --tw-scale-y: 1.1; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.scale-\[1\.02\]{ --tw-scale-x: 1.02; --tw-scale-y: 1.02; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } -.transform { +.transform{ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } -@keyframes pulse { - 50% { +@keyframes pulse{ + 50%{ opacity: .5; } } -.animate-pulse { +.animate-pulse{ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } -.cursor-pointer { +.cursor-pointer{ cursor: pointer; } -.touch-manipulation { +.touch-manipulation{ touch-action: manipulation; } -.select-all { +.select-all{ -webkit-user-select: all; -moz-user-select: all; user-select: all; } -.resize { +.resize{ resize: both; } -.grid-cols-1 { +.grid-cols-1{ grid-template-columns: repeat(1, minmax(0, 1fr)); } -.grid-cols-2 { +.grid-cols-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); } -.flex-wrap { +.grid-cols-3{ + grid-template-columns: repeat(3, minmax(0, 1fr)); +} + +.grid-cols-4{ + grid-template-columns: repeat(4, minmax(0, 1fr)); +} + +.grid-cols-6{ + grid-template-columns: repeat(6, minmax(0, 1fr)); +} + +.flex-col{ + flex-direction: column; +} + +.flex-wrap{ flex-wrap: wrap; } -.items-start { +.items-start{ align-items: flex-start; } -.items-center { +.items-center{ align-items: center; } -.justify-center { +.justify-start{ + justify-content: flex-start; +} + +.justify-center{ justify-content: center; } -.justify-between { +.justify-between{ justify-content: space-between; } -.gap-1 { +.gap-1{ gap: 0.25rem; } -.gap-2 { +.gap-2{ gap: 0.5rem; } -.gap-3 { +.gap-3{ gap: 0.75rem; } -.gap-4 { +.gap-4{ gap: 1rem; } -.gap-6 { +.gap-6{ gap: 1.5rem; } -.space-y-2 > :not([hidden]) ~ :not([hidden]) { +.space-y-1 > :not([hidden]) ~ :not([hidden]){ + --tw-space-y-reverse: 0; + margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(0.25rem * var(--tw-space-y-reverse)); +} + +.space-y-2 > :not([hidden]) ~ :not([hidden]){ --tw-space-y-reverse: 0; margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.5rem * var(--tw-space-y-reverse)); } -.space-y-4 > :not([hidden]) ~ :not([hidden]) { +.space-y-20 > :not([hidden]) ~ :not([hidden]){ + --tw-space-y-reverse: 0; + margin-top: calc(5rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(5rem * var(--tw-space-y-reverse)); +} + +.space-y-4 > :not([hidden]) ~ :not([hidden]){ --tw-space-y-reverse: 0; margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1rem * var(--tw-space-y-reverse)); } -.space-y-8 > :not([hidden]) ~ :not([hidden]) { +.space-y-6 > :not([hidden]) ~ :not([hidden]){ + --tw-space-y-reverse: 0; + margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(1.5rem * var(--tw-space-y-reverse)); +} + +.space-y-8 > :not([hidden]) ~ :not([hidden]){ --tw-space-y-reverse: 0; margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(2rem * var(--tw-space-y-reverse)); } -.overflow-hidden { +.self-start{ + align-self: flex-start; +} + +.overflow-hidden{ overflow: hidden; } -.truncate { +.truncate{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } -.break-all { +.break-all{ word-break: break-all; } -.rounded { +.rounded{ border-radius: 0.25rem; } -.rounded-2xl { +.rounded-2xl{ border-radius: 1rem; } -.rounded-full { +.rounded-full{ border-radius: 9999px; } -.rounded-lg { +.rounded-lg{ border-radius: 0.5rem; } -.rounded-md { +.rounded-md{ border-radius: 0.375rem; } -.rounded-xl { +.rounded-xl{ border-radius: 0.75rem; } -.border { +.border{ border-width: 1px; } -.border-0 { +.border-0{ border-width: 0px; } -.border-t { +.border-b{ + border-bottom-width: 1px; +} + +.border-t{ border-top-width: 1px; } -.border-white\/20 { +.border-black\/20{ + border-color: rgb(0 0 0 / 0.2); +} + +.border-gray-200{ + --tw-border-opacity: 1; + border-color: rgb(229 231 235 / var(--tw-border-opacity, 1)); +} + +.border-white{ + --tw-border-opacity: 1; + border-color: rgb(255 255 255 / var(--tw-border-opacity, 1)); +} + +.border-white\/20{ border-color: rgb(255 255 255 / 0.2); } -.border-white\/30 { +.border-white\/30{ border-color: rgb(255 255 255 / 0.3); } -.bg-black\/20 { +.border-black{ + --tw-border-opacity: 1; + border-color: rgb(0 0 0 / var(--tw-border-opacity, 1)); +} + +.bg-black{ + --tw-bg-opacity: 1; + background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1)); +} + +.bg-black\/20{ background-color: rgb(0 0 0 / 0.2); } -.bg-blue-300 { +.bg-blue-300{ --tw-bg-opacity: 1; background-color: rgb(147 197 253 / var(--tw-bg-opacity, 1)); } -.bg-gray-100 { +.bg-gray-100{ --tw-bg-opacity: 1; background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1)); } -.bg-gray-200 { +.bg-gray-200{ --tw-bg-opacity: 1; background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1)); } -.bg-gray-400 { +.bg-gray-400{ --tw-bg-opacity: 1; background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1)); } -.bg-gray-50 { +.bg-gray-50{ --tw-bg-opacity: 1; background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1)); } -.bg-green-500 { +.bg-gray-900{ + --tw-bg-opacity: 1; + background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1)); +} + +.bg-green-500{ --tw-bg-opacity: 1; background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1)); } -.bg-green-500\/20 { +.bg-green-500\/20{ background-color: rgb(34 197 94 / 0.2); } -.bg-pink-300 { +.bg-pink-300{ --tw-bg-opacity: 1; background-color: rgb(249 168 212 / var(--tw-bg-opacity, 1)); } -.bg-pink-500 { +.bg-pink-500{ --tw-bg-opacity: 1; background-color: rgb(236 72 153 / var(--tw-bg-opacity, 1)); } -.bg-purple-300 { +.bg-pink-600{ + --tw-bg-opacity: 1; + background-color: rgb(219 39 119 / var(--tw-bg-opacity, 1)); +} + +.bg-purple-300{ --tw-bg-opacity: 1; background-color: rgb(216 180 254 / var(--tw-bg-opacity, 1)); } -.bg-transparent { +.bg-transparent{ background-color: transparent; } -.bg-white { +.bg-white{ --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); } -.bg-white\/10 { +.bg-white\/10{ background-color: rgb(255 255 255 / 0.1); } -.bg-white\/20 { +.bg-white\/20{ background-color: rgb(255 255 255 / 0.2); } -.bg-white\/90 { +.bg-white\/90{ background-color: rgb(255 255 255 / 0.9); } -.bg-white\/95 { +.bg-white\/95{ background-color: rgb(255 255 255 / 0.95); } -.bg-gradient-to-br { +.bg-gradient-to-br{ background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); } -.bg-gradient-to-r { +.bg-gradient-to-r{ background-image: linear-gradient(to right, var(--tw-gradient-stops)); } -.from-blue-500 { +.from-blue-500{ --tw-gradient-from: #3b82f6 var(--tw-gradient-from-position); --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } -.from-green-500 { +.from-green-500{ --tw-gradient-from: #22c55e var(--tw-gradient-from-position); --tw-gradient-to: rgb(34 197 94 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } -.from-indigo-900 { +.from-indigo-900{ --tw-gradient-from: #312e81 var(--tw-gradient-from-position); --tw-gradient-to: rgb(49 46 129 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } -.from-pink-50 { +.from-pink-50{ --tw-gradient-from: #fdf2f8 var(--tw-gradient-from-position); --tw-gradient-to: rgb(253 242 248 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } -.from-pink-500 { +.from-pink-500{ --tw-gradient-from: #ec4899 var(--tw-gradient-from-position); --tw-gradient-to: rgb(236 72 153 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } -.from-pink-500\/10 { - --tw-gradient-from: rgb(236 72 153 / 0.1) var(--tw-gradient-from-position); - --tw-gradient-to: rgb(236 72 153 / 0) var(--tw-gradient-to-position); - --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); -} - -.from-purple-500 { +.from-purple-500{ --tw-gradient-from: #a855f7 var(--tw-gradient-from-position); --tw-gradient-to: rgb(168 85 247 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } -.from-red-500 { +.from-red-500{ --tw-gradient-from: #ef4444 var(--tw-gradient-from-position); --tw-gradient-to: rgb(239 68 68 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } -.from-yellow-300 { +.from-yellow-300{ --tw-gradient-from: #fde047 var(--tw-gradient-from-position); --tw-gradient-to: rgb(253 224 71 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } -.from-yellow-500 { +.from-yellow-500{ --tw-gradient-from: #eab308 var(--tw-gradient-from-position); --tw-gradient-to: rgb(234 179 8 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } -.via-pink-300 { +.via-pink-300{ --tw-gradient-to: rgb(249 168 212 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #f9a8d4 var(--tw-gradient-via-position), var(--tw-gradient-to); } -.via-purple-500\/10 { +.via-purple-500{ --tw-gradient-to: rgb(168 85 247 / 0) var(--tw-gradient-to-position); - --tw-gradient-stops: var(--tw-gradient-from), rgb(168 85 247 / 0.1) var(--tw-gradient-via-position), var(--tw-gradient-to); + --tw-gradient-stops: var(--tw-gradient-from), #a855f7 var(--tw-gradient-via-position), var(--tw-gradient-to); } -.via-purple-900 { +.via-purple-900{ --tw-gradient-to: rgb(88 28 135 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #581c87 var(--tw-gradient-via-position), var(--tw-gradient-to); } -.to-blue-500\/10 { - --tw-gradient-to: rgb(59 130 246 / 0.1) var(--tw-gradient-to-position); +.to-blue-500{ + --tw-gradient-to: #3b82f6 var(--tw-gradient-to-position); } -.to-cyan-500 { +.to-cyan-500{ --tw-gradient-to: #06b6d4 var(--tw-gradient-to-position); } -.to-emerald-500 { +.to-emerald-500{ --tw-gradient-to: #10b981 var(--tw-gradient-to-position); } -.to-emerald-600 { +.to-emerald-600{ --tw-gradient-to: #059669 var(--tw-gradient-to-position); } -.to-indigo-600 { +.to-indigo-500{ + --tw-gradient-to: #6366f1 var(--tw-gradient-to-position); +} + +.to-indigo-600{ --tw-gradient-to: #4f46e5 var(--tw-gradient-to-position); } -.to-orange-500 { +.to-orange-500{ --tw-gradient-to: #f97316 var(--tw-gradient-to-position); } -.to-orange-600 { +.to-orange-600{ --tw-gradient-to: #ea580c var(--tw-gradient-to-position); } -.to-pink-600 { +.to-pink-600{ --tw-gradient-to: #db2777 var(--tw-gradient-to-position); } -.to-pink-800 { +.to-pink-800{ --tw-gradient-to: #9d174d var(--tw-gradient-to-position); } -.to-purple-300 { +.to-purple-300{ --tw-gradient-to: #d8b4fe var(--tw-gradient-to-position); } -.to-purple-50 { +.to-purple-50{ --tw-gradient-to: #faf5ff var(--tw-gradient-to-position); } -.to-purple-500 { +.to-purple-500{ --tw-gradient-to: #a855f7 var(--tw-gradient-to-position); } -.to-purple-600 { +.to-purple-600{ --tw-gradient-to: #9333ea var(--tw-gradient-to-position); } -.to-violet-600 { +.to-violet-600{ --tw-gradient-to: #7c3aed var(--tw-gradient-to-position); } -.bg-clip-text { +.bg-clip-text{ -webkit-background-clip: text; background-clip: text; } -.fill-current { +.fill-current{ fill: currentColor; } -.p-0 { +.p-0{ padding: 0px; } -.p-1 { +.p-1{ padding: 0.25rem; } -.p-2 { +.p-2{ padding: 0.5rem; } -.p-3 { +.p-3{ padding: 0.75rem; } -.p-4 { +.p-4{ padding: 1rem; } -.p-6 { +.p-6{ padding: 1.5rem; } -.p-8 { +.p-8{ padding: 2rem; } -.px-2 { +.px-2{ padding-left: 0.5rem; padding-right: 0.5rem; } -.px-3 { +.px-3{ padding-left: 0.75rem; padding-right: 0.75rem; } -.px-4 { +.px-4{ padding-left: 1rem; padding-right: 1rem; } -.px-6 { +.px-6{ padding-left: 1.5rem; padding-right: 1.5rem; } -.py-1 { +.py-1{ padding-top: 0.25rem; padding-bottom: 0.25rem; } -.py-12 { +.py-12{ padding-top: 3rem; padding-bottom: 3rem; } -.py-2 { +.py-2{ padding-top: 0.5rem; padding-bottom: 0.5rem; } -.py-3 { +.py-3{ padding-top: 0.75rem; padding-bottom: 0.75rem; } -.py-4 { +.py-4{ padding-top: 1rem; padding-bottom: 1rem; } -.py-6 { +.py-6{ padding-top: 1.5rem; padding-bottom: 1.5rem; } -.pt-6 { +.py-8{ + padding-top: 2rem; + padding-bottom: 2rem; +} + +.pb-4{ + padding-bottom: 1rem; +} + +.pt-6{ padding-top: 1.5rem; } -.text-left { +.text-left{ text-align: left; } -.text-center { +.text-center{ text-align: center; } -.font-montserrat { - font-family: var(--font-montserrat); +.font-abril-fatface{ + font-family: "Abril Fatface", serif; } -.text-2xl { +.font-alegreya{ + font-family: "Alegreya", sans-serif; +} + +.font-alfa-slab-one{ + font-family: "Alfa Slab One", sans-serif; +} + +.font-almendra{ + font-family: "Almendra", serif; +} + +.font-amatic-sc{ + font-family: "Amatic SC", cursive; +} + +.font-andika{ + font-family: "Andika", sans-serif; +} + +.font-architects-daughter{ + font-family: "Architects Daughter", cursive; +} + +.font-audiowide{ + font-family: "Audiowide", sans-serif; +} + +.font-averia-libre{ + font-family: "Averia Libre", cursive; +} + +.font-bebas-neue{ + font-family: "Bebas Neue", sans-serif; +} + +.font-black-ops-one{ + font-family: "Black Ops One", sans-serif; +} + +.font-caveat{ + font-family: "Caveat", cursive; +} + +.font-cinzel-decorative{ + font-family: "Cinzel Decorative", serif; +} + +.font-courgette{ + font-family: "Courgette", cursive; +} + +.font-dancing-script{ + font-family: "Dancing Script", cursive; +} + +.font-exo{ + font-family: "Exo", sans-serif; +} + +.font-fjalla-one{ + font-family: "Fjalla One", sans-serif; +} + +.font-germania-one{ + font-family: "Germania One", sans-serif; +} + +.font-glass-antiqua{ + font-family: "Glass Antiqua", cursive; +} + +.font-gloria-hallelujah{ + font-family: "Gloria Hallelujah", cursive; +} + +.font-great-vibes{ + font-family: "Great Vibes", cursive; +} + +.font-holtwood-one-sc{ + font-family: "Holtwood One SC", sans-serif; +} + +.font-indie-flower{ + font-family: "Indie Flower", cursive; +} + +.font-italiana{ + font-family: "Italiana", serif; +} + +.font-jost{ + font-family: "Jost", sans-serif; +} + +.font-kaushan-script{ + font-family: "Kaushan Script", cursive; +} + +.font-lato{ + font-family: "Lato", sans-serif; +} + +.font-metal-mania{ + font-family: "Metal Mania", sans-serif; +} + +.font-mono{ + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; +} + +.font-montserrat{ + font-family: "Montserrat", sans-serif; +} + +.font-neucha{ + font-family: "Neucha", sans-serif; +} + +.font-noto-sans{ + font-family: "Noto Sans", sans-serif; +} + +.font-open-sans{ + font-family: "Open Sans", sans-serif; +} + +.font-orbitron{ + font-family: "Orbitron", sans-serif; +} + +.font-oswald{ + font-family: "Oswald", sans-serif; +} + +.font-pacifico{ + font-family: "Pacifico", cursive; +} + +.font-permanent-marker{ + font-family: "Permanent Marker", sans-serif; +} + +.font-philosopher{ + font-family: "Philosopher", serif; +} + +.font-playfair-display{ + font-family: "Playfair Display", serif; +} + +.font-poppins{ + font-family: "Poppins", sans-serif; +} + +.font-press-start-2p{ + font-family: "Press Start 2P", monospace; +} + +.font-questrial{ + font-family: "Questrial", sans-serif; +} + +.font-quicksand{ + font-family: "Quicksand", sans-serif; +} + +.font-rajdhani{ + font-family: "Rajdhani", sans-serif; +} + +.font-raleway{ + font-family: "Raleway", serif; +} + +.font-righteous{ + font-family: "Righteous", sans-serif; +} + +.font-roboto{ + font-family: "Roboto", sans-serif; +} + +.font-sacramento{ + font-family: "Sacramento", cursive; +} + +.font-sans{ + font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; +} + +.font-satisfy{ + font-family: "Satisfy", cursive; +} + +.font-serif{ + font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; +} + +.font-space-mono{ + font-family: "Space Mono", sans-serif; +} + +.font-spectral{ + font-family: "Spectral", sans-serif; +} + +.font-staatliches{ + font-family: "Staatliches", serif; +} + +.font-stint-ultra-condensed{ + font-family: "Stint Ultra Condensed", sans-serif; +} + +.font-syncopate{ + font-family: "Syncopate", sans-serif; +} + +.font-ultra{ + font-family: "Ultra", serif; +} + +.font-unica-one{ + font-family: "Unica One", sans-serif; +} + +.font-work-sans{ + font-family: "Work Sans", sans-serif; +} + +.font-yellowtail{ + font-family: "Yellowtail", cursive; +} + +.text-2xl{ font-size: 1.5rem; line-height: 2rem; } -.text-4xl { +.text-3xl{ + font-size: 1.875rem; + line-height: 2.25rem; +} + +.text-4xl{ font-size: 2.25rem; line-height: 2.5rem; } -.text-6xl { +.text-5xl{ + font-size: 3rem; + line-height: 1; +} + +.text-6xl{ font-size: 3.75rem; line-height: 1; } -.text-\[10px\] { +.text-\[10px\]{ font-size: 10px; } -.text-base { +.text-base{ font-size: 1rem; line-height: 1.5rem; } -.text-lg { +.text-lg{ font-size: 1.125rem; line-height: 1.75rem; } -.text-sm { +.text-sm{ font-size: 0.875rem; line-height: 1.25rem; } -.text-xl { +.text-xl{ font-size: 1.25rem; line-height: 1.75rem; } -.text-xs { +.text-xs{ font-size: 0.75rem; line-height: 1rem; } -.font-black { +.font-black{ font-weight: 900; } -.font-bold { +.font-bold{ font-weight: 700; } -.font-medium { +.font-extrabold{ + font-weight: 800; +} + +.font-extralight{ + font-weight: 200; +} + +.font-light{ + font-weight: 300; +} + +.font-medium{ font-weight: 500; } -.font-semibold { +.font-normal{ + font-weight: 400; +} + +.font-semibold{ font-weight: 600; } -.uppercase { +.font-thin{ + font-weight: 100; +} + +.uppercase{ text-transform: uppercase; } -.capitalize { +.capitalize{ text-transform: capitalize; } -.leading-tight { +.leading-relaxed{ + line-height: 1.625; +} + +.leading-tight{ line-height: 1.25; } -.tracking-tight { +.tracking-tight{ letter-spacing: -0.025em; } -.tracking-wide { +.tracking-wide{ letter-spacing: 0.025em; } -.text-black { +.text-black{ --tw-text-opacity: 1; color: rgb(0 0 0 / var(--tw-text-opacity, 1)); } -.text-blue-500 { +.text-blue-400{ + --tw-text-opacity: 1; + color: rgb(96 165 250 / var(--tw-text-opacity, 1)); +} + +.text-blue-500{ --tw-text-opacity: 1; color: rgb(59 130 246 / var(--tw-text-opacity, 1)); } -.text-gray-400 { +.text-gray-400{ --tw-text-opacity: 1; color: rgb(156 163 175 / var(--tw-text-opacity, 1)); } -.text-gray-500 { +.text-gray-500{ --tw-text-opacity: 1; color: rgb(107 114 128 / var(--tw-text-opacity, 1)); } -.text-gray-600 { +.text-gray-600{ --tw-text-opacity: 1; color: rgb(75 85 99 / var(--tw-text-opacity, 1)); } -.text-gray-700 { +.text-gray-700{ --tw-text-opacity: 1; color: rgb(55 65 81 / var(--tw-text-opacity, 1)); } -.text-gray-800 { +.text-gray-800{ --tw-text-opacity: 1; color: rgb(31 41 55 / var(--tw-text-opacity, 1)); } -.text-green-200 { +.text-green-200{ --tw-text-opacity: 1; color: rgb(187 247 208 / var(--tw-text-opacity, 1)); } -.text-green-300 { +.text-green-300{ --tw-text-opacity: 1; color: rgb(134 239 172 / var(--tw-text-opacity, 1)); } -.text-green-500 { +.text-green-500{ --tw-text-opacity: 1; color: rgb(34 197 94 / var(--tw-text-opacity, 1)); } -.text-pink-500 { +.text-pink-500{ --tw-text-opacity: 1; color: rgb(236 72 153 / var(--tw-text-opacity, 1)); } -.text-purple-500 { +.text-purple-500{ --tw-text-opacity: 1; color: rgb(168 85 247 / var(--tw-text-opacity, 1)); } -.text-red-400 { +.text-red-400{ --tw-text-opacity: 1; color: rgb(248 113 113 / var(--tw-text-opacity, 1)); } -.text-red-500 { +.text-red-500{ --tw-text-opacity: 1; color: rgb(239 68 68 / var(--tw-text-opacity, 1)); } -.text-transparent { +.text-transparent{ color: transparent; } -.text-white { +.text-white{ --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } -.text-white\/40 { - color: rgb(255 255 255 / 0.4); -} - -.text-white\/60 { - color: rgb(255 255 255 / 0.6); -} - -.text-white\/70 { +.text-white\/70{ color: rgb(255 255 255 / 0.7); } -.text-white\/80 { +.text-white\/80{ color: rgb(255 255 255 / 0.8); } -.text-white\/90 { +.text-white\/90{ color: rgb(255 255 255 / 0.9); } -.text-yellow-300 { +.text-yellow-300{ --tw-text-opacity: 1; color: rgb(253 224 71 / var(--tw-text-opacity, 1)); } -.text-yellow-500 { +.text-yellow-500{ --tw-text-opacity: 1; color: rgb(234 179 8 / var(--tw-text-opacity, 1)); } -.underline { +.underline{ text-decoration-line: underline; } -.opacity-20 { +.opacity-20{ opacity: 0.2; } -.opacity-30 { +.opacity-30{ opacity: 0.3; } -.opacity-80 { +.opacity-80{ opacity: 0.8; } -.opacity-90 { +.opacity-90{ opacity: 0.9; } -.mix-blend-multiply { +.mix-blend-multiply{ mix-blend-mode: multiply; } -.shadow-lg { +.shadow-lg{ --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } -.shadow-md { +.shadow-md{ --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } -.shadow-xl { +.shadow-sm{ + --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); + --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.shadow-xl{ --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } -.shadow-green-200 { +.shadow-green-200{ --tw-shadow-color: #bbf7d0; --tw-shadow: var(--tw-shadow-colored); } -.shadow-pink-200 { +.shadow-pink-200{ --tw-shadow-color: #fbcfe8; --tw-shadow: var(--tw-shadow-colored); } -.outline { +.outline{ outline-style: solid; } -.ring-2 { +.ring-2{ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } -.ring-pink-400 { +.ring-pink-400{ --tw-ring-opacity: 1; --tw-ring-color: rgb(244 114 182 / var(--tw-ring-opacity, 1)); } -.ring-white\/30 { +.ring-white{ + --tw-ring-opacity: 1; + --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity, 1)); +} + +.ring-white\/30{ --tw-ring-color: rgb(255 255 255 / 0.3); } -.blur-xl { +.blur{ + --tw-blur: blur(8px); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + +.blur-xl{ --tw-blur: blur(24px); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } -.filter { +.filter{ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } -.backdrop-blur-lg { +.backdrop-blur-lg{ --tw-backdrop-blur: blur(16px); -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } -.backdrop-blur-sm { +.backdrop-blur-sm{ --tw-backdrop-blur: blur(4px); -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } -.transition { +.backdrop-filter{ + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); +} + +.transition{ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; @@ -1631,334 +2106,3204 @@ video { transition-duration: 150ms; } -.transition-all { +.transition-all{ transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } -.transition-colors { +.transition-colors{ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } -.transition-transform { +.transition-transform{ transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } -.duration-200 { +.duration-200{ transition-duration: 200ms; } -.duration-300 { +.duration-300{ transition-duration: 300ms; } -.will-change-transform { +.will-change-transform{ will-change: transform; } +.font-abril-fatface { + font-family: 'Abril Fatface', serif; +} + +.font-alegreya { + font-family: 'Alegreya', sans-serif; +} + +.font-alfa-slab-one { + font-family: 'Alfa Slab One', sans-serif; +} + +.font-almendra { + font-family: 'Almendra', serif; +} + +.font-amatic-sc { + font-family: 'Amatic SC', cursive; +} + +.font-andika { + font-family: 'Andika', sans-serif; +} + +.font-architects-daughter { + font-family: 'Architects Daughter', cursive; +} + +.font-audiowide { + font-family: 'Audiowide', sans-serif; +} + +.font-averia-libre { + font-family: 'Averia Libre', cursive; +} + +.font-bebas-neue { + font-family: 'Bebas Neue', sans-serif; +} + +.font-black-ops-one { + font-family: 'Black Ops One', sans-serif; +} + +.font-caveat { + font-family: 'Caveat', cursive; +} + +.font-cinzel-decorative { + font-family: 'Cinzel Decorative', serif; +} + +.font-courgette { + font-family: 'Courgette', cursive; +} + +.font-dancing-script { + font-family: 'Dancing Script', cursive; +} + +.font-exo { + font-family: 'Exo', sans-serif; +} + +.font-fjalla-one { + font-family: 'Fjalla One', sans-serif; +} + +.font-germania-one { + font-family: 'Germania One', sans-serif; +} + +.font-glass-antiqua { + font-family: 'Glass Antiqua', cursive; +} + +.font-gloria-hallelujah { + font-family: 'Gloria Hallelujah', cursive; +} + +.font-great-vibes { + font-family: 'Great Vibes', cursive; +} + +.font-holtwood-one-sc { + font-family: 'Holtwood One SC', sans-serif; +} + +.font-indie-flower { + font-family: 'Indie Flower', cursive; +} + +.font-italiana { + font-family: 'Italiana', serif; +} + +.font-jost { + font-family: 'Jost', sans-serif; +} + +.font-kaushan-script { + font-family: 'Kaushan Script', cursive; +} + +.font-lato { + font-family: 'Lato', sans-serif; +} + +.font-metal-mania { + font-family: 'Metal Mania', sans-serif; +} + .font-montserrat { - font-family: "Montserrat", sans-serif; + font-family: 'Montserrat', sans-serif; } -/* Pseudo / Unicode‑Stile – nur als Platzhalter */ - -.font-chilanka { - font-family: "Chilanka", cursive; +.font-neucha { + font-family: 'Neucha', sans-serif; } -/* globals.css */ +.font-noto-sans { + font-family: 'Noto Sans', sans-serif; +} -/* Test, ob es überhaupt greift: */ +.font-open-sans { + font-family: 'Open Sans', sans-serif; +} + +.font-orbitron { + font-family: 'Orbitron', sans-serif; +} + +.font-oswald { + font-family: 'Oswald', sans-serif; +} + +.font-pacifico { + font-family: 'Pacifico', cursive; +} + +.font-permanent-marker { + font-family: 'Permanent Marker', sans-serif; +} + +.font-philosopher { + font-family: 'Philosopher', serif; +} + +.font-playfair-display { + font-family: 'Playfair Display', serif; +} + +.font-poppins { + font-family: 'Poppins', sans-serif; +} + +.font-press-start-2p { + font-family: 'Press Start 2P', monospace; +} + +.font-questrial { + font-family: 'Questrial', sans-serif; +} + +.font-quicksand { + font-family: 'Quicksand', sans-serif; +} + +.font-rajdhani { + font-family: 'Rajdhani', sans-serif; +} + +.font-raleway { + font-family: 'Raleway', serif; +} + +.font-righteous { + font-family: 'Righteous', sans-serif; +} + +.font-roboto { + font-family: 'Roboto', sans-serif; +} + +.font-sacramento { + font-family: 'Sacramento', cursive; +} + +.font-satisfy { + font-family: 'Satisfy', cursive; +} + +.font-space-mono { + font-family: 'Space Mono', sans-serif; +} + +.font-spectral { + font-family: 'Spectral', sans-serif; +} + +.font-staatliches { + font-family: 'Staatliches', serif; +} + +.font-stint-ultra-condensed { + font-family: 'Stint Ultra Condensed', sans-serif; +} + +.font-syncopate { + font-family: 'Syncopate', sans-serif; +} + +.font-ultra { + font-family: 'Ultra', serif; +} + +.font-unica-one { + font-family: 'Unica One', sans-serif; +} + +.font-work-sans { + font-family: 'Work Sans', sans-serif; +} + +.font-yellowtail { + font-family: 'Yellowtail', cursive; +} + +/* === Hybrid Font-Definitionen (Google primär, lokal als Fallback) === */ + +@font-face { + font-family: 'Abril Fatface'; + + src: local('Abril Fatface'), url("/fonts/abril-fatface.woff2") format("woff2"); + + font-weight: 400; + + font-style: normal; + + font-display: swap; +} + +@font-face { + font-family: 'Alegreya'; + + src: local('Alegreya'), url("/fonts/alegreya.woff2") format("woff2"); + + font-weight: 400; + + font-style: normal; + + font-display: swap; +} + +@font-face { + font-family: 'Alfa Slab One'; + + src: local('Alfa Slab One'), url("/fonts/alfa-slab-one.woff2") format("woff2"); + + font-weight: 400; + + font-style: normal; + + font-display: swap; +} + +@font-face { + font-family: 'Almendra'; + + src: local('Almendra'), url("/fonts/almendra.woff2") format("woff2"); + + font-weight: 400; + + font-style: normal; + + font-display: swap; +} + +@font-face { + font-family: 'Amatic SC'; + + src: local('Amatic SC'), url("/fonts/amatic-sc.woff2") format("woff2"); + + font-weight: 400; + + font-style: normal; + + font-display: swap; +} + +@font-face { + font-family: 'Andika'; + + src: local('Andika'), url("/fonts/andika.woff2") format("woff2"); + + font-weight: 400; + + font-style: normal; + + font-display: swap; +} + +@font-face { + font-family: 'Architects Daughter'; + + src: local('Architects Daughter'), url("/fonts/architects-daughter.woff2") format("woff2"); + + font-weight: 400; + + font-style: normal; + + font-display: swap; +} + +@font-face { + font-family: 'Audiowide'; + + src: local('Audiowide'), url("/fonts/audiowide.woff2") format("woff2"); + + font-weight: 400; + + font-style: normal; + + font-display: swap; +} + +@font-face { + font-family: 'Averia Libre'; + + src: local('Averia Libre'), url("/fonts/averia-libre.woff2") format("woff2"); + + font-weight: 400; + + font-style: normal; + + font-display: swap; +} + +@font-face { + font-family: 'Bebas Neue'; + + src: local('Bebas Neue'), url("/fonts/bebas-neue.woff2") format("woff2"); + + font-weight: 400; + + font-style: normal; + + font-display: swap; +} + +@font-face { + font-family: 'Black Ops One'; + + src: local('Black Ops One'), url("/fonts/black-ops-one.woff2") format("woff2"); + + font-weight: 400; + + font-style: normal; + + font-display: swap; +} + +@font-face { + font-family: 'Caveat'; + + src: local('Caveat'), url("/fonts/caveat.woff2") format("woff2"); + + font-weight: 400; + + font-style: normal; + + font-display: swap; +} + +@font-face { + font-family: 'Cinzel Decorative'; + + src: local('Cinzel Decorative'), url("/fonts/cinzel-decorative.woff2") format("woff2"); + + font-weight: 400; + + font-style: normal; + + font-display: swap; +} + +@font-face { + font-family: 'Courgette'; + + src: local('Courgette'), url("/fonts/courgette.woff2") format("woff2"); + + font-weight: 400; + + font-style: normal; + + font-display: swap; +} + +@font-face { + font-family: 'Dancing Script'; + + src: local('Dancing Script'), url("/fonts/dancing-script.woff2") format("woff2"); + + font-weight: 400; + + font-style: normal; + + font-display: swap; +} + +@font-face { + font-family: 'Exo'; + + src: local('Exo'), url("/fonts/exo.woff2") format("woff2"); + + font-weight: 400; + + font-style: normal; + + font-display: swap; +} + +@font-face { + font-family: 'Fjalla One'; + + src: local('Fjalla One'), url("/fonts/fjalla-one.woff2") format("woff2"); + + font-weight: 400; + + font-style: normal; + + font-display: swap; +} + +@font-face { + font-family: 'Germania One'; + + src: local('Germania One'), url("/fonts/germania-one.woff2") format("woff2"); + + font-weight: 400; + + font-style: normal; + + font-display: swap; +} + +@font-face { + font-family: 'Glass Antiqua'; + + src: url("/fonts/glass-antiqua.woff2") format("woff2"); + + font-weight: 400; + + font-style: normal; + + font-display: swap; +} + +@font-face { + font-family: 'Gloria Hallelujah'; + + src: local('Gloria Hallelujah'), url("/fonts/gloria-hallelujah.woff2") format("woff2"); + + font-weight: 400; + + font-style: normal; + + font-display: swap; +} + +@font-face { + font-family: 'Great Vibes'; + + src: local('Great Vibes'), url("/fonts/great-vibes.woff2") format("woff2"); + + font-weight: 400; + + font-style: normal; + + font-display: swap; +} + +@font-face { + font-family: 'Holtwood One SC'; + + src: local('Holtwood One SC'), url("/fonts/holtwood-one-sc.woff2") format("woff2"); + + font-weight: 400; + + font-style: normal; + + font-display: swap; +} + +@font-face { + font-family: 'Indie Flower'; + + src: local('Indie Flower'), url("/fonts/indie-flower.woff2") format("woff2"); + + font-weight: 400; + + font-style: normal; + + font-display: swap; +} + +@font-face { + font-family: 'Italiana'; + + src: local('Italiana'), url("/fonts/italiana.woff2") format("woff2"); + + font-weight: 400; + + font-style: normal; + + font-display: swap; +} + +@font-face { + font-family: 'Jost'; + + src: local('Jost'), url("/fonts/jost.woff2") format("woff2"); + + font-weight: 400; + + font-style: normal; + + font-display: swap; +} + +@font-face { + font-family: 'Kaushan Script'; + + src: local('Kaushan Script'), url("/fonts/kaushan-script.woff2") format("woff2"); + + font-weight: 400; + + font-style: normal; + + font-display: swap; +} + +@font-face { + font-family: 'Lato'; + + src: local('Lato'), url("/fonts/lato.woff2") format("woff2"); + + font-weight: 400; + + font-style: normal; + + font-display: swap; +} + +@font-face { + font-family: 'Metal Mania'; + + src: local('Metal Mania'), url("/fonts/metal-mania.woff2") format("woff2"); + + font-weight: 400; + + font-style: normal; + + font-display: swap; +} + +@font-face { + font-family: 'Montserrat'; + + src: local('Montserrat'), url("/fonts/montserrat.woff2") format("woff2"); + + font-weight: 400; + + font-style: normal; + + font-display: swap; +} + +@font-face { + font-family: 'Neucha'; + + src: local('Neucha'), url("/fonts/neucha.woff2") format("woff2"); + + font-weight: 400; + + font-style: normal; + + font-display: swap; +} + +@font-face { + font-family: 'Noto Sans'; + + src: local('Noto Sans'), url("/fonts/noto-sans.woff2") format("woff2"); + + font-weight: 400; + + font-style: normal; + + font-display: swap; +} + +@font-face { + font-family: 'Open Sans'; + + src: local('Open Sans'), url("/fonts/open-sans.woff2") format("woff2"); + + font-weight: 400; + + font-style: normal; + + font-display: swap; +} + +@font-face { + font-family: 'Orbitron'; + + src: local('Orbitron'), url("/fonts/orbitron.woff2") format("woff2"); + + font-weight: 400; + + font-style: normal; + + font-display: swap; +} + +@font-face { + font-family: 'Oswald'; + + src: local('Oswald'), url("/fonts/oswald.woff2") format("woff2"); + + font-weight: 400; + + font-style: normal; + + font-display: swap; +} + +@font-face { + font-family: 'Pacifico'; + + src: local('Pacifico'), url("/fonts/pacifico.woff2") format("woff2"); + + font-weight: 400; + + font-style: normal; + + font-display: swap; +} + +@font-face { + font-family: 'Permanent Marker'; + + src: local('Permanent Marker'), url("/fonts/permanent-marker.woff2") format("woff2"); + + font-weight: 400; + + font-style: normal; + + font-display: swap; +} + +@font-face { + font-family: 'Philosopher'; + + src: local('Philosopher'), url("/fonts/philosopher.woff2") format("woff2"); + + font-weight: 400; + + font-style: normal; + + font-display: swap; +} + +@font-face { + font-family: 'Playfair Display'; + + src: local('Playfair Display'), url("/fonts/playfair-display.woff2") format("woff2"); + + font-weight: 400; + + font-style: normal; + + font-display: swap; +} + +@font-face { + font-family: 'Poppins'; + + src: local('Poppins'), url("/fonts/poppins.woff2") format("woff2"); + + font-weight: 400; + + font-style: normal; + + font-display: swap; +} + +@font-face { + font-family: 'Press Start 2P'; + + src: local('Press Start 2P'), url("/fonts/press-start-2p.woff2") format("woff2"); + + font-weight: 400; + + font-style: normal; + + font-display: swap; +} + +@font-face { + font-family: 'Questrial'; + + src: local('Questrial'), url("/fonts/questrial.woff2") format("woff2"); + + font-weight: 400; + + font-style: normal; + + font-display: swap; +} + +@font-face { + font-family: 'Quicksand'; + + src: local('Quicksand'), url("/fonts/quicksand.woff2") format("woff2"); + + font-weight: 400; + + font-style: normal; + + font-display: swap; +} + +@font-face { + font-family: 'Rajdhani'; + + src: local('Rajdhani'), url("/fonts/rajdhani.woff2") format("woff2"); + + font-weight: 400; + + font-style: normal; + + font-display: swap; +} + +@font-face { + font-family: 'Raleway'; + + src: local('Raleway'), url("/fonts/raleway.woff2") format("woff2"); + + font-weight: 400; + + font-style: normal; + + font-display: swap; +} + +@font-face { + font-family: 'Righteous'; + + src: local('Righteous'), url("/fonts/righteous.woff2") format("woff2"); + + font-weight: 400; + + font-style: normal; + + font-display: swap; +} + +@font-face { + font-family: 'Roboto'; + + src: local('Roboto'), url("/fonts/roboto.woff2") format("woff2"); + + font-weight: 400; + + font-style: normal; + + font-display: swap; +} + +@font-face { + font-family: 'Sacramento'; + + src: local('Sacramento'), url("/fonts/sacramento.woff2") format("woff2"); + + font-weight: 400; + + font-style: normal; + + font-display: swap; +} + +@font-face { + font-family: 'Satisfy'; + + src: local('Satisfy'), url("/fonts/satisfy.woff2") format("woff2"); + + font-weight: 400; + + font-style: normal; + + font-display: swap; +} + +@font-face { + font-family: 'Space Mono'; + + src: local('Space Mono'), url("/fonts/space-mono.woff2") format("woff2"); + + font-weight: 400; + + font-style: normal; + + font-display: swap; +} + +@font-face { + font-family: 'Spectral'; + + src: local('Spectral'), url("/fonts/spectral.woff2") format("woff2"); + + font-weight: 400; + + font-style: normal; + + font-display: swap; +} + +@font-face { + font-family: 'Staatliches'; + + src: local('Staatliches'), url("/fonts/staatliches.woff2") format("woff2"); + + font-weight: 400; + + font-style: normal; + + font-display: swap; +} + +@font-face { + font-family: 'Stint Ultra Condensed'; + + src: local('Stint Ultra Condensed'), url("/fonts/stint-ultra-condensed.woff2") format("woff2"); + + font-weight: 400; + + font-style: normal; + + font-display: swap; +} + +@font-face { + font-family: 'Syncopate'; + + src: local('Syncopate'), url("/fonts/syncopate.woff2") format("woff2"); + + font-weight: 400; + + font-style: normal; + + font-display: swap; +} + +@font-face { + font-family: 'Ultra'; + + src: local('Ultra'), url("/fonts/ultra.woff2") format("woff2"); + + font-weight: 400; + + font-style: normal; + + font-display: swap; +} + +@font-face { + font-family: 'Unica One'; + + src: local('Unica One'), url("/fonts/unica-one.woff2") format("woff2"); + + font-weight: 400; + + font-style: normal; + + font-display: swap; +} + +@font-face { + font-family: 'Work Sans'; + + src: local('Work Sans'), url("/fonts/work-sans.woff2") format("woff2"); + + font-weight: 400; + + font-style: normal; + + font-display: swap; +} + +@font-face { + font-family: 'Yellowtail'; + + src: local('Yellowtail'), url("/fonts/yellowtail.woff2") format("woff2"); + + font-weight: 400; + + font-style: normal; + + font-display: swap; +} + +/* Komponenten */ + +/* Basis-Styling */ body { background: #111; color: #fff; } -.placeholder\:text-gray-400::-moz-placeholder { +.placeholder\:text-gray-400::-moz-placeholder{ --tw-text-opacity: 1; color: rgb(156 163 175 / var(--tw-text-opacity, 1)); } -.placeholder\:text-gray-400::placeholder { +.placeholder\:text-gray-400::placeholder{ --tw-text-opacity: 1; color: rgb(156 163 175 / var(--tw-text-opacity, 1)); } -.placeholder\:text-white\/60::-moz-placeholder { +.placeholder\:text-white\/60::-moz-placeholder{ color: rgb(255 255 255 / 0.6); } -.placeholder\:text-white\/60::placeholder { +.placeholder\:text-white\/60::placeholder{ color: rgb(255 255 255 / 0.6); } -.hover\:scale-105:hover { +.hover\:scale-105:hover{ --tw-scale-x: 1.05; --tw-scale-y: 1.05; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } -.hover\:bg-blue-50:hover { - --tw-bg-opacity: 1; - background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1)); +.hover\:border-black\/40:hover{ + border-color: rgb(0 0 0 / 0.4); } -.hover\:bg-gray-100:hover { +.hover\:bg-black\/10:hover{ + background-color: rgb(0 0 0 / 0.1); +} + +.hover\:bg-gray-100:hover{ --tw-bg-opacity: 1; background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1)); } -.hover\:bg-green-600:hover { +.hover\:bg-gray-300:hover{ + --tw-bg-opacity: 1; + background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1)); +} + +.hover\:bg-green-600:hover{ --tw-bg-opacity: 1; background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1)); } -.hover\:bg-pink-50:hover { +.hover\:bg-pink-700:hover{ --tw-bg-opacity: 1; - background-color: rgb(253 242 248 / var(--tw-bg-opacity, 1)); + background-color: rgb(190 24 93 / var(--tw-bg-opacity, 1)); } -.hover\:bg-white\/20:hover { +.hover\:bg-white\/20:hover{ background-color: rgb(255 255 255 / 0.2); } -.hover\:bg-white\/30:hover { +.hover\:bg-white\/30:hover{ background-color: rgb(255 255 255 / 0.3); } -.hover\:from-blue-600:hover { - --tw-gradient-from: #2563eb var(--tw-gradient-from-position); - --tw-gradient-to: rgb(37 99 235 / 0) var(--tw-gradient-to-position); - --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); -} - -.hover\:from-green-600:hover { - --tw-gradient-from: #16a34a var(--tw-gradient-from-position); - --tw-gradient-to: rgb(22 163 74 / 0) var(--tw-gradient-to-position); - --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); -} - -.hover\:from-pink-600:hover { +.hover\:from-pink-600:hover{ --tw-gradient-from: #db2777 var(--tw-gradient-from-position); --tw-gradient-to: rgb(219 39 119 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } -.hover\:from-yellow-600:hover { - --tw-gradient-from: #ca8a04 var(--tw-gradient-from-position); - --tw-gradient-to: rgb(202 138 4 / 0) var(--tw-gradient-to-position); - --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); -} - -.hover\:to-cyan-600:hover { - --tw-gradient-to: #0891b2 var(--tw-gradient-to-position); -} - -.hover\:to-emerald-600:hover { - --tw-gradient-to: #059669 var(--tw-gradient-to-position); -} - -.hover\:to-orange-600:hover { - --tw-gradient-to: #ea580c var(--tw-gradient-to-position); -} - -.hover\:to-purple-600:hover { +.hover\:to-purple-600:hover{ --tw-gradient-to: #9333ea var(--tw-gradient-to-position); } -.hover\:text-blue-500:hover { +.hover\:text-blue-500:hover{ --tw-text-opacity: 1; color: rgb(59 130 246 / var(--tw-text-opacity, 1)); } -.hover\:text-gray-600:hover { - --tw-text-opacity: 1; - color: rgb(75 85 99 / var(--tw-text-opacity, 1)); +.hover\:underline:hover{ + text-decoration-line: underline; } -.hover\:opacity-90:hover { +.hover\:opacity-90:hover{ opacity: 0.9; } -.hover\:shadow-2xl:hover { +.hover\:shadow-2xl:hover{ --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } -.hover\:shadow-lg:hover { +.hover\:shadow-lg:hover{ --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } -.hover\:shadow-xl:hover { +.hover\:shadow-xl:hover{ --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } -.focus\:bg-white\/30:focus { +.focus\:bg-white\/30:focus{ background-color: rgb(255 255 255 / 0.3); } -.focus\:outline-none:focus { +.focus\:outline-none:focus{ outline: 2px solid transparent; outline-offset: 2px; } -.focus\:ring:focus { +.focus\:ring:focus{ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } -.focus-visible\:ring-0:focus-visible { +.focus\:ring-0:focus{ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } -.focus-visible\:ring-offset-0:focus-visible { +.focus-visible\:ring-0:focus-visible{ + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); +} + +.focus-visible\:ring-offset-0:focus-visible{ --tw-ring-offset-width: 0px; } -.active\:scale-95:active { +.active\:scale-95:active{ --tw-scale-x: .95; --tw-scale-y: .95; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } -.group:hover .group-hover\:scale-110 { - --tw-scale-x: 1.1; - --tw-scale-y: 1.1; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.data-\[state\=checked\]\:bg-yellow-400[data-state="checked"] { - --tw-bg-opacity: 1; - background-color: rgb(250 204 21 / var(--tw-bg-opacity, 1)); -} - -@media (min-width: 640px) { - .sm\:mb-12 { +@media (min-width: 640px){ + .sm\:mb-12{ margin-bottom: 3rem; } - .sm\:mb-8 { + .sm\:mb-8{ margin-bottom: 2rem; } - .sm\:mt-12 { - margin-top: 3rem; - } - - .sm\:min-h-\[80px\] { + .sm\:min-h-\[80px\]{ min-height: 80px; } - .sm\:grid-cols-2 { + .sm\:grid-cols-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); } - .sm\:grid-cols-3 { + .sm\:grid-cols-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); } - .sm\:grid-cols-4 { + .sm\:grid-cols-4{ grid-template-columns: repeat(4, minmax(0, 1fr)); } - .sm\:gap-4 { + .sm\:gap-4{ gap: 1rem; } - .sm\:p-4 { + .sm\:p-4{ padding: 1rem; } - .sm\:p-6 { + .sm\:p-6{ padding: 1.5rem; } - .sm\:p-8 { + .sm\:p-8{ padding: 2rem; } - .sm\:px-4 { - padding-left: 1rem; - padding-right: 1rem; + .sm\:font-abril-fatface{ + font-family: "Abril Fatface", serif; } - .sm\:py-8 { - padding-top: 2rem; - padding-bottom: 2rem; + .sm\:font-alegreya{ + font-family: "Alegreya", sans-serif; } - .sm\:text-2xl { - font-size: 1.5rem; - line-height: 2rem; + .sm\:font-alfa-slab-one{ + font-family: "Alfa Slab One", sans-serif; } - .sm\:text-3xl { + .sm\:font-almendra{ + font-family: "Almendra", serif; + } + + .sm\:font-amatic-sc{ + font-family: "Amatic SC", cursive; + } + + .sm\:font-andika{ + font-family: "Andika", sans-serif; + } + + .sm\:font-architects-daughter{ + font-family: "Architects Daughter", cursive; + } + + .sm\:font-audiowide{ + font-family: "Audiowide", sans-serif; + } + + .sm\:font-averia-libre{ + font-family: "Averia Libre", cursive; + } + + .sm\:font-bebas-neue{ + font-family: "Bebas Neue", sans-serif; + } + + .sm\:font-black-ops-one{ + font-family: "Black Ops One", sans-serif; + } + + .sm\:font-caveat{ + font-family: "Caveat", cursive; + } + + .sm\:font-cinzel-decorative{ + font-family: "Cinzel Decorative", serif; + } + + .sm\:font-courgette{ + font-family: "Courgette", cursive; + } + + .sm\:font-dancing-script{ + font-family: "Dancing Script", cursive; + } + + .sm\:font-exo{ + font-family: "Exo", sans-serif; + } + + .sm\:font-fjalla-one{ + font-family: "Fjalla One", sans-serif; + } + + .sm\:font-germania-one{ + font-family: "Germania One", sans-serif; + } + + .sm\:font-glass-antiqua{ + font-family: "Glass Antiqua", cursive; + } + + .sm\:font-gloria-hallelujah{ + font-family: "Gloria Hallelujah", cursive; + } + + .sm\:font-great-vibes{ + font-family: "Great Vibes", cursive; + } + + .sm\:font-holtwood-one-sc{ + font-family: "Holtwood One SC", sans-serif; + } + + .sm\:font-indie-flower{ + font-family: "Indie Flower", cursive; + } + + .sm\:font-italiana{ + font-family: "Italiana", serif; + } + + .sm\:font-jost{ + font-family: "Jost", sans-serif; + } + + .sm\:font-kaushan-script{ + font-family: "Kaushan Script", cursive; + } + + .sm\:font-lato{ + font-family: "Lato", sans-serif; + } + + .sm\:font-metal-mania{ + font-family: "Metal Mania", sans-serif; + } + + .sm\:font-mono{ + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + } + + .sm\:font-montserrat{ + font-family: "Montserrat", sans-serif; + } + + .sm\:font-neucha{ + font-family: "Neucha", sans-serif; + } + + .sm\:font-noto-sans{ + font-family: "Noto Sans", sans-serif; + } + + .sm\:font-open-sans{ + font-family: "Open Sans", sans-serif; + } + + .sm\:font-orbitron{ + font-family: "Orbitron", sans-serif; + } + + .sm\:font-oswald{ + font-family: "Oswald", sans-serif; + } + + .sm\:font-pacifico{ + font-family: "Pacifico", cursive; + } + + .sm\:font-permanent-marker{ + font-family: "Permanent Marker", sans-serif; + } + + .sm\:font-philosopher{ + font-family: "Philosopher", serif; + } + + .sm\:font-playfair-display{ + font-family: "Playfair Display", serif; + } + + .sm\:font-poppins{ + font-family: "Poppins", sans-serif; + } + + .sm\:font-press-start-2p{ + font-family: "Press Start 2P", monospace; + } + + .sm\:font-questrial{ + font-family: "Questrial", sans-serif; + } + + .sm\:font-quicksand{ + font-family: "Quicksand", sans-serif; + } + + .sm\:font-rajdhani{ + font-family: "Rajdhani", sans-serif; + } + + .sm\:font-raleway{ + font-family: "Raleway", serif; + } + + .sm\:font-righteous{ + font-family: "Righteous", sans-serif; + } + + .sm\:font-roboto{ + font-family: "Roboto", sans-serif; + } + + .sm\:font-sacramento{ + font-family: "Sacramento", cursive; + } + + .sm\:font-sans{ + font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + } + + .sm\:font-satisfy{ + font-family: "Satisfy", cursive; + } + + .sm\:font-serif{ + font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; + } + + .sm\:font-space-mono{ + font-family: "Space Mono", sans-serif; + } + + .sm\:font-spectral{ + font-family: "Spectral", sans-serif; + } + + .sm\:font-staatliches{ + font-family: "Staatliches", serif; + } + + .sm\:font-stint-ultra-condensed{ + font-family: "Stint Ultra Condensed", sans-serif; + } + + .sm\:font-syncopate{ + font-family: "Syncopate", sans-serif; + } + + .sm\:font-ultra{ + font-family: "Ultra", serif; + } + + .sm\:font-unica-one{ + font-family: "Unica One", sans-serif; + } + + .sm\:font-work-sans{ + font-family: "Work Sans", sans-serif; + } + + .sm\:font-yellowtail{ + font-family: "Yellowtail", cursive; + } + + .sm\:text-3xl{ font-size: 1.875rem; line-height: 2.25rem; } - .sm\:text-5xl { + .sm\:text-5xl{ font-size: 3rem; line-height: 1; } - .sm\:text-base { + .sm\:text-base{ font-size: 1rem; line-height: 1.5rem; } - .sm\:text-lg { + .sm\:text-lg{ font-size: 1.125rem; line-height: 1.75rem; } - .sm\:text-sm { - font-size: 0.875rem; - line-height: 1.25rem; + .sm\:font-black{ + font-weight: 900; + } + + .sm\:font-bold{ + font-weight: 700; + } + + .sm\:font-extrabold{ + font-weight: 800; + } + + .sm\:font-extralight{ + font-weight: 200; + } + + .sm\:font-light{ + font-weight: 300; + } + + .sm\:font-medium{ + font-weight: 500; + } + + .sm\:font-normal{ + font-weight: 400; + } + + .sm\:font-semibold{ + font-weight: 600; + } + + .sm\:font-thin{ + font-weight: 100; + } + + .sm\:font-abril-fatface { + font-family: 'Abril Fatface', serif; + } + + .sm\:font-alegreya { + font-family: 'Alegreya', sans-serif; + } + + .sm\:font-alfa-slab-one { + font-family: 'Alfa Slab One', sans-serif; + } + + .sm\:font-almendra { + font-family: 'Almendra', serif; + } + + .sm\:font-amatic-sc { + font-family: 'Amatic SC', cursive; + } + + .sm\:font-andika { + font-family: 'Andika', sans-serif; + } + + .sm\:font-architects-daughter { + font-family: 'Architects Daughter', cursive; + } + + .sm\:font-audiowide { + font-family: 'Audiowide', sans-serif; + } + + .sm\:font-averia-libre { + font-family: 'Averia Libre', cursive; + } + + .sm\:font-bebas-neue { + font-family: 'Bebas Neue', sans-serif; + } + + .sm\:font-black-ops-one { + font-family: 'Black Ops One', sans-serif; + } + + .sm\:font-caveat { + font-family: 'Caveat', cursive; + } + + .sm\:font-cinzel-decorative { + font-family: 'Cinzel Decorative', serif; + } + + .sm\:font-courgette { + font-family: 'Courgette', cursive; + } + + .sm\:font-dancing-script { + font-family: 'Dancing Script', cursive; + } + + .sm\:font-exo { + font-family: 'Exo', sans-serif; + } + + .sm\:font-fjalla-one { + font-family: 'Fjalla One', sans-serif; + } + + .sm\:font-germania-one { + font-family: 'Germania One', sans-serif; + } + + .sm\:font-glass-antiqua { + font-family: 'Glass Antiqua', cursive; + } + + .sm\:font-gloria-hallelujah { + font-family: 'Gloria Hallelujah', cursive; + } + + .sm\:font-great-vibes { + font-family: 'Great Vibes', cursive; + } + + .sm\:font-holtwood-one-sc { + font-family: 'Holtwood One SC', sans-serif; + } + + .sm\:font-indie-flower { + font-family: 'Indie Flower', cursive; + } + + .sm\:font-italiana { + font-family: 'Italiana', serif; + } + + .sm\:font-jost { + font-family: 'Jost', sans-serif; + } + + .sm\:font-kaushan-script { + font-family: 'Kaushan Script', cursive; + } + + .sm\:font-lato { + font-family: 'Lato', sans-serif; + } + + .sm\:font-metal-mania { + font-family: 'Metal Mania', sans-serif; + } + + .sm\:font-montserrat { + font-family: 'Montserrat', sans-serif; + } + + .sm\:font-neucha { + font-family: 'Neucha', sans-serif; + } + + .sm\:font-noto-sans { + font-family: 'Noto Sans', sans-serif; + } + + .sm\:font-open-sans { + font-family: 'Open Sans', sans-serif; + } + + .sm\:font-orbitron { + font-family: 'Orbitron', sans-serif; + } + + .sm\:font-oswald { + font-family: 'Oswald', sans-serif; + } + + .sm\:font-pacifico { + font-family: 'Pacifico', cursive; + } + + .sm\:font-permanent-marker { + font-family: 'Permanent Marker', sans-serif; + } + + .sm\:font-philosopher { + font-family: 'Philosopher', serif; + } + + .sm\:font-playfair-display { + font-family: 'Playfair Display', serif; + } + + .sm\:font-poppins { + font-family: 'Poppins', sans-serif; + } + + .sm\:font-press-start-2p { + font-family: 'Press Start 2P', monospace; + } + + .sm\:font-questrial { + font-family: 'Questrial', sans-serif; + } + + .sm\:font-quicksand { + font-family: 'Quicksand', sans-serif; + } + + .sm\:font-rajdhani { + font-family: 'Rajdhani', sans-serif; + } + + .sm\:font-raleway { + font-family: 'Raleway', serif; + } + + .sm\:font-righteous { + font-family: 'Righteous', sans-serif; + } + + .sm\:font-roboto { + font-family: 'Roboto', sans-serif; + } + + .sm\:font-sacramento { + font-family: 'Sacramento', cursive; + } + + .sm\:font-satisfy { + font-family: 'Satisfy', cursive; + } + + .sm\:font-space-mono { + font-family: 'Space Mono', sans-serif; + } + + .sm\:font-spectral { + font-family: 'Spectral', sans-serif; + } + + .sm\:font-staatliches { + font-family: 'Staatliches', serif; + } + + .sm\:font-stint-ultra-condensed { + font-family: 'Stint Ultra Condensed', sans-serif; + } + + .sm\:font-syncopate { + font-family: 'Syncopate', sans-serif; + } + + .sm\:font-ultra { + font-family: 'Ultra', serif; + } + + .sm\:font-unica-one { + font-family: 'Unica One', sans-serif; + } + + .sm\:font-work-sans { + font-family: 'Work Sans', sans-serif; + } + + .sm\:font-yellowtail { + font-family: 'Yellowtail', cursive; } } -@media (min-width: 768px) { - .md\:text-3xl { +@media (min-width: 768px){ + .md\:font-abril-fatface{ + font-family: "Abril Fatface", serif; + } + + .md\:font-alegreya{ + font-family: "Alegreya", sans-serif; + } + + .md\:font-alfa-slab-one{ + font-family: "Alfa Slab One", sans-serif; + } + + .md\:font-almendra{ + font-family: "Almendra", serif; + } + + .md\:font-amatic-sc{ + font-family: "Amatic SC", cursive; + } + + .md\:font-andika{ + font-family: "Andika", sans-serif; + } + + .md\:font-architects-daughter{ + font-family: "Architects Daughter", cursive; + } + + .md\:font-audiowide{ + font-family: "Audiowide", sans-serif; + } + + .md\:font-averia-libre{ + font-family: "Averia Libre", cursive; + } + + .md\:font-bebas-neue{ + font-family: "Bebas Neue", sans-serif; + } + + .md\:font-black-ops-one{ + font-family: "Black Ops One", sans-serif; + } + + .md\:font-caveat{ + font-family: "Caveat", cursive; + } + + .md\:font-cinzel-decorative{ + font-family: "Cinzel Decorative", serif; + } + + .md\:font-courgette{ + font-family: "Courgette", cursive; + } + + .md\:font-dancing-script{ + font-family: "Dancing Script", cursive; + } + + .md\:font-exo{ + font-family: "Exo", sans-serif; + } + + .md\:font-fjalla-one{ + font-family: "Fjalla One", sans-serif; + } + + .md\:font-germania-one{ + font-family: "Germania One", sans-serif; + } + + .md\:font-glass-antiqua{ + font-family: "Glass Antiqua", cursive; + } + + .md\:font-gloria-hallelujah{ + font-family: "Gloria Hallelujah", cursive; + } + + .md\:font-great-vibes{ + font-family: "Great Vibes", cursive; + } + + .md\:font-holtwood-one-sc{ + font-family: "Holtwood One SC", sans-serif; + } + + .md\:font-indie-flower{ + font-family: "Indie Flower", cursive; + } + + .md\:font-italiana{ + font-family: "Italiana", serif; + } + + .md\:font-jost{ + font-family: "Jost", sans-serif; + } + + .md\:font-kaushan-script{ + font-family: "Kaushan Script", cursive; + } + + .md\:font-lato{ + font-family: "Lato", sans-serif; + } + + .md\:font-metal-mania{ + font-family: "Metal Mania", sans-serif; + } + + .md\:font-mono{ + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + } + + .md\:font-montserrat{ + font-family: "Montserrat", sans-serif; + } + + .md\:font-neucha{ + font-family: "Neucha", sans-serif; + } + + .md\:font-noto-sans{ + font-family: "Noto Sans", sans-serif; + } + + .md\:font-open-sans{ + font-family: "Open Sans", sans-serif; + } + + .md\:font-orbitron{ + font-family: "Orbitron", sans-serif; + } + + .md\:font-oswald{ + font-family: "Oswald", sans-serif; + } + + .md\:font-pacifico{ + font-family: "Pacifico", cursive; + } + + .md\:font-permanent-marker{ + font-family: "Permanent Marker", sans-serif; + } + + .md\:font-philosopher{ + font-family: "Philosopher", serif; + } + + .md\:font-playfair-display{ + font-family: "Playfair Display", serif; + } + + .md\:font-poppins{ + font-family: "Poppins", sans-serif; + } + + .md\:font-press-start-2p{ + font-family: "Press Start 2P", monospace; + } + + .md\:font-questrial{ + font-family: "Questrial", sans-serif; + } + + .md\:font-quicksand{ + font-family: "Quicksand", sans-serif; + } + + .md\:font-rajdhani{ + font-family: "Rajdhani", sans-serif; + } + + .md\:font-raleway{ + font-family: "Raleway", serif; + } + + .md\:font-righteous{ + font-family: "Righteous", sans-serif; + } + + .md\:font-roboto{ + font-family: "Roboto", sans-serif; + } + + .md\:font-sacramento{ + font-family: "Sacramento", cursive; + } + + .md\:font-sans{ + font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + } + + .md\:font-satisfy{ + font-family: "Satisfy", cursive; + } + + .md\:font-serif{ + font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; + } + + .md\:font-space-mono{ + font-family: "Space Mono", sans-serif; + } + + .md\:font-spectral{ + font-family: "Spectral", sans-serif; + } + + .md\:font-staatliches{ + font-family: "Staatliches", serif; + } + + .md\:font-stint-ultra-condensed{ + font-family: "Stint Ultra Condensed", sans-serif; + } + + .md\:font-syncopate{ + font-family: "Syncopate", sans-serif; + } + + .md\:font-ultra{ + font-family: "Ultra", serif; + } + + .md\:font-unica-one{ + font-family: "Unica One", sans-serif; + } + + .md\:font-work-sans{ + font-family: "Work Sans", sans-serif; + } + + .md\:font-yellowtail{ + font-family: "Yellowtail", cursive; + } + + .md\:text-3xl{ font-size: 1.875rem; line-height: 2.25rem; } - .md\:text-5xl { + .md\:text-5xl{ font-size: 3rem; line-height: 1; } + + .md\:font-black{ + font-weight: 900; + } + + .md\:font-bold{ + font-weight: 700; + } + + .md\:font-extrabold{ + font-weight: 800; + } + + .md\:font-extralight{ + font-weight: 200; + } + + .md\:font-light{ + font-weight: 300; + } + + .md\:font-medium{ + font-weight: 500; + } + + .md\:font-normal{ + font-weight: 400; + } + + .md\:font-semibold{ + font-weight: 600; + } + + .md\:font-thin{ + font-weight: 100; + } + + .md\:font-abril-fatface { + font-family: 'Abril Fatface', serif; + } + + .md\:font-alegreya { + font-family: 'Alegreya', sans-serif; + } + + .md\:font-alfa-slab-one { + font-family: 'Alfa Slab One', sans-serif; + } + + .md\:font-almendra { + font-family: 'Almendra', serif; + } + + .md\:font-amatic-sc { + font-family: 'Amatic SC', cursive; + } + + .md\:font-andika { + font-family: 'Andika', sans-serif; + } + + .md\:font-architects-daughter { + font-family: 'Architects Daughter', cursive; + } + + .md\:font-audiowide { + font-family: 'Audiowide', sans-serif; + } + + .md\:font-averia-libre { + font-family: 'Averia Libre', cursive; + } + + .md\:font-bebas-neue { + font-family: 'Bebas Neue', sans-serif; + } + + .md\:font-black-ops-one { + font-family: 'Black Ops One', sans-serif; + } + + .md\:font-caveat { + font-family: 'Caveat', cursive; + } + + .md\:font-cinzel-decorative { + font-family: 'Cinzel Decorative', serif; + } + + .md\:font-courgette { + font-family: 'Courgette', cursive; + } + + .md\:font-dancing-script { + font-family: 'Dancing Script', cursive; + } + + .md\:font-exo { + font-family: 'Exo', sans-serif; + } + + .md\:font-fjalla-one { + font-family: 'Fjalla One', sans-serif; + } + + .md\:font-germania-one { + font-family: 'Germania One', sans-serif; + } + + .md\:font-glass-antiqua { + font-family: 'Glass Antiqua', cursive; + } + + .md\:font-gloria-hallelujah { + font-family: 'Gloria Hallelujah', cursive; + } + + .md\:font-great-vibes { + font-family: 'Great Vibes', cursive; + } + + .md\:font-holtwood-one-sc { + font-family: 'Holtwood One SC', sans-serif; + } + + .md\:font-indie-flower { + font-family: 'Indie Flower', cursive; + } + + .md\:font-italiana { + font-family: 'Italiana', serif; + } + + .md\:font-jost { + font-family: 'Jost', sans-serif; + } + + .md\:font-kaushan-script { + font-family: 'Kaushan Script', cursive; + } + + .md\:font-lato { + font-family: 'Lato', sans-serif; + } + + .md\:font-metal-mania { + font-family: 'Metal Mania', sans-serif; + } + + .md\:font-montserrat { + font-family: 'Montserrat', sans-serif; + } + + .md\:font-neucha { + font-family: 'Neucha', sans-serif; + } + + .md\:font-noto-sans { + font-family: 'Noto Sans', sans-serif; + } + + .md\:font-open-sans { + font-family: 'Open Sans', sans-serif; + } + + .md\:font-orbitron { + font-family: 'Orbitron', sans-serif; + } + + .md\:font-oswald { + font-family: 'Oswald', sans-serif; + } + + .md\:font-pacifico { + font-family: 'Pacifico', cursive; + } + + .md\:font-permanent-marker { + font-family: 'Permanent Marker', sans-serif; + } + + .md\:font-philosopher { + font-family: 'Philosopher', serif; + } + + .md\:font-playfair-display { + font-family: 'Playfair Display', serif; + } + + .md\:font-poppins { + font-family: 'Poppins', sans-serif; + } + + .md\:font-press-start-2p { + font-family: 'Press Start 2P', monospace; + } + + .md\:font-questrial { + font-family: 'Questrial', sans-serif; + } + + .md\:font-quicksand { + font-family: 'Quicksand', sans-serif; + } + + .md\:font-rajdhani { + font-family: 'Rajdhani', sans-serif; + } + + .md\:font-raleway { + font-family: 'Raleway', serif; + } + + .md\:font-righteous { + font-family: 'Righteous', sans-serif; + } + + .md\:font-roboto { + font-family: 'Roboto', sans-serif; + } + + .md\:font-sacramento { + font-family: 'Sacramento', cursive; + } + + .md\:font-satisfy { + font-family: 'Satisfy', cursive; + } + + .md\:font-space-mono { + font-family: 'Space Mono', sans-serif; + } + + .md\:font-spectral { + font-family: 'Spectral', sans-serif; + } + + .md\:font-staatliches { + font-family: 'Staatliches', serif; + } + + .md\:font-stint-ultra-condensed { + font-family: 'Stint Ultra Condensed', sans-serif; + } + + .md\:font-syncopate { + font-family: 'Syncopate', sans-serif; + } + + .md\:font-ultra { + font-family: 'Ultra', serif; + } + + .md\:font-unica-one { + font-family: 'Unica One', sans-serif; + } + + .md\:font-work-sans { + font-family: 'Work Sans', sans-serif; + } + + .md\:font-yellowtail { + font-family: 'Yellowtail', cursive; + } } -@media (min-width: 1024px) { - .lg\:grid-cols-3 { +@media (min-width: 1024px){ + .lg\:grid-cols-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); } - .lg\:grid-cols-4 { + .lg\:grid-cols-4{ grid-template-columns: repeat(4, minmax(0, 1fr)); } - .lg\:grid-cols-6 { + .lg\:grid-cols-6{ grid-template-columns: repeat(6, minmax(0, 1fr)); } - .lg\:text-6xl { + .lg\:font-abril-fatface{ + font-family: "Abril Fatface", serif; + } + + .lg\:font-alegreya{ + font-family: "Alegreya", sans-serif; + } + + .lg\:font-alfa-slab-one{ + font-family: "Alfa Slab One", sans-serif; + } + + .lg\:font-almendra{ + font-family: "Almendra", serif; + } + + .lg\:font-amatic-sc{ + font-family: "Amatic SC", cursive; + } + + .lg\:font-andika{ + font-family: "Andika", sans-serif; + } + + .lg\:font-architects-daughter{ + font-family: "Architects Daughter", cursive; + } + + .lg\:font-audiowide{ + font-family: "Audiowide", sans-serif; + } + + .lg\:font-averia-libre{ + font-family: "Averia Libre", cursive; + } + + .lg\:font-bebas-neue{ + font-family: "Bebas Neue", sans-serif; + } + + .lg\:font-black-ops-one{ + font-family: "Black Ops One", sans-serif; + } + + .lg\:font-caveat{ + font-family: "Caveat", cursive; + } + + .lg\:font-cinzel-decorative{ + font-family: "Cinzel Decorative", serif; + } + + .lg\:font-courgette{ + font-family: "Courgette", cursive; + } + + .lg\:font-dancing-script{ + font-family: "Dancing Script", cursive; + } + + .lg\:font-exo{ + font-family: "Exo", sans-serif; + } + + .lg\:font-fjalla-one{ + font-family: "Fjalla One", sans-serif; + } + + .lg\:font-germania-one{ + font-family: "Germania One", sans-serif; + } + + .lg\:font-glass-antiqua{ + font-family: "Glass Antiqua", cursive; + } + + .lg\:font-gloria-hallelujah{ + font-family: "Gloria Hallelujah", cursive; + } + + .lg\:font-great-vibes{ + font-family: "Great Vibes", cursive; + } + + .lg\:font-holtwood-one-sc{ + font-family: "Holtwood One SC", sans-serif; + } + + .lg\:font-indie-flower{ + font-family: "Indie Flower", cursive; + } + + .lg\:font-italiana{ + font-family: "Italiana", serif; + } + + .lg\:font-jost{ + font-family: "Jost", sans-serif; + } + + .lg\:font-kaushan-script{ + font-family: "Kaushan Script", cursive; + } + + .lg\:font-lato{ + font-family: "Lato", sans-serif; + } + + .lg\:font-metal-mania{ + font-family: "Metal Mania", sans-serif; + } + + .lg\:font-mono{ + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + } + + .lg\:font-montserrat{ + font-family: "Montserrat", sans-serif; + } + + .lg\:font-neucha{ + font-family: "Neucha", sans-serif; + } + + .lg\:font-noto-sans{ + font-family: "Noto Sans", sans-serif; + } + + .lg\:font-open-sans{ + font-family: "Open Sans", sans-serif; + } + + .lg\:font-orbitron{ + font-family: "Orbitron", sans-serif; + } + + .lg\:font-oswald{ + font-family: "Oswald", sans-serif; + } + + .lg\:font-pacifico{ + font-family: "Pacifico", cursive; + } + + .lg\:font-permanent-marker{ + font-family: "Permanent Marker", sans-serif; + } + + .lg\:font-philosopher{ + font-family: "Philosopher", serif; + } + + .lg\:font-playfair-display{ + font-family: "Playfair Display", serif; + } + + .lg\:font-poppins{ + font-family: "Poppins", sans-serif; + } + + .lg\:font-press-start-2p{ + font-family: "Press Start 2P", monospace; + } + + .lg\:font-questrial{ + font-family: "Questrial", sans-serif; + } + + .lg\:font-quicksand{ + font-family: "Quicksand", sans-serif; + } + + .lg\:font-rajdhani{ + font-family: "Rajdhani", sans-serif; + } + + .lg\:font-raleway{ + font-family: "Raleway", serif; + } + + .lg\:font-righteous{ + font-family: "Righteous", sans-serif; + } + + .lg\:font-roboto{ + font-family: "Roboto", sans-serif; + } + + .lg\:font-sacramento{ + font-family: "Sacramento", cursive; + } + + .lg\:font-sans{ + font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + } + + .lg\:font-satisfy{ + font-family: "Satisfy", cursive; + } + + .lg\:font-serif{ + font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; + } + + .lg\:font-space-mono{ + font-family: "Space Mono", sans-serif; + } + + .lg\:font-spectral{ + font-family: "Spectral", sans-serif; + } + + .lg\:font-staatliches{ + font-family: "Staatliches", serif; + } + + .lg\:font-stint-ultra-condensed{ + font-family: "Stint Ultra Condensed", sans-serif; + } + + .lg\:font-syncopate{ + font-family: "Syncopate", sans-serif; + } + + .lg\:font-ultra{ + font-family: "Ultra", serif; + } + + .lg\:font-unica-one{ + font-family: "Unica One", sans-serif; + } + + .lg\:font-work-sans{ + font-family: "Work Sans", sans-serif; + } + + .lg\:font-yellowtail{ + font-family: "Yellowtail", cursive; + } + + .lg\:text-6xl{ font-size: 3.75rem; line-height: 1; } + + .lg\:font-black{ + font-weight: 900; + } + + .lg\:font-bold{ + font-weight: 700; + } + + .lg\:font-extrabold{ + font-weight: 800; + } + + .lg\:font-extralight{ + font-weight: 200; + } + + .lg\:font-light{ + font-weight: 300; + } + + .lg\:font-medium{ + font-weight: 500; + } + + .lg\:font-normal{ + font-weight: 400; + } + + .lg\:font-semibold{ + font-weight: 600; + } + + .lg\:font-thin{ + font-weight: 100; + } + + .lg\:font-abril-fatface { + font-family: 'Abril Fatface', serif; + } + + .lg\:font-alegreya { + font-family: 'Alegreya', sans-serif; + } + + .lg\:font-alfa-slab-one { + font-family: 'Alfa Slab One', sans-serif; + } + + .lg\:font-almendra { + font-family: 'Almendra', serif; + } + + .lg\:font-amatic-sc { + font-family: 'Amatic SC', cursive; + } + + .lg\:font-andika { + font-family: 'Andika', sans-serif; + } + + .lg\:font-architects-daughter { + font-family: 'Architects Daughter', cursive; + } + + .lg\:font-audiowide { + font-family: 'Audiowide', sans-serif; + } + + .lg\:font-averia-libre { + font-family: 'Averia Libre', cursive; + } + + .lg\:font-bebas-neue { + font-family: 'Bebas Neue', sans-serif; + } + + .lg\:font-black-ops-one { + font-family: 'Black Ops One', sans-serif; + } + + .lg\:font-caveat { + font-family: 'Caveat', cursive; + } + + .lg\:font-cinzel-decorative { + font-family: 'Cinzel Decorative', serif; + } + + .lg\:font-courgette { + font-family: 'Courgette', cursive; + } + + .lg\:font-dancing-script { + font-family: 'Dancing Script', cursive; + } + + .lg\:font-exo { + font-family: 'Exo', sans-serif; + } + + .lg\:font-fjalla-one { + font-family: 'Fjalla One', sans-serif; + } + + .lg\:font-germania-one { + font-family: 'Germania One', sans-serif; + } + + .lg\:font-glass-antiqua { + font-family: 'Glass Antiqua', cursive; + } + + .lg\:font-gloria-hallelujah { + font-family: 'Gloria Hallelujah', cursive; + } + + .lg\:font-great-vibes { + font-family: 'Great Vibes', cursive; + } + + .lg\:font-holtwood-one-sc { + font-family: 'Holtwood One SC', sans-serif; + } + + .lg\:font-indie-flower { + font-family: 'Indie Flower', cursive; + } + + .lg\:font-italiana { + font-family: 'Italiana', serif; + } + + .lg\:font-jost { + font-family: 'Jost', sans-serif; + } + + .lg\:font-kaushan-script { + font-family: 'Kaushan Script', cursive; + } + + .lg\:font-lato { + font-family: 'Lato', sans-serif; + } + + .lg\:font-metal-mania { + font-family: 'Metal Mania', sans-serif; + } + + .lg\:font-montserrat { + font-family: 'Montserrat', sans-serif; + } + + .lg\:font-neucha { + font-family: 'Neucha', sans-serif; + } + + .lg\:font-noto-sans { + font-family: 'Noto Sans', sans-serif; + } + + .lg\:font-open-sans { + font-family: 'Open Sans', sans-serif; + } + + .lg\:font-orbitron { + font-family: 'Orbitron', sans-serif; + } + + .lg\:font-oswald { + font-family: 'Oswald', sans-serif; + } + + .lg\:font-pacifico { + font-family: 'Pacifico', cursive; + } + + .lg\:font-permanent-marker { + font-family: 'Permanent Marker', sans-serif; + } + + .lg\:font-philosopher { + font-family: 'Philosopher', serif; + } + + .lg\:font-playfair-display { + font-family: 'Playfair Display', serif; + } + + .lg\:font-poppins { + font-family: 'Poppins', sans-serif; + } + + .lg\:font-press-start-2p { + font-family: 'Press Start 2P', monospace; + } + + .lg\:font-questrial { + font-family: 'Questrial', sans-serif; + } + + .lg\:font-quicksand { + font-family: 'Quicksand', sans-serif; + } + + .lg\:font-rajdhani { + font-family: 'Rajdhani', sans-serif; + } + + .lg\:font-raleway { + font-family: 'Raleway', serif; + } + + .lg\:font-righteous { + font-family: 'Righteous', sans-serif; + } + + .lg\:font-roboto { + font-family: 'Roboto', sans-serif; + } + + .lg\:font-sacramento { + font-family: 'Sacramento', cursive; + } + + .lg\:font-satisfy { + font-family: 'Satisfy', cursive; + } + + .lg\:font-space-mono { + font-family: 'Space Mono', sans-serif; + } + + .lg\:font-spectral { + font-family: 'Spectral', sans-serif; + } + + .lg\:font-staatliches { + font-family: 'Staatliches', serif; + } + + .lg\:font-stint-ultra-condensed { + font-family: 'Stint Ultra Condensed', sans-serif; + } + + .lg\:font-syncopate { + font-family: 'Syncopate', sans-serif; + } + + .lg\:font-ultra { + font-family: 'Ultra', serif; + } + + .lg\:font-unica-one { + font-family: 'Unica One', sans-serif; + } + + .lg\:font-work-sans { + font-family: 'Work Sans', sans-serif; + } + + .lg\:font-yellowtail { + font-family: 'Yellowtail', cursive; + } } + +@media (min-width: 1280px){ + .xl\:font-abril-fatface{ + font-family: "Abril Fatface", serif; + } + + .xl\:font-alegreya{ + font-family: "Alegreya", sans-serif; + } + + .xl\:font-alfa-slab-one{ + font-family: "Alfa Slab One", sans-serif; + } + + .xl\:font-almendra{ + font-family: "Almendra", serif; + } + + .xl\:font-amatic-sc{ + font-family: "Amatic SC", cursive; + } + + .xl\:font-andika{ + font-family: "Andika", sans-serif; + } + + .xl\:font-architects-daughter{ + font-family: "Architects Daughter", cursive; + } + + .xl\:font-audiowide{ + font-family: "Audiowide", sans-serif; + } + + .xl\:font-averia-libre{ + font-family: "Averia Libre", cursive; + } + + .xl\:font-bebas-neue{ + font-family: "Bebas Neue", sans-serif; + } + + .xl\:font-black-ops-one{ + font-family: "Black Ops One", sans-serif; + } + + .xl\:font-caveat{ + font-family: "Caveat", cursive; + } + + .xl\:font-cinzel-decorative{ + font-family: "Cinzel Decorative", serif; + } + + .xl\:font-courgette{ + font-family: "Courgette", cursive; + } + + .xl\:font-dancing-script{ + font-family: "Dancing Script", cursive; + } + + .xl\:font-exo{ + font-family: "Exo", sans-serif; + } + + .xl\:font-fjalla-one{ + font-family: "Fjalla One", sans-serif; + } + + .xl\:font-germania-one{ + font-family: "Germania One", sans-serif; + } + + .xl\:font-glass-antiqua{ + font-family: "Glass Antiqua", cursive; + } + + .xl\:font-gloria-hallelujah{ + font-family: "Gloria Hallelujah", cursive; + } + + .xl\:font-great-vibes{ + font-family: "Great Vibes", cursive; + } + + .xl\:font-holtwood-one-sc{ + font-family: "Holtwood One SC", sans-serif; + } + + .xl\:font-indie-flower{ + font-family: "Indie Flower", cursive; + } + + .xl\:font-italiana{ + font-family: "Italiana", serif; + } + + .xl\:font-jost{ + font-family: "Jost", sans-serif; + } + + .xl\:font-kaushan-script{ + font-family: "Kaushan Script", cursive; + } + + .xl\:font-lato{ + font-family: "Lato", sans-serif; + } + + .xl\:font-metal-mania{ + font-family: "Metal Mania", sans-serif; + } + + .xl\:font-mono{ + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + } + + .xl\:font-montserrat{ + font-family: "Montserrat", sans-serif; + } + + .xl\:font-neucha{ + font-family: "Neucha", sans-serif; + } + + .xl\:font-noto-sans{ + font-family: "Noto Sans", sans-serif; + } + + .xl\:font-open-sans{ + font-family: "Open Sans", sans-serif; + } + + .xl\:font-orbitron{ + font-family: "Orbitron", sans-serif; + } + + .xl\:font-oswald{ + font-family: "Oswald", sans-serif; + } + + .xl\:font-pacifico{ + font-family: "Pacifico", cursive; + } + + .xl\:font-permanent-marker{ + font-family: "Permanent Marker", sans-serif; + } + + .xl\:font-philosopher{ + font-family: "Philosopher", serif; + } + + .xl\:font-playfair-display{ + font-family: "Playfair Display", serif; + } + + .xl\:font-poppins{ + font-family: "Poppins", sans-serif; + } + + .xl\:font-press-start-2p{ + font-family: "Press Start 2P", monospace; + } + + .xl\:font-questrial{ + font-family: "Questrial", sans-serif; + } + + .xl\:font-quicksand{ + font-family: "Quicksand", sans-serif; + } + + .xl\:font-rajdhani{ + font-family: "Rajdhani", sans-serif; + } + + .xl\:font-raleway{ + font-family: "Raleway", serif; + } + + .xl\:font-righteous{ + font-family: "Righteous", sans-serif; + } + + .xl\:font-roboto{ + font-family: "Roboto", sans-serif; + } + + .xl\:font-sacramento{ + font-family: "Sacramento", cursive; + } + + .xl\:font-sans{ + font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + } + + .xl\:font-satisfy{ + font-family: "Satisfy", cursive; + } + + .xl\:font-serif{ + font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; + } + + .xl\:font-space-mono{ + font-family: "Space Mono", sans-serif; + } + + .xl\:font-spectral{ + font-family: "Spectral", sans-serif; + } + + .xl\:font-staatliches{ + font-family: "Staatliches", serif; + } + + .xl\:font-stint-ultra-condensed{ + font-family: "Stint Ultra Condensed", sans-serif; + } + + .xl\:font-syncopate{ + font-family: "Syncopate", sans-serif; + } + + .xl\:font-ultra{ + font-family: "Ultra", serif; + } + + .xl\:font-unica-one{ + font-family: "Unica One", sans-serif; + } + + .xl\:font-work-sans{ + font-family: "Work Sans", sans-serif; + } + + .xl\:font-yellowtail{ + font-family: "Yellowtail", cursive; + } + + .xl\:font-black{ + font-weight: 900; + } + + .xl\:font-bold{ + font-weight: 700; + } + + .xl\:font-extrabold{ + font-weight: 800; + } + + .xl\:font-extralight{ + font-weight: 200; + } + + .xl\:font-light{ + font-weight: 300; + } + + .xl\:font-medium{ + font-weight: 500; + } + + .xl\:font-normal{ + font-weight: 400; + } + + .xl\:font-semibold{ + font-weight: 600; + } + + .xl\:font-thin{ + font-weight: 100; + } + + .xl\:font-abril-fatface { + font-family: 'Abril Fatface', serif; + } + + .xl\:font-alegreya { + font-family: 'Alegreya', sans-serif; + } + + .xl\:font-alfa-slab-one { + font-family: 'Alfa Slab One', sans-serif; + } + + .xl\:font-almendra { + font-family: 'Almendra', serif; + } + + .xl\:font-amatic-sc { + font-family: 'Amatic SC', cursive; + } + + .xl\:font-andika { + font-family: 'Andika', sans-serif; + } + + .xl\:font-architects-daughter { + font-family: 'Architects Daughter', cursive; + } + + .xl\:font-audiowide { + font-family: 'Audiowide', sans-serif; + } + + .xl\:font-averia-libre { + font-family: 'Averia Libre', cursive; + } + + .xl\:font-bebas-neue { + font-family: 'Bebas Neue', sans-serif; + } + + .xl\:font-black-ops-one { + font-family: 'Black Ops One', sans-serif; + } + + .xl\:font-caveat { + font-family: 'Caveat', cursive; + } + + .xl\:font-cinzel-decorative { + font-family: 'Cinzel Decorative', serif; + } + + .xl\:font-courgette { + font-family: 'Courgette', cursive; + } + + .xl\:font-dancing-script { + font-family: 'Dancing Script', cursive; + } + + .xl\:font-exo { + font-family: 'Exo', sans-serif; + } + + .xl\:font-fjalla-one { + font-family: 'Fjalla One', sans-serif; + } + + .xl\:font-germania-one { + font-family: 'Germania One', sans-serif; + } + + .xl\:font-glass-antiqua { + font-family: 'Glass Antiqua', cursive; + } + + .xl\:font-gloria-hallelujah { + font-family: 'Gloria Hallelujah', cursive; + } + + .xl\:font-great-vibes { + font-family: 'Great Vibes', cursive; + } + + .xl\:font-holtwood-one-sc { + font-family: 'Holtwood One SC', sans-serif; + } + + .xl\:font-indie-flower { + font-family: 'Indie Flower', cursive; + } + + .xl\:font-italiana { + font-family: 'Italiana', serif; + } + + .xl\:font-jost { + font-family: 'Jost', sans-serif; + } + + .xl\:font-kaushan-script { + font-family: 'Kaushan Script', cursive; + } + + .xl\:font-lato { + font-family: 'Lato', sans-serif; + } + + .xl\:font-metal-mania { + font-family: 'Metal Mania', sans-serif; + } + + .xl\:font-montserrat { + font-family: 'Montserrat', sans-serif; + } + + .xl\:font-neucha { + font-family: 'Neucha', sans-serif; + } + + .xl\:font-noto-sans { + font-family: 'Noto Sans', sans-serif; + } + + .xl\:font-open-sans { + font-family: 'Open Sans', sans-serif; + } + + .xl\:font-orbitron { + font-family: 'Orbitron', sans-serif; + } + + .xl\:font-oswald { + font-family: 'Oswald', sans-serif; + } + + .xl\:font-pacifico { + font-family: 'Pacifico', cursive; + } + + .xl\:font-permanent-marker { + font-family: 'Permanent Marker', sans-serif; + } + + .xl\:font-philosopher { + font-family: 'Philosopher', serif; + } + + .xl\:font-playfair-display { + font-family: 'Playfair Display', serif; + } + + .xl\:font-poppins { + font-family: 'Poppins', sans-serif; + } + + .xl\:font-press-start-2p { + font-family: 'Press Start 2P', monospace; + } + + .xl\:font-questrial { + font-family: 'Questrial', sans-serif; + } + + .xl\:font-quicksand { + font-family: 'Quicksand', sans-serif; + } + + .xl\:font-rajdhani { + font-family: 'Rajdhani', sans-serif; + } + + .xl\:font-raleway { + font-family: 'Raleway', serif; + } + + .xl\:font-righteous { + font-family: 'Righteous', sans-serif; + } + + .xl\:font-roboto { + font-family: 'Roboto', sans-serif; + } + + .xl\:font-sacramento { + font-family: 'Sacramento', cursive; + } + + .xl\:font-satisfy { + font-family: 'Satisfy', cursive; + } + + .xl\:font-space-mono { + font-family: 'Space Mono', sans-serif; + } + + .xl\:font-spectral { + font-family: 'Spectral', sans-serif; + } + + .xl\:font-staatliches { + font-family: 'Staatliches', serif; + } + + .xl\:font-stint-ultra-condensed { + font-family: 'Stint Ultra Condensed', sans-serif; + } + + .xl\:font-syncopate { + font-family: 'Syncopate', sans-serif; + } + + .xl\:font-ultra { + font-family: 'Ultra', serif; + } + + .xl\:font-unica-one { + font-family: 'Unica One', sans-serif; + } + + .xl\:font-work-sans { + font-family: 'Work Sans', sans-serif; + } + + .xl\:font-yellowtail { + font-family: 'Yellowtail', cursive; + } +} \ No newline at end of file diff --git a/tailwind.config.js b/tailwind.config.js index f17ee66..c45ee62 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -6,9 +6,67 @@ module.exports = { "./lib/**/*.{js,jsx,ts,tsx}", "./styles/**/*.{css,js}", ], - theme: { +theme: { extend: { - // Keine fontFamily-Einträge mehr hier nötig! + fontFamily: { + 'abril-fatface': ['"Abril Fatface"', 'serif'], + 'alegreya': ['"Alegreya"', 'sans-serif'], + 'alfa-slab-one': ['"Alfa Slab One"', 'sans-serif'], + 'almendra': ['"Almendra"', 'serif'], + 'amatic-sc': ['"Amatic SC"', 'cursive'], + 'andika': ['"Andika"', 'sans-serif'], + 'architects-daughter': ['"Architects Daughter"', 'cursive'], + 'audiowide': ['"Audiowide"', 'sans-serif'], + 'averia-libre': ['"Averia Libre"', 'cursive'], + 'bebas-neue': ['"Bebas Neue"', 'sans-serif'], + 'black-ops-one': ['"Black Ops One"', 'sans-serif'], + 'caveat': ['"Caveat"', 'cursive'], + 'cinzel-decorative': ['"Cinzel Decorative"', 'serif'], + 'courgette': ['"Courgette"', 'cursive'], + 'dancing-script': ['"Dancing Script"', 'cursive'], + 'exo': ['"Exo"', 'sans-serif'], + 'fjalla-one': ['"Fjalla One"', 'sans-serif'], + 'germania-one': ['"Germania One"', 'sans-serif'], + 'glass-antiqua': ['"Glass Antiqua"', 'cursive'], + 'gloria-hallelujah': ['"Gloria Hallelujah"', 'cursive'], + 'great-vibes': ['"Great Vibes"', 'cursive'], + 'holtwood-one-sc': ['"Holtwood One SC"', 'sans-serif'], + 'indie-flower': ['"Indie Flower"', 'cursive'], + 'italiana': ['"Italiana"', 'serif'], + 'jost': ['"Jost"', 'sans-serif'], + 'kaushan-script': ['"Kaushan Script"', 'cursive'], + 'lato': ['"Lato"', 'sans-serif'], + 'metal-mania': ['"Metal Mania"', 'sans-serif'], + 'montserrat': ['"Montserrat"', 'sans-serif'], + 'neucha': ['"Neucha"', 'sans-serif'], + 'noto-sans': ['"Noto Sans"', 'sans-serif'], + 'open-sans': ['"Open Sans"', 'sans-serif'], + 'orbitron': ['"Orbitron"', 'sans-serif'], + 'oswald': ['"Oswald"', 'sans-serif'], + 'pacifico': ['"Pacifico"', 'cursive'], + 'permanent-marker': ['"Permanent Marker"', 'sans-serif'], + 'philosopher': ['"Philosopher"', 'serif'], + 'playfair-display': ['"Playfair Display"', 'serif'], + 'poppins': ['"Poppins"', 'sans-serif'], + 'press-start-2p': ['"Press Start 2P"', 'monospace'], + 'questrial': ['"Questrial"', 'sans-serif'], + 'quicksand': ['"Quicksand"', 'sans-serif'], + 'rajdhani': ['"Rajdhani"', 'sans-serif'], + 'raleway': ['"Raleway"', 'serif'], + 'righteous': ['"Righteous"', 'sans-serif'], + 'roboto': ['"Roboto"', 'sans-serif'], + 'sacramento': ['"Sacramento"', 'cursive'], + 'satisfy': ['"Satisfy"', 'cursive'], + 'space-mono': ['"Space Mono"', 'sans-serif'], + 'spectral': ['"Spectral"', 'sans-serif'], + 'staatliches': ['"Staatliches"', 'serif'], + 'stint-ultra-condensed': ['"Stint Ultra Condensed"', 'sans-serif'], + 'syncopate': ['"Syncopate"', 'sans-serif'], + 'ultra': ['"Ultra"', 'serif'], + 'unica-one': ['"Unica One"', 'sans-serif'], + 'work-sans': ['"Work Sans"', 'sans-serif'], + 'yellowtail': ['"Yellowtail"', 'cursive'], + }, }, }, plugins: [], diff --git a/tailwind.config.mjs b/tailwind.config.mjs deleted file mode 100644 index 25fa412..0000000 --- a/tailwind.config.mjs +++ /dev/null @@ -1,25 +0,0 @@ -import tailwindFonts from "./lib/tailwind-font-map.js"; // ← **ASCII‑Minus wichtig!** - -/** @type {import('tailwindcss').Config} */ -export default { - content: [ - "./pages/**/*.{js,jsx,ts,tsx}", - "./components/**/*.{js,jsx,ts,tsx}", - "./entities/**/*.{js,jsx,ts,tsx}", - ".flowbite-react/class-list.json", - ], - theme: { - extend: { - fontFamily: { - // Dynamische Zuordnung: z. B. roboto: ['var(--font-roboto)'] - ...Object.fromEntries( - Object.entries(tailwindFonts).map(([key, cssVar]) => [ - key, - [`var(${cssVar})`], - ]) - ), - }, - }, - }, - plugins: [], -};