/* Protest in München seit 1945 - one stylesheet for every screen (#20). * * This replaces public/blueprint/ (a 950px float grid, unmaintained since * ~2011) and public/mobile.css, which the layout used to pick between by * sniffing the User-Agent. Two stylesheets meant two truths for one design and * a page whose markup depended on who was asking - the setup Google's * mobile-first indexing punishes. * * It is a technical rebuild, not a redesign: the serif face, the blue links and * the quiet paper look of the old desktop view are kept deliberately. They suit * an archive. * * Order: variables, reset, typography, layout, components, print. */ :root { --text: #000; --muted: #666; --link: #002bb8; --rule: #ddd; --rule-light: #eee; --paper: #fff; --tint: #f4f4f2; --focus: #b8860b; /* 950px was Blueprint's grid width; keep the measure, lose the pixels. */ --page: 62rem; --gap: 1.5rem; } /* --- reset ------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } body, h1, h2, h3, h4, h5, h6, p, blockquote, dl, dd, ul, ol, figure, fieldset { margin: 0; padding: 0; } /* --- typography -------------------------------------------------------- */ html { -webkit-text-size-adjust: 100%; } body { font: 1rem/1.6 Georgia, Palatino, "Palatino Linotype", FreeSerif, serif; color: var(--text); background: #efece4 url("/images/background.jpg"); /* 1.291 Artikel zitieren Quellen als nackte URL, teils über 500 Zeichen. Ohne diese Regel steht so eine URL als eine einzige Zeile im Absatz und ragt über den Rand hinaus. overflow-x:hidden am stand hier vorher und hat sie abgeschnitten - unlesbar und nicht erscrollbar. Umbrechen statt abschneiden: der Text bleibt vollständig, die Seite bleibt schmal. */ overflow-wrap: break-word; } h1, h2, h3, h4, h5, h6 { font-weight: normal; line-height: 1.25; /* Deutsche Komposita sind lang: „Gewerkschaften/Arbeitswelt" passt bei 375px in keine Zeile. hyphens:auto trennt sie nach den Regeln von lang="de" („Arbeits-welt"); overflow-wrap greift nur da, wo auch das nicht reicht, und trennt dann wenigstens, statt die Seite zu verbreitern. */ hyphens: auto; overflow-wrap: break-word; } h1 { font-size: 1.8rem; margin-bottom: 0.6em; } h2 { font-size: 1.4rem; margin: 1.5em 0 0.5em; } h3 { font-size: 1.2rem; margin: 1.5em 0 0.5em; } h4 { font-size: 1.1rem; margin: 1.5em 0 0.5em; } h5, h6 { font-size: 1rem; font-weight: bold; margin: 1.5em 0 0.5em; } h1:first-child, h2:first-child, h3:first-child, h5:first-child { margin-top: 0; } p { margin: 0 0 1em; } a { color: var(--link); text-decoration: none; } a:hover, a:focus { text-decoration: underline; } /* public/mobile.css set :focus {outline:0} - a keyboard visitor could not see where they were. The outline comes back, and visibly. */ :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } ul, ol { margin: 0 0 1em; padding-left: 1.4em; } li { margin-bottom: 0.25em; } li > ul, li > ol { margin-bottom: 0; } blockquote { margin: 1.5em; color: var(--muted); font-style: italic; } strong { font-weight: bold; } em { font-style: italic; } abbr[title] { border-bottom: 1px dotted var(--muted); } address { margin: 0 0 1em; font-style: italic; } sup, sub { line-height: 0; } pre, code, tt { font-family: "Andale Mono", "Lucida Console", monospace; font-size: 0.9em; } pre { margin: 1.5em 0; overflow-x: auto; } hr { border: 0; border-top: 1px solid var(--rule); margin: 1.5em 0; } /* #22: the one rule that stops a 500px archive scan from breaking a 360px phone. height:auto keeps the aspect ratio when only width is given. */ img { max-width: 100%; height: auto; } /* --- layout ------------------------------------------------------------ */ .container { max-width: var(--page); margin: 0 auto; background: var(--paper); padding: 0 1rem 1.5rem; } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--paper); padding: 0.6rem 1rem; z-index: 10; } .skip-link:focus { left: 0; } .layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); } /* One column is the default; the second one appears when there is room for it. The sidebar follows
in the source, so on a phone the article comes first and the year/keyword blocks read as a "weiterlesen" offer below it (#23). */ @media (min-width: 60rem) { .layout { grid-template-columns: minmax(0, 1fr) 15rem; } /* Most pages have no sidebar; they get the full measure rather than an empty column beside them. */ .layout--single { grid-template-columns: minmax(0, 1fr); } .sidebar { border-left: 1px solid var(--rule-light); padding-left: 1rem; } } main { min-width: 0; } /* Labels that only a screen reader needs. */ .hidden-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* --- header and navigation --------------------------------------------- */ .site-header { padding: 0.75rem 0; border-bottom: 1px solid var(--rule-light); margin-bottom: var(--gap); } .site-title { display: block; color: var(--text); font-size: 1.1rem; margin-bottom: 0.5rem; } .site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; } .site-nav li { margin: 0; } /* 44px tap targets. Five items wrap into two rows on a phone rather than hiding behind a burger, which would only add a step (#23). */ .site-nav a, .site-nav button { display: flex; align-items: center; min-height: 2.75rem; padding: 0 0.6rem; } .site-nav a[aria-current="page"] { font-weight: bold; box-shadow: inset 0 -2px 0 var(--link); } .site-nav form { margin: 0; } .site-nav button { background: none; border: 0; font: inherit; color: var(--link); cursor: pointer; text-decoration: none; } .site-nav button:hover { text-decoration: underline; } /* The search box lives in the header, so it is reachable on a phone without scrolling past the whole article first (#23). */ .site-search { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.5rem; } .site-search form { display: flex; gap: 0.5rem; flex: 1 1 16rem; } .site-search input[type="text"] { flex: 1 1 auto; min-width: 0; } .site-search .surprise { font-size: 0.85rem; } /* --- sidebar ----------------------------------------------------------- */ .sidebar { font-size: 0.9rem; } .sidebar h2, .sidebar h3 { font-size: 1rem; font-weight: bold; margin: 1.2em 0 0.4em; } .sidebar ul { list-style: none; padding-left: 0; } /* On a phone the sidebar is a block after the article, not a column beside it - a rule above it says so. */ .sidebar::before { content: ""; display: block; border-top: 1px solid var(--rule-light); margin-bottom: 1rem; } @media (min-width: 60rem) { .sidebar::before { display: none; } } /* --- footer ------------------------------------------------------------ */ .site-footer { margin-top: 2rem; padding-top: 0.5rem; border-top: 1px solid var(--rule-light); font-size: 0.85rem; color: var(--muted); } .site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 1.5rem; } .site-footer li { margin: 0; } .site-footer a { display: inline-block; padding: 0.5rem 0; } /* --- year grid (#21) ---------------------------------------------------- */ .year-grid { margin-bottom: 1.5rem; } .year-grid h2 { font-size: 1rem; font-weight: bold; margin: 1.2em 0 0.4em; color: var(--muted); } .year-grid ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(4rem, 1fr)); gap: 0.35rem; } .year-grid li { margin: 0; } .year { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0.3rem; border-radius: 3px; line-height: 1.2; } /* Linked and unlinked years differ in shape as well as colour: a solid, filled box against a dashed, empty one. Colour alone would leave out anyone who cannot tell these two apart. */ a.year { border: 1px solid var(--rule); background: var(--tint); } a.year:hover, a.year:focus { border-color: var(--link); text-decoration: none; } /* Ein Jahr ohne Artikel ist Inhalt, keine Dekoration: es sagt, wo der Bestand eine Lücke hat. #999 lag bei 2,85:1, --muted liegt bei 5,74:1. Unterschieden werden verlinkt und unverlinkt ohnehin über Form und Blau, nicht über Grau. */ .year--empty { border: 1px dashed var(--rule-light); color: var(--muted); } /* Dunkler als --muted: die Zahl steht auf den kräftigsten Chips (#a8bbe3), und #666 kommt dort nur auf 2,98:1. #444 ergibt 5,05:1. */ .year__count { font-size: 0.7rem; color: #444; } /* How much material a year holds is the most useful thing to know before clicking. Four steps, set as classes because the CSP forbids style attributes here. */ a.year--level-1 { background: #eef1f8; } a.year--level-2 { background: #dde3f3; } a.year--level-3 { background: #c6d1ec; } a.year--level-4 { background: #a8bbe3; } /* --- letter navigation on the keyword list ------------------------------ */ .letters { display: flex; flex-wrap: wrap; gap: 0.2rem; margin-bottom: 1.5rem; } .letters a { display: flex; align-items: center; justify-content: center; min-width: 2.5rem; min-height: 2.75rem; padding: 0 0.4rem; border: 1px solid var(--rule-light); border-radius: 3px; } .letters a:hover, .letters a:focus { border-color: var(--link); text-decoration: none; } .letters a[aria-current] { font-weight: bold; border-color: var(--link); background: var(--tint); } /* --- forms, tables, messages ------------------------------------------- */ input[type="text"], input[type="password"], input[type="email"], textarea, select { font: inherit; max-width: 100%; padding: 0.4rem; border: 1px solid #bbb; background: var(--paper); } textarea { width: 100%; min-height: 20rem; } button, input[type="submit"] { font: inherit; min-height: 2.75rem; padding: 0 0.8rem; cursor: pointer; } label { font-weight: bold; } fieldset { border: 1px solid #ccc; padding: 1rem; margin-bottom: 1.5rem; } /* button_to renders a
; without this every admin button sits on its own line. (Was an inline style attribute before the CSP.) */ form.button_to { display: inline; } /* Sollte je eine Textile-Tabelle im Bestand landen (heute gibt es keine), muss sie im Artikel scrollen und nicht die Seite verbreitern. display:block macht die Tabelle selbst zum Scrollcontainer - ohne das greift overflow-x an einer Tabelle nicht. */ main table { display: block; overflow-x: auto; border-collapse: collapse; margin-bottom: 1.5em; max-width: 100%; } main th, main td { padding: 0.3em 0.6em; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule-light); } #notice, .notice { background: #fff6bf; border: 1px solid #ffd324; color: #514721; padding: 0.6rem 0.8rem; margin-bottom: 1rem; } #notice:empty { display: none; } .small { font-size: 0.85rem; } .quiet { color: var(--muted); } .highlight { background: #ff0; } .footnote { font-size: 0.85rem; } .pagination { margin: 1.5rem 0; } .pagination a, .pagination em, .pagination .gap { display: inline-block; min-width: 2.5rem; min-height: 2.75rem; padding: 0.6rem 0.4rem; text-align: center; } /* Screen readers and browsers get this only on paper; declared before the print block, or the later rule would win there too. */ .print-source { display: none; } /* --- map (#24) --------------------------------------------------------- */ /* Leaflet sizes itself to its container, and a container with no height collapses to nothing. Width comes from the column. isolation keeps Leaflet's own stacking (panes at z-index 400+, controls at 1000) inside the map, so it cannot sit on top of the skip link or anything else positioned on the page. */ .locations-map { height: 24rem; max-width: 100%; margin-bottom: 0.5em; isolation: isolate; } /* --- print (#30) -------------------------------------------------------- */ /* * Part of this stylesheet rather than a file of its own: a separate print.css * is what got forgotten for fifteen years on the mobile branch of the layout. */ @media print { :root { --page: none; } html { overflow: visible; } body { background: none; color: #000; font-size: 11pt; line-height: 1.4; } .container { max-width: none; padding: 0; background: none; } /* Navigation, search and the admin controls are screen furniture. Named one by one rather than hiding every form: the search box is inside the header anyway, and an admin printing an edit page wants to see it. */ .site-header, .site-footer, .skip-link, .admin-actions, .letters, .pagination { display: none; } .layout { display: block; } /* The sidebar is not navigation only: year, section and keywords say where an article sits in the archive. Kept, but as a short block at the end. */ .sidebar { border: 0; padding: 0; margin-top: 1.5em; border-top: 1px solid #999; padding-top: 0.5em; font-size: 9pt; } .sidebar::before { display: none; } .sidebar ul { display: block; } h1, h2, h3, h4, h5, h6 { break-after: avoid; page-break-after: avoid; } p, li, blockquote { orphans: 3; widows: 3; } figure, .footnote, p.footnote { break-inside: avoid; page-break-inside: avoid; } img { max-width: 100%; } a { color: #000; text-decoration: underline; } /* Only inside the article: an archive text cites sources, and a printout that swallows the URLs is worth little. Navigation links elsewhere would just be noise. .autolink ausgenommen: das sind die von auto_link erzeugten Links, deren sichtbarer Text bereits die URL ist. Ohne die Ausnahme stünde eine 500-Zeichen-URL zweimal hintereinander auf dem Papier. */ main a[href^="http"]:not(.autolink)::after { content: " (" attr(href) ")"; font-size: 85%; word-break: break-all; } /* Where this page came from - a printout without it cannot be cited. */ .print-source { display: block; margin-top: 1.5em; border-top: 1px solid #999; padding-top: 0.5em; font-size: 9pt; } }