/* * base.css -- Grundlagen * * Elementregeln, keine Bauteile. Alles was hier steht, gilt fuer die ganze * Seite und benutzt ausschliesslich Variablen aus tokens.css und colors.css. * * Document & Code @copyright by SteckDesign * Changes by third parties are not permitted. */ /* Entschieden am 04.09.2026: border-box bleibt. guladev setzt box-sizing NIRGENDS -- seine normalize.css wird nicht einmal eingebunden, es gilt also der Browser-Standard content-box. Gemessen an der Startseite: die Breiten sind in beiden gleich, die Hoehen nicht. Beim Umzug eines Site-Themes ist das die Stelle, an der eine gegen content-box gerechnete site.css auffaellt. */ *, *::before, *::after { box-sizing: border-box; } /* Kantenglaettung. Stand in guladev seit jeher im Kopf der style.css (html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale }) und ist beim Neubau untergegangen -- nicht als Entscheidung, sondern uebersehen. Gefunden am 08.09.2026 beim Umzug von steckweb2026, als die alten Regeln Deklaration fuer Deklaration gegen den berechneten Stil gehalten wurden. WARUM ES KEINE MESSUNG VORHER FAND: die Angabe aendert nur, wie der Rasterizer die Kanten fuellt. Schriftmetrik, Breiten, Hoehen und damit jeder Pixelvergleich und jede getComputedStyle-Zahl bleiben gleich -- auf dem Bildschirm ist der Text sichtbar fetter. Das gilt fuer JEDE Site, die bisher auf gula5 umgestellt wurde. */ html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { margin: 0; font-family: var( --body-font ); font-weight: var( --bodyweight ); font-size: var( --fontsize ); line-height: var( --lineheight ); color: var( --sitefgcolor ); background-color: var( --sitebgcolor ); } /* * TRENNLINIEN. Ohne diese vier Zeilen zeichnet der Browser seinen eigenen * Standard: border-style INSET auf allen vier Seiten. Bei einem
, das * ueber .hrwidth6 sechs Pixel hoch wird, ergibt das keine Linie, sondern ein * graues, abgeschraegtes Parallelogramm -- die Schattierung von "inset" * faerbt zwei Seiten dunkler und macht aus dem Rechteck einen Trapez. * * Gemessen am 05.09.2026 auf mktaylor26 (/sermons/, Balken ueber "Sermons by * Year"): guladev ein sauberer weisser Strich 83x6, gula5 ein schraeges * graues Feld. Die Klassenregeln (.hrborder, .hrwhite, .hrwidth6) waren * vorhanden und richtig -- es fehlte allein die Grundregel darunter. * * Das Zusammenspiel: "border: 0" nimmt allen vier Seiten den Stil, die * zweite Zeile gibt ihn NUR OBEN zurueck (Breite 0). Erst danach darf * .hrwidth* eine Breite setzen, ohne dass links, rechts und unten * mitzeichnen. * * GEFUNDEN HAT DAS KEINE MESSUNG, sondern der Blick auf den Bildschirm. * Im HTML steht dasselbe
, die Kennzahlen sind gleich, das Log ist leer, * und selbst getComputedStyle meldet nur "border-style: inset" -- was * plausibel aussieht, wenn man nicht weiss, wie es aussehen soll. */ hr { margin-top: 0rem; margin-bottom: 0rem; border: 0; border-top: 0px solid transparent; } /* Bilder nie breiter als ihr Kasten. Ohne das sprengt ein einziges grosses Bild das Raster und erzeugt seitliches Scrollen auf dem Handy. */ img, video, svg { max-width: 100%; height: auto; } /* * Links. Die gepunktete Unterstreichung ist Absicht und stand in guladevs * style.css -- dort allerdings als Widerspruch: erst "text-decoration: none", * dann in derselben Regel text-decoration-line/-style/-thickness, die es * wieder anschalten. Hier steht nur das Ergebnis. * * gula5 hatte nur das "none". Aufgefallen ist es beim Durchklicken in Brave: * der Link "mehr >" unter einem Blogauszug war unterstrichen, in gula5 nicht. * Im Markup ist davon nichts zu sehen. * * Der Uebergang gehoert dazu: ohne ihn springt die Farbe beim Ueberfahren. */ a, a:visited { color: var( --site_link_color ); text-decoration-line: underline; text-decoration-style: dotted; text-decoration-thickness: 1px; text-underline-offset: calc( var( --size-1 ) * 0.3 ); transition: all .2s ease-in-out; } a:hover { color: var( --site_linkhover_color ); } /* Markierter Text. Stand in guladev in style.css -- und style.css traegt in gula5 nur noch den Theme-Kopf, darum war die Regel beim Neubau ersatzlos weg. Aufgefallen ist es nicht am Aussehen, sondern am Widerspruch: die Optionsseite bietet unter "Markierter Text" ein Feld auf --selection_color an, und keine einzige Regel las die Variable. Das Feld sah aus, als tue es etwas. */ ::-moz-selection { background-color: var( --selection_color ); color: rgba( var(--white), 1 ); } ::selection { background-color: var( --selection_color ); color: rgba( var(--white), 1 ); } /* * Ueberschriften. Beim Neubau war hier nur EINE Regel fuer h1..h6 mit * line-height 1.2 -- ohne Farbe, ohne Groessenstaffel und ohne die * .h1..h6-Zwillinge. Die Folge war nicht "etwas anders", sondern: die * Groessen kamen aus dem Browser-Standardblatt, und die Klassen taten gar * nichts. Gemessen auf devwp5 gegen devwp26: * h2 19,41 px statt 20,71 · h3 15,14 statt 18,76 · h4 12,94 statt 16,18 * h5 10,74 statt 14,62 · h6 8,67 statt 12,94 · alle weiss statt * --title_color · .h1 bis .h6 durchweg 12,94 px, also wirkungslos * h1 stimmte zufaellig -- 2em Browser-Vorgabe traf genau die Theme-Groesse. * Genau daran ist zu sehen, warum ein Vergleich am HTML nicht reicht: das * Markup war identisch. * * Die Staffel ist die aus guladev, unveraendert, damit ein Site-Theme gegen * beide laufen kann. */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var( --title_color ); font-family: var( --title-font ); font-style: var( --font-normal ); font-weight: var( --titleweight ); margin: 0; padding: 0; } h1, .h1 { font-size: calc( var( --size-1 ) * 2 ); line-height: calc( var( --size-1 ) * 2.2 ); margin-bottom: calc( var( --size-1 ) * 0.45 ); letter-spacing: 0.05rem; } h2, .h2 { font-size: calc( var( --size-1 ) * 1.6 ); line-height: calc( var( --size-1 ) * 1.8 ); margin-bottom: calc( var( --size-1 ) * 0.4 ); letter-spacing: -0.05rem; } h3, .h3 { font-size: calc( var( --size-1 ) * 1.45 ); line-height: calc( var( --size-1 ) * 1.65 ); margin-bottom: calc( var( --size-1 ) * 0.4 ); letter-spacing: -0.05rem; } h4, .h4 { font-size: calc( var( --size-1 ) * 1.25 ); line-height: calc( var( --size-1 ) * 1.45 ); margin-bottom: calc( var( --size-1 ) * 0.3 ); letter-spacing: -0.025rem; } h5, .h5 { font-size: calc( var( --size-1 ) * 1.13 ); line-height: calc( var( --size-1 ) * 1.33 ); margin-bottom: calc( var( --size-1 ) * 0.25 ); letter-spacing: -0.025rem; } h6, .h6 { font-size: calc( var( --size-1 ) * 1 ); line-height: calc( var( --size-1 ) * 1.2 ); margin-bottom: calc( var( --size-1 ) * 0.15 ); letter-spacing: -0.025rem; } /* Absatz. Der Abstand ist 0,65 Stufen, nicht eine ganze -- gemessen an guladev. Und die Silbentrennung gehoert dazu: ohne sie brechen lange deutsche Woerter die Spalte. -moz-, -ms- und -o-hyphens sind weggelassen (ein -o-hyphens hat es nie gegeben), -webkit- bleibt fuer Safari. */ p { margin: 0 0 calc( var( --size-1 ) * 0.65 ); padding: 0; -webkit-hyphens: auto; hyphens: auto; } /* * Listen. Beim Neubau ganz vergessen -- gula5 liess die Browser-Vorgaben * stehen. Gemessen gegen guladev: ul padding-left 40px statt 0, * margin-bottom 14,26px statt 0, list-style disc statt der eigenen Punkte. * Aufgefallen ist es erst beim Vergleich der berechneten Werte; im HTML * steht ja beidesmal nur