US 04-05: Dauerhaft sichtbare Kopfzeile für die Navigation vorbereitet
Kopfzeile aus der Produktübersicht ausgelagert und Navigationsstile in einer eigenen CSS-Datei zusammengefasst. Aktuellen Zwischenstand mit angepasstem Logo übernommen.S-V-Navigation
3015418
parent
45f5b8e9b6
commit
5d1272008e
|
|
@ -0,0 +1,100 @@
|
|||
/* Shahnam und Vincent: Gemeinsame Kopfzeile für US 04-05. */
|
||||
:root {
|
||||
--navigation-height: 99px;
|
||||
}
|
||||
|
||||
.site-navigation,
|
||||
.site-navigation * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.site-navigation {
|
||||
/* Bleibt über alle Seitenbereiche hinweg oben sichtbar und behält ihren Platz im Layout. */
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
border-top: 3px solid #4597a3;
|
||||
background: #071419;
|
||||
color: #fff;
|
||||
font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
|
||||
line-height: 1.6;
|
||||
box-shadow: 0 4px 16px rgb(0 0 0 / 16%);
|
||||
}
|
||||
|
||||
.site-navigation .brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
width: min(1680px, calc(100% - clamp(40px, 10vw, 192px)));
|
||||
min-height: calc(var(--navigation-height) - 3px);
|
||||
margin-inline: auto;
|
||||
padding-block: 8px;
|
||||
}
|
||||
|
||||
.site-navigation .brand__logo {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
flex-shrink: 0;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 22px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.site-navigation .brand__logo img {
|
||||
display: block;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.site-navigation .brand__text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.site-navigation .brand__name {
|
||||
color: #8a9093;
|
||||
font-size: 14px;
|
||||
font-weight: 650;
|
||||
line-height: 1.4;
|
||||
letter-spacing: 0.25em;
|
||||
}
|
||||
|
||||
.site-navigation .brand__label {
|
||||
color: #b7bec2;
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
:root {
|
||||
--navigation-height: 81px;
|
||||
}
|
||||
|
||||
.site-navigation .brand {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.site-navigation .brand__logo {
|
||||
width: 66px;
|
||||
height: 62px;
|
||||
border-radius: 17px;
|
||||
}
|
||||
|
||||
.site-navigation .brand__logo img {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
}
|
||||
|
||||
.site-navigation .brand__name {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.site-navigation .brand__label {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
|
@ -27,8 +27,8 @@
|
|||
.produktuebersicht {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
min-height: 100svh;
|
||||
min-height: calc(100vh - var(--navigation-height));
|
||||
min-height: calc(100svh - var(--navigation-height));
|
||||
margin: 0;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
|
@ -43,57 +43,6 @@
|
|||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.produktuebersicht .site-header {
|
||||
border-top: 3px solid var(--accent);
|
||||
}
|
||||
|
||||
.produktuebersicht .brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
min-height: 96px;
|
||||
padding-block: 8px;
|
||||
}
|
||||
|
||||
.produktuebersicht .brand__logo {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
flex-shrink: 0;
|
||||
width: 90px;
|
||||
height: 80px;
|
||||
border-radius: 22px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.produktuebersicht .brand__logo img {
|
||||
display: block;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.produktuebersicht .brand__text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.produktuebersicht .brand__name {
|
||||
color: #8a9093;
|
||||
font-size: 14px;
|
||||
font-weight: 650;
|
||||
line-height: 1.4;
|
||||
letter-spacing: 0.25em;
|
||||
}
|
||||
|
||||
.produktuebersicht .brand__label {
|
||||
color: var(--text-muted);
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.produktuebersicht .produktuebersicht__main {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
|
|
@ -313,30 +262,6 @@
|
|||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.produktuebersicht .brand {
|
||||
min-height: 78px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.produktuebersicht .brand__logo {
|
||||
width: 66px;
|
||||
height: 62px;
|
||||
border-radius: 17px;
|
||||
}
|
||||
|
||||
.produktuebersicht .brand__logo img {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
}
|
||||
|
||||
.produktuebersicht .brand__name {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.produktuebersicht .brand__label {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.produktuebersicht .hero__image {
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
|
|
|
|||
26
index.html
26
index.html
|
|
@ -11,6 +11,7 @@
|
|||
href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=Sora:wght@400;600;700&display=swap"
|
||||
rel="stylesheet">
|
||||
<link rel="stylesheet" href="css/site.css">
|
||||
<link rel="stylesheet" href="css/navigation.css">
|
||||
<link rel="stylesheet" href="css/produktuebersicht.css">
|
||||
<link rel="stylesheet" href="css/leistungen.css">
|
||||
<link rel="stylesheet" href="css/berater.css">
|
||||
|
|
@ -21,21 +22,22 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Shahnam und Vincent: Gemeinsame Navigation außerhalb der einzelnen Bereiche. -->
|
||||
<header class="site-navigation">
|
||||
<div class="brand">
|
||||
<div class="brand__logo">
|
||||
<img src="images/trihub-logo.jpg" alt="Trihub – fit und vital ab 50!" width="500" height="500">
|
||||
</div>
|
||||
<div class="brand__text">
|
||||
<span class="brand__name">TRI-HUB</span>
|
||||
<span class="brand__label">Triathlon als sportliches Zuhause ab 50</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main id="main-content">
|
||||
<!-- Shahnam: Produktübersicht -->
|
||||
<section class="produktuebersicht" id="produktuebersicht" aria-labelledby="hero-title">
|
||||
<header class="site-header">
|
||||
<div class="container brand">
|
||||
<div class="brand__logo">
|
||||
<img src="images/trihub-logo.jpg" alt="Trihub – fit und vital ab 50!" width="1024" height="1024">
|
||||
</div>
|
||||
<div class="brand__text">
|
||||
<span class="brand__name">TRI-HUB</span>
|
||||
<span class="brand__label">Triathlon als sportliches Zuhause ab 50</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="produktuebersicht__main">
|
||||
<div class="hero">
|
||||
<img class="hero__image" src="images/hero-nutrition.png"
|
||||
|
|
|
|||
Loading…
Reference in New Issue