krz/orgo

  1/* orgo built-in theme: plain
  2 *
  3 * Readable defaults and nothing else. System fonts, one measure, hairline rules — the
  4 * styling a page needs to be read comfortably, with no design opinion for a site to
  5 * grow out of. Start here when you intend to write your own CSS eventually.
  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: #1c1f24;
 12  --orgo-muted: #5b6472;
 13  --orgo-rule: #dfe3e8;
 14  --orgo-accent: #0b5fa5;
 15  --orgo-surface: #f6f8fa;
 16  --orgo-bg: #ffffff;
 17  --orgo-measure: 40rem;
 18  --orgo-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
 19  --orgo-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
 20  /* These three colour code *blocks* only; inline code follows the page. A block keeps
 21     a light surface in both colour schemes because syntax.css is generated from one
 22     syntect theme (`highlight.theme`, InspiredGitHub by default) and cannot follow
 23     prefers-color-scheme. Pair a dark highlight theme with overrides of these three. */
 24  --orgo-todo: #b02a37;
 25  --orgo-done: #2c7a4b;
 26  --orgo-code-bg: #f6f8fa;
 27  --orgo-code-fg: #323232;
 28  --orgo-code-rule: #e3e7ec;
 29}
 30
 31@media (prefers-color-scheme: dark) {
 32  :root {
 33    --orgo-ink: #dee3ea;
 34    --orgo-muted: #9aa4b2;
 35    --orgo-rule: #2b3138;
 36    --orgo-accent: #79b8ff;
 37    --orgo-surface: #171a1f;
 38    --orgo-todo: #f0909a;
 39    --orgo-done: #74c795;
 40    --orgo-bg: #0f1216;
 41  }
 42}
 43
 44* { box-sizing: border-box; }
 45
 46body {
 47  margin: 0;
 48  background: var(--orgo-bg);
 49  color: var(--orgo-ink);
 50  font: 16px/1.65 var(--orgo-font);
 51  /* A bare URL or a long identifier must wrap, not widen the page on a phone. */
 52  overflow-wrap: break-word;
 53}
 54
 55/* Header and navigation ---------------------------------------------------- */
 56
 57body > header {
 58  border-bottom: 1px solid var(--orgo-rule);
 59  padding: 1rem 1.5rem;
 60  display: flex;
 61  flex-wrap: wrap;
 62  gap: .5rem 1.5rem;
 63  align-items: baseline;
 64}
 65
 66.site-title { font-weight: 700; color: var(--orgo-ink); text-decoration: none; }
 67
 68body > header nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
 69body > header nav a { color: var(--orgo-muted); text-decoration: none; }
 70body > header nav a:hover { color: var(--orgo-accent); text-decoration: underline; }
 71
 72/* Page body ---------------------------------------------------------------- */
 73
 74main {
 75  max-width: var(--orgo-measure);
 76  margin: 0 auto;
 77  padding: 2.5rem 1.5rem 4rem;
 78}
 79
 80h1 { font-size: 1.9rem; line-height: 1.2; margin: 0 0 1rem; }
 81h2 { font-size: 1.35rem; margin: 2.25rem 0 .75rem; }
 82h3 { font-size: 1.1rem; margin: 1.75rem 0 .5rem; }
 83h4, h5, h6 { font-size: 1rem; margin: 1.5rem 0 .5rem; }
 84
 85a { color: var(--orgo-accent); }
 86
 87p.page-date { color: var(--orgo-muted); margin-top: -.5rem; }
 88
 89img, video { max-width: 100%; height: auto; }
 90
 91figure { margin: 1.5rem 0; }
 92figcaption { color: var(--orgo-muted); font-size: .9rem; margin-top: .4rem; }
 93.figure-number, .table-number { font-weight: 600; }
 94
 95blockquote {
 96  margin: 1.5rem 0;
 97  padding-left: 1rem;
 98  border-left: 3px solid var(--orgo-rule);
 99  color: var(--orgo-muted);
100}
101
102hr { border: 0; border-top: 1px solid var(--orgo-rule); margin: 2rem 0; }
103
104.center { text-align: center; }
105.verse { font-family: var(--orgo-mono); white-space: pre-wrap; }
106
107dt { font-weight: 600; margin-top: .75rem; }
108dd { margin: 0 0 0 1.5rem; }
109
110/* Code --------------------------------------------------------------------- */
111
112/* Inline code is prose furniture, so it follows the page rather than the code blocks. */
113code {
114  font: .875em/1.5 var(--orgo-mono);
115  background: var(--orgo-surface);
116  color: inherit;
117  padding: .1em .35em;
118  border-radius: 3px;
119}
120
121pre {
122  background: var(--orgo-code-bg);
123  color: var(--orgo-code-fg);
124  border: 1px solid var(--orgo-code-rule);
125  border-radius: 4px;
126  padding: .9rem 1rem;
127  overflow-x: auto;
128}
129
130pre code { background: none; color: inherit; padding: 0; }
131
132/* Tables ------------------------------------------------------------------- */
133
134table { border-collapse: collapse; margin: 1.25rem 0; display: block; overflow-x: auto; }
135caption { text-align: left; color: var(--orgo-muted); font-size: .9rem; padding-bottom: .4rem; }
136th, td { text-align: left; padding: .45rem .75rem; border-bottom: 1px solid var(--orgo-rule); }
137th { font-weight: 600; }
138
139/* Org-specific markup ------------------------------------------------------ */
140
141.tag {
142  font-size: .75rem;
143  font-family: var(--orgo-mono);
144  color: var(--orgo-muted);
145  border: 1px solid var(--orgo-rule);
146  border-radius: 999px;
147  padding: .05em .55em;
148  vertical-align: middle;
149}
150
151.todo, .done { font-size: .75em; font-family: var(--orgo-mono); letter-spacing: .04em; }
152.todo { color: var(--orgo-todo); }
153.done { color: var(--orgo-done); }
154.priority { color: var(--orgo-muted); font-family: var(--orgo-mono); font-size: .8em; }
155
156time.timestamp { color: var(--orgo-muted); font-family: var(--orgo-mono); font-size: .9em; }
157
158li.on, li.trans { color: var(--orgo-muted); }
159li.on { text-decoration: line-through; }
160
161.footnotes { margin-top: 3rem; font-size: .9rem; color: var(--orgo-muted); }
162.footnote-ref a { text-decoration: none; }
163
164/* Table of contents, from page.toc ----------------------------------------- */
165
166nav.toc { margin: 1.5rem 0 2.5rem; }
167nav.toc h2 {
168  font-size: .8rem;
169  text-transform: uppercase;
170  letter-spacing: .06em;
171  color: var(--orgo-muted);
172  margin: 0 0 .35rem;
173}
174nav.toc ul { margin: 0; padding-left: 1.1rem; }
175nav.toc li { margin: .1rem 0; }
176
177/* Listing pages: collections, tag indexes, pagination ---------------------- */
178
179ul.post-list { list-style: none; padding: 0; }
180ul.post-list > li { padding: .9rem 0; border-bottom: 1px solid var(--orgo-rule); }
181ul.post-list a { font-weight: 600; }
182ul.post-list time { color: var(--orgo-muted); font-size: .9rem; }
183p.excerpt { margin: .3rem 0 .2rem; color: var(--orgo-muted); }
184span.reading-time { font-size: .85rem; color: var(--orgo-muted); }
185
186ul.tag-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1rem; }
187
188nav.pagination {
189  display: flex;
190  gap: 1rem;
191  align-items: baseline;
192  margin-top: 2rem;
193  color: var(--orgo-muted);
194  font-size: .9rem;
195}
196
197/* Footer ------------------------------------------------------------------- */
198
199body > footer {
200  border-top: 1px solid var(--orgo-rule);
201  padding: 1.5rem;
202  color: var(--orgo-muted);
203  font-size: .9rem;
204  text-align: center;
205}