diff --git a/css/navigation.css b/css/navigation.css index 5d4d585..3e078a6 100644 --- a/css/navigation.css +++ b/css/navigation.css @@ -13,6 +13,7 @@ --accent-soft: rgba(69, 151, 163, 0.14); --text-primary: #ffffff; --text-muted: #7e858a; + --text-muted2: #b7bec2; --font-display: "Sora", "Inter", system-ui, sans-serif; --font-body: "Inter", system-ui, sans-serif; @@ -35,7 +36,14 @@ line-height: 1.6; box-shadow: 0 4px 16px rgb(0 0 0 / 16%); } - +.site-navigation__bar { + display: flex; + align-items: center; + justify-content: space-between; + gap: 24px; + width: min(1680px, calc(100% - clamp(40px, 10vw, 192px))); + margin-inline: auto; +} .site-navigation .brand { display: flex; align-items: center; @@ -46,6 +54,35 @@ padding-block: 8px; } +.site-navigation__links ul { + display: flex; + align-items: center; + gap: clamp(16px, 2.5vw, 32px); + margin: 0; + padding: 0; + list-style: none; +} + +.site-navigation__links a { + color: var(--text-muted); + font-size: 15px; + font-weight: 600; + text-decoration: none; + transition: color 0.15s ease; +} + +.site-navigation__links a:hover, +.site-navigation__links a:focus-visible { + color: var(--text-primary); +} + +.site-navigation__links a:focus-visible { + outline: 2px solid var(--accent); + outline-offset: 4px; + border-radius: 4px; +} + + .site-navigation .brand__logo { display: grid; place-items: center; @@ -79,7 +116,7 @@ } .site-navigation .brand__label { - color: #b7bec2; + color: var(--text-muted2); font-size: 17px; font-weight: 600; line-height: 1.4; diff --git a/index.html b/index.html index 64404c0..6a4b692 100644 --- a/index.html +++ b/index.html @@ -24,14 +24,25 @@
-
- -
- TRI-HUB - Triathlon als sportliches Zuhause ab 50 +
+
+ +
+ TRI-HUB + Triathlon als sportliches Zuhause ab 50 +
+