WEBklar/Schmacko-napf
4
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Header: Logo und Menü als schwebende, abgerundete Elemente

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
NotPika69andClaude Opus 5.5 committed 2026-10-01 23:46:54 +02:00
1 parent cc8bb004ff
commit 5754a5b2a6
1 file changed
+31 -17
Download Patch File Download Diff File Expand all files Collapse all files
assets/site.css
+31 -17
View File
@@ -33,36 +33,49 @@ h1, h2, h3 { font-weight: 400; line-height: 1.05; letter-spacing: -.025em; margi
p { margin: 0; }
svg { flex: none; }
/* ===== Header ===== */
/* ===== Header: Logo und Menü als zwei schwebende Elemente ===== */
.site-header {
position: sticky; top: 0; z-index: 50;
background: color-mix(in srgb, var(--bg) 90%, transparent);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
pointer-events: none; /* Fläche zwischen Logo und Menü bleibt klickbar */
}
.header-inner {
display: flex; align-items: center; gap: 24px;
height: 88px;
padding: 0 var(--pad);
}
.brand { display: inline-flex; align-items: center; }
.brand img { width: 84px; height: 84px; transition: transform .5s var(--ease); }
.brand, .nav, .burger {
pointer-events: auto;
background: color-mix(in srgb, var(--bg) 90%, transparent);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
box-shadow: 0 10px 30px rgba(25, 66, 66, .12);
}
.brand {
width: 72px; height: 72px;
border-radius: 50%;
display: grid; place-items: center;
}
.brand img { width: 68px; height: 68px; transition: transform .5s var(--ease); }
.brand:hover img { transform: rotate(-6deg); }
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav {
display: flex; gap: 4px;
margin-left: auto;
padding: 8px;
border-radius: var(--radius);
}
.nav a {
padding: 10px 16px;
border-radius: 999px;
padding: 12px 20px;
border-radius: 14px;
font-size: 1.05rem;
transition: background .25s var(--ease);
}
.nav a:hover, .nav a[aria-current="page"] { background: var(--sage-soft); }
.burger {
display: none;
width: 52px; height: 52px;
width: 60px; height: 60px;
margin-left: auto;
border: 1px solid var(--line);
border: 0;
border-radius: 50%;
background: transparent;
color: var(--ink);
cursor: pointer;
place-items: center;
@@ -72,7 +85,7 @@ svg { flex: none; }
/* Startseite: Header erst nach dem Hero einblenden */
.is-home .site-header {
position: fixed; left: 0; right: 0;
transform: translateY(-100%);
transform: translateY(-120%);
transition: transform .45s var(--ease);
}
.is-home.scrolled .site-header, .is-home.menu-open .site-header { transform: none; }
@@ -454,10 +467,9 @@ a.panel:hover .panel-arrow svg { transform: rotate(-45deg); }
.burger { display: grid; }
.menu-open .nav {
display: flex; flex-direction: column; gap: 4px;
position: fixed; top: 88px; left: 0; right: 0;
padding: 16px var(--pad) 28px;
position: fixed; top: 88px; left: var(--pad); right: var(--pad);
padding: 10px;
background: var(--bg);
box-shadow: 0 24px 40px rgba(25, 66, 66, .12);
}
.menu-open .nav a { padding: 16px 18px; font-size: 1.35rem; }
.row, .row--3, .row--wide, .row--wide-r { grid-template-columns: 1fr; }
@@ -470,7 +482,9 @@ a.panel:hover .panel-arrow svg { transform: rotate(-45deg); }
@media (max-width: 767px) {
body { font-size: 18px; }
.header-inner { height: 76px; }
.brand img { width: 70px; height: 70px; }
.brand { width: 62px; height: 62px; }
.brand img { width: 58px; height: 58px; }
.burger { width: 54px; height: 54px; }
.menu-open .nav { top: 76px; }
.hero { height: auto; min-height: 0; display: block; padding: 0 16px 16px; }
.tiles { grid-template-columns: 1fr; grid-template-rows: none; gap: 12px; }