From ea5507b51f4359d1f0808ba528ce94ac5c024c0c Mon Sep 17 00:00:00 2001 From: Sascha Date: Mon, 30 Mar 2026 16:02:18 +0200 Subject: [PATCH] feat: update accessibility text and improve color consistency across sections --- src/config/locales/de/landing-experience.ts | 2 +- src/config/locales/en/landing-experience.ts | 4 +-- src/scss/mixins.scss | 16 +++++----- src/scss/sections/about-section.scss | 7 +--- src/scss/sections/certifications-section.scss | 7 +--- src/scss/sections/contact-section.scss | 7 +--- src/scss/sections/experience-section.scss | 7 ++-- src/scss/sections/hero-section.scss | 2 +- src/scss/sections/imprint-page.scss | 8 ++--- src/scss/sections/processes-section.scss | 7 ++-- src/scss/sections/projects-section.scss | 7 +--- src/scss/sections/reasons-section.scss | 7 ++-- src/scss/sections/references-section.scss | 7 ++-- src/scss/sections/services-section.scss | 32 ++++--------------- src/scss/sections/skills-section.scss | 7 +--- src/scss/sections/winnings-section.scss | 7 ++-- src/scss/variables.scss | 13 +++++--- 17 files changed, 51 insertions(+), 96 deletions(-) diff --git a/src/config/locales/de/landing-experience.ts b/src/config/locales/de/landing-experience.ts index b7a35a8..241f13f 100644 --- a/src/config/locales/de/landing-experience.ts +++ b/src/config/locales/de/landing-experience.ts @@ -4,6 +4,6 @@ export const landingExperience = { 'Ich habe Unternehmen wie deins geholfen – von kleinen Läden bis hin zu Dienstleistern – ihre Webseiten barrierefrei zu machen.', 'Bei ORWO habe ich einen Fotobuch-Designer entwickelt, der für tausende Kunden funktionierte, auch für Menschen mit Sehbeeinträchtigungen. Ich habe ihn nicht nur gut aussehen lassen, ich habe ihn für alle zum Laufen gebracht.', 'Diese Sorgfalt bringe ich jetzt zu deiner Webseite, egal ob Bäckerei, Therapeut, Handwerker oder Kiosk.', - 'Barrierefreiheit geht alle was an.', + 'Barrierefreiheit bedeutet Respekt und mehr Reichweite für dich und deine Produkte.', ], }; diff --git a/src/config/locales/en/landing-experience.ts b/src/config/locales/en/landing-experience.ts index e690184..d0c5fd3 100644 --- a/src/config/locales/en/landing-experience.ts +++ b/src/config/locales/en/landing-experience.ts @@ -2,8 +2,8 @@ export const landingExperience = { title: 'My Experience', paragraphs: [ "I've helped businesses like yours — from small shops to service providers — make their websites accessible.", - "At ORWO, I built a photo book designer that worked for thousands of customers, even those with visual impairments. I didn't just make it look good, I made it work for everyone.", + "At ORWO, I built a photo book designer that worked for thousands of customers, even those with visual impairments.", 'Now, I bring that same care to your website, whether you are a bakery, a therapist, a craftsman, or a local shop.', - 'You do not need to be big. You just need to be accessible.', + 'Accessibility means respect and more reach for you and your products.', ], }; diff --git a/src/scss/mixins.scss b/src/scss/mixins.scss index b74e3ef..7ac540b 100644 --- a/src/scss/mixins.scss +++ b/src/scss/mixins.scss @@ -11,7 +11,7 @@ cursor: pointer; transition: all 0.3s ease; border-radius: $border-radius-sm; - + &:focus { outline: none; box-shadow: var(--box-shadow-sm); @@ -21,7 +21,7 @@ // Card hover effect mixin @mixin card-hover { transition: all 0.3s ease; - + &:hover { transform: translateY(-2px); box-shadow: var(--box-shadow-lg); @@ -47,14 +47,14 @@ // Aspect ratio mixin @mixin aspect-ratio($ratio: 1) { aspect-ratio: $ratio; - + @supports not (aspect-ratio: 1) { &::before { content: ''; float: left; padding-top: calc(100% / #{$ratio}); } - + &::after { content: ''; display: table; @@ -65,13 +65,13 @@ // Responsive breakpoint mixins @mixin mobile-only { - @media (max-width: $mobile-breakpoint) { + @media (max-width: $mobile-breakpoint) { @content; } } @mixin desktop-only { - @media (min-width: $desktop-breakpoint) { + @media (min-width: $desktop-breakpoint) { @content; } } @@ -96,7 +96,7 @@ font-size: 1.875rem; font-weight: bold; margin-bottom: 1rem; - color: var(--color-text); + color: $color-heading; @include desktop-only { font-size: 2.25rem; @@ -108,4 +108,4 @@ color: var(--color-text-muted); max-width: 48rem; margin: 0 auto; -} \ No newline at end of file +} diff --git a/src/scss/sections/about-section.scss b/src/scss/sections/about-section.scss index fb3d8d7..6d70279 100644 --- a/src/scss/sections/about-section.scss +++ b/src/scss/sections/about-section.scss @@ -34,11 +34,6 @@ @include section-title; font-size: clamp(2rem, 5vw, 2.75rem); font-weight: 800; - background: var(--gradient-text); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; - color: transparent; } &__subtitle { @@ -101,7 +96,7 @@ font-size: 1.5rem; font-weight: bold; margin-bottom: 1rem; - color: var(--about-greeting-color); + color: $color-heading; } &__bio-text { diff --git a/src/scss/sections/certifications-section.scss b/src/scss/sections/certifications-section.scss index d825472..09d9c50 100644 --- a/src/scss/sections/certifications-section.scss +++ b/src/scss/sections/certifications-section.scss @@ -34,11 +34,6 @@ @include section-title; font-size: clamp(2rem, 5vw, 2.75rem); font-weight: 800; - background: var(--gradient-text); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; - color: transparent; } &__subtitle { @@ -128,7 +123,7 @@ &__card-title { font-size: 1.125rem; font-weight: 600; - color: var(--color-text); + color: $color-heading; margin-bottom: 0.5rem; line-height: 1.4; } diff --git a/src/scss/sections/contact-section.scss b/src/scss/sections/contact-section.scss index e9feaa7..4e82256 100644 --- a/src/scss/sections/contact-section.scss +++ b/src/scss/sections/contact-section.scss @@ -34,11 +34,6 @@ @include section-title; font-size: clamp(2rem, 5vw, 2.75rem); font-weight: 800; - background: var(--gradient-text); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; - color: transparent; } &__subtitle { @@ -100,7 +95,7 @@ &__email-title { font-size: 1.5rem; font-weight: 700; - color: var(--color-text); + color: $color-heading; margin-bottom: 0.75rem; } diff --git a/src/scss/sections/experience-section.scss b/src/scss/sections/experience-section.scss index 49ba1de..fb72c87 100644 --- a/src/scss/sections/experience-section.scss +++ b/src/scss/sections/experience-section.scss @@ -1,3 +1,5 @@ +@use '../variables' as *; + .experience-section { padding-block: var(--space-20); padding-inline: var(--space-4); @@ -38,10 +40,7 @@ font-weight: 800; letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); - background: var(--gradient-text); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; + color: $color-heading; } // ── Body ────────────────────────────────────────────────────── diff --git a/src/scss/sections/hero-section.scss b/src/scss/sections/hero-section.scss index 50c5879..f5f0c2c 100644 --- a/src/scss/sections/hero-section.scss +++ b/src/scss/sections/hero-section.scss @@ -63,7 +63,7 @@ margin: 0; letter-spacing: -0.03em; line-height: 1.1; - @include gradient-text(var(--gradient-text)); + color: $color-heading; } &__description { diff --git a/src/scss/sections/imprint-page.scss b/src/scss/sections/imprint-page.scss index 939b588..69f5153 100644 --- a/src/scss/sections/imprint-page.scss +++ b/src/scss/sections/imprint-page.scss @@ -23,7 +23,7 @@ &__title { font-size: 2.5rem; font-weight: bold; - color: var(--color-text); + color: globals.$color-heading; margin-bottom: 0.5rem; @include globals.desktop-only { @@ -52,7 +52,7 @@ &__section-title { font-size: 1.5rem; font-weight: 600; - color: var(--color-text); + color: globals.$color-heading; margin-bottom: 1.5rem; border-bottom: 2px solid var(--color-primary); padding-bottom: 0.5rem; @@ -69,7 +69,7 @@ &__subsection-title { font-size: 1.25rem; font-weight: 600; - color: var(--color-text); + color: globals.$color-heading; margin-bottom: 1rem; } @@ -120,7 +120,7 @@ &__privacy-subtitle { font-size: 1.375rem; font-weight: 600; - color: var(--color-text); + color: globals.$color-heading; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-color); diff --git a/src/scss/sections/processes-section.scss b/src/scss/sections/processes-section.scss index 3fae85f..e9b4a2c 100644 --- a/src/scss/sections/processes-section.scss +++ b/src/scss/sections/processes-section.scss @@ -1,3 +1,5 @@ +@use '../variables' as *; + .processes-section { padding-block: var(--space-20); padding-inline: var(--space-4); @@ -38,10 +40,7 @@ font-weight: 800; letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); - background: var(--gradient-text); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; + color: $color-heading; } // ── Intro line ──────────────────────────────────────────────── diff --git a/src/scss/sections/projects-section.scss b/src/scss/sections/projects-section.scss index a3ba3c3..68f9203 100644 --- a/src/scss/sections/projects-section.scss +++ b/src/scss/sections/projects-section.scss @@ -34,11 +34,6 @@ @include section-title; font-size: clamp(2rem, 5vw, 2.75rem); font-weight: 800; - background: var(--gradient-text); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; - color: transparent; } &__subtitle { @@ -245,7 +240,7 @@ &__card-title { font-size: 1.125rem; font-weight: 600; - color: var(--color-text); + color: $color-heading; margin-bottom: 0.5rem; line-height: 1.4; } diff --git a/src/scss/sections/reasons-section.scss b/src/scss/sections/reasons-section.scss index 9cebccd..c72d177 100644 --- a/src/scss/sections/reasons-section.scss +++ b/src/scss/sections/reasons-section.scss @@ -1,3 +1,5 @@ +@use '../variables' as *; + .reasons-section { padding-block: var(--space-20); padding-inline: var(--space-4); @@ -38,10 +40,7 @@ font-weight: 800; letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); - background: var(--gradient-text); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; + color: $color-heading; } // ── Intro quote ─────────────────────────────────────────────── diff --git a/src/scss/sections/references-section.scss b/src/scss/sections/references-section.scss index 17d1422..a7e3a6a 100644 --- a/src/scss/sections/references-section.scss +++ b/src/scss/sections/references-section.scss @@ -1,3 +1,5 @@ +@use '../variables' as *; + .references-section { padding-block: var(--space-20); padding-inline: var(--space-4); @@ -38,10 +40,7 @@ font-weight: 800; letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); - background: var(--gradient-text); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; + color: $color-heading; } // ── List ────────────────────────────────────────────────────── diff --git a/src/scss/sections/services-section.scss b/src/scss/sections/services-section.scss index 9901501..41f1778 100644 --- a/src/scss/sections/services-section.scss +++ b/src/scss/sections/services-section.scss @@ -49,11 +49,6 @@ @include section-title; font-size: clamp(2rem, 5vw, 2.75rem); font-weight: 800; - background: var(--gradient-text); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; - color: transparent; } &__subtitle { @@ -348,28 +343,13 @@ font-size: 1.25rem; } - &--primary { - color: var(--service-title-primary); - } - - &--secondary { - color: var(--service-title-secondary); - } - - &--tertiary { - color: var(--service-title-tertiary); - } - - &--quaternary { - color: var(--service-title-quaternary); - } - - &--quinary { - color: var(--service-title-quinary); - } - + &--primary, + &--secondary, + &--tertiary, + &--quaternary, + &--quinary, &--senary { - color: var(--service-title-senary); + color: $color-heading; } } diff --git a/src/scss/sections/skills-section.scss b/src/scss/sections/skills-section.scss index 5ec685e..84155f5 100644 --- a/src/scss/sections/skills-section.scss +++ b/src/scss/sections/skills-section.scss @@ -62,11 +62,6 @@ @include section-title; font-size: clamp(2rem, 5vw, 2.75rem); font-weight: 800; - background: var(--gradient-text); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; - color: transparent; } &__subtitle { @@ -239,7 +234,7 @@ font-size: 1.5rem; font-weight: 700; margin-bottom: 1.5rem; - color: var(--skills-category-title-color); + color: $color-heading; text-align: center; position: relative; z-index: 2; diff --git a/src/scss/sections/winnings-section.scss b/src/scss/sections/winnings-section.scss index e29be79..7d931ea 100644 --- a/src/scss/sections/winnings-section.scss +++ b/src/scss/sections/winnings-section.scss @@ -1,3 +1,5 @@ +@use '../variables' as *; + .winnings-section { padding-block: var(--space-20); padding-inline: var(--space-4); @@ -38,10 +40,7 @@ font-weight: 800; letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); - background: var(--gradient-text); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; + color: $color-heading; } // ── Intro line ──────────────────────────────────────────────── diff --git a/src/scss/variables.scss b/src/scss/variables.scss index dca2df8..70a43f1 100644 --- a/src/scss/variables.scss +++ b/src/scss/variables.scss @@ -5,6 +5,7 @@ $desktop-breakpoint: 769px; // Color variables $color-primary: #9333ea; $color-secondary: #2563eb; +$color-heading: #0f4d46; // Shadow variables $shadow-sm: 0 4px 12px; @@ -48,13 +49,17 @@ $transition-fast: all 0.2s ease; $transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); // Common shadow variables -$shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.1), +$shadow-card: + 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); -$shadow-card-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.1), +$shadow-card-hover: + 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); -$shadow-card-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), +$shadow-card-lg: + 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); -$shadow-button: 0 4px 6px -1px rgba(0, 0, 0, 0.1), +$shadow-button: + 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); // Gradient variables