krz/orgo

  1/* orgo built-in theme: blog
  2 *
  3 * A personal site of dated writing. Serif prose at a narrow measure, a masthead rather
  4 * than a toolbar, and listing pages — the blog index, a tag page, a feed's HTML
  5 * counterpart — treated as first-class rather than as an afterthought.
  6 *
  7 * Every colour is a custom property on :root, so a stylesheet of your own loaded after
  8 * this one can retheme the site by redefining a handful of values. */
  9
 10:root {
 11  --orgo-ink: #23201d;
 12  --orgo-muted: #6b645d;
 13  --orgo-rule: #e5e0d8;
 14  --orgo-accent: #9a3412;
 15  --orgo-surface: #faf7f2;
 16  --orgo-bg: #fdfcfa;
 17  --orgo-measure: 36rem;
 18  --orgo-font: Iowan Old Style, Charter, Palatino, Georgia, "Times New Roman", serif;
 19  --orgo-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
 20  --orgo-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
 21  /* These three colour code *blocks* only; inline code follows the page. A block keeps
 22     a light surface in both colour schemes, because syntax.css is coloured by
 23     `highlight.theme` and that default (InspiredGitHub) is light. To let blocks follow
 24     prefers-color-scheme, set `highlight.theme_dark` to a dark theme and override these
 25     three in a dark query of your own. */
 26  --orgo-todo: #b02a37;
 27  --orgo-done: #2c7a4b;
 28  --orgo-code-bg: #f5f2ec;
 29  --orgo-code-fg: #323232;
 30  --orgo-code-rule: #e5e0d8;
 31}
 32
 33@media (prefers-color-scheme: dark) {
 34  :root {
 35    --orgo-ink: #e6e1da;
 36    --orgo-muted: #a49c93;
 37    --orgo-rule: #322e2a;
 38    --orgo-accent: #f0a066;
 39    --orgo-surface: #1b1917;
 40    --orgo-todo: #f0909a;
 41    --orgo-done: #74c795;
 42    --orgo-bg: #141312;
 43  }
 44}
 45
 46* { box-sizing: border-box; }
 47
 48body {
 49  margin: 0;
 50  background: var(--orgo-bg);
 51  color: var(--orgo-ink);
 52  font: 18px/1.7 var(--orgo-font);
 53  -webkit-font-smoothing: antialiased;
 54  /* A bare URL or a long identifier must wrap, not widen the page on a phone. */
 55  overflow-wrap: break-word;
 56}
 57
 58/* Masthead ----------------------------------------------------------------- */
 59
 60body > header {
 61  max-width: var(--orgo-measure);
 62  margin: 0 auto;
 63  padding: 3rem 1.5rem 1.5rem;
 64  text-align: center;
 65  display: flex;
 66  flex-direction: column;
 67  align-items: center;
 68  gap: .75rem;
 69}
 70
 71.site-title {
 72  font-size: 1.5rem;
 73  font-weight: 400;
 74  letter-spacing: .02em;
 75  color: var(--orgo-ink);
 76  text-decoration: none;
 77}
 78
 79body > header nav {
 80  display: flex;
 81  flex-wrap: wrap;
 82  justify-content: center;
 83  gap: 1.5rem;
 84  font: .8rem/1 var(--orgo-ui);
 85  text-transform: uppercase;
 86  letter-spacing: .1em;
 87}
 88body > header nav a { color: var(--orgo-muted); text-decoration: none; }
 89body > header nav a:hover { color: var(--orgo-accent); }
 90
 91/* Page body ---------------------------------------------------------------- */
 92
 93main {
 94  max-width: var(--orgo-measure);
 95  margin: 0 auto;
 96  padding: 2rem 1.5rem 5rem;
 97}
 98
 99h1 {
100  font-size: 2.1rem;
101  font-weight: 400;
102  line-height: 1.25;
103  letter-spacing: -0.01em;
104  margin: 0 0 .5rem;
105}
106h2 { font-size: 1.4rem; font-weight: 600; margin: 2.5rem 0 .75rem; }
107h3 { font-size: 1.15rem; font-weight: 600; margin: 2rem 0 .5rem; }
108h4, h5, h6 { font-size: 1rem; font-weight: 600; margin: 1.5rem 0 .5rem; }
109
110a { color: var(--orgo-accent); text-underline-offset: .15em; }
111
112/* The byline the built-in layout prints under the title. */
113p.page-date {
114  font: .8rem/1 var(--orgo-ui);
115  text-transform: uppercase;
116  letter-spacing: .1em;
117  color: var(--orgo-muted);
118  margin: 0 0 2.5rem;
119}
120
121img, video { max-width: 100%; height: auto; }
122
123figure { margin: 2rem 0; }
124figcaption {
125  font: .85rem/1.5 var(--orgo-ui);
126  color: var(--orgo-muted);
127  margin-top: .5rem;
128  text-align: center;
129}
130.figure-number, .table-number { font-weight: 600; }
131
132blockquote {
133  margin: 2rem 0;
134  padding: 0 1.5rem;
135  border-left: 2px solid var(--orgo-accent);
136  font-style: italic;
137  color: var(--orgo-muted);
138}
139
140hr {
141  border: 0;
142  margin: 3rem auto;
143  width: 6rem;
144  border-top: 1px solid var(--orgo-rule);
145}
146
147.center { text-align: center; }
148.verse { font-family: var(--orgo-mono); font-size: .95rem; white-space: pre-wrap; }
149
150dt { font-weight: 600; margin-top: .75rem; }
151dd { margin: 0 0 0 1.5rem; }
152
153/* Code --------------------------------------------------------------------- */
154
155/* Inline code is prose furniture, so it follows the page rather than the code blocks. */
156code {
157  font: .85em/1.5 var(--orgo-mono);
158  background: var(--orgo-surface);
159  color: inherit;
160  padding: .1em .35em;
161  border-radius: 3px;
162}
163
164pre {
165  background: var(--orgo-code-bg);
166  color: var(--orgo-code-fg);
167  border: 1px solid var(--orgo-code-rule);
168  border-radius: 4px;
169  padding: 1rem 1.1rem;
170  font-size: .9rem;
171  line-height: 1.55;
172  overflow-x: auto;
173}
174
175pre code { background: none; color: inherit; padding: 0; }
176
177/* Tables ------------------------------------------------------------------- */
178
179table {
180  border-collapse: collapse;
181  margin: 2rem 0;
182  font: .95rem/1.5 var(--orgo-ui);
183  display: block;
184  overflow-x: auto;
185}
186caption { text-align: left; color: var(--orgo-muted); font-size: .9rem; padding-bottom: .5rem; }
187th, td { text-align: left; padding: .5rem .85rem; border-bottom: 1px solid var(--orgo-rule); }
188th {
189  font-size: .75rem;
190  text-transform: uppercase;
191  letter-spacing: .06em;
192  color: var(--orgo-muted);
193}
194
195/* Org-specific markup ------------------------------------------------------ */
196
197.tag {
198  font: .7rem/1.6 var(--orgo-ui);
199  text-transform: uppercase;
200  letter-spacing: .08em;
201  color: var(--orgo-muted);
202  background: var(--orgo-surface);
203  border: 1px solid var(--orgo-rule);
204  border-radius: 999px;
205  padding: .1em .7em;
206  vertical-align: middle;
207}
208
209.todo, .done { font: .7em/1 var(--orgo-mono); letter-spacing: .05em; }
210.todo { color: var(--orgo-todo); }
211.done { color: var(--orgo-done); }
212.priority { color: var(--orgo-muted); font-family: var(--orgo-mono); font-size: .8em; }
213
214time.timestamp { font: .9em/1 var(--orgo-ui); color: var(--orgo-muted); }
215
216li.on, li.trans { color: var(--orgo-muted); }
217li.on { text-decoration: line-through; }
218
219.footnotes {
220  margin-top: 4rem;
221  font-size: .9rem;
222  color: var(--orgo-muted);
223}
224.footnote-ref a { text-decoration: none; }
225
226/* Table of contents, from page.toc ----------------------------------------- */
227
228nav.toc {
229  border-top: 1px solid var(--orgo-rule);
230  border-bottom: 1px solid var(--orgo-rule);
231  padding: 1rem 0;
232  margin: 2rem 0 3rem;
233  font: .95rem/1.6 var(--orgo-ui);
234}
235nav.toc h2 {
236  font-size: .7rem;
237  text-transform: uppercase;
238  letter-spacing: .1em;
239  color: var(--orgo-muted);
240  margin: 0 0 .5rem;
241}
242nav.toc ul { margin: 0; padding-left: 1.1rem; }
243nav.toc li { margin: .15rem 0; }
244
245/* Listing pages ------------------------------------------------------------ */
246
247ul.post-list { list-style: none; padding: 0; margin: 2rem 0 0; }
248ul.post-list > li { padding: 1.75rem 0; border-bottom: 1px solid var(--orgo-rule); }
249ul.post-list > li:first-child { padding-top: 0; }
250ul.post-list time {
251  display: block;
252  font: .75rem/1 var(--orgo-ui);
253  text-transform: uppercase;
254  letter-spacing: .1em;
255  color: var(--orgo-muted);
256  margin-bottom: .4rem;
257}
258ul.post-list a {
259  font-size: 1.3rem;
260  line-height: 1.3;
261  color: var(--orgo-ink);
262  text-decoration: none;
263}
264ul.post-list a:hover { color: var(--orgo-accent); }
265p.excerpt { margin: .5rem 0 .35rem; color: var(--orgo-muted); font-size: .95rem; }
266span.reading-time { font: .75rem/1 var(--orgo-ui); letter-spacing: .06em; color: var(--orgo-muted); }
267
268ul.tag-list {
269  list-style: none;
270  padding: 0;
271  display: flex;
272  flex-wrap: wrap;
273  gap: .75rem 1.25rem;
274  font: .95rem/1.6 var(--orgo-ui);
275}
276
277nav.pagination {
278  display: flex;
279  justify-content: space-between;
280  align-items: baseline;
281  gap: 1rem;
282  margin-top: 3rem;
283  font: .85rem/1 var(--orgo-ui);
284  text-transform: uppercase;
285  letter-spacing: .08em;
286  color: var(--orgo-muted);
287}
288
289/* Footer ------------------------------------------------------------------- */
290
291body > footer {
292  max-width: var(--orgo-measure);
293  margin: 0 auto;
294  border-top: 1px solid var(--orgo-rule);
295  padding: 1.5rem;
296  font: .85rem/1.6 var(--orgo-ui);
297  color: var(--orgo-muted);
298  text-align: center;
299}