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;
|
||||
}
|
||||
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";
|
||||
}
|
||||
|
|
|
|||
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,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);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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