From c6afc274c2b9d789453314241621976cc8225be8 Mon Sep 17 00:00:00 2001 From: ari melody Date: Wed, 22 Jan 2025 11:39:15 +0000 Subject: [PATCH] light theme! crt now disabled by default --- public/script/config.js | 63 ++++----- public/script/index.js | 16 +++ public/style/colours.css | 29 +++- public/style/header.css | 242 +++++++++++++++++---------------- public/style/index.css | 122 ++++++++--------- public/style/main.css | 35 ++++- public/style/music-gateway.css | 6 +- public/style/music.css | 149 +++++++++----------- views/index.html | 8 +- 9 files changed, 355 insertions(+), 315 deletions(-) create mode 100644 public/script/index.js diff --git a/public/script/config.js b/public/script/config.js index b3dd135..2bb33a6 100644 --- a/public/script/config.js +++ b/public/script/config.js @@ -1,42 +1,33 @@ -function toggle_config_setting(config, name) { - if (config[name]) { - delete config[name]; - update_config(config); - return true; - } - config[name] = true; - update_config(config); - return true; -} +const DEFAULT_CONFIG = { + crt: false +}; +const config = (() => { + let saved = localStorage.getItem("config"); + if (saved) { + const config = JSON.parse(saved); + setCRT(config.crt || DEFAULT_CONFIG.crt); + return config; + } -function set_config_setting(config, name, value) { - config[name] = value; - update_config(config); - return true; -} + localStorage.setItem("config", JSON.stringify(DEFAULT_CONFIG)); + return DEFAULT_CONFIG; +})(); -function clear_config_setting(config, name) { - if (!config[name]) return false; - delete config[name]; - update_config(config); - return true; -} - -function update_config(config) { - localStorage.setItem("config", JSON.stringify(config)); -} - -const config = JSON.parse(localStorage.getItem("config")) || {}; -if (config) { - if (config.disable_crt) { - document.querySelector('div#overlay').setAttribute("hidden", true); - document.body.style.textShadow = "none"; - document.getElementById('toggle-crt').classList.add("disabled"); - } +function saveConfig() { + localStorage.setItem("config", JSON.stringify(config)); } document.getElementById("toggle-crt").addEventListener("click", () => { - toggle_config_setting(config, "disable_crt"); - document.querySelector('div#overlay').toggleAttribute("hidden"); - document.getElementById('toggle-crt').className = config.disable_crt ? "disabled" : ""; + config.crt = !config.crt; + setCRT(config.crt); + saveConfig(); }); + +function setCRT(/** @type boolean */ enabled) { + if (enabled) { + document.body.classList.add("crt"); + } else { + document.body.classList.remove("crt"); + } + document.getElementById('toggle-crt').className = enabled ? "" : "disabled"; +} diff --git a/public/script/index.js b/public/script/index.js new file mode 100644 index 0000000..512ed8f --- /dev/null +++ b/public/script/index.js @@ -0,0 +1,16 @@ +const hexPrimary = document.getElementById("hex-primary"); +const hexSecondary = document.getElementById("hex-secondary"); +const hexTertiary = document.getElementById("hex-tertiary"); + +function updateHexColours() { + const style = getComputedStyle(document.body); + hexPrimary.textContent = style.getPropertyValue('--primary'); + hexSecondary.textContent = style.getPropertyValue('--secondary'); + hexTertiary.textContent = style.getPropertyValue('--tertiary'); +} + +updateHexColours(); + +window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => { + updateHexColours(); +}); diff --git a/public/style/colours.css b/public/style/colours.css index e45d964..2bf607d 100644 --- a/public/style/colours.css +++ b/public/style/colours.css @@ -1,19 +1,34 @@ :root { - --primary: #b7fd49; - --secondary: #f8e05b; - --tertiary: #f788fe; - --links: #5eb2ff; + --background: #080808; + --on-background: #f0f0f0; + + --primary: #b7fd49; + --secondary: #f8e05b; + --tertiary: #f788fe; + --links: #5eb2ff; +} + +@media (prefers-color-scheme: light) { + :root { + --background: #ffffff; + --on-background: #101010; + + --primary: #6d9e23; + --secondary: #a5911e; + --tertiary: #a92cb1; + --links: #3ba1ff; + } } .col-primary { - color: var(--primary); + color: var(--primary); } .col-secondary { - color: var(--secondary); + color: var(--secondary); } .col-tertiary { - color: var(--tertiary); + color: var(--tertiary); } diff --git a/public/style/header.css b/public/style/header.css index 21b9109..48971b5 100644 --- a/public/style/header.css +++ b/public/style/header.css @@ -1,187 +1,189 @@ header { - position: fixed; - top: 0; - left: 0; - width: 100vw; - border-bottom: 1px solid #888; - background-color: #080808; - z-index: 1; + position: fixed; + top: 0; + left: 0; + width: 100vw; + border-bottom: 1px solid #8888; + background-color: var(--background); + z-index: 1; + + transition: color .2s, background-color .2s; } nav { - width: min(calc(100% - 4rem), 720px); - height: 3em; - margin: auto; - padding: 0 1em; - display: flex; - flex-direction: row; - gap: .8em; - align-items: center; + width: min(calc(100% - 4rem), 720px); + height: 3em; + margin: auto; + padding: 0 1em; + display: flex; + flex-direction: row; + gap: .8em; + align-items: center; } #header-home { - flex-grow: 1; - display: flex; - gap: .5em; - cursor: pointer; + flex-grow: 1; + display: flex; + gap: .5em; + cursor: pointer; } img#header-icon { - width: 2em; - height: 2em; - margin: .5em; - display: block; + width: 2em; + height: 2em; + margin: .5em; + display: block; } #header-text { - width: 11em; - display: flex; - flex-direction: column; - justify-content: center; - flex-grow: 1; + width: 11em; + display: flex; + flex-direction: column; + justify-content: center; + flex-grow: 1; } #header-text h1 { - margin: 0; - font-size: 1em; + margin: 0; + font-size: 1em; } #header-text h2 { - height: 1.2em; - line-height: 1.2em; - margin: 0; - font-size: .7em; - color: #bbb; + height: 1.2em; + line-height: 1.2em; + margin: 0; + font-size: .7em; + color: #bbb; } #header-links-toggle { - width: 3em; - height: 3em; - display: none; - justify-content: center; - align-items: center; - transition: background-color .2s; + width: 3em; + height: 3em; + display: none; + justify-content: center; + align-items: center; + transition: background-color .2s; } #header-links-toggle:hover { - background-color: #fff2; + background-color: #fff2; } header ul#header-links { - margin: 0; - padding: 0; - display: flex; - flex-direction: row; - gap: .5em; - align-items: center; + margin: 0; + padding: 0; + display: flex; + flex-direction: row; + gap: .5em; + align-items: center; } header ul li { - list-style: none; + list-style: none; } header ul li a, header ul li span { - padding: .4em .5em; - border: 1px solid var(--links); - color: var(--links); - border-radius: 2px; - background-color: transparent; - transition-property: color, border-color, background-color; - transition-duration: .2s; - animation-delay: 0s; - animation: list-item-fadein .2s forwards; - opacity: 0; - text-decoration: none; + padding: .4em .5em; + border: 1px solid var(--links); + color: var(--links); + border-radius: 2px; + background-color: transparent; + transition-property: color, border-color, background-color; + transition-duration: .2s; + animation-delay: 0s; + animation: list-item-fadein .2s forwards; + opacity: 0; + text-decoration: none; } header ul li span { - color: #aaa; - border-color: #aaa; - cursor: default; - text-decoration: none; + color: #aaa; + border-color: #aaa; + cursor: default; + text-decoration: none; } header ul li a:hover { - color: #eee; - border-color: #eee; - background-color: var(--links) !important; - text-decoration: none; + color: #eee; + border-color: #eee; + background-color: var(--links) !important; + text-decoration: none; } #toggle-crt a { - color: var(--primary); - border-color: var(--primary); - opacity: 1; + color: var(--primary); + border-color: var(--primary); + opacity: 1; } #toggle-crt a:hover { - color: #111; - background-color: var(--primary) !important; + color: #111; + background-color: var(--primary) !important; } #toggle-crt.disabled a { - opacity: .5 !important; + opacity: .5 !important; } @media screen and (max-width: 780px) { - header { - font-size: 14px; - } + header { + font-size: 14px; + } - nav { - width: calc(100vw - 2rem); - margin: 0; - } + nav { + width: calc(100vw - 2rem); + margin: 0; + } - div#header-text { - flex-grow: 1; - } + div#header-text { + flex-grow: 1; + } - a#header-links-toggle { - display: flex; - } + a#header-links-toggle { + display: flex; + } - header ul#header-links { - position: fixed; - left: 0; - top: 2.7rem; - width: calc(100vw - 2rem); - padding: 1rem; - flex-direction: column; - gap: 1rem; - border-bottom: 1px solid #888; - background: #080808; - display: none; - } + header ul#header-links { + position: fixed; + left: 0; + top: 2.7rem; + width: calc(100vw - 2rem); + padding: 1rem; + flex-direction: column; + gap: 1rem; + border-bottom: 1px solid #888; + background: #080808; + display: none; + } - header ul#header-links.open { - display: flex; - } + header ul#header-links.open { + display: flex; + } - ul#header-links li { - width: 100%; - } + ul#header-links li { + width: 100%; + } - ul#header-links li a, - ul#header-links li span { - margin: 0; - display: block; - font-size: 1em; - text-align: center; - } + ul#header-links li a, + ul#header-links li span { + margin: 0; + display: block; + font-size: 1em; + text-align: center; + } } @keyframes list-item-fadein { - from { - opacity: 1; - background: #fff8; - } + from { + opacity: 1; + background: #fff8; + } - to { - opacity: 1; - background: transparent; - } + to { + opacity: 1; + background: transparent; + } } diff --git a/public/style/index.css b/public/style/index.css index 6e04a37..363c381 100644 --- a/public/style/index.css +++ b/public/style/index.css @@ -1,43 +1,43 @@ main { - width: min(calc(100% - 4rem), 720px); - min-height: calc(100vh - 10.3rem); - margin: 0 auto 2rem auto; - padding-top: 4rem; + width: min(calc(100% - 4rem), 720px); + min-height: calc(100vh - 10.3rem); + margin: 0 auto 2rem auto; + padding-top: 4rem; } main h1 { - line-height: 3rem; - color: var(--primary); + line-height: 3rem; + color: var(--primary); } main h2 { - color: var(--secondary); + color: var(--secondary); } main h3 { - color: var(--tertiary); + color: var(--tertiary); } div#me_irl { - width: fit-content; - height: fit-content; - border: 2px solid white; + width: fit-content; + height: fit-content; + border: 2px solid white; } div#me_irl img { - display: block; + display: block; } div#me_irl::before { - content: ""; - position: absolute; - width: 104px; - height: 104px; - transform: translate(2px, 2px); - background-image: linear-gradient(to top right, - var(--primary), - var(--secondary)); - z-index: -1; + content: ""; + position: absolute; + width: 104px; + height: 104px; + transform: translate(2px, 2px); + background-image: linear-gradient(to top right, + var(--primary), + var(--secondary)); + z-index: -1; } h1, @@ -49,7 +49,7 @@ h6, p, small, blockquote { - transition: background-color 0.1s; + transition: background-color 0.1s; } h1 a, @@ -58,7 +58,7 @@ h3 a, h4 a, h5 a, h6 a { - color: inherit; + color: inherit; } h1 a:hover, @@ -67,7 +67,7 @@ h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover { - text-decoration: none; + text-decoration: none; } main h1:hover, @@ -79,72 +79,72 @@ main h6:hover, main p:hover, main small:hover, main blockquote:hover { - background-color: #fff1; + background-color: #fff1; } blockquote { - margin: 1rem 0; - padding: 0 2.5rem; + margin: 1rem 0; + padding: 0 2.5rem; } hr { - text-align: center; - line-height: 0px; - border-width: 1px 0 0 0; - border-color: #888f; - margin: 1.5em 0; - overflow: visible; + text-align: center; + line-height: 0px; + border-width: 1px 0 0 0; + border-color: #888f; + margin: 1.5em 0; + overflow: visible; } ul.links { - display: flex; - gap: 1em .5em; - flex-wrap: wrap; + display: flex; + gap: 1em .5em; + flex-wrap: wrap; } ul.links li { - list-style: none; + list-style: none; } ul.links li a { - padding: .4em .5em; - border: 1px solid var(--links); - color: var(--links); - border-radius: 2px; - background-color: transparent; - transition-property: color, border-color, background-color; - transition-duration: .2s; - animation-delay: 0s; - animation: list-item-fadein .2s forwards; - opacity: 0; + padding: .4em .5em; + border: 1px solid var(--links); + color: var(--links); + border-radius: 2px; + background-color: transparent; + transition-property: color, border-color, background-color; + transition-duration: .2s; + animation-delay: 0s; + animation: list-item-fadein .2s forwards; + opacity: 0; } ul.links li a:hover { - color: #eee; - border-color: #eee; - background-color: var(--links) !important; - text-decoration: none; - box-shadow: 0 0 1em var(--links); + color: #eee; + border-color: #eee; + background-color: var(--links) !important; + text-decoration: none; + box-shadow: 0 0 1em var(--links); } div#web-buttons { - margin: 2rem 0; + margin: 2rem 0; } #web-buttons a { - text-decoration: none; + text-decoration: none; } #web-buttons img { - image-rendering: auto; - image-rendering: crisp-edges; - image-rendering: pixelated; + image-rendering: auto; + image-rendering: crisp-edges; + image-rendering: pixelated; } #web-buttons img:hover { - margin: -1px; - border: 1px solid #eee; - transform: translate(-2px, -2px); - box-shadow: 1px 1px 0 #eee, 2px 2px 0 #eee; + margin: -1px; + border: 1px solid #eee; + transform: translate(-2px, -2px); + box-shadow: 1px 1px 0 #eee, 2px 2px 0 #eee; } diff --git a/public/style/main.css b/public/style/main.css index 1e71673..f7f2131 100644 --- a/public/style/main.css +++ b/public/style/main.css @@ -14,15 +14,17 @@ body { margin: 0; padding: 0; - background: #080808; - color: #eee; + background: var(--background); + color: var(--on-background); font-family: "Monaspace Argon", monospace; font-size: 18px; - text-shadow: 0 0 3em; scroll-behavior: smooth; + + transition: color .2s, background-color .2s; } -main { +body.crt #overlay { + display: block; } a { @@ -118,6 +120,7 @@ a#backtotop:hover { left: 0; width: 100vw; height: 100vh; + display: none; background-image: linear-gradient(180deg, rgba(0,0,0,0) 15%, rgb(0, 0, 0) 40%, rgb(0, 0, 0) 60%, rgba(0,0,0,0) 85%); background-size: 100vw .2em; background-repeat: repeat; @@ -136,3 +139,27 @@ a#backtotop:hover { } } + +@media (prefers-color-scheme: light) { + a.link-button:hover { + box-shadow: none; + } + + @keyframes list-item-fadein { + from { + opacity: 1; + background: var(--links); + } + + to { + opacity: 1; + background: transparent; + } + } +} + +@media (prefers-color-scheme: dark) { + body.crt { + text-shadow: 0 0 3em; + } +} diff --git a/public/style/music-gateway.css b/public/style/music-gateway.css index 6790828..0bb7232 100644 --- a/public/style/music-gateway.css +++ b/public/style/music-gateway.css @@ -17,6 +17,10 @@ body { font-family: "Monaspace Argon", monospace; } +header { + background-color: #111; +} + #background { position: fixed; top: 0; @@ -258,7 +262,7 @@ div#info p { #title, #artist { - text-shadow: 0 .05em 2px #0004 + text-shadow: 0 .05em 2px #0004; } #type { diff --git a/public/style/music.css b/public/style/music.css index 9700526..4973e44 100644 --- a/public/style/music.css +++ b/public/style/music.css @@ -1,146 +1,129 @@ main { - width: min(calc(100% - 4rem), 720px); - min-height: calc(100vh - 10.3rem); - margin: 0 auto 2rem auto; - padding-top: 4rem; + width: min(calc(100% - 4rem), 720px); + min-height: calc(100vh - 10.3rem); + margin: 0 auto 2rem auto; + padding-top: 4rem; } main nav { - margin: -1rem .5rem 1rem .5rem; + margin: -1rem .5rem 1rem .5rem; } div.music { - margin-bottom: 1rem; - padding: 1.5rem; - display: flex; - flex-direction: row; - gap: 1.5em; - border: 1px solid #222; - border-radius: 4px; - background-color: #ffffff08; - transition: background-color .1s; - text-decoration: none; - cursor: pointer; + margin-bottom: 1rem; + padding: 1.5rem; + display: flex; + flex-direction: row; + gap: 1.5em; + border: 1px solid #8882; + border-radius: 4px; + background-color: #ffffff08; + transition: background-color .1s; + text-decoration: none; + cursor: pointer; } div.music:hover { - background-color: #fff1; + background-color: #fff1; } div.music a { - text-decoration: none; + text-decoration: none; } .music h1:hover, .music h2:hover, .music h3:hover { - background: initial; + background: initial; } .music-artwork img { - border: 1px solid #888; + border: 1px solid #8888; } .music-title { - margin: 0; - color: #eee; - font-size: 1.6em; - line-height: 1.6em; + margin: 0; + color: var(--on-background); + font-size: 1.6em; + line-height: 1.6em; +} +.music-title a { + color: inherit; + transition: color .2s; } .music-year { - color: #888; + color: #888; } .music-artist { - margin: -.5rem 0 0 0; - font-size: 1em; - color: #aaa; + margin: -.5rem 0 0 0; + font-size: 1em; + color: #aaa; } h3[class^=music-type] { - margin: 0 0 1rem 0; - font-size: .8em; - color: #eee; + margin: 0 0 1rem 0; + font-size: .8em; + color: #eee; + transition: color .2s; } h3.music-type-single { - color: var(--tertiary); + color: var(--tertiary); } h3.music-type-compilation { - color: var(--secondary); + color: var(--secondary); } h3.music-type-album { - color: var(--primary); + color: var(--primary); } h3.music-type-upcoming { - color: #f47070; + color: #f47070; } .music-links { - width: fit-content; - margin: .5em 0; - padding: 0; - display: flex; - gap: .5rem; - flex-wrap: wrap; - line-height: 1.7em; - justify-content: center; + width: fit-content; + margin: .5em 0; + padding: 0; + display: flex; + gap: .5rem; + flex-wrap: wrap; + line-height: 1.7em; + justify-content: center; } .music-links li { - list-style: none; + list-style: none; } -/* -.music-links li a { - padding: .2em .5em; - border: 1px solid #65b4fd; - color: #65b4fd; - border-radius: 2px; - background-color: transparent; - transition-property: color, border-color, background-color; - transition-duration: .2s; - animation: list-item-fadein .2s forwards; - animation-delay: 0s; - opacity: 0; -} - -.music-links li a:hover { - color: #eee; - border-color: #eee; - background-color: var(--links) !important; - text-decoration: none; -} -*/ - h2.question { - margin: 1rem 0; - padding: 1rem 1.5rem; - border-radius: 4px; - cursor: pointer; + margin: 1rem 0; + padding: 1rem 1.5rem; + border-radius: 4px; + cursor: pointer; } div.answer { - margin: -1rem 0 1rem 0; - padding: .5em 1.5em; - border-radius: 4px; + margin: -1rem 0 1rem 0; + padding: .5em 1.5em; + border-radius: 4px; } @media screen and (max-width: 740px) { - div.music { - flex-direction: column; - } + div.music { + flex-direction: column; + } - .music-artwork, - .music-details { - text-align: center; - align-items: center; - display: flex; - flex-direction: column; - } + .music-artwork, + .music-details { + text-align: center; + align-items: center; + display: flex; + flex-direction: column; + } } diff --git a/views/index.html b/views/index.html index 6a598c9..636c369 100644 --- a/views/index.html +++ b/views/index.html @@ -16,6 +16,8 @@ + + {{end}} {{define "content"}} @@ -66,9 +68,9 @@ my colours 🌈