light theme! crt now disabled by default
This commit is contained in:
parent
cdcc7466e5
commit
c6afc274c2
GPG key ID:
CF99829C92678188
|
|
@ -1,42 +1,33 @@
|
|||
function toggle_config_setting(config, name) {
|
||||
if (config[name]) {
|
||||
delete config[name];
|
||||
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;
|
||||
}
|
||||
config[name] = true;
|
||||
update_config(config);
|
||||
return true;
|
||||
}
|
||||
|
||||
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) {
|
||||
function saveConfig() {
|
||||
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");
|
||||
}
|
||||
}
|
||||
|
||||
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";
|
||||
}
|
||||
|
|
|
|||
16
public/script/index.js
Normal file
16
public/script/index.js
Normal file
|
|
@ -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();
|
||||
});
|
||||
|
|
@ -1,10 +1,25 @@
|
|||
:root {
|
||||
--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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,9 +3,11 @@ header {
|
|||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
border-bottom: 1px solid #888;
|
||||
background-color: #080808;
|
||||
border-bottom: 1px solid #8888;
|
||||
background-color: var(--background);
|
||||
z-index: 1;
|
||||
|
||||
transition: color .2s, background-color .2s;
|
||||
}
|
||||
|
||||
nav {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ div.music {
|
|||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 1.5em;
|
||||
border: 1px solid #222;
|
||||
border: 1px solid #8882;
|
||||
border-radius: 4px;
|
||||
background-color: #ffffff08;
|
||||
transition: background-color .1s;
|
||||
|
|
@ -38,15 +38,19 @@ div.music a {
|
|||
}
|
||||
|
||||
.music-artwork img {
|
||||
border: 1px solid #888;
|
||||
border: 1px solid #8888;
|
||||
}
|
||||
|
||||
.music-title {
|
||||
margin: 0;
|
||||
color: #eee;
|
||||
color: var(--on-background);
|
||||
font-size: 1.6em;
|
||||
line-height: 1.6em;
|
||||
}
|
||||
.music-title a {
|
||||
color: inherit;
|
||||
transition: color .2s;
|
||||
}
|
||||
|
||||
.music-year {
|
||||
color: #888;
|
||||
|
|
@ -62,6 +66,7 @@ h3[class^=music-type] {
|
|||
margin: 0 0 1rem 0;
|
||||
font-size: .8em;
|
||||
color: #eee;
|
||||
transition: color .2s;
|
||||
}
|
||||
|
||||
h3.music-type-single {
|
||||
|
|
@ -95,28 +100,6 @@ h3.music-type-upcoming {
|
|||
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;
|
||||
|
|
|
|||
|
|
@ -16,6 +16,8 @@
|
|||
|
||||
<link rel="me" href="https://ice.arimelody.me/@ari">
|
||||
<link rel="me" href="https://wetdry.world/@ari">
|
||||
|
||||
<script type="module" src="/script/index.js" defer> </script>
|
||||
{{end}}
|
||||
|
||||
{{define "content"}}
|
||||
|
|
@ -66,9 +68,9 @@
|
|||
<strong>my colours 🌈</strong>
|
||||
</p>
|
||||
<ul>
|
||||
<li>primary: <span class="col-primary">#b7fd49</span></li>
|
||||
<li>secondary: <span class="col-secondary">#f8e05b</span></li>
|
||||
<li>tertiary: <span class="col-tertiary">#f788fe</span></li>
|
||||
<li>primary: <span class="col-primary" id="hex-primary">#b7fd49</span></li>
|
||||
<li>secondary: <span class="col-secondary" id="hex-secondary">#f8e05b</span></li>
|
||||
<li>tertiary: <span class="col-tertiary" id="hex-tertiary">#f788fe</span></li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
|
|
|
|||
Loading…
Reference in a new issue