2:root {
3 --width-page: 700px;
5 color-scheme: dark;
7 --color-my-orange: hsl(31 74 57);
8 --color-my-orange-1: hsl(31 74 64);
9 --color-my-orange-2: hsl(31 74 68);
10 --color-font-main: hsl(254 74 95);
11 --color-font-second: hsl(249 10 78);
12 --color-font-faded: hsl(249 10 61);
14 --color-entry-hr: hsl(249 10 40);
16 --color-bg-1: hsl(249 10 14);
17 --color-bg-2: hsl(252 9 10);
19 --radius-search-bar: 7px;
21 --search-results-line-limit: 7;
23 /** CSS Table */
24 --color-table-1: rgba(200, 200, 200, 0.01);
25 --color-table-2: rgba(200, 200, 200, 0.02);
26 --color-table-3: rgba(200, 200, 200, 0.03);
27 --color-table-line: rgba(200, 200, 230, 0.08);
29 /** Code */
30 --code-bg: rgba(118, 174, 203, 0.03);
31 --code-color: hsl(200 45 80);
32 --code-border-color: hsl(200 45 35);
34 /** Annotations */
35 --color-anot-note: hsl(215 60 49);
36 --color-anot-note-bg: rgba(49, 111, 199, 0.05);
37 --color-anot-tip: hsl(162 60 49);
38 --color-anot-tip-bg: rgba(49, 199, 155, 0.05);
39 --color-anot-important: hsl(287 60 49);
40 --color-anot-important-bg: rgba(167, 49, 199, 0.05);
41 --color-anot-warning: hsl(27 62 52);
42 --color-anot-warning-bg: rgba(209, 125, 57, 0.05);
43 --color-anot-caution: hsl(0 59 50);
44 --color-anot-caution-bg: rgba(203, 53, 53, 0.05);
46 --color-anot-border: hsl(249 10 30);
47}
49html {
50 min-height: 100%;
51 font-size: 17px;
52 line-height: 1.55;
53}
55body {
56 min-height: 100vh;
57 display: flex;
58 flex-direction: column;
59 font-family: Verdana, Geneva, Tahoma, sans-serif;
60 background-color: var(--color-bg-1);
61 color: var(--color-font-main);
62 margin: 0;
63 padding: 0;
64 scrollbar-width: thin;
65 scrollbar-gutter: stable;
66}
68.main {
69 flex: 1;
70 display: flex;
71 justify-content: flex-start;
72 flex-direction: column;
73}
75.header {
76 background-color: var(--color-bg-2);
77 color: var(--color-my-orange);
78 padding: 0.8em;
79 text-align: center;
80 font-size: 2em;
81 letter-spacing: 2px;
82}
84.link-box {
85 padding: 1em;
86}
88.link-grid {
89 display: flex;
90 flex-wrap: wrap;
91 gap: 5px;
92 user-select: none;
93 text-align: center;
95 & a {
96 text-decoration: none;
97 color: inherit;
98 }
100 & div {
101 background-color: hsl(252 9 13);
102 border: solid 1px hsl(249 10 30);
103 border-radius: 5px;
104 padding: 0.8em;
105 padding-left: 1.2em;
106 padding-right: 1.2em;
108 white-space: normal;
109 word-break: break-word;
111 &:hover {
112 outline: 1px solid hsl(249 10 30);
113 background-color: hsl(252 9 15);
114 color: hsl(254 74 98);
115 cursor: pointer;
116 }
118 &:active {
119 outline: 2px solid hsl(249 10 30);
120 background-color: hsl(252 9 17);
121 color: hsl(254 74 100);
122 }
123 }
124}
126.link-box, .content {
127 margin-left: auto;
128 margin-right: auto;
129}
131.content {
132 padding-top: 1em;
133 padding-bottom: 4em;
134 width: 95%;
135 max-width: var(--width-page);
136}
138.content-text a {
139 color: var(--color-font-main) !important;
140 &:hover { color: var(--color-font-main) !important; }
141 &:active { color: var(--color-font-main) !important; }
142}
144.generic-page {
145 margin-bottom: 1.8em;
146 padding-bottom: 0.1em;
147 padding-left: 1em;
148 padding-right: 1em;
150 & hr {
151 margin-top: 2em;
152 padding-top: 1px;
153 border: none;
154 border-top: solid 2px hsl(249 10 30);
155 }
157 img {
158 width: 90%;
159 object-fit: contain;
160 }
161}
164.entry {
165 border-left: solid 4px var(--color-my-orange);
166 margin-top: 1.8em;
167 margin-bottom: 1.8em;
168 padding-bottom: 0.1em;
169 padding-left: 1em;
170 padding-right: 1em;
172 & hr {
173 margin-top: 2em;
174 padding-top: 1px;
175 border: none;
176 border-top: solid 2px var(--color-entry-hr);
177 }
179 img {
180 width: 90%;
181 object-fit: contain;
182 }
183}
185.entry-title {
186 margin-left: -20px;
187 text-transform: capitalize;
188 font-weight: bold;
189 font-style: italic;
190}
192.entry-metadata {
193 margin-top: 1px;
194 font-style: italic;
195 color: var(--color-font-faded);
196}
198.overview {
199 display: grid;
200 grid-template-columns: 1fr;
201 padding: 0;
202 margin: auto;
203 list-style: none;
204}
206.overview li {
207 padding: 6px;
208 padding-left: 15px;
209 padding-right: 15px;
210 border-bottom: solid 1px var(--color-table-line);
211}
213.overview li:not(.header):nth-child(2n) {
214 background: var(--color-table-1);
215}
217.overview li:not(.header):nth-child(2n + 1) {
218 background: var(--color-table-2);
219}
221.overview li:not(.header):hover {
222 background: var(--color-table-3);
224 & .overview-title {
225 color: var(--color-my-orange-2);
226 }
227}
229.overview-title {
230 float: left;
231 text-transform: capitalize;
232 font-weight: bold;
233 color: var(--color-my-orange);
234}
236.overview-metadata {
237 float: right;
238 color: var(--color-font-faded);
239}
241.right-reset {
242 font-style: normal;
243 float: right;
244}
246.link-arr {
247 font-size: 0.5em;
248 position: relative;
249 bottom: 0.9em;
250}
252.text {
253 margin-left: 20px;
255 & h1, h2 {
256 font-size: 1.7em;
257 color: var(--color-my-orange);
258 }
259}
261.title-with-line {
262 color: var(--color-my-orange);
263 text-align: center;
264 padding-bottom: 0.2em;
265 border-bottom: solid 3px hsl(249 10 30);
266}
268.link a {
269 text-decoration: underline dotted;
270 color: var(--color-my-orange);
272 &:hover {
273 text-decoration: underline;
274 color: var(--color-my-orange-1);
275 }
277 &:active {
278 color: var(--color-my-orange-2);
279 }
280}
282.link h2, h3, h4, h5, h6 {
283 a {
284 text-decoration: none;
285 }
286}
288.fat-link a {
289 text-decoration: none;
291 &:hover {
292 text-decoration-thickness: 5px;
293 }
294}
296.search-input {
297 display: flex;
298 justify-content: center;
299 margin: 20px 0;
301 form {
302 display: flex;
303 align-items: center;
304 width: 100%;
305 max-width: 500px; }
307 input {
308 flex: 1;
309 padding: 12px 16px;
310 font-size: 16px;
312 color: var(--color-font-faded);
313 background-color: var(--color-bg-2);
315 border: none;
316 border-radius: var(--radius-search-bar) 0 0 var(--radius-search-bar);
317 outline: none;
318 }
320 button {
321 padding: 12px 20px;
322 font-size: 16px;
324 color: var(--color-bg-1);
325 background-color: var(--color-my-orange);
327 border: none;
328 border-radius: 0 var(--radius-search-bar) var(--radius-search-bar) 0;
329 cursor: pointer;
331 &:hover {
332 background-color: var(--color-my-orange-1);
333 }
334 }
335}
337.search-results {
338 margin-top: 1em;
339 margin-bottom: 2em;
341 h1 {
342 margin-top: 0.6em;
343 margin-bottom: 0.2em;
344 }
345}
347.search-response {
348 text-align: center;
349 font-weight: bold;
350}
352.search-response.error {
353 color: var(--color-anot-caution);
354}
356.search-item {
357 background: var(--color-bg-1);
358 border-bottom: 1px solid var(--color-entry-hr);
359 margin-right: 20px;
361 .entry-metadata {
362 margin-top: 0.4em;
363 }
364}
366.search-preview {
367 margin-top: 0.6em;
368 margin-bottom: 1.2em;
370 line-clamp: var(--search-results-line-limit);
372 /** Fallback */
373 display: -webkit-box;
374 -webkit-line-clamp: var(--search-results-line-limit);
375 -webkit-box-orient: vertical;
377 overflow: hidden;
378}
380.skew {
381 margin-left: -20px;
382 padding-bottom: 0.3em;
383 text-transform: capitalize;
384 transform: skewY(-2deg);
385 transform-origin: top;
386 font-weight: bold;
387 font-style: italic;
388 text-decoration: underline;
389 text-decoration-thickness: 5px;
390 text-underline-offset: 12%;
391}
393.footer {
394 background-color: var(--color-bg-2);
395 padding: 1em;
396 text-align: center;
397 margin-top: auto;
398}
400/** Code */
401code {
402 font-size: 0.92em;
403 background-color: var(--code-bg);
404 color: var(--code-color);
405 border: solid 1px var(--code-border-color);
406 border-radius: 3px;
407 padding-left: 2px;
408 padding-right: 2px;
409 margin-left: 2px;
410 margin-right: 2px;
411}
413pre code {
414 font-size: 0.92em;
415 display: block;
416 background-color: var(--code-bg);
417 color: var(--code-color);
418 border: solid 1px var(--code-border-color);
419 border-radius: 3px;
420 padding: 5px;
421 padding-left: 8px;
422 padding-right: 8px;
423 line-height: 1.5;
424 text-wrap: auto;
425 white-space: pre;
426 overflow-x: auto;
427}
429/** Quotes */
430blockquote {
431 color: hsl(233 13 61);
432 border-left: solid 3px hsl(233 13 61);
433 margin-left: 0;
434 margin-right: 0;
435 padding-left: 1em;
436 padding-right: 1em;
437}
439/** Annotations */
440.bq-note,
441.bq-tip,
442.bq-important,
443.bq-warning,
444.bq-caution {
445 font-style: normal;
446 color: var(--color-font-second);
447 background-color: transparent;
448 margin-left: 1.5em;
449 margin-right: 1.5em;
450 padding: 7px;
451 padding-left: 10px;
452 padding-right: 10px;
453 border-radius: 7px;
454 border: solid 1px var(--color-anot-border);
455 border-left: solid 5px transparent;
456}
458.bq-note::before,
459.bq-tip::before,
460.bq-important::before,
461.bq-warning::before,
462.bq-caution::before {
463 padding-top: 5px;
464 white-space: pre;
465 font-weight: bold;
466 display: block;
467}
469.bq-note {
470 border-left-color: var(--color-anot-note);
471 background-color: var(--color-anot-note-bg);
473}
475.bq-note::before {
476 content: "Note\A";
477 color: var(--color-anot-note);
478}
480.bq-tip {
481 border-left-color: var(--color-anot-tip);
482 background-color: var(--color-anot-tip-bg);
483}
485.bq-tip::before {
486 content: "Tip\A";
487 color: var(--color-anot-tip);
488}
490.bq-important {
491 border-left-color: var(--color-anot-important);
492 background-color: var(--color-anot-important-bg);
493}
495.bq-important::before {
496 content: "Important\A";
497 color: var(--color-anot-important);
498}
500.bq-warning {
501 border-left-color: var(--color-anot-warning);
502 background-color: var(--color-anot-warning-bg);
503}
505.bq-warning::before {
506 content: "Warning\A";
507 color: var(--color-anot-warning);
508}
510.bq-caution {
511 border-left-color: var(--color-anot-caution);
512 background-color: var(--color-anot-caution-bg);
513}
515.bq-caution::before {
516 content: "Caution\A";
517 color: var(--color-anot-caution);
518}