main.scss
-rw-r--r-- 2.6 KiB
1:root {
2 --accent: #b1675d;
3 --light-gray: #eee;
4 --dark-gray: #c2c2c2;
5 --white: #f8f9fa;
6 --black: #2d2d2d;
7 --border-width: 5px;
8}
9
10table {
11 text-align: justify;
12 width: 100%;
13 border-collapse: collapse;
14 margin-bottom: 2rem;
15}
16
17td, th {
18 padding: 0.5em;
19 border-bottom: 1px solid #4a4a4a;
20}
21
22html, body {
23 box-sizing: border-box;
24 font-size: 16px;
25 /*font-family: monospace;*/
26 height: 100%;
27 margin: 0;
28 padding: 0;
29 max-width: 800px;
30}
31
32section {
33 height: 100%;
34}
35
36.wrapper {
37 min-height: 100%;
38 display: grid;
39 grid-template-rows: auto 1fr auto;
40}
41
42.page-body {
43 padding: 20px;
44 max-inline-size: 70ch;
45}
46
47footer.page-footer {
48}
49
50*,
51*:before,
52*:after {
53 box-sizing: inherit;
54}
55
56ol,
57ul {
58 list-style: none;
59}
60
61p {
62 padding: 1px;
63 margin: 10px;
64}
65
66span {
67 background: white;
68 border: 1px solid black;
69}
70
71pre {
72 background: #e2e2e2;
73 font-family: monospace;
74 overflow: scroll;
75}
76
77img.me {
78 border-radius: 2em;
79 max-width: 350px;
80}
81
82main.rss-page {
83 margin: 20px;
84}
85
86@media (prefers-color-scheme: dark) {
87 :root {
88 background-color: #2c2c2c;
89 color: white;
90 }
91
92 pre {
93 color: white;
94 background: #3f3f3f;
95 }
96
97 a:link {
98 color: white;
99 text-decoration: underline;
100 }
101
102 a:visited {
103 color: white;
104 text-decoration: none;
105 }
106
107 .notice {
108 border-color: white;
109 }
110}
111
112@media (prefers-color-scheme: light) {
113 :root {
114 background-color: #f5f5f5;
115 color: black;
116 }
117
118 pre {
119 color: black;
120 background: #e2e2e2;
121 }
122
123 a:link {
124 color: black;
125 text-decoration: underline;
126 }
127
128 a:visited {
129 color: black;
130 text-decoration: none;
131 }
132
133 .notice {
134 border-color: black;
135 }
136}
137
138
139
140/*
141 Tree structure using CSS:
142 http://stackoverflow.com/questions/14922247/how-to-get-a-tree-in-html-using-pure-css
143*/
144
145.tree,
146.tree ul {
147 font-size: 18px;
148 font: normal normal 14px/20px Helvetica, Arial, sans-serif;
149 list-style-type: none;
150 margin-left: 0 0 0 10px;
151 padding: 0;
152 position: relative;
153 overflow: hidden;
154}
155
156.tree li {
157 margin: 0;
158 padding: 0 12px;
159 position: relative;
160}
161
162.tree li::before,
163.tree li::after {
164 content: "";
165 position: absolute;
166 left: 0;
167}
168
169/* horizontal line on inner list items */
170.tree li::before {
171 border-top: 2px solid #999;
172 top: 10px;
173 width: 10px;
174 height: 0;
175}
176
177/* vertical line on list items */
178.tree li:after {
179 border-left: 2px solid #999;
180 height: 100%;
181 width: 0px;
182 top: -10px;
183}
184
185/* lower line on list items from the first level because they don't have parents */
186.tree > li::after {
187 top: 10px;
188}
189
190/* hide line from the last of the first level list items */
191.tree > li:last-child::after {
192 display: none;
193}