1 /* -*- css-indent-offset: 2; -*- */
2 @charset "utf-8";
3 
4 html, body, div, span, applet, object, iframe,
5 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
6 a, abbr, acronym, address, big, cite, code,
7 del, dfn, em, img, ins, kbd, q, s, samp,
8 small, strike, strong, sub, sup, tt, var,
9 b, u, i, center,
10 dl, dt, dd, ol, ul, li,
11 fieldset, form, label, legend,
12 table, caption, tbody, tfoot, thead, tr, th, td,
13 article, aside, canvas, details, embed,
14 figure, figcaption, footer, header, hgroup,
15 menu, nav, output, ruby, section, summary,
16 time, mark, audio, video {
17   margin: 0;
18   padding: 0;
19   border: 0;
20   font-size: 100%;
21   font: inherit;
22   vertical-align: baseline;
23   box-sizing: border-box;
24 }
25 
26 html, body {
27   line-height: 1;
28   font-size: 18px;
29 }
30 
31 body {
32   background-color: #ffffea;
33   color: #383838;
34   padding: 1rem;
35 }
36 
37 #wrapper>header>nav>ul {
38   padding: 0;
39   list-style: none;
40 }
41 
42 #wrapper>header>nav>ul li {
43   display: inline-block;
44   margin: 3px 20px;
45 }
46 
47 #wrapper>header>nav>ul li:first-of-type {
48   margin-left: 0;
49 }
50 
51 #wrapper>header>nav>ul li a {
52   text-decoration: none;
53 }
54 
55 /* HTML5 display-role reset for older browsers */
56 article, aside, details, figcaption, figure,
57 footer, header, hgroup, menu, nav, section {
58   display: block;
59 }
60 
61 #wrapper {
62   max-width: 840px;
63   margin: 0 auto;
64 }
65 
66 body > header {
67   max-width: 840px;
68   margin: 0 auto;
69 }
70 
71 body > header > nav ul {
72   list-style: none;
73   padding: 0;
74   margin: 0;
75 }
76 
77 body > header > nav li {
78   display: inline;
79   margin-right: 20px;
80 }
81 
82 [data-title~=":"] {
83   display: none;
84 }
85 
86 .heading {
87   margin-bottom: 30px;
88 }
89 
90 h1.main-title::after {
91   content: '-----------------------------------------------------------------';
92 }
93 
94 p.subtitle {
95   font-style: italic;
96   font-size: 120%;
97   margin: 0;
98 }
99 
100 
101 body main {
102   margin: 0 auto;
103   max-width: 840px;
104 }
105 
106 article {
107   margin-bottom: 30px;
108 }
109 
110 h2::before, h3::before, h4::before, h5::before, h6::before {
111   font-family: monospace;
112 }
113 
114 h2::before { content: "## "; }
115 h3::before { content: "### "; }
116 h4::before { content: "#### "; }
117 h5::before { content: "##### "; }
118 h6::before { content: "###### "; }
119 
120 h1 {
121   position: relative;
122   display: table-cell;
123   padding: 20px 0 30px;
124   margin: 0;
125   overflow: hidden;
126 
127   font-size: 200%;
128 }
129 
130 /* a cool hack stolen from blog.soykaf.com */
131 h1::after, h2.fragment::after {
132   /* should be long enough */
133   content: '=================================================================';
134   position: absolute;
135   bottom: 0px;
136   left: 0;
137   white-space: nowrap;
138   font-family: monospace;
139 }
140 
141 h2.fragment {
142   position: relative;
143   display: table-cell;
144   padding: 20px 0 20px;
145   margin: 0;
146   overflow: hidden;
147 }
148 
149 h2.fragment::after {
150   content: '-----------------------------------------------------------------';
151   font-family: monospace;
152   z-index: -1;
153 }
154 
155 h2.fragment::before {
156   content: '';
157 }
158 
159 h1::after, h2::before, h3::before, h4::before, h5::before, h6::before {
160   /* color: hsla(0, 0%, 36%, 1); */
161   color: #242424;
162 }
163 
164 h1>a, h2.fragment>a {
165   text-decoration: none;
166 }
167 
168 h1>a:hover, h2.fragment>a:hover {
169   text-decoration: underline;
170 }
171 
172 h2, h3, h4, h5, h6 {
173   margin: 2rem 0 1rem;
174 }
175 
176 h2 {
177   font-size: 180%;
178 }
179 
180 h3 {
181   font-size: 160%;
182 }
183 
184 h4 {
185   font-size: 140%;
186 }
187 
188 h5 {
189   font-size: 120%;
190 }
191 
192 h6 {
193   font-size: 100%;
194 }
195 
196 ul.tags {
197   padding: 0;
198   margin: 0;
199   list-style: none;
200 }
201 
202 ul.tags::before {
203   content: 'tagged with: ';
204 }
205 
206 ul.tags li {
207   display: inline-block;
208   margin: 0 5px;
209 }
210 
211 header > p {
212   margin: 0;
213 }
214 
215 p {
216   margin: 1rem 0;
217   text-align: justify;
218   hyphens: auto;
219   white-space: pre-wrap;
220 }
221 
222 p, li {
223   line-height: 1.7;
224 }
225 
226 p.link::before {
227   content: ' => ';
228   font-family: monospace;
229 }
230 
231 a {
232   text-decoration: none;
233   color: #4b4baf;
234 }
235 
236 a:hover {
237   text-decoration: underline;
238 }
239 
240 /* other bit stolen from blog.soykaf.com */
241 a[href*="://"]::after, a[rel*="external"]::after {
242   content: " "url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20class='i-external'%20viewBox='0%200%2032%2032'%20width='14'%20height='14'%20fill='none'%20stroke='%23ff9800'%20stroke-linecap='round'%20stroke-linejoin='round'%20stroke-width='9.38%'%3E%3Cpath%20d='M14%209%20L3%209%203%2029%2023%2029%2023%2018%20M18%204%20L28%204%2028%2014%20M28%204%20L14%2018'/%3E%3C/svg%3E");
243 }
244 
245 ul, ol {
246   padding-left: 30px;
247   list-style: disc;
248 }
249 
250 ol {
251   list-style: decimal;
252 }
253 
254 code {
255   color: #971174;
256 }
257 
258 pre {
259   position: relative;
260   padding: 20px;
261   overflow-x: auto;
262   border-width: 1px;
263   border-color: #999999;
264   border-style: solid;
265   border-radius: 3px;
266   line-height: 1.4;
267   background-color: #fdf6e3;
268   color: #333;
269 }
270 
271 pre, code {
272   font-family: monospace;
273 }
274 
275 em {
276   font-style: italic;
277 }
278 
279 strong {
280   font-weight: bold;
281 }
282 
283 hr {
284   border: 0;
285   height: 1px;
286   background-color: hsla(0, 0%, 25%, 1);
287   width: 70%;
288   margin: 2rem auto;
289 }
290 
291 blockquote, q {
292   quotes: none;
293 }
294 
295 blockquote {
296   border-left: 3px solid hsla(113, 80%, 45%, 1);
297   padding-left: 10px;
298   font-style: italic;
299 }
300 
301 blockquote em {
302   font-style: normal;
303 }
304 
305 blockquote:before, blockquote:after,
306 q:before, q:after {
307   content: '';
308   content: none;
309 }
310 
311 img {
312   max-width: 100%;
313   height: auto;
314   display: block;
315   margin: 1rem auto;
316 }
317 
318 figure figcaption {
319   padding: 5px 0;
320   text-align: center;
321 }
322 
323 table {
324   border-collapse: collapse;
325   border-spacing: 0;
326 }
327 
328 nav.post-navigation {
329   margin-top: 50px;
330   display: flex;
331   flex-direction: row;
332 }
333 
334 nav.post-navigation a.next {
335   margin-left: auto;
336 }
337 
338 footer {
339   border-top: 1px solid #e6e0e0;
340   margin-top: 100px;
341   padding-top: 10px;
342   font-style: italic;
343   text-align: center;
344 }
345 
346 footer p {
347   margin: 0;
348 }
349 
350 
351 /* dark theme */
352 @media (prefers-color-scheme: dark) {
353   body {
354     color: #ffffea;
355     background-color: #383838;
356   }
357 
358   h1::after, h2.fragment::after {
359     color: #5c5c5c;
360   }
361 
362   h2::before, h3::before, h4::before, h5::before, h6::before {
363     color: #5c5c5c;
364   }
365 
366   a {
367     color: #8e8eff;
368   }
369 
370   code {
371     color: #ea7acd;
372   }
373 
374   pre {
375     border-color: #999999;
376     background-color: #2f2e2d;
377   }
378 
379   pre {
380     color: #ffffea;
381   }
382 }