diff --git a/src/scss/components/_button.scss b/src/scss/components/_button.scss index 7327040..90db779 100644 --- a/src/scss/components/_button.scss +++ b/src/scss/components/_button.scss @@ -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; diff --git a/src/scss/components/_header.scss b/src/scss/components/_header.scss index 0425fc6..1fac353 100644 --- a/src/scss/components/_header.scss +++ b/src/scss/components/_header.scss @@ -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; diff --git a/src/scss/components/_variables.scss b/src/scss/components/_variables.scss index 9b4a83c..cd1bd42 100644 --- a/src/scss/components/_variables.scss +++ b/src/scss/components/_variables.scss @@ -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; diff --git a/src/scss/critical.scss b/src/scss/critical.scss index f27b8fe..d9d8f78 100644 --- a/src/scss/critical.scss +++ b/src/scss/critical.scss @@ -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%;