/* Schwartzistan: the base design system. Every shell sets design tokens on (from render/packet.py design_for): --body-font --head-font --paper --ink --accent --rule --hue --cols --measure plus classes era-{early,victorian,interwar,midcentury,late,modern}, density-{airy,normal,dense}, cols-{1,2,3}, shell-{name}. This file turns those tokens into one country's typography. Section files (herald.css, law.css ...) add furniture; they should not restate fonts or paper. */ /* ---------- 1. tokens ---------- */ :root { --hue: 40; --body-font: Georgia, 'Times New Roman', serif; --head-font: Georgia, serif; --paper: hsl(var(--hue), 10%, 96%); --ink: #1b1a17; --accent: hsl(var(--hue), 35%, 28%); --rule: hsl(var(--hue), 12%, 72%); --cols: 2; --measure: 72ch; /* derived */ --muted: color-mix(in srgb, var(--ink) 58%, var(--paper)); --rule-soft: color-mix(in srgb, var(--rule) 55%, var(--paper)); --panel: color-mix(in srgb, var(--paper) 45%, white); --bar: hsl(var(--hue), 16%, 17%); --bar-ink: hsla(40, 20%, 92%, .86); /* rhythm (density classes adjust these) */ --fs: 17px; --lh: 1.5; --gap: 1.25rem; --block: 1.9rem; /* rules and heads (era classes adjust these) */ --rule-w: 1px; --rule-style: solid; --rule-heavy: 3px; --h-weight: 400; --h1: 1.85rem; --h2: 1.2rem; --h3: 1rem; --mono: 'Courier New', Courier, monospace; --ui: system-ui, -apple-system, 'Segoe UI', sans-serif; } .density-airy { --lh: 1.62; --gap: 1.55rem; --block: 2.4rem; } .density-dense { --lh: 1.38; --gap: .95rem; --block: 1.4rem; --fs: 16.5px; } /* the eras: how heavy the rules are, how loud the heads may be */ .era-early { --rule-w: 4px; --rule-style: double; --rule-heavy: 4px; --h-weight: 400; --h1: 1.75rem; } .era-victorian { --rule-w: 4px; --rule-style: double; --rule-heavy: 3px; --h-weight: 400; --h1: 1.8rem; } .era-interwar { --rule-w: 3px; --rule-style: solid; --rule-heavy: 5px; --h-weight: 700; --h1: 1.9rem; } .era-midcentury { --rule-w: 2px; --rule-style: solid; --rule-heavy: 3px; --h-weight: 600; --h1: 1.85rem; } .era-late { --rule-w: 1px; --rule-style: solid; --rule-heavy: 2px; --h-weight: 600; --h1: 1.8rem; } .era-modern { --rule-w: 1px; --rule-style: solid; --rule-heavy: 2px; --h-weight: 500; --h1: 1.8rem; --ink: #1f1f1f; } /* ---------- 2. reset and page ---------- */ *, *::before, *::after { box-sizing: border-box; min-width: 0; } html { font-size: var(--fs); -webkit-text-size-adjust: 100%; } body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--body-font); line-height: var(--lh); font-kerning: normal; font-variant-numeric: oldstyle-nums; text-rendering: optimizeLegibility; } .era-late body, .era-modern body { font-variant-numeric: normal; } main { max-width: 1080px; margin: 0 auto; padding: 1.4rem 1.25rem 3.5rem; } img, svg { max-width: 100%; height: auto; } img { vertical-align: middle; } pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; } hr { border: 0; border-top: var(--rule-w) var(--rule-style) var(--rule); margin: var(--block) 0; } /* ---------- 3. site bar and foot ---------- */ nav.sitebar { font: 12.5px/1.6 var(--ui); background: var(--bar); color: var(--bar-ink); padding: .45rem 1.25rem; display: flex; flex-wrap: wrap; gap: .25rem .55rem; align-items: center; } nav.sitebar a { color: inherit; text-decoration: none; } nav.sitebar a:hover { text-decoration: underline; text-underline-offset: 3px; } nav.sitebar a:first-child { color: #fff; } nav.sitebar form.search { margin-left: auto; } nav.sitebar input { font: inherit; padding: .18rem .5rem; border: 1px solid hsla(0,0%,100%,.25); background: hsla(0,0%,100%,.08); color: #fff; border-radius: 2px; width: 13rem; } nav.sitebar input::placeholder { color: hsla(0,0%,100%,.5); } footer.sitefoot { font: 12px/1.6 var(--ui); color: var(--muted); text-align: center; padding: 1rem 1.25rem 1.5rem; border-top: 1px solid var(--rule-soft); } footer.sitefoot a { color: inherit; } footer.sitefoot p, footer.co-footer p.vmt { margin: 0 0 .25rem; max-width: none; } .vmt { font: 11.5px/1.6 var(--ui); color: var(--muted); letter-spacing: .01em; } .vmt span { white-space: nowrap; } .vmt span + span::before { content: "·"; margin: 0 .45em; } nav.sitebar a.random { font-style: italic; } /* ---------- 4. typography ---------- */ h1, h2, h3, h4 { font-family: var(--head-font); font-weight: var(--h-weight); line-height: 1.18; margin: 0 0 .45rem; overflow-wrap: anywhere; } h1 { font-size: var(--h1); letter-spacing: -.005em; } h2 { font-size: var(--h2); margin-top: var(--block); } h3 { font-size: var(--h3); margin-top: calc(var(--block) * .7); font-weight: 600; } h1 small, h2 small { display: block; font-family: var(--body-font); font-weight: 400; font-size: .55em; color: var(--muted); margin-top: .35rem; letter-spacing: 0; } h1 + p, h2 + p, h3 + p { margin-top: 0; } p, ul, ol, dl, table, figure, blockquote { margin: 0 0 var(--gap); } main p, main li, main dd, main dt, main figcaption, main blockquote { max-width: var(--measure); } ul, ol { padding-left: 1.35rem; } li { margin-bottom: .3rem; } li > ul, li > ol { margin-top: .3rem; margin-bottom: .3rem; } b, strong { font-weight: 600; } i, em { font-style: italic; } figure { margin-inline: 0; } figcaption { font-size: .85rem; color: var(--muted); margin-top: .35rem; } blockquote { border-left: 2px solid var(--rule); margin-left: 0; padding: .1rem 0 .1rem 1rem; } address { font-style: normal; } code, kbd, samp { font-family: var(--mono); font-size: .92em; } a { color: inherit; text-decoration: underline; text-decoration-color: var(--rule); text-decoration-thickness: 1px; text-underline-offset: .18em; } a:hover { text-decoration-color: var(--ink); } .era-late a, .era-modern a { color: var(--accent); text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); } .era-late a:hover, .era-modern a:hover { text-decoration-color: var(--accent); } h1 a, h2 a, h3 a, .masthead a, .lead h2 a, .brief h2 a, .brief h3 a { text-decoration: none; color: inherit; } h1 a:hover, h2 a:hover, h3 a:hover { text-decoration: underline; text-decoration-color: var(--rule); } .sc { font-variant: small-caps; letter-spacing: .04em; } .small, .small td, .small th, .small li { font-size: .86rem; } .muted { color: var(--muted); } .caps { text-transform: none; } .num, td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } /* the small labels: a kicker sits above a title, a deck under it, a lede after it */ .kicker { font-family: var(--body-font); font-size: .8rem; color: var(--muted); margin: 0 0 .25rem; letter-spacing: .01em; text-transform: none; font-weight: 400; } .kicker a { text-decoration: none; } .kicker a:hover { text-decoration: underline; } .era-early .kicker, .era-victorian .kicker { font-variant: small-caps; letter-spacing: .06em; } .era-late .kicker, .era-modern .kicker { font-family: var(--ui); font-size: .74rem; letter-spacing: .04em; } .deck { font-size: .95rem; color: var(--muted); margin: 0 0 .6rem; font-style: italic; } .deck.sc, .deck .sc { font-style: normal; } .lede { font-size: 1.02rem; color: var(--muted); margin: 0 0 var(--gap); } .standfirst { font-size: 1.05rem; margin: 0 0 .6rem; } .byline { font-size: .85rem; color: var(--muted); margin: 0 0 .6rem; } .meta { font-size: .85rem; color: var(--muted); } .mentions, .elsewhere { font-size: .84rem; color: var(--muted); } /* ---------- 5. tables and fact lists ---------- */ table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; } caption { text-align: left; font-size: .85rem; color: var(--muted); padding: 0 0 .35rem; } td, th { padding: .28rem .55rem .28rem 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule-soft); } td:last-child, th:last-child { padding-right: 0; } th { font-weight: 600; font-size: .84rem; color: var(--ink); border-bottom: 1px solid var(--ink); } thead th { padding-top: 0; } tbody th { font-weight: 600; } tfoot td, tfoot th, tr.total td, tr.total th { border-top: 1px solid var(--ink); border-bottom: 0; font-weight: 600; } tr.highlight td, tr.champion td, tr.incumbent td, tr.landmark-row td { background: var(--panel); } .era-early table, .era-victorian table { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); } .era-early th, .era-victorian th { font-variant: small-caps; font-weight: 400; letter-spacing: .05em; font-size: .9rem; } .era-early td, .era-victorian td { border-bottom-style: dotted; border-bottom-color: var(--rule); } .era-late table, .era-modern table { font-size: .95rem; } .era-late th, .era-modern th { font-family: var(--ui); font-size: .74rem; letter-spacing: .03em; color: var(--muted); border-bottom-color: var(--rule); } table.small { font-size: .86rem; } dl.facts { display: grid; grid-template-columns: minmax(6.5rem, 11rem) 1fr; gap: .2rem 1rem; margin: 0 0 var(--gap); } dl.facts dt { font-weight: 600; color: var(--ink); } dl.facts dd { margin: 0; } dl.facts dt, dl.facts dd { padding: .1rem 0; border-bottom: 1px dotted var(--rule-soft); } dl.facts.small { font-size: .86rem; } .era-early dl.facts dt, .era-victorian dl.facts dt { font-weight: 400; font-variant: small-caps; letter-spacing: .04em; } .era-late dl.facts dt, .era-modern dl.facts dt { font-family: var(--ui); font-size: .78rem; font-weight: 600; color: var(--muted); padding-top: .22rem; } /* ---------- 6. boxes, notices, verbatim text ---------- */ .box, .notice, .roll, .bulletin, .register, .genealogy, .vote-record, .first-business, .current-holder, .licence-notice, .medal-box, .appropriation, .featured, .gov-form, .crossword, .about-town { border: 1px solid var(--ink); background: var(--panel); padding: .9rem 1.1rem; margin: var(--gap) 0; } .box > :first-child, .notice > :first-child, .roll > :first-child, .bulletin > :first-child, .register > :first-child, .medal-box > :first-child, .vote-record > :first-child, .first-business > :first-child, .licence-notice > :first-child, .about-town > :first-child, .crossword > :first-child { margin-top: 0; } .box > :last-child, .notice > :last-child, .roll > :last-child, .bulletin > :last-child, .register > :last-child, .medal-box > :last-child, .vote-record > :last-child, .first-business > :last-child, .licence-notice > :last-child, .about-town > :last-child { margin-bottom: 0; } .notice { border: var(--rule-w) var(--rule-style) var(--accent); } .notice h1, .notice h2 { font-size: 1.05rem; margin-top: 0; } .era-early .box, .era-victorian .box, .era-early .roll, .era-victorian .roll, .era-early .notice, .era-victorian .notice { border-width: var(--rule-w); border-style: var(--rule-style); } .notice.chronology { border: var(--rule-w) var(--rule-style) #7a1f1f; background: color-mix(in srgb, #7a1f1f 5%, var(--paper)); max-width: 46rem; margin: var(--block) auto; } .notice.chronology h1, .notice.chronology h2 { color: #7a1f1f; font-variant: small-caps; font-weight: 400; letter-spacing: .04em; } .closure.notice { border-color: #7a1f1f; background: color-mix(in srgb, #7a1f1f 5%, var(--paper)); } .closure.notice h2 { color: #7a1f1f; border: 0; } pre.verbatim, .verbatim { white-space: pre-wrap; font: inherit; line-height: 1.55; border-left: 2px solid var(--accent); padding: .35rem 0 .35rem 1.1rem; margin: var(--gap) 0; max-width: var(--measure); } blockquote.verbatim { font-style: italic; } .stamp { display: inline-block; font: 11px/1.5 var(--ui); letter-spacing: .12em; text-transform: uppercase; border: 1px solid var(--accent); color: var(--accent); padding: .05rem .5rem; transform: rotate(-2deg); margin: .3rem 0 .6rem; } .status { display: inline-block; font: 11px/1.5 var(--ui); letter-spacing: .05em; padding: .05rem .45rem; border: 1px solid var(--rule); border-radius: 2px; vertical-align: middle; color: var(--muted); } .status.repealed { color: #7a1f1f; border-color: color-mix(in srgb, #7a1f1f 40%, var(--paper)); } .status.in-force { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--paper)); } /* ---------- 7. layout helpers ---------- */ .twocol, .threecol, .fourcol { display: grid; gap: 0 2rem; align-items: start; } .twocol { grid-template-columns: 1fr 1fr; } .threecol { grid-template-columns: 1fr 1fr 1fr; } .fourcol { grid-template-columns: repeat(4, 1fr); } .entry-grid, div.record, div.ministry-head { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: 0 2.5rem; align-items: start; } .entry-grid > aside, div.record > aside, div.ministry-head > aside, aside.infobox { font-size: .88rem; border: 1px solid var(--rule); background: var(--panel); padding: .8rem .95rem; margin: .3rem 0 var(--gap); } aside.infobox dl.facts { grid-template-columns: minmax(5rem, 6.5rem) 1fr; margin: 0; gap: .1rem .6rem; } aside.infobox .portrait img, aside.infobox .logo img, aside img.logo { display: block; width: 100%; max-width: 220px; margin: 0 auto .7rem; background: #fff; border: 1px solid var(--rule); } aside.infobox h2, .entry-grid > aside h2, div.record > aside h2 { font-size: .95rem; margin: .8rem 0 .4rem; } aside.infobox > :first-child, div.record > aside > :first-child { margin-top: 0; } /* semantic fallback: an aside that is the last thing in an article behaves like an infobox */ article > aside:not([class]) { float: right; width: 19rem; margin: .3rem 0 var(--gap) 2rem; font-size: .88rem; border: 1px solid var(--rule); background: var(--panel); padding: .8rem .95rem; } article > aside:not([class]) dl.facts { grid-template-columns: minmax(5rem, 6.5rem) 1fr; margin: 0; } article::after { content: ""; display: block; clear: both; } .columns { column-count: var(--cols); column-gap: 1.7rem; column-rule: 1px solid var(--rule); } .columns > * { break-inside: avoid; } .columns > .lead, .columns > .span, .columns > h2.span { column-span: all; } .cols { columns: 2; column-gap: 2rem; } .cols li { break-inside: avoid; } .prevnext, .yearnav { display: flex; justify-content: space-between; gap: 1rem; font-size: .88rem; margin: var(--block) 0 var(--gap); border-top: 1px solid var(--rule); padding-top: .5rem; } .prevnext a, .yearnav a { text-decoration: none; } .prevnext a:hover, .yearnav a:hover { text-decoration: underline; } .issue-nav { margin: -.4rem 0 var(--gap); border-top: 0; border-bottom: 1px solid var(--rule); padding: 0 0 .4rem; } .issue-nav span { color: var(--muted); } /* the "as it stood" copies: a dateline above the entry, and the years it may be read at below it */ .asof-dateline { font-family: var(--ui); font-size: .8rem; color: var(--muted); border: 1px solid var(--rule); background: var(--panel); padding: .35rem .7rem; margin: 0 0 var(--gap); max-width: none; } .asof-dateline a { color: inherit; } .asof-links { border-top: 1px solid var(--rule); margin-top: var(--block); padding-top: .5rem; text-align: center; line-height: 1.9; } .asof-links a { text-decoration: none; padding: 0 .1rem; } .asof-links a:hover { text-decoration: underline; } /* the Ministry's notice for an address that holds no record, and the random draw */ .notice.notfound, .notice.random-record { max-width: 46rem; margin: var(--block) auto; padding: 1.2rem 1.4rem; } .notice.notfound h1, .notice.random-record h1 { font-size: 1.5rem; margin-top: .2rem; } .notice.notfound .ref b { font-family: var(--mono); font-weight: 400; letter-spacing: .04em; } .notfound .bigsearch, .random-record .bigsearch { display: flex; gap: .4rem; margin: var(--gap) 0; } .notfound .bigsearch input { flex: 1; font: inherit; padding: .4rem .6rem; border: 1px solid var(--rule); background: #fff; } .notfound .bigsearch button { font: inherit; padding: .4rem .9rem; background: var(--panel); border: 1px solid var(--rule); } ul.timeline { list-style: none; padding: 0; } ul.timeline li { padding-left: 1.1rem; text-indent: -1.1rem; margin-bottom: .45rem; } ul.timeline .sc { color: var(--muted); } .links { display: flex; flex-wrap: wrap; gap: .4rem .5rem; margin: var(--gap) 0; } .links a { border: 1px solid var(--rule); padding: .25rem .7rem; text-decoration: none; font-size: .88rem; background: var(--panel); } .links a:hover { border-color: var(--accent); color: var(--accent); } .colophon { font-size: .78rem; text-align: center; color: var(--muted); margin-top: var(--block); border-top: 1px solid var(--rule); padding-top: .6rem; max-width: none; } .colophon p { max-width: none; } .chart img, figure.chart img { width: 100%; display: block; border: 1px solid var(--rule); background: #fff; } .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .6rem; margin: var(--gap) 0; } .stats div, .archive-stats div, .war-stats div, .code-stats div { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule-soft); padding: .45rem .1rem; background: transparent; } .stats b, .archive-stats b, .war-stats b, .code-stats b { display: block; font-family: var(--head-font); font-weight: 400; font-size: 1.45rem; line-height: 1.15; } .stats span, .archive-stats span, .war-stats span, .code-stats span { font-size: .78rem; color: var(--muted); } /* ---------- 8. the newspaper furniture (Herald and Courier share it) ---------- */ .newspaper, .tabloid { max-width: 1080px; margin: 0 auto; } .masthead { text-align: center; border-top: var(--rule-w) var(--rule-style) var(--ink); border-bottom: var(--rule-w) var(--rule-style) var(--ink); padding: .45rem 0 .5rem; margin-bottom: var(--gap); } .masthead h1 { font-family: var(--head-font); font-size: 2.9rem; font-weight: 400; margin: .15rem 0 .1rem; letter-spacing: 0; line-height: 1.05; } .masthead p { max-width: none; margin: 0; } .masthead .ears { display: flex; justify-content: space-between; font-size: .8rem; color: var(--muted); } .masthead .dateline, .masthead .deck { font-size: .84rem; border-top: 1px solid var(--ink); margin-top: .35rem; padding-top: .3rem; font-style: normal; color: var(--ink); } .masthead .dateline a { text-decoration: none; } .masthead > p:last-child:not(.dateline):not(.ears) { font-size: .84rem; } article.masthead, header.masthead { display: block; } .lead { column-span: all; border-bottom: 1px solid var(--ink); padding-bottom: .8rem; margin-bottom: var(--gap); } .lead h1, .lead h2 { font-size: 1.85rem; text-align: center; margin: .25rem auto .3rem; max-width: 30ch; } .lead .deck, .lead .kicker { text-align: center; max-width: none; } .lead .body, .lead-body { column-count: 2; column-gap: 1.7rem; column-rule: 1px solid var(--rule); } .lead > p:not(.deck):not(.kicker):not(.byline):not(.mentions) { font-size: 1.02rem; } .brief { margin-bottom: var(--gap); } .brief h2, .brief h3 { font-size: 1.12rem; margin: 0 0 .25rem; } .brief .deck, .brief .kicker { font-size: .8rem; margin-bottom: .3rem; } .brief p { font-size: .95rem; margin-bottom: .6rem; } .roll { border: var(--rule-w) var(--rule-style) var(--ink); } .roll h2 { font-size: 1.05rem; text-align: center; margin: 0 0 .5rem; } .roll h2 small { display: block; font-size: .78rem; font-weight: 400; color: var(--muted); margin-top: .15rem; } .roll table { font-size: .88rem; margin-bottom: .5rem; } .roll .frontline { text-align: center; font-style: italic; margin: .5rem 0 0; max-width: none; } .frontline { font-style: italic; } .obits h2, .col h2, .depts h2, .inside h2 { font-size: .95rem; border-bottom: 1px solid var(--ink); padding-bottom: .2rem; margin: var(--gap) 0 .5rem; } .col p, .col li { font-size: .93rem; } .obits p { font-size: .93rem; } .adverts { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin: var(--block) 0 var(--gap); column-span: all; } .advert { border: 1px solid var(--ink); padding: .6rem .7rem; text-align: center; font-size: .84rem; background: var(--panel); } .advert b { display: block; font-family: var(--head-font); font-weight: var(--h-weight); font-size: 1rem; margin-bottom: .15rem; } .advert a { text-decoration: none; } .advert p { max-width: none; margin: 0; } .era-early .advert, .era-victorian .advert { border: var(--rule-w) var(--rule-style) var(--ink); } .era-early .advert b, .era-victorian .advert b { font-variant: small-caps; letter-spacing: .06em; font-weight: 400; } /* the single story page */ .story { max-width: calc(var(--measure) + 6ch); margin: 0 auto; } .story header { text-align: center; border-bottom: 1px solid var(--ink); padding-bottom: .7rem; margin-bottom: var(--gap); } .story h1 { font-size: 1.9rem; margin: .3rem auto; max-width: 28ch; } .story .kicker, .story .deck { text-align: center; max-width: none; } .story .story-body p { font-size: 1.02rem; } .story .elsewhere { border-top: 1px solid var(--rule); padding-top: .5rem; margin-top: var(--gap); } /* ---------- 9. reference works: entries with an infobox ---------- */ .entry h1 { border-bottom: 1px solid var(--rule); padding-bottom: .3rem; margin-bottom: .4rem; } .entry-body h2, .entry h2 { border-bottom: 1px solid var(--rule); padding-bottom: .15rem; } .entry .breadcrumb { color: var(--muted); font-size: .84rem; margin: 0 0 .3rem; } .entry .breadcrumb a { text-decoration: none; } /* ---------- 10. era detail ---------- */ /* early and victorian papers: drop caps on the lead, ornaments on the colophon, small caps for the heads */ .era-early .newspaper .lead > .deck + p::first-letter, .era-victorian .newspaper .lead > .deck + p::first-letter, .era-early .newspaper .lead > h2 + p:not(.deck)::first-letter, .era-victorian .newspaper .lead > h2 + p:not(.deck)::first-letter, .era-early .story .story-body > p:first-child::first-letter, .era-victorian .story .story-body > p:first-child::first-letter { font-family: var(--head-font); font-size: 3.3em; float: left; line-height: .82; padding: .08em .12em 0 0; font-weight: 400; } .era-early .colophon::before, .era-victorian .colophon::before { content: "❦"; display: block; font-size: 1.1rem; color: var(--muted); margin-bottom: .25rem; } .era-early .obits h2, .era-victorian .obits h2, .era-early .col h2, .era-victorian .col h2, .era-early .roll h2, .era-victorian .roll h2, .era-early .inside h2, .era-victorian .inside h2 { font-variant: small-caps; letter-spacing: .08em; font-weight: 400; text-align: center; border-bottom: 0; border-top: 1px solid var(--ink); padding-top: .3rem; } .era-early .brief h2, .era-victorian .brief h2 { text-align: center; } .era-early .brief .deck, .era-victorian .brief .deck { text-align: center; } .era-early .masthead h1, .era-victorian .masthead h1 { font-size: 3.1rem; } .era-early main, .era-victorian main { font-size: 1.01em; } /* interwar and mid-century: heavy single rules, bolder heads, no ornaments */ .era-interwar .masthead, .era-midcentury .masthead { border-top-width: var(--rule-heavy); border-bottom-width: 1px; } .era-interwar .masthead h1, .era-midcentury .masthead h1 { font-weight: 700; letter-spacing: -.01em; } .era-interwar .lead h2, .era-midcentury .lead h2 { font-weight: 700; letter-spacing: -.01em; } .era-interwar .brief h2, .era-midcentury .brief h2 { font-weight: 700; } .era-interwar .roll, .era-midcentury .roll { border-width: 2px; } .era-interwar .obits h2, .era-interwar .col h2, .era-interwar .inside h2, .era-midcentury .obits h2, .era-midcentury .col h2, .era-midcentury .inside h2 { border-bottom-width: 2px; font-weight: 700; } /* late and modern: the same paper on a screen */ .era-late .masthead, .era-modern .masthead { border-top-width: 1px; border-bottom-width: 1px; text-align: left; } .era-late .masthead h1, .era-modern .masthead h1 { font-size: 2.3rem; font-weight: 500; } .era-late .lead h2, .era-modern .lead h2 { text-align: left; margin-left: 0; font-size: 1.7rem; font-weight: 500; } .era-late .lead .deck, .era-modern .lead .deck, .era-late .lead .kicker, .era-modern .lead .kicker { text-align: left; } .era-late .roll, .era-modern .roll { border-width: 1px; background: var(--panel); } .era-modern .advert, .era-late .advert { border-color: var(--rule); } .era-modern .masthead .ears, .era-late .masthead .ears { font-family: var(--ui); font-size: .72rem; } /* ---------- 11. small screens ---------- */ @media (max-width: 860px) { .twocol, .threecol, .fourcol, .entry-grid, div.record, div.ministry-head { grid-template-columns: 1fr; } .columns, .lead .body, .lead-body { column-count: 1; } .cols { columns: 1; } .adverts { grid-template-columns: 1fr 1fr; } article > aside:not([class]) { float: none; width: auto; margin-left: 0; } } @media (max-width: 640px) { :root { --fs: 16px; --gap: 1rem; --block: 1.5rem; } main { padding: 1rem 16px 2.5rem; } nav.sitebar { padding: .4rem 16px; font-size: 12px; } nav.sitebar form.search { margin-left: 0; flex-basis: 100%; } nav.sitebar input { width: 100%; } footer.sitefoot { padding: .8rem 16px 1.2rem; } h1 { font-size: calc(var(--h1) * .88); } .masthead h1, .era-early .masthead h1, .era-victorian .masthead h1 { font-size: 2.1rem; } .lead h1, .lead h2, .era-late .lead h2, .era-modern .lead h2 { font-size: 1.45rem; } .story h1 { font-size: 1.5rem; } .adverts { grid-template-columns: 1fr; } dl.facts { grid-template-columns: 1fr; gap: 0; } dl.facts dt { border-bottom: 0; padding-bottom: 0; margin-top: .3rem; } aside.infobox dl.facts, article > aside:not([class]) dl.facts { grid-template-columns: 1fr; } .masthead .ears { flex-direction: column; gap: .1rem; } table { display: block; overflow-x: auto; max-width: 100%; } .prevnext, .yearnav { flex-wrap: wrap; } .entry-grid > aside, div.record > aside, div.ministry-head > aside, aside.infobox { max-width: none; } .links { gap: .35rem; } } @media print { nav.sitebar, footer.sitefoot { display: none; } body { background: #fff; } } /* in the hand-set decades the display face is for the masthead only; headlines are set in the text face */ .era-early .lead h1, .era-early .lead h2, .era-victorian .lead h1, .era-victorian .lead h2 { font-family: var(--body-font); font-weight: 400; font-size: 1.7rem; } .era-early .brief h2, .era-early .brief h3, .era-victorian .brief h2, .era-victorian .brief h3 { font-family: var(--body-font); font-weight: 600; font-size: 1.05rem; } .era-early .story h1, .era-victorian .story h1 { font-family: var(--body-font); font-weight: 400; } .era-early .advert b, .era-victorian .advert b { font-family: var(--body-font); } .era-early .newspaper h2, .era-early .newspaper h3, .era-victorian .newspaper h2, .era-victorian .newspaper h3, .era-early .tabloid h2, .era-early .tabloid h3 { font-family: var(--body-font); } /* the lead spans the page; its own text runs in two columns under a spanning headline */ .columns > .lead { column-count: 2; column-gap: 1.7rem; column-rule: 1px solid var(--rule); } .columns > .lead > h1, .columns > .lead > h2, .columns > .lead > .deck, .columns > .lead > .kicker, .columns > .lead > .byline, .columns > .lead > .mentions { column-span: all; } .columns > .lead p { max-width: none; orphans: 3; widows: 3; } .columns > .lead > .mentions { margin-top: .4rem; } @media (max-width: 860px) { .columns > .lead { column-count: 1; } } /* ---------- 12. procedural art: mastheads, adverts, crests, medals, posters ---------- */ .masthead-art { display: block; width: 100%; max-width: 720px; height: auto; margin: .3rem auto 0; } .story header .masthead-art { max-width: 420px; margin-bottom: .4rem; opacity: .9; } .advert-art { display: block; width: 100%; height: auto; margin: 0 0 .4rem; } .medal-icon { display: inline-block; width: 1.5em; height: 1.5em; vertical-align: -.4em; margin-right: .3em; background: center / contain no-repeat; } .medal-icon.large { display: block; width: 3.2rem; height: 3.2rem; margin: 0 0 .4rem; } .medal-icon[data-medal="the Order of the Reed"] { background-image: url(/images/medal/order-of-the-reed.svg); } .medal-icon[data-medal="the Star of the Wardens"] { background-image: url(/images/medal/star-of-the-wardens.svg); } .medal-icon[data-medal="the Line Medal"] { background-image: url(/images/medal/line-medal.svg); } aside.infobox .crest img { display: block; width: 110px; height: auto; margin: 0 auto .6rem; } aside.poster { flex: none; width: 170px; margin-left: auto; border: 1px solid var(--rule); background: #fff; padding: .25rem; align-self: flex-start; } aside.poster img { display: block; width: 100%; height: auto; } header.with-poster { display: grid; grid-template-columns: minmax(0, 1fr) 170px; gap: 1.5rem; align-items: start; } footer.sitefoot img.arms { width: 30px; height: 30px; vertical-align: middle; margin-right: .3rem; opacity: .8; } @media (max-width: 640px) { header.with-poster { grid-template-columns: 1fr; } aside.poster { width: 140px; margin-left: 0; } .medal-icon.large { width: 2.6rem; height: 2.6rem; } } figure.plate { margin: .6rem 0 1rem; } figure.plate img { width: 100%; display: block; border: 1px solid var(--rule); background: #ddd; } figure.plate figcaption { font-size: .8rem; color: var(--muted); margin-top: .3rem; } .era-early figure.plate img, .era-victorian figure.plate img { filter: sepia(.15); }