krz/orgo
Lightning fast org-mode static site generator.
clone: git clone https://gitbay.org/krz/orgo.git
1/* orgo built-in theme: wiki
2 *
3 * A dense reference site: notes, a personal knowledge base, a manual. Wide and
4 * information-first rather than roomy — a table of contents parked in the margin on a
5 * large screen, compact headings with visible structure, tables and task lists styled
6 * because a wiki is mostly made of them, and org's TODO keywords shown as badges since
7 * in a notes site they are content rather than decoration.
8 *
9 * Every colour is a custom property on :root, so a stylesheet of your own loaded after
10 * this one can retheme the site by redefining a handful of values. */
11
12:root {
13 --orgo-ink: #1f2328;
14 --orgo-muted: #656d76;
15 --orgo-rule: #d8dee4;
16 --orgo-accent: #0969da;
17 --orgo-surface: #f6f8fa;
18 --orgo-bg: #ffffff;
19 --orgo-measure: 46rem;
20 --orgo-wide: 74rem;
21 --orgo-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
22 --orgo-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
23 /* These three colour code *blocks* only; inline code follows the page. A block keeps
24 a light surface in both colour schemes, because syntax.css is coloured by
25 `highlight.theme` and that default (InspiredGitHub) is light. To let blocks follow
26 prefers-color-scheme, set `highlight.theme_dark` to a dark theme and override these
27 three in a dark query of your own. */
28 --orgo-todo: #b02a37;
29 --orgo-done: #2c7a4b;
30 --orgo-code-bg: #f6f8fa;
31 --orgo-code-fg: #323232;
32 --orgo-code-rule: #d8dee4;
33}
34
35@media (prefers-color-scheme: dark) {
36 :root {
37 --orgo-ink: #e6edf3;
38 --orgo-muted: #8d96a0;
39 --orgo-rule: #30363d;
40 --orgo-accent: #6cb6ff;
41 --orgo-surface: #161b22;
42 --orgo-bg: #0d1117;
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: 15px/1.6 var(--orgo-font);
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/* Header ------------------------------------------------------------------- */
58
59body > header {
60 background: var(--orgo-surface);
61 border-bottom: 1px solid var(--orgo-rule);
62 padding: .7rem 1.5rem;
63 display: flex;
64 flex-wrap: wrap;
65 gap: .5rem 1.5rem;
66 align-items: baseline;
67}
68
69.site-title {
70 font-weight: 700;
71 font-size: 1rem;
72 color: var(--orgo-ink);
73 text-decoration: none;
74}
75
76body > header nav { display: flex; flex-wrap: wrap; gap: 1.1rem; font-size: .9rem; }
77body > header nav a { color: var(--orgo-muted); text-decoration: none; }
78body > header nav a:hover { color: var(--orgo-accent); text-decoration: underline; }
79
80/* Page body ---------------------------------------------------------------- */
81
82main {
83 max-width: var(--orgo-measure);
84 margin: 0 auto;
85 padding: 2rem 1.5rem 4rem;
86}
87
88h1 {
89 font-size: 1.8rem;
90 line-height: 1.25;
91 margin: 0 0 1rem;
92 padding-bottom: .4rem;
93 border-bottom: 1px solid var(--orgo-rule);
94}
95h2 {
96 font-size: 1.3rem;
97 margin: 2rem 0 .6rem;
98 padding-bottom: .25rem;
99 border-bottom: 1px solid var(--orgo-rule);
100}
101h3 { font-size: 1.05rem; margin: 1.5rem 0 .4rem; }
102h4, h5, h6 { font-size: .95rem; margin: 1.25rem 0 .4rem; }
103
104/* Section numbers, when html.section_numbers is on. */
105[class^="section-number-"] { color: var(--orgo-muted); font-weight: 400; }
106
107a { color: var(--orgo-accent); text-decoration: none; }
108a:hover { text-decoration: underline; }
109
110p.page-date { color: var(--orgo-muted); font-size: .9rem; margin-top: -.5rem; }
111
112p, ul, ol { margin: .6rem 0; }
113li { margin: .15rem 0; }
114
115img, video { max-width: 100%; height: auto; }
116
117figure { margin: 1.25rem 0; }
118figcaption { color: var(--orgo-muted); font-size: .85rem; margin-top: .35rem; }
119.figure-number, .table-number { font-weight: 600; }
120
121blockquote {
122 margin: 1rem 0;
123 padding: .1rem 0 .1rem 1rem;
124 border-left: 3px solid var(--orgo-rule);
125 color: var(--orgo-muted);
126}
127
128hr { border: 0; border-top: 1px solid var(--orgo-rule); margin: 1.75rem 0; }
129
130.center { text-align: center; }
131.verse { font-family: var(--orgo-mono); white-space: pre-wrap; }
132
133dt { font-weight: 600; margin-top: .5rem; }
134dd { margin: 0 0 0 1.5rem; color: var(--orgo-muted); }
135
136/* Code --------------------------------------------------------------------- */
137
138/* Inline code is prose furniture, so it follows the page rather than the code blocks. */
139code {
140 font: .875em/1.5 var(--orgo-mono);
141 background: var(--orgo-surface);
142 color: inherit;
143 border: 1px solid var(--orgo-rule);
144 padding: .05em .3em;
145 border-radius: 3px;
146}
147
148pre {
149 background: var(--orgo-code-bg);
150 color: var(--orgo-code-fg);
151 border: 1px solid var(--orgo-code-rule);
152 border-radius: 4px;
153 padding: .8rem 1rem;
154 font-size: .875rem;
155 overflow-x: auto;
156}
157
158pre code { background: none; color: inherit; border: 0; padding: 0; }
159
160/* Tables — a wiki lives in them, so they get zebra rows and a sticky-looking head. */
161
162table {
163 border-collapse: collapse;
164 margin: 1rem 0;
165 font-size: .9rem;
166 display: block;
167 overflow-x: auto;
168}
169caption { text-align: left; color: var(--orgo-muted); font-size: .85rem; padding-bottom: .35rem; }
170th, td { text-align: left; padding: .35rem .7rem; border: 1px solid var(--orgo-rule); }
171th { background: var(--orgo-surface); font-weight: 600; }
172tbody tr:nth-child(even) td { background: var(--orgo-surface); }
173
174/* Org-specific markup ------------------------------------------------------ */
175
176.tag {
177 font: .7rem/1.6 var(--orgo-mono);
178 color: var(--orgo-muted);
179 background: var(--orgo-surface);
180 border: 1px solid var(--orgo-rule);
181 border-radius: 3px;
182 padding: .05em .45em;
183 vertical-align: middle;
184}
185
186/* TODO state is content in a notes site, not decoration. */
187.todo, .done {
188 font: .7rem/1.6 var(--orgo-mono);
189 letter-spacing: .04em;
190 border-radius: 3px;
191 padding: .05em .45em;
192 vertical-align: middle;
193 color: #ffffff;
194}
195.todo { background: var(--orgo-todo); }
196.done { background: var(--orgo-done); }
197.priority { color: var(--orgo-todo); font-family: var(--orgo-mono); font-size: .8em; }
198
199time.timestamp { color: var(--orgo-muted); font-family: var(--orgo-mono); font-size: .9em; }
200time.inactive { opacity: .75; }
201
202/* Checkbox lists: the three org states, including `[-]`, which HTML has no input for.
203 The `[X]` marker is the bullet, so the list's own is dropped. */
204li.on, li.off, li.trans { list-style: none; }
205li.on { color: var(--orgo-muted); text-decoration: line-through; }
206li.trans { color: var(--orgo-muted); }
207
208.footnotes { margin-top: 2.5rem; font-size: .9rem; color: var(--orgo-muted); }
209.footnote-ref a { text-decoration: none; }
210
211/* Table of contents: in the margin once there is a margin to put it in ------ */
212
213nav.toc {
214 background: var(--orgo-surface);
215 border: 1px solid var(--orgo-rule);
216 border-radius: 4px;
217 padding: .6rem 1rem .8rem;
218 margin: 0 0 1.5rem;
219 font-size: .875rem;
220}
221nav.toc h2 {
222 font-size: .7rem;
223 text-transform: uppercase;
224 letter-spacing: .07em;
225 color: var(--orgo-muted);
226 margin: 0 0 .35rem;
227 padding: 0;
228 border: 0;
229}
230nav.toc ul { margin: 0; padding-left: 1rem; }
231nav.toc li { margin: .1rem 0; }
232
233@media (min-width: 62rem) {
234 main { max-width: var(--orgo-wide); }
235 /* Floated rather than gridded: the layout puts the contents block wherever it likes
236 in the document, and a float lands in the margin from any of those positions. */
237 nav.toc {
238 float: right;
239 width: 16rem;
240 margin: 0 0 1.5rem 2.5rem;
241 }
242 /* Prose keeps its measure even though the page is wide; the things that actually
243 want the extra room — code, tables, figures — are let out of it. */
244 main > * { max-width: var(--orgo-measure); }
245 main > pre, main > table, main > figure, main > nav.toc { max-width: none; }
246}
247
248/* Listing pages ------------------------------------------------------------ */
249
250ul.post-list { list-style: none; padding: 0; }
251ul.post-list > li { padding: .6rem 0; border-bottom: 1px solid var(--orgo-rule); }
252ul.post-list a { font-weight: 600; }
253ul.post-list time { color: var(--orgo-muted); font-family: var(--orgo-mono); font-size: .85rem; }
254p.excerpt { margin: .25rem 0; color: var(--orgo-muted); font-size: .9rem; }
255span.reading-time { font-size: .8rem; color: var(--orgo-muted); }
256
257ul.tag-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
258
259nav.pagination {
260 display: flex;
261 gap: 1rem;
262 align-items: baseline;
263 margin-top: 1.5rem;
264 font-size: .9rem;
265 color: var(--orgo-muted);
266}
267
268/* Footer ------------------------------------------------------------------- */
269
270body > footer {
271 border-top: 1px solid var(--orgo-rule);
272 padding: 1.25rem 1.5rem;
273 color: var(--orgo-muted);
274 font-size: .85rem;
275 text-align: center;
276}