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