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; }
39sup { vertical-align: 0; position: relative; bottom: 0.6ex; }
40img { max-width: 100%; max-height: 100%; }
41
42/* header and top bar */
43header a { color: inherit; }
44header { 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; }
45header span.headerTitle { font-weight: bold; }
46header span.headerSubTitle { margin-left: 1em; font-size: medium; font-style: italic; }
47header a:hover { text-decoration: none; }
48
49/* sidebar */
50aside { border-right: 1px solid var(--c-line); padding: 0; min-width: 15em; }
51nav ul { list-style-type: none; padding-left: 0; }
52nav li ul { padding-left: 0.6em; }
53nav a:before { content: "› "; }
54nav a { color: var(--c-elem-bg); display: block; font-weight: bold; padding: 0.25em 1ex 0.25em 2mm; }
55nav a:hover { color: var(--c-elem-fg); background-color: var(--c-elem-bg); border-left: black solid 0.2em; }
56nav p { font-weight: bold; margin: 0 0 0.5em 2mm; padding: 1em 0 0 0; }
57
58/* main copy */
59.content { display: flex; flex-direction: row; flex-basis: 100%; }
60.metadata { font-style: italic; font-size: small; }
61.metadata a, a.footnote-ref { text-decoration: none; }
62main a { text-decoration: underline; }
63main { flex-basis: 55%; padding: 0.5ex 0 2vh 1vw; }
64main h1 { margin-top: 2vh; }
65main h1, main h2, main h3, main h4, main h5, main h6, main h7, main h8 { color: var(--c-elem-bg); font-weight: bold; }
66main a { color: var(--c-high); }
67main a:hover { color: var(--c-high-light); }
68main section.footnotes { font-size: small; }
69
70/* footer */
71footer { color: var(--c-elem-fg); background-color: var(--c-elem-bg); margin-top: auto; display: flex; }
72footer a { color: inherit; }
73footer a:hover { text-decoration: underline; }
74footer div { padding: 1em; }
75footer div:first-child { margin-right: auto; }
76
77/* responsive design */
78@media (max-width: 800px) {
79	aside { border-top: 1px solid var(--c-line); order: 1; margin-top: auto; }
80	footer { margin-top: 0; }
81
82	.content { flex-direction: column; }
83	main { padding-right: 0.5rem; padding-left: 0.5rem; }
84}