krz/orgo

  1/* orgo built-in theme: wiki
  2 *
  3 * A dense reference site: notes, a personal knowledge base, a manual. Wide and
  4 * information-first rather than roomy — a table of contents parked in the margin on a
  5 * large screen, compact headings with visible structure, tables and task lists styled
  6 * because a wiki is mostly made of them, and org's TODO keywords shown as badges since
  7 * in a notes site they are content rather than decoration.
  8 *
  9 * Every colour is a custom property on :root, so a stylesheet of your own loaded after
 10 * this one can retheme the site by redefining a handful of values. */
 11
 12:root {
 13  --orgo-ink: #1f2328;
 14  --orgo-muted: #656d76;
 15  --orgo-rule: #d8dee4;
 16  --orgo-accent: #0969da;
 17  --orgo-surface: #f6f8fa;
 18  --orgo-bg: #ffffff;
 19  --orgo-measure: 46rem;
 20  --orgo-wide: 74rem;
 21  --orgo-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
 22  --orgo-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
 23  /* These three colour code *blocks* only; inline code follows the page. A block keeps
 24     a light surface in both colour schemes because syntax.css is generated from one
 25     syntect theme (`highlight.theme`, InspiredGitHub by default) and cannot follow
 26     prefers-color-scheme. Pair a dark highlight theme with overrides of these three. */
 27  --orgo-todo: #b02a37;
 28  --orgo-done: #2c7a4b;
 29  --orgo-code-bg: #f6f8fa;
 30  --orgo-code-fg: #323232;
 31  --orgo-code-rule: #d8dee4;
 32}
 33
 34@media (prefers-color-scheme: dark) {
 35  :root {
 36    --orgo-ink: #e6edf3;
 37    --orgo-muted: #8d96a0;
 38    --orgo-rule: #30363d;
 39    --orgo-accent: #6cb6ff;
 40    --orgo-surface: #161b22;
 41    --orgo-bg: #0d1117;
 42  }
 43}
 44
 45* { box-sizing: border-box; }
 46
 47body {
 48  margin: 0;
 49  background: var(--orgo-bg);
 50  color: var(--orgo-ink);
 51  font: 15px/1.6 var(--orgo-font);
 52  /* A bare URL or a long identifier must wrap, not widen the page on a phone. */
 53  overflow-wrap: break-word;
 54}
 55
 56/* Header ------------------------------------------------------------------- */
 57
 58body > header {
 59  background: var(--orgo-surface);
 60  border-bottom: 1px solid var(--orgo-rule);
 61  padding: .7rem 1.5rem;
 62  display: flex;
 63  flex-wrap: wrap;
 64  gap: .5rem 1.5rem;
 65  align-items: baseline;
 66}
 67
 68.site-title {
 69  font-weight: 700;
 70  font-size: 1rem;
 71  color: var(--orgo-ink);
 72  text-decoration: none;
 73}
 74
 75body > header nav { display: flex; flex-wrap: wrap; gap: 1.1rem; font-size: .9rem; }
 76body > header nav a { color: var(--orgo-muted); text-decoration: none; }
 77body > header nav a:hover { color: var(--orgo-accent); text-decoration: underline; }
 78
 79/* Page body ---------------------------------------------------------------- */
 80
 81main {
 82  max-width: var(--orgo-measure);
 83  margin: 0 auto;
 84  padding: 2rem 1.5rem 4rem;
 85}
 86
 87h1 {
 88  font-size: 1.8rem;
 89  line-height: 1.25;
 90  margin: 0 0 1rem;
 91  padding-bottom: .4rem;
 92  border-bottom: 1px solid var(--orgo-rule);
 93}
 94h2 {
 95  font-size: 1.3rem;
 96  margin: 2rem 0 .6rem;
 97  padding-bottom: .25rem;
 98  border-bottom: 1px solid var(--orgo-rule);
 99}
