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 --- www/static/colors.css | 119 ++++++++++++++++++++++++ www/static/hl.css | 95 +++++++++++++++++++ www/static/md.css | 248 ++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 462 insertions(+) create mode 100644 www/static/colors.css create mode 100644 www/static/hl.css create mode 100644 www/static/md.css (limited to 'www/static') 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