diff --git a/public/script/config.js b/public/script/config.js
index 2bb33a6..b3dd135 100644
--- a/public/script/config.js
+++ b/public/script/config.js
@@ -1,33 +1,42 @@
-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 toggle_config_setting(config, name) {
+ if (config[name]) {
+ delete config[name];
+ update_config(config);
+ return true;
+ }
+ config[name] = true;
+ update_config(config);
+ return true;
+}
- localStorage.setItem("config", JSON.stringify(DEFAULT_CONFIG));
- return DEFAULT_CONFIG;
-})();
+function set_config_setting(config, name, value) {
+ config[name] = value;
+ update_config(config);
+ return true;
+}
-function saveConfig() {
- localStorage.setItem("config", JSON.stringify(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");
+ }
}
document.getElementById("toggle-crt").addEventListener("click", () => {
- config.crt = !config.crt;
- setCRT(config.crt);
- saveConfig();
+ toggle_config_setting(config, "disable_crt");
+ document.querySelector('div#overlay').toggleAttribute("hidden");
+ document.getElementById('toggle-crt').className = config.disable_crt ? "disabled" : "";
});
-
-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
deleted file mode 100644
index 512ed8f..0000000
--- a/public/script/index.js
+++ /dev/null
@@ -1,16 +0,0 @@
-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 2bf607d..e45d964 100644
--- a/public/style/colours.css
+++ b/public/style/colours.css
@@ -1,34 +1,19 @@
: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;
- }
+ --primary: #b7fd49;
+ --secondary: #f8e05b;
+ --tertiary: #f788fe;
+ --links: #5eb2ff;
}
.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 48971b5..21b9109 100644
--- a/public/style/header.css
+++ b/public/style/header.css
@@ -1,189 +1,187 @@
header {
- 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;
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100vw;
+ border-bottom: 1px solid #888;
+ background-color: #080808;
+ z-index: 1;
}
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 363c381..6e04a37 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 f7f2131..1e71673 100644
--- a/public/style/main.css
+++ b/public/style/main.css
@@ -14,17 +14,15 @@
body {
margin: 0;
padding: 0;
- background: var(--background);
- color: var(--on-background);
+ background: #080808;
+ color: #eee;
font-family: "Monaspace Argon", monospace;
font-size: 18px;
+ text-shadow: 0 0 3em;
scroll-behavior: smooth;
-
- transition: color .2s, background-color .2s;
}
-body.crt #overlay {
- display: block;
+main {
}
a {
@@ -120,7 +118,6 @@ 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;
@@ -139,27 +136,3 @@ 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 0bb7232..6790828 100644
--- a/public/style/music-gateway.css
+++ b/public/style/music-gateway.css
@@ -17,10 +17,6 @@ body {
font-family: "Monaspace Argon", monospace;
}
-header {
- background-color: #111;
-}
-
#background {
position: fixed;
top: 0;
@@ -262,7 +258,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 4973e44..9700526 100644
--- a/public/style/music.css
+++ b/public/style/music.css
@@ -1,129 +1,146 @@
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 #8882;
- 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 #222;
+ 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 #8888;
+ border: 1px solid #888;
}
.music-title {
- margin: 0;
- color: var(--on-background);
- font-size: 1.6em;
- line-height: 1.6em;
-}
-.music-title a {
- color: inherit;
- transition: color .2s;
+ margin: 0;
+ color: #eee;
+ font-size: 1.6em;
+ line-height: 1.6em;
}
.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;
- transition: color .2s;
+ margin: 0 0 1rem 0;
+ font-size: .8em;
+ color: #eee;
}
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 636c369..6a598c9 100644
--- a/views/index.html
+++ b/views/index.html
@@ -16,8 +16,6 @@
-
-
{{end}}
{{define "content"}}
@@ -68,9 +66,9 @@
my colours 🌈
- - primary: #b7fd49
- - secondary: #f8e05b
- - tertiary: #f788fe
+ - primary: #b7fd49
+ - secondary: #f8e05b
+ - tertiary: #f788fe