/* * Quark 2 — user customizations * * This file is safe to edit. It is loaded last so anything here overrides * theme.css without having to mark rules !important. */ /* ---------- Site-Titel statt Grav-Logo ---------- */ /* Das mitgelieferte Grav-SVG ausblenden. Greift auf beide Instanzen: .navbar-section.logo im Header und .mobile-logo im Overlay-Menue. */ .navbar-brand svg { display: none; } /* weight 400, weil die Display-Schrift Cal Sans nur diesen einen Schnitt mitbringt. Ein hoeherer Wert erzwaenge Faux-Bold und die Kontur wuerde ungleichmaessig. Fuer echtes 900 muesste hier Inter stehen. */ .navbar-brand::after { content: "Claus Hesseling"; font-weight: 400; font-size: 1.875rem; line-height: 1; letter-spacing: -0.01em; white-space: nowrap; transition: color 0.15s ease, -webkit-text-stroke-color 0.15s ease; } /* Fallback zuerst: ohne text-stroke-Unterstuetzung erbt der Text die Farbe von .navbar-brand (var(--q2-text-strong)) und bleibt sichtbar. */ .navbar-brand:hover::after, .navbar-brand:focus-visible::after { color: var(--q2-accent); } /* Konturschrift nur dort, wo der Browser sie kann. Ohne diesen Guard waere der Name unsichtbar, weil die Fuellung transparent ist. */ @supports (-webkit-text-stroke: 1px currentColor) { .navbar-brand::after { color: transparent; -webkit-text-stroke: 1.5px var(--q2-text-strong); paint-order: stroke fill; } .navbar-brand:hover::after, .navbar-brand:focus-visible::after { color: var(--q2-accent); -webkit-text-stroke-color: transparent; } } /* Der Header schrumpft beim Scrollen von 72px auf 60px. */ .header-animated.scrolled .navbar-brand::after { font-size: 1.625rem; } @media (max-width: 860px) { .navbar-brand::after { font-size: 1.375rem; } .header-animated.scrolled .navbar-brand::after { font-size: 1.25rem; } } @media (prefers-reduced-motion: reduce) { .navbar-brand::after { transition: none; } } /* ---------- Schmuckfarben ---------- */ /* * Adobe-Color-Palette. Alle vier Buntwerte liegen auf S 81% / L 58%, wirken * aber sehr unterschiedlich hell: Gelb und Tuerkis erreichen auf hellem Grund * nur 1.25:1 bzw. 1.45:1 und taugen dort ausschliesslich als Flaeche. * Fuer Text gibt es je eine abgedunkelte "ink"-Variante mit >= 4.5:1. */ :root { --c-grau: #939196; --c-tuerkis: #3debd3; --c-lila: #8d3deb; --c-gelb: #ebe93d; --c-orange: #eb713d; --c-grau-ink: #747278; --c-tuerkis-ink: #0d8272; --c-lila-ink: #8d3deb; --c-gelb-ink: #78770c; --c-orange-ink: #c74a15; } /* Im Dunkeln tragen die Vollfarben selbst genug Kontrast (6:1 bis 15:1), nur das Lila muss aufgehellt werden. */ :root[data-theme="dark"] { --c-grau-ink: #939196; --c-tuerkis-ink: #3debd3; --c-lila-ink: #9b54ed; --c-gelb-ink: #ebe93d; --c-orange-ink: #eb713d; } /* Markdown-Alerts auf die Palette mappen. Das doppelte :root hebt die Spezifitaet auf (0,2,0) und schlaegt damit den Inline-Style des Plugins, der im nach custom.css steht. */ :root:root { --gh-alert-note-border-color: var(--c-grau); --gh-alert-note-title-color: var(--c-grau-ink); --gh-alert-tip-border-color: var(--c-tuerkis); --gh-alert-tip-title-color: var(--c-tuerkis-ink); --gh-alert-important-border-color: var(--c-lila); --gh-alert-important-title-color: var(--c-lila-ink); --gh-alert-warning-border-color: var(--c-gelb); --gh-alert-warning-title-color: var(--c-gelb-ink); --gh-alert-caution-border-color: var(--c-orange); --gh-alert-caution-title-color: var(--c-orange-ink); } /* Zarte Flaeche hinter den Alerts. Ueber transparent gemischt, damit ein Wertesatz fuer hell und dunkel reicht. */ .md-alert { border-radius: var(--q2-radius); padding: 12px 16px; } .md-alert--note { background: color-mix(in oklab, var(--c-grau) 10%, transparent); } .md-alert--tip { background: color-mix(in oklab, var(--c-tuerkis) 10%, transparent); } .md-alert--important { background: color-mix(in oklab, var(--c-lila) 10%, transparent); } .md-alert--warning { background: color-mix(in oklab, var(--c-gelb) 10%, transparent); } .md-alert--caution { background: color-mix(in oklab, var(--c-orange) 10%, transparent); } /* Zitate: Akzentbalken statt neutraler Textfarbe, dazu eine zarte Tonung. */ blockquote { border-left-color: var(--c-lila); border-left-width: 3px; background: color-mix(in oklab, var(--c-lila) 6%, transparent); border-radius: 0 var(--q2-radius) var(--q2-radius) 0; padding: 0.75rem 1.25rem; } /* Trennlinien als Verlauf durch die Palette. */ hr { height: 2px; border-top: 0; background: linear-gradient( to right, var(--c-lila), var(--c-tuerkis), var(--c-gelb), var(--c-orange) ); opacity: 0.7; } /* ---------- Textmarker ---------- */ /* * Marker-Optik: ein Farbstrich im unteren Bereich statt einer Vollflaeche. * Die Startseite setzt sechsmal ein — flaechig waere das zu laut. * Die Schrift behaelt dabei ihre normale Farbe. * * Der background-Shorthand ueberschreibt Picos background-color, color: * inherit dessen Textfarbe. Beide Regeln greifen ueber die Reihenfolge: * custom.css laedt nach blades.min.css bei gleicher Spezifitaet (0,0,1). */ :root { --c-mark: color-mix(in oklab, var(--c-lila) 35%, transparent); } /* Auf dunklem Grund braucht der Strich mehr Deckkraft, sonst liest er sich als Schatten statt als Marker. */ :root[data-theme="dark"] { --c-mark: color-mix(in oklab, var(--c-lila) 55%, transparent); } mark { background: linear-gradient(to top, var(--c-mark) 42%, transparent 42%); color: inherit; padding: 0 0.1em; border-radius: 0; } /* ---------- Footer ---------- */ /* Setzt das ueberschriebene partials/footer.html.twig voraus. Zentrierung, Schriftgroesse und Linkfarbe kommen bereits von #footer in theme.css. */ .footer-legal { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; justify-content: center; align-items: center; } .footer-legal a:hover, .footer-legal a:focus-visible { color: var(--q2-accent); } .footer-meta { margin: 0.75rem 0 0; color: var(--q2-text-muted); }