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);
partials/header.php
+6 -2
View File
@@ -9,8 +9,12 @@ $langParamAmp = isset($lang) && $lang === 'de' ? '&lang=de' : '';
<!-- Fixed Logo (top-left) -->
<a class="nav-logo" href="/index.php<?php echo $langParam; ?>" aria-label="FlixCooks – Home">
<img class="logo--light" src="/assets/logo-black.png" alt="FlixCooks">
<img class="logo--dark" src="/assets/logo-white.png" alt="FlixCooks">
<svg class="logo-icon" viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="currentColor" stroke-width="1.75">
<path d="M2 19h20M5 19a7 7 0 0 1 14 0" stroke-linecap="round"/>
<path d="M12 5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z" fill="currentColor"/>
<path d="M12 5v1M7 19h10" stroke-linecap="round"/>
</svg>
<span class="logo-text">Flix<span>Cooks</span></span>
</a>
<!-- Fixed Hamburger Button (top-right) -->