|
| 1 | +/* SPDX-License-Identifier: MPL-2.0 */ |
| 2 | +/* Copyright (c) 2025-2026 Jonathan D.A. Jewell <j.d.a.jewell@open.ac.uk> */ |
| 3 | +/* |
| 4 | + * a2ml.net / k9-svc.net site theme — built on the ddraig-ssg AAA base. |
| 5 | + * WCAG 2.2 AAA: all text/UI colours contrast-verified >= 7:1 (light + dark), |
| 6 | + * focus ring >= 3:1, reduced-motion, reflow, >= 44px targets. |
| 7 | + */ |
| 8 | + |
| 9 | +:root { |
| 10 | + --bg: #ffffff; |
| 11 | + --bg-soft: #f4f5f9; |
| 12 | + --bg-code: #eceef5; |
| 13 | + --fg: #1a1b26; /* 17.09:1 on --bg */ |
| 14 | + --fg-muted: #3a3d4d; /* 10.74:1 on --bg */ |
| 15 | + --link: #3730a3; /* 9.93:1 on --bg */ |
| 16 | + --link-hover: #1f1b6b; |
| 17 | + --border: #5a5e73; |
| 18 | + --focus: #3730a3; |
| 19 | + --btn-fg: #ffffff; /* on --link (#3730a3) = 9.93:1 */ |
| 20 | + --radius: 8px; |
| 21 | + --maxw: 70rem; |
| 22 | + --measure: 40rem; |
| 23 | +} |
| 24 | +@media (prefers-color-scheme: dark) { |
| 25 | + :root { |
| 26 | + --bg: #0e0f1a; |
| 27 | + --bg-soft: #181a2a; |
| 28 | + --bg-code: #1c1f33; |
| 29 | + --fg: #e6e8f2; /* 15.60:1 */ |
| 30 | + --fg-muted: #c2c6d8; /* lightened for >=7:1 on --bg-soft */ |
| 31 | + --link: #b9c2ff; /* 11.09:1 */ |
| 32 | + --link-hover: #dde2ff; |
| 33 | + --border: #8c91ad; |
| 34 | + --focus: #b9c2ff; |
| 35 | + --btn-fg: #0e0f1a; /* dark text on light --link in dark mode */ |
| 36 | + } |
| 37 | +} |
| 38 | + |
| 39 | +*, *::before, *::after { box-sizing: border-box; } |
| 40 | +html { font-size: 100%; -webkit-text-size-adjust: 100%; } |
| 41 | +body { |
| 42 | + margin: 0; |
| 43 | + font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; |
| 44 | + font-size: 1.0625rem; line-height: 1.6; |
| 45 | + color: var(--fg); background: var(--bg); |
| 46 | + overflow-wrap: break-word; |
| 47 | +} |
| 48 | +.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 1.25rem; } |
| 49 | + |
| 50 | +/* Skip link (2.4.1) */ |
| 51 | +.skip-link { position: absolute; left: -9999px; top: 0; background: var(--link); color: #fff; padding: .75rem 1.25rem; border-radius: 0 0 var(--radius) 0; font-weight: 600; z-index: 100; min-height: 44px; line-height: 1.4; } |
| 52 | +.skip-link:focus { left: 0; } |
| 53 | + |
| 54 | +/* Focus (2.4.7/2.4.11/2.4.13) */ |
| 55 | +:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px; } |
| 56 | +a:focus, button:focus, [tabindex]:focus { outline: 3px solid var(--focus); outline-offset: 2px; } |
| 57 | + |
| 58 | +/* Header / nav */ |
| 59 | +.site-header { border-bottom: 1px solid var(--border); } |
| 60 | +.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding-block: .75rem; } |
| 61 | +.brand { font-weight: 700; font-size: 1.2rem; color: var(--fg); text-decoration: none; } |
| 62 | +.nav-links { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 0; padding: 0; } |
| 63 | +.nav-links a, .brand { display: inline-flex; align-items: center; min-height: 44px; } |
| 64 | + |
| 65 | +/* Links: underlined (1.4.1) */ |
| 66 | +a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; } |
| 67 | +a:hover { color: var(--link-hover); } |
| 68 | +.brand, .nav-links a, .btn { text-decoration: none; } |
| 69 | +.nav-links a:hover, .nav-links a:focus { text-decoration: underline; } |
| 70 | + |
| 71 | +main { display: block; } |
| 72 | +.prose { padding-block: 2rem; } |
| 73 | +.prose h1 { font-size: 2.25rem; line-height: 1.2; margin: 0 0 1rem; } |
| 74 | +.prose h2 { font-size: 1.6rem; line-height: 1.3; margin: 2.25rem 0 .75rem; } |
| 75 | +.prose h3 { font-size: 1.25rem; margin: 1.5rem 0 .5rem; } |
| 76 | +.prose :is(h1,h2,h3,h4), .prose p, .prose li { max-width: var(--measure); } |
| 77 | + |
| 78 | +/* Lede */ |
| 79 | +.lede { font-size: 1.3rem; line-height: 1.5; color: var(--fg); max-width: var(--measure); margin: 0 0 1.5rem; } |
| 80 | + |
| 81 | +/* Badges */ |
| 82 | +.badges { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; padding: 0; list-style: none; } |
| 83 | +.badge { display: inline-flex; align-items: center; min-height: 1.9rem; padding: .25rem .7rem; border: 1px solid var(--border); border-radius: 999px; font-size: .85rem; color: var(--fg); background: var(--bg-soft); } |
| 84 | + |
| 85 | +/* Buttons (>=44px target, 2.5.5) */ |
| 86 | +.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0; } |
| 87 | +.btn { display: inline-flex; align-items: center; min-height: 44px; padding: .6rem 1.15rem; border-radius: var(--radius); font-weight: 600; border: 2px solid var(--link); } |
| 88 | +.btn-primary { background: var(--link); color: var(--btn-fg); } |
| 89 | +.btn-primary:hover { background: var(--link-hover); border-color: var(--link-hover); color: var(--btn-fg); } |
| 90 | +.btn-ghost { background: transparent; color: var(--link); } |
| 91 | +.btn-ghost:hover { background: var(--bg-soft); } |
| 92 | + |
| 93 | +/* Cards */ |
| 94 | +.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; margin: 1.5rem 0; } |
| 95 | +.card { border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; background: var(--bg-soft); } |
| 96 | +.card h3 { margin: 0 0 .5rem; font-size: 1.1rem; } |
| 97 | +.card p { margin: 0; color: var(--fg); } |
| 98 | + |
| 99 | +/* Code */ |
| 100 | +code { background: var(--bg-code); padding: .15em .35em; border-radius: 4px; font-size: .9em; } |
| 101 | +pre { background: var(--bg-code); padding: 1rem; border-radius: var(--radius); overflow-x: auto; } |
| 102 | +pre code { background: none; padding: 0; } |
| 103 | + |
| 104 | +/* Tables */ |
| 105 | +.prose table { border-collapse: collapse; width: 100%; max-width: 100%; margin: 1rem 0; } |
| 106 | +.prose caption { text-align: left; font-weight: 600; color: var(--fg-muted); padding: .5rem 0; } |
| 107 | +.prose th, .prose td { border: 1px solid var(--border); padding: .5rem .75rem; text-align: left; } |
| 108 | +.prose th { background: var(--bg-soft); } |
| 109 | + |
| 110 | +blockquote { margin: 1rem 0; padding: .5rem 1rem; border-left: 4px solid var(--link); color: var(--fg); background: var(--bg-soft); } |
| 111 | +img { max-width: 100%; height: auto; } |
| 112 | +hr { border: none; border-top: 1px solid var(--border); margin: 2rem 0; } |
| 113 | +.muted { color: var(--fg-muted); } |
| 114 | + |
| 115 | +.site-footer { border-top: 1px solid var(--border); margin-top: 3rem; padding-block: 1.5rem; color: var(--fg-muted); font-size: .95rem; } |
| 116 | +.site-footer a { color: var(--link); } |
| 117 | + |
| 118 | +@media (prefers-reduced-motion: reduce) { |
| 119 | + *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } |
| 120 | +} |
| 121 | +@media (max-width: 30rem) { .nav { gap: .5rem; } body { font-size: 1rem; } } |
0 commit comments