mathias/hurler-webdesign-saas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

working with herosection

Browse Source
This commit is contained in:
Mathias Hurler
2026-02-26 17:04:06 +01:00
parent 8cbefe7078
commit 5622fc211f
5 changed files with 29 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/images/backgroundpattern.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 194 KiB

2
src/app/features/landing/components/hero/hero.component.html
View File

@@ -1,6 +1,6 @@
<section class="hero-section"> <section class="hero-section">
<h1 class="hero-section__header"> <h1 class="hero-section__header">
<span>Digitales Handwerk</span> <span>Digitales Handwerk</span> <br />
<span>statt Standard-Baukasten</span> <span>statt Standard-Baukasten</span>
</h1> </h1>
<p class="hero-section__claim"> <p class="hero-section__claim">

8
src/app/features/landing/components/navigation/navigation.component.scss
View File

@@ -1,13 +1,11 @@
@use "abstracts"; @use "abstracts";
.header { .header {
max-width: 1200px;
margin: 0 auto;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
min-height: abstracts.rem(60); min-height: abstracts.rem(60);
border-radius: 0 0 10px 10px;
background-color: var(--nav-bg);
backdrop-filter: var(--nav-backdrop);
box-shadow: var(--nav-shadow);
position: sticky; position: sticky;
top: 0; top: 0;
@@ -59,7 +57,7 @@
} }
.burger-menu { .burger-menu {
padding-right: var(--space-4); padding: 0 var(--space-4) 0 var(--space-4);
cursor: pointer; cursor: pointer;
@include abstracts.breakpoint("md") { @include abstracts.breakpoint("md") {

17
src/styles/base/_tokens.scss
View File

@@ -15,7 +15,7 @@
:root { :root {
// Farben // Farben
--brand-vue: 250; --brand-vue: 250;
--bg-surface: oklch(88% 0.01 250); --bg-surface: oklch(100% 0.01 250);
--bg-muted: oklch(99% 0.02 250); --bg-muted: oklch(99% 0.02 250);
--text-main: oklch(20% 0.01 250); --text-main: oklch(20% 0.01 250);
--text-muted: oklch(45% 0.02 250); --text-muted: oklch(45% 0.02 250);
@@ -67,11 +67,12 @@
--nav-backdrop: blur(10px); --nav-backdrop: blur(10px);
--nav-bg: oklch(100% 0.00011 271.152 / 0.05); --nav-bg: oklch(100% 0.00011 271.152 / 0.05);
--nav-height: abstracts.rem(60); --nav-height: abstracts.rem(60);
}
// Dark Mode Overrides
[data-theme="dark"] { [data-theme="dark"] {
// Navigation --text-on-accent: var(--color-white);
--nav-shadow: 1px 2px 10px oklch(0% 0 250 / 0.5);
--nav-bg: oklch(20% 0.02 250 / 0.8); // Navigation
} --nav-shadow: 1px 2px 10px oklch(0% 0 250 / 0.5);
--nav-bg: oklch(20% 0.02 250 / 0.8);
} }

18
src/styles/layout/_grid.scss
View File

@@ -12,6 +12,10 @@
.grid-area-navigation { .grid-area-navigation {
grid-area: navigation; grid-area: navigation;
border-radius: 0 0 10px 10px;
background-color: var(--nav-bg);
backdrop-filter: var(--nav-backdrop);
box-shadow: var(--nav-shadow);
position: sticky; position: sticky;
top: 0; top: 0;
z-index: var(--z-index-sticky); z-index: var(--z-index-sticky);
@@ -19,10 +23,22 @@
.grid-area-hero { .grid-area-hero {
grid-area: hero; grid-area: hero;
margin-top: -60px;
padding-top: 60px;
height: 100vh; height: 100vh;
display: flex; display: flex;
justify-content: center; justify-content: center;
background:
linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 1)),
linear-gradient(0.25turn, oklch(56.347% 0.24089 260.834 / 0.8), oklch(55.088% 0.23462 260.772 / 0.8), oklch(56.347% 0.24089 260.834 / 0.8)),
url("/images/backgroundpattern.webp") center / cover no-repeat;
}
[data-theme="dark"] .grid-area-hero {
background:
linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)),
linear-gradient(0.25turn, oklch(20.648% 0.14311 250 / 0.5), oklch(27.99% 0.10701 258.719 / 0.5), oklch(20.648% 0.14311 250 / 0.5)),
url("/images/backgroundpattern.webp") center / cover no-repeat;
} }
.grid-area-features { .grid-area-features {