style.css (2720B)
1 :root { 2 color-scheme: light; 3 --accent-blue: #007acc; 4 --light-highlight: #d4d4d4; 5 --primary-text: #333333; 6 --dark-highlight: #252525; 7 --dark-background: #1e1e1e; 8 --paper: #ffffff; 9 --font-body: Georgia, "Times New Roman", serif; 10 --font-heading: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; 11 } 12 13 * { box-sizing: border-box; } 14 15 html { background: var(--paper); } 16 17 body { 18 max-width: 50rem; 19 margin: 0 auto; 20 padding: 3rem 1.5rem 2rem; 21 color: var(--primary-text); 22 font-family: var(--font-body); 23 font-size: 1.0625rem; 24 line-height: 1.65; 25 overflow-wrap: anywhere; 26 } 27 28 header { border-bottom: 2px solid var(--dark-background); padding-bottom: 1.5rem; } 29 30 h1, h2, h3, nav, .document-label, .entry-meta, dt { 31 font-family: var(--font-heading); 32 } 33 34 h1, h2, h3 { color: var(--dark-highlight); line-height: 1.35; } 35 h1 { margin: 0.25rem 0; font-size: 2.25rem; font-weight: 650; } 36 h2 { margin: 0 0 1rem; font-size: 1.25rem; } 37 h3 { margin: 0 0 0.25rem; font-size: 1rem; font-weight: 650; } 38 p { margin: 0 0 0.8rem; } 39 .document-label { margin: 0; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; } 40 .subtitle { margin-bottom: 1.25rem; } 41 nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; font-size: 0.9rem; } 42 a { color: var(--accent-blue); text-underline-offset: 0.18em; } 43 a:hover { color: var(--dark-highlight); } 44 a:focus-visible { outline: 2px solid var(--dark-highlight); outline-offset: 4px; } 45 section { padding: 1.75rem 0; } 46 section:not(:last-of-type) { border-bottom: 1px solid var(--light-highlight); } 47 section > :last-child, article > :last-child { margin-bottom: 0; } 48 article + article { margin-top: 1.5rem; } 49 .entry-meta { margin-bottom: 0.65rem; font-size: 0.85rem; } 50 ul { margin: 0.5rem 0 0; padding-left: 1.35rem; } 51 li + li { margin-top: 0.35rem; } 52 dl { margin: 0; } 53 dt { font-size: 0.9rem; font-weight: 650; } 54 dd { margin: 0 0 0.75rem; } 55 dd:last-child { margin-bottom: 0; } 56 address { font-style: normal; } 57 .skip-link { position: absolute; top: -5rem; padding: 0.5rem; background: var(--paper); } 58 .skip-link:focus { top: 0.5rem; } 59 60 @media screen and (max-width: 36rem) { 61 body { padding: 1.5rem 1rem; } 62 h1 { font-size: 1.8rem; } 63 section { padding: 1.5rem 0; } 64 } 65 66 @media print { 67 @page { margin: 15mm; } 68 body { max-width: none; padding: 0; font-size: 11pt; line-height: 1.4; } 69 header { padding-bottom: 0.75rem; } 70 section { padding: 1rem 0; } 71 nav, .skip-link { display: none; } 72 a { color: var(--primary-text); } 73 a[href^="https://"]::after { content: " (" attr(href) ")"; font-size: 0.85em; } 74 h1, h2, h3, dt, .entry-meta { break-after: avoid; } 75 article, address { break-inside: avoid; } 76 p, li, dd { orphans: 3; widows: 3; } 77 }