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

Use the new variables in page style

Browse source
This commit is contained in:
TheThomaas 2024-02-06 23:18:15 +01:00
parent d17cf1c165
commit 90bcf4aac0
2 changed files with 43 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/scss/components/_variables.scss
View file

@ -1,16 +1,14 @@
:root { :root {
--light-1: #efefef; --light-1: rgb(var(--shark-100));
--dark-1: #1e1e1e; --dark-1: rgb(var(--shark-950));
--dark-2: #0f0f0f; --dark-2: rgb(var(--shark-950) / .95);
--primary-hsl: 45, 35%, 63%; --primary: rgb(var(--sand-400));
--primary: hsl(var(--primary-hsl)); --primary-light: rgb(var(--sand-300));
--primary-light: hsl(45, 36%, 73%); --primary-dark: rgb(var(--sand-500));
--primary-dark: hsl(46, 20%, 66%); --secondary: rgb(var(--forest-300));
--secondary-hsl: 91, 36%, 71%; --secondary-light: rgb(var(--forest-200));
--secondary: hsl(var(--secondary-hsl)); --secondary-dark: rgb(var(--forest-400));
--secondary-light: hsl(91, 37%, 76%);
--secondary-dark: hsl(90, 17%, 62%);
--background: var(--primary-light); --background: var(--primary-light);
--text: var(--dark-1); --text: var(--dark-1);

41
src/scss/critical.scss
View file

@ -1,3 +1,4 @@
@use './components/colors';
@use './components/variables'; @use './components/variables';
@use './components/reset'; @use './components/reset';
@use './components/superminimal'; @use './components/superminimal';
@ -15,10 +16,11 @@ html {
} }
} }
body { body {
--start: var(--primary-light); /* --start: var(--primary-light);
--end: var(--secondary); --end: var(--secondary);*/
background: var(--start); background: rgb(var(--sand-400));
background: linear-gradient(180deg, var(--start) 0%, var(--start) 35%, var(--end) 100%); /*background: linear-gradient(180deg, var(--start) 0%, var(--start) 35%, var(--end) 100%); */
background: linear-gradient(180deg, rgb(var(--sand-400)) 0%, rgb(var(--sand-400)) 3%, rgb(var(--sand-300)) 20%, rgb(var(--sand-200)) 35%, rgb(var(--forest-200)) 60%, rgb(var(--forest-300)) 75%, rgb(var(--forest-400)) 98%, rgb(var(--forest-400)) 100%);
header, footer { header, footer {
padding: .5rem clamp(.2rem, 3vw, 2rem); padding: .5rem clamp(.2rem, 3vw, 2rem);
@ -79,7 +81,8 @@ main {
} }
} }
footer { footer {
background-color: var(--secondary); /* background-color: var(--secondary); */
background-color: rgb(var(--forest-400));
justify-items: center; justify-items: center;
margin-block-start: 1.5rem; margin-block-start: 1.5rem;
@ -252,6 +255,19 @@ i {
--item-color: black; --item-color: black;
} }
} }
&--label {
gap: 1rem;
a {
color: black;
--icon-color: #262626;
text-decoration: underline;
text-underline-offset: .25rem;
text-decoration-color: #262626;
font-weight: 500;
}
}
} }
.timeline { .timeline {
@ -285,13 +301,14 @@ i {
margin-top: -20px; margin-top: -20px;
} }
&:after { &:before {
content: ''; content: '';
position: absolute; position: absolute;
aspect-ratio: 1; aspect-ratio: 1;
inline-size: var(--size); inline-size: var(--size);
background-color: var(--light-1); background-color: var(--light-1);
border: 6px solid var(--secondary-dark); border: 6px solid rgb(var(--forest-500));
/* border: 6px solid var(--secondary-dark); */
inset-inline-start: 0; inset-inline-start: 0;
// inset-inline-start: .9rem; // inset-inline-start: .9rem;
inset-block-end: 50%; inset-block-end: 50%;
@ -300,6 +317,13 @@ i {
// inset-block-start: 1.5rem; // inset-block-start: 1.5rem;
border-radius: 50%; border-radius: 50%;
z-index: 1; z-index: 1;
transition: all .2s ease-in-out;
}
&:hover {
&:before {
border-color: rgb(var(--forest-600));
}
} }
} }
} }
@ -318,7 +342,8 @@ i {
} }
.btn { .btn {
color: var(--secondary-light); color: rgb(var(--forest-200));
/* color: var(--secondary-light); */
} }
p { p {