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 coloured by
 22     `highlight.theme` and that default (InspiredGitHub) is light. To let blocks follow
 23     prefers-color-scheme, set `highlight.theme_dark` to a dark theme and override these
 24     three in a dark query of your own. */
 25  --orgo-todo: #b02a37;
 26  --orgo-done: #2c7a4b;
 27  --orgo-code-bg: #f6f8fa;
 28  --orgo-code-fg: #323232;
 29  --orgo-code-rule: #e3e7ec;
 30}
 31
 32@media (prefers-color-scheme: dark) {
 33  :root {
 34    --orgo-ink: #dee3ea;
 35    --orgo-muted: #9aa4b2;
 36    --orgo-rule: #2b3138;
 37    --orgo-accent: #79b8ff;
 38    --orgo-surface: #171a1f;
 39    --orgo-todo: #f0909a;
 40    --orgo-done: #74c795;
 41    --orgo-bg: #0f1216;
 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: 16px/1.65 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 and navigation ---------------------------------------------------- */
 57
 58body > header {
 59  border-bottom: 1px solid var(--orgo-rule);
 60  padding: 1rem 1.5rem;
 61  display: flex;
 62  flex-wrap: wrap;
 63  gap: .5rem 1.5rem;
 64  align-items: baseline;
 65}
 66
 67.site-title { font-weight: 700; color: var(--orgo-ink); text-decoration: none; }
 68
 69body > header nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
 70body > header nav a { color: var(--orgo-muted); text-decoration: none; }
 71body > header nav a:hover { color: var(--orgo-accent); text-decoration: underline; }
 72
 73/* Page body ---------------------------------------------------------------- */
 74
 75main {
 76  max-width: var(--orgo-measure);
 77  margin: 0 auto;
 78  padding: 2.5rem 1.5rem 4rem;
 79}
 80
 81h1 { font-size: 1.9rem; line-height: 1.2; margin: 0 0 1rem; }
 82h2 { font-size: 1.35rem; margin: 2.25rem 0 .75rem; }
 83h3 { font-size: 1.1rem; margin: 1.75rem 0 .5rem; }
 84h4, h5, h6 { font-size: 1rem; margin: 1.5rem 0 .5rem; }
 85
 86a { color: var(--orgo-accent); }
 87
 88p.page-date { color: var(--orgo-muted); margin-top: -.5rem; }
 89
 90img, video { max-width: 100%; height: auto; }
 91
 92figure { margin: 1.5rem 0; }
 93figcaption { color: var(--orgo-muted); font-size: .9rem; margin-top: .4rem; }
 94.figure-number, .table-number { font-weight: 600; }
 95
 96blockquote {
 97  margin: 1.5rem 0;
 98  padding-left: 1rem;
 99  border-left: 3px solid var(--orgo-rule);
100  color: var(--orgo-muted);
101}
102
103hr { border: 0; border-top: 1px solid var(--orgo-rule); margin: 2rem 0; }
104
105.center { text-align: center; }
106.verse { font-family: var(--orgo-mono); white-space: pre-wrap; }
107
108dt { font-weight: 600; margin-top: .75rem; }
109dd { margin: 0 0 0 1.5rem; }
110
111/* Code --------------------------------------------------------------------- */
112
113/* Inline code is prose furniture, so it follows the page rather than the code blocks. */
114code {
115  font: .875em/1.5 var(--orgo-mono);
116  background: var(--orgo-surface);
117  color: inherit;
118  padding: .1em .35em;
119  border-radius: 3px;
120}
121
122pre {
123  background: var(--orgo-code-bg);
124  color: var(--orgo-code-fg);
125  border: 1px solid var(--orgo-code-rule);
126  border-radius: 4px;
127  padding: .9rem 1rem;
128  overflow-x: auto;
129}
130
131pre code { background: none; color: inherit; padding: 0; }
132
133/* Tables ------------------------------------------------------------------- */
134
135table { border-collapse: collapse; margin: 1.25rem 0; display: block; overflow-x: auto; }
136caption { text-align: left; color: var(--orgo-muted); font-size: .9rem; padding-bottom: .4rem; }
137th, td { text-align: left; padding: .45rem .75rem; border-bottom: 1px solid var(--orgo-rule); }
138th { font-weight: 600; }
139
140/* Org-specific markup ------------------------------------------------------ */
141
142.tag {
143  font-size: .75rem;
144  font-family: var(--orgo-mono);
145  color: var(--orgo-muted);
146  border: 1px solid var(--orgo-rule);
147  border-radius: 999px;
148  padding: .05em .55em;
149  vertical-align: middle;
150}
151
152.todo, .done { font-size: .75em; font-family: var(--orgo-mono); letter-spacing: .04em; }
153.todo { color: var(--orgo-todo); }
154.done { color: var(--orgo-done); }
155.priority { color: var(--orgo-muted); font-family: var(--orgo-mono); font-size: .8em; }
156
157time.timestamp { color: var(--orgo-muted); font-family: var(--orgo-mono); font-size: .9em; }
158
159li.on, li.trans { color: var(--orgo-muted); }
160li.on { text-decoration: line-through; }
161
162.footnotes { margin-top: 3rem; font-size: .9rem; color: var(--orgo-muted); }
163.footnote-ref a { text-decoration: none; }
164
165/* Table of contents, from page.toc ----------------------------------------- */
166
167nav.toc { margin: 1.5rem 0 2.5rem; }
168nav.toc h2 {
169  font-size: .8rem;
170  text-transform: uppercase;
171  letter-spacing: .06em;
172  color: var(--orgo-muted);
173  margin: 0 0 .35rem;
174}
175nav.toc ul { margin: 0; padding-left: 1.1rem; }
176nav.toc li { margin: .1rem 0; }
177
178/* Listing pages: collections, tag indexes, pagination ---------------------- */
179
180ul.post-list { list-style: none; padding: 0; }
181ul.post-list > li { padding: .9rem 0; border-bottom: 1px solid var(--orgo-rule); }
182ul.post-list a { font-weight: 600; }
183ul.post-list time { color: var(--orgo-muted); font-size: .9rem; }
184p.excerpt { margin: .3rem 0 .2rem; color: var(--orgo-muted); }
185span.reading-time { font-size: .85rem; color: var(--orgo-muted); }
186
187ul.tag-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1rem; }
188
189nav.pagination {
190  display: flex;
191  gap: 1rem;
192  align-items: baseline;
193  margin-top: 2rem;
194  color: var(--orgo-muted);
195  font-size: .9rem;
196}
197
198/* Footer ------------------------------------------------------------------- */
199
200body > footer {
201  border-top: 1px solid var(--orgo-rule);
202  padding: 1.5rem;
203  color: var(--orgo-muted);
204  font-size: .9rem;
205  text-align: center;
206}