aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--Dockerfile19
-rw-r--r--README.md46
-rw-r--r--cgit.conf4
-rw-r--r--cgitrc10
-rwxr-xr-xfilters/html-converters/md2html (renamed from responsive/md2html)0
-rwxr-xr-xfilters/syntax-material.py (renamed from responsive/syntax-material.py)0
-rw-r--r--include/head.html (renamed from responsive/head.html)0
-rw-r--r--lighttpd.conf2
-rw-r--r--responsive/cgit.css925
-rw-r--r--www/cgit.css463
-rw-r--r--www/static/colors.css119
-rw-r--r--www/static/hl.css95
-rw-r--r--www/static/md.css248
13 files changed, 987 insertions, 944 deletions
diff --git a/Dockerfile b/Dockerfile
index df191eb..90114b0 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -6,17 +6,16 @@ RUN apt-get install -y python3 python-is-python3
6RUN apt-get install -y libzip-dev libssl-dev 6RUN apt-get install -y libzip-dev libssl-dev
7 7
8WORKDIR /cgit 8WORKDIR /cgit
9COPY cgit /cgit 9COPY cgit/ /cgit/
10COPY cgit.conf /cgit 10COPY cgit.conf /cgit/
11 11
12RUN make 12RUN make
13RUN make install 13RUN make install
14 14
15COPY cgitrc /app 15COPY cgitrc /app/
16COPY responsive/head.html /app/www/static 16COPY filters/ /app/filters/
17COPY responsive/cgit.css /app/www/static 17COPY include/ /app/include/
18COPY responsive/syntax-material.py /app/lib/filters 18COPY www/ /app/www/
19COPY responsive/md2html /app/lib/filters/html-converters/md2html
20 19
21FROM debian:latest AS cgit-run 20FROM debian:latest AS cgit-run
22 21
@@ -25,7 +24,9 @@ RUN apt-get install -y python3 python3-pygments python3-markdown python3-docutil
25RUN apt-get install -y lighttpd 24RUN apt-get install -y lighttpd
26 25
27WORKDIR /app 26WORKDIR /app
28COPY --from=cgit-build /app /app 27COPY --from=cgit-build /app/ /app/
29COPY lighttpd.conf /app/lighttpd.conf 28COPY lighttpd.conf /app/
29
30RUN mkdir /app/repos /app/about/
30 31
31CMD ["lighttpd", "-D", "-f", "/app/lighttpd.conf"] 32CMD ["lighttpd", "-D", "-f", "/app/lighttpd.conf"]
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..658de33
--- /dev/null
+++ b/README.md
@@ -0,0 +1,46 @@
1# cgit material docker
2
3Dockerized cgit with a responsive Material Design theme.
4
5## Quick Start
6
7Run the container using the following command:
8
9```bash
10docker run -d -p 80:80 igorechek06/cgit-material-docker
11```
12
13## Configuration and Volumes
14
15You can map local directories to the following paths inside the container to customize the instance.
16
17### /app/repos
18
19This is the recommended directory to store your git repositories.
20
21### /app/etc/cgitrc
22
23The main configuration file. It follows the standard `cgitrc` syntax.
24
25### /app/include
26
27Contains HTML fragments included in the pages.
28
29- **head.html**: Used by the `head-include` setting.
30- You can also place files here for the `header` or `footer` settings defined in `cgitrc`.
31
32### /app/filters
33
34Contains the original cgit filters and two custom filters required for the Material theme. You can add your own custom filter scripts to this directory.
35
36### /app/www/static/
37
38Used for storing static assets such as images.
39
40- **Note:** When referencing these files in `cgitrc`, write the path relative to `/app/www/`.
41
42### /app/about/
43
44Used to store specific Markdown files for repository descriptions.
45
46- **Usage:** Set `repo.readme=/app/about/filename.md` in your config.
diff --git a/cgit.conf b/cgit.conf
index 3c35940..899cc4e 100644
--- a/cgit.conf
+++ b/cgit.conf
@@ -1,4 +1,4 @@
1CGIT_SCRIPT_PATH = /app/www 1CGIT_SCRIPT_PATH = /app/www
2CGIT_DATA_PATH = /app/www/static 2CGIT_DATA_PATH = /app/www
3CGIT_CONFIG = /app/cgitrc 3CGIT_CONFIG = /app/cgitrc
4filterdir = /app/lib/filters 4filterdir = /app/filters
diff --git a/cgitrc b/cgitrc
index 981ab64..442c197 100644
--- a/cgitrc
+++ b/cgitrc
@@ -1,10 +1,6 @@
1css=/static/cgit.css 1head-include=/app/include/head.html
2js=/static/cgit.js
3logo=/static/cgit.png
4favicon=/static/favicon.ico
5head-include=/app/www/static/head.html
6 2
7about-filter=/app/lib/filters/about-formatting.sh 3about-filter=/app/filters/about-formatting.sh
8source-filter=/app/lib/filters/syntax-material.py 4source-filter=/app/filters/syntax-material.py
9 5
10include=/app/etc/cgitrc 6include=/app/etc/cgitrc
diff --git a/responsive/md2html b/filters/html-converters/md2html
index 571c8d7..571c8d7 100755
--- a/responsive/md2html
+++ b/filters/html-converters/md2html
diff --git a/responsive/syntax-material.py b/filters/syntax-material.py
index 3176691..3176691 100755
--- a/responsive/syntax-material.py
+++ b/filters/syntax-material.py
diff --git a/responsive/head.html b/include/head.html
index 44dca77..44dca77 100644
--- a/responsive/head.html
+++ b/include/head.html
diff --git a/lighttpd.conf b/lighttpd.conf
index 94eb5fe..88ad890 100644
--- a/lighttpd.conf
+++ b/lighttpd.conf
@@ -3,7 +3,7 @@ server.modules += ( "mod_cgi", "mod_alias", "mod_rewrite" )
3server.port = 80 3server.port = 80
4server.document-root = "/app/www" 4server.document-root = "/app/www"
5 5
6$HTTP["url"] !~ "^/static" { 6$HTTP["url"] !~ "^/(?:cgit\.(?:css|js|png)$|favicon\.ico$|robots\.txt$|static)" {
7 alias.url = ( "" => "/app/www/cgit.cgi" ) 7 alias.url = ( "" => "/app/www/cgit.cgi" )
8 cgi.assign = ( "" => "" ) 8 cgi.assign = ( "" => "" )
9} 9}
diff --git a/responsive/cgit.css b/responsive/cgit.css
deleted file mode 100644
index 4690478..0000000
--- a/responsive/cgit.css
+++ /dev/null
@@ -1,925 +0,0 @@
1/* 1. Color scheme */
2
3@media (prefers-color-scheme: dark) {
4 :root {
5 --color-primary: rgb(255 181 160);
6 --color-surface-tint: rgb(255 181 160);
7 --color-on-primary: rgb(86 31 15);
8 --color-primary-container: rgb(114 53 35);
9 --color-on-primary-container: rgb(255 219 209);
10 --color-secondary: rgb(231 189 178);
11 --color-on-secondary: rgb(68 42 34);
12 --color-secondary-container: rgb(93 64 55);
13 --color-on-secondary-container: rgb(255 219 209);
14 --color-tertiary: rgb(216 197 141);
15 --color-on-tertiary: rgb(59 47 5);
16 --color-tertiary-container: rgb(83 70 25);
17 --color-on-tertiary-container: rgb(245 225 167);
18 --color-error: rgb(255 180 171);
19 --color-on-error: rgb(105 0 5);
20 --color-error-container: rgb(147 0 10);
21 --color-on-error-container: rgb(255 218 214);
22 --color-background: rgb(26 17 15);
23 --color-on-background: rgb(241 223 218);
24 --color-surface: rgb(26 17 15);
25 --color-on-surface: rgb(241 223 218);
26 --color-surface-variant: rgb(83 67 63);
27 --color-on-surface-variant: rgb(216 194 188);
28 --color-outline: rgb(160 140 135);
29 --color-outline-variant: rgb(83 67 63);
30 --color-shadow: rgb(0 0 0);
31 --color-scrim: rgb(0 0 0);
32 --color-inverse-surface: rgb(241 223 218);
33 --color-inverse-on-surface: rgb(57 46 43);
34 --color-inverse-primary: rgb(143 76 56);
35 --color-primary-fixed: rgb(255 219 209);
36 --color-on-primary-fixed: rgb(58 11 1);
37 --color-primary-fixed-dim: rgb(255 181 160);
38 --color-on-primary-fixed-variant: rgb(114 53 35);
39 --color-secondary-fixed: rgb(255 219 209);
40 --color-on-secondary-fixed: rgb(44 21 15);
41 --color-secondary-fixed-dim: rgb(231 189 178);
42 --color-on-secondary-fixed-variant: rgb(93 64 55);
43 --color-tertiary-fixed: rgb(245 225 167);
44 --color-on-tertiary-fixed: rgb(35 27 0);
45 --color-tertiary-fixed-dim: rgb(216 197 141);
46 --color-on-tertiary-fixed-variant: rgb(83 70 25);
47 --color-surface-dim: rgb(26 17 15);
48 --color-surface-bright: rgb(66 55 52);
49 --color-surface-container-lowest: rgb(20 12 10);
50 --color-surface-container-low: rgb(35 25 23);
51 --color-surface-container: rgb(39 29 27);
52 --color-surface-container-high: rgb(50 40 37);
53 --color-surface-container-highest: rgb(61 50 47);
54
55 color-scheme: dark;
56 }
57}
58
59@media (prefers-color-scheme: light) {
60 :root {
61 --color-primary: rgb(143 76 56);
62 --color-surface-tint: rgb(143 76 56);
63 --color-on-primary: rgb(255 255 255);
64 --color-primary-container: rgb(255 219 209);
65 --color-on-primary-container: rgb(114 53 35);
66 --color-secondary: rgb(119 87 78);
67 --color-on-secondary: rgb(255 255 255);
68 --color-secondary-container: rgb(255 219 209);
69 --color-on-secondary-container: rgb(93 64 55);
70 --color-tertiary: rgb(108 93 47);
71 --color-on-tertiary: rgb(255 255 255);
72 --color-tertiary-container: rgb(245 225 167);
73 --color-on-tertiary-container: rgb(83 70 25);
74 --color-error: rgb(186 26 26);
75 --color-on-error: rgb(255 255 255);
76 --color-error-container: rgb(255 218 214);
77 --color-on-error-container: rgb(147 0 10);
78 --color-background: rgb(255 248 246);
79 --color-on-background: rgb(35 25 23);
80 --color-surface: rgb(255 248 246);
81 --color-on-surface: rgb(35 25 23);
82 --color-surface-variant: rgb(245 222 216);
83 --color-on-surface-variant: rgb(83 67 63);
84 --color-outline: rgb(133 115 110);
85 --color-outline-variant: rgb(216 194 188);
86 --color-shadow: rgb(0 0 0);
87 --color-scrim: rgb(0 0 0);
88 --color-inverse-surface: rgb(57 46 43);
89 --color-inverse-on-surface: rgb(255 237 232);
90 --color-inverse-primary: rgb(255 181 160);
91 --color-primary-fixed: rgb(255 219 209);
92 --color-on-primary-fixed: rgb(58 11 1);
93 --color-primary-fixed-dim: rgb(255 181 160);
94 --color-on-primary-fixed-variant: rgb(114 53 35);
95 --color-secondary-fixed: rgb(255 219 209);
96 --color-on-secondary-fixed: rgb(44 21 15);
97 --color-secondary-fixed-dim: rgb(231 189 178);
98 --color-on-secondary-fixed-variant: rgb(93 64 55);
99 --color-tertiary-fixed: rgb(245 225 167);
100 --color-on-tertiary-fixed: rgb(35 27 0);
101 --color-tertiary-fixed-dim: rgb(216 197 141);
102 --color-on-tertiary-fixed-variant: rgb(83 70 25);
103 --color-surface-dim: rgb(232 214 210);
104 --color-surface-bright: rgb(255 248 246);
105 --color-surface-container-lowest: rgb(255 255 255);
106 --color-surface-container-low: rgb(255 241 237);
107 --color-surface-container: rgb(252 234 229);
108 --color-surface-container-high: rgb(247 228 224);
109 --color-surface-container-highest: rgb(241 223 218);
110
111 color-scheme: light;
112 }
113}
114
115:root {
116 /* Custom logic for diffs */
117 --diff-add-bg: var(--color-tertiary-container);
118 --diff-add-fg: var(--color-on-tertiary-container);
119 --diff-del-bg: var(--color-error-container);
120 --diff-del-fg: var(--color-on-error-container);
121}
122
123/* 2. Global Reset & Body */
124* {
125 box-sizing: border-box;
126}
127
128body {
129 font-family: sans-serif;
130 font-size: 14px;
131 line-height: 1.5;
132 color: var(--color-on-background);
133 background: var(--color-background);
134 margin: 0;
135 padding: 0;
136
137 -webkit-text-size-adjust: 100%;
138 -moz-text-size-adjust: 100%;
139 text-size-adjust: 100%;
140}
141
142div#cgit {
143 padding: 0;
144 margin: 0 auto;
145 max-width: 1200px;
146 background: var(--color-background);
147 min-height: 100vh;
148 display: flex;
149 flex-direction: column;
150}
151
152a {
153 color: var(--color-primary);
154 text-decoration: none;
155 transition: opacity 0.2s;
156}
157
158a:hover {
159 text-decoration: underline;
160 opacity: 0.8;
161}
162
163/* 3. Header Area */
164div#cgit table#header {
165 width: 100%;
166 margin-bottom: 0;
167 background-color: var(--color-surface-container);
168 color: var(--color-on-surface);
169 padding: 1rem;
170 /* Transform table to flex for responsiveness */
171 display: flex;
172 flex-wrap: wrap;
173 align-items: center;
174 border-bottom: 1px solid var(--color-outline-variant);
175}
176
177/* Fix for table structure within header */
178div#cgit table#header tbody,
179div#cgit table#header tr {
180 display: contents;
181}
182
183div#cgit table#header td.logo {
184 display: block;
185 padding-right: 1rem;
186}
187
188div#cgit table#header td.main {
189 font-size: 1.5rem;
190 font-weight: bold;
191 color: var(--color-on-surface);
192 display: block;
193 flex-grow: 1;
194}
195
196div#cgit table#header td.main a {
197 color: var(--color-on-surface);
198}
199
200div#cgit table#header td.form {
201 display: block;
202 text-align: right;
203 margin-top: 0.5rem;
204}
205
206div#cgit table#header td.sub {
207 display: block;
208 width: 100%;
209 padding-top: 0.25rem;
210 color: var(--color-outline);
211 font-size: 0.9rem;
212 border-top: none; /* Removing legacy border */
213}
214
215/* Input Elements */
216select,
217input,
218textarea {
219 background-color: var(--color-surface-container-high);
220 color: var(--color-on-surface);
221 border: 1px solid var(--color-outline);
222 border-radius: 4px;
223 padding: 4px 8px;
224 font-family: inherit;
225}
226
227input[type="submit"] {
228 background-color: var(--color-primary);
229 color: var(--color-on-primary);
230 border: none;
231 cursor: pointer;
232 font-weight: 500;
233 padding: 5px 12px;
234}
235
236input[type="submit"]:hover {
237 background-color: var(--color-primary-fixed-dim);
238}
239
240/* 4. Tabs Navigation */
241div#cgit table.tabs {
242 border-bottom: 1px solid var(--color-outline-variant);
243 border-collapse: collapse;
244 margin: 0;
245 width: 100%;
246 background-color: var(--color-surface);
247 display: flex; /* Modern layout */
248 flex-wrap: wrap;
249 padding: 0 1rem;
250}
251
252div#cgit table.tabs tbody,
253div#cgit table.tabs tr {
254 display: contents;
255}
256
257div#cgit table.tabs td {
258 display: block;
259 padding: 0;
260}
261
262div#cgit table.tabs td a {
263 display: inline-block;
264 padding: 0.75rem 1rem;
265 color: var(--color-on-surface-variant);
266 font-weight: 500;
267 border-bottom: 2px solid transparent;
268}
269
270div#cgit table.tabs td a.active {
271 color: var(--color-primary);
272 border-bottom: 2px solid var(--color-primary);
273 background-color: var(--color-surface-container-low);
274}
275
276div#cgit table.tabs td a:hover {
277 background-color: var(--color-surface-container-high);
278 text-decoration: none;
279}
280
281div#cgit table.tabs td.form {
282 flex-grow: 1;
283 text-align: right;
284 padding: 0.5rem 0;
285 display: flex;
286 justify-content: flex-end;
287 align-items: center;
288}
289
290div#cgit a.button {
291 display: inline-block;
292 padding: 3px 6px;
293 margin: 0 4px;
294 background-color: var(--color-secondary-container);
295 color: var(--color-on-secondary-container);
296 border-radius: 5px;
297 font-size: 0.85rem;
298 font-weight: 500;
299 text-decoration: none;
300 transition:
301 background-color 0.2s,
302 color 0.2s,
303 box-shadow 0.2s;
304}
305
306div#cgit a.button:hover {
307 background-color: var(--color-primary);
308 color: var(--color-on-primary);
309 text-decoration: none;
310 opacity: 1;
311 box-shadow: 0 2px 4px var(--color-shadow);
312}
313
314/* 5. Content Area */
315div#cgit div.content {
316 padding: 1.5rem;
317 flex-grow: 1;
318}
319
320div#cgit div.path {
321 margin: 0;
322 padding: 0.5rem 1.5rem;
323 background-color: var(--color-surface-container-low);
324 color: var(--color-on-surface);
325 border-bottom: 1px solid var(--color-outline-variant);
326 font-family: monospace;
327}
328
329/* 6. Lists and Tables */
330div#cgit table.list {
331 width: 100%;
332 border: none;
333 border-collapse: collapse;
334 margin-bottom: 1rem;
335 font-size: 0.95rem;
336}
337
338div#cgit table.list tr {
339 background: var(--color-surface);
340 border-bottom: 1px solid var(--color-surface-container-high);
341}
342
343div#cgit table.list tr:nth-child(even) {
344 background: var(--color-surface-container-lowest);
345}
346
347div#cgit table.list tr:hover {
348 background: var(--color-surface-container-high);
349}
350
351div#cgit table.list th {
352 text-align: left;
353 font-weight: 600;
354 color: var(--color-primary);
355 padding: 0.75rem 0.5rem;
356 border-bottom: 2px solid var(--color-outline-variant);
357}
358
359div#cgit table.list td {
360 padding: 0.75rem 0.5rem;
361 vertical-align: middle;
362}
363
364/* Commit Graph columns */
365div#cgit table.list td.commitgraph {
366 font-family: monospace;
367 white-space: pre;
368 color: var(--color-on-surface);
369}
370
371/* 7. Diffs and Code */
372div#cgit table.blob,
373div#cgit table.diff,
374div#cgit table.ssdiff {
375 width: 100%;
376 border: 1px solid var(--color-outline-variant);
377 border-radius: 4px;
378 overflow: hidden;
379 margin-top: 1rem;
380 background: var(--color-surface-container-lowest);
381}
382
383div#cgit table.blob td.linenumbers,
384div#cgit table.ssdiff td.lineno {
385 border-right: 1px solid var(--color-outline-variant);
386 background: var(--color-surface-container-high);
387 text-align: right;
388 padding: 0 0.5em;
389}
390
391div#cgit table.blob td.linenumbers a,
392div#cgit table.ssdiff td.lineno a {
393 display: inline-block;
394 width: 100%;
395 text-decoration: none;
396 color: var(--color-outline);
397 padding: 0;
398}
399
400div#cgit table.blob pre,
401div#cgit table.diff td,
402div#cgit table.ssdiff td {
403 font-family: monospace;
404 font-size: 0.9em;
405 padding: 0 0.5em;
406 margin: 0;
407 color: var(--color-on-surface);
408}
409
410/* Diff coloring */
411div#cgit table.diff td div.add,
412div#cgit table.ssdiff td.add {
413 background-color: var(--diff-add-bg);
414 color: var(--diff-add-fg);
415}
416
417div#cgit table.diff td div.del,
418div#cgit table.ssdiff td.del {
419 background-color: var(--diff-del-bg);
420 color: var(--diff-del-fg);
421}
422
423div#cgit table.diff td div.hunk,
424div#cgit table.ssdiff td.hunk {
425 background-color: var(--color-surface-variant);
426 color: var(--color-on-surface-variant);
427 padding: 0.25em 0.5em;
428}
429
430/* 8. Decorations (Tags, Branches) */
431div#cgit a.branch-deco,
432div#cgit a.tag-deco,
433div#cgit a.tag-annotated-deco,
434div#cgit a.remote-deco,
435div#cgit a.deco {
436 display: inline-block;
437 padding: 2px 6px;
438 border-radius: 4px;
439 font-size: 0.8em;
440 margin-left: 0.5em;
441 border: none;
442}
443
444div#cgit a.branch-deco {
445 background-color: var(--color-primary-container);
446 color: var(--color-on-primary-container);
447}
448
449div#cgit a.tag-deco {
450 background-color: var(--color-tertiary-container);
451 color: var(--color-on-tertiary-container);
452}
453
454div#cgit a.tag-annotated-deco {
455 background-color: var(--color-tertiary-fixed);
456 color: var(--color-on-tertiary-fixed);
457}
458
459div#cgit a.remote-deco {
460 background-color: var(--color-secondary-container);
461 color: var(--color-on-secondary-container);
462}
463
464div#cgit a.deco {
465 background-color: var(--color-secondary-fixed);
466 color: var(--color-on-secondary-fixed);
467}
468
469/* 9. Commit Info Table */
470div#cgit table.commit-info {
471 background-color: var(--color-surface-container);
472 border: 1px solid var(--color-outline-variant);
473 border-radius: 8px;
474 padding: 1rem;
475 width: 100%;
476 margin-top: 1rem;
477 border-collapse: separate;
478 border-spacing: 0 0.5rem;
479}
480
481div#cgit table.commit-info th {
482 text-align: left;
483 padding: 0 1rem;
484 color: var(--color-secondary);
485}
486
487div#cgit table.commit-info td {
488 padding: 0 1rem;
489}
490
491div#cgit div.commit-subject {
492 font-size: 1.2rem;
493 font-weight: bold;
494 color: var(--color-primary);
495 margin: 1.5rem 0 0.5rem 0;
496}
497
498div#cgit div.commit-msg {
499 white-space: pre-wrap;
500 font-family: monospace;
501 padding: 1rem;
502 background: var(--color-surface-container-low);
503 border-radius: 4px;
504 color: var(--color-on-surface);
505}
506
507/* 10. Footer */
508div#cgit div.footer {
509 margin-top: auto;
510 padding: 2rem 1rem;
511 text-align: center;
512 font-size: 0.85rem;
513 color: var(--color-outline);
514 border-top: 1px solid var(--color-outline-variant);
515}
516
517div#cgit div.error {
518 color: var(--color-error);
519 background: var(--color-error-container);
520 padding: 1rem;
521 border-radius: 4px;
522 margin: 1rem 0;
523}
524
525/* 11. Responsive Adjustments */
526@media only screen and (max-width: 768px) {
527 div#cgit table#header {
528 flex-direction: column;
529 align-items: flex-start;
530 }
531
532 div#cgit table#header td.logo,
533 div#cgit table#header td.main,
534 div#cgit table#header td.form {
535 width: 100%;
536 text-align: left;
537 margin-bottom: 0.5rem;
538 }
539
540 div#cgit table.tabs {
541 flex-direction: column;
542 padding: 0;
543 }
544
545 div#cgit table.tabs td a {
546 width: 100%;
547 border-bottom: 1px solid var(--color-outline-variant);
548 }
549
550 div#cgit table.tabs td.form {
551 width: 100%;
552 justify-content: flex-start;
553 padding: 1rem;
554 }
555
556 div#cgit div.content {
557 padding: 1rem 0.5rem;
558 overflow-x: auto; /* Enable horizontal scroll for content */
559 }
560
561 /* Force tables to scroll on small screens */
562 div#cgit table.list,
563 div#cgit table.blob,
564 div#cgit table.diff {
565 white-space: nowrap;
566 }
567
568 /* Allow wrapping in logs on mobile to prevent extreme width */
569 div#cgit table.list td.logmsg {
570 white-space: normal;
571 min-width: 200px;
572 }
573}
574
575/* Container override for highlighted code to handle font sizing */
576div#cgit table.blob pre {
577 font-family: "JetBrains Mono", "Fira Code", monospace;
578 font-size: 0.95em;
579 line-height: 1.4;
580}
581
582/* --- Syntax Highlighting Mapping to Material Variables --- */
583
584/* Comments - Outline/Grey */
585.hl-c,
586.hl-cm,
587.hl-cp,
588.hl-c1,
589.hl-cs {
590 color: var(--color-outline);
591 font-style: italic;
592}
593
594/* Keywords - Primary (Pinkish/Orange) */
595.hl-k,
596.hl-kc,
597.hl-kd,
598.hl-kn,
599.hl-kp,
600.hl-kr,
601.hl-kt {
602 color: var(--color-primary);
603 font-weight: bold;
604}
605
606/* Names/Functions - Tertiary (Yellowish) */
607.hl-n,
608.hl-na,
609.hl-nb,
610.hl-nc,
611.hl-no,
612.hl-nd,
613.hl-ni,
614.hl-ne,
615.hl-nf,
616.hl-nl,
617.hl-nn,
618.hl-nt,
619.hl-nv,
620.hl-nx {
621 color: var(--color-tertiary);
622}
623
624/* Strings - Secondary (Reddish/Brownish) */
625.hl-s,
626.hl-sa,
627.hl-sb,
628.hl-sc,
629.hl-dl,
630.hl-sd,
631.hl-s2,
632.hl-se,
633.hl-sh,
634.hl-si,
635.hl-sx,
636.hl-sr,
637.hl-s1,
638.hl-ss {
639 color: var(--color-secondary);
640}
641
642/* Operators - On Surface (Main text color) */
643.hl-o,
644.hl-ow {
645 color: var(--color-on-surface-variant);
646}
647
648/* Numbers - Primary Container (Brighter accent) */
649.hl-m,
650.hl-mb,
651.hl-mf,
652.hl-mh,
653.hl-mi,
654.hl-mo,
655.hl-il {
656 color: var(--color-primary-fixed);
657}
658
659/* Errors */
660.hl-err,
661.hl-gr {
662 color: var(--color-error);
663 background-color: var(--color-error-container);
664}
665
666/* Generic Deleted */
667.hl-gd {
668 color: var(--color-error);
669 background-color: var(--color-error-container);
670}
671
672/* Generic Inserted */
673.hl-gi {
674 color: var(--color-tertiary);
675 background-color: var(--color-tertiary-container);
676}
677
678/* --- Markdown Body Styles (Material Design) --- */
679
680.markdown-body {
681 font-family: inherit;
682 font-size: 1rem;
683 line-height: 1.6;
684 color: var(--color-on-background);
685 word-wrap: break-word;
686}
687
688/* Headers */
689.markdown-body h1,
690.markdown-body h2,
691.markdown-body h3,
692.markdown-body h4,
693.markdown-body h5,
694.markdown-body h6 {
695 margin-top: 24px;
696 margin-bottom: 16px;
697 font-weight: 600;
698 line-height: 1.25;
699 color: var(--color-on-surface);
700}
701
702.markdown-body h1 {
703 font-size: 2em;
704 border-bottom: 1px solid var(--color-outline-variant);
705 padding-bottom: 0.3em;
706}
707.markdown-body h2 {
708 font-size: 1.5em;
709 border-bottom: 1px solid var(--color-outline-variant);
710 padding-bottom: 0.3em;
711}
712.markdown-body h3 {
713 font-size: 1.25em;
714}
715.markdown-body h4 {
716 font-size: 1em;
717}
718.markdown-body h5 {
719 font-size: 0.875em;
720}
721.markdown-body h6 {
722 font-size: 0.85em;
723 color: var(--color-on-surface-variant);
724}
725
726/* Links */
727.markdown-body a {
728 color: var(--color-primary);
729 text-decoration: none;
730}
731.markdown-body a:hover {
732 text-decoration: underline;
733}
734
735/* Paragraphs & Lists */
736.markdown-body p,
737.markdown-body blockquote,
738.markdown-body ul,
739.markdown-body ol,
740.markdown-body dl,
741.markdown-body table,
742.markdown-body pre {
743 margin-top: 0;
744 margin-bottom: 16px;
745}
746
747.markdown-body hr {
748 height: 0.25em;
749 padding: 0;
750 margin: 24px 0;
751 background-color: var(--color-outline-variant);
752 border: 0;
753}
754
755/* Blockquotes */
756.markdown-body blockquote {
757 padding: 0 1em;
758 color: var(--color-on-surface-variant);
759 border-left: 0.25em solid var(--color-outline);
760 background-color: var(--color-surface-container-low);
761}
762
763/* Tables */
764.markdown-body table {
765 display: block;
766 width: 100%;
767 overflow: auto;
768 border-spacing: 0;
769 border-collapse: collapse;
770}
771
772.markdown-body table th {
773 font-weight: 600;
774 background-color: var(--color-surface-container);
775}
776
777.markdown-body table th,
778.markdown-body table td {
779 padding: 6px 13px;
780 border: 1px solid var(--color-outline-variant);
781}
782
783.markdown-body table tr {
784 background-color: var(--color-surface);
785 border-top: 1px solid var(--color-outline-variant);
786}
787
788.markdown-body table tr:nth-child(2n) {
789 background-color: var(--color-surface-container-lowest);
790}
791
792/* Images */
793.markdown-body img {
794 max-width: 100%;
795 box-sizing: border-box;
796 background-color: var(--color-surface);
797 border-radius: 4px;
798}
799
800/* Code Blocks & Inline Code */
801.markdown-body code,
802.markdown-body tt {
803 padding: 0.2em 0.4em;
804 margin: 0;
805 font-size: 85%;
806 font-family: "JetBrains Mono", "Fira Code", monospace;
807 background-color: var(--color-surface-container-high);
808 border-radius: 6px;
809 color: var(--color-on-surface);
810}
811
812.markdown-body pre {
813 padding: 16px;
814 overflow: auto;
815 font-size: 85%;
816 line-height: 1.45;
817 background-color: var(--color-surface-container-lowest);
818 border-radius: 6px;
819 border: 1px solid var(--color-outline-variant);
820}
821
822.markdown-body pre code,
823.markdown-body pre tt {
824 display: inline;
825 max-width: auto;
826 padding: 0;
827 margin: 0;
828 overflow: visible;
829 line-height: inherit;
830 word-wrap: normal;
831 background-color: transparent;
832 border: 0;
833}
834
835/* Anchors (Permalinks) */
836.markdown-body a.headerlink {
837 padding-left: 1ch;
838 line-height: 1;
839 color: var(--color-primary);
840 text-decoration: none;
841 opacity: 0;
842 transition: opacity 0.2s;
843}
844
845.markdown-body h1:hover .headerlink,
846.markdown-body h2:hover .headerlink,
847.markdown-body h3:hover .headerlink,
848.markdown-body h4:hover .headerlink,
849.markdown-body h5:hover .headerlink,
850.markdown-body h6:hover .headerlink {
851 opacity: 1;
852}
853
854/* Pygments Syntax Highlighting within Markdown
855 (Mapping standard Pygments classes to Material Variables) */
856.markdown-body .highlight .c,
857.markdown-body .highlight .cm,
858.markdown-body .highlight .cp,
859.markdown-body .highlight .c1,
860.markdown-body .highlight .cs {
861 color: var(--color-outline);
862 font-style: italic;
863}
864.markdown-body .highlight .k,
865.markdown-body .highlight .kc,
866.markdown-body .highlight .kd,
867.markdown-body .highlight .kn,
868.markdown-body .highlight .kp,
869.markdown-body .highlight .kr,
870.markdown-body .highlight .kt {
871 color: var(--color-primary);
872 font-weight: bold;
873}
874.markdown-body .highlight .n,
875.markdown-body .highlight .na,
876.markdown-body .highlight .nb,
877.markdown-body .highlight .nc,
878.markdown-body .highlight .no,
879.markdown-body .highlight .nd,
880.markdown-body .highlight .ni,
881.markdown-body .highlight .ne,
882.markdown-body .highlight .nf,
883.markdown-body .highlight .nl,
884.markdown-body .highlight .nn,
885.markdown-body .highlight .nt,
886.markdown-body .highlight .nv,
887.markdown-body .highlight .nx {
888 color: var(--color-tertiary);
889}
890.markdown-body .highlight .s,
891.markdown-body .highlight .sa,
892.markdown-body .highlight .sb,
893.markdown-body .highlight .sc,
894.markdown-body .highlight .dl,
895.markdown-body .highlight .sd,
896.markdown-body .highlight .s2,
897.markdown-body .highlight .se,
898.markdown-body .highlight .sh,
899.markdown-body .highlight .si,
900.markdown-body .highlight .sx,
901.markdown-body .highlight .sr,
902.markdown-body .highlight .s1,
903.markdown-body .highlight .ss {
904 color: var(--color-secondary);
905}
906.markdown-body .highlight .m,
907.markdown-body .highlight .mb,
908.markdown-body .highlight .mf,
909.markdown-body .highlight .mh,
910.markdown-body .highlight .mi,
911.markdown-body .highlight .mo,
912.markdown-body .highlight .il {
913 color: var(--color-primary-fixed);
914}
915.markdown-body .highlight .o,
916.markdown-body .highlight .ow {
917 color: var(--color-on-surface-variant);
918}
919.markdown-body .highlight .g,
920.markdown-body .highlight .gh,
921.markdown-body .highlight .gu,
922.markdown-body .highlight .gd,
923.markdown-body .highlight .gi {
924 color: var(--color-on-surface);
925}
diff --git a/www/cgit.css b/www/cgit.css
new file mode 100644
index 0000000..4baa89d
--- /dev/null
+++ b/www/cgit.css
@@ -0,0 +1,463 @@
1/* 1. Import color scheme, highlighting and markdown styles */
2@import url("static/colors.css");
3@import url("static/hl.css");
4@import url("static/md.css");
5
6/* 2. Global Reset & Body */
7* {
8 box-sizing: border-box;
9}
10
11body {
12 font-family: sans-serif;
13 font-size: 14px;
14 line-height: 1.5;
15 color: var(--color-on-background);
16 background: var(--color-background);
17 margin: 0;
18 padding: 0;
19
20 -webkit-text-size-adjust: 100%;
21 -moz-text-size-adjust: 100%;
22 text-size-adjust: 100%;
23}
24
25a {
26 color: var(--color-primary);
27 text-decoration: none;
28 transition: opacity 0.2s;
29}
30
31a:hover {
32 text-decoration: underline;
33 opacity: 0.8;
34}
35
36div#cgit {
37 padding: 0;
38 margin: 0 auto;
39 max-width: 1200px;
40 background: var(--color-background);
41 min-height: 100vh;
42 display: flex;
43 flex-direction: column;
44}
45
46/* 3. Header Area */
47div#cgit table#header {
48 width: 100%;
49 margin-bottom: 0;
50 background-color: var(--color-surface-container);
51 color: var(--color-on-surface);
52 padding: 1rem;
53 /* Transform table to flex for responsiveness */
54 display: flex;
55 flex-wrap: wrap;
56 align-items: center;
57 border-bottom: 1px solid var(--color-outline-variant);
58}
59
60/* Fix for table structure within header */
61div#cgit table#header tbody,
62div#cgit table#header tr {
63 display: contents;
64}
65
66div#cgit table#header td.logo {
67 display: block;
68 padding-right: 1rem;
69}
70
71div#cgit table#header td.main {
72 font-size: 1.5rem;
73 font-weight: bold;
74 color: var(--color-on-surface);
75 display: block;
76 flex-grow: 1;
77}
78
79div#cgit table#header td.main a {
80 color: var(--color-on-surface);
81}
82
83div#cgit table#header td.form {
84 display: block;
85 text-align: right;
86 margin-top: 0.5rem;
87}
88
89div#cgit table#header td.sub {
90 display: block;
91 width: 100%;
92 padding-top: 0.25rem;
93 color: var(--color-outline);
94 font-size: 0.9rem;
95 border-top: none; /* Removing legacy border */
96}
97
98/* Input Elements */
99select,
100input,
101textarea {
102 background-color: var(--color-surface-container-high);
103 color: var(--color-on-surface);
104 border: 1px solid var(--color-outline);
105 border-radius: 4px;
106 padding: 4px 8px;
107 font-family: inherit;
108}
109
110input[type="submit"] {
111 background-color: var(--color-primary);
112 color: var(--color-on-primary);
113 border: none;
114 cursor: pointer;
115 font-weight: 500;
116 padding: 5px 12px;
117}
118
119input[type="submit"]:hover {
120 background-color: var(--color-primary-fixed-dim);
121}
122
123/* 4. Tabs Navigation */
124div#cgit table.tabs {
125 border-bottom: 1px solid var(--color-outline-variant);
126 border-collapse: collapse;
127 margin: 0;
128 width: 100%;
129 background-color: var(--color-surface);
130 display: flex; /* Modern layout */
131 flex-wrap: wrap;
132 padding: 0 1rem;
133}
134
135div#cgit table.tabs tbody,
136div#cgit table.tabs tr {
137 display: contents;
138}
139
140div#cgit table.tabs td {
141 display: block;
142 padding: 0;
143}
144
145div#cgit table.tabs td a {
146 display: inline-block;
147 padding: 0.75rem 1rem;
148 color: var(--color-on-surface-variant);
149 font-weight: 500;
150 border-bottom: 2px solid transparent;
151}
152
153div#cgit table.tabs td a.active {
154 color: var(--color-primary);
155 border-bottom: 2px solid var(--color-primary);
156 background-color: var(--color-surface-container-low);
157}
158
159div#cgit table.tabs td a:hover {
160 background-color: var(--color-surface-container-high);
161 text-decoration: none;
162}
163
164div#cgit table.tabs td.form {
165 flex-grow: 1;
166 text-align: right;
167 padding: 0.5rem 0;
168 display: flex;
169 justify-content: flex-end;
170 align-items: center;
171}
172
173div#cgit a.button {
174 display: inline-block;
175 padding: 3px 6px;
176 margin: 0 4px;
177 background-color: var(--color-secondary-container);
178 color: var(--color-on-secondary-container);
179 border-radius: 5px;
180 font-size: 0.85rem;
181 font-weight: 500;
182 text-decoration: none;
183 transition:
184 background-color 0.2s,
185 color 0.2s,
186 box-shadow 0.2s;
187}
188
189div#cgit a.button:hover {
190 background-color: var(--color-primary);
191 color: var(--color-on-primary);
192 text-decoration: none;
193 opacity: 1;
194 box-shadow: 0 2px 4px var(--color-shadow);
195}
196
197/* 5. Content Area */
198div#cgit div.content {
199 padding: 1.5rem;
200 flex-grow: 1;
201}
202
203div#cgit div.path {
204 margin: 0;
205 padding: 0.5rem 1.5rem;
206 background-color: var(--color-surface-container-low);
207 color: var(--color-on-surface);
208 border-bottom: 1px solid var(--color-outline-variant);
209 font-family: monospace;
210}
211
212/* 6. Lists and Tables */
213div#cgit table.list {
214 width: 100%;
215 border: none;
216 border-collapse: collapse;
217 margin-bottom: 1rem;
218 font-size: 0.95rem;
219}
220
221div#cgit table.list tr {
222 background: var(--color-surface);
223 border-bottom: 1px solid var(--color-surface-container-high);
224}
225
226div#cgit table.list tr:nth-child(even) {
227 background: var(--color-surface-container-lowest);
228}
229
230div#cgit table.list tr:hover {
231 background: var(--color-surface-container-high);
232}
233
234div#cgit table.list th {
235 text-align: left;
236 font-weight: 600;
237 color: var(--color-primary);
238 padding: 0.75rem 0.5rem;
239 border-bottom: 2px solid var(--color-outline-variant);
240}
241
242div#cgit table.list td {
243 padding: 0.75rem 0.5rem;
244 vertical-align: middle;
245}
246
247/* Commit Graph columns */
248div#cgit table.list td.commitgraph {
249 font-family: monospace;
250 white-space: pre;
251 color: var(--color-on-surface);
252}
253
254/* 7. Diffs and Code */
255div#cgit table.blob,
256div#cgit table.diff,
257div#cgit table.ssdiff {
258 width: 100%;
259 border: 1px solid var(--color-outline-variant);
260 border-radius: 4px;
261 overflow: hidden;
262 margin-top: 1rem;
263 background: var(--color-surface-container-lowest);
264}
265
266div#cgit table.blob td.linenumbers,
267div#cgit table.ssdiff td.lineno {
268 border-right: 1px solid var(--color-outline-variant);
269 background: var(--color-surface-container-high);
270 text-align: right;
271 padding: 0 0.5em;
272}
273
274div#cgit table.blob td.linenumbers a,
275div#cgit table.ssdiff td.lineno a {
276 display: inline-block;
277 width: 100%;
278 text-decoration: none;
279 color: var(--color-outline);
280 padding: 0;
281}
282
283div#cgit table.blob pre,
284div#cgit table.diff td,
285div#cgit table.ssdiff td {
286 font-family: monospace;
287 font-size: 0.9em;
288 padding: 0 0.5em;
289 margin: 0;
290 color: var(--color-on-surface);
291}
292
293/* Diff coloring */
294div#cgit table.diff td div.add,
295div#cgit table.ssdiff td.add {
296 background-color: var(--diff-add-bg);
297 color: var(--diff-add-fg);
298}
299
300div#cgit table.diff td div.del,
301div#cgit table.ssdiff td.del {
302 background-color: var(--diff-del-bg);
303 color: var(--diff-del-fg);
304}
305
306div#cgit table.diff td div.hunk,
307div#cgit table.ssdiff td.hunk {
308 background-color: var(--color-surface-variant);
309 color: var(--color-on-surface-variant);
310 padding: 0.25em 0.5em;
311}
312
313/* 8. Decorations (Tags, Branches) */
314div#cgit a.branch-deco,
315div#cgit a.tag-deco,
316div#cgit a.tag-annotated-deco,
317div#cgit a.remote-deco,
318div#cgit a.deco {
319 display: inline-block;
320 padding: 2px 6px;
321 border-radius: 4px;
322 font-size: 0.8em;
323 margin-left: 0.5em;
324 border: none;
325}
326
327div#cgit a.branch-deco {
328 background-color: var(--color-primary-container);
329 color: var(--color-on-primary-container);
330}
331
332div#cgit a.tag-deco {
333 background-color: var(--color-tertiary-container);
334 color: var(--color-on-tertiary-container);
335}
336
337div#cgit a.tag-annotated-deco {
338 background-color: var(--color-tertiary-fixed);
339 color: var(--color-on-tertiary-fixed);
340}
341
342div#cgit a.remote-deco {
343 background-color: var(--color-secondary-container);
344 color: var(--color-on-secondary-container);
345}
346
347div#cgit a.deco {
348 background-color: var(--color-secondary-fixed);
349 color: var(--color-on-secondary-fixed);
350}
351
352/* 9. Commit Info Table */
353div#cgit table.commit-info {
354 background-color: var(--color-surface-container);
355 border: 1px solid var(--color-outline-variant);
356 border-radius: 8px;
357 padding: 1rem;
358 width: 100%;
359 margin-top: 1rem;
360 border-collapse: separate;
361 border-spacing: 0 0.5rem;
362}
363
364div#cgit table.commit-info th {
365 text-align: left;
366 padding: 0 1rem;
367 color: var(--color-secondary);
368}
369
370div#cgit table.commit-info td {
371 padding: 0 1rem;
372}
373
374div#cgit div.commit-subject {
375 font-size: 1.2rem;
376 font-weight: bold;
377 color: var(--color-primary);
378 margin: 1.5rem 0 0.5rem 0;
379}
380
381div#cgit div.commit-msg {
382 white-space: pre-wrap;
383 font-family: monospace;
384 padding: 1rem;
385 background: var(--color-surface-container-low);
386 border-radius: 4px;
387 color: var(--color-on-surface);
388}
389
390/* 10. Footer */
391div#cgit div.footer {
392 margin-top: auto;
393 padding: 2rem 1rem;
394 text-align: center;
395 font-size: 0.85rem;
396 color: var(--color-outline);
397 border-top: 1px solid var(--color-outline-variant);
398}
399
400div#cgit div.error {
401 color: var(--color-error);
402 background: var(--color-error-container);
403 padding: 1rem;
404 border-radius: 4px;
405 margin: 1rem 0;
406}
407
408/* 11. Responsive Adjustments */
409@media only screen and (max-width: 768px) {
410 div#cgit table#header {
411 flex-direction: column;
412 align-items: flex-start;
413 }
414
415 div#cgit table#header td.logo,
416 div#cgit table#header td.main,
417 div#cgit table#header td.form {
418 width: 100%;
419 text-align: left;
420 margin-bottom: 0.5rem;
421 }
422
423 div#cgit table.tabs {
424 flex-direction: column;
425 padding: 0;
426 }
427
428 div#cgit table.tabs td a {
429 width: 100%;
430 border-bottom: 1px solid var(--color-outline-variant);
431 }
432
433 div#cgit table.tabs td.form {
434 width: 100%;
435 justify-content: flex-start;
436 padding: 1rem;
437 }
438
439 div#cgit div.content {
440 padding: 1rem 0.5rem;
441 overflow-x: auto; /* Enable horizontal scroll for content */
442 }
443
444 /* Force tables to scroll on small screens */
445 div#cgit table.list,
446 div#cgit table.blob,
447 div#cgit table.diff {
448 white-space: nowrap;
449 }
450
451 /* Allow wrapping in logs on mobile to prevent extreme width */
452 div#cgit table.list td.logmsg {
453 white-space: normal;
454 min-width: 200px;
455 }
456}
457
458/* Container override for highlighted code to handle font sizing */
459div#cgit table.blob pre {
460 font-family: monospace;
461 font-size: 0.95em;
462 line-height: 1.4;
463}
diff --git a/www/static/colors.css b/www/static/colors.css
new file mode 100644
index 0000000..4ac8629
--- /dev/null
+++ b/www/static/colors.css
@@ -0,0 +1,119 @@
1@media (prefers-color-scheme: dark) {
2 :root {
3 --color-primary: rgb(255 181 160);
4 --color-surface-tint: rgb(255 181 160);
5 --color-on-primary: rgb(86 31 15);
6 --color-primary-container: rgb(114 53 35);
7 --color-on-primary-container: rgb(255 219 209);
8 --color-secondary: rgb(231 189 178);
9 --color-on-secondary: rgb(68 42 34);
10 --color-secondary-container: rgb(93 64 55);
11 --color-on-secondary-container: rgb(255 219 209);
12 --color-tertiary: rgb(216 197 141);
13 --color-on-tertiary: rgb(59 47 5);
14 --color-tertiary-container: rgb(83 70 25);
15 --color-on-tertiary-container: rgb(245 225 167);
16 --color-error: rgb(255 180 171);
17 --color-on-error: rgb(105 0 5);
18 --color-error-container: rgb(147 0 10);
19 --color-on-error-container: rgb(255 218 214);
20 --color-background: rgb(26 17 15);
21 --color-on-background: rgb(241 223 218);
22 --color-surface: rgb(26 17 15);
23 --color-on-surface: rgb(241 223 218);
24 --color-surface-variant: rgb(83 67 63);
25 --color-on-surface-variant: rgb(216 194 188);
26 --color-outline: rgb(160 140 135);
27 --color-outline-variant: rgb(83 67 63);
28 --color-shadow: rgb(0 0 0);
29 --color-scrim: rgb(0 0 0);
30 --color-inverse-surface: rgb(241 223 218);
31 --color-inverse-on-surface: rgb(57 46 43);
32 --color-inverse-primary: rgb(143 76 56);
33 --color-primary-fixed: rgb(255 219 209);
34 --color-on-primary-fixed: rgb(58 11 1);
35 --color-primary-fixed-dim: rgb(255 181 160);
36 --color-on-primary-fixed-variant: rgb(114 53 35);
37 --color-secondary-fixed: rgb(255 219 209);
38 --color-on-secondary-fixed: rgb(44 21 15);
39 --color-secondary-fixed-dim: rgb(231 189 178);
40 --color-on-secondary-fixed-variant: rgb(93 64 55);
41 --color-tertiary-fixed: rgb(245 225 167);
42 --color-on-tertiary-fixed: rgb(35 27 0);
43 --color-tertiary-fixed-dim: rgb(216 197 141);
44 --color-on-tertiary-fixed-variant: rgb(83 70 25);
45 --color-surface-dim: rgb(26 17 15);
46 --color-surface-bright: rgb(66 55 52);
47 --color-surface-container-lowest: rgb(20 12 10);
48 --color-surface-container-low: rgb(35 25 23);
49 --color-surface-container: rgb(39 29 27);
50 --color-surface-container-high: rgb(50 40 37);
51 --color-surface-container-highest: rgb(61 50 47);
52
53 color-scheme: dark;
54 }
55}
56
57@media (prefers-color-scheme: light) {
58 :root {
59 --color-primary: rgb(143 76 56);
60 --color-surface-tint: rgb(143 76 56);
61 --color-on-primary: rgb(255 255 255);
62 --color-primary-container: rgb(255 219 209);
63 --color-on-primary-container: rgb(114 53 35);
64 --color-secondary: rgb(119 87 78);
65 --color-on-secondary: rgb(255 255 255);
66 --color-secondary-container: rgb(255 219 209);
67 --color-on-secondary-container: rgb(93 64 55);
68 --color-tertiary: rgb(108 93 47);
69 --color-on-tertiary: rgb(255 255 255);
70 --color-tertiary-container: rgb(245 225 167);
71 --color-on-tertiary-container: rgb(83 70 25);
72 --color-error: rgb(186 26 26);
73 --color-on-error: rgb(255 255 255);
74 --color-error-container: rgb(255 218 214);
75 --color-on-error-container: rgb(147 0 10);
76 --color-background: rgb(255 248 246);
77 --color-on-background: rgb(35 25 23);
78 --color-surface: rgb(255 248 246);
79 --color-on-surface: rgb(35 25 23);
80 --color-surface-variant: rgb(245 222 216);
81 --color-on-surface-variant: rgb(83 67 63);
82 --color-outline: rgb(133 115 110);
83 --color-outline-variant: rgb(216 194 188);
84 --color-shadow: rgb(0 0 0);
85 --color-scrim: rgb(0 0 0);
86 --color-inverse-surface: rgb(57 46 43);
87 --color-inverse-on-surface: rgb(255 237 232);
88 --color-inverse-primary: rgb(255 181 160);
89 --color-primary-fixed: rgb(255 219 209);
90 --color-on-primary-fixed: rgb(58 11 1);
91 --color-primary-fixed-dim: rgb(255 181 160);
92 --color-on-primary-fixed-variant: rgb(114 53 35);
93 --color-secondary-fixed: rgb(255 219 209);
94 --color-on-secondary-fixed: rgb(44 21 15);
95 --color-secondary-fixed-dim: rgb(231 189 178);
96 --color-on-secondary-fixed-variant: rgb(93 64 55);
97 --color-tertiary-fixed: rgb(245 225 167);
98 --color-on-tertiary-fixed: rgb(35 27 0);
99 --color-tertiary-fixed-dim: rgb(216 197 141);
100 --color-on-tertiary-fixed-variant: rgb(83 70 25);
101 --color-surface-dim: rgb(232 214 210);
102 --color-surface-bright: rgb(255 248 246);
103 --color-surface-container-lowest: rgb(255 255 255);
104 --color-surface-container-low: rgb(255 241 237);
105 --color-surface-container: rgb(252 234 229);
106 --color-surface-container-high: rgb(247 228 224);
107 --color-surface-container-highest: rgb(241 223 218);
108
109 color-scheme: light;
110 }
111}
112
113/* Custom logic for diffs */
114:root {
115 --diff-add-bg: var(--color-tertiary-container);
116 --diff-add-fg: var(--color-on-tertiary-container);
117 --diff-del-bg: var(--color-error-container);
118 --diff-del-fg: var(--color-on-error-container);
119}
diff --git a/www/static/hl.css b/www/static/hl.css
new file mode 100644
index 0000000..15998e0
--- /dev/null
+++ b/www/static/hl.css
@@ -0,0 +1,95 @@
1/* --- Syntax Highlighting --- */
2
3/* Comments - Outline/Grey */
4.hl-c,
5.hl-cm,
6.hl-cp,
7.hl-c1,
8.hl-cs {
9 color: var(--color-outline);
10 font-style: italic;
11}
12
13/* Keywords - Primary (Pinkish/Orange) */
14.hl-k,
15.hl-kc,
16.hl-kd,
17.hl-kn,
18.hl-kp,
19.hl-kr,
20.hl-kt {
21 color: var(--color-primary);
22 font-weight: bold;
23}
24
25/* Names/Functions - Tertiary (Yellowish) */
26.hl-n,
27.hl-na,
28.hl-nb,
29.hl-nc,
30.hl-no,
31.hl-nd,
32.hl-ni,
33.hl-ne,
34.hl-nf,
35.hl-nl,
36.hl-nn,
37.hl-nt,
38.hl-nv,
39.hl-nx {
40 color: var(--color-tertiary);
41}
42
43/* Strings - Secondary (Reddish/Brownish) */
44.hl-s,
45.hl-sa,
46.hl-sb,
47.hl-sc,
48.hl-dl,
49.hl-sd,
50.hl-s2,
51.hl-se,
52.hl-sh,
53.hl-si,
54.hl-sx,
55.hl-sr,
56.hl-s1,
57.hl-ss {
58 color: var(--color-secondary);
59}
60
61/* Operators - On Surface (Main text color) */
62.hl-o,
63.hl-ow {
64 color: var(--color-on-surface-variant);
65}
66
67/* Numbers - Primary Container (Brighter accent) */
68.hl-m,
69.hl-mb,
70.hl-mf,
71.hl-mh,
72.hl-mi,
73.hl-mo,
74.hl-il {
75 color: var(--color-primary-fixed);
76}
77
78/* Errors */
79.hl-err,
80.hl-gr {
81 color: var(--color-error);
82 background-color: var(--color-error-container);
83}
84
85/* Generic Deleted */
86.hl-gd {
87 color: var(--color-error);
88 background-color: var(--color-error-container);
89}
90
91/* Generic Inserted */
92.hl-gi {
93 color: var(--color-tertiary);
94 background-color: var(--color-tertiary-container);
95}
diff --git a/www/static/md.css b/www/static/md.css
new file mode 100644
index 0000000..c8966c3
--- /dev/null
+++ b/www/static/md.css
@@ -0,0 +1,248 @@
1/* --- Markdown Body Styles --- */
2
3.markdown-body {
4 font-family: inherit;
5 font-size: 1rem;
6 line-height: 1.6;
7 color: var(--color-on-background);
8 word-wrap: break-word;
9}
10
11/* Headers */
12.markdown-body h1,
13.markdown-body h2,
14.markdown-body h3,
15.markdown-body h4,
16.markdown-body h5,
17.markdown-body h6 {
18 margin-top: 24px;
19 margin-bottom: 16px;
20 font-weight: 600;
21 line-height: 1.25;
22 color: var(--color-on-surface);
23}
24
25.markdown-body h1 {
26 font-size: 2em;
27 border-bottom: 1px solid var(--color-outline-variant);
28 padding-bottom: 0.3em;
29}
30.markdown-body h2 {
31 font-size: 1.5em;
32 border-bottom: 1px solid var(--color-outline-variant);
33 padding-bottom: 0.3em;
34}
35.markdown-body h3 {
36 font-size: 1.25em;
37}
38.markdown-body h4 {
39 font-size: 1em;
40}
41.markdown-body h5 {
42 font-size: 0.875em;
43}
44.markdown-body h6 {
45 font-size: 0.85em;
46 color: var(--color-on-surface-variant);
47}
48
49/* Links */
50.markdown-body a {
51 color: var(--color-primary);
52 text-decoration: none;
53}
54.markdown-body a:hover {
55 text-decoration: underline;
56}
57
58/* Paragraphs & Lists */
59.markdown-body p,
60.markdown-body blockquote,
61.markdown-body ul,
62.markdown-body ol,
63.markdown-body dl,
64.markdown-body table,
65.markdown-body pre {
66 margin-top: 0;
67 margin-bottom: 16px;
68}
69
70.markdown-body hr {
71 height: 0.25em;
72 padding: 0;
73 margin: 24px 0;
74 background-color: var(--color-outline-variant);
75 border: 0;
76}
77
78/* Blockquotes */
79.markdown-body blockquote {
80 padding: 0 1em;
81 color: var(--color-on-surface-variant);
82 border-left: 0.25em solid var(--color-outline);
83 background-color: var(--color-surface-container-low);
84}
85
86/* Tables */
87.markdown-body table {
88 display: block;
89 width: 100%;
90 overflow: auto;
91 border-spacing: 0;
92 border-collapse: collapse;
93}
94
95.markdown-body table th {
96 font-weight: 600;
97 background-color: var(--color-surface-container);
98}
99
100.markdown-body table th,
101.markdown-body table td {
102 padding: 6px 13px;
103 border: 1px solid var(--color-outline-variant);
104}
105
106.markdown-body table tr {
107 background-color: var(--color-surface);
108 border-top: 1px solid var(--color-outline-variant);
109}
110
111.markdown-body table tr:nth-child(2n) {
112 background-color: var(--color-surface-container-lowest);
113}
114
115/* Images */
116.markdown-body img {
117 max-width: 100%;
118 box-sizing: border-box;
119 background-color: var(--color-surface);
120 border-radius: 4px;
121}
122
123/* Code Blocks & Inline Code */
124.markdown-body code,
125.markdown-body tt {
126 padding: 0.2em 0.4em;
127 margin: 0;
128 font-size: 85%;
129 font-family: "JetBrains Mono", "Fira Code", monospace;
130 background-color: var(--color-surface-container-high);
131 border-radius: 6px;
132 color: var(--color-on-surface);
133}
134
135.markdown-body pre {
136 padding: 16px;
137 overflow: auto;
138 font-size: 85%;
139 line-height: 1.45;
140 background-color: var(--color-surface-container-lowest);
141 border-radius: 6px;
142 border: 1px solid var(--color-outline-variant);
143}
144
145.markdown-body pre code,
146.markdown-body pre tt {
147 display: inline;
148 max-width: auto;
149 padding: 0;
150 margin: 0;
151 overflow: visible;
152 line-height: inherit;
153 word-wrap: normal;
154 background-color: transparent;
155 border: 0;
156}
157
158/* Anchors (Permalinks) */
159.markdown-body a.headerlink {
160 padding-left: 1ch;
161 line-height: 1;
162 color: var(--color-primary);
163 text-decoration: none;
164 opacity: 0;
165 transition: opacity 0.2s;
166}
167
168.markdown-body h1:hover .headerlink,
169.markdown-body h2:hover .headerlink,
170.markdown-body h3:hover .headerlink,
171.markdown-body h4:hover .headerlink,
172.markdown-body h5:hover .headerlink,
173.markdown-body h6:hover .headerlink {
174 opacity: 1;
175}
176
177/* Pygments Syntax Highlighting within Markdown
178 (Mapping standard Pygments classes to Material Variables) */
179.markdown-body .highlight .c,
180.markdown-body .highlight .cm,
181.markdown-body .highlight .cp,
182.markdown-body .highlight .c1,
183.markdown-body .highlight .cs {
184 color: var(--color-outline);
185 font-style: italic;
186}
187.markdown-body .highlight .k,
188.markdown-body .highlight .kc,
189.markdown-body .highlight .kd,
190.markdown-body .highlight .kn,
191.markdown-body .highlight .kp,
192.markdown-body .highlight .kr,
193.markdown-body .highlight .kt {
194 color: var(--color-primary);
195 font-weight: bold;
196}
197.markdown-body .highlight .n,
198.markdown-body .highlight .na,
199.markdown-body .highlight .nb,
200.markdown-body .highlight .nc,
201.markdown-body .highlight .no,
202.markdown-body .highlight .nd,
203.markdown-body .highlight .ni,
204.markdown-body .highlight .ne,
205.markdown-body .highlight .nf,
206.markdown-body .highlight .nl,
207.markdown-body .highlight .nn,
208.markdown-body .highlight .nt,
209.markdown-body .highlight .nv,
210.markdown-body .highlight .nx {
211 color: var(--color-tertiary);
212}
213.markdown-body .highlight .s,
214.markdown-body .highlight .sa,
215.markdown-body .highlight .sb,
216.markdown-body .highlight .sc,
217.markdown-body .highlight .dl,
218.markdown-body .highlight .sd,
219.markdown-body .highlight .s2,
220.markdown-body .highlight .se,
221.markdown-body .highlight .sh,
222.markdown-body .highlight .si,
223.markdown-body .highlight .sx,
224.markdown-body .highlight .sr,
225.markdown-body .highlight .s1,
226.markdown-body .highlight .ss {
227 color: var(--color-secondary);
228}
229.markdown-body .highlight .m,
230.markdown-body .highlight .mb,
231.markdown-body .highlight .mf,
232.markdown-body .highlight .mh,
233.markdown-body .highlight .mi,
234.markdown-body .highlight .mo,
235.markdown-body .highlight .il {
236 color: var(--color-primary-fixed);
237}
238.markdown-body .highlight .o,
239.markdown-body .highlight .ow {
240 color: var(--color-on-surface-variant);
241}
242.markdown-body .highlight .g,
243.markdown-body .highlight .gh,
244.markdown-body .highlight .gu,
245.markdown-body .highlight .gd,
246.markdown-body .highlight .gi {
247 color: var(--color-on-surface);
248}
generated by cgit v1.2.3 (git 2.46.0) at 2026-01-11 20:46:19 +0000