diff --git a/src/components/maps/MapGoogle.astro b/src/components/maps/MapGoogle.astro index 3cd6e46..3b83b2b 100644 --- a/src/components/maps/MapGoogle.astro +++ b/src/components/maps/MapGoogle.astro @@ -1,9 +1,6 @@ --- import "../../styles/map-google.css"; -/** - * PARAMETRY MAPY - */ const { apiKey, lat, @@ -16,11 +13,9 @@ const { mapStyleId = "8e0a97af9476f2d3" } = Astro.props; -/** ID kontenera w DOM */ const domId = `fuz-map-${Math.random().toString(36).slice(2)}`; --- -
+> + \ No newline at end of file diff --git a/src/styles/footer.css b/src/styles/footer.css index 3bec7e3..8b4cd1c 100644 --- a/src/styles/footer.css +++ b/src/styles/footer.css @@ -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 { diff --git a/src/styles/theme.css b/src/styles/theme.css index 3adacb9..d1f046f 100644 --- a/src/styles/theme.css +++ b/src/styles/theme.css @@ -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 */