smacks/flixcooks-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(phase-1): align hamburger button lines & implement typographic + SVG logo

Browse Source
This commit is contained in:
smacks
2026-05-21 13:41:35 +02:00
parent d1cdc98367
commit 5448d3e3c4
2 changed files with 47 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/style.css
+41 -15
View File
@@ -441,6 +441,9 @@ img, picture { display: block; max-width: 100%; height: auto; }
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
transition: background 0.3s ease, border-color 0.3s ease;
padding: 0;
outline: none;
box-sizing: border-box;
}
[data-theme="dark"] .nav-trigger {
background: rgba(26,29,36,0.88);
@@ -455,15 +458,15 @@ img, picture { display: block; max-width: 100%; height: auto; }
}
.nav-burger-lines {
width: 20px;
height: 14px;
width: 22px;
height: 16px;
position: relative;
display: block;
}
.nav-line {
position: absolute;
width: 100%;
height: 1.5px;
height: 2px;
background-color: var(--color-bg-dark);
transition: transform 0.4s var(--ease-fluid-slide),
opacity 0.3s ease,
@@ -472,11 +475,11 @@ img, picture { display: block; max-width: 100%; height: auto; }
[data-theme="dark"] .nav-line { background-color: var(--color-light-gold); }
.nav-trigger.active .nav-line { background-color: var(--color-white); }
.nav-line--top { top: 0; }
.nav-line--mid { top: 6px; }
.nav-line--bot { top: 12px; }
.nav-trigger.active .nav-line--top { transform: translateY(6px) rotate(45deg); }
.nav-line--mid { top: 7px; }
.nav-line--bot { top: 14px; }
.nav-trigger.active .nav-line--top { transform: translateY(7px) rotate(45deg); }
.nav-trigger.active .nav-line--mid { opacity: 0; transform: scaleX(0); }
.nav-trigger.active .nav-line--bot { transform: translateY(-6px) rotate(-45deg); }
.nav-trigger.active .nav-line--bot { transform: translateY(-7px) rotate(-45deg); }
/* Logo header (top-left fixed) */
.nav-logo {
@@ -486,16 +489,37 @@ img, picture { display: block; max-width: 100%; height: auto; }
z-index: 1001;
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
}
.nav-logo img {
height: clamp(48px, 7vw, 80px);
width: auto;
display: block;
transition: opacity 0.3s ease;
.logo-icon {
color: var(--accent);
transition: transform 0.3s var(--ease-fluid-slide);
flex-shrink: 0;
}
.nav-logo:hover .logo-icon {
transform: rotate(-12deg) scale(1.08);
}
.logo-text {
font-family: var(--font-serif-display);
font-size: clamp(1.3rem, 2.4vw, 1.75rem);
font-weight: 700;
color: var(--ink);
letter-spacing: -0.015em;
text-decoration: none;
display: inline-flex;
align-items: baseline;
gap: 0.05em;
transition: transform 0.3s var(--ease-fluid-slide), color 0.3s ease;
}
.logo-text span {
color: var(--accent);
font-style: italic;
font-weight: 400;
}
.nav-logo:hover .logo-text {
transform: translateY(-1px);
}
.nav-logo .logo--dark { display: none; }
[data-theme="dark"] .nav-logo .logo--light { display: none; }
[data-theme="dark"] .nav-logo .logo--dark { display: block; }
/* Overlay */
.nav-overlay {
@@ -553,6 +577,8 @@ img, picture { display: block; max-width: 100%; height: auto; }
margin-top: clamp(2rem, 4vh, 4rem);
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 2rem;
opacity: 0;
transform: translateY(10px);