valknar/palina-theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(theme): implement Palina Gold theme and adaptive SVG logo system
All checks were successful
Deploy Theme / deploy (push) Successful in 14s
Details

Browse Source
This commit is contained in:
Sebastian Krüger
2026-02-19 19:49:11 +01:00
parent 99bae87b0d
commit bac70d7823
7 changed files with 705 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
assets/css/tailwind.css
View File

@@ -1,16 +1,30 @@
@import "tailwindcss";
@theme {
/* Default Custom Properties (Dark Theme) */
--bg-primary: var(--color-gray-900);
--bg-secondary: var(--color-gray-800);
--bg-tertiary: var(--color-gray-700);
--text-primary: var(--color-gray-100);
--text-secondary: var(--color-gray-400);
--text-tertiary: var(--color-gray-300);
--brand-primary: var(--color-indigo-600);
--brand-secondary: var(--color-indigo-700);
/* Brand Palette: Palina Gold (#DDC288) */
--color-brand-50: #faf8f0;
--color-brand-100: #f4edd1;
--color-brand-200: #e9dba4;
--color-brand-300: #ddc277;
--color-brand-400: #ddc288; /* Requested: #DDC288 */
--color-brand-500: #c9a765;
--color-brand-600: #b58d46;
--color-brand-700: #9c763a;
--color-brand-800: #7d5e31;
--color-brand-900: #624a29;
--color-brand-950: #4c3a23;
/* Default Custom Properties (Dark Theme) */
--bg-primary: #121212;
--bg-secondary: #1e1e1e;
--bg-tertiary: #2a2a2a;
--text-primary: #f2f2f2;
--text-secondary: #a3a3a3;
--text-tertiary: #737373;
--brand-primary: var(--color-brand-400);
--brand-secondary: var(--color-brand-500);
/* Gray Palette for standard UI */
--color-gray-900: #1a1a1a;
--color-gray-800: #2b2b2b;
--color-gray-700: #3c3c3c;
@@ -18,22 +32,20 @@
--color-gray-400: #a0a0a0;
--color-gray-200: #e0e0e0;
--color-gray-100: #f5f5f5;
--color-indigo-600: #4f46e5;
--color-indigo-700: #4338ca;
/* Font Families */
--font-family-body: "Montserrat", sans-serif;
--font-family-heading: "Playfair Display", serif;
}
/* Light Theme Overrides (outside @theme block) */
/* Light Theme Overrides */
html[data-theme='light'] {
--bg-primary: var(--color-gray-100);
--bg-secondary: var(--color-gray-200);
--bg-tertiary: var(--color-gray-300);
--text-primary: var(--color-gray-900);
--text-secondary: var(--color-gray-600);
--text-tertiary: var(--color-gray-700);
--bg-primary: #fdfcf9;
--bg-secondary: #f4f1e8;
--bg-tertiary: #e9e4d5;
--text-primary: #2d2114;
--text-secondary: #624a29;
--text-tertiary: #7d5e31;
}
[x-cloak] { display: none !important; }
@@ -42,38 +54,37 @@ html[data-theme='light'] {
body {
background-color: var(--bg-primary);
color: var(--text-primary);
font-family: var(--font-family-body); /* Apply default body font */
font-family: var(--font-family-body);
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-family-heading); /* Apply heading font */
font-family: var(--font-family-heading);
color: var(--brand-primary);
}
}
@layer components {
/* Main navigation styling */
header nav ul {
@apply flex items-center space-x-4; /* Make li items inline with spacing */
@apply flex items-center space-x-4;
}
header nav ul li a {
@apply text-[var(--text-primary)] hover:text-[var(--text-secondary)] transition-colors duration-200; /* Default link style */
@apply text-[var(--text-primary)] hover:text-[var(--brand-primary)] transition-colors duration-200;
}
/* Mobile navigation styling */
#mobile-menu nav ul {
@apply flex flex-col items-center space-y-8; /* Stack items vertically in mobile menu */
@apply flex flex-col items-center space-y-8;
}
#mobile-menu nav ul li a {
@apply text-[var(--text-primary)] text-3xl font-bold hover:text-[var(--text-secondary)] transition-colors duration-200;
@apply text-[var(--text-primary)] text-3xl font-bold hover:text-[var(--brand-primary)] transition-colors duration-200;
}
}
.site-logo {
@apply transition-all duration-300;
}
html[data-theme='dark'] .site-logo {
filter: invert(0.9) brightness(1.2);
color: var(--brand-primary);
fill: currentColor;
}
@keyframes fadeInUp {