Kopfzeile (Logo, Navigation, Buttons) etwas größer
Logo, Markenname, Hauptnavigation, Sprachumschalter, Konto-/Warenkorb- Icons sowie die zweite Kategorien-Leiste darunter sind jetzt insgesamt etwas größer/luftiger (Schriftgrößen, Icon-Maße, Innenabstände moderat erhöht) — wie gewünscht "bissl größer" statt eines kompletten Redesigns. Dabei einen kleinen, durch die Vergrößerung ausgelösten Folgefehler gleich mitbehoben: auf schmalen Handy-Breiten (<480px) hätte der neue, größere Header nicht mehr komplett reingepasst und den Menü-Button (☰) rechts aus dem sichtbaren Bereich geschoben, unerreichbar für Klicks. Neue Media Query verkleinert dort gezielt Logo/Markentext und blendet den Sprachumschalter-Text (bleibt nur der Globus) sowie den Pfeil aus — geprüft: kein horizontales Überlaufen mehr bei 420px, 700px und Desktop-Breite. Co-Authored-By: Claude Sonnet 5 <[email protected]>
This commit is contained in:
qcigano
co-authored by
Claude Sonnet 5
Claude Sonnet 5
parent
3e2be5a420
commit
2d2ade1aa8
+22
-11
@@ -58,7 +58,7 @@ const p = (href: string) => `${localePrefix(lang)}${href}`;
|
||||
<header class="site-header">
|
||||
<div class="container header-inner">
|
||||
<a href={p("/")} class="brand">
|
||||
<img src="/logo.png" alt="Van's DIY & Bastelbedarf Logo" width="42" height="42" />
|
||||
<img src="/logo.png" alt="Van's DIY & Bastelbedarf Logo" width="48" height="48" />
|
||||
<span>Van's DIY & Bastelbedarf</span>
|
||||
</a>
|
||||
|
||||
@@ -74,7 +74,7 @@ const p = (href: string) => `${localePrefix(lang)}${href}`;
|
||||
<LanguageSwitcher lang={lang} path={path} legalOnly={legalOnly} />
|
||||
<a href={p("/konto/")} class="account-btn">
|
||||
<span class="account-icon" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor"><path d="M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5Zm0 2c-4.4 0-9 2.2-9 5v2h18v-2c0-2.8-4.6-5-9-5Z"/></svg>
|
||||
<svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5Zm0 2c-4.4 0-9 2.2-9 5v2h18v-2c0-2.8-4.6-5-9-5Z"/></svg>
|
||||
</span>
|
||||
<span class="account-label">{t.nav.login}</span>
|
||||
</a>
|
||||
@@ -176,8 +176,8 @@ const p = (href: string) => `${localePrefix(lang)}${href}`;
|
||||
background: linear-gradient(90deg, var(--c-purple), var(--c-purple-deep));
|
||||
color: var(--c-text);
|
||||
text-align: center;
|
||||
font-size: 0.82rem;
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 0.9rem;
|
||||
padding: 0.6rem 1rem;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
@@ -194,7 +194,7 @@ const p = (href: string) => `${localePrefix(lang)}${href}`;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
padding-block: 0.8rem;
|
||||
padding-block: 1rem;
|
||||
}
|
||||
.brand {
|
||||
display: flex;
|
||||
@@ -202,20 +202,20 @@ const p = (href: string) => `${localePrefix(lang)}${href}`;
|
||||
gap: 0.6rem;
|
||||
font-family: var(--font-head);
|
||||
font-weight: 600;
|
||||
font-size: 1.05rem;
|
||||
font-size: 1.18rem;
|
||||
}
|
||||
.brand img { border-radius: 50%; }
|
||||
|
||||
.main-nav { display: flex; gap: 1.6rem; }
|
||||
.main-nav { display: flex; gap: 1.7rem; }
|
||||
.main-nav a {
|
||||
font-size: 0.92rem;
|
||||
font-size: 1.02rem;
|
||||
color: var(--c-text-muted);
|
||||
transition: color 0.2s var(--ease);
|
||||
}
|
||||
.main-nav a:hover { color: var(--c-accent); }
|
||||
|
||||
.header-actions { display: flex; align-items: center; gap: 0.8rem; }
|
||||
.icon-link { font-size: 1.1rem; position: relative; display: inline-flex; align-items: center; gap: 0.3rem; }
|
||||
.icon-link { font-size: 1.25rem; position: relative; display: inline-flex; align-items: center; gap: 0.3rem; }
|
||||
.cart-count {
|
||||
background: var(--c-accent);
|
||||
color: #08181c;
|
||||
@@ -256,6 +256,17 @@ const p = (href: string) => `${localePrefix(lang)}${href}`;
|
||||
.main-nav { display: none; }
|
||||
.hamburger { display: inline-block; }
|
||||
}
|
||||
/* Auf schmalen Screens (Handy) reicht der Platz nicht mehr für Logo+Markenname+
|
||||
Sprachumschalter-Text+Konto-Icon+Warenkorb+Menü-Button nebeneinander in voller Größe —
|
||||
ohne diese Anpassung würde der Menü-Button (☰) rechts aus dem Bildschirm rausgeschoben
|
||||
und wäre gar nicht mehr anklickbar. Zeigt auf schmalen Screens nur noch die Icons/Kürzel. */
|
||||
@media (max-width: 480px) {
|
||||
.brand img { width: 38px; height: 38px; }
|
||||
.brand span { font-size: 0.98rem; }
|
||||
.lang-switch-btn { padding: 0.35em 0.55em; }
|
||||
.lang-switch-btn .lang-label,
|
||||
.lang-switch-btn .chevron { display: none; }
|
||||
}
|
||||
|
||||
/* Zweite Navigationsleiste: Schnellzugriff auf die 5 Hauptkategorien, direkt unter der
|
||||
Hauptnav — gleicher Designstil (dunkler Anthrazit-Streifen, Akzent-Unterstrich bei Hover). */
|
||||
@@ -267,13 +278,13 @@ const p = (href: string) => `${localePrefix(lang)}${href}`;
|
||||
display: flex;
|
||||
gap: clamp(1.1rem, 3vw, 2rem);
|
||||
overflow-x: auto;
|
||||
padding-block: 0.6rem;
|
||||
padding-block: 0.75rem;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.sub-nav-inner::-webkit-scrollbar { display: none; }
|
||||
.sub-nav-inner a {
|
||||
position: relative;
|
||||
font-size: 0.83rem;
|
||||
font-size: 0.92rem;
|
||||
font-weight: 600;
|
||||
color: var(--c-text-muted);
|
||||
white-space: nowrap;
|
||||
|
||||
+10
-10
@@ -373,8 +373,8 @@ a:focus-visible, button:focus-visible {
|
||||
border: 1px solid color-mix(in srgb, var(--c-purple-glow) 55%, rgba(244, 241, 247, 0.14));
|
||||
color: var(--c-text);
|
||||
border-radius: 999px;
|
||||
padding: 0.4em 0.85em 0.4em 0.5em;
|
||||
font-size: 0.85rem;
|
||||
padding: 0.45em 0.9em 0.45em 0.55em;
|
||||
font-size: 0.92rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
box-shadow:
|
||||
@@ -450,8 +450,8 @@ a:focus-visible, button:focus-visible {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
isolation: isolate;
|
||||
@@ -499,7 +499,7 @@ a:focus-visible, button:focus-visible {
|
||||
.lang-globe-rotor { animation: none; }
|
||||
}
|
||||
.lang-globe svg { position: relative; z-index: 1; opacity: 0.55; filter: drop-shadow(0 0 1px rgba(10, 9, 16, 0.6)); }
|
||||
.lang-switch-btn .lang-globe { width: 21px; height: 21px; }
|
||||
.lang-switch-btn .lang-globe { width: 24px; height: 24px; }
|
||||
.lang-switch-btn:hover .lang-globe,
|
||||
.lang-switch-menu a:hover .lang-globe {
|
||||
box-shadow:
|
||||
@@ -515,12 +515,12 @@ a:focus-visible, button:focus-visible {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5em;
|
||||
padding: 0.5em 1em 0.5em 0.55em;
|
||||
padding: 0.55em 1.1em 0.55em 0.6em;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(135deg, rgba(95, 211, 236, 0.16), rgba(46, 27, 71, 0.4));
|
||||
border: 1px solid rgba(95, 211, 236, 0.3);
|
||||
color: var(--c-text);
|
||||
font-size: 0.85rem;
|
||||
font-size: 0.92rem;
|
||||
font-weight: 600;
|
||||
transition: border-color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
|
||||
}
|
||||
@@ -533,12 +533,12 @@ a:focus-visible, button:focus-visible {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
width: 29px;
|
||||
height: 29px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(155deg, var(--c-accent), var(--c-purple));
|
||||
color: var(--c-black);
|
||||
font-size: 0.8rem;
|
||||
font-size: 0.86rem;
|
||||
}
|
||||
@media (max-width: 860px) {
|
||||
.account-btn .account-label { display: none; }
|
||||
|
||||
Reference in New Issue
Block a user