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/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));
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; }