/* style.css - die Workshop-Seiten des backspace e.V. Zwei Seiten und eine Weiterleitung, kein Skript, keine fremde Bibliothek. Die Seite hat sehr wenig Inhalt: eine Liste mit einem Eintrag und eine Seite mit zwei Sachen zum Anklicken. Aufgemachte Kaesten mit runden Ecken und farbigem Balken machen daraus keinen Inhalt, sie machen daraus eine Landingpage, die alles Moegliche sein koennte. Deshalb hier das Gegenteil, und zwar konsequent: keine Rundungen, keine Schatten, keine Flaechen. Haarlinien und Weissraum ordnen die Seite, Beschriftungen stehen in Schreibmaschinenschrift am Rand, Eintraege sind nummeriert. Das Vorbild ist die Indexseite eines Datenblatts oder ein Laborheft - wenig Inhalt darf wenig Inhalt sein. Die eine Ausnahme von der Farblosigkeit ist die Linie unter dem Kopf: das Blau des backspace-Logos, zwei Pixel dick, ueber die ganze Breite. */ :root { --bg: #fbfaf7; --ink: #23201c; --leise: #6b6559; /* Die Linien tragen hier die Ordnung, die sonst Kaesten tragen wuerden. Deshalb etwas kraeftiger als die Linien des Web-Updaters (#e2ddd2): dort trennen sie Tabellenzeilen, hier sind sie die Gliederung. */ --linie: #d8d3c7; /* Die Zeile unter dem Zeiger. Kein Rahmen, keine Verschiebung - nur ein Hauch Blau im Untergrund, gerade genug, um die ganze Zeile als ein Ziel zu zeigen. */ --wisch: #eef1f7; /* Das Blau des backspace-Logos, dieselbe Zahl, die in dokumentation/marke.typ als Markenfarbe der Hefte steht. Die Logodatei besteht aus dieser einen Farbe und sonst nur aus durchsichtigem Grund. 7.82:1 auf --bg, also weit ueber den 4.5:1, die Fliesstext nach WCAG AA braucht. --blau-hell ist der Zustand unter dem Zeiger, dieselbe Farbe wie beim Web-Updater: heller und kraeftiger, 5.13:1 auf --bg und ΔE 21.1 zu --blau. Der Abstand ist der Punkt - eine Nuance dunkler sieht schlicht niemand. Achtung: weiter unten steht ein dunkles Thema, das alle Farben umdefiniert. Jede neue Farbe hier braucht dort ihr Gegenstueck. */ --blau: #1D4D99; --blau-hell: #1067d5; --schrift: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --maschine: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; } * { box-sizing: border-box; } body { margin: 0 auto; padding: 2rem 1.5rem 4rem; max-width: 47rem; background: var(--bg); color: var(--ink); font: 17px/1.6 var(--schrift); } /* Fliesstext bleibt schmal, auch wenn die Seite breit ist: mehr als etwa 75 Zeichen pro Zeile findet das Auge am Zeilenanfang nicht mehr wieder. */ p { margin: 0 0 .9rem; max-width: 36rem; } p:last-child { margin-bottom: 0; } /* --- Schreibmaschinenschrift fuer alles, was Beschriftung ist ------------ Nicht Zierde: sie trennt auf einen Blick, was Angabe ueber den Inhalt ist (Art, Groesse, Nummer, Voraussetzung) von dem Inhalt selbst. Gesperrt, weil Grossbuchstaben ohne Sperrung zusammenkleben. */ .ort, .kicker, .spec, .nr { font-family: var(--maschine); font-size: .74rem; letter-spacing: .11em; text-transform: uppercase; color: var(--leise); } /* --- Kopf ---------------------------------------------------------------- */ .kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem 1.5rem; flex-wrap: wrap; padding-bottom: .9rem; margin-bottom: 3rem; border-bottom: 2px solid var(--blau); } .marke { display: inline-block; line-height: 0; } .marke img { display: block; width: 170px; height: auto; } .ort { text-decoration: none; } a.ort:hover { color: var(--blau-hell); } /* --- Ueberschriften ------------------------------------------------------ Der Sprung von der Beschriftung zur Ueberschrift ist gross und der von der Ueberschrift zum Fliesstext klein. So braucht die Gliederung keine Linien um sich herum, sie steht in den Groessen. */ h1 { font-size: clamp(2rem, 6vw, 2.9rem); line-height: 1.08; letter-spacing: -.02em; font-weight: 700; margin: 0 0 .9rem; max-width: 20ch; } h1 .kicker { display: block; margin-bottom: .7rem; } .lead { font-size: 1.12rem; margin-bottom: 3rem; } /* --- Einstieg mit Bild --------------------------------------------------- Ueberschrift und Einleitung links, das Foto der Platine rechts daneben. Die rechte Spalte ist fest, nicht anteilig: Die Datei ist 560 Pixel breit, und ueber ihre 240 Anzeigepixel hinaus vergroessert wuerde sie weich. Was uebrig bleibt, bekommt der Text - und das muss reichen, damit "Mikrocontroller" in einer Zeile stehen bleibt. Bei 47rem Satzbreite sind das rund 420 Pixel, das laengste Wort braucht bei der groessten Ueberschrift etwa 400. */ .einstieg { position: relative; margin-bottom: 3rem; } .einstieg .lead { margin-bottom: 0; } /* Schmal steht das Foto unter dem Text, wie alles andere auch. */ .foto { display: block; width: 100%; max-width: 320px; height: auto; margin-top: 1.5rem; } /* Breit legt es sich in die obere rechte Ecke - ueber den Text, nicht neben ihn. Neben ihm ginge nicht: Waere es eine Rasterspalte, muesste die Ueberschrift danebenpassen, und "Mikrocontroller" ist in 2.9rem rund 330 Pixel breit - fuer das Bild bliebe zu wenig uebrig. Ueber ihm geht, weil die Platine freigestellt ist und schraeg steht: eine Raute. Gemessen an der Bilddatei liegt ihre linke Kante auf einem Zehntel der Hoehe bei 47% der Breite, auf drei Zehnteln bei 13%, erst auf vier Zehnteln ganz links, unten wieder bei 34%. Oben und unten sind die Ecken leer, dort laeuft Text gefahrlos hindurch. Die beiden max-width halten den Text aus dem Bereich heraus, in dem die Platine wirklich liegt, mit gut 30 Pixeln Luft an der engsten Stelle - das Bild soll nicht am Text kleben. Aendert sich das Foto, gehoeren sie nachgemessen. Erst ab 48rem: Darunter waere der Rest fuer die Ueberschrift zu schmal, und sie liefe unter die Platine. */ @media (min-width: 48rem) { /* top ist nicht gegriffen: Der Kasten faengt beim Kicker an, das Bild soll bei der Ueberschrift darunter anfangen. Dazwischen liegt genau die Kickerzeile (0.74rem mal der Zeilenhoehe 1.08 der Ueberschrift, also 0.8rem) und ihr Abstand nach unten (0.7rem). */ .einstieg .foto { position: absolute; top: 1.5rem; right: 0; width: 320px; max-width: none; margin-top: 0; } .einstieg h1 { max-width: 20ch; } .einstieg .lead { max-width: 21rem; } } /* Ab hier bleibt links und rechts der Seite genug Rand stehen - der Satzspiegel hoert bei 47rem auf -, dass das Bild dort hineinragen darf und groesser wird. Der Ueberhang ist kleiner als der Rand bei 58rem, sonst schoebe das Bild die Seite in die Breite. */ @media (min-width: 58rem) { .einstieg .foto { right: -3.5rem; width: 400px; } } /* --- Links -------------------------------------------------------------- Ohne diese Regeln nimmt der Browser sein eigenes grelles Blau und fuer besuchte Links sein Violett. Unterstrichen sind sie in beiden Zustaenden gleich, der Hover steckt allein in der Farbe. */ a { color: var(--blau); text-decoration-thickness: 1px; text-underline-offset: 2px; } a:visited { color: var(--blau); } a:hover { color: var(--blau-hell); } a:focus-visible { outline: 2px solid var(--blau-hell); outline-offset: 3px; } code { font-family: var(--maschine); font-size: .92em; overflow-wrap: break-word; } /* --- Die Zeilen ---------------------------------------------------------- Ein Eintrag ist eine Zeile zwischen zwei Haarlinien, keine Karte. Die ganze Zeile ist der Link, nicht nur die Ueberschrift - auf dem Handy ist eine Zeile ein Ziel, das man trifft, ein Wort nicht. Die negativen Raender ziehen die Flaeche unter dem Zeiger etwas ueber den Satzspiegel hinaus, damit sie nicht am Text klebt. Eine Spalte links mit einer Nummer bekommt nur die Liste der Workshops, die wirklich eine Aufzaehlung ist. Wo zwei Sachen nebeneinander stehen, die keine Reihenfolge haben, waere sie erfunden. */ .liste { list-style: none; margin: 0; padding: 0; } .zeile { display: block; padding: 1.7rem 1rem; margin: 0 -1rem; border-top: 1px solid var(--linie); color: inherit; text-decoration: none; } .zeile:visited { color: inherit; } .zeile.nummeriert { display: grid; grid-template-columns: 3.5rem 1fr; gap: 0 1.75rem; } .liste > li:last-child .zeile { border-bottom: 1px solid var(--linie); } .zeile:hover { background: var(--wisch); } .zeile:focus-visible { outline: 2px solid var(--blau-hell); outline-offset: -2px; } /* Die Nummer sitzt auf der Grundlinie der Beschriftung daneben, nicht auf der der Ueberschrift - sonst haengt sie in der Luft. */ .nr { padding-top: .18rem; color: var(--blau); } .zeile:hover .nr { color: var(--blau-hell); } .kopfzeile { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem 1.5rem; flex-wrap: wrap; margin-bottom: .35rem; } .spec { flex: none; } .titel { display: block; font-size: 1.45rem; line-height: 1.2; letter-spacing: -.01em; font-weight: 600; margin: 0 0 .5rem; } .zeile:hover .titel { color: var(--blau-hell); } .weiter { display: inline-block; margin-top: .7rem; font-weight: 600; color: var(--blau); } .zeile:hover .weiter { color: var(--blau-hell); } .pfeil { display: inline-block; transition: transform .12s ease-out; } .zeile:hover .pfeil { transform: translateX(4px); } footer { margin-top: 4rem; padding-top: 1rem; border-top: 1px solid var(--linie); display: flex; justify-content: space-between; gap: .5rem 1.5rem; flex-wrap: wrap; } footer p { margin: 0; font-size: .87rem; color: var(--leise); } /* Unter etwa 34rem passen die zwei Spalten nicht mehr nebeneinander, ohne dass der Text auf drei Woerter pro Zeile schrumpft. Dann steht die Nummer ueber ihrem Eintrag statt daneben. */ @media (max-width: 34rem) { .zeile.nummeriert { grid-template-columns: 1fr; gap: .35rem; } .nr { padding-top: 0; } } /* Ein Ruck von vier Pixeln ist harmlos, aber wer Bewegung abgestellt hat, hat sie abgestellt. */ @media (prefers-reduced-motion: reduce) { .pfeil { transition: none; } .zeile:hover .pfeil { transform: none; } } @media (prefers-color-scheme: dark) { :root { --bg: #1b1a17; --ink: #ece8e0; --leise: #a09a8e; --linie: #3d3a34; --wisch: #22242b; /* Das Logo-Blau steht hier bei 2.13:1 auf dem Grund und ist damit nicht mehr zu lesen. Im Dunkeln uebernimmt deshalb dasselbe helle Blau wie beim Web-Updater: 6.55:1 auf --bg. "Heller beim Hovern" heisst hier die andere Richtung als im Hellen. */ --blau: #6fa2df; --blau-hell: #9dc4ef; } /* Das Logo ist eine SVG-Datei in genau einem Blau auf durchsichtigem Grund. Statt sie hier einfach dunkel stehen zu lassen, dient sie als Maske: die Form kommt aus der Datei, die Farbe aus --blau. Deshalb braucht es keine zweite Logodatei fuer das dunkle Thema - und die eine bleibt die, die auch auf den Heften steht. @supports, weil ohne Maske ein blauer Klotz in Logogroesse stehen bliebe. Kann ein Browser das nicht, zeigt er das Bild wie es ist - dunkles Blau auf dunklem Grund, schlecht zu lesen, aber immer noch ein Logo und kein Balken. */ @supports (mask-image: url(backspace-logo.svg)) { /* Ohne Groesse: Das Bild darin spannt den Kasten schon auf, genau 170 Pixel breit und im Seitenverhaeltnis der Datei hoch. Eine zweite, von Hand gerundete Hoehe hier wuerde beim Umschalten des Themas um einen halben Pixel springen. */ .marke { background: var(--blau); -webkit-mask: url(backspace-logo.svg) no-repeat center / contain; mask: url(backspace-logo.svg) no-repeat center / contain; } /* Das Bild bleibt im Dokument stehen - der alt-Text ist das, was eine Vorlesesoftware hier findet. Sichtbar ist nur noch die Maske. */ .marke img { opacity: 0; } } }