Thatsaphorn Atchariyaphap
6535bf37ec
- Introduced a new Services component with basic setup. - Updated layout files to ensure consistent global styling references. - Enhanced Navbar with pathname detection for active link styling. - Fixed navigation link URL for "Leistungen" in constants.
49 lines
1.6 KiB
CSS
49 lines
1.6 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer utilities {
|
|
.nav__link {
|
|
@apply relative text-base font-medium w-fit block after:block after:content-[''] after:absolute after:h-[3px] after:bg-pink-600 after:w-full after:scale-x-0 after:hover:scale-x-100 after:transition after:duration-300 after:origin-right;
|
|
}
|
|
}
|
|
|
|
/* Global theme transition */
|
|
.transition-theme {
|
|
transition: background-color 0.7s ease, color 0.7s ease;
|
|
}
|
|
|
|
/* Light mode */
|
|
/* Light mode */
|
|
[data-theme="light"] {
|
|
--primary-bg: #FAFAFA; /* Soft off-white background */
|
|
--secondary-bg: #F5F5F7; /* Gentle off-white for subtle separation */
|
|
--primary-text: #2E2E2E; /* Dark grey text for clear readability */
|
|
--secondary-text: #595959; /* Medium grey for less prominent text */
|
|
--nav-bg: #F8F8F8; /* Light grey navigation background */
|
|
--footer-bg: #E0E0E0; /* Slightly darker grey for footer contrast */
|
|
}
|
|
|
|
/* Dark mode */
|
|
[data-theme="dark"] {
|
|
--primary-bg: #2C2C2C; /* Modern dark grey background */
|
|
--secondary-bg: #333333; /* A touch lighter grey for section differentiation */
|
|
--primary-text: #E0E0E0; /* Light grey text for optimal readability */
|
|
--secondary-text: #B0B0B0; /* Medium grey for secondary text elements */
|
|
--nav-bg: #272727; /* Subtle variation for the navigation area */
|
|
--footer-bg: #242424; /* Deep grey footer to add visual depth */
|
|
}
|
|
|
|
@keyframes float {
|
|
0%, 100% {
|
|
transform: translateY(0);
|
|
}
|
|
50% {
|
|
transform: translateY(-6px);
|
|
}
|
|
}
|
|
|
|
.animate-float {
|
|
animation: float 3.5s ease-in-out infinite;
|
|
}
|