From 7b2b1f6b837dbca3dd08cb89836cb1ae098c2bd8 Mon Sep 17 00:00:00 2001 From: Christian Hodgden Date: Tue, 3 Feb 2026 16:25:44 -0600 Subject: Initial Commit. Yay --- static/css/chroma-root.css | 32 +++++++++ static/css/chroma.css | 90 ++++++++++++++++++++++++++ static/css/dark-mode.js | 25 ++++++++ static/css/main-root.css | 55 ++++++++++++++++ static/css/main.css | 157 +++++++++++++++++++++++++++++++++++++++++++++ static/img/favicon.png | Bin 0 -> 365 bytes static/img/favicon.svg | 22 +++++++ 7 files changed, 381 insertions(+) create mode 100644 static/css/chroma-root.css create mode 100644 static/css/chroma.css create mode 100644 static/css/dark-mode.js create mode 100644 static/css/main-root.css create mode 100644 static/css/main.css create mode 100644 static/img/favicon.png create mode 100644 static/img/favicon.svg (limited to 'static') diff --git a/static/css/chroma-root.css b/static/css/chroma-root.css new file mode 100644 index 0000000..704ead3 --- /dev/null +++ b/static/css/chroma-root.css @@ -0,0 +1,32 @@ +:root{ + --operator-color: hsl( + 0, + 0%, + var(--foreground-lightness) + ); + --keyword-color: hsl( + 180, + var(--contrast-saturation), + var(--contrast-lightness) + ); + --name-color: hsl( + 320, + var(--contrast-saturation), + var(--contrast-lightness) + ); + --literal-color: hsl( + 120, + var(--contrast-saturation), + var(--contrast-lightness) + ); + --error-color: hsl( + 0, + var(--contrast-saturation), + var(--contrast-lightness) + ); + --comment-color :hsl( + 0, + 0%, + 50% + ); +} \ No newline at end of file diff --git a/static/css/chroma.css b/static/css/chroma.css new file mode 100644 index 0000000..a427f70 --- /dev/null +++ b/static/css/chroma.css @@ -0,0 +1,90 @@ +@import url('/css/chroma-root.css'); + +/* Background */ .bg { } +/* PreWrapper */ .chroma { } +/* Other */ .chroma .x { color:var(--foreground-accent-color); } +/* Error */ .chroma .err { color:var(--error-color); } +/* CodeLine */ .chroma .cl { color:var(--foreground-accent-color); } +/* Operator */ .chroma .o { color:var(--operator-color) } +/* OperatorWord */ .chroma .ow { color:var(--operator-color);font-weight:bold } +/* Punctuation */ .chroma .p { color:var(--operator-color); } +/* TextWhitespace */ .chroma .w { } +/* Generic */ .chroma .g { color:var(--foreground-accent-color); } +/* GenericDeleted */ .chroma .gd { color:var(--error-color); } +/* GenericEmph */ .chroma .ge { font-style:italic } +/* GenericError */ .chroma .gr { color:var(--error-color); } +/* GenericHeading */ .chroma .gh { color:var(--foreground-accent-color);font-weight:bold } +/* GenericInserted */ .chroma .gi { color:var(--foreground-accent-color); } +/* GenericOutput */ .chroma .go { color:var(--foreground-accent-color); } +/* GenericPrompt */ .chroma .gp { color:var(--foreground-accent-color);font-weight:bold } +/* GenericStrong */ .chroma .gs { font-weight:bold } +/* GenericSubheading */ .chroma .gu { color:var(--foreground-accent-color);font-weight:bold } +/* GenericTraceback */ .chroma .gt { color:var(--foreground-accent-color); } +/* GenericUnderline */ .chroma .gl { text-decoration:underline } +/* Keyword */ .chroma .k { color:var(--keyword-color);font-weight:bold } +/* KeywordConstant */ .chroma .kc { color:var(--keyword-color);font-weight:bold } +/* KeywordDeclaration */ .chroma .kd { color:var(--keyword-color);font-weight:bold } +/* KeywordNamespace */ .chroma .kn { color:var(--keyword-color);font-weight:bold } +/* KeywordPseudo */ .chroma .kp { color:var(--keyword-color) } +/* KeywordReserved */ .chroma .kr { color:var(--keyword-color);font-weight:bold } +/* KeywordType */ .chroma .kt { color:var(--keyword-color) } +/* Name */ .chroma .n { color:var(--name-color) } +/* NameAttribute */ .chroma .na { color:var(--name-color) } +/* NameBuiltin */ .chroma .nb { color:var(--name-color) } +/* NameBuiltinPseudo */ .chroma .bp { color:var(--name-color) } +/* NameClass */ .chroma .nc { color:var(--name-color);font-weight:bold } +/* NameConstant */ .chroma .no { color:var(--name-color) } +/* NameDecorator */ .chroma .nd { color:var(--name-color);font-weight:bold } +/* NameEntity */ .chroma .ni { color:var(--name-color);font-weight:bold } +/* NameException */ .chroma .ne { color:var(--name-color) } +/* NameFunction */ .chroma .nf { color:var(--name-color) } +/* NameFunctionMagic */ .chroma .fm { color:var(--name-color) } +/* NameLabel */ .chroma .nl { color:var(--name-color);font-weight:bold } +/* NameNamespace */ .chroma .nn { color:var(--name-color);font-weight:bold } +/* NameOther */ .chroma .nx { color:var(--name-color) } +/* NameProperty */ .chroma .py { color:var(--name-color) } +/* NameTag */ .chroma .nt { color:var(--name-color);font-weight:bold } +/* NameVariable */ .chroma .nv { color:var(--name-color) } +/* NameVariableClass */ .chroma .vc { color:var(--name-color) } +/* NameVariableGlobal */ .chroma .vg { color:var(--name-color) } +/* NameVariableInstance */ .chroma .vi { color:var(--name-color) } +/* NameVariableMagic */ .chroma .vm { color:var(--name-color) } +/* Literal */ .chroma .l { color:var(--literal-color) } +/* LiteralDate */ .chroma .ld { color:var(--literal-color) } +/* LiteralString */ .chroma .s { color:var(--literal-color) } +/* LiteralStringAffix */ .chroma .sa { color:var(--literal-color) } +/* LiteralStringBacktick */ .chroma .sb { color:var(--literal-color) } +/* LiteralStringChar */ .chroma .sc { color:var(--literal-color) } +/* LiteralStringDelimiter */ .chroma .dl { color:var(--literal-color) } +/* LiteralStringDoc */ .chroma .sd { color:var(--literal-color);font-style:italic } +/* LiteralStringDouble */ .chroma .s2 { color:var(--literal-color) } +/* LiteralStringEscape */ .chroma .se { color:var(--literal-color);font-weight:bold } +/* LiteralStringHeredoc */ .chroma .sh { color:var(--literal-color) } +/* LiteralStringInterpol */ .chroma .si { color:var(--literal-color) } +/* LiteralStringOther */ .chroma .sx { color:var(--literal-color) } +/* LiteralStringRegex */ .chroma .sr { color:var(--literal-color) } +/* LiteralStringSingle */ .chroma .s1 { color:var(--literal-color) } +/* LiteralStringSymbol */ .chroma .ss { color:var(--literal-color) } +/* LiteralNumber */ .chroma .m { color:var(--literal-color) } +/* LiteralNumberBin */ .chroma .mb { color:var(--literal-color) } +/* LiteralNumberFloat */ .chroma .mf { color:var(--literal-color) } +/* LiteralNumberHex */ .chroma .mh { color:var(--literal-color) } +/* LiteralNumberInteger */ .chroma .mi { color:var(--literal-color) } +/* LiteralNumberIntegerLong */ .chroma .il { color:var(--literal-color) } +/* LiteralNumberOct */ .chroma .mo { color:var(--literal-color) } +/* Comment */ .chroma .c { color:var(--comment-color);font-style:italic } +/* CommentHashbang */ .chroma .ch { color:var(--comment-color);font-style:italic } +/* CommentMultiline */ .chroma .cm { color:var(--comment-color);font-style:italic } +/* CommentSingle */ .chroma .c1 { color:var(--comment-color);font-style:italic } +/* CommentSpecial */ .chroma .cs { color:var(--comment-color) } +/* CommentPreproc */ .chroma .cp { color:var(--comment-color) } +/* CommentPreprocFile */ .chroma .cpf { color:var(--comment-color) } + +/*Line indicators are a whole different animal as they include structural-layout formatting*/ +/* LineLink */ .chroma .lnlinks { outline:none;text-decoration:none;color:inherit } +/* LineTableTD */ .chroma .lntd { vertical-align:top;padding:0;margin:0;border:0; } +/* LineTable */ .chroma .lntable { border-spacing:0;padding:0;margin:0;border:0; } +/* LineHighlight */ .chroma .hl { background-color:#d8d8d8 } +/* LineNumbersTable */ .chroma .lnt { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f } +/* LineNumbers */ .chroma .ln { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f } +/* Line */ .chroma .line { display:flex; } diff --git a/static/css/dark-mode.js b/static/css/dark-mode.js new file mode 100644 index 0000000..b038fe4 --- /dev/null +++ b/static/css/dark-mode.js @@ -0,0 +1,25 @@ +const toggleTheme = function() { + document.documentElement.style.setProperty(this.id, Number(this.checked)); + localStorage.setItem(this.id, Number(this.checked)); +}; + +const initInput = function(styleVariable=null) { + let initValue = localStorage.getItem(styleVariable); + if (initValue) { + initValue = Number(initValue); + document.documentElement.style.setProperty(styleVariable, initValue); + } else { + initValue = getComputedStyle(document.body).getPropertyValue(styleVariable); + initValue = Number(initValue); + }; + + const inputObject = document.getElementById(styleVariable); + if (inputObject) { + if (inputObject.type == 'checkbox') { + inputObject.addEventListener('change', toggleTheme); + inputObject.checked = initValue + }; + }; +}; + +initInput('--dark-theme-check'); diff --git a/static/css/main-root.css b/static/css/main-root.css new file mode 100644 index 0000000..08188b7 --- /dev/null +++ b/static/css/main-root.css @@ -0,0 +1,55 @@ +:root{ + --dark-theme-check: 1; + --theme-color-check: 0; + --accent-color-check: 0; + --theme-hue: 0; + --accent-hue: 0; + + /* Contrast hue - the color for hyperlinks and selection. + Default hue is 210, but we want it the +180 opposite hue of theme if there is a theme color.*/ + --theme-contrast-hue: calc(calc(var(--theme-hue) + 180) * var(--theme-color-check)); + --default-contrast-hue: calc(210 - calc(var(--theme-color-check) * 210)); + --contrast-hue: calc(var(--theme-contrast-hue) + var(--default-contrast-hue)); + + --foreground-lightness: calc(0% + calc(var(--dark-theme-check) * 90%)); + --background-lightness: calc(100% - calc(var(--dark-theme-check) * 90%)); + --contrast-lightness: calc(50% + calc(var(--dark-theme-check) * 0%)); + + /* Accent hue - the color for all other elements beside

foreground and the main background. + We want to inherit the theme hue if accent color is disabled.*/ + --theme-accent-hue: calc(var(--theme-hue) * calc(1 - var(--accent-color-check))); + --accent-check-hue: calc(var(--accent-hue) * var(--accent-color-check)); + --applied-accent-hue: calc(var(--theme-accent-hue) + var(--accent-check-hue)); + + --accent-saturation: calc( + max(var(--accent-color-check), var(--theme-color-check)) * + calc(75% - calc(var(--dark-theme-check) * 20%)) + ); + --contrast-saturation: calc(100% - calc(var(--dark-theme-check) * 10%)); + + --foreground-theme-color: hsl( + var(--theme-hue), + calc(var(--theme-color-check) * 75%), + var(--foreground-lightness) + ); + --background-theme-color: hsl( + var(--theme-hue), + calc(var(--theme-color-check) * 25%), + var(--background-lightness) + ); + --foreground-accent-color: hsl( + var(--applied-accent-hue), + var(--accent-saturation), + var(--contrast-lightness) + ); + --background-accent-color: hsl( + var(--applied-accent-hue), + calc(var(--accent-color-check) * 25%), + var(--background-lightness) + ); + --contrast-color: hsl( + var(--contrast-hue), + var(--contrast-saturation), + var(--contrast-lightness) + ); +} diff --git a/static/css/main.css b/static/css/main.css new file mode 100644 index 0000000..cd32508 --- /dev/null +++ b/static/css/main.css @@ -0,0 +1,157 @@ +@import url('/css/main-root.css'); + +@media (prefers-color-scheme: dark) { + :root { + --dark-theme-check: 1; + } +} + +@media (prefers-color-scheme: light) { + :root { + --dark-theme-check: 0; + } +} + +@media (max-width: 600px) { + html { + font-size: 1em; + } +} + +@media (min-width: 601px) { + html { + font-size: 1em; + } +} + +.dark-mode-container { + float: right; +} + +::selection { + background-color: var(--contrast-color); + color: hsl(0, 0%, var(--background-lightness)); +} + +body { + color: var(--foreground-accent-color); + background-color: var(--background-theme-color); + transition: 250ms; +} + +p { + color: var(--foreground-theme-color); + font-size: 1rem; +} + +hr { + border-color: var(--foreground-accent-color); +} + +code { + color: var(--foreground-accent-color); + + border-color: var(--foreground-accent-color); + border-width: 1px; + border-style: solid; + padding: 0.1rem 0.2rem; + background-color: hsla(0, 0%, 0%, 50%); +} + +pre code { + border-style: none; + padding: 0; + background: none; + color: inherit; + tab-size: 4; +} + +pre { + border-color: var(--foreground-accent-color); + border-width: 1px; + border-style: solid; + padding: 5px; + + background-color: hsla(0, 0%, 0%, 0%); + + font-size: 1rem; + white-space: pre; + overflow-x: auto; + max-width: 100%; + text-size-adjust: 100%; + -ms-text-size-adjust: 100%; + -moz-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; +} + +math { + color: var(--foreground-accent-color); + font-size: 1rem; + overflow-x: auto; + max-width: 100%; + text-size-adjust: 100%; + -ms-text-size-adjust: 100%; + -moz-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; +} + +math mi { + font-style: italic; +} + +nav { + clear: both; +} + +nav.nav-footer { + color: var(--foreground-accent-color); + text-align: center; + clear: both; +} + +ul { + text-indent: -2rem; + font-size: 1.25rem; + font-weight: bold; +} + +li { + text-indent: 0rem; + font-size: 1rem; + font-weight: normal; +} + +li.pages-iter-item { + --instance-hue: var(--accent-hue); + color: hsl( + var(--instance-hue), + var(--accent-saturation), + var(--contrast-lightness) + ); +} + +li:not(.pages-iter-item) { + color: var(--foreground-theme-color); +} + +li:not(.pages-iter-item)::marker { + color: var(--foreground-accent-color); +} + +a { + color: var(--contrast-color); +} + +a:visited { + color: hsl(calc(var(--contrast-hue) + 60), 100%, var(--contrast-lightness)) +} + +a:hover { + color: hsl(calc(var(--contrast-hue) - 150), 100%, var(--contrast-lightness)) +} + +img { + float: right; + max-width: 50%; + width: auto; +} diff --git a/static/img/favicon.png b/static/img/favicon.png new file mode 100644 index 0000000..c5c7df8 Binary files /dev/null and b/static/img/favicon.png differ diff --git a/static/img/favicon.svg b/static/img/favicon.svg new file mode 100644 index 0000000..7b969eb --- /dev/null +++ b/static/img/favicon.svg @@ -0,0 +1,22 @@ + + + + + + + + -- cgit v1.2.3