krz/orgo

  1/* orgo built-in theme: docs
  2 *
  3 * A documentation site: a guide read in order, with a contents block that matters, code
  4 * blocks that carry as much of the meaning as the prose, and a `#+LEDE:` line under the
  5 * title. Cooler and more technical than `blog`, narrower and more designed than `wiki`.
  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: 42rem;
 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 ------------------------------------------------------------------- */
 56
 57body > header {
 58  position: sticky;
 59  top: 0;
 60  z-index: 1;
 61  background: var(--orgo-bg);
 62  border-bottom: 1px solid var(--orgo-rule);
 63  padding: 1rem 1.5rem;
 64  display: flex;
 65  flex-wrap: wrap;
 66  gap: .5rem 1.5rem;
 67  align-items: baseline;
 68}
 69
 70.site-title {
 71  font-weight: 700;
 72  font-size: 1.05rem;
 73  color: var(--orgo-ink);
 74  text-decoration: none;
 75}
 76
 77body > header nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
 78body > header nav a {
 79  color: var(--orgo-muted);
 80  text-decoration: none;
 81  padding-bottom: .15rem;
 82  border-bottom: 2px solid transparent;
 83}
 84body > header nav a:hover { color: var(--orgo-ink); border-bottom-color: var(--orgo-accent); }
 85
 86/* Page body ---------------------------------------------------------------- */
 87
 88main {
 89  max-width: var(--orgo-measure);
 90  margin: 0 auto;
 91  padding: 2.5rem 1.5rem 5rem;
 92}
 93
 94h1 { font-size: 2rem; line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 .5rem; }
 95h2 { font-size: 1.35rem; letter-spacing: -0.01em; margin: 2.75rem 0 .75rem; }
 96h3 { font-size: 1.1rem; margin: 2rem 0 .5rem; }
 97h4, h5, h6 { font-size: 1rem; margin: 1.5rem 0 .5rem; }
 98
 99[class^="section-number-"] { color: var(--orgo-muted); font-weight: 400; }
100
101a { color: var(--orgo-accent); }
102
103/* `#+LEDE:` reaches the layout as page.keywords.lede; page.date as the byline. */
104p.lede { font-size: 1.1rem; color: var(--orgo-muted); margin-top: 0; }
105p.page-date { color: var(--orgo-muted); font-size: .9rem; }
106
107img, video { max-width: 100%; height: auto; }
108
109figure { margin: 1.75rem 0; }
110figcaption { color: var(--orgo-muted); font-size: .9rem; margin-top: .4rem; }
111.figure-number, .table-number { font-weight: 600; }
112
113/* A quote block reads as a note or a caution in a documentation site. */
114blockquote {
115  margin: 1.5rem 0;
116  padding: .75rem 1rem;
117  background: var(--orgo-surface);
118  border-left: 3px solid var(--orgo-accent);
119  border-radius: 0 4px 4px 0;
120  color: var(--orgo-muted);
121}
122blockquote > :first-child { margin-top: 0; }
123blockquote > :last-child { margin-bottom: 0; }
124
125hr { border: 0; border-top: 1px solid var(--orgo-rule); margin: 2.5rem 0; }
126
127.center { text-align: center; }
128.verse { font-family: var(--orgo-mono); white-space: pre-wrap; }
129
130dt { font-weight: 600; margin-top: .75rem; font-family: var(--orgo-mono); font-size: .95rem; }
131dd { margin: 0 0 0 1.5rem; }
132
133/* Code --------------------------------------------------------------------- */
134
135/* Inline code is prose furniture, so it follows the page rather than the code blocks. */
136code {
137  font: .875em/1.5 var(--orgo-mono);
138  background: var(--orgo-surface);
139  color: inherit;
140  padding: .1em .35em;
141  border-radius: 3px;
142}
143
144pre {
145  background: var(--orgo-code-bg);
146  color: var(--orgo-code-fg);
147  border: 1px solid var(--orgo-code-rule);
148  border-radius: 6px;
149  padding: .9rem 1.1rem;
150  font-size: .9rem;
151  line-height: 1.55;
152  overflow-x: auto;
153}
154
155pre code { background: none; color: inherit; padding: 0; }
156
157/* Tables ------------------------------------------------------------------- */
158
159table {
160  border-collapse: collapse;
161  width: 100%;
162  margin: 1.5rem 0;
163  display: block;
164  overflow-x: auto;
165}
166caption { text-align: left; color: var(--orgo-muted); font-size: .9rem; padding-bottom: .4rem; }
167th, td { text-align: left; padding: .5rem .75rem; border-bottom: 1px solid var(--orgo-rule); }
168th {
169  font-size: .8rem;
170  text-transform: uppercase;
171  letter-spacing: .05em;
172  color: var(--orgo-muted);
173}
174
175/* Org-specific markup ------------------------------------------------------ */
176
177.tag {
178  font: .72rem/1.6 var(--orgo-mono);
179  color: var(--orgo-muted);
180  background: var(--orgo-surface);
181  border: 1px solid var(--orgo-rule);
182  border-radius: 999px;
183  padding: .05em .6em;
184  vertical-align: middle;
185}
186
187.todo, .done { font: .72rem/1.6 var(--orgo-mono); letter-spacing: .04em; }
188.todo { color: var(--orgo-todo); }
189.done { color: var(--orgo-done); }
190.priority { color: var(--orgo-muted); font-family: var(--orgo-mono); font-size: .8em; }
191
192time.timestamp { color: var(--orgo-muted); font-family: var(--orgo-mono); font-size: .9em; }
193
194li.on, li.trans { color: var(--orgo-muted); }
195li.on { text-decoration: line-through; }
196
197.footnotes { margin-top: 3rem; font-size: .9rem; color: var(--orgo-muted); }
198.footnote-ref a { text-decoration: none; }
199
200/* Table of contents: a card, because in a guide it is navigation ----------- */
201
202nav.toc {
203  background: var(--orgo-surface);
204  border: 1px solid var(--orgo-rule);
205  border-radius: 6px;
206  padding: .75rem 1.25rem 1rem;
207  margin: 1.75rem 0 2.5rem;
208}
209nav.toc h2 {
210  font-size: .8rem;
211  text-transform: uppercase;
212  letter-spacing: .06em;
213  color: var(--orgo-muted);
214  margin: .25rem 0 .5rem;
215}
216nav.toc ul { margin: 0; padding-left: 1.1rem; }
217nav.toc li { margin: .15rem 0; }
218
219/* Listing pages: a guide's contents page, a tag index ---------------------- */
220
221ul.post-list { list-style: none; padding: 0; }
222ul.post-list > li { padding: 1rem 0; border-bottom: 1px solid var(--orgo-rule); }
223ul.post-list a { font-weight: 600; font-size: 1.05rem; }
224ul.post-list time { color: var(--orgo-muted); font-size: .9rem; }
225p.excerpt { margin: .35rem 0 .2rem; color: var(--orgo-muted); }
226span.reading-time { font-size: .85rem; color: var(--orgo-muted); }
227
228ul.tag-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem 1.25rem; }
229
230nav.pagination {
231  display: flex;
232  gap: 1rem;
233  align-items: baseline;
234  margin-top: 2.5rem;
235  color: var(--orgo-muted);
236  font-size: .9rem;
237}
238
239/* Footer ------------------------------------------------------------------- */
240
241body > footer {
242  border-top: 1px solid var(--orgo-rule);
243  padding: 1.5rem;
244  color: var(--orgo-muted);
245  font-size: .9rem;
246  text-align: center;
247}