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

Mapa asynchroniczność, kontrastowanie linków

Browse Source
This commit is contained in:
dm
2025-11-26 16:06:29 +01:00
parent a0f4e8fbab
commit 9b5eb5a3ef
3 changed files with 88 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/styles/footer.css
View File

@@ -1,6 +1,6 @@
@layer components {
.f-footer {
@apply mt-2 border-t border-[--f-input-border] bg-[--f-background-o] text-[--f-text] pt-2;
@apply mt-2 border-t border-[--f-input-border] bg-[--f-footer-background] text-[--f-text] pt-2;
}
.f-footer-inner {
@@ -20,7 +20,7 @@
}
a {
@apply text-[--f-link-text];
@apply text-[--f-footer-link-text];
}
a:hover {

29
src/styles/theme.css
View File

@@ -29,6 +29,19 @@
--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-color: hsl(190 100% 30%);
}
:root {
@@ -44,9 +57,15 @@
--f-header-2: var(--text1-light);
--f-header-items: (var(--text2-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-footer-background: var(--gray-500);
--f-footer-link-text: var(--link-color-aaa);
--f-link-text: var(--brand-dim);
--f-link-text: var(--link-color);
/* var(--brand-light); */
--f-link-text-hover: var(--f-text2-light);
@@ -54,7 +73,7 @@
--btn-background: var(--surface2-light);
--btn-text: var(--text1-light);
--f-background-o: var(--surface4-light);
--f-background-o: var(--surface3-light);
--btn-outline-background: transparent;
--btn-outline-border: var(--border1-light);
@@ -66,7 +85,8 @@
--f-input-border: var(--surface1-light);
--f-offers-border: var(--surface4-light);
--f-offers-price: var(--brand-light);
--f-offers-price: var(--brand-700);
/* var(--brand-light); */
--f-offers-popular: var(--brand-light);
--f-offers-popular-bg: color-mix(in srgb, var(--f-offers-popular) 22%, transparent);
@@ -133,6 +153,9 @@
--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 */