From 62af97acf1aa92eda881c754ae0cc6876d3a5ede Mon Sep 17 00:00:00 2001 From: Tolmachev Igor Date: Wed, 7 Jan 2026 02:56:17 +0900 Subject: Improve docker image structure --- Dockerfile | 19 +- README.md | 46 ++ cgit.conf | 4 +- cgitrc | 10 +- filters/html-converters/md2html | 37 ++ filters/syntax-material.py | 37 ++ include/head.html | 1 + lighttpd.conf | 2 +- responsive/cgit.css | 925 ---------------------------------------- responsive/head.html | 1 - responsive/md2html | 37 -- responsive/syntax-material.py | 37 -- www/cgit.css | 463 ++++++++++++++++++++ www/static/colors.css | 119 ++++++ www/static/hl.css | 95 +++++ www/static/md.css | 248 +++++++++++ 16 files changed, 1062 insertions(+), 1019 deletions(-) create mode 100644 README.md create mode 100755 filters/html-converters/md2html create mode 100755 filters/syntax-material.py create mode 100644 include/head.html delete mode 100644 responsive/cgit.css delete mode 100644 responsive/head.html delete mode 100755 responsive/md2html delete mode 100755 responsive/syntax-material.py create mode 100644 www/cgit.css create mode 100644 www/static/colors.css create mode 100644 www/static/hl.css create mode 100644 www/static/md.css 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 RUN apt-get install -y libzip-dev libssl-dev WORKDIR /cgit -COPY cgit /cgit -COPY cgit.conf /cgit +COPY cgit/ /cgit/ +COPY cgit.conf /cgit/ RUN make RUN make install -COPY cgitrc /app -COPY responsive/head.html /app/www/static -COPY responsive/cgit.css /app/www/static -COPY responsive/syntax-material.py /app/lib/filters -COPY responsive/md2html /app/lib/filters/html-converters/md2html +COPY cgitrc /app/ +COPY filters/ /app/filters/ +COPY include/ /app/include/ +COPY www/ /app/www/ FROM debian:latest AS cgit-run @@ -25,7 +24,9 @@ RUN apt-get install -y python3 python3-pygments python3-markdown python3-docutil RUN apt-get install -y lighttpd WORKDIR /app -COPY --from=cgit-build /app /app -COPY lighttpd.conf /app/lighttpd.conf +COPY --from=cgit-build /app/ /app/ +COPY lighttpd.conf /app/ + +RUN mkdir /app/repos /app/about/ CMD ["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 @@ +# cgit material docker + +Dockerized cgit with a responsive Material Design theme. + +## Quick Start + +Run the container using the following command: + +```bash +docker run -d -p 80:80 igorechek06/cgit-material-docker +``` + +## Configuration and Volumes + +You can map local directories to the following paths inside the container to customize the instance. + +### /app/repos + +This is the recommended directory to store your git repositories. + +### /app/etc/cgitrc + +The main configuration file. It follows the standard `cgitrc` syntax. + +### /app/include + +Contains HTML fragments included in the pages. + +- **head.html**: Used by the `head-include` setting. +- You can also place files here for the `header` or `footer` settings defined in `cgitrc`. + +### /app/filters + +Contains the original cgit filters and two custom filters required for the Material theme. You can add your own custom filter scripts to this directory. + +### /app/www/static/ + +Used for storing static assets such as images. + +- **Note:** When referencing these files in `cgitrc`, write the path relative to `/app/www/`. + +### /app/about/ + +Used to store specific Markdown files for repository descriptions. + +- **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 @@ CGIT_SCRIPT_PATH = /app/www -CGIT_DATA_PATH = /app/www/static +CGIT_DATA_PATH = /app/www CGIT_CONFIG = /app/cgitrc -filterdir = /app/lib/filters +filterdir = /app/filters diff --git a/cgitrc b/cgitrc index 981ab64..442c197 100644 --- a/cgitrc +++ b/cgitrc @@ -1,10 +1,6 @@ -css=/static/cgit.css -js=/static/cgit.js -logo=/static/cgit.png -favicon=/static/favicon.ico -head-include=/app/www/static/head.html +head-include=/app/include/head.html -about-filter=/app/lib/filters/about-formatting.sh -source-filter=/app/lib/filters/syntax-material.py +about-filter=/app/filters/about-formatting.sh +source-filter=/app/filters/syntax-material.py include=/app/etc/cgitrc diff --git a/filters/html-converters/md2html b/filters/html-converters/md2html new file mode 100755 index 0000000..571c8d7 --- /dev/null +++ b/filters/html-converters/md2html @@ -0,0 +1,37 @@ +#!/usr/bin/env python3 +import io +import sys + +import markdown +from markdown.extensions.toc import TocExtension + +sys.stdin = io.TextIOWrapper(sys.stdin.buffer, encoding="utf-8") +sys.stdout = io.TextIOWrapper(sys.stdout.buffer, encoding="utf-8") + +sys.stdout.write("
") +sys.stdout.flush() + +try: + markdown.markdownFromFile( + output_format="html5", + extensions=[ + "markdown.extensions.fenced_code", + "markdown.extensions.codehilite", + "markdown.extensions.tables", + "markdown.extensions.sane_lists", + "markdown.extensions.admonition", + TocExtension(anchorlink=True, permalink=True), + ], + extension_configs={ + "markdown.extensions.codehilite": { + "css_class": "highlight", + "guess_lang": False, + } + }, + ) +except Exception as e: + sys.stdout.write(f"

Error rendering markdown: {e}

") + sys.stdin.seek(0) + sys.stdout.write(f"
{sys.stdin.read()}
") + +sys.stdout.write("
") diff --git a/filters/syntax-material.py b/filters/syntax-material.py new file mode 100755 index 0000000..3176691 --- /dev/null +++ b/filters/syntax-material.py @@ -0,0 +1,37 @@ +#!/usr/bin/env python3 +import sys + +from pygments import highlight +from pygments.formatters import HtmlFormatter +from pygments.lexers import get_lexer_for_filename, guess_lexer +from pygments.util import ClassNotFound + + +def main(): + filename = sys.argv[-1] if len(sys.argv) > 1 else "stdin" + + try: + data = sys.stdin.read() + except Exception: + return + + try: + lexer = get_lexer_for_filename(filename) + except ClassNotFound: + try: + lexer = guess_lexer(data) + except ClassNotFound: + sys.stdout.write(f"
{data}
") + return + + formatter = HtmlFormatter(style="default", nowrap=True, classprefix="hl-") + + try: + sys.stdout.write("") + highlight(data, lexer, formatter, sys.stdout) + except BrokenPipeError: + pass + + +if __name__ == "__main__": + main() diff --git a/include/head.html b/include/head.html new file mode 100644 index 0000000..44dca77 --- /dev/null +++ b/include/head.html @@ -0,0 +1 @@ + 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" ) server.port = 80 server.document-root = "/app/www" -$HTTP["url"] !~ "^/static" { +$HTTP["url"] !~ "^/(?:cgit\.(?:css|js|png)$|favicon\.ico$|robots\.txt$|static)" { alias.url = ( "" => "/app/www/cgit.cgi" ) cgi.assign = ( "" => "" ) } 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. Color scheme */ - -@media (prefers-color-scheme: dark) { - :root { - --color-primary: rgb(255 181 160); - --color-surface-tint: rgb(255 181 160); - --color-on-primary: rgb(86 31 15); - --color-primary-container: rgb(114 53 35); - --color-on-primary-container: rgb(255 219 209); - --color-secondary: rgb(231 189 178); - --color-on-secondary: rgb(68 42 34); - --color-secondary-container: rgb(93 64 55); - --color-on-secondary-container: rgb(255 219 209); - --color-tertiary: rgb(216 197 141); - --color-on-tertiary: rgb(59 47 5); - --color-tertiary-container: rgb(83 70 25); - --color-on-tertiary-container: rgb(245 225 167); - --color-error: rgb(255 180 171); - --color-on-error: rgb(105 0 5); - --color-error-container: rgb(147 0 10); - --color-on-error-container: rgb(255 218 214); - --color-background: rgb(26 17 15); - --color-on-background: rgb(241 223 218); - --color-surface: rgb(26 17 15); - --color-on-surface: rgb(241 223 218); - --color-surface-variant: rgb(83 67 63); - --color-on-surface-variant: rgb(216 194 188); - --color-outline: rgb(160 140 135); - --color-outline-variant: rgb(83 67 63); - --color-shadow: rgb(0 0 0); - --color-scrim: rgb(0 0 0); - --color-inverse-surface: rgb(241 223 218); - --color-inverse-on-surface: rgb(57 46 43); - --color-inverse-primary: rgb(143 76 56); - --color-primary-fixed: rgb(255 219 209); - --color-on-primary-fixed: rgb(58 11 1); - --color-primary-fixed-dim: rgb(255 181 160); - --color-on-primary-fixed-variant: rgb(114 53 35); - --color-secondary-fixed: rgb(255 219 209); - --color-on-secondary-fixed: rgb(44 21 15); - --color-secondary-fixed-dim: rgb(231 189 178); - --color-on-secondary-fixed-variant: rgb(93 64 55); - --color-tertiary-fixed: rgb(245 225 167); - --color-on-tertiary-fixed: rgb(35 27 0); - --color-tertiary-fixed-dim: rgb(216 197 141); - --color-on-tertiary-fixed-variant: rgb(83 70 25); - --color-surface-dim: rgb(26 17 15); - --color-surface-bright: rgb(66 55 52); - --color-surface-container-lowest: rgb(20 12 10); - --color-surface-container-low: rgb(35 25 23); - --color-surface-container: rgb(39 29 27); - --color-surface-container-high: rgb(50 40 37); - --color-surface-container-highest: rgb(61 50 47); - - color-scheme: dark; - } -} - -@media (prefers-color-scheme: light) { - :root { - --color-primary: rgb(143 76 56); - --color-surface-tint: rgb(143 76 56); - --color-on-primary: rgb(255 255 255); - --color-primary-container: rgb(255 219 209); - --color-on-primary-container: rgb(114 53 35); - --color-secondary: rgb(119 87 78); - --color-on-secondary: rgb(255 255 255); - --color-secondary-container: rgb(255 219 209); - --color-on-secondary-container: rgb(93 64 55); - --color-tertiary: rgb(108 93 47); - --color-on-tertiary: rgb(255 255 255); - --color-tertiary-container: rgb(245 225 167); - --color-on-tertiary-container: rgb(83 70 25); - --color-error: rgb(186 26 26); - --color-on-error: rgb(255 255 255); - --color-error-container: rgb(255 218 214); - --color-on-error-container: rgb(147 0 10); - --color-background: rgb(255 248 246); - --color-on-background: rgb(35 25 23); - --color-surface: rgb(255 248 246); - --color-on-surface: rgb(35 25 23); - --color-surface-variant: rgb(245 222 216); - --color-on-surface-variant: rgb(83 67 63); - --color-outline: rgb(133 115 110); - --color-outline-variant: rgb(216 194 188); - --color-shadow: rgb(0 0 0); - --color-scrim: rgb(0 0 0); - --color-inverse-surface: rgb(57 46 43); - --color-inverse-on-surface: rgb(255 237 232); - --color-inverse-primary: rgb(255 181 160); - --color-primary-fixed: rgb(255 219 209); - --color-on-primary-fixed: rgb(58 11 1); - --color-primary-fixed-dim: rgb(255 181 160); - --color-on-primary-fixed-variant: rgb(114 53 35); - --color-secondary-fixed: rgb(255 219 209); - --color-on-secondary-fixed: rgb(44 21 15); - --color-secondary-fixed-dim: rgb(231 189 178); - --color-on-secondary-fixed-variant: rgb(93 64 55); - --color-tertiary-fixed: rgb(245 225 167); - --color-on-tertiary-fixed: rgb(35 27 0); - --color-tertiary-fixed-dim: rgb(216 197 141); - --color-on-tertiary-fixed-variant: rgb(83 70 25); - --color-surface-dim: rgb(232 214 210); - --color-surface-bright: rgb(255 248 246); - --color-surface-container-lowest: rgb(255 255 255); - --color-surface-container-low: rgb(255 241 237); - --color-surface-container: rgb(252 234 229); - --color-surface-container-high: rgb(247 228 224); - --color-surface-container-highest: rgb(241 223 218); - - color-scheme: light; - } -} - -:root { - /* Custom logic for diffs */ - --diff-add-bg: var(--color-tertiary-container); - --diff-add-fg: var(--color-on-tertiary-container); - --diff-del-bg: var(--color-error-container); - --diff-del-fg: var(--color-on-error-container); -} - -/* 2. Global Reset & Body */ -* { - box-sizing: border-box; -} - -body { - font-family: sans-serif; - font-size: 14px; - line-height: 1.5; - color: var(--color-on-background); - background: var(--color-background); - margin: 0; - padding: 0; - - -webkit-text-size-adjust: 100%; - -moz-text-size-adjust: 100%; - text-size-adjust: 100%; -} - -div#cgit { - padding: 0; - margin: 0 auto; - max-width: 1200px; - background: var(--color-background); - min-height: 100vh; - display: flex; - flex-direction: column; -} - -a { - color: var(--color-primary); - text-decoration: none; - transition: opacity 0.2s; -} - -a:hover { - text-decoration: underline; - opacity: 0.8; -} - -/* 3. Header Area */ -div#cgit table#header { - width: 100%; - margin-bottom: 0; - background-color: var(--color-surface-container); - color: var(--color-on-surface); - padding: 1rem; - /* Transform table to flex for responsiveness */ - display: flex; - flex-wrap: wrap; - align-items: center; - border-bottom: 1px solid var(--color-outline-variant); -} - -/* Fix for table structure within header */ -div#cgit table#header tbody, -div#cgit table#header tr { - display: contents; -} - -div#cgit table#header td.logo { - display: block; - padding-right: 1rem; -} - -div#cgit table#header td.main { - font-size: 1.5rem; - font-weight: bold; - color: var(--color-on-surface); - display: block; - flex-grow: 1; -} - -div#cgit table#header td.main a { - color: var(--color-on-surface); -} - -div#cgit table#header td.form { - display: block; - text-align: right; - margin-top: 0.5rem; -} - -div#cgit table#header td.sub { - display: block; - width: 100%; - padding-top: 0.25rem; - color: var(--color-outline); - font-size: 0.9rem; - border-top: none; /* Removing legacy border */ -} - -/* Input Elements */ -select, -input, -textarea { - background-color: var(--color-surface-container-high); - color: var(--color-on-surface); - border: 1px solid var(--color-outline); - border-radius: 4px; - padding: 4px 8px; - font-family: inherit; -} - -input[type="submit"] { - background-color: var(--color-primary); - color: var(--color-on-primary); - border: none; - cursor: pointer; - font-weight: 500; - padding: 5px 12px; -} - -input[type="submit"]:hover { - background-color: var(--color-primary-fixed-dim); -} - -/* 4. Tabs Navigation */ -div#cgit table.tabs { - border-bottom: 1px solid var(--color-outline-variant); - border-collapse: collapse; - margin: 0; - width: 100%; - background-color: var(--color-surface); - display: flex; /* Modern layout */ - flex-wrap: wrap; - padding: 0 1rem; -} - -div#cgit table.tabs tbody, -div#cgit table.tabs tr { - display: contents; -} - -div#cgit table.tabs td { - display: block; - padding: 0; -} - -div#cgit table.tabs td a { - display: inline-block; - padding: 0.75rem 1rem; - color: var(--color-on-surface-variant); - font-weight: 500; - border-bottom: 2px solid transparent; -} - -div#cgit table.tabs td a.active { - color: var(--color-primary); - border-bottom: 2px solid var(--color-primary); - background-color: var(--color-surface-container-low); -} - -div#cgit table.tabs td a:hover { - background-color: var(--color-surface-container-high); - text-decoration: none; -} - -div#cgit table.tabs td.form { - flex-grow: 1; - text-align: right; - padding: 0.5rem 0; - display: flex; - justify-content: flex-end; - align-items: center; -} - -div#cgit a.button { - display: inline-block; - padding: 3px 6px; - margin: 0 4px; - background-color: var(--color-secondary-container); - color: var(--color-on-secondary-container); - border-radius: 5px; - font-size: 0.85rem; - font-weight: 500; - text-decoration: none; - transition: - background-color 0.2s, - color 0.2s, - box-shadow 0.2s; -} - -div#cgit a.button:hover { - background-color: var(--color-primary); - color: var(--color-on-primary); - text-decoration: none; - opacity: 1; - box-shadow: 0 2px 4px var(--color-shadow); -} - -/* 5. Content Area */ -div#cgit div.content { - padding: 1.5rem; - flex-grow: 1; -} - -div#cgit div.path { - margin: 0; - padding: 0.5rem 1.5rem; - background-color: var(--color-surface-container-low); - color: var(--color-on-surface); - border-bottom: 1px solid var(--color-outline-variant); - font-family: monospace; -} - -/* 6. Lists and Tables */ -div#cgit table.list { - width: 100%; - border: none; - border-collapse: collapse; - margin-bottom: 1rem; - font-size: 0.95rem; -} - -div#cgit table.list tr { - background: var(--color-surface); - border-bottom: 1px solid var(--color-surface-container-high); -} - -div#cgit table.list tr:nth-child(even) { - background: var(--color-surface-container-lowest); -} - -div#cgit table.list tr:hover { - background: var(--color-surface-container-high); -} - -div#cgit table.list th { - text-align: left; - font-weight: 600; - color: var(--color-primary); - padding: 0.75rem 0.5rem; - border-bottom: 2px solid var(--color-outline-variant); -} - -div#cgit table.list td { - padding: 0.75rem 0.5rem; - vertical-align: middle; -} - -/* Commit Graph columns */ -div#cgit table.list td.commitgraph { - font-family: monospace; - white-space: pre; - color: var(--color-on-surface); -} - -/* 7. Diffs and Code */ -div#cgit table.blob, -div#cgit table.diff, -div#cgit table.ssdiff { - width: 100%; - border: 1px solid var(--color-outline-variant); - border-radius: 4px; - overflow: hidden; - margin-top: 1rem; - background: var(--color-surface-container-lowest); -} - -div#cgit table.blob td.linenumbers, -div#cgit table.ssdiff td.lineno { - border-right: 1px solid var(--color-outline-variant); - background: var(--color-surface-container-high); - text-align: right; - padding: 0 0.5em; -} - -div#cgit table.blob td.linenumbers a, -div#cgit table.ssdiff td.lineno a { - display: inline-block; - width: 100%; - text-decoration: none; - color: var(--color-outline); - padding: 0; -} - -div#cgit table.blob pre, -div#cgit table.diff td, -div#cgit table.ssdiff td { - font-family: monospace; - font-size: 0.9em; - padding: 0 0.5em; - margin: 0; - color: var(--color-on-surface); -} - -/* Diff coloring */ -div#cgit table.diff td div.add, -div#cgit table.ssdiff td.add { - background-color: var(--diff-add-bg); - color: var(--diff-add-fg); -} - -div#cgit table.diff td div.del, -div#cgit table.ssdiff td.del { - background-color: var(--diff-del-bg); - color: var(--diff-del-fg); -} - -div#cgit table.diff td div.hunk, -div#cgit table.ssdiff td.hunk { - background-color: var(--color-surface-variant); - color: var(--color-on-surface-variant); - padding: 0.25em 0.5em; -} - -/* 8. Decorations (Tags, Branches) */ -div#cgit a.branch-deco, -div#cgit a.tag-deco, -div#cgit a.tag-annotated-deco, -div#cgit a.remote-deco, -div#cgit a.deco { - display: inline-block; - padding: 2px 6px; - border-radius: 4px; - font-size: 0.8em; - margin-left: 0.5em; - border: none; -} - -div#cgit a.branch-deco { - background-color: var(--color-primary-container); - color: var(--color-on-primary-container); -} - -div#cgit a.tag-deco { - background-color: var(--color-tertiary-container); - color: var(--color-on-tertiary-container); -} - -div#cgit a.tag-annotated-deco { - background-color: var(--color-tertiary-fixed); - color: var(--color-on-tertiary-fixed); -} - -div#cgit a.remote-deco { - background-color: var(--color-secondary-container); - color: var(--color-on-secondary-container); -} - -div#cgit a.deco { - background-color: var(--color-secondary-fixed); - color: var(--color-on-secondary-fixed); -} - -/* 9. Commit Info Table */ -div#cgit table.commit-info { - background-color: var(--color-surface-container); - border: 1px solid var(--color-outline-variant); - border-radius: 8px; - padding: 1rem; - width: 100%; - margin-top: 1rem; - border-collapse: separate; - border-spacing: 0 0.5rem; -} - -div#cgit table.commit-info th { - text-align: left; - padding: 0 1rem; - color: var(--color-secondary); -} - -div#cgit table.commit-info td { - padding: 0 1rem; -} - -div#cgit div.commit-subject { - font-size: 1.2rem; - font-weight: bold; - color: var(--color-primary); - margin: 1.5rem 0 0.5rem 0; -} - -div#cgit div.commit-msg { - white-space: pre-wrap; - font-family: monospace; - padding: 1rem; - background: var(--color-surface-container-low); - border-radius: 4px; - color: var(--color-on-surface); -} - -/* 10. Footer */ -div#cgit div.footer { - margin-top: auto; - padding: 2rem 1rem; - text-align: center; - font-size: 0.85rem; - color: var(--color-outline); - border-top: 1px solid var(--color-outline-variant); -} - -div#cgit div.error { - color: var(--color-error); - background: var(--color-error-container); - padding: 1rem; - border-radius: 4px; - margin: 1rem 0; -} - -/* 11. Responsive Adjustments */ -@media only screen and (max-width: 768px) { - div#cgit table#header { - flex-direction: column; - align-items: flex-start; - } - - div#cgit table#header td.logo, - div#cgit table#header td.main, - div#cgit table#header td.form { - width: 100%; - text-align: left; - margin-bottom: 0.5rem; - } - - div#cgit table.tabs { - flex-direction: column; - padding: 0; - } - - div#cgit table.tabs td a { - width: 100%; - border-bottom: 1px solid var(--color-outline-variant); - } - - div#cgit table.tabs td.form { - width: 100%; - justify-content: flex-start; - padding: 1rem; - } - - div#cgit div.content { - padding: 1rem 0.5rem; - overflow-x: auto; /* Enable horizontal scroll for content */ - } - - /* Force tables to scroll on small screens */ - div#cgit table.list, - div#cgit table.blob, - div#cgit table.diff { - white-space: nowrap; - } - - /* Allow wrapping in logs on mobile to prevent extreme width */ - div#cgit table.list td.logmsg { - white-space: normal; - min-width: 200px; - } -} - -/* Container override for highlighted code to handle font sizing */ -div#cgit table.blob pre { - font-family: "JetBrains Mono", "Fira Code", monospace; - font-size: 0.95em; - line-height: 1.4; -} - -/* --- Syntax Highlighting Mapping to Material Variables --- */ - -/* Comments - Outline/Grey */ -.hl-c, -.hl-cm, -.hl-cp, -.hl-c1, -.hl-cs { - color: var(--color-outline); - font-style: italic; -} - -/* Keywords - Primary (Pinkish/Orange) */ -.hl-k, -.hl-kc, -.hl-kd, -.hl-kn, -.hl-kp, -.hl-kr, -.hl-kt { - color: var(--color-primary); - font-weight: bold; -} - -/* Names/Functions - Tertiary (Yellowish) */ -.hl-n, -.hl-na, -.hl-nb, -.hl-nc, -.hl-no, -.hl-nd, -.hl-ni, -.hl-ne, -.hl-nf, -.hl-nl, -.hl-nn, -.hl-nt, -.hl-nv, -.hl-nx { - color: var(--color-tertiary); -} - -/* Strings - Secondary (Reddish/Brownish) */ -.hl-s, -.hl-sa, -.hl-sb, -.hl-sc, -.hl-dl, -.hl-sd, -.hl-s2, -.hl-se, -.hl-sh, -.hl-si, -.hl-sx, -.hl-sr, -.hl-s1, -.hl-ss { - color: var(--color-secondary); -} - -/* Operators - On Surface (Main text color) */ -.hl-o, -.hl-ow { - color: var(--color-on-surface-variant); -} - -/* Numbers - Primary Container (Brighter accent) */ -.hl-m, -.hl-mb, -.hl-mf, -.hl-mh, -.hl-mi, -.hl-mo, -.hl-il { - color: var(--color-primary-fixed); -} - -/* Errors */ -.hl-err, -.hl-gr { - color: var(--color-error); - background-color: var(--color-error-container); -} - -/* Generic Deleted */ -.hl-gd { - color: var(--color-error); - background-color: var(--color-error-container); -} - -/* Generic Inserted */ -.hl-gi { - color: var(--color-tertiary); - background-color: var(--color-tertiary-container); -} - -/* --- Markdown Body Styles (Material Design) --- */ - -.markdown-body { - font-family: inherit; - font-size: 1rem; - line-height: 1.6; - color: var(--color-on-background); - word-wrap: break-word; -} - -/* Headers */ -.markdown-body h1, -.markdown-body h2, -.markdown-body h3, -.markdown-body h4, -.markdown-body h5, -.markdown-body h6 { - margin-top: 24px; - margin-bottom: 16px; - font-weight: 600; - line-height: 1.25; - color: var(--color-on-surface); -} - -.markdown-body h1 { - font-size: 2em; - border-bottom: 1px solid var(--color-outline-variant); - padding-bottom: 0.3em; -} -.markdown-body h2 { - font-size: 1.5em; - border-bottom: 1px solid var(--color-outline-variant); - padding-bottom: 0.3em; -} -.markdown-body h3 { - font-size: 1.25em; -} -.markdown-body h4 { - font-size: 1em; -} -.markdown-body h5 { - font-size: 0.875em; -} -.markdown-body h6 { - font-size: 0.85em; - color: var(--color-on-surface-variant); -} - -/* Links */ -.markdown-body a { - color: var(--color-primary); - text-decoration: none; -} -.markdown-body a:hover { - text-decoration: underline; -} - -/* Paragraphs & Lists */ -.markdown-body p, -.markdown-body blockquote, -.markdown-body ul, -.markdown-body ol, -.markdown-body dl, -.markdown-body table, -.markdown-body pre { - margin-top: 0; - margin-bottom: 16px; -} - -.markdown-body hr { - height: 0.25em; - padding: 0; - margin: 24px 0; - background-color: var(--color-outline-variant); - border: 0; -} - -/* Blockquotes */ -.markdown-body blockquote { - padding: 0 1em; - color: var(--color-on-surface-variant); - border-left: 0.25em solid var(--color-outline); - background-color: var(--color-surface-container-low); -} - -/* Tables */ -.markdown-body table { - display: block; - width: 100%; - overflow: auto; - border-spacing: 0; - border-collapse: collapse; -} - -.markdown-body table th { - font-weight: 600; - background-color: var(--color-surface-container); -} - -.markdown-body table th, -.markdown-body table td { - padding: 6px 13px; - border: 1px solid var(--color-outline-variant); -} - -.markdown-body table tr { - background-color: var(--color-surface); - border-top: 1px solid var(--color-outline-variant); -} - -.markdown-body table tr:nth-child(2n) { - background-color: var(--color-surface-container-lowest); -} - -/* Images */ -.markdown-body img { - max-width: 100%; - box-sizing: border-box; - background-color: var(--color-surface); - border-radius: 4px; -} - -/* Code Blocks & Inline Code */ -.markdown-body code, -.markdown-body tt { - padding: 0.2em 0.4em; - margin: 0; - font-size: 85%; - font-family: "JetBrains Mono", "Fira Code", monospace; - background-color: var(--color-surface-container-high); - border-radius: 6px; - color: var(--color-on-surface); -} - -.markdown-body pre { - padding: 16px; - overflow: auto; - font-size: 85%; - line-height: 1.45; - background-color: var(--color-surface-container-lowest); - border-radius: 6px; - border: 1px solid var(--color-outline-variant); -} - -.markdown-body pre code, -.markdown-body pre tt { - display: inline; - max-width: auto; - padding: 0; - margin: 0; - overflow: visible; - line-height: inherit; - word-wrap: normal; - background-color: transparent; - border: 0; -} - -/* Anchors (Permalinks) */ -.markdown-body a.headerlink { - padding-left: 1ch; - line-height: 1; - color: var(--color-primary); - text-decoration: none; - opacity: 0; - transition: opacity 0.2s; -} - -.markdown-body h1:hover .headerlink, -.markdown-body h2:hover .headerlink, -.markdown-body h3:hover .headerlink, -.markdown-body h4:hover .headerlink, -.markdown-body h5:hover .headerlink, -.markdown-body h6:hover .headerlink { - opacity: 1; -} - -/* Pygments Syntax Highlighting within Markdown - (Mapping standard Pygments classes to Material Variables) */ -.markdown-body .highlight .c, -.markdown-body .highlight .cm, -.markdown-body .highlight .cp, -.markdown-body .highlight .c1, -.markdown-body .highlight .cs { - color: var(--color-outline); - font-style: italic; -} -.markdown-body .highlight .k, -.markdown-body .highlight .kc, -.markdown-body .highlight .kd, -.markdown-body .highlight .kn, -.markdown-body .highlight .kp, -.markdown-body .highlight .kr, -.markdown-body .highlight .kt { - color: var(--color-primary); - font-weight: bold; -} -.markdown-body .highlight .n, -.markdown-body .highlight .na, -.markdown-body .highlight .nb, -.markdown-body .highlight .nc, -.markdown-body .highlight .no, -.markdown-body .highlight .nd, -.markdown-body .highlight .ni, -.markdown-body .highlight .ne, -.markdown-body .highlight .nf, -.markdown-body .highlight .nl, -.markdown-body .highlight .nn, -.markdown-body .highlight .nt, -.markdown-body .highlight .nv, -.markdown-body .highlight .nx { - color: var(--color-tertiary); -} -.markdown-body .highlight .s, -.markdown-body .highlight .sa, -.markdown-body .highlight .sb, -.markdown-body .highlight .sc, -.markdown-body .highlight .dl, -.markdown-body .highlight .sd, -.markdown-body .highlight .s2, -.markdown-body .highlight .se, -.markdown-body .highlight .sh, -.markdown-body .highlight .si, -.markdown-body .highlight .sx, -.markdown-body .highlight .sr, -.markdown-body .highlight .s1, -.markdown-body .highlight .ss { - color: var(--color-secondary); -} -.markdown-body .highlight .m, -.markdown-body .highlight .mb, -.markdown-body .highlight .mf, -.markdown-body .highlight .mh, -.markdown-body .highlight .mi, -.markdown-body .highlight .mo, -.markdown-body .highlight .il { - color: var(--color-primary-fixed); -} -.markdown-body .highlight .o, -.markdown-body .highlight .ow { - color: var(--color-on-surface-variant); -} -.markdown-body .highlight .g, -.markdown-body .highlight .gh, -.markdown-body .highlight .gu, -.markdown-body .highlight .gd, -.markdown-body .highlight .gi { - color: var(--color-on-surface); -} diff --git a/responsive/head.html b/responsive/head.html deleted file mode 100644 index 44dca77..0000000 --- a/responsive/head.html +++ /dev/null @@ -1 +0,0 @@ - diff --git a/responsive/md2html b/responsive/md2html deleted file mode 100755 index 571c8d7..0000000 --- a/responsive/md2html +++ /dev/null @@ -1,37 +0,0 @@ -#!/usr/bin/env python3 -import io -import sys - -import markdown -from markdown.extensions.toc import TocExtension - -sys.stdin = io.TextIOWrapper(sys.stdin.buffer, encoding="utf-8") -sys.stdout = io.TextIOWrapper(sys.stdout.buffer, encoding="utf-8") - -sys.stdout.write("
") -sys.stdout.flush() - -try: - markdown.markdownFromFile( - output_format="html5", - extensions=[ - "markdown.extensions.fenced_code", - "markdown.extensions.codehilite", - "markdown.extensions.tables", - "markdown.extensions.sane_lists", - "markdown.extensions.admonition", - TocExtension(anchorlink=True, permalink=True), - ], - extension_configs={ - "markdown.extensions.codehilite": { - "css_class": "highlight", - "guess_lang": False, - } - }, - ) -except Exception as e: - sys.stdout.write(f"

Error rendering markdown: {e}

") - sys.stdin.seek(0) - sys.stdout.write(f"
{sys.stdin.read()}
") - -sys.stdout.write("
") diff --git a/responsive/syntax-material.py b/responsive/syntax-material.py deleted file mode 100755 index 3176691..0000000 --- a/responsive/syntax-material.py +++ /dev/null @@ -1,37 +0,0 @@ -#!/usr/bin/env python3 -import sys - -from pygments import highlight -from pygments.formatters import HtmlFormatter -from pygments.lexers import get_lexer_for_filename, guess_lexer -from pygments.util import ClassNotFound - - -def main(): - filename = sys.argv[-1] if len(sys.argv) > 1 else "stdin" - - try: - data = sys.stdin.read() - except Exception: - return - - try: - lexer = get_lexer_for_filename(filename) - except ClassNotFound: - try: - lexer = guess_lexer(data) - except ClassNotFound: - sys.stdout.write(f"
{data}
") - return - - formatter = HtmlFormatter(style="default", nowrap=True, classprefix="hl-") - - try: - sys.stdout.write("") - highlight(data, lexer, formatter, sys.stdout) - except BrokenPipeError: - pass - - -if __name__ == "__main__": - main() 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. Import color scheme, highlighting and markdown styles */ +@import url("static/colors.css"); +@import url("static/hl.css"); +@import url("static/md.css"); + +/* 2. Global Reset & Body */ +* { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + font-size: 14px; + line-height: 1.5; + color: var(--color-on-background); + background: var(--color-background); + margin: 0; + padding: 0; + + -webkit-text-size-adjust: 100%; + -moz-text-size-adjust: 100%; + text-size-adjust: 100%; +} + +a { + color: var(--color-primary); + text-decoration: none; + transition: opacity 0.2s; +} + +a:hover { + text-decoration: underline; + opacity: 0.8; +} + +div#cgit { + padding: 0; + margin: 0 auto; + max-width: 1200px; + background: var(--color-background); + min-height: 100vh; + display: flex; + flex-direction: column; +} + +/* 3. Header Area */ +div#cgit table#header { + width: 100%; + margin-bottom: 0; + background-color: var(--color-surface-container); + color: var(--color-on-surface); + padding: 1rem; + /* Transform table to flex for responsiveness */ + display: flex; + flex-wrap: wrap; + align-items: center; + border-bottom: 1px solid var(--color-outline-variant); +} + +/* Fix for table structure within header */ +div#cgit table#header tbody, +div#cgit table#header tr { + display: contents; +} + +div#cgit table#header td.logo { + display: block; + padding-right: 1rem; +} + +div#cgit table#header td.main { + font-size: 1.5rem; + font-weight: bold; + color: var(--color-on-surface); + display: block; + flex-grow: 1; +} + +div#cgit table#header td.main a { + color: var(--color-on-surface); +} + +div#cgit table#header td.form { + display: block; + text-align: right; + margin-top: 0.5rem; +} + +div#cgit table#header td.sub { + display: block; + width: 100%; + padding-top: 0.25rem; + color: var(--color-outline); + font-size: 0.9rem; + border-top: none; /* Removing legacy border */ +} + +/* Input Elements */ +select, +input, +textarea { + background-color: var(--color-surface-container-high); + color: var(--color-on-surface); + border: 1px solid var(--color-outline); + border-radius: 4px; + padding: 4px 8px; + font-family: inherit; +} + +input[type="submit"] { + background-color: var(--color-primary); + color: var(--color-on-primary); + border: none; + cursor: pointer; + font-weight: 500; + padding: 5px 12px; +} + +input[type="submit"]:hover { + background-color: var(--color-primary-fixed-dim); +} + +/* 4. Tabs Navigation */ +div#cgit table.tabs { + border-bottom: 1px solid var(--color-outline-variant); + border-collapse: collapse; + margin: 0; + width: 100%; + background-color: var(--color-surface); + display: flex; /* Modern layout */ + flex-wrap: wrap; + padding: 0 1rem; +} + +div#cgit table.tabs tbody, +div#cgit table.tabs tr { + display: contents; +} + +div#cgit table.tabs td { + display: block; + padding: 0; +} + +div#cgit table.tabs td a { + display: inline-block; + padding: 0.75rem 1rem; + color: var(--color-on-surface-variant); + font-weight: 500; + border-bottom: 2px solid transparent; +} + +div#cgit table.tabs td a.active { + color: var(--color-primary); + border-bottom: 2px solid var(--color-primary); + background-color: var(--color-surface-container-low); +} + +div#cgit table.tabs td a:hover { + background-color: var(--color-surface-container-high); + text-decoration: none; +} + +div#cgit table.tabs td.form { + flex-grow: 1; + text-align: right; + padding: 0.5rem 0; + display: flex; + justify-content: flex-end; + align-items: center; +} + +div#cgit a.button { + display: inline-block; + padding: 3px 6px; + margin: 0 4px; + background-color: var(--color-secondary-container); + color: var(--color-on-secondary-container); + border-radius: 5px; + font-size: 0.85rem; + font-weight: 500; + text-decoration: none; + transition: + background-color 0.2s, + color 0.2s, + box-shadow 0.2s; +} + +div#cgit a.button:hover { + background-color: var(--color-primary); + color: var(--color-on-primary); + text-decoration: none; + opacity: 1; + box-shadow: 0 2px 4px var(--color-shadow); +} + +/* 5. Content Area */ +div#cgit div.content { + padding: 1.5rem; + flex-grow: 1; +} + +div#cgit div.path { + margin: 0; + padding: 0.5rem 1.5rem; + background-color: var(--color-surface-container-low); + color: var(--color-on-surface); + border-bottom: 1px solid var(--color-outline-variant); + font-family: monospace; +} + +/* 6. Lists and Tables */ +div#cgit table.list { + width: 100%; + border: none; + border-collapse: collapse; + margin-bottom: 1rem; + font-size: 0.95rem; +} + +div#cgit table.list tr { + background: var(--color-surface); + border-bottom: 1px solid var(--color-surface-container-high); +} + +div#cgit table.list tr:nth-child(even) { + background: var(--color-surface-container-lowest); +} + +div#cgit table.list tr:hover { + background: var(--color-surface-container-high); +} + +div#cgit table.list th { + text-align: left; + font-weight: 600; + color: var(--color-primary); + padding: 0.75rem 0.5rem; + border-bottom: 2px solid var(--color-outline-variant); +} + +div#cgit table.list td { + padding: 0.75rem 0.5rem; + vertical-align: middle; +} + +/* Commit Graph columns */ +div#cgit table.list td.commitgraph { + font-family: monospace; + white-space: pre; + color: var(--color-on-surface); +} + +/* 7. Diffs and Code */ +div#cgit table.blob, +div#cgit table.diff, +div#cgit table.ssdiff { + width: 100%; + border: 1px solid var(--color-outline-variant); + border-radius: 4px; + overflow: hidden; + margin-top: 1rem; + background: var(--color-surface-container-lowest); +} + +div#cgit table.blob td.linenumbers, +div#cgit table.ssdiff td.lineno { + border-right: 1px solid var(--color-outline-variant); + background: var(--color-surface-container-high); + text-align: right; + padding: 0 0.5em; +} + +div#cgit table.blob td.linenumbers a, +div#cgit table.ssdiff td.lineno a { + display: inline-block; + width: 100%; + text-decoration: none; + color: var(--color-outline); + padding: 0; +} + +div#cgit table.blob pre, +div#cgit table.diff td, +div#cgit table.ssdiff td { + font-family: monospace; + font-size: 0.9em; + padding: 0 0.5em; + margin: 0; + color: var(--color-on-surface); +} + +/* Diff coloring */ +div#cgit table.diff td div.add, +div#cgit table.ssdiff td.add { + background-color: var(--diff-add-bg); + color: var(--diff-add-fg); +} + +div#cgit table.diff td div.del, +div#cgit table.ssdiff td.del { + background-color: var(--diff-del-bg); + color: var(--diff-del-fg); +} + +div#cgit table.diff td div.hunk, +div#cgit table.ssdiff td.hunk { + background-color: var(--color-surface-variant); + color: var(--color-on-surface-variant); + padding: 0.25em 0.5em; +} + +/* 8. Decorations (Tags, Branches) */ +div#cgit a.branch-deco, +div#cgit a.tag-deco, +div#cgit a.tag-annotated-deco, +div#cgit a.remote-deco, +div#cgit a.deco { + display: inline-block; + padding: 2px 6px; + border-radius: 4px; + font-size: 0.8em; + margin-left: 0.5em; + border: none; +} + +div#cgit a.branch-deco { + background-color: var(--color-primary-container); + color: var(--color-on-primary-container); +} + +div#cgit a.tag-deco { + background-color: var(--color-tertiary-container); + color: var(--color-on-tertiary-container); +} + +div#cgit a.tag-annotated-deco { + background-color: var(--color-tertiary-fixed); + color: var(--color-on-tertiary-fixed); +} + +div#cgit a.remote-deco { + background-color: var(--color-secondary-container); + color: var(--color-on-secondary-container); +} + +div#cgit a.deco { + background-color: var(--color-secondary-fixed); + color: var(--color-on-secondary-fixed); +} + +/* 9. Commit Info Table */ +div#cgit table.commit-info { + background-color: var(--color-surface-container); + border: 1px solid var(--color-outline-variant); + border-radius: 8px; + padding: 1rem; + width: 100%; + margin-top: 1rem; + border-collapse: separate; + border-spacing: 0 0.5rem; +} + +div#cgit table.commit-info th { + text-align: left; + padding: 0 1rem; + color: var(--color-secondary); +} + +div#cgit table.commit-info td { + padding: 0 1rem; +} + +div#cgit div.commit-subject { + font-size: 1.2rem; + font-weight: bold; + color: var(--color-primary); + margin: 1.5rem 0 0.5rem 0; +} + +div#cgit div.commit-msg { + white-space: pre-wrap; + font-family: monospace; + padding: 1rem; + background: var(--color-surface-container-low); + border-radius: 4px; + color: var(--color-on-surface); +} + +/* 10. Footer */ +div#cgit div.footer { + margin-top: auto; + padding: 2rem 1rem; + text-align: center; + font-size: 0.85rem; + color: var(--color-outline); + border-top: 1px solid var(--color-outline-variant); +} + +div#cgit div.error { + color: var(--color-error); + background: var(--color-error-container); + padding: 1rem; + border-radius: 4px; + margin: 1rem 0; +} + +/* 11. Responsive Adjustments */ +@media only screen and (max-width: 768px) { + div#cgit table#header { + flex-direction: column; + align-items: flex-start; + } + + div#cgit table#header td.logo, + div#cgit table#header td.main, + div#cgit table#header td.form { + width: 100%; + text-align: left; + margin-bottom: 0.5rem; + } + + div#cgit table.tabs { + flex-direction: column; + padding: 0; + } + + div#cgit table.tabs td a { + width: 100%; + border-bottom: 1px solid var(--color-outline-variant); + } + + div#cgit table.tabs td.form { + width: 100%; + justify-content: flex-start; + padding: 1rem; + } + + div#cgit div.content { + padding: 1rem 0.5rem; + overflow-x: auto; /* Enable horizontal scroll for content */ + } + + /* Force tables to scroll on small screens */ + div#cgit table.list, + div#cgit table.blob, + div#cgit table.diff { + white-space: nowrap; + } + + /* Allow wrapping in logs on mobile to prevent extreme width */ + div#cgit table.list td.logmsg { + white-space: normal; + min-width: 200px; + } +} + +/* Container override for highlighted code to handle font sizing */ +div#cgit table.blob pre { + font-family: monospace; + font-size: 0.95em; + line-height: 1.4; +} 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 @@ +@media (prefers-color-scheme: dark) { + :root { + --color-primary: rgb(255 181 160); + --color-surface-tint: rgb(255 181 160); + --color-on-primary: rgb(86 31 15); + --color-primary-container: rgb(114 53 35); + --color-on-primary-container: rgb(255 219 209); + --color-secondary: rgb(231 189 178); + --color-on-secondary: rgb(68 42 34); + --color-secondary-container: rgb(93 64 55); + --color-on-secondary-container: rgb(255 219 209); + --color-tertiary: rgb(216 197 141); + --color-on-tertiary: rgb(59 47 5); + --color-tertiary-container: rgb(83 70 25); + --color-on-tertiary-container: rgb(245 225 167); + --color-error: rgb(255 180 171); + --color-on-error: rgb(105 0 5); + --color-error-container: rgb(147 0 10); + --color-on-error-container: rgb(255 218 214); + --color-background: rgb(26 17 15); + --color-on-background: rgb(241 223 218); + --color-surface: rgb(26 17 15); + --color-on-surface: rgb(241 223 218); + --color-surface-variant: rgb(83 67 63); + --color-on-surface-variant: rgb(216 194 188); + --color-outline: rgb(160 140 135); + --color-outline-variant: rgb(83 67 63); + --color-shadow: rgb(0 0 0); + --color-scrim: rgb(0 0 0); + --color-inverse-surface: rgb(241 223 218); + --color-inverse-on-surface: rgb(57 46 43); + --color-inverse-primary: rgb(143 76 56); + --color-primary-fixed: rgb(255 219 209); + --color-on-primary-fixed: rgb(58 11 1); + --color-primary-fixed-dim: rgb(255 181 160); + --color-on-primary-fixed-variant: rgb(114 53 35); + --color-secondary-fixed: rgb(255 219 209); + --color-on-secondary-fixed: rgb(44 21 15); + --color-secondary-fixed-dim: rgb(231 189 178); + --color-on-secondary-fixed-variant: rgb(93 64 55); + --color-tertiary-fixed: rgb(245 225 167); + --color-on-tertiary-fixed: rgb(35 27 0); + --color-tertiary-fixed-dim: rgb(216 197 141); + --color-on-tertiary-fixed-variant: rgb(83 70 25); + --color-surface-dim: rgb(26 17 15); + --color-surface-bright: rgb(66 55 52); + --color-surface-container-lowest: rgb(20 12 10); + --color-surface-container-low: rgb(35 25 23); + --color-surface-container: rgb(39 29 27); + --color-surface-container-high: rgb(50 40 37); + --color-surface-container-highest: rgb(61 50 47); + + color-scheme: dark; + } +} + +@media (prefers-color-scheme: light) { + :root { + --color-primary: rgb(143 76 56); + --color-surface-tint: rgb(143 76 56); + --color-on-primary: rgb(255 255 255); + --color-primary-container: rgb(255 219 209); + --color-on-primary-container: rgb(114 53 35); + --color-secondary: rgb(119 87 78); + --color-on-secondary: rgb(255 255 255); + --color-secondary-container: rgb(255 219 209); + --color-on-secondary-container: rgb(93 64 55); + --color-tertiary: rgb(108 93 47); + --color-on-tertiary: rgb(255 255 255); + --color-tertiary-container: rgb(245 225 167); + --color-on-tertiary-container: rgb(83 70 25); + --color-error: rgb(186 26 26); + --color-on-error: rgb(255 255 255); + --color-error-container: rgb(255 218 214); + --color-on-error-container: rgb(147 0 10); + --color-background: rgb(255 248 246); + --color-on-background: rgb(35 25 23); + --color-surface: rgb(255 248 246); + --color-on-surface: rgb(35 25 23); + --color-surface-variant: rgb(245 222 216); + --color-on-surface-variant: rgb(83 67 63); + --color-outline: rgb(133 115 110); + --color-outline-variant: rgb(216 194 188); + --color-shadow: rgb(0 0 0); + --color-scrim: rgb(0 0 0); + --color-inverse-surface: rgb(57 46 43); + --color-inverse-on-surface: rgb(255 237 232); + --color-inverse-primary: rgb(255 181 160); + --color-primary-fixed: rgb(255 219 209); + --color-on-primary-fixed: rgb(58 11 1); + --color-primary-fixed-dim: rgb(255 181 160); + --color-on-primary-fixed-variant: rgb(114 53 35); + --color-secondary-fixed: rgb(255 219 209); + --color-on-secondary-fixed: rgb(44 21 15); + --color-secondary-fixed-dim: rgb(231 189 178); + --color-on-secondary-fixed-variant: rgb(93 64 55); + --color-tertiary-fixed: rgb(245 225 167); + --color-on-tertiary-fixed: rgb(35 27 0); + --color-tertiary-fixed-dim: rgb(216 197 141); + --color-on-tertiary-fixed-variant: rgb(83 70 25); + --color-surface-dim: rgb(232 214 210); + --color-surface-bright: rgb(255 248 246); + --color-surface-container-lowest: rgb(255 255 255); + --color-surface-container-low: rgb(255 241 237); + --color-surface-container: rgb(252 234 229); + --color-surface-container-high: rgb(247 228 224); + --color-surface-container-highest: rgb(241 223 218); + + color-scheme: light; + } +} + +/* Custom logic for diffs */ +:root { + --diff-add-bg: var(--color-tertiary-container); + --diff-add-fg: var(--color-on-tertiary-container); + --diff-del-bg: var(--color-error-container); + --diff-del-fg: var(--color-on-error-container); +} 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 @@ +/* --- Syntax Highlighting --- */ + +/* Comments - Outline/Grey */ +.hl-c, +.hl-cm, +.hl-cp, +.hl-c1, +.hl-cs { + color: var(--color-outline); + font-style: italic; +} + +/* Keywords - Primary (Pinkish/Orange) */ +.hl-k, +.hl-kc, +.hl-kd, +.hl-kn, +.hl-kp, +.hl-kr, +.hl-kt { + color: var(--color-primary); + font-weight: bold; +} + +/* Names/Functions - Tertiary (Yellowish) */ +.hl-n, +.hl-na, +.hl-nb, +.hl-nc, +.hl-no, +.hl-nd, +.hl-ni, +.hl-ne, +.hl-nf, +.hl-nl, +.hl-nn, +.hl-nt, +.hl-nv, +.hl-nx { + color: var(--color-tertiary); +} + +/* Strings - Secondary (Reddish/Brownish) */ +.hl-s, +.hl-sa, +.hl-sb, +.hl-sc, +.hl-dl, +.hl-sd, +.hl-s2, +.hl-se, +.hl-sh, +.hl-si, +.hl-sx, +.hl-sr, +.hl-s1, +.hl-ss { + color: var(--color-secondary); +} + +/* Operators - On Surface (Main text color) */ +.hl-o, +.hl-ow { + color: var(--color-on-surface-variant); +} + +/* Numbers - Primary Container (Brighter accent) */ +.hl-m, +.hl-mb, +.hl-mf, +.hl-mh, +.hl-mi, +.hl-mo, +.hl-il { + color: var(--color-primary-fixed); +} + +/* Errors */ +.hl-err, +.hl-gr { + color: var(--color-error); + background-color: var(--color-error-container); +} + +/* Generic Deleted */ +.hl-gd { + color: var(--color-error); + background-color: var(--color-error-container); +} + +/* Generic Inserted */ +.hl-gi { + color: var(--color-tertiary); + background-color: var(--color-tertiary-container); +} 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 @@ +/* --- Markdown Body Styles --- */ + +.markdown-body { + font-family: inherit; + font-size: 1rem; + line-height: 1.6; + color: var(--color-on-background); + word-wrap: break-word; +} + +/* Headers */ +.markdown-body h1, +.markdown-body h2, +.markdown-body h3, +.markdown-body h4, +.markdown-body h5, +.markdown-body h6 { + margin-top: 24px; + margin-bottom: 16px; + font-weight: 600; + line-height: 1.25; + color: var(--color-on-surface); +} + +.markdown-body h1 { + font-size: 2em; + border-bottom: 1px solid var(--color-outline-variant); + padding-bottom: 0.3em; +} +.markdown-body h2 { + font-size: 1.5em; + border-bottom: 1px solid var(--color-outline-variant); + padding-bottom: 0.3em; +} +.markdown-body h3 { + font-size: 1.25em; +} +.markdown-body h4 { + font-size: 1em; +} +.markdown-body h5 { + font-size: 0.875em; +} +.markdown-body h6 { + font-size: 0.85em; + color: var(--color-on-surface-variant); +} + +/* Links */ +.markdown-body a { + color: var(--color-primary); + text-decoration: none; +} +.markdown-body a:hover { + text-decoration: underline; +} + +/* Paragraphs & Lists */ +.markdown-body p, +.markdown-body blockquote, +.markdown-body ul, +.markdown-body ol, +.markdown-body dl, +.markdown-body table, +.markdown-body pre { + margin-top: 0; + margin-bottom: 16px; +} + +.markdown-body hr { + height: 0.25em; + padding: 0; + margin: 24px 0; + background-color: var(--color-outline-variant); + border: 0; +} + +/* Blockquotes */ +.markdown-body blockquote { + padding: 0 1em; + color: var(--color-on-surface-variant); + border-left: 0.25em solid var(--color-outline); + background-color: var(--color-surface-container-low); +} + +/* Tables */ +.markdown-body table { + display: block; + width: 100%; + overflow: auto; + border-spacing: 0; + border-collapse: collapse; +} + +.markdown-body table th { + font-weight: 600; + background-color: var(--color-surface-container); +} + +.markdown-body table th, +.markdown-body table td { + padding: 6px 13px; + border: 1px solid var(--color-outline-variant); +} + +.markdown-body table tr { + background-color: var(--color-surface); + border-top: 1px solid var(--color-outline-variant); +} + +.markdown-body table tr:nth-child(2n) { + background-color: var(--color-surface-container-lowest); +} + +/* Images */ +.markdown-body img { + max-width: 100%; + box-sizing: border-box; + background-color: var(--color-surface); + border-radius: 4px; +} + +/* Code Blocks & Inline Code */ +.markdown-body code, +.markdown-body tt { + padding: 0.2em 0.4em; + margin: 0; + font-size: 85%; + font-family: "JetBrains Mono", "Fira Code", monospace; + background-color: var(--color-surface-container-high); + border-radius: 6px; + color: var(--color-on-surface); +} + +.markdown-body pre { + padding: 16px; + overflow: auto; + font-size: 85%; + line-height: 1.45; + background-color: var(--color-surface-container-lowest); + border-radius: 6px; + border: 1px solid var(--color-outline-variant); +} + +.markdown-body pre code, +.markdown-body pre tt { + display: inline; + max-width: auto; + padding: 0; + margin: 0; + overflow: visible; + line-height: inherit; + word-wrap: normal; + background-color: transparent; + border: 0; +} + +/* Anchors (Permalinks) */ +.markdown-body a.headerlink { + padding-left: 1ch; + line-height: 1; + color: var(--color-primary); + text-decoration: none; + opacity: 0; + transition: opacity 0.2s; +} + +.markdown-body h1:hover .headerlink, +.markdown-body h2:hover .headerlink, +.markdown-body h3:hover .headerlink, +.markdown-body h4:hover .headerlink, +.markdown-body h5:hover .headerlink, +.markdown-body h6:hover .headerlink { + opacity: 1; +} + +/* Pygments Syntax Highlighting within Markdown + (Mapping standard Pygments classes to Material Variables) */ +.markdown-body .highlight .c, +.markdown-body .highlight .cm, +.markdown-body .highlight .cp, +.markdown-body .highlight .c1, +.markdown-body .highlight .cs { + color: var(--color-outline); + font-style: italic; +} +.markdown-body .highlight .k, +.markdown-body .highlight .kc, +.markdown-body .highlight .kd, +.markdown-body .highlight .kn, +.markdown-body .highlight .kp, +.markdown-body .highlight .kr, +.markdown-body .highlight .kt { + color: var(--color-primary); + font-weight: bold; +} +.markdown-body .highlight .n, +.markdown-body .highlight .na, +.markdown-body .highlight .nb, +.markdown-body .highlight .nc, +.markdown-body .highlight .no, +.markdown-body .highlight .nd, +.markdown-body .highlight .ni, +.markdown-body .highlight .ne, +.markdown-body .highlight .nf, +.markdown-body .highlight .nl, +.markdown-body .highlight .nn, +.markdown-body .highlight .nt, +.markdown-body .highlight .nv, +.markdown-body .highlight .nx { + color: var(--color-tertiary); +} +.markdown-body .highlight .s, +.markdown-body .highlight .sa, +.markdown-body .highlight .sb, +.markdown-body .highlight .sc, +.markdown-body .highlight .dl, +.markdown-body .highlight .sd, +.markdown-body .highlight .s2, +.markdown-body .highlight .se, +.markdown-body .highlight .sh, +.markdown-body .highlight .si, +.markdown-body .highlight .sx, +.markdown-body .highlight .sr, +.markdown-body .highlight .s1, +.markdown-body .highlight .ss { + color: var(--color-secondary); +} +.markdown-body .highlight .m, +.markdown-body .highlight .mb, +.markdown-body .highlight .mf, +.markdown-body .highlight .mh, +.markdown-body .highlight .mi, +.markdown-body .highlight .mo, +.markdown-body .highlight .il { + color: var(--color-primary-fixed); +} +.markdown-body .highlight .o, +.markdown-body .highlight .ow { + color: var(--color-on-surface-variant); +} +.markdown-body .highlight .g, +.markdown-body .highlight .gh, +.markdown-body .highlight .gu, +.markdown-body .highlight .gd, +.markdown-body .highlight .gi { + color: var(--color-on-surface); +} -- cgit v1.2.3