From 2bdcb5303e261a77342d0f596516d7cc01f9facb Mon Sep 17 00:00:00 2001 From: Sascha Date: Thu, 30 Jul 2026 18:42:49 +0200 Subject: [PATCH] style: update color variables and improve hover effects across components --- src/scss/App.scss | 3 ++- src/scss/components/back-to-top.scss | 2 +- src/scss/globals.scss | 3 ++- src/scss/layout/footer.scss | 24 ++++++++++++++++------ src/scss/sections/contact-section.scss | 23 ++++++++++++--------- src/scss/sections/hero-section.scss | 27 +++++++++++++++++++++---- src/scss/sections/imprint-page.scss | 4 ++-- src/scss/sections/projects-section.scss | 11 ---------- src/scss/themes/_about.scss | 4 ++-- src/scss/themes/_certifications.scss | 2 +- src/scss/themes/_projects.scss | 2 +- src/scss/themes/_services.scss | 12 +++++------ 12 files changed, 71 insertions(+), 46 deletions(-) diff --git a/src/scss/App.scss b/src/scss/App.scss index 7838b8c..e72ee30 100644 --- a/src/scss/App.scss +++ b/src/scss/App.scss @@ -137,6 +137,7 @@ // Core colors --color-primary: #e6f1fb; --color-secondary: #b5d4f4; + --color-primary-hover: var(--color-accent-deco); --color-accent-text: #fac775; --color-accent-deco: #ef9f27; --color-background: #021829; @@ -145,7 +146,7 @@ --color-text-muted: #b5d4f4; --color-text-on-dark: #e6f1fb; --color-border: rgba(230, 241, 251, 0.12); - --color-focus-ring: #ef9f27; + --color-focus-ring: var(--color-primary); // Section backgrounds --hero-background: #021829; diff --git a/src/scss/components/back-to-top.scss b/src/scss/components/back-to-top.scss index ebdbaab..37a5693 100644 --- a/src/scss/components/back-to-top.scss +++ b/src/scss/components/back-to-top.scss @@ -9,7 +9,7 @@ height: 3rem; border-radius: 50%; background: var(--color-primary); - color: var(--color-text-on-dark); // #E6F1FB – white on dark navy + color: var(--color-background); border: none; cursor: pointer; display: flex; diff --git a/src/scss/globals.scss b/src/scss/globals.scss index ec8d5b0..13a8ad9 100644 --- a/src/scss/globals.scss +++ b/src/scss/globals.scss @@ -7,6 +7,7 @@ :root { --color-primary: #042c53; --color-secondary: #0c447c; + --color-primary-hover: var(--color-secondary); --color-accent-text: #412402; --color-accent-deco: #ef9f27; --color-text-on-dark: #e6f1fb; @@ -48,7 +49,7 @@ clip: auto !important; white-space: normal !important; background-color: var(--color-primary) !important; - color: var(--color-text-aaa-dark) !important; + color: var(--color-background) !important; border: 2px solid var(--color-focus-ring) !important; border-radius: 4px !important; text-decoration: none !important; diff --git a/src/scss/layout/footer.scss b/src/scss/layout/footer.scss index 60d5c20..9f83791 100644 --- a/src/scss/layout/footer.scss +++ b/src/scss/layout/footer.scss @@ -39,14 +39,14 @@ &__link { color: var(--color-text); font-size: 0.875rem; - text-decoration: none; + text-decoration: underline; + text-underline-offset: 3px; padding: 0.5rem; border-radius: 0.25rem; transition: all 0.2s ease-in-out; &:hover { - color: var(--color-primary); - text-decoration: underline; + color: var(--color-primary-hover, var(--color-primary)); } &:focus { @@ -83,9 +83,9 @@ text-decoration: none; &:hover { - background-color: var(--color-primary); - color: var(--color-text-on-dark); - border-color: var(--color-primary); + background-color: var(--color-primary-hover, var(--color-primary)); + color: var(--color-background); + border-color: var(--color-primary-hover, var(--color-primary)); transform: translateY(-1px); } @@ -104,3 +104,15 @@ height: 1rem; } } + +[data-theme='dark'] .footer { + &__link:hover { + color: #ef9f27; + } + + &__social-button:hover { + background-color: #ef9f27; + color: #042c53; + border-color: #ef9f27; + } +} diff --git a/src/scss/sections/contact-section.scss b/src/scss/sections/contact-section.scss index 507fb4b..eb9df47 100644 --- a/src/scss/sections/contact-section.scss +++ b/src/scss/sections/contact-section.scss @@ -136,13 +136,12 @@ color: var(--color-primary); font-weight: 500; text-decoration: underline; - text-decoration-color: transparent; text-underline-offset: 3px; - transition: text-decoration-color var(--transition-fast); + transition: color var(--transition-fast); white-space: nowrap; &:hover { - text-decoration-color: var(--color-primary); + color: var(--color-primary-hover, var(--color-primary)); } &:focus { @@ -310,12 +309,11 @@ font-size: 0.875rem; font-weight: 500; text-decoration: underline; - text-decoration-color: transparent; text-underline-offset: 3px; - transition: text-decoration-color var(--transition-fast); + transition: color var(--transition-fast); &:hover { - text-decoration-color: var(--color-primary); + color: var(--color-primary-hover, var(--color-primary)); } &:focus { @@ -619,13 +617,11 @@ } &__button-text { - color: var(--contact-button-text); font-weight: 600; font-size: 1.1rem; } &__button-icon { - color: var(--contact-button-text); width: 1.25rem; height: 1.25rem; } @@ -781,7 +777,7 @@ color: #e6f1fb; &:hover { - text-decoration-color: #e6f1fb; + color: #ef9f27; } } @@ -792,11 +788,18 @@ } &__appointment-icon, - &__appointment-link, &__appointment-text { color: #e6f1fb; } + &__appointment-link { + color: #e6f1fb; + + &:hover { + color: #ef9f27; + } + } + // Email icon in header &__email-icon { color: #ef9f27; diff --git a/src/scss/sections/hero-section.scss b/src/scss/sections/hero-section.scss index 9a193cc..16773b9 100644 --- a/src/scss/sections/hero-section.scss +++ b/src/scss/sections/hero-section.scss @@ -130,18 +130,27 @@ &--primary, &--tertiary { - background: var(--color-primary); - color: var(--color-text-on-dark); + background: var(--contact-button-bg); + color: var(--contact-button-text); font-family: var(--font-headline); font-weight: 600; border-radius: 8px; &:hover { - background: var(--color-secondary); + background: var(--contact-button-hover-bg); box-shadow: none; filter: none; transform: translateY(-1px); } + + [data-theme='dark'] & { + background: #ef9f27; + color: #042c53; + + &:hover { + background: #fac775; + } + } } &--secondary { @@ -152,10 +161,20 @@ &:hover { background: var(--color-primary); - color: var(--color-text-on-dark); + color: var(--color-background); transform: translateY(-1px); box-shadow: none; } + + [data-theme='dark'] & { + color: #ef9f27; + border-color: #ef9f27; + + &:hover { + background: #ef9f27; + color: #042c53; + } + } } } diff --git a/src/scss/sections/imprint-page.scss b/src/scss/sections/imprint-page.scss index 2a22af4..71faf3d 100644 --- a/src/scss/sections/imprint-page.scss +++ b/src/scss/sections/imprint-page.scss @@ -241,13 +241,13 @@ &__external-link { color: var(--color-primary); - text-decoration: none; + text-decoration: underline; + text-underline-offset: 3px; transition: color 0.2s ease; margin-left: 0.5rem; &:hover { color: var(--color-primary-hover); - text-decoration: underline; } } diff --git a/src/scss/sections/projects-section.scss b/src/scss/sections/projects-section.scss index 68f9203..774a5a7 100644 --- a/src/scss/sections/projects-section.scss +++ b/src/scss/sections/projects-section.scss @@ -521,14 +521,3 @@ } } } - -// Focus ring color custom property -:root { - --color-focus-ring: #2563eb; -} - -@media (prefers-color-scheme: dark) { - :root { - --color-focus-ring: #60a5fa; - } -} diff --git a/src/scss/themes/_about.scss b/src/scss/themes/_about.scss index 3aa3f4a..5524092 100644 --- a/src/scss/themes/_about.scss +++ b/src/scss/themes/_about.scss @@ -84,7 +84,7 @@ $about-light-theme: ( feature-card-tertiary-bg: #f1efe8, feature-icon-primary: #042c53, feature-icon-secondary: #0c447c, - feature-icon-tertiary: #ef9f27, + feature-icon-tertiary: #9a5500, feature-title-primary: #042c53, feature-title-secondary: #042c53, @@ -107,7 +107,7 @@ $about-dark-theme: ( skill-badge-tertiary-bg: rgba(230, 241, 251, 0.15), skill-badge-tertiary-text: #e6f1fb, skill-badge-quaternary-bg: rgba(239, 159, 39, 0.15), - skill-badge-quaternary-text: #ef9f27, + skill-badge-quaternary-text: #fac775, // Feature card colors (dark) feature-card-primary-bg: rgba(12, 68, 124, 0.8), diff --git a/src/scss/themes/_certifications.scss b/src/scss/themes/_certifications.scss index 816367c..9949622 100644 --- a/src/scss/themes/_certifications.scss +++ b/src/scss/themes/_certifications.scss @@ -49,7 +49,7 @@ $certifications-light-theme: ( // Certifications section background 'certifications-background': #f1efe8, 'gradient-certifications-title': #042c53, - 'color-certifications-primary': #ef9f27, + 'color-certifications-primary': #9a5500, 'certifications-card-background': #ffffff, 'certifications-card-shadow': $shadow-card-light, diff --git a/src/scss/themes/_projects.scss b/src/scss/themes/_projects.scss index 0186094..d26658a 100644 --- a/src/scss/themes/_projects.scss +++ b/src/scss/themes/_projects.scss @@ -88,7 +88,7 @@ $projects-dark-theme: ( 'projects-button-primary-bg': #ef9f27, 'projects-button-primary-text': #042c53, 'projects-button-primary-border': rgba(239, 159, 39, 0.3), - 'projects-button-primary-hover-bg': #ba7517, + 'projects-button-primary-hover-bg': #d99022, 'projects-button-secondary-bg': rgba(12, 68, 124, 0.8), 'projects-button-secondary-text': #e6f1fb, 'projects-button-secondary-border': rgba(230, 241, 251, 0.3), diff --git a/src/scss/themes/_services.scss b/src/scss/themes/_services.scss index 2f57746..ba690b1 100644 --- a/src/scss/themes/_services.scss +++ b/src/scss/themes/_services.scss @@ -158,12 +158,12 @@ $services-light-theme: ( service-card-quinary-bg: #ffffff, service-card-senary-bg: #f1efe8, - service-icon-primary: #ef9f27, - service-icon-secondary: #ef9f27, - service-icon-tertiary: #ef9f27, - service-icon-quaternary: #ef9f27, - service-icon-quinary: #ef9f27, - service-icon-senary: #ef9f27, + service-icon-primary: #9a5500, + service-icon-secondary: #9a5500, + service-icon-tertiary: #9a5500, + service-icon-quaternary: #9a5500, + service-icon-quinary: #9a5500, + service-icon-senary: #9a5500, service-title-primary: #042c53, service-title-secondary: #042c53,