Commit

Author:

Hash:

Timestamp:

+194 -195 +/-3 browse

Kevin Schoon [me@kevinschoon.com]

7621f9a05b04c0d8a140d581f90fc618df779ddb

Fri, 21 Nov 2025 16:18:27 +0000 (1 week ago)

drop sass support completely
1diff --git a/build.py b/build.py
2index edbb3a4..a1a875c 100755
3--- a/build.py
4+++ b/build.py
5 @@ -75,7 +75,6 @@ if __name__ == "__main__":
6 w.comment("automatically generated, do not edit.")
7 w.variable("sass_flags", "--style compressed")
8 w.rule("mkdir", command="mkdir -p $out")
9- w.rule("compile_sass", command="sassc $sass_flags $in $out")
10 w.rule("make_qr_code", command="cat $in | qrencode -o $out")
11 w.rule("copy", command="cp $in $out")
12 w.build("index.html.jinja", "phony")
13 @@ -86,7 +85,7 @@ if __name__ == "__main__":
14 w.build("gen/ks_stylized.png", "copy", inputs=["assets/ks_stylized.png"])
15 w.build("gen/favicon.ico", "copy", inputs=["assets/favicon.ico"])
16 w.build("gen/style.xsl", "copy", inputs=["assets/style.xsl"])
17- w.build("gen/main.css", "compile_sass", inputs=["main.scss"])
18+ w.build("gen/main.css", "copy", inputs=["main.css"])
19 cmd = _render_rule(w, "index", "/")
20 w.build(
21 "gen/index.html",
22 diff --git a/main.css b/main.css
23new file mode 100644
24index 0000000..852ef3e
25--- /dev/null
26+++ b/main.css
27 @@ -0,0 +1,193 @@
28+ :root {
29+ --accent: #b1675d;
30+ --light-gray: #eee;
31+ --dark-gray: #c2c2c2;
32+ --white: #f8f9fa;
33+ --black: #2d2d2d;
34+ --border-width: 5px;
35+ }
36+
37+ table {
38+ text-align: justify;
39+ width: 100%;
40+ border-collapse: collapse;
41+ margin-bottom: 2rem;
42+ }
43+
44+ td, th {
45+ padding: 0.5em;
46+ border-bottom: 1px solid #4a4a4a;
47+ }
48+
49+ html, body {
50+ box-sizing: border-box;
51+ font-size: 16px;
52+ /*font-family: monospace;*/
53+ height: 100%;
54+ margin: 0;
55+ padding: 0;
56+ max-width: 800px;
57+ }
58+
59+ section {
60+ height: 100%;
61+ }
62+
63+ .wrapper {
64+ min-height: 100%;
65+ display: grid;
66+ grid-template-rows: auto 1fr auto;
67+ }
68+
69+ .page-body {
70+ padding: 20px;
71+ max-inline-size: 70ch;
72+ }
73+
74+ footer.page-footer {
75+ }
76+
77+ *,
78+ *:before,
79+ *:after {
80+ box-sizing: inherit;
81+ }
82+
83+ ol,
84+ ul {
85+ list-style: none;
86+ }
87+
88+ p {
89+ padding: 1px;
90+ margin: 10px;
91+ }
92+
93+ span {
94+ background: white;
95+ border: 1px solid black;
96+ }
97+
98+ pre {
99+ background: #e2e2e2;
100+ font-family: monospace;
101+ overflow: scroll;
102+ }
103+
104+ img.me {
105+ border-radius: 2em;
106+ max-width: 350px;
107+ }
108+
109+ main.rss-page {
110+ margin: 20px;
111+ }
112+
113+ @media (prefers-color-scheme: dark) {
114+ :root {
115+ background-color: #2c2c2c;
116+ color: white;
117+ }
118+
119+ pre {
120+ color: white;
121+ background: #3f3f3f;
122+ }
123+
124+ a:link {
125+ color: white;
126+ text-decoration: underline;
127+ }
128+
129+ a:visited {
130+ color: white;
131+ text-decoration: none;
132+ }
133+
134+ .notice {
135+ border-color: white;
136+ }
137+ }
138+
139+ @media (prefers-color-scheme: light) {
140+ :root {
141+ background-color: #f5f5f5;
142+ color: black;
143+ }
144+
145+ pre {
146+ color: black;
147+ background: #e2e2e2;
148+ }
149+
150+ a:link {
151+ color: black;
152+ text-decoration: underline;
153+ }
154+
155+ a:visited {
156+ color: black;
157+ text-decoration: none;
158+ }
159+
160+ .notice {
161+ border-color: black;
162+ }
163+ }
164+
165+
166+
167+ /*
168+ Tree structure using CSS:
169+ http://stackoverflow.com/questions/14922247/how-to-get-a-tree-in-html-using-pure-css
170+ */
171+
172+ .tree,
173+ .tree ul {
174+ font-size: 18px;
175+ font: normal normal 14px/20px Helvetica, Arial, sans-serif;
176+ list-style-type: none;
177+ margin-left: 0 0 0 10px;
178+ padding: 0;
179+ position: relative;
180+ overflow: hidden;
181+ }
182+
183+ .tree li {
184+ margin: 0;
185+ padding: 0 12px;
186+ position: relative;
187+ }
188+
189+ .tree li::before,
190+ .tree li::after {
191+ content: "";
192+ position: absolute;
193+ left: 0;
194+ }
195+
196+ /* horizontal line on inner list items */
197+ .tree li::before {
198+ border-top: 2px solid #999;
199+ top: 10px;
200+ width: 10px;
201+ height: 0;
202+ }
203+
204+ /* vertical line on list items */
205+ .tree li:after {
206+ border-left: 2px solid #999;
207+ height: 100%;
208+ width: 0px;
209+ top: -10px;
210+ }
211+
212+ /* lower line on list items from the first level because they don't have parents */
213+ .tree > li::after {
214+ top: 10px;
215+ }
216+
217+ /* hide line from the last of the first level list items */
218+ .tree > li:last-child::after {
219+ display: none;
220+ }
221 diff --git a/main.scss b/main.scss
222deleted file mode 100644
223index 852ef3e..0000000
224--- a/main.scss
225+++ /dev/null
226 @@ -1,193 +0,0 @@
227- :root {
228- --accent: #b1675d;
229- --light-gray: #eee;
230- --dark-gray: #c2c2c2;
231- --white: #f8f9fa;
232- --black: #2d2d2d;
233- --border-width: 5px;
234- }
235-
236- table {
237- text-align: justify;
238- width: 100%;
239- border-collapse: collapse;
240- margin-bottom: 2rem;
241- }
242-
243- td, th {
244- padding: 0.5em;
245- border-bottom: 1px solid #4a4a4a;
246- }
247-
248- html, body {
249- box-sizing: border-box;
250- font-size: 16px;
251- /*font-family: monospace;*/
252- height: 100%;
253- margin: 0;
254- padding: 0;
255- max-width: 800px;
256- }
257-
258- section {
259- height: 100%;
260- }
261-
262- .wrapper {
263- min-height: 100%;
264- display: grid;
265- grid-template-rows: auto 1fr auto;
266- }
267-
268- .page-body {
269- padding: 20px;
270- max-inline-size: 70ch;
271- }
272-
273- footer.page-footer {
274- }
275-
276- *,
277- *:before,
278- *:after {
279- box-sizing: inherit;
280- }
281-
282- ol,
283- ul {
284- list-style: none;
285- }
286-
287- p {
288- padding: 1px;
289- margin: 10px;
290- }
291-
292- span {
293- background: white;
294- border: 1px solid black;
295- }
296-
297- pre {
298- background: #e2e2e2;
299- font-family: monospace;
300- overflow: scroll;
301- }
302-
303- img.me {
304- border-radius: 2em;
305- max-width: 350px;
306- }
307-
308- main.rss-page {
309- margin: 20px;
310- }
311-
312- @media (prefers-color-scheme: dark) {
313- :root {
314- background-color: #2c2c2c;
315- color: white;
316- }
317-
318- pre {
319- color: white;
320- background: #3f3f3f;
321- }
322-
323- a:link {
324- color: white;
325- text-decoration: underline;
326- }
327-
328- a:visited {
329- color: white;
330- text-decoration: none;
331- }
332-
333- .notice {
334- border-color: white;
335- }
336- }
337-
338- @media (prefers-color-scheme: light) {
339- :root {
340- background-color: #f5f5f5;
341- color: black;
342- }
343-
344- pre {
345- color: black;
346- background: #e2e2e2;
347- }
348-
349- a:link {
350- color: black;
351- text-decoration: underline;
352- }
353-
354- a:visited {
355- color: black;
356- text-decoration: none;
357- }
358-
359- .notice {
360- border-color: black;
361- }
362- }
363-
364-
365-
366- /*
367- Tree structure using CSS:
368- http://stackoverflow.com/questions/14922247/how-to-get-a-tree-in-html-using-pure-css
369- */
370-
371- .tree,
372- .tree ul {
373- font-size: 18px;
374- font: normal normal 14px/20px Helvetica, Arial, sans-serif;
375- list-style-type: none;
376- margin-left: 0 0 0 10px;
377- padding: 0;
378- position: relative;
379- overflow: hidden;
380- }
381-
382- .tree li {
383- margin: 0;
384- padding: 0 12px;
385- position: relative;
386- }
387-
388- .tree li::before,
389- .tree li::after {
390- content: "";
391- position: absolute;
392- left: 0;
393- }
394-
395- /* horizontal line on inner list items */
396- .tree li::before {
397- border-top: 2px solid #999;
398- top: 10px;
399- width: 10px;
400- height: 0;
401- }
402-
403- /* vertical line on list items */
404- .tree li:after {
405- border-left: 2px solid #999;
406- height: 100%;
407- width: 0px;
408- top: -10px;
409- }
410-
411- /* lower line on list items from the first level because they don't have parents */
412- .tree > li::after {
413- top: 10px;
414- }
415-
416- /* hide line from the last of the first level list items */
417- .tree > li:last-child::after {
418- display: none;
419- }