refactor: use de gruyter ci

This commit is contained in:
Marcel
2026-03-17 18:35:13 +00:00
parent 3b04f4cafe
commit 49fd29c1e6
366 changed files with 2642 additions and 267 deletions

View File

@@ -1,52 +1,39 @@
/* 1. Import Tailwind (replaces @tailwind base/components/utilities) */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;1,400&family=Montserrat:wght@400;500;600;700&display=swap');
/* Fonts: Montserrat = Gotham substitute | Tinos = Times substitute (De Gruyter Brill CI) */
@import url('https://fonts.googleapis.com/css2?family=Tinos:ital,wght@0,400;0,700;1,400;1,700&family=Montserrat:wght@400;500;600;700&display=swap');
@import "tailwindcss";
/* 2. Define Custom Theme Variables */
/* 2. Define Custom Theme Variables — De Gruyter Brill CI */
@theme {
/* COLORS:
Defining a variable starting with --color-* automatically creates
utilities like bg-brand-navy, text-brand-navy, border-brand-navy, etc.
*/
--color-brand-navy: #002850;
--color-brand-mint: #A6DAD8;
--color-brand-sand: #E4E2D7;
/* COLORS — exact De Gruyter Brill brand palette */
--color-brand-navy: #012851; /* Prussian Blue */
--color-brand-mint: #A1DCD8; /* Aqua Island */
--color-brand-purple: #B4B9FF; /* Melrose */
--color-brand-sand: #F0EFE9; /* Neutral paper tone */
--color-brand-white: #ffffff;
--color-brand-dark: #1A1A1A;
--color-brand-dark: #0D0D0D;
/* FONTS:
Defining --font-* creates utilities like font-sans, font-serif.
We override the defaults here.
*/
/* FONTS */
--font-sans: "Montserrat", ui-sans-serif, system-ui, sans-serif;
--font-serif: "Merriweather", ui-serif, Georgia, serif;
--font-serif: "Tinos", "Times New Roman", Georgia, serif;
/* SPACING/SIZING (Optional):
You can also define custom sizes if needed, e.g., for that huge number
*/
--text-huge: 4rem;
--text-huge: 4rem;
}
/* 3. Custom Utilities & Base Styles */
/* Import the fonts from Google */
/* Apply base styles directly to HTML elements */
/* 3. Base Styles */
@layer base {
html {
overscroll-behavior: none;
}
body {
/* Use the theme variable directly using standard CSS syntax */
background-color: var(--color-brand-sand);
background-color: #ffffff;
color: var(--color-brand-navy);
font-family: var(--font-serif);
}
/* Set headings to use the brand sans-serif font */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-sans);
font-weight: 500; /* Medium weight matches the screenshot headers */
font-weight: 600;
}
}