TheThomaas/11ty-resume
1
0
Fork 0
Code Issues 1 Pull requests Packages Projects Releases Wiki Activity

Replace old colors with new variables

Browse source
This commit is contained in:
TheThomaas 2025-05-27 21:42:16 +02:00
parent 2e3a000f30
commit e03cef5ba5
5 changed files with 58 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/css/components/timeline.css
View file

@ -7,7 +7,7 @@
} }
.timeline:before { .timeline:before {
content: ""; content: "";
background-color: rgb(var(--neutral-lower)); background-color: var(--color-neutral-200);
inline-size: 6px; inline-size: 6px;
margin-inline-start: -3px; margin-inline-start: -3px;
position: absolute; position: absolute;
@ -30,8 +30,8 @@
content: ""; content: "";
aspect-ratio: 1; aspect-ratio: 1;
inline-size: var(--size); inline-size: var(--size);
background-color: rgb(var(--neutral-lower)); background-color: var(--color-neutral-200);
border: 6px solid rgb(var(--brand-secondary-medium)); border: 6px solid var(--color-primary-400);
z-index: 1; z-index: 1;
border-radius: 50%; border-radius: 50%;
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
@ -41,5 +41,5 @@
transform: translateY(50%); transform: translateY(50%);
} }
.timeline li:hover:before { .timeline li:hover:before {
border-color: rgb(var(--brand-secondary-high)); border-color: var(--color-primary-700);
} }

2
src/css/footer.css
View file

@ -1,5 +1,5 @@
footer { footer {
background-color: rgb(var(--brand-secondary-medium)); background-color: var(--color-primary-400);
justify-items: center; justify-items: center;
margin-block-start: 1.5rem; margin-block-start: 1.5rem;
} }

2
src/css/header.css
View file

@ -1,5 +1,5 @@
header { header {
background-color: rgb(var(--brand-primary-medium)); background-color: var(--color-secondary-400);
z-index: 10; z-index: 10;
position: fixed; position: fixed;
inset-block-start: 0; inset-block-start: 0;

5
src/css/main.css
View file

@ -57,9 +57,12 @@ html {
} }
} }
body { body {
background: rgb(var(--brand-primary-medium)); background: var(--color-secondary-400);
background: var(--bg-gradient); background: var(--bg-gradient);
margin: 0; margin: 0;
position: relative;
z-index: 0;
overflow-x: hidden;
} }
body header, body header,
body footer { body footer {

86
src/css/variables.css
View file

@ -1,45 +1,55 @@
:root { :root {
--neutral-lowest: 255, 255, 255, 0.5; --color-neutral-50: var(--color-gray-50);
--neutral-lower: 231 231 231; --color-neutral-100: var(--color-gray-100);
--neutral-low: 209 209 209; --color-neutral-200: var(--color-gray-200);
--neutral-medium-low: 176 176 176; --color-neutral-300: var(--color-gray-300);
--neutral-medium: 136 136 136; --color-neutral-400: var(--color-gray-400);
--neutral-medium-high: 109 109 109; --color-neutral-500: var(--color-gray-500);
--neutral-high: 93 93 93; --color-neutral-600: var(--color-gray-600);
--neutral-higher: 79 79 79; --color-neutral-700: var(--color-gray-700);
--neutral-highest: 9, 9, 11; --color-neutral-800: var(--color-gray-800);
--brand-primary-lowest: 249 248 243; --color-neutral-900: var(--color-gray-900);
--brand-primary-lower: 242 239 226; --color-neutral-950: var(--color-gray-950);
--brand-primary-low: 210 199 159;
--brand-primary-medium-low: 194 176 128; --color-primary: var(--color-asparagus-500);
--brand-primary-medium: 177 151 94; --color-primary-50: var(--color-asparagus-50);
--brand-primary-medium-high: 164 133 82; --color-primary-100: var(--color-asparagus-100);
--brand-primary-high: 136 107 70; --color-primary-200: var(--color-asparagus-200);
--brand-primary-higher: 90 72 52; --color-primary-300: var(--color-asparagus-300);
--brand-primary-highest: 48 37 26; --color-primary-400: var(--color-asparagus-400);
--brand-secondary-lowest: 244 247 238; --color-primary-500: var(--color-asparagus-500);
--brand-secondary-lower: 231 238 217; --color-primary-600: var(--color-asparagus-600);
--brand-secondary-low: 187 208 154; --color-primary-700: var(--color-asparagus-700);
--brand-secondary-medium-low: 149 180 103; --color-primary-800: var(--color-asparagus-800);
--brand-secondary-medium: 119 152 74; --color-primary-900: var(--color-asparagus-900);
--brand-secondary-medium-high: 93 120 56; --color-primary-950: var(--color-asparagus-950);
--brand-secondary-high: 72 93 46;
--brand-secondary-higher: 52 65 38; --color-secondary: var(--color-wedgewood-500);
--brand-secondary-highest: 26 34 17; --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( --bg-gradient: linear-gradient(
180deg, 180deg,
rgb(var(--brand-primary-medium)) 0%, var(--color-secondary-400) 0%,
rgb(var(--brand-primary-medium)) 5%, var(--color-secondary-400) 5%,
rgb(var(--brand-primary-low)) 30%, var(--color-secondary-300) 30%,
rgb(var(--brand-primary-lower)) 50%, color-mix(in srgb, var(--color-secondary-300) 70%, var(--color-primary-300) 30%) 50%,
rgb(var(--brand-secondary-lower)) 51%, var(--color-primary-300) 65%,
rgb(var(--brand-secondary-low)) 65%, var(--color-primary-400) 98%,
rgb(var(--brand-secondary-medium)) 98%, var(--color-primary-400) 100%
rgb(var(--brand-secondary-medium)) 100%
); );
--background: rgb(var(--brand-primary-medium)); --background: var(--color-secondary-400);
--text: rgb(var(--neutral-highest)); --text: var(--color-neutral-950);
--text-2: rgba(var(--neutral-highest), 0.8); --text-2: color-mix(in srgb, var(--color-neutral-950) 80%, transparent);
--font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
"Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", sans-serif; "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", sans-serif;
--font-italic: "Georgia", serif; --font-italic: "Georgia", serif;