site

 1/* colors inspired by Haddock’s linuwial.css */
 2:root {
 3	--c-high: #9e358f;
 4	--c-high-light: #b95ca6;
 5	--c-line: #ddd;
 6	--c-back: #fefefe;
 7	--c-main: #333;
 8
 9	--c-elem-fg: #fefefe; /* --c-back */
10	--c-elem-bg: #5e5184; /* sync with theme-color <meta> */
11	--c-elem-bd: #453b61;
12}
13
14/* dark theme */
15@media (prefers-color-scheme: dark) {
16	:root {
17		--c-high: #eb82dc;
18		--c-back: #333;
19		--c-main: #fefefe;
20		--c-line: #555;
21	}
22
23	/* filter: brightness(2.0) */
24	main, aside {
25		--c-elem-fg: #333;
26		--c-elem-bg: #bca2ff;
27	}
28}
29
30/* general */
31html, body { display: flex; flex-direction: column; height: 100%; }
32body { margin:0; padding: 0; color: var(--c-main); background: var(--c-back); font-family: Helvetica, Verdana, Arial, 'Liberation Sans', FreeSans, sans-serif; }
33h1, h2, h3, h4, h5, h6 { margin: 0; }
34pre { overflow: auto; }
35hr { color: var(--c-line); }
36blockquote { font-style: italic; padding-left: 1ex; border-left: 5px solid var(--c-line); }
37a { text-decoration: none; }
38.tag { text-transform: capitalize; }
39
40/* header and top bar */
41header a { color: inherit; }
42header { background-color: var(--c-elem-bg); color: var(--c-elem-fg); border-bottom: 5px solid var(--c-elem-bd); padding: 0.5ex; font-size: xx-large; }
43header span.headerTitle { font-weight: bold; }
44header span.headerSubTitle { margin-left: 1em; font-size: medium; font-style: italic; }
45header a:hover { text-decoration: none; }
46
47/* sidebar */
48aside { border-right: 1px solid var(--c-line); padding: 0; min-width: 15em; }
49nav ul { list-style-type: none; padding-left: 0; }
50nav li ul { padding-left: 0.6em; }
51nav a:before { content: "› "; }
52nav a { color: var(--c-elem-bg); display: block; font-weight: bold; padding: 0.25em 1ex 0.25em 2mm; }
53nav a:hover { color: var(--c-elem-fg); background-color: var(--c-elem-bg); border-left: black solid 0.2em; }
54nav p { font-weight: bold; margin: 0 0 0.5em 2mm; padding: 1em 0 0 0; }
55
56/* main copy */
57.content { display: flex; flex-direction: row; flex-basis: 100%; }
58.metadata { font-style: italic; font-size: small; }
59.metadata a, a.footnote-ref { text-decoration: none; }
60main a { text-decoration: underline; }
61main { flex-basis: 55%; padding: 0.5ex 0 2vh 1vw; }
62main h1 { margin-top: 2vh; }
63main h1, main h2, main h3, main h4, main h5, main h6, main h7, main h8 { color: var(--c-elem-bg); font-weight: bold; }
64main a { color: var(--c-high); }
65main a:hover { color: var(--c-high-light); }
66main section.footnotes { font-size: small; }
67
68/* footer */
69footer { color: var(--c-elem-fg); background-color: var(--c-elem-bg); margin-top: auto; display: flex; }
70footer a { color: inherit; }
71footer a:hover { text-decoration: underline; }
72footer div { padding: 1em; }
73footer div:first-child { margin-right: auto; }
74
75/* responsive design */
76@media (max-width: 800px) {
77	aside { border-top: 1px solid var(--c-line); order: 1; margin-top: auto; }
78	footer { margin-top: 0; }
79
80	.content { flex-direction: column; }
81	main { padding-right: 0.5rem; padding-left: 0.5rem; }
82}