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 {
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);
}

2
src/css/footer.css
View file

@ -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;
}

2
src/css/header.css
View file

@ -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;

5
src/css/main.css
View file

@ -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 {

86
src/css/variables.css
View file

@ -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;