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