diff --git a/src/app/globals.css b/src/app/globals.css index ab35642..a80a314 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -4,21 +4,21 @@ /* Base units */ /* --vw is set by ThemeProvider */ - /* --background: #927030;; - --card: #dad6cd;; - --foreground: #2a2928;; - --primary-cta: #2a2928;; - --secondary-cta: #ecebea;; - --accent: #ffffff;; - --background-accent: #ffffff;; */ + /* --background: #927030; + --card: #dad6cd; + --foreground: #2a2928; + --primary-cta: #2a2928; + --secondary-cta: #ecebea; + --accent: #ffffff; + --background-accent: #ffffff; */ --background: #1b5e20; --foreground: #ffffff; --primary-cta: #22c55e; --secondary-cta: #16a34a; --accent: #22c55e; --background-accent: #16a34a; ; - --card: #dad6cd;; - --foreground: #2a2928;; - --primary-cta: #2a2928;; - --secondary-cta: #ecebea;; - --accent: #ffffff;; - --background-accent: #ffffff;; + --card: #dad6cd; + --foreground: #2a2928; + --primary-cta: #2a2928; + --secondary-cta: #ecebea; + --accent: #ffffff; + --background-accent: #ffffff; /* text sizing - set by ThemeProvider */ /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem); @@ -108,33 +108,93 @@ --height-6: 1.5rem; --height-7: 1.75rem; --height-8: 2rem; ---height-9: 2.25rem; ---height-10: 2.5rem; ---height-11: 2.75rem; ---height-12: 3rem; ---height-30: 7.5rem; ---height-90: 22.5rem; ---height-100: 25rem; ---height-110: 27.5rem; ---height-120: 30rem; ---height-130: 32.5rem; ---height-140: 35rem; ---height-150: 37.5rem; + --height-9: 2.25rem; + --height-10: 2.5rem; + --height-11: 2.75rem; + --height-12: 3rem; + --height-30: 7.5rem; + --height-90: 22.5rem; + --height-100: 25rem; + --height-110: 27.5rem; + --height-120: 30rem; + --height-130: 32.5rem; + --height-140: 35rem; + --height-150: 37.5rem; -/* hero page padding */ ---padding-hero-page-padding-half: calc((var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)) / 2); ---padding-hero-page-padding: calc(var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)); ---padding-hero-page-padding-1_5: calc(1.5 * (var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10))); ---padding-hero-page-padding-double: calc(2 * (var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10))); + /* hero page padding */ + --padding-hero-page-padding-half: calc((var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)) / 2); + --padding-hero-page-padding: calc(var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)); + --padding-hero-page-padding-1_5: calc(1.5 * (var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10))); + --padding-hero-page-padding-double: calc(2 * (var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10))); } @media (max-width: 767px) { :root { + /* --vw and text sizing are set by ThemeProvider */ + /* --vw: 3vw; + + --text-2xs: 2.5vw; + --text-xs: 2.75vw; + --text-sm: 3vw; + --text-base: 3.25vw; + --text-lg: 3.5vw; + --text-xl: 4.25vw; + --text-2xl: 5vw; + --text-3xl: 6vw; + --text-4xl: 7vw; + --text-5xl: 7.5vw; + --text-6xl: 8.5vw; + --text-7xl: 10vw; + --text-8xl: 12vw; + --text-9xl: 14vw; */ + + --width-5: 5vw; + --width-7_5: 7.5vw; + --width-10: 10vw; + --width-12_5: 12.5vw; + --width-15: 15vw; + --width-17_5: 17.5vw; + --width-20: 20vw; + --width-22_5: 22.5vw; + --width-25: 25vw; + --width-27_5: 27.5vw; --width-30: 30vw; + --width-32_5: 32.5vw; + --width-35: 35vw; --width-37_5: 37.5vw; + --width-40: 40vw; + --width-42_5: 42.5vw; + --width-45: 45vw; + --width-47_5: 47.5vw; + --width-50: 50vw; + --width-52_5: 52.5vw; + --width-55: 55vw; + --width-57_5: 57.5vw; + --width-60: 60vw; + --width-62_5: 62.5vw; + --width-65: 65vw; --width-67_5: 67.5vw; + --width-70: 70vw; + --width-72_5: 72.5vw; + --width-75: 75vw; --width-77_5: 77.5vw; + --width-80: 80vw; + --width-82_5: 82.5vw; + --width-85: 85vw; + --width-87_5: 87.5vw; + --width-90: 90vw; + --width-92_5: 92.5vw; + --width-95: 95vw; --width-97_5: 97.5vw; + --width-100: 100vw; + /* --width-content-width and --width-content-width-expanded are set by ThemeProvider */ + --width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - var(--vw-1_5)); + --width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px); + --width-carousel-padding-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px - var(--vw-1_5)); + --width-carousel-padding-controls-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px); + --width-carousel-item-3: var(--width-content-width); + --width-carousel-item-4: var(--width-content-width); + --width-x-padding-mask-fade: 10vw; --height-4: 3.5vw; --height-5: 4.5vw; @@ -149,8 +209,6 @@ --height-90: 81vw; --height-100: 90vw; --height-110: 99vw; - } -} --height-120: 108vw; --height-130: 117vw; --height-140: 126vw;