DogFatherGit/vans-diy-bastelbedarf
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

Kopfzeile (Logo, Navigation, Buttons) etwas größer

Browse Source 
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
2026-08-02 23:54:51 +02:00
co-authored by Claude Sonnet 5
parent 3e2be5a420
commit 2d2ade1aa8
2 changed files with 32 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layouts/Layout.astro
+22 -11
View File
@@ -58,7 +58,7 @@ const p = (href: string) => `${localePrefix(lang)}${href}`;
<header class="site-header"> <header class="site-header">
<div class="container header-inner"> <div class="container header-inner">
<a href={p("/")} class="brand"> <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 &amp; Bastelbedarf</span> <span>Van's DIY &amp; Bastelbedarf</span>
</a> </a>
@@ -74,7 +74,7 @@ const p = (href: string) => `${localePrefix(lang)}${href}`;
<LanguageSwitcher lang={lang} path={path} legalOnly={legalOnly} /> <LanguageSwitcher lang={lang} path={path} legalOnly={legalOnly} />
<a href={p("/konto/")} class="account-btn"> <a href={p("/konto/")} class="account-btn">
<span class="account-icon" aria-hidden="true"> <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>
<span class="account-label">{t.nav.login}</span> <span class="account-label">{t.nav.login}</span>
</a> </a>
@@ -176,8 +176,8 @@ const p = (href: string) => `${localePrefix(lang)}${href}`;
background: linear-gradient(90deg, var(--c-purple), var(--c-purple-deep)); background: linear-gradient(90deg, var(--c-purple), var(--c-purple-deep));
color: var(--c-text); color: var(--c-text);
text-align: center; text-align: center;
font-size: 0.82rem; font-size: 0.9rem;
padding: 0.5rem 1rem; padding: 0.6rem 1rem;
letter-spacing: 0.01em; letter-spacing: 0.01em;
} }
@@ -194,7 +194,7 @@ const p = (href: string) => `${localePrefix(lang)}${href}`;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: 1rem; gap: 1rem;
padding-block: 0.8rem; padding-block: 1rem;
} }
.brand { .brand {
display: flex; display: flex;
@@ -202,20 +202,20 @@ const p = (href: string) => `${localePrefix(lang)}${href}`;
gap: 0.6rem; gap: 0.6rem;
font-family: var(--font-head); font-family: var(--font-head);
font-weight: 600; font-weight: 600;
font-size: 1.05rem; font-size: 1.18rem;
} }
.brand img { border-radius: 50%; } .brand img { border-radius: 50%; }
.main-nav { display: flex; gap: 1.6rem; } .main-nav { display: flex; gap: 1.7rem; }
.main-nav a { .main-nav a {
font-size: 0.92rem; font-size: 1.02rem;
color: var(--c-text-muted); color: var(--c-text-muted);
transition: color 0.2s var(--ease); transition: color 0.2s var(--ease);
} }
.main-nav a:hover { color: var(--c-accent); } .main-nav a:hover { color: var(--c-accent); }
.header-actions { display: flex; align-items: center; gap: 0.8rem; } .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 { .cart-count {
background: var(--c-accent); background: var(--c-accent);
color: #08181c; color: #08181c;
@@ -256,6 +256,17 @@ const p = (href: string) => `${localePrefix(lang)}${href}`;
.main-nav { display: none; } .main-nav { display: none; }
.hamburger { display: inline-block; } .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 /* Zweite Navigationsleiste: Schnellzugriff auf die 5 Hauptkategorien, direkt unter der
Hauptnav — gleicher Designstil (dunkler Anthrazit-Streifen, Akzent-Unterstrich bei Hover). */ Hauptnav — gleicher Designstil (dunkler Anthrazit-Streifen, Akzent-Unterstrich bei Hover). */
@@ -267,13 +278,13 @@ const p = (href: string) => `${localePrefix(lang)}${href}`;
display: flex; display: flex;
gap: clamp(1.1rem, 3vw, 2rem); gap: clamp(1.1rem, 3vw, 2rem);
overflow-x: auto; overflow-x: auto;
padding-block: 0.6rem; padding-block: 0.75rem;
scrollbar-width: none; scrollbar-width: none;
} }
.sub-nav-inner::-webkit-scrollbar { display: none; } .sub-nav-inner::-webkit-scrollbar { display: none; }
.sub-nav-inner a { .sub-nav-inner a {
position: relative; position: relative;
font-size: 0.83rem; font-size: 0.92rem;
font-weight: 600; font-weight: 600;
color: var(--c-text-muted); color: var(--c-text-muted);
white-space: nowrap; white-space: nowrap;
src/styles/global.css
+10 -10
View File
@@ -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)); border: 1px solid color-mix(in srgb, var(--c-purple-glow) 55%, rgba(244, 241, 247, 0.14));
color: var(--c-text); color: var(--c-text);
border-radius: 999px; border-radius: 999px;
padding: 0.4em 0.85em 0.4em 0.5em; padding: 0.45em 0.9em 0.45em 0.55em;
font-size: 0.85rem; font-size: 0.92rem;
font-weight: 600; font-weight: 600;
cursor: pointer; cursor: pointer;
box-shadow: box-shadow:
@@ -450,8 +450,8 @@ a:focus-visible, button:focus-visible {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 23px; width: 26px;
height: 23px; height: 26px;
border-radius: 50%; border-radius: 50%;
overflow: hidden; overflow: hidden;
isolation: isolate; isolation: isolate;
@@ -499,7 +499,7 @@ a:focus-visible, button:focus-visible {
.lang-globe-rotor { animation: none; } .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-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-btn:hover .lang-globe,
.lang-switch-menu a:hover .lang-globe { .lang-switch-menu a:hover .lang-globe {
box-shadow: box-shadow:
@@ -515,12 +515,12 @@ a:focus-visible, button:focus-visible {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5em; gap: 0.5em;
padding: 0.5em 1em 0.5em 0.55em; padding: 0.55em 1.1em 0.55em 0.6em;
border-radius: 999px; border-radius: 999px;
background: linear-gradient(135deg, rgba(95, 211, 236, 0.16), rgba(46, 27, 71, 0.4)); 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); border: 1px solid rgba(95, 211, 236, 0.3);
color: var(--c-text); color: var(--c-text);
font-size: 0.85rem; font-size: 0.92rem;
font-weight: 600; font-weight: 600;
transition: border-color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease); 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; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 26px; width: 29px;
height: 26px; height: 29px;
border-radius: 50%; border-radius: 50%;
background: linear-gradient(155deg, var(--c-accent), var(--c-purple)); background: linear-gradient(155deg, var(--c-accent), var(--c-purple));
color: var(--c-black); color: var(--c-black);
font-size: 0.8rem; font-size: 0.86rem;
} }
@media (max-width: 860px) { @media (max-width: 860px) {
.account-btn .account-label { display: none; } .account-btn .account-label { display: none; }