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