Sebastian Krüger
64a3c1d583
All checks were successful
Deploy Theme / deploy (push) Successful in 1m6s
103 lines
2.5 KiB
CSS
103 lines
2.5 KiB
CSS
@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);
|
|
|
|
--color-gray-900: #1a1a1a;
|
|
--color-gray-800: #2b2b2b;
|
|
--color-gray-700: #3c3c3c;
|
|
--color-gray-500: #808080;
|
|
--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) */
|
|
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);
|
|
}
|
|
|
|
[x-cloak] { display: none !important; }
|
|
|
|
@layer base {
|
|
body {
|
|
background-color: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
font-family: var(--font-family-body); /* Apply default body font */
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-family: var(--font-family-heading); /* Apply heading font */
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
/* Main navigation styling */
|
|
header nav ul {
|
|
@apply flex items-center space-x-4; /* Make li items inline with spacing */
|
|
}
|
|
header nav ul li a {
|
|
@apply text-[var(--text-primary)] hover:text-[var(--text-secondary)] transition-colors duration-200; /* Default link style */
|
|
}
|
|
|
|
/* Mobile navigation styling */
|
|
#mobile-menu nav ul {
|
|
@apply flex flex-col items-center space-y-8; /* Stack items vertically in mobile menu */
|
|
}
|
|
#mobile-menu nav ul li a {
|
|
@apply text-[var(--text-primary)] text-3xl font-bold hover:text-[var(--text-secondary)] transition-colors duration-200;
|
|
}
|
|
}
|
|
|
|
.kg-image-card img, .post-content img {
|
|
@apply cursor-pointer transition-opacity duration-200 hover:opacity-90;
|
|
}
|
|
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.animate-fadeInUp {
|
|
animation: fadeInUp 0.5s ease-out forwards;
|
|
}
|
|
|
|
#lightbox.show {
|
|
animation: fadeIn 0.3s ease-out forwards;
|
|
}
|
|
|