dm/fuz-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Poprawki w stylach, oraz przebudowa image w hero

Browse Source
This commit is contained in:
dm
2025-12-03 11:47:12 +01:00
parent c5d953d942
commit 1bdffb1003
40 changed files with 291 additions and 408 deletions
Download Patch File Download Diff File Expand all files Collapse all files

224
src/styles/theme.css
View File

@@ -1,22 +1,32 @@
* {
--brand: #0af;
--brand: hsl(200 100% 50%);
--brand: hsla(200 100% 50% 1);
--brand-hue: 200;
--brand-saturation: 100%;
--brand-lightness: 50%;
--brand-light: hsl(var(--brand-hue) var(--brand-saturation) var(--brand-lightness));
--link-color-light: hsla(210, 100%, 40%, 1);
--link-hover-light: hsla(165, 80%, 35%, 1);
/* --link-background-light: hsla(0 0% 50% 1); */
--text1-light: hsl(var(--brand-hue) var(--brand-saturation) 10%);
--text2-light: hsl(var(--brand-hue) 30% 30%);
--text3-light: hsl(var(--brand-hue) 15% 85%);
--surface1-light: hsl(var(--brand-hue) 25% 90%);
--surface2-light: hsl(var(--brand-hue) 20% 99%);
--surface3-light: hsl(var(--brand-hue) 20% 92%);
--surface4-light: hsl(var(--brand-hue) 20% 85%);
--surface5-light: hsla(217, 70%, 26%, 1);
--surface-shadow-light: var(--brand-hue) 10% 20%;
--shadow-strength-light: .02;
--border1-light: hsl(var(--brand-hue) 5% 80%);
--brand-dark: hsl(var(--brand-hue) calc(var(--brand-saturation) / 0.2) calc(var(--brand-lightness) / 1.5));
--text1-dark: hsl(var(--brand-hue) 15% 85%);
--text2-dark: hsl(var(--brand-hue) 5% 65%);
@@ -24,162 +34,120 @@
--surface2-dark: hsl(var(--brand-hue) 10% 15%);
--surface3-dark: hsl(var(--brand-hue) 5% 20%);
--surface4-dark: hsl(var(--brand-hue) 5% 25%);
--surface5-dark: hsl(var(--brand-hue) 35% 25%);
--surface-shadow-dark: var(--brand-hue) 50% 3%;
--shadow-strength-dark: .8;
--border1-dark: hsl(var(--brand-hue) 40% 70%);
--brand-dim: hsl(var(--brand-hue) calc(var(--brand-saturation) / 1.25) calc(var(--brand-lightness) / 1.25));
--brand-50: hsl(var(--brand-hue) 100% 97%);
--brand-100: hsl(var(--brand-hue) 100% 93%);
--brand-200: hsl(var(--brand-hue) 100% 85%);
--brand-300: hsl(var(--brand-hue) 100% 75%);
--brand-400: hsl(var(--brand-hue) 100% 62%);
--brand-500: hsl(var(--brand-hue) 100% 50%);
--brand-600: hsl(var(--brand-hue) 100% 42%);
--brand-700: hsl(var(--brand-hue) 100% 35%);
--brand-800: hsl(var(--brand-hue) 100% 28%);
--brand-900: hsl(var(--brand-hue) 100% 20%);
--link-hover-dark: hsla(45, 80%, 70%, 1);
--cookie-accept-dark: hsla(120, 60%, 45%, 1);
--link-color: hsl(190 100% 30%);
}
:root {
--f-background: var(--surface2-light);
--f-text: var(--text2-light);
--f-text-1: var(--text1-light);
--f-background-switch: var(--surface3-light);
--f-text-switcher: var(--brand-dark);
--f-background-switcher: var(--surface4-dark);
/* --- Hero --- */
--f-hero-text: var(--text1-dark);
--f-hero-header: var(--text1-dark);
/* --- Background and Text --- */
--f-background: var(--surface3-light);
--f-text: var(--text1-light);
--f-header: var(--text1-light);
--f-header-2: var(--text1-light);
--f-header-items: (var(--text2-light));
--f-header-items: (var(--text1-light));
/*--- Navbar --- */
--f-navbar-background: var(--surface4-light);
--f-navbar-link: var(--link-color-light);
--f-navbar-link-hover: var(--link-hover-light);
/*--- Footer --- */
--f-footer-background: var(--surface4-light);
--f-footer-link-text: var(--link-color-light);
/* --- Linki --- */
--f-link-text: var(--link-color-light);
--f-link-text-hover: var(--link-hover-light);
/* Buttons Input */
--btn-background: var(--link-color-light);
--btn-text: var(--surface4-light);
--btn-background-hover: var(--surface4-light);
--btn-text-hover: var(--link-color-light);
--gray-500: hsl(var(--brand-hue) 0% 97%);
--link-color-aaa: hsl(var(--brand-hue) 100% 28%);
/* Kontrast: ~7.1:1 - spełnia AAA */
--link-hover-aaa: hsl(var(--brand-hue) 100% 20%);
--f-background-toast: var(--surface2-dark);
--f-footer-background: var(--gray-500);
--f-footer-link-text: var(--link-color-aaa);
--f-link-text: var(--link-color);
/* var(--brand-light); */
--f-link-text-hover: var(--f-text2-light);
--btn-background: var(--surface2-light);
--btn-text: var(--text1-light);
--f-background-o: var(--surface3-light);
--btn-outline-background: transparent;
--btn-outline-border: var(--border1-light);
--btn-outline-text: var(--text1-light);
--btn-outline-background-hover: var(--surface4-light);
--btn-outline-text-hover: var(--brand-light);
--f-input-border: var(--surface1-light);
--f-input-border: var(--surface4-light);
--f-autocomplete-hover-bg: var(--surface3-dark);
--f-autocomplete-hover-text: var(--text1-dark);
/* --- Switchery --- */
--f-background-switch: var(--surface4-light);
--f-switcher-background: var(--link-color-light);
--f-switcher-text: var(--surface4-light);
--f-switcher-background-hover: var(--surface2-light);
--f-switcher-text-hover: var(--f-link-text-hover);
/* --- Cookie --- */
--f-cookie-background: var(--surface2-light);
--f-cookie-text: var(--text1-light);
--f-cookie-accept-background: var(--link-color-light);
--f-cookie-accept-text: var(--surface4-light);
--f-cookie-reject-background: var(--surface4-light);
--f-cookie-reject-text: var(--surface1-dark);
/* --- Offers --- */
--f-offers-border: var(--surface4-light);
--f-offers-price: var(--brand-700);
/* var(--brand-light); */
--f-offers-price: var(--brand-light);
--f-offers-popular: var(--brand-light);
--f-offers-popular-bg: color-mix(in srgb, var(--f-offers-popular) 22%, transparent);
--f-cookie-background: var(--text1-light);
--f-cookie-text: var(--surface2-light);
--f-cookie-accept-background: green;
/* --f-cookie-accept-text: */
--f-cookie-reject-background: var(--text2-light);
--f-autocomplete-hover-bg: var(--surface4-light);
--f-autocomplete-hover-text: var(--surface2-light);
--f-hero-text: var(--surface2-light);
-fuz-hero-from: #3b82f6;
/* niebieski - kolor początkowy */
--fuz-hero-to: #8b5cf6;
/* fioletowy - kolor końcowy */
}
:root.dark {
/* --- Hero --- */
--f-hero-text: var(--text1-dark);
--f-hero-header: var(--text1-dark);
/* --- Background and Text --- */
--f-background: var(--surface1-dark);
--f-text: var(--text1-dark);
--f-text-1: var(--text1-dark);
--f-background-switch: var(--surface2-dark);
--f-background-switch: var(--surface3-dark);
--f-text-switcher: var(--brand-dark);
--f-background-switcher: var(--text2-light);
--f-header: var(--text1-dark);
--f-header-2: var(--text1-dark);
--f-header-items: (var(--text2-dark));
--f-header-items: (var(--text1-dark));
/*--- Navbar --- */
--f-navbar-background: var(--surface2-dark);
--f-navbar-link: var(--brand-dark);
--f-navbar-link-hover: var(--link-hover-dark);
/*--- Footer --- */
--f-footer-background: var(--surface2-dark);
--f-footer-link-text: var(--brand-dark);
/* --- Linki --- */
--f-link-text: var(--brand-dark);
--f-link-text-hover: var(--f-text2-dark);
--f-link-text-hover: var(--link-hover-dark);
/* Buttons Input */
--btn-background: var(--f-link-text);
--btn-text: var(--surface1-dark);
--btn-background-hover: var(--surface4-dark);
--btn-text-hover: var(--f-link-text-hover);
--btn-background: var(--surface4-dark);
--btn-text: var(--text1-dark);
--btn-outline-background: transparent;
--btn-outline-border: var(--border1-dark);
--btn-outline-text: var(--text1-dark);
--btn-outline-background-hover: var(--surface4-dark);
--btn-outline-text-hover: var(--brand-dark);
--f-background-o: var(--surface2-dark);
--f-background-toast: var(--surface2-dark);
--f-input-border: var(--surface4-dark);
--f-autocomplete-hover-bg: var(--surface3-dark);
--f-autocomplete-hover-text: var(--text1-dark);
/* --- Switchery --- */
--f-background-switch: var(--surface3-dark);
--f-switcher-background: var(--f-link-text);
--f-switcher-text: var(--surface1-dark);
--f-switcher-background-hover: var(--surface4-dark);
--f-switcher-text-hover: var(--f-link-text-hover);
/* --- Cookie --- */
--f-cookie-background: var(--surface4-dark);
--f-cookie-text: var(--surface2-light);
--f-cookie-accept-background: var(--f-link-text);
--f-cookie-accept-text: var(--surface1-dark);
--f-cookie-reject-background: var(--surface3-dark);
--f-cookie-reject-text: var(--f-link-text);
/* --- Offers --- */
--f-offers-border: var(--surface4-dark);
--f-offers-price: var(--brand-dark);
--f-offers-popular: var(--brand-dark);
--f-offers-popular-bg: color-mix(in srgb, var(--f-offers-popular) 22%, transparent);
--f-cookie-background: var(--text1-light);
--f-cookie-text: var(--surface2-light);
--f-cookie-accept-background: green;
/* --f-cookie-accept-text: */
--f-cookie-reject-background: var(--text2-light);
--f-autocomplete-hover-bg: var(--surface3-dark);
--f-autocomplete-hover-text: var(--text1-dark);
--f-footer-background: var(--surface2-dark);
--f-footer-link-text: var(--brand-dark);
}
/* Body */
body {
background-color: var(--f-background);
color: var(--f-text);
}
/* Links */
a {
color: var(--fuz-link);
}
a:hover {
color: var(--fuz-link-hover);
}
/* Theme Toggle */
.theme-toggle-btn {
@apply text-xl p-2 rounded-full cursor-pointer transition-colors;
color: var(--f-text);
}
.theme-toggle-btn:hover {
opacity: 0.8;
}