From 2d2ade1aa8735c11a7e428796a6c4df2ab878226 Mon Sep 17 00:00:00 2001 From: qcigano Date: Sun, 2 Aug 2026 23:54:51 +0200 Subject: [PATCH] =?UTF-8?q?Kopfzeile=20(Logo,=20Navigation,=20Buttons)=20e?= =?UTF-8?q?twas=20gr=C3=B6=C3=9Fer?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- src/layouts/Layout.astro | 33 ++++++++++++++++++++++----------- src/styles/global.css | 20 ++++++++++---------- 2 files changed, 32 insertions(+), 21 deletions(-) diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 3604ef0..b4c3267 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -58,7 +58,7 @@ const p = (href: string) => `${localePrefix(lang)}${href}`;
- Van's DIY & Bastelbedarf Logo + Van's DIY & Bastelbedarf Logo Van's DIY & Bastelbedarf @@ -74,7 +74,7 @@ const p = (href: string) => `${localePrefix(lang)}${href}`; @@ -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; diff --git a/src/styles/global.css b/src/styles/global.css index 9ac6a43..db3f0e4 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -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; }