diff options
| -rw-r--r-- | README.md | 6 | ||||
| -rw-r--r-- | modules/cgit.css | 195 |
2 files changed, 69 insertions, 132 deletions
@@ -370,3 +370,9 @@ the paths that actually matter, per service: - **AdGuard Home** - `/var/lib/AdGuardHome`, low priority: `mutableSettings = false` means the config is fully regenerated from this repo on every service start, so nothing there is irreplaceable except transient query logs/stats. + +## Todo + +- [ ] Backup Strategy +- [ ] git about pages +- [ ] Webpage deploy diff --git a/modules/cgit.css b/modules/cgit.css index c7c030a..2e99bec 100644 --- a/modules/cgit.css +++ b/modules/cgit.css @@ -2,7 +2,11 @@ * CSS custom properties and the same prefers-color-scheme media query * technique for automatic light/dark switching, no JS or toggle involved. * --border-color, --muted-color and --panel-bg-color are new - homepage's - * simple prose layout never needed them, but cgit's table-heavy UI does. */ + * simple prose layout never needed them, but cgit's table-heavy UI does. + * The diff/age/ssdiff/notes variables below aren't hue-driven (they're + * semantically meaningful - add/del/changed, recency) but still get a + * light and dark value here so every theme-conditional color lives in + * these two blocks rather than a second copy of the selectors below. */ :root { --hue: 0; --saturation: 60%; @@ -13,6 +17,19 @@ --border-color: hsl(var(--hue), var(--saturation), 80%); --muted-color: hsl(var(--hue), var(--saturation), 45%); --panel-bg-color: hsl(var(--hue), var(--saturation), 93%); + --add-color: #080; + --del-color: #c00; + --upd-color: #009; + --age-days-color: #040; + --notes-border-color: #ee9; + --notes-bg-color: #ffd; + --ssdiff-add-bg: #cfc; + --ssdiff-add-dark-bg: #aca; + --ssdiff-del-bg: #fcc; + --ssdiff-del-dark-bg: #caa; + --ssdiff-changed-bg: #ffc; + --ssdiff-changed-dark-bg: #cca; + --ssdiff-hunk-bg: #ccf; } @media (prefers-color-scheme: dark) { @@ -24,6 +41,19 @@ --border-color: hsl(var(--hue), var(--saturation), 25%); --muted-color: hsl(var(--hue), var(--saturation), 60%); --panel-bg-color: hsl(var(--hue), var(--saturation), 15%); + --add-color: #6c6; + --del-color: #c66; + --upd-color: #88f; + --age-days-color: #4a4; + --notes-border-color: #663; + --notes-bg-color: #332f14; + --ssdiff-add-bg: #143214; + --ssdiff-add-dark-bg: #1e4a1e; + --ssdiff-del-bg: #3a1414; + --ssdiff-del-dark-bg: #4a1e1e; + --ssdiff-changed-bg: #33301a; + --ssdiff-changed-dark-bg: #4a4526; + --ssdiff-hunk-bg: #1a1a33; } } @@ -490,9 +520,9 @@ div#cgit div.notes-header { div#cgit div.notes { white-space: pre; font-family: monospace; - border: solid 1px #ee9; - background-color: #ffd; - color: #000; + border: solid 1px var(--notes-border-color); + background-color: var(--notes-bg-color); + color: var(--text-color); padding: 0.3em 2em 0.3em 1em; float: left; } @@ -536,15 +566,15 @@ div#cgit table.diffstat td span.modechange { } div#cgit table.diffstat td.add a { - color: green; + color: var(--add-color); } div#cgit table.diffstat td.del a { - color: red; + color: var(--del-color); } div#cgit table.diffstat td.upd a { - color: blue; + color: var(--upd-color); } div#cgit table.diffstat td.graph { @@ -591,15 +621,15 @@ div#cgit table.diff td div.head { } div#cgit table.diff td div.hunk { - color: #009; + color: var(--upd-color); } div#cgit table.diff td div.add { - color: green; + color: var(--add-color); } div#cgit table.diff td div.del { - color: red; + color: var(--del-color); } div#cgit .oid { @@ -663,15 +693,15 @@ div#cgit ul.pager .current { div#cgit span.age-mins { font-weight: bold; - color: #080; + color: var(--add-color); } div#cgit span.age-hours { - color: #080; + color: var(--add-color); } div#cgit span.age-days { - color: #040; + color: var(--age-days-color); } div#cgit span.age-weeks { @@ -687,11 +717,11 @@ div#cgit span.age-years { } div#cgit span.insertions { - color: #080; + color: var(--add-color); } div#cgit span.deletions { - color: #800; + color: var(--del-color); } div#cgit div.footer { @@ -854,53 +884,53 @@ div#cgit table.ssdiff td { } div#cgit table.ssdiff td.add { - color: #000; - background: #cfc; + color: var(--text-color); + background: var(--ssdiff-add-bg); min-width: 50%; } div#cgit table.ssdiff td.add_dark { - color: #000; - background: #aca; + color: var(--text-color); + background: var(--ssdiff-add-dark-bg); min-width: 50%; } div#cgit table.ssdiff span.add { - background: #cfc; + background: var(--ssdiff-add-bg); font-weight: bold; } div#cgit table.ssdiff td.del { - color: #000; - background: #fcc; + color: var(--text-color); + background: var(--ssdiff-del-bg); min-width: 50%; } div#cgit table.ssdiff td.del_dark { - color: #000; - background: #caa; + color: var(--text-color); + background: var(--ssdiff-del-dark-bg); min-width: 50%; } div#cgit table.ssdiff span.del { - background: #fcc; + background: var(--ssdiff-del-bg); font-weight: bold; } div#cgit table.ssdiff td.changed { - color: #000; - background: #ffc; + color: var(--text-color); + background: var(--ssdiff-changed-bg); min-width: 50%; } div#cgit table.ssdiff td.changed_dark { - color: #000; - background: #cca; + color: var(--text-color); + background: var(--ssdiff-changed-dark-bg); min-width: 50%; } div#cgit table.ssdiff td.lineno { - color: #000; + color: var(--text-color); background: var(--panel-bg-color); text-align: right; width: 3em; @@ -908,8 +938,8 @@ div#cgit table.ssdiff td.lineno { } div#cgit table.ssdiff td.hunk { - color: #000; - background: #ccf; + color: var(--text-color); + background: var(--ssdiff-hunk-bg); border-top: solid 1px var(--border-color); border-bottom: solid 1px var(--border-color); } @@ -921,7 +951,7 @@ div#cgit table.ssdiff td.head { div#cgit table.ssdiff td.head div.head { font-weight: bold; - color: #000; + color: var(--text-color); } div#cgit table.ssdiff td.foot { @@ -938,102 +968,3 @@ div#cgit table.ssdiff td.space { div#cgit table.ssdiff td.space div { min-height: 3em; } - -/* Dark-mode-only adjustments for colors that are semantically meaningful - * (diff add/del/change, recency-age scale, hunk headers) rather than part of - * the site's hue-driven palette above - these need their own light/dark - * pair instead of a var() so diffs and blame stay legible against a near- - * black background instead of just inheriting the light-mode hue. */ -@media (prefers-color-scheme: dark) { - div#cgit span.age-mins, - div#cgit span.age-hours { - color: #6c6; - } - - div#cgit span.age-days { - color: #4a4; - } - - div#cgit span.insertions { - color: #6c6; - } - - div#cgit span.deletions { - color: #c66; - } - - div#cgit table.diffstat td.add a { - color: #6c6; - } - - div#cgit table.diffstat td.del a { - color: #c66; - } - - div#cgit table.diffstat td.upd a { - color: #88f; - } - - div#cgit table.diff td div.hunk { - color: #88f; - } - - div#cgit table.diff td div.add { - color: #6c6; - } - - div#cgit table.diff td div.del { - color: #c66; - } - - div#cgit div.notes { - border-color: #663; - background-color: #332f14; - color: var(--text-color); - } - - div#cgit table.ssdiff td.add, - div#cgit table.ssdiff span.add { - background: #143214; - color: var(--text-color); - } - - div#cgit table.ssdiff td.add_dark { - background: #1e4a1e; - color: var(--text-color); - } - - div#cgit table.ssdiff td.del, - div#cgit table.ssdiff span.del { - background: #3a1414; - color: var(--text-color); - } - - div#cgit table.ssdiff td.del_dark { - background: #4a1e1e; - color: var(--text-color); - } - - div#cgit table.ssdiff td.changed { - background: #33301a; - color: var(--text-color); - } - - div#cgit table.ssdiff td.changed_dark { - background: #4a4526; - color: var(--text-color); - } - - div#cgit table.ssdiff td.hunk { - background: #1a1a33; - color: var(--text-color); - } - - div#cgit table.ssdiff td.head div.head { - color: var(--text-color); - } - - div#cgit table.ssdiff td.lineno { - color: var(--text-color); - } -} |