From e03cef5ba58a3a7f784aa2b7347b28f7555c6133 Mon Sep 17 00:00:00 2001 From: TheThomaas Date: Tue, 27 May 2025 21:42:16 +0200 Subject: [PATCH] Replace old colors with new variables --- src/css/components/timeline.css | 8 +-- src/css/footer.css | 2 +- src/css/header.css | 2 +- src/css/main.css | 5 +- src/css/variables.css | 86 ++++++++++++++++++--------------- 5 files changed, 58 insertions(+), 45 deletions(-) diff --git a/src/css/components/timeline.css b/src/css/components/timeline.css index ad3fe25..dedbe09 100644 --- a/src/css/components/timeline.css +++ b/src/css/components/timeline.css @@ -7,7 +7,7 @@ } .timeline:before { content: ""; - background-color: rgb(var(--neutral-lower)); + background-color: var(--color-neutral-200); inline-size: 6px; margin-inline-start: -3px; position: absolute; @@ -30,8 +30,8 @@ content: ""; aspect-ratio: 1; inline-size: var(--size); - background-color: rgb(var(--neutral-lower)); - border: 6px solid rgb(var(--brand-secondary-medium)); + background-color: var(--color-neutral-200); + border: 6px solid var(--color-primary-400); z-index: 1; border-radius: 50%; transition: all 0.2s ease-in-out; @@ -41,5 +41,5 @@ transform: translateY(50%); } .timeline li:hover:before { - border-color: rgb(var(--brand-secondary-high)); + border-color: var(--color-primary-700); } \ No newline at end of file diff --git a/src/css/footer.css b/src/css/footer.css index d6d4ad9..f78a756 100644 --- a/src/css/footer.css +++ b/src/css/footer.css @@ -1,5 +1,5 @@ footer { - background-color: rgb(var(--brand-secondary-medium)); + background-color: var(--color-primary-400); justify-items: center; margin-block-start: 1.5rem; } diff --git a/src/css/header.css b/src/css/header.css index 4bfc952..ad9af47 100644 --- a/src/css/header.css +++ b/src/css/header.css @@ -1,5 +1,5 @@ header { - background-color: rgb(var(--brand-primary-medium)); + background-color: var(--color-secondary-400); z-index: 10; position: fixed; inset-block-start: 0; diff --git a/src/css/main.css b/src/css/main.css index cea8925..c3d6a23 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -57,9 +57,12 @@ html { } } body { - background: rgb(var(--brand-primary-medium)); + background: var(--color-secondary-400); background: var(--bg-gradient); margin: 0; + position: relative; + z-index: 0; + overflow-x: hidden; } body header, body footer { diff --git a/src/css/variables.css b/src/css/variables.css index d754f03..c32bf3d 100644 --- a/src/css/variables.css +++ b/src/css/variables.css @@ -1,45 +1,55 @@ :root { - --neutral-lowest: 255, 255, 255, 0.5; - --neutral-lower: 231 231 231; - --neutral-low: 209 209 209; - --neutral-medium-low: 176 176 176; - --neutral-medium: 136 136 136; - --neutral-medium-high: 109 109 109; - --neutral-high: 93 93 93; - --neutral-higher: 79 79 79; - --neutral-highest: 9, 9, 11; - --brand-primary-lowest: 249 248 243; - --brand-primary-lower: 242 239 226; - --brand-primary-low: 210 199 159; - --brand-primary-medium-low: 194 176 128; - --brand-primary-medium: 177 151 94; - --brand-primary-medium-high: 164 133 82; - --brand-primary-high: 136 107 70; - --brand-primary-higher: 90 72 52; - --brand-primary-highest: 48 37 26; - --brand-secondary-lowest: 244 247 238; - --brand-secondary-lower: 231 238 217; - --brand-secondary-low: 187 208 154; - --brand-secondary-medium-low: 149 180 103; - --brand-secondary-medium: 119 152 74; - --brand-secondary-medium-high: 93 120 56; - --brand-secondary-high: 72 93 46; - --brand-secondary-higher: 52 65 38; - --brand-secondary-highest: 26 34 17; + --color-neutral-50: var(--color-gray-50); + --color-neutral-100: var(--color-gray-100); + --color-neutral-200: var(--color-gray-200); + --color-neutral-300: var(--color-gray-300); + --color-neutral-400: var(--color-gray-400); + --color-neutral-500: var(--color-gray-500); + --color-neutral-600: var(--color-gray-600); + --color-neutral-700: var(--color-gray-700); + --color-neutral-800: var(--color-gray-800); + --color-neutral-900: var(--color-gray-900); + --color-neutral-950: var(--color-gray-950); + + --color-primary: var(--color-asparagus-500); + --color-primary-50: var(--color-asparagus-50); + --color-primary-100: var(--color-asparagus-100); + --color-primary-200: var(--color-asparagus-200); + --color-primary-300: var(--color-asparagus-300); + --color-primary-400: var(--color-asparagus-400); + --color-primary-500: var(--color-asparagus-500); + --color-primary-600: var(--color-asparagus-600); + --color-primary-700: var(--color-asparagus-700); + --color-primary-800: var(--color-asparagus-800); + --color-primary-900: var(--color-asparagus-900); + --color-primary-950: var(--color-asparagus-950); + + --color-secondary: var(--color-wedgewood-500); + --color-secondary-50: var(--color-wedgewood-50); + --color-secondary-100: var(--color-wedgewood-100); + --color-secondary-200: var(--color-wedgewood-200); + --color-secondary-300: var(--color-wedgewood-300); + --color-secondary-400: var(--color-wedgewood-400); + --color-secondary-500: var(--color-wedgewood-500); + --color-secondary-600: var(--color-wedgewood-600); + --color-secondary-700: var(--color-wedgewood-700); + --color-secondary-800: var(--color-wedgewood-800); + --color-secondary-900: var(--color-wedgewood-900); + --color-secondary-950: var(--color-wedgewood-950); + --bg-gradient: linear-gradient( 180deg, - rgb(var(--brand-primary-medium)) 0%, - rgb(var(--brand-primary-medium)) 5%, - rgb(var(--brand-primary-low)) 30%, - rgb(var(--brand-primary-lower)) 50%, - rgb(var(--brand-secondary-lower)) 51%, - rgb(var(--brand-secondary-low)) 65%, - rgb(var(--brand-secondary-medium)) 98%, - rgb(var(--brand-secondary-medium)) 100% + var(--color-secondary-400) 0%, + var(--color-secondary-400) 5%, + var(--color-secondary-300) 30%, + color-mix(in srgb, var(--color-secondary-300) 70%, var(--color-primary-300) 30%) 50%, + var(--color-primary-300) 65%, + var(--color-primary-400) 98%, + var(--color-primary-400) 100% ); - --background: rgb(var(--brand-primary-medium)); - --text: rgb(var(--neutral-highest)); - --text-2: rgba(var(--neutral-highest), 0.8); + --background: var(--color-secondary-400); + --text: var(--color-neutral-950); + --text-2: color-mix(in srgb, var(--color-neutral-950) 80%, transparent); --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", sans-serif; --font-italic: "Georgia", serif;