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

Replace previous variables style

Browse source
This commit is contained in:
TheThomaas 2024-02-10 10:55:02 +01:00
parent 67a872f281
commit 8f7cdaa37e
4 changed files with 16 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/scss/components/_button.scss
View file

@ -1,6 +1,6 @@
.btn {
--hover: var(--dark-2);
--active: var(--dark-2);
--hover: rgba(var(--neutral-highest), .8);
--active: rgba(var(--neutral-highest), .8);
text-decoration: none;
transition: background-color .1s ease-in-out;
display: inline-flex;

2
src/scss/components/_header.scss
View file

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

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

@ -1,20 +1,9 @@
:root {
--light-1: rgb(var(--neutral-lower));
--dark-1: rgb(var(--neutral-highest));
--dark-2: rgba(var(--neutral-highest), .8);
--primary: rgb(var(--brand-primary-medium));
--primary-light: rgb(var(--brand-primary-low));
--primary-dark: rgb(var(--brand-primary-medium));
--secondary: rgb(var(--brand-secondary-low));
--secondary-light: rgb(var(--brand-secondary-lower));
--secondary-dark: rgb(var(--brand-secondary-medium));
--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%);
--background: var(--primary-light);
--text: var(--dark-1);
--text-2: var(--dark-2);
--background: rgb(var(--brand-primary-low));
--text: rgb(var(--neutral-highest));
--text-2: rgba(var(--neutral-highest), .8);
--font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", sans-serif;
--font-italic: "Georgia", serif;

23
src/scss/critical.scss
View file

@ -48,7 +48,6 @@ main {
}
}
footer {
/* background-color: var(--secondary); */
background-color: rgb(var(--brand-secondary-medium));
justify-items: center;
margin-block-start: 1.5rem;
@ -77,7 +76,7 @@ footer {
i {
vertical-align: text-top;
fill: var(--fill-color, var(--primary-light));
fill: var(--fill-color, rgb(var(--brand-primary-low)));
display: inline-block;
svg {
@ -196,7 +195,7 @@ i {
inline-size: clamp(200px, 100%, 400px);
aspect-ratio: 1;
border-radius: 100%;
border: 4px solid var(--primary-dark)
border: 4px solid rgb(var(--brand-primary-medium))
}
@ -218,22 +217,21 @@ i {
margin-block-start: 1rem;
gap: .2rem;
a {
&:hover {
--item-color: black;
}
}
&--label {
gap: 1rem;
a {
color: black;
--item-color: black;
--icon-color: #262626;
text-decoration: underline;
text-underline-offset: .25rem;
text-decoration-color: #262626;
font-weight: 500;
&:hover {
--item-color: var(--text-2);
--icon-color: var(--text-2);
}
}
}
}
@ -249,7 +247,7 @@ i {
content: '';
position: absolute;
inline-size: 6px;
background-color: var(--light-1);
background-color: rgb(var(--neutral-lower));
inset: 1.5rem 0 0 1.5rem;
margin-inline-start: -3px;
}
@ -274,9 +272,8 @@ i {
position: absolute;
aspect-ratio: 1;
inline-size: var(--size);
background-color: var(--light-1);
background-color: rgb(var(--neutral-lower));
border: 6px solid rgb(var(--brand-secondary-medium));
/* border: 6px solid var(--secondary-dark); */
inset-inline-start: 0;
// inset-inline-start: .9rem;
inset-block-end: 50%;