/* ============================================================== informatik.academy – Custom CSS Für Code Snippets Pro, Snippet-Typ: CSS (Site Front-End) Gehört zusammen mit dem JS-Snippet "Header: Shrink & Offset" Der Header schrumpft STUFENLOS: Das JS setzt --shrink von 0 (voll) bis 1 (geschrumpft), alle Maße werden hier per calc() interpoliert. Deshalb steht auf den geschrumpften Eigenschaften KEINE transition – die Glättung macht das JS pro Frame, eine CSS-Transition würde dagegenarbeiten und träge wirken. ============================================================== */ /* === Farbpalette & Leisten-Maße =============================== */ :root { --ia-blau: #1C2848; --ia-orange: #ec8a36; --ia-orange-hell: #f5b26e; --ia-hover: #f48c06; /* Grundfarbe der Leisten: direkt aus dem Theme */ --ia-header: var(--wp--preset--color--accent-5, #D7D3CC); /* Schwebende Leisten */ --ia-luft: 16px; /* Abstand nach unten (Footer) */ --ia-luft-seite: 24px; /* Abstand links/rechts (war 16) */ --ia-luft-oben: 8px; /* Abstand nach oben (bewusst knapper) */ --ia-radius: 20px; /* --- Header-Geometrie: alle Höhen an EINER Stelle ------------ Jeweils Normalzustand und geschrumpfter Zustand. Dazwischen wird stufenlos interpoliert. Hier drehen, nicht weiter unten. */ --header-pad: 10px; /* Padding oben/unten, voll */ --header-pad-shrink: 4px; /* Padding oben/unten, geschrumpft */ --logo-h: 36px; /* Logo-Höhe, voll */ --logo-h-shrink: 26px; /* Logo-Höhe, geschrumpft */ --btn-h: 30px; /* Button-Mindesthöhe, voll */ --btn-h-shrink: 26px; /* Button-Mindesthöhe, geschrumpft */ /* Startwert, bis das JS die echte Header-Höhe misst. NICHT auf 0 setzen – sonst verdeckt der Header den Inhalt, falls das Skript einmal nicht läuft. Lieber etwas zu groß. */ --header-offset: 88px; } @media (max-width: 600px) { :root { --ia-luft: 8px; --ia-luft-seite: 12px; --ia-radius: 16px; /* Auf dem Handy zählt jede Zeile doppelt */ --header-pad: 8px; --logo-h: 30px; --logo-h-shrink: 24px; --header-offset: 78px; } } /* === Blog: Navigationspfeile spiegeln ========================= */ .wp-block-post-navigation-link.pfeil-gedreht .wp-block-post-navigation-link__arrow-previous, .wp-block-post-navigation-link.pfeil-gedreht .wp-block-post-navigation-link__arrow-next { display: inline-block; transform: scaleX(-1) !important; } /* === Header: Basis für alle Buttons =========================== */ .header-nav .wp-block-navigation__container { gap: 3px; } .header-nav .wp-block-navigation__container > li > a, .header-nav .wp-block-loginout a { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 70px; /* stufenlos zwischen --btn-h und --btn-h-shrink */ min-height: calc(var(--btn-h) + (var(--btn-h-shrink) - var(--btn-h)) * var(--shrink, 0)); padding: 2px; border-radius: 2px; text-decoration: none; font: 300 0.8em/0.9 sans-serif; color: #fff !important; --bg: #f1f3f5; --hover: #e9ecef; --emoji: ""; background: var(--bg); transition: background .15s, transform .05s, box-shadow .2s; } /* Das Emoji bleibt sichtbar – es rückt nur enger an die Beschriftung, damit beide Zeilen auch in der schmalen Leiste Platz haben. */ .header-nav .wp-block-navigation__container > li > a::before, .header-nav .wp-block-loginout a::before { content: var(--emoji); margin-bottom: calc(3px - 2px * var(--shrink, 0)); font-size: .8em; line-height: .9; } .header-nav .wp-block-navigation__container > li > a:hover, .header-nav .wp-block-loginout a:hover { background: var(--hover); transform: translateY(-1px); box-shadow: 0 2px 10px rgba(0,0,0,.12); } /* === Header: die drei Hauptbuttons + Login ==================== */ .header-nav .wp-block-navigation li:nth-child(-n+3) > a { --bg: var(--ia-blau); --hover: var(--ia-hover); } .header-nav li:nth-child(1) > a { --emoji: "💡"; } .header-nav li:nth-child(2) > a { --emoji: "👾"; } .header-nav li:nth-child(3) > a { --emoji: "🔍"; } .header-nav .wp-block-loginout a { --bg: var(--ia-blau); --hover: var(--ia-hover); --emoji: "🔐"; font-weight: 300; border-radius: 2px; min-width: 70px; } /* === Header: Submenüs ========================================= */ .header-nav .wp-block-navigation__submenu-container { border: 2px solid var(--ia-orange); border-radius: 6px; padding: 4px; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.08); } .header-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { display: block; padding: 6px 10px; border-radius: 3px; transition: background .2s; } .header-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: var(--ia-orange-hell); color: #fff !important; } .header-nav .wp-block-navigation__submenu-icon { display: none !important; } /* === Header: schwebende Leiste ================================ */ .header-nav { --shrink: 0; /* 0 = voll, 1 = geschrumpft. Setzt das JS. */ position: fixed; top: var(--ia-luft-oben); left: var(--ia-luft-seite); right: var(--ia-luft-seite); width: auto; z-index: 9999; /* !important nötig: der Block-Editor setzt am Header-Block padding-top:0; padding-bottom:0 als Inline-Style – ohne !important bliebe der Shrink-Effekt wirkungslos. Links/rechts bleibt das Theme-Padding unangetastet. */ padding-top: calc(var(--header-pad) + (var(--header-pad-shrink) - var(--header-pad)) * var(--shrink)) !important; padding-bottom: calc(var(--header-pad) + (var(--header-pad-shrink) - var(--header-pad)) * var(--shrink)) !important; border-radius: var(--ia-radius); /* Rand: heller Lichtsaum oben, dunklere Kante unten – das gibt der Glasfläche eine definierte Begrenzung statt auszufransen. */ border: 1px solid rgba(255,255,255,.45); background: var(--ia-header); /* Fallback: volldeckend */ /* Schatten: enge Kontaktkante + weiche Tiefe, beide nehmen beim Schrumpfen leicht zu, damit die Leiste beim Scrollen abhebt. Die inset-Linien sind der eigentliche "markante Rand". */ box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.07), 0 calc(6px + 3px * var(--shrink)) calc(22px + 10px * var(--shrink)) rgba(0,0,0, calc(.11 + .05 * var(--shrink))); will-change: padding; } /* Admin-Bar: WordPress setzt die Klasse am body, kein JS nötig */ body.admin-bar .header-nav { top: calc(32px + var(--ia-luft-oben)); } @media screen and (max-width: 782px) { body.admin-bar .header-nav { top: calc(46px + var(--ia-luft-oben)); } } /* altes Overlay abschalten – ersetzt durch den Glas-Effekt unten */ .header-nav::before { display: none; } /* Innere Blöcke dürfen KEINE eigene Fläche haben, sonst liegt eine volldeckende Farbe auf dem Glas und die Leiste wirkt zweifarbig */ .header-nav .wp-block-group, .header-nav .wp-block-columns { background-color: transparent; } /* Freiraum unter dem Header: Höhe kommt per JS, der Rest steht hier */ body { padding-top: calc(var(--header-offset) + var(--ia-luft-oben) + 16px); } /* === Footer: gleiche Leiste, bleibt am Seitenende ============= WICHTIG: hier KEIN backdrop-filter! Ein Element mit backdrop-filter wird zum Bezugsrahmen für position:fixed seiner Nachfahren – der Back-to-Top-Button im Footer klebte dadurch im Footer statt am Bildschirmrand. Gebraucht wird der Filter hier ohnehin nicht: der Footer ist nicht fixiert, hinter ihm scrollt nichts. Rand und Schatten bekommt er trotzdem – die kosten nichts und lösen das Problem nicht aus. */ footer .wp-block-group.is-style-section-1 { margin: 0 var(--ia-luft-seite) var(--ia-luft); border-radius: var(--ia-radius); border: 1px solid rgba(255,255,255,.45); background: var(--ia-header); /* Fallback: volldeckend */ box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.07), 0 6px 22px rgba(0,0,0,.11); } @supports (background: color-mix(in srgb, red 50%, transparent)) { footer .wp-block-group.is-style-section-1 { background: color-mix(in srgb, var(--ia-header) 72%, transparent); } } /* auch hier: innere Blöcke ohne eigene Fläche */ footer .wp-block-group.is-style-section-1 .wp-block-columns, footer .wp-block-group.is-style-section-1 .wp-block-group { background-color: transparent; } /* === Glas-Effekt für den Header =============================== */ @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { /* Deckkraft und Unschärfe laufen stufenlos mit: je weiter geschrumpft, desto transparenter und stärker geblurrt. */ .header-nav { background: color-mix(in srgb, var(--ia-header) calc(72% - 10% * var(--shrink)), transparent); -webkit-backdrop-filter: saturate(180%) blur(calc(20px + 4px * var(--shrink))); backdrop-filter: saturate(180%) blur(calc(20px + 4px * var(--shrink))); } /* Mobiles Overlay-Menü: dieselbe Falle wie beim Back-to-Top-Button. Solange der Header einen backdrop-filter trägt, ist ER der Bezugs- rahmen für das fixed positionierte Menü – das Overlay bliebe in der Leiste eingesperrt (gemessen 359x68px statt 375x812px). Also: Filter aus, solange das Menü offen ist. */ .header-nav:has(.wp-block-navigation__responsive-container.is-menu-open) { -webkit-backdrop-filter: none; backdrop-filter: none; } } /* === Header: Logo schrumpft stufenlos mit ===================== */ .header-nav .wp-block-site-logo img, .header-nav .custom-logo { height: auto !important; width: auto; max-height: calc(var(--logo-h) + (var(--logo-h-shrink) - var(--logo-h)) * var(--shrink)); display: block; } /* --- OPTIONAL: zweite Header-Zeile beim Scrollen einfahren ------ Das ist der größte Hebel: Padding und Logo bringen ~25px, die zweite Zeile kostet 30–40px. Läuft ebenfalls stufenlos – die Zeile blendet aus und fährt zusammen, statt zu verschwinden. So aktivieren: 1. Site Editor → Header-Template-Teil öffnen 2. Die Gruppe mit den "Internes"-Buttons markieren 3. Rechte Seitenleiste → Erweitert → Zusätzliche CSS-Klasse(n): header-zeile-2 4. Den Block unten einkommentieren und --zeile2-h an die tatsächliche Höhe der Zeile anpassen .header-nav .header-zeile-2 { --zeile2-h: 40px; overflow: hidden; opacity: calc(1 - var(--shrink)); max-height: calc(var(--zeile2-h) * (1 - var(--shrink))); } --------------------------------------------------------------- */ /* === Mobiles Menü und Social-Buttons oben halten ============== */ .wp-block-navigation__responsive-container.is-menu-open, .wp-block-navigation__responsive-dialog { z-index: 10000; } a[href*="instagram.com"], a[href*="tiktok.com"] { z-index: 1000; }