saschabach
/
portfolio-page
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style: update color variables and improve hover effects across components

This commit is contained in:
Sascha 2026-07-30 18:42:49 +02:00
parent 3565503da4
commit 2bdcb5303e
12 changed files with 71 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/scss/App.scss
View File

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

2
src/scss/components/back-to-top.scss
View File

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

3
src/scss/globals.scss
View File

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

24
src/scss/layout/footer.scss
View File

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

23
src/scss/sections/contact-section.scss
View File

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

27
src/scss/sections/hero-section.scss
View File

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

4
src/scss/sections/imprint-page.scss
View File

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

11
src/scss/sections/projects-section.scss
View File

@ -521,14 +521,3 @@
}
}
}
// Focus ring color custom property
:root {
--color-focus-ring: #2563eb;
}
@media (prefers-color-scheme: dark) {
:root {
--color-focus-ring: #60a5fa;
}
}

4
src/scss/themes/_about.scss
View File

@ -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),

2
src/scss/themes/_certifications.scss
View File

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

2
src/scss/themes/_projects.scss
View File

@ -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),

12
src/scss/themes/_services.scss
View File

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