/******************************************************************************* hero.css – Startseite (index.html): geteilter Bildschirm Links Wanderungen (Foto), rechts Fotogalerie (Foto). Basis: site.css. Aufbau im HTML:

Derflinger.ch

weisse Pille oben mittig
...
linke Hälfte
...
rechte Hälfte
Jede Hälfte (.teil): Foto als Hintergrund, darüber ein Abdunklungs-Verlauf (::before), unten der Textblock (.tx) mit Titel, Text, Link und "Neueste ...". Hintergrundbilder: img/hero-wanderungen.jpg und img/hero-fotogalerie.jpg (je 1200 x 1200 px). Der Pfad beginnt mit "../", weil diese Datei im Ordner css/ liegt. *******************************************************************************/ /* ---------- Abdunklung der Fotos (an einem Ort einstellen) ---------- Das Foto wird von unten nach oben mit Schwarz abgedunkelt, damit die weisse Schrift lesbar bleibt. --*-unten : Deckkraft des Schwarz ganz unten (0 = keine Abdunklung ... 1 = ganz schwarz) --*-oben : Deckkraft des Schwarz am Ende des Verlaufs (und darüber bis zum oberen Rand) --*-bis : Höhe, bei der der Verlauf endet (von unten gemessen, z. B. 60% = bis 60 % der Höhe) */ :root { --wandern-unten: .5; --wandern-oben: .05; --wandern-bis: 50%; --foto-unten: .25; --foto-oben: .05; --foto-bis: 50%; } /* ---------- Schriftfarben (an einem Ort einstellen) ---------- --hero-text : Farbe aller Texte auf den Fotos (Titel, Text, Links, Einträge unter "Neueste ...") --hero-neueste : Farbe nur der Überschrift "Neueste Wanderungen" / "Neueste Galerien" (sie ist zusätzlich zu 80 % deckend, wirkt also immer etwas blasser) --hero-text gilt auch für den feinen Strich bei "Neueste ..." (zu 40 % deckend) und für den Hintergrund der Pille "Derflinger.ch" (zu 92 % deckend). color-mix(...) mischt die Farbe mit "transparent" im angegebenen Prozentsatz, die Farbe folgt also der Variable. Werte z. B. #fff (weiss), #f3e9d2 (warmes Weiss), #ffd24a (gelb), rgb(255 255 255 / .9). */ /* e4dbd0 D6CDC3 FFE5CC */ :root { --hero-text: #e4dbd0; --hero-neueste: #e4dbd0; } /* ---------- Seite ---------- */ body { background: #000; } /* Die Seite ist mindestens so hoch wie der Bildschirm (100vh = Fensterhöhe; 100dvh berücksichtigt auf dem Handy die ein- und ausfahrende Adressleiste). Die Fusszeile steht so immer ganz unten. */ .seite { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; } /* Weisse Pille "Derflinger.ch" oben mittig, über den Fotos (z-index: 2 = liegt vorne). pointer-events: none = die Fläche um die Pille blockiert keine Klicks auf die Fotos darunter, nur die Pille selbst (auto) ist anklickbar. */ .kopf { position: absolute; top: 0; left: 0; right: 0; z-index: 2; text-align: center; padding: 14px 16px; pointer-events: none; } .kopf h1 { display: inline-block; margin: 0; padding: 6px 18px; font-size: clamp(1.1rem, 3vw, 1.6rem); background: color-mix(in srgb, var(--hero-text) 92%, transparent); color: #000; border-radius: 999px; pointer-events: auto; } /* ---------- Die zwei Hälften ---------- flex: 1 = füllt den Platz zwischen Kopf und Fusszeile. Zwei gleich breite Spalten (1fr 1fr). */ .teile { flex: 1; display: grid; grid-template-columns: 1fr 1fr; } /* Eine Hälfte: Foto füllt die Fläche (cover, mittig zugeschnitten), der Text sitzt unten (justify-content: flex-end). min-height: 50vh = mindestens halbe Bildschirmhöhe. */ .teil { position: relative; display: flex; flex-direction: column; justify-content: flex-end; color: var(--hero-text); min-height: 50vh; background-size: cover; background-position: center; overflow: hidden; } /* Abdunklungs-Schicht über dem Foto (::before = Schicht ohne eigenes HTML), füllt die ganze Hälfte. Beim Darüberfahren mit der Maus wird sie etwas dunkler (filter: brightness(.88)). */ .teil::before { content: ""; position: absolute; inset: 0; transition: filter .25s; } .teil:hover::before { filter: brightness(.88); } /* Foto und Verlauf pro Hälfte. Die Werte stehen oben bei den Variablen. */ .teil.wandern { background-image: url("../img/hero-wanderungen.jpg"); } .teil.wandern::before { background: linear-gradient(to top, rgba(0,0,0,var(--wandern-unten)), rgba(0,0,0,var(--wandern-oben)) var(--wandern-bis)); } .teil.foto { background-image: url("../img/hero-fotogalerie.jpg"); } .teil.foto::before { background: linear-gradient(to top, rgba(0,0,0,var(--foto-unten)), rgba(0,0,0,var(--foto-oben)) var(--foto-bis)); } /* ---------- Textblock unten in jeder Hälfte ---------- Titel + Text + Link links (.haupt), "Neueste ..." rechts daneben. Reicht der Platz nicht, rutscht "Neueste" darunter (flex-wrap: wrap). */ .tx { position: relative; padding: 28px clamp(16px, 4vw, 48px) 32px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 32px; } .haupt { flex: 1 1 260px; } .tx a { color: inherit; } .teil h2 { margin: 0 0 6px; font-size: clamp(1.6rem, 4vw, 2.6rem); } .teil h2 a { text-decoration: none; } .teil h2 a::after { content: ""; position: absolute; inset: 0; z-index: 0; } /* ganze Fläche klickbar */ .teil p { margin: 0 0 14px; max-width: 34ch; font-size: 1.05rem; } .los { font-weight: 700; border-bottom: 2px solid currentColor; text-decoration: none; } /* "Neueste Wanderungen / Galerien": Liste mit feiner Linie links. z-index: 1 liegt über dem unsichtbaren Link der ganzen Fläche, damit die einzelnen Links anklickbar bleiben. */ .neueste { position: relative; z-index: 1; flex: 0 1 230px; margin: 0; padding: 0 0 0 20px; list-style: none; border-left: 1px solid color-mix(in srgb, var(--hero-text) 40%, transparent); font-size: .95rem; } .neueste li { padding: 2px 0; } .neueste .titel { color: var(--hero-neueste); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; opacity: .8; } .neueste a:hover { text-decoration: underline; } /* ---------- Fusszeile (env(safe-area-inset-bottom) = Abstand für die iPhone-Gestenleiste) ---------- */ .unten { background: #111; color: #aaa; text-align: center; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); font-size: .875rem; } .unten a { color: inherit; margin: 0 10px; } /* Link in der gleichen Farbe wie der Text (#aaa) */ .unten a:hover, .unten a:focus-visible { color: #fff; text-decoration: underline; } /* Maus darüber oder Tastatur-Fokus: weiss + unterstrichen */ /* ---------- Schmalere Fenster ---------- Unter 1000 px: "Neueste ..." steht unter dem Text, mit Linie oben statt links. Unter 700 px: die Hälften stehen untereinander, die Pille ist ein weisser Balken oben. */ @media (max-width: 1000px) { .neueste { flex-basis: 100%; padding: 12px 0 0; border-left: 0; border-top: 1px solid color-mix(in srgb, var(--hero-text) 40%, transparent); } } @media (max-width: 700px) { .teile { grid-template-columns: 1fr; } .teil { min-height: 56vh; } .kopf { position: static; background: var(--hero-text); } .kopf h1 { padding: 0; background: none; } }