/* Theme Name: Hagebuttenmark Theme URI: https://hagebuttenmark.de Description: Child-Theme für Divi 5. Trägt die Gestaltungsvorgaben des Redesigns — Farben, Schriften, Abstände — und alles eigene CSS. Author: Bäuerles Hagebuttenmark Template: Divi Version: 1.0.0 Text Domain: hagebuttenmark */ /* ========================================================================= Gestaltungsvorgaben aus den Entwürfen ========================================================================= Als CSS-Variablen und nicht als feste Werte im Code: Wenn das Rot einmal nachjustiert wird, ist es eine Zeile statt vierzig. Die Namen sagen, wofür die Farbe da ist, nicht wie sie aussieht — `--hbm-akzent` überlebt einen Wechsel von Rot zu Dunkelrot, `--hbm-rot` nicht. ========================================================================= */ :root { --hbm-papier: #fffdf9; /* Seitenhintergrund, warmes Weiß */ --hbm-dunkel: #2a1a14; /* Kopfleiste und Fuß, fast Schwarzbraun */ --hbm-text: #3b2b22; /* Fließtext */ --hbm-akzent: #c7150e; /* Warenkorb, aktive Menüpunkte, Knöpfe */ --hbm-leinen: #f6f1e8; /* Abschnittsflächen, hebt sich leicht ab */ --hbm-sand: #efe6d9; /* Platzhalter hinter Bildern */ --hbm-linie: #e8ddcd; /* Trennlinien auf hellem Grund */ --hbm-linie-dunkel: #3d2a20; /* Trennlinien auf dunklem Grund */ --hbm-hell-auf-dunkel: #e8dccb; --hbm-leiste-text: #cbb7a2; /* Vertrauensleiste auf Dunkelbraun */ --hbm-gedaempft: #bda893; --hbm-leise: #8a7a6c; /* Ortsangaben, Bildunterschriften */ --hbm-sehr-leise: #7d6b59; --hbm-auf-bild: #e6d5c6; /* Fließtext über dem Aufmacherfoto */ --hbm-augenbraue-hell: #f0b8b3; /* Augenbraue auf dunklem Grund */ --hbm-serif: "Lora", Georgia, "Times New Roman", serif; --hbm-sans: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Augenbrauen und Labels stehen im Entwurf in einer Monospace. Bewusst ohne Webfont: Der Entwurf lädt IBM Plex Mono gar nicht erst, es greift also ohnehin die Systemschrift — und eine Schriftdatei weniger ist bei der mobilen Ladezeit spürbar. */ --hbm-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* Abstände. Aus dem Entwurf ausgemessen: 64 px Seitenrand am Desktop, 96 px Innenabstand oben und unten je Abschnitt. Kopf und Fuß haben im Entwurf einen eigenen, schmaleren Rand (44 px, nachgemessen in SiteHeader.dc.html und SiteFooter.dc.html). Das ist kein Versehen der Vorlage: Logo und Menü stehen dadurch etwas weiter außen als der Fließtext und rahmen die Seite. */ --hbm-rand: 64px; --hbm-rand-kopf: 44px; --hbm-rand-mobil: 20px; --hbm-abschnitt: 96px; /* Abstand zwischen zwei Zeilen derselben Sektion — im Entwurf der Sprung von der Abschnittsüberschrift zu den Kacheln. Divis Vorgabe sind 60 px. */ --hbm-zeilenluft: 52px; /* Höhe der dunklen Versandleiste: 9 px Innenabstand oben und unten plus eine Zeile 12,5 px mit Zeilenhöhe 1,4. Der klebende Kopf schiebt sich um genau diesen Wert nach oben, damit nur die weisse Zeile stehen bleibt. */ --hbm-topbar-hoehe: 36px; } /* ========================================================================= Grundlagen ========================================================================= */ /* Alles, was seitenweit wirkt, hängt an `.hbm-redesign` am . Ohne diese Klasse ist das Child-Theme optisch wirkungslos — es lässt sich also gefahrlos auf der Live-Seite aktivieren, lange bevor das Redesign sichtbar werden soll. Die Klasse setzt functions.php: pro Seite über das Feld `hbm_redesign`, oder für die ganze Seite über die Option `hbm_redesign_global`. Zum Start wird genau dieser eine Schalter umgelegt. */ body.hbm-redesign { background: var(--hbm-papier); color: var(--hbm-text); font-family: var(--hbm-sans); } .hbm-redesign h1, .hbm-redesign h2, .hbm-redesign h3, .hbm-redesign h4, .hbm-redesign h5, .hbm-redesign h6 { font-family: var(--hbm-serif); color: var(--hbm-text); } /* ========================================================================= Divi-Vorgaben für unsere Abschnitte aushebeln Gemessen am fertigen HTML: Divi begrenzt JEDE Zeile auf `max-width: 1080px` und gibt ihr `padding: 20px 0`. Der Entwurf ist randlos mit 44 px Seitenabstand — und zwischen zwei Zeilen soll keine Luft stehen, solange kein Abschnittswechsel gemeint ist. Der Selektor greift nur auf Sektionen, die eine unserer `hbm-`Klassen tragen. Fremde Divi-Inhalte auf derselben Seite bleiben unberührt. ========================================================================= */ /* WARUM `!important` UND `body` DAVOR: Divi 5 erzeugt seine Modul-CSS als