/* 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); /* Relative on purpose: Propshaft resolves it against app/assets/images/ and stamps the digest, so the file can be cached for a year and a replacement still reaches every browser at once (#133). */ background: #efece4 url("/assets/background-cbdc46b6.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; } /* --- the suggestion list (#122) ----------------------------------------- */ /* The list is built by search_suggest.js and hangs under the field. It is the one place in this stylesheet with a drop shadow: everything else on the page lies flat on the paper, and this is the one thing that has to lie on top of it. Every other value here comes from further up this file - the 44px tap target of .site-nav a, the rules of --rule-light, the tint of a chosen year. */ .site-search form { position: relative; } .suggest { position: absolute; top: 100%; left: 0; right: 0; margin-top: 6px; background: var(--paper); border: 1px solid var(--rule); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); z-index: 5; } /* Black, not --link. Eight blue rows directly under the blue navigation would read as two link lists stacked; that a row can be clicked is said by the row itself, below. */ .suggest__row { display: flex; align-items: center; gap: 0.6rem; min-height: 2.75rem; padding: 0.35rem 0.7rem; color: var(--text); } .suggest__row + .suggest__row { border-top: 1px solid var(--rule-light); } /* What kind of thing this is - Schlagwort, Ort, Kategorie, Jahr, Artikel - in a column of its own, so a mixed list can be read down rather than across. */ .suggest__kind { flex: 0 0 5.5rem; display: flex; font-size: 0.85rem; color: var(--muted); } /* One line, cut off rather than wrapped: 46 keywords in the archive are whole sentences, and a list whose row heights jump cannot be skimmed. */ .suggest__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .suggest__meta { flex: 0 0 auto; font-size: 0.85rem; color: var(--muted); } .suggest__row:hover { background: var(--tint); text-decoration: none; } .suggest__row:hover .suggest__name { text-decoration: underline; } /* Chosen with the arrow keys. No underline - that belongs to the pointer, and no pointer is involved. The bar is the one from .site-nav a[aria-current], turned on its side. */ .suggest__row.is-selected { background: var(--tint); box-shadow: inset 2px 0 0 var(--link); } /* The full-text search, always the last row and always there: whatever the registers have to say, this is what the box did before the list existed. */ .suggest__row--search { color: var(--link); border-top: 1px solid var(--rule); } .suggest__row--search .suggest__kind { color: var(--muted); } /* On a phone the fixed column does not fit: at 358px of content width there is nothing left for "Schwabinger Krawalle" beside 5.5rem and a count. Name on one line, kind and count under it - which also makes the 44px by itself. */ @media (max-width: 34rem) { .suggest__row { display: block; padding: 0.45rem 0.7rem; } .suggest__kind, .suggest__meta { display: inline; } .suggest__kind::after { content: " ·"; } .suggest__name { display: block; white-space: normal; } .suggest__row--search .suggest__kind::after { content: ""; } } /* --- 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); } /* --- search results (#28) ----------------------------------------------- */ .hits { color: var(--muted); margin-bottom: 1.5rem; } /* The keywords that match the search term, above the article hits. Laid out like the A-Z row: tap targets rather than a line of links run together. */ .keyword-hits { margin-bottom: 1.5rem; } .keyword-hits h2 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 0.4rem; } .keyword-hits ul { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: 0; } .keyword-hits a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.7rem; border: 1px solid var(--rule-light); border-radius: 3px; } .keyword-hits a:hover, .keyword-hits a:focus { border-color: var(--link); text-decoration: none; } .no-hits { max-width: 34em; } /* --- 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; } /* --- citation (#29) ----------------------------------------------------- */ /* Quiet on screen: the block is there for whoever quotes from the archive and should not compete with the article it belongs to. */ .citation { margin-top: 2rem; border-top: 1px solid var(--rule); padding-top: 0.8rem; font-size: 0.85rem; color: var(--muted); } .citation h2 { font-size: 1rem; margin-bottom: 0.4rem; } /* The permalink is one long word with nothing to break at, and a phone screen is 320px wide. Without this the citation widens the whole page. */ .citation-text { overflow-wrap: break-word; } .citation-actions { margin-bottom: 0; } /* --- 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; } /* On paper this is the source note (#29): it names the article, the archive, the date and the permalink, so a photocopy can be cited. Which is why the layout leaves out its own .print-source wherever this block appears. */ .citation { color: #000; font-size: 9pt; break-inside: avoid; page-break-inside: avoid; } .citation h2 { font-size: 9pt; } .citation-actions { display: none; } /* 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; } }