From 5a6ad6ddbddf02148090badd058c4bdc2a02616e Mon Sep 17 00:00:00 2001 From: Jannis Baum Date: Thu, 1 Aug 2024 18:51:45 +0200 Subject: [PATCH 01/13] refactor(#120): markdown stylesheet --- src/routes/viewer.ts | 1 + static/markdown.css | 281 +++++++++++++++++++++++++++++++++++++++++++ static/style.css | 281 +------------------------------------------ 3 files changed, 283 insertions(+), 280 deletions(-) create mode 100644 static/markdown.css diff --git a/src/routes/viewer.ts b/src/routes/viewer.ts index 5464b7d7..eab9b756 100644 --- a/src/routes/viewer.ts +++ b/src/routes/viewer.ts @@ -70,6 +70,7 @@ router.get(/.*/, async (req: Request, res: Response) => { ${title} + diff --git a/static/markdown.css b/static/markdown.css new file mode 100644 index 00000000..e22551a7 --- /dev/null +++ b/static/markdown.css @@ -0,0 +1,281 @@ +/* -------------------------------------------------------------------------- + * CODE --------------------------------------------------------------------- */ +pre { + background-color: #161616; + padding: 1rem; + overflow: auto; +} +code { + background-color: #333; + padding: 0.2rem; + border-radius: 0.25rem; +} +pre > code { + background-color: unset; + padding: unset; +} + +/* -------------------------------------------------------------------------- + * LINKS -------------------------------------------------------------------- */ +a { + color: #859abc; + text-decoration: none; +} +a:hover { text-decoration: underline; } +a.header-anchor { + opacity: 0; + position: absolute; + transform: translateX(-2rem); + width: 2rem; +} +a.header-anchor:hover, +h1:hover a.header-anchor, h2:hover a.header-anchor, +h3:hover a.header-anchor, h4:hover a.header-anchor, +h5:hover a.header-anchor, h6:hover a.header-anchor { + opacity: 1; +} +a#top-nav-up:before { content: '◂'} + +/* -------------------------------------------------------------------------- + * TABLES ------------------------------------------------------------------- */ +table { + border-spacing: 0; + border-collapse: collapse; + margin-top: 0; + margin-bottom: 16px; +} + +th, td { + padding: 6px 13px; + border: 1px solid #444; +} + +tr:nth-child(even) { + background-color: #161616; +} + +/* -------------------------------------------------------------------------- + * LISTS -------------------------------------------------------------------- */ +li.task-list-item { list-style: none; } +input.task-list-item-checkbox { + position: absolute; + transform: translateX(-1.44rem); +} + +/* -------------------------------------------------------------------------- + * HORIZONTAL RULE ---------------------------------------------------------- */ +hr { + height: .25em; + margin: 24px 0; + background-color: #353535; + border: 0; +} + +/* -------------------------------------------------------------------------- + * FOOTNOTE ----------------------------------------------------------------- */ +.footnotes-sep { + display: none; +} +section.footnotes { + font-size: 0.75rem; + margin-top: 1.25rem; + border-top: 0.2px solid #444; + color: #7d7d7d; +} + +/* -------------------------------------------------------------------------- + * DEFIITION LISTS ---------------------------------------------------------- */ +dl { + display: flex; + flex-flow: row wrap; +} +dt { + flex-basis: 20%; + text-align: right; + font-weight: bold; + box-sizing: border-box; + padding: 0.25em; + margin: 0.25em 0; +} +dd { + flex-basis: 80%; + flex-grow: 1; + text-align: left; + box-sizing: border-box; + border-left: 0.2px solid #444; + margin: 0; + padding: 0.25em; + margin: 0.25em 0; +} +dd + dd { + margin-left: 20%; + margin-top: -0.25em; +} +dt + dt { + margin-right: 80%; + margin-top: -0.25em; +} +dt + dt + dd { + margin-left: 20%; + margin-top: -2.25em; /* Align definition with last term */ +} /* Self height - margin - padding */ + +/* -------------------------------------------------------------------------- + * QUOTES AND ALERTS--------------------------------------------------------- */ +blockquote { + padding: 0 1rem; + color: #6a6a6a; + border-left: .25rem solid #353535; + margin-left: 0; +} +/* GitHub-style alerts */ +.markdown-alert { + padding: 0.5rem 1rem; + margin-bottom: 1rem; +} +.markdown-alert > :first-child { + margin-top: 0; +} +.markdown-alert > :last-child { + margin-bottom: 0; +} +.markdown-alert .markdown-alert-title { + display: flex; + font-weight: 500; + align-items: center; + line-height: 1; +} +.markdown-alert .markdown-alert-title .octicon { + margin-right: 0.5rem; + display: inline-block; + overflow: visible !important; + vertical-align: text-bottom; + fill: currentColor; +} +.markdown-alert-note { + border-left: .25rem solid var(--color-alert-note); +} +.markdown-alert-note .markdown-alert-title { + color: var(--color-alert-note); +} +.markdown-alert-tip { + border-left: .25rem solid var(--color-alert-tip); +} +.markdown-alert-tip .markdown-alert-title { + color: var(--color-alert-tip); +} +.markdown-alert-important { + border-left: .25rem solid var(--color-alert-important); +} +.markdown-alert-important .markdown-alert-title { + color: var(--color-alert-important); +} +.markdown-alert-warning { + border-left: .25rem solid var(--color-alert-warning); +} +.markdown-alert-warning .markdown-alert-title { + color: var(--color-alert-warning); +} +.markdown-alert-caution { + border-left: .25rem solid var(--color-alert-caution); +} +.markdown-alert-caution .markdown-alert-title { + color: var(--color-alert-caution); +} +/* -------------------------------------------------------------------------- + * MISCELLANEOUS ------------------------------------------------------------ */ +/* headings */ +h1, h2 { + border-bottom: 0.2px solid #444; + padding-bottom: 0.75rem; +} +/* images */ +img, svg { max-width: 100%; } + +/* keyboard */ +kbd { + background-color: #161616; + border: 1px solid #242424; + box-shadow: inset 0 -1px 0 #242424; + padding: 3px 5px; + border-radius: 6px; +} + +/* highlight/mark */ +mark { + background-color: rgba(255, 255, 175, 0.8); + color: #222; +} + +/* -------------------------------------------------------------------------- + * LIGHT MODE --------------------------------------------------------------- */ +@media (prefers-color-scheme: light) { + :root { + --color-alert-note: #0969da; + --color-alert-tip: #1a7f37; + --color-alert-important: #8250df; + --color-alert-warning: #bf8700; + --color-alert-caution: #cf222e; + } + html { + background-color: white; + color: #1f2328; + } + + h1, h2 { + border-bottom: 0.2px solid #d8dee4; + } + + pre { + background-color: #f6f8fa; + } + + code { + background-color: #afb8c133; + } + + a { + color: #0969da; + } + + a#parent-dir { + background-color: #afb8c133; + } + + blockquote { + color: #656d76; + border-left: .25em solid #d0d7de; + } + + th, td { + border: 1px solid #d8dee4; + } + + tr:nth-child(even) { + background-color: #f6f8fa; + } + + hr { + background-color: #d0d7de; + } + + section.footnotes { + border-top: 0.2px solid #d8dee4; + color: #656d76; + } + + dd { + border-left: 0.2px solid #d8dee4; + } + + kbd { + background-color: #f6f8fa; + border: 1px solid #eff1f3; + box-shadow: inset 0 -1px 0 #eff1f3; + } + + mark { + background-color: rgba(255, 255, 175, 1); + color: #1f2328; + } +} diff --git a/static/style.css b/static/style.css index c36e34bf..28fa7c99 100644 --- a/static/style.css +++ b/static/style.css @@ -26,68 +26,7 @@ body { .content-txt { max-width: 1200px; } /* -------------------------------------------------------------------------- - * CODE --------------------------------------------------------------------- */ -pre { - background-color: #161616; - padding: 1rem; - overflow: auto; -} -code { - background-color: #333; - padding: 0.2rem; - border-radius: 0.25rem; -} -pre > code { - background-color: unset; - padding: unset; -} - -/* -------------------------------------------------------------------------- - * LINKS -------------------------------------------------------------------- */ -a { - color: #859abc; - text-decoration: none; -} -a:hover { text-decoration: underline; } -a.header-anchor { - opacity: 0; - position: absolute; - transform: translateX(-2rem); - width: 2rem; -} -a.header-anchor:hover, -h1:hover a.header-anchor, h2:hover a.header-anchor, -h3:hover a.header-anchor, h4:hover a.header-anchor, -h5:hover a.header-anchor, h6:hover a.header-anchor { - opacity: 1; -} -a#top-nav-up:before { content: '◂'} - -/* -------------------------------------------------------------------------- - * TABLES ------------------------------------------------------------------- */ -table { - border-spacing: 0; - border-collapse: collapse; - margin-top: 0; - margin-bottom: 16px; -} - -th, td { - padding: 6px 13px; - border: 1px solid #444; -} - -tr:nth-child(even) { - background-color: #161616; -} - -/* -------------------------------------------------------------------------- - * LISTS -------------------------------------------------------------------- */ -li.task-list-item { list-style: none; } -input.task-list-item-checkbox { - position: absolute; - transform: translateX(-1.44rem); -} + * DIRECTORY LISTS ---------------------------------------------------------- */ ul.dir-list { padding: 0 } li[class^='dir-list-'] { @@ -97,221 +36,3 @@ li[class^='dir-list-'] { li[class^='dir-list-']:before { margin-right: 0.5rem; } li.dir-list-directory:before { content: '📁' } li.dir-list-file:before { content: '📄' } - -/* -------------------------------------------------------------------------- - * HORIZONTAL RULE ---------------------------------------------------------- */ -hr { - height: .25em; - margin: 24px 0; - background-color: #353535; - border: 0; -} - -/* -------------------------------------------------------------------------- - * FOOTNOTE ----------------------------------------------------------------- */ -.footnotes-sep { - display: none; -} -section.footnotes { - font-size: 0.75rem; - margin-top: 1.25rem; - border-top: 0.2px solid #444; - color: #7d7d7d; -} - -/* -------------------------------------------------------------------------- - * DEFIITION LISTS ---------------------------------------------------------- */ -dl { - display: flex; - flex-flow: row wrap; -} -dt { - flex-basis: 20%; - text-align: right; - font-weight: bold; - box-sizing: border-box; - padding: 0.25em; - margin: 0.25em 0; -} -dd { - flex-basis: 80%; - flex-grow: 1; - text-align: left; - box-sizing: border-box; - border-left: 0.2px solid #444; - margin: 0; - padding: 0.25em; - margin: 0.25em 0; -} -dd + dd { - margin-left: 20%; - margin-top: -0.25em; -} -dt + dt { - margin-right: 80%; - margin-top: -0.25em; -} -dt + dt + dd { - margin-left: 20%; - margin-top: -2.25em; /* Align definition with last term */ -} /* Self height - margin - padding */ - -/* -------------------------------------------------------------------------- - * QUOTES AND ALERTS--------------------------------------------------------- */ -blockquote { - padding: 0 1rem; - color: #6a6a6a; - border-left: .25rem solid #353535; - margin-left: 0; -} -/* GitHub-style alerts */ -.markdown-alert { - padding: 0.5rem 1rem; - margin-bottom: 1rem; -} -.markdown-alert > :first-child { - margin-top: 0; -} -.markdown-alert > :last-child { - margin-bottom: 0; -} -.markdown-alert .markdown-alert-title { - display: flex; - font-weight: 500; - align-items: center; - line-height: 1; -} -.markdown-alert .markdown-alert-title .octicon { - margin-right: 0.5rem; - display: inline-block; - overflow: visible !important; - vertical-align: text-bottom; - fill: currentColor; -} -.markdown-alert-note { - border-left: .25rem solid var(--color-alert-note); -} -.markdown-alert-note .markdown-alert-title { - color: var(--color-alert-note); -} -.markdown-alert-tip { - border-left: .25rem solid var(--color-alert-tip); -} -.markdown-alert-tip .markdown-alert-title { - color: var(--color-alert-tip); -} -.markdown-alert-important { - border-left: .25rem solid var(--color-alert-important); -} -.markdown-alert-important .markdown-alert-title { - color: var(--color-alert-important); -} -.markdown-alert-warning { - border-left: .25rem solid var(--color-alert-warning); -} -.markdown-alert-warning .markdown-alert-title { - color: var(--color-alert-warning); -} -.markdown-alert-caution { - border-left: .25rem solid var(--color-alert-caution); -} -.markdown-alert-caution .markdown-alert-title { - color: var(--color-alert-caution); -} -/* -------------------------------------------------------------------------- - * MISCELLANEOUS ------------------------------------------------------------ */ -/* headings */ -h1, h2 { - border-bottom: 0.2px solid #444; - padding-bottom: 0.75rem; -} -/* images */ -img, svg { max-width: 100%; } - -/* keyboard */ -kbd { - background-color: #161616; - border: 1px solid #242424; - box-shadow: inset 0 -1px 0 #242424; - padding: 3px 5px; - border-radius: 6px; -} - -/* highlight/mark */ -mark { - background-color: rgba(255, 255, 175, 0.8); - color: #222; -} - -/* -------------------------------------------------------------------------- - * LIGHT MODE --------------------------------------------------------------- */ -@media (prefers-color-scheme: light) { - :root { - --color-alert-note: #0969da; - --color-alert-tip: #1a7f37; - --color-alert-important: #8250df; - --color-alert-warning: #bf8700; - --color-alert-caution: #cf222e; - } - html { - background-color: white; - color: #1f2328; - } - - h1, h2 { - border-bottom: 0.2px solid #d8dee4; - } - - pre { - background-color: #f6f8fa; - } - - code { - background-color: #afb8c133; - } - - a { - color: #0969da; - } - - a#parent-dir { - background-color: #afb8c133; - } - - blockquote { - color: #656d76; - border-left: .25em solid #d0d7de; - } - - th, td { - border: 1px solid #d8dee4; - } - - tr:nth-child(even) { - background-color: #f6f8fa; - } - - hr { - background-color: #d0d7de; - } - - section.footnotes { - border-top: 0.2px solid #d8dee4; - color: #656d76; - } - - dd { - border-left: 0.2px solid #d8dee4; - } - - kbd { - background-color: #f6f8fa; - border: 1px solid #eff1f3; - box-shadow: inset 0 -1px 0 #eff1f3; - } - - mark { - background-color: rgba(255, 255, 175, 1); - color: #1f2328; - } -} From efcc61a17a011d3d66cf8c0dc2bae119ffe6a1de Mon Sep 17 00:00:00 2001 From: Jannis Baum Date: Thu, 1 Aug 2024 20:31:32 +0200 Subject: [PATCH 02/13] refactor(#120): extract structural colors --- static/colors.css | 52 ++++++++++++++++ static/markdown.css | 149 +++++++++++++------------------------------- static/style.css | 12 +--- 3 files changed, 97 insertions(+), 116 deletions(-) create mode 100644 static/colors.css diff --git a/static/colors.css b/static/colors.css new file mode 100644 index 00000000..57d8ae3e --- /dev/null +++ b/static/colors.css @@ -0,0 +1,52 @@ +/* -------------------------------------------------------------------------- + * DARK MODE ---------------------------------------------------------------- */ + +:root { + --bg: black; + --bg-highlight: #161616; + --bg-code: #333; + --bg-mark: rgba(255, 255, 175, 0.8); + + --text-primary: #aaa; + --text-secondary: #6a6a6a; /* #7d7d7d from foot notes */ + --text-link: #859abc; + --text-mark: #222; + + --border-light: #444; + --border-dark: #353535; + --border-kbd: #242424; + + --alert-note: #a5d5fe; + --alert-tip: #b4fa72; + --alert-important: #ff8ffd; + --alert-warning: #ffaf00; + --alert-caution: #ff5f5f; +} + +/* -------------------------------------------------------------------------- + * LIGHT MODE --------------------------------------------------------------- */ + +@media (prefers-color-scheme: light) { + :root { + --bg: white; + --bg-highlight: #f6f8fa; + --bg-code: #afb8c133; + --bg-mark: rgba(255, 255, 175, 1); + + --text-primary: #1f2328; + --text-secondary: #656d76; + --text-link: #0969da; + --text-mark: #1f2328; + + --border-light: #d8dee4; + --border-dark: #d0d7de; + --border-kbd: #eff1f3; + + --alert-note: #0969da; + --alert-tip: #1a7f37; + --alert-important: #8250df; + --alert-warning: #bf8700; + --alert-caution: #cf222e; + + } +} diff --git a/static/markdown.css b/static/markdown.css index e22551a7..37bc0426 100644 --- a/static/markdown.css +++ b/static/markdown.css @@ -1,12 +1,13 @@ /* -------------------------------------------------------------------------- * CODE --------------------------------------------------------------------- */ + pre { - background-color: #161616; + background-color: var(--bg-highlight); padding: 1rem; overflow: auto; } code { - background-color: #333; + background-color: var(--bg-code); padding: 0.2rem; border-radius: 0.25rem; } @@ -17,8 +18,9 @@ pre > code { /* -------------------------------------------------------------------------- * LINKS -------------------------------------------------------------------- */ + a { - color: #859abc; + color: var(--text-link); text-decoration: none; } a:hover { text-decoration: underline; } @@ -38,6 +40,7 @@ a#top-nav-up:before { content: '◂'} /* -------------------------------------------------------------------------- * TABLES ------------------------------------------------------------------- */ + table { border-spacing: 0; border-collapse: collapse; @@ -47,44 +50,38 @@ table { th, td { padding: 6px 13px; - border: 1px solid #444; + border: 1px solid var(--border-light); } tr:nth-child(even) { - background-color: #161616; + background-color: var(--bg-highlight); } /* -------------------------------------------------------------------------- * LISTS -------------------------------------------------------------------- */ + li.task-list-item { list-style: none; } input.task-list-item-checkbox { position: absolute; transform: translateX(-1.44rem); } -/* -------------------------------------------------------------------------- - * HORIZONTAL RULE ---------------------------------------------------------- */ -hr { - height: .25em; - margin: 24px 0; - background-color: #353535; - border: 0; -} - /* -------------------------------------------------------------------------- * FOOTNOTE ----------------------------------------------------------------- */ + .footnotes-sep { display: none; } section.footnotes { font-size: 0.75rem; margin-top: 1.25rem; - border-top: 0.2px solid #444; - color: #7d7d7d; + border-top: 0.2px solid var(--border-light); + color: var(--text-secondary); } /* -------------------------------------------------------------------------- * DEFIITION LISTS ---------------------------------------------------------- */ + dl { display: flex; flex-flow: row wrap; @@ -102,7 +99,7 @@ dd { flex-grow: 1; text-align: left; box-sizing: border-box; - border-left: 0.2px solid #444; + border-left: 0.2px solid var(--border-light); margin: 0; padding: 0.25em; margin: 0.25em 0; @@ -122,12 +119,14 @@ dt + dt + dd { /* -------------------------------------------------------------------------- * QUOTES AND ALERTS--------------------------------------------------------- */ + blockquote { padding: 0 1rem; - color: #6a6a6a; - border-left: .25rem solid #353535; + color: var(--text-secondary); + border-left: .25em solid var(--border-dark); margin-left: 0; } + /* GitHub-style alerts */ .markdown-alert { padding: 0.5rem 1rem; @@ -153,129 +152,67 @@ blockquote { fill: currentColor; } .markdown-alert-note { - border-left: .25rem solid var(--color-alert-note); + border-left: .25rem solid var(--alert-note); } .markdown-alert-note .markdown-alert-title { - color: var(--color-alert-note); + color: var(--alert-note); } .markdown-alert-tip { - border-left: .25rem solid var(--color-alert-tip); + border-left: .25rem solid var(--alert-tip); } .markdown-alert-tip .markdown-alert-title { - color: var(--color-alert-tip); + color: var(--alert-tip); } .markdown-alert-important { - border-left: .25rem solid var(--color-alert-important); + border-left: .25rem solid var(--alert-important); } .markdown-alert-important .markdown-alert-title { - color: var(--color-alert-important); + color: var(--alert-important); } .markdown-alert-warning { - border-left: .25rem solid var(--color-alert-warning); + border-left: .25rem solid var(--alert-warning); } .markdown-alert-warning .markdown-alert-title { - color: var(--color-alert-warning); + color: var(--alert-warning); } .markdown-alert-caution { - border-left: .25rem solid var(--color-alert-caution); + border-left: .25rem solid var(--alert-caution); } .markdown-alert-caution .markdown-alert-title { - color: var(--color-alert-caution); + color: var(--alert-caution); } + /* -------------------------------------------------------------------------- * MISCELLANEOUS ------------------------------------------------------------ */ + /* headings */ h1, h2 { - border-bottom: 0.2px solid #444; + border-bottom: 0.2px solid var(--border-light); padding-bottom: 0.75rem; } + /* images */ img, svg { max-width: 100%; } /* keyboard */ kbd { - background-color: #161616; - border: 1px solid #242424; - box-shadow: inset 0 -1px 0 #242424; + background-color: var(--bg-highlight); + border: 1px solid var(--border-kbd); + box-shadow: inset 0 -1px 0 var(--border-kbd); padding: 3px 5px; border-radius: 6px; } /* highlight/mark */ mark { - background-color: rgba(255, 255, 175, 0.8); - color: #222; + background-color: var(--bg-mark); + color: var(--text-mark); } -/* -------------------------------------------------------------------------- - * LIGHT MODE --------------------------------------------------------------- */ -@media (prefers-color-scheme: light) { - :root { - --color-alert-note: #0969da; - --color-alert-tip: #1a7f37; - --color-alert-important: #8250df; - --color-alert-warning: #bf8700; - --color-alert-caution: #cf222e; - } - html { - background-color: white; - color: #1f2328; - } - - h1, h2 { - border-bottom: 0.2px solid #d8dee4; - } - - pre { - background-color: #f6f8fa; - } - - code { - background-color: #afb8c133; - } - - a { - color: #0969da; - } - - a#parent-dir { - background-color: #afb8c133; - } - - blockquote { - color: #656d76; - border-left: .25em solid #d0d7de; - } - - th, td { - border: 1px solid #d8dee4; - } - - tr:nth-child(even) { - background-color: #f6f8fa; - } - - hr { - background-color: #d0d7de; - } - - section.footnotes { - border-top: 0.2px solid #d8dee4; - color: #656d76; - } - - dd { - border-left: 0.2px solid #d8dee4; - } - - kbd { - background-color: #f6f8fa; - border: 1px solid #eff1f3; - box-shadow: inset 0 -1px 0 #eff1f3; - } - - mark { - background-color: rgba(255, 255, 175, 1); - color: #1f2328; - } +/* horizontal rule */ +hr { + height: .25em; + margin: 24px 0; + background-color: var(--border-dark); + border: 0; } diff --git a/static/style.css b/static/style.css index 28fa7c99..5b102eba 100644 --- a/static/style.css +++ b/static/style.css @@ -1,14 +1,6 @@ -:root { - --color-alert-note: #a5d5fe; - --color-alert-tip: #b4fa72; - --color-alert-important: #ff8ffd; - --color-alert-warning: #ffaf00; - --color-alert-caution: #ff5f5f; -} - html { - background-color: black; - color: #aaa; + background-color: var(--bg); + color: var(--text-primary); font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; line-height: 1.5; } From 6792d194fb1fdd60af7102b8aeee799ad7f130ee Mon Sep 17 00:00:00 2001 From: Jannis Baum Date: Thu, 1 Aug 2024 20:32:28 +0200 Subject: [PATCH 03/13] refactor(#120): global border-box sizing --- static/markdown.css | 2 -- static/style.css | 5 ++++- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/static/markdown.css b/static/markdown.css index 37bc0426..88e03484 100644 --- a/static/markdown.css +++ b/static/markdown.css @@ -90,7 +90,6 @@ dt { flex-basis: 20%; text-align: right; font-weight: bold; - box-sizing: border-box; padding: 0.25em; margin: 0.25em 0; } @@ -98,7 +97,6 @@ dd { flex-basis: 80%; flex-grow: 1; text-align: left; - box-sizing: border-box; border-left: 0.2px solid var(--border-light); margin: 0; padding: 0.25em; diff --git a/static/style.css b/static/style.css index 5b102eba..6b564c52 100644 --- a/static/style.css +++ b/static/style.css @@ -1,3 +1,7 @@ +* { + box-sizing: border-box; +} + html { background-color: var(--bg); color: var(--text-primary); @@ -6,7 +10,6 @@ html { } body { - box-sizing: border-box; padding: 2rem 4rem; } From 4adc7568be36196e5351e07063cadd639d34af3d Mon Sep 17 00:00:00 2001 From: Jannis Baum Date: Thu, 1 Aug 2024 20:58:52 +0200 Subject: [PATCH 04/13] refactor(#120): extract syntax colors --- static/colors.css | 43 ++++++++- static/highlight.css | 213 +++++++++++++++---------------------------- 2 files changed, 118 insertions(+), 138 deletions(-) diff --git a/static/colors.css b/static/colors.css index 57d8ae3e..5190444c 100644 --- a/static/colors.css +++ b/static/colors.css @@ -16,6 +16,25 @@ --border-dark: #353535; --border-kbd: #242424; + --syntax-text: var(--text-primary); + --syntax-keyword: #aed7ff; + --syntax-entity: #aeafff; + --syntax-constant: #d1b0fa; + --syntax-string: #d787af; + --syntax-symbol: var(--syntax-constant); + --syntax-comment: #949494; + --syntax-entity-tag: #d7afd7; + --syntax-storage-modifier-import: var(--syntax-text); + + --syntax-markup-heading: var(--syntax-text); + --syntax-markup-list: var(--syntax-text); + --syntax-markup-italic: var(--syntax-text); + --syntax-markup-bold: var(--syntax-text); + --syntax-markup-inserted-fg: #aff5b4; + --syntax-markup-inserted-bg: #033a16; + --syntax-markup-deleted-fg: #ffdcd7; + --syntax-markup-deleted-bg: #67060c; + --alert-note: #a5d5fe; --alert-tip: #b4fa72; --alert-important: #ff8ffd; @@ -42,7 +61,29 @@ --border-dark: #d0d7de; --border-kbd: #eff1f3; - --alert-note: #0969da; + /* source for light mode syntax theme: + * https://github.com/highlightjs/highlight.js/blob/main/src/styles/github.css + * */ + --syntax-text: #24292e; + --syntax-keyword: #d73a49; + --syntax-entity: #6f42c1; + --syntax-constant: #005cc5; + --syntax-string: #032f62; + --syntax-symbol: #e36209; + --syntax-comment: #6a737d; + --syntax-entity-tag: #22863a; + --syntax-storage-modifier-import: var(--syntax-text); + + --syntax-markup-heading: #005cc5; + --syntax-markup-list: #735c0f; + --syntax-markup-italic: var(--syntax-text); + --syntax-markup-bold: var(--syntax-text); + --syntax-markup-inserted-fg: #22863a; + --syntax-markup-inserted-bg: #f0fff4; + --syntax-markup-deleted-fg: #b31d28; + --syntax-markup-deleted-bg: #ffeef0; + + --alert-note: var(--text-link); --alert-tip: #1a7f37; --alert-important: #8250df; --alert-warning: #bf8700; diff --git a/static/highlight.css b/static/highlight.css index 43bd1d48..704eb716 100644 --- a/static/highlight.css +++ b/static/highlight.css @@ -1,163 +1,102 @@ -/* translucent dark */ -.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{ - color: #aed7ff; +.hljs { + color: var(--syntax-text); } -.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{ - color: #aeafff; +.hljs-doctag, +.hljs-keyword, +.hljs-meta .hljs-keyword, +.hljs-template-tag, +.hljs-template-variable, +.hljs-type, +.hljs-variable.language_ { + color: var(--syntax-keyword); } -.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{ - color: #d1b0fa; +.hljs-title, +.hljs-title.class_, +.hljs-title.class_.inherited__, +.hljs-title.function_ { + color: var(--syntax-entity); } -.hljs-meta .hljs-string,.hljs-regexp,.hljs-string,.hljs-subst{ - color: #d787af; +.hljs-attr, +.hljs-attribute, +.hljs-literal, +.hljs-meta, +.hljs-number, +.hljs-operator, +.hljs-variable, +.hljs-selector-attr, +.hljs-selector-class, +.hljs-selector-id { + color: var(--syntax-constant); } -.hljs-built_in,.hljs-symbol{ - color: #d1b0fa; - font-weight: bold; +.hljs-regexp, +.hljs-string, +.hljs-meta .hljs-string { + color: var(--syntax-string); } -.hljs-code,.hljs-comment,.hljs-formula{ - color: #949494; - font-style: italic; +.hljs-built_in, +.hljs-symbol { + color: var(--syntax-symbol); + font-style: bold; } -.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{ - color: #d7afd7; +.hljs-comment, +.hljs-code, +.hljs-formula { + color: var(--syntax-comment); + font-style: italic; } -.hljs-strong,.hljs-emphasis{ - font-weight: bold; +.hljs-name, +.hljs-quote, +.hljs-selector-tag, +.hljs-selector-pseudo { + color: var(--syntax-entity-tag); } -.hljs-addition{ - color: #aff5b4; - background-color: #033a16; +.hljs-subst { + color: var(--syntax-storage-modifier-import); } -.hljs-deletion{ - color: #ffdcd7; - background-color: #67060c; +.hljs-section { + color: var(--syntax-markup-heading); + font-weight: bold; } -/* light mode */ -/* source: https://github.com/highlightjs/highlight.js/blob/main/src/styles/github.css */ -@media (prefers-color-scheme: light) { - .hljs { - color: #24292e; - background: #ffffff; - } - - .hljs-doctag, - .hljs-keyword, - .hljs-meta .hljs-keyword, - .hljs-template-tag, - .hljs-template-variable, - .hljs-type, - .hljs-variable.language_ { - /* prettylights-syntax-keyword */ - color: #d73a49; - } - - .hljs-title, - .hljs-title.class_, - .hljs-title.class_.inherited__, - .hljs-title.function_ { - /* prettylights-syntax-entity */ - color: #6f42c1; - } - - .hljs-attr, - .hljs-attribute, - .hljs-literal, - .hljs-meta, - .hljs-number, - .hljs-operator, - .hljs-variable, - .hljs-selector-attr, - .hljs-selector-class, - .hljs-selector-id { - /* prettylights-syntax-constant */ - color: #005cc5; - } - - .hljs-regexp, - .hljs-string, - .hljs-meta .hljs-string { - /* prettylights-syntax-string */ - color: #032f62; - } - - .hljs-built_in, - .hljs-symbol { - /* prettylights-syntax-variable */ - color: #e36209; - } - - .hljs-comment, - .hljs-code, - .hljs-formula { - /* prettylights-syntax-comment */ - color: #6a737d; - } - - .hljs-name, - .hljs-quote, - .hljs-selector-tag, - .hljs-selector-pseudo { - /* prettylights-syntax-entity-tag */ - color: #22863a; - } - - .hljs-subst { - /* prettylights-syntax-storage-modifier-import */ - color: #24292e; - } - - .hljs-section { - /* prettylights-syntax-markup-heading */ - color: #005cc5; - font-weight: bold; - } - - .hljs-bullet { - /* prettylights-syntax-markup-list */ - color: #735c0f; - } +.hljs-bullet { + color: var(--syntax-markup-bullet); +} - .hljs-emphasis { - /* prettylights-syntax-markup-italic */ - color: #24292e; - font-style: italic; - } +.hljs-emphasis { + color: var(--syntax-markup-italic); + font-style: italic; +} - .hljs-strong { - /* prettylights-syntax-markup-bold */ - color: #24292e; - font-weight: bold; - } +.hljs-strong { + color: var(--syntax-markup-bold); + font-weight: bold; +} - .hljs-addition { - /* prettylights-syntax-markup-inserted */ - color: #22863a; - background-color: #f0fff4; - } +.hljs-addition { + color: var(--syntax-markup-inserted-fg); + background-color: var(--syntax-markup-inserted-bg); +} - .hljs-deletion { - /* prettylights-syntax-markup-deleted */ - color: #b31d28; - background-color: #ffeef0; - } +.hljs-deletion { + color: var(--syntax-markup-deleted-fg); + background-color: var(--syntax-markup-deleted-bg); +} - .hljs-char.escape_, - .hljs-link, - .hljs-params, - .hljs-property, - .hljs-punctuation, - .hljs-tag { - /* purposely ignored */ - } +.hljs-char.escape_, +.hljs-link, +.hljs-params, +.hljs-property, +.hljs-punctuation, +.hljs-tag { + /* purposely ignored */ + color: inherit; } From 801f79aa78f6c7f239b60753670376e8dfbdcd94 Mon Sep 17 00:00:00 2001 From: Jannis Baum Date: Thu, 1 Aug 2024 21:01:49 +0200 Subject: [PATCH 05/13] refactor(#120): reused colors --- static/colors.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/static/colors.css b/static/colors.css index 5190444c..9ceb9f37 100644 --- a/static/colors.css +++ b/static/colors.css @@ -55,7 +55,7 @@ --text-primary: #1f2328; --text-secondary: #656d76; --text-link: #0969da; - --text-mark: #1f2328; + --text-mark: var(--text-primary); --border-light: #d8dee4; --border-dark: #d0d7de; @@ -74,11 +74,11 @@ --syntax-entity-tag: #22863a; --syntax-storage-modifier-import: var(--syntax-text); - --syntax-markup-heading: #005cc5; + --syntax-markup-heading: var(--syntax-constant); --syntax-markup-list: #735c0f; --syntax-markup-italic: var(--syntax-text); --syntax-markup-bold: var(--syntax-text); - --syntax-markup-inserted-fg: #22863a; + --syntax-markup-inserted-fg: var(--syntax-entity-tag); --syntax-markup-inserted-bg: #f0fff4; --syntax-markup-deleted-fg: #b31d28; --syntax-markup-deleted-bg: #ffeef0; From 7afb01c138efc7e92e7be88d02e8ebd90e0a0e27 Mon Sep 17 00:00:00 2001 From: Jannis Baum Date: Thu, 1 Aug 2024 21:01:56 +0200 Subject: [PATCH 06/13] chore(#120): add color sheet --- src/routes/viewer.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/routes/viewer.ts b/src/routes/viewer.ts index eab9b756..2085421d 100644 --- a/src/routes/viewer.ts +++ b/src/routes/viewer.ts @@ -69,6 +69,7 @@ router.get(/.*/, async (req: Request, res: Response) => { ${title} + From 21efef5f112002b70409e3f3415a5d4a33553328 Mon Sep 17 00:00:00 2001 From: Jannis Baum Date: Thu, 1 Aug 2024 21:15:52 +0200 Subject: [PATCH 07/13] refactor(#120): extract notebook colors --- static/colors.css | 3 +++ static/ipynb.css | 4 ++-- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/static/colors.css b/static/colors.css index 9ceb9f37..6a9c5c70 100644 --- a/static/colors.css +++ b/static/colors.css @@ -40,6 +40,8 @@ --alert-important: #ff8ffd; --alert-warning: #ffaf00; --alert-caution: #ff5f5f; + + --ipynb-bg-error: rgba(255, 0, 0, 0.1); } /* -------------------------------------------------------------------------- @@ -89,5 +91,6 @@ --alert-warning: #bf8700; --alert-caution: #cf222e; + --ipynb-bg-error: rgba(255, 0, 0, 0.1); } } diff --git a/static/ipynb.css b/static/ipynb.css index 57911b9b..e68d9702 100644 --- a/static/ipynb.css +++ b/static/ipynb.css @@ -19,9 +19,9 @@ padding: unset; background-color: unset; } -.ipynb-output-stream-stderr { background-color: rgba(255, 0, 0, 0.1); } +.ipynb-output-stream-stderr { background-color: var(--ipynb-bg-error); } -.ipynb-output-error { background-color: rgba(255, 0, 0, 0.1); } +.ipynb-output-error { background-color: var(--ipynb-bg-error); } .ipynb-output-plain { padding: unset; From 924dd99901147774a00c8a19cd6ccf64b7251728 Mon Sep 17 00:00:00 2001 From: Jannis Baum Date: Sat, 3 Aug 2024 17:51:57 +0200 Subject: [PATCH 08/13] refactor(#120): review: bg primary/secondary --- static/colors.css | 8 ++++---- static/markdown.css | 6 +++--- static/style.css | 2 +- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/static/colors.css b/static/colors.css index 6a9c5c70..27ac175c 100644 --- a/static/colors.css +++ b/static/colors.css @@ -2,8 +2,8 @@ * DARK MODE ---------------------------------------------------------------- */ :root { - --bg: black; - --bg-highlight: #161616; + --bg-primary: black; + --bg-secondary: #161616; --bg-code: #333; --bg-mark: rgba(255, 255, 175, 0.8); @@ -49,8 +49,8 @@ @media (prefers-color-scheme: light) { :root { - --bg: white; - --bg-highlight: #f6f8fa; + --bg-primary: white; + --bg-secondary: #f6f8fa; --bg-code: #afb8c133; --bg-mark: rgba(255, 255, 175, 1); diff --git a/static/markdown.css b/static/markdown.css index 88e03484..39d47d6c 100644 --- a/static/markdown.css +++ b/static/markdown.css @@ -2,7 +2,7 @@ * CODE --------------------------------------------------------------------- */ pre { - background-color: var(--bg-highlight); + background-color: var(--bg-secondary); padding: 1rem; overflow: auto; } @@ -54,7 +54,7 @@ th, td { } tr:nth-child(even) { - background-color: var(--bg-highlight); + background-color: var(--bg-secondary); } /* -------------------------------------------------------------------------- @@ -194,7 +194,7 @@ img, svg { max-width: 100%; } /* keyboard */ kbd { - background-color: var(--bg-highlight); + background-color: var(--bg-secondary); border: 1px solid var(--border-kbd); box-shadow: inset 0 -1px 0 var(--border-kbd); padding: 3px 5px; diff --git a/static/style.css b/static/style.css index 6b564c52..e13ad262 100644 --- a/static/style.css +++ b/static/style.css @@ -3,7 +3,7 @@ } html { - background-color: var(--bg); + background-color: var(--bg-primary); color: var(--text-primary); font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; line-height: 1.5; From fd580f386461df1d365431fd99872171f7c95118 Mon Sep 17 00:00:00 2001 From: Jannis Baum Date: Sun, 4 Aug 2024 13:21:19 +0200 Subject: [PATCH 09/13] refactor(#120): hr same style as block --- static/markdown.css | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/static/markdown.css b/static/markdown.css index 39d47d6c..a25a44c9 100644 --- a/static/markdown.css +++ b/static/markdown.css @@ -209,8 +209,7 @@ mark { /* horizontal rule */ hr { - height: .25em; - margin: 24px 0; - background-color: var(--border-dark); border: 0; + border-top: 0.25em solid var(--border-dark); + margin: 24px 0; } From 07359a0514cf62a1328c10db888d1654de071d67 Mon Sep 17 00:00:00 2001 From: Jannis Baum Date: Sun, 4 Aug 2024 13:22:14 +0200 Subject: [PATCH 10/13] refactor(#120): unify border styles --- static/colors.css | 10 ++++------ static/markdown.css | 16 ++++++++-------- 2 files changed, 12 insertions(+), 14 deletions(-) diff --git a/static/colors.css b/static/colors.css index 27ac175c..2711fe07 100644 --- a/static/colors.css +++ b/static/colors.css @@ -12,9 +12,8 @@ --text-link: #859abc; --text-mark: #222; - --border-light: #444; - --border-dark: #353535; - --border-kbd: #242424; + --border-regular: #444; /* thin borders <1px */ + --border-bold: #353535; /* thicker borders ≥1px */ --syntax-text: var(--text-primary); --syntax-keyword: #aed7ff; @@ -59,9 +58,8 @@ --text-link: #0969da; --text-mark: var(--text-primary); - --border-light: #d8dee4; - --border-dark: #d0d7de; - --border-kbd: #eff1f3; + --border-regular: #d8dee4; /* thin borders <1px */ + --border-bold: #d0d7de; /* thicker borders ≥1px */ /* source for light mode syntax theme: * https://github.com/highlightjs/highlight.js/blob/main/src/styles/github.css diff --git a/static/markdown.css b/static/markdown.css index a25a44c9..4499b85c 100644 --- a/static/markdown.css +++ b/static/markdown.css @@ -50,7 +50,7 @@ table { th, td { padding: 6px 13px; - border: 1px solid var(--border-light); + border: 1px solid var(--border-bold); } tr:nth-child(even) { @@ -75,7 +75,7 @@ input.task-list-item-checkbox { section.footnotes { font-size: 0.75rem; margin-top: 1.25rem; - border-top: 0.2px solid var(--border-light); + border-top: 0.2px solid var(--border-regular); color: var(--text-secondary); } @@ -97,7 +97,7 @@ dd { flex-basis: 80%; flex-grow: 1; text-align: left; - border-left: 0.2px solid var(--border-light); + border-left: 0.2px solid var(--border-regular); margin: 0; padding: 0.25em; margin: 0.25em 0; @@ -121,7 +121,7 @@ dt + dt + dd { blockquote { padding: 0 1rem; color: var(--text-secondary); - border-left: .25em solid var(--border-dark); + border-left: .25em solid var(--border-bold); margin-left: 0; } @@ -185,7 +185,7 @@ blockquote { /* headings */ h1, h2 { - border-bottom: 0.2px solid var(--border-light); + border-bottom: 0.2px solid var(--border-regular); padding-bottom: 0.75rem; } @@ -195,8 +195,8 @@ img, svg { max-width: 100%; } /* keyboard */ kbd { background-color: var(--bg-secondary); - border: 1px solid var(--border-kbd); - box-shadow: inset 0 -1px 0 var(--border-kbd); + border: 1px solid var(--border-bold); + box-shadow: inset 0 -1px 0 var(--border-bold); padding: 3px 5px; border-radius: 6px; } @@ -210,6 +210,6 @@ mark { /* horizontal rule */ hr { border: 0; - border-top: 0.25em solid var(--border-dark); + border-top: 0.25em solid var(--border-bold); margin: 24px 0; } From 017449093a85605a18530a4dfaf946f65f330d8e Mon Sep 17 00:00:00 2001 From: Tuure Date: Mon, 5 Aug 2024 22:19:20 +0300 Subject: [PATCH 11/13] fix(#120): consistent border variables for light/dark --- static/colors.css | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/static/colors.css b/static/colors.css index 2711fe07..ef7ea1d3 100644 --- a/static/colors.css +++ b/static/colors.css @@ -12,8 +12,8 @@ --text-link: #859abc; --text-mark: #222; - --border-regular: #444; /* thin borders <1px */ - --border-bold: #353535; /* thicker borders ≥1px */ + --border-regular: #353535; + --border-muted: #303030; --syntax-text: var(--text-primary); --syntax-keyword: #aed7ff; @@ -50,7 +50,7 @@ :root { --bg-primary: white; --bg-secondary: #f6f8fa; - --bg-code: #afb8c133; + --bg-code: #eff1f3; --bg-mark: rgba(255, 255, 175, 1); --text-primary: #1f2328; @@ -58,8 +58,8 @@ --text-link: #0969da; --text-mark: var(--text-primary); - --border-regular: #d8dee4; /* thin borders <1px */ - --border-bold: #d0d7de; /* thicker borders ≥1px */ + --border-regular: #d0d7de; + --border-muted: #d8dee4; /* source for light mode syntax theme: * https://github.com/highlightjs/highlight.js/blob/main/src/styles/github.css From 6346769f31ed1f483e0ec162fc4fc8da8911d479 Mon Sep 17 00:00:00 2001 From: Jannis Baum Date: Mon, 5 Aug 2024 21:35:10 +0200 Subject: [PATCH 12/13] fix(#120): bold -> muted --- static/markdown.css | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/static/markdown.css b/static/markdown.css index 4499b85c..49395794 100644 --- a/static/markdown.css +++ b/static/markdown.css @@ -50,7 +50,7 @@ table { th, td { padding: 6px 13px; - border: 1px solid var(--border-bold); + border: 1px solid var(--border-muted); } tr:nth-child(even) { @@ -121,7 +121,7 @@ dt + dt + dd { blockquote { padding: 0 1rem; color: var(--text-secondary); - border-left: .25em solid var(--border-bold); + border-left: .25em solid var(--border-muted); margin-left: 0; } @@ -195,8 +195,8 @@ img, svg { max-width: 100%; } /* keyboard */ kbd { background-color: var(--bg-secondary); - border: 1px solid var(--border-bold); - box-shadow: inset 0 -1px 0 var(--border-bold); + border: 1px solid var(--border-muted); + box-shadow: inset 0 -1px 0 var(--border-muted); padding: 3px 5px; border-radius: 6px; } @@ -210,6 +210,6 @@ mark { /* horizontal rule */ hr { border: 0; - border-top: 0.25em solid var(--border-bold); + border-top: 0.25em solid var(--border-muted); margin: 24px 0; } From 23ae83f974095f21be48d9821116fea848741160 Mon Sep 17 00:00:00 2001 From: Tuure Date: Mon, 5 Aug 2024 22:45:57 +0300 Subject: [PATCH 13/13] fix(#120): correct variable per border --- static/markdown.css | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/static/markdown.css b/static/markdown.css index 49395794..742867e3 100644 --- a/static/markdown.css +++ b/static/markdown.css @@ -50,7 +50,7 @@ table { th, td { padding: 6px 13px; - border: 1px solid var(--border-muted); + border: 1px solid var(--border-regular); } tr:nth-child(even) { @@ -75,7 +75,7 @@ input.task-list-item-checkbox { section.footnotes { font-size: 0.75rem; margin-top: 1.25rem; - border-top: 0.2px solid var(--border-regular); + border-top: 0.2px solid var(--border-muted); color: var(--text-secondary); } @@ -97,7 +97,7 @@ dd { flex-basis: 80%; flex-grow: 1; text-align: left; - border-left: 0.2px solid var(--border-regular); + border-left: 0.2px solid var(--border-muted); margin: 0; padding: 0.25em; margin: 0.25em 0; @@ -121,7 +121,7 @@ dt + dt + dd { blockquote { padding: 0 1rem; color: var(--text-secondary); - border-left: .25em solid var(--border-muted); + border-left: .25em solid var(--border-regular); margin-left: 0; } @@ -185,7 +185,7 @@ blockquote { /* headings */ h1, h2 { - border-bottom: 0.2px solid var(--border-regular); + border-bottom: 0.2px solid var(--border-muted); padding-bottom: 0.75rem; } @@ -195,8 +195,8 @@ img, svg { max-width: 100%; } /* keyboard */ kbd { background-color: var(--bg-secondary); - border: 1px solid var(--border-muted); - box-shadow: inset 0 -1px 0 var(--border-muted); + border: 1px solid var(--border-regular); + box-shadow: inset 0 -1px 0 var(--border-regular); padding: 3px 5px; border-radius: 6px; } @@ -210,6 +210,6 @@ mark { /* horizontal rule */ hr { border: 0; - border-top: 0.25em solid var(--border-muted); + border-top: 0.25em solid var(--border-regular); margin: 24px 0; }