100h3 { font-size: 1.05rem; margin: 1.5rem 0 .4rem; }
101h4, h5, h6 { font-size: .95rem; margin: 1.25rem 0 .4rem; }
102
103/* Section numbers, when html.section_numbers is on. */
104[class^="section-number-"] { color: var(--orgo-muted); font-weight: 400; }
105
106a { color: var(--orgo-accent); text-decoration: none; }
107a:hover { text-decoration: underline; }
108
109p.page-date { color: var(--orgo-muted); font-size: .9rem; margin-top: -.5rem; }
110
111p, ul, ol { margin: .6rem 0; }
112li { margin: .15rem 0; }
113
114img, video { max-width: 100%; height: auto; }
115
116figure { margin: 1.25rem 0; }
117figcaption { color: var(--orgo-muted); font-size: .85rem; margin-top: .35rem; }
118.figure-number, .table-number { font-weight: 600; }
119
120blockquote {
121  margin: 1rem 0;
122  padding: .1rem 0 .1rem 1rem;
123  border-left: 3px solid var(--orgo-rule);
124  color: var(--orgo-muted);
125}
126
127hr { border: 0; border-top: 1px solid var(--orgo-rule); margin: 1.75rem 0; }
128
129.center { text-align: center; }
130.verse { font-family: var(--orgo-mono); white-space: pre-wrap; }
131
132dt { font-weight: 600; margin-top: .5rem; }
133dd { margin: 0 0 0 1.5rem; color: var(--orgo-muted); }
134
135/* Code --------------------------------------------------------------------- */
136
137/* Inline code is prose furniture, so it follows the page rather than the code blocks. */
138code {
139  font: .875em/1.5 var(--orgo-mono);
140  background: var(--orgo-surface);
141  color: inherit;
142  border: 1px solid var(--orgo-rule);
143  padding: .05em .3em;
144  border-radius: 3px;
145}
146
147pre {
148  background: var(--orgo-code-bg);
149  color: var(--orgo-code-fg);
150  border: 1px solid var(--orgo-code-rule);
151  border-radius: 4px;
152  padding: .8rem 1rem;
153  font-size: .875rem;
154  overflow-x: auto;
155}
156
157pre code { background: none; color: inherit; border: 0; padding: 0; }
158
159/* Tables — a wiki lives in them, so they get zebra rows and a sticky-looking head. */
160
161table {
162  border-collapse: collapse;
163  margin: 1rem 0;
164  font-size: .9rem;
165  display: block;
166  overflow-x: auto;
167}
168caption { text-align: left; color: var(--orgo-muted); font-size: .85rem; padding-bottom: .35rem; }
169th, td { text-align: left; padding: .35rem .7rem; border: 1px solid var(--orgo-rule); }
170th { background: var(--orgo-surface); font-weight: 600; }
171tbody tr:nth-child(even) td { background: var(--orgo-surface); }
172
173/* Org-specific markup ------------------------------------------------------ */
174
175.tag {
176  font: .7rem/1.6 var(--orgo-mono);
177  color: var(--orgo-muted);
178  background: var(--orgo-surface);
179  border: 1px solid var(--orgo-rule);
180  border-radius: 3px;
181  padding: .05em .45em;
182  vertical-align: middle;
183}
184
185/* TODO state is content in a notes site, not decoration. */
186.todo, .done {
187  font: .7rem/1.6 var(--orgo-mono);
188  letter-spacing: .04em;
189  border-radius: 3px;
190  padding: .05em .45em;
191  vertical-align: middle;
192  color: #ffffff;
193}
194.todo { background: var(--orgo-todo); }
195.done { background: var(--orgo-done); }
196.priority { color: var(--orgo-todo); font-family: var(--orgo-mono); font-size: .8em; }
197
198time.timestamp { color: var(--orgo-muted); font-family: var(--orgo-mono); font-size: .9em; }
199time.inactive { opacity: .75; }
200
201/* Checkbox lists: the three org states, including `[-]`, which HTML has no input for.
202   The `[X]` marker is the bullet, so the list's own is dropped. */
203li.on, li.off, li.trans { list-style: none; }
204li.on { color: var(--orgo-muted); text-decoration: line-through; }
205li.trans { color: var(--orgo-muted); }
206
207.footnotes { margin-top: 2.5rem; font-size: .9rem; color: var(--orgo-muted); }
208.footnote-ref a { text-decoration: none; }
209
210/* Table of contents: in the margin once there is a margin to put it in ------ */
211
212nav.toc {
213  background: var(--orgo-surface);
214  border: 1px solid var(--orgo-rule);
215  border-radius: 4px;
216  padding: .6rem 1rem .8rem;
217  margin: 0 0 1.5rem;
218  font-size: .875rem;
219}
220nav.toc h2 {
221  font-size: .7rem;
222  text-transform: uppercase;
223  letter-spacing: .07em;
224  color: var(--orgo-muted);
225  margin: 0 0 .35rem;
226  padding: 0;
227  border: 0;
228}
229nav.toc ul { margin: 0; padding-left: 1rem; }
230nav.toc li { margin: .1rem 0; }
231
232@media (min-width: 62rem) {
233  main { max-width: var(--orgo-wide); }
234  /* Floated rather than gridded: the layout puts the contents block wherever it likes
235     in the document, and a float lands in the margin from any of those positions. */
236  nav.toc {
237    float: right;
238    width: 16rem;
239    margin: 0 0 1.5rem 2.5rem;
240  }
241  /* Prose keeps its measure even though the page is wide; the things that actually
242     want the extra room — code, tables, figures — are let out of it. */
243  main > * { max-width: var(--orgo-measure); }
244  main > pre, main > table, main > figure, main > nav.toc { max-width: none; }
245}
246
247/* Listing pages ------------------------------------------------------------ */
248
249ul.post-list { list-style: none; padding: 0; }
250ul.post-list > li { padding: .6rem 0; border-bottom: 1px solid var(--orgo-rule); }
251ul.post-list a { font-weight: 600; }
252ul.post-list time { color: var(--orgo-muted); font-family: var(--orgo-mono); font-size: .85rem; }
253p.excerpt { margin: .25rem 0; color: var(--orgo-muted); font-size: .9rem; }
254span.reading-time { font-size: .8rem; color: var(--orgo-muted); }
255
256ul.tag-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
257
258nav.pagination {
259  display: flex;
260  gap: 1rem;
261  align-items: baseline;
262  margin-top: 1.5rem;
263  font-size: .9rem;
264  color: var(--orgo-muted);
265}
266
267/* Footer ------------------------------------------------------------------- */
268
269body > footer {
270  border-top: 1px solid var(--orgo-rule);
271  padding: 1.25rem 1.5rem;
272  color: var(--orgo-muted);
273  font-size: .85rem;
274  text-align: center;
275}