music page!!! 🎶
This commit is contained in:
parent
a5ea652f6b
commit
3650f026a2
GPG key ID:
CF99829C92678188
|
|
@ -11,8 +11,11 @@ server {
|
|||
|
||||
client_max_body_size 0;
|
||||
|
||||
add_header Cache-Control "max-age=604800";
|
||||
|
||||
location / {
|
||||
try_files $uri $uri/ $uri.html =404;
|
||||
rewrite ^/music/(.*)$ https://mellodoot.com/music/$1 last;
|
||||
}
|
||||
|
||||
if ($scheme != "https") {
|
||||
|
|
|
|||
BIN
public/audio/transmission20231013.wav
Normal file
BIN
public/audio/transmission20231013.wav
Normal file
Binary file not shown.
|
|
@ -9,6 +9,8 @@
|
|||
<title>ari melody 💫</title>
|
||||
<link rel="shortcut icon" href="img/favicon.png" type="image/x-icon">
|
||||
|
||||
<meta name="description" content="home to your local SPACEGIRL 💫">
|
||||
|
||||
<meta property="og:title" content="ari melody">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="www.arimelody.me">
|
||||
|
|
@ -24,7 +26,7 @@
|
|||
<body>
|
||||
<header>
|
||||
<div id="header">
|
||||
<img src="img/favicon.png" id="header-icon" width="100" height="100">
|
||||
<img src="img/favicon.png" id="header-icon" width="100" height="100" alt="">
|
||||
<div id="header-text">
|
||||
<h1>ari melody</h1>
|
||||
<h2>your local SPACEGIRL 💫</h2>
|
||||
|
|
@ -41,11 +43,11 @@
|
|||
</li>
|
||||
<li>
|
||||
<!-- coming later! -->
|
||||
<a class="inactive" title="coming later!">blog</a>
|
||||
<span title="coming later!">blog</span>
|
||||
</li>
|
||||
<li>
|
||||
<!-- coming later! -->
|
||||
<a class="inactive" title="coming later!">art</a>
|
||||
<span title="coming later!">art</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -78,7 +80,7 @@
|
|||
<p>
|
||||
if you're looking to support me financially, that's so cool of you!! if you like, you
|
||||
can buy
|
||||
one or more of my songs over on <a href="https://mellodoot.bandcamp.com" target="_blank">bandcamp</a>, so you can at least get something for your
|
||||
one or more of my songs over on <a href="https://arimelody.bandcamp.com" target="_blank">bandcamp</a>, so you can at least get something for your
|
||||
troubles. thank
|
||||
you very much either way!! 💕
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
<body>
|
||||
<header>
|
||||
<div id="header">
|
||||
<img src="/img/favicon.png" id="header-icon" width="100" height="100">
|
||||
<img src="img/favicon.png" id="header-icon" width="100" height="100" alt="">
|
||||
<div id="header-text">
|
||||
<h1>ari melody</h1>
|
||||
<h2>your local SPACEGIRL 💫</h2>
|
||||
|
|
@ -42,11 +42,11 @@
|
|||
</li>
|
||||
<li>
|
||||
<!-- coming later! -->
|
||||
<a class="inactive" title="coming later!">blog</a>
|
||||
<span title="coming later!">blog</span>
|
||||
</li>
|
||||
<li>
|
||||
<!-- coming later! -->
|
||||
<a class="inactive" title="coming later!">art</a>
|
||||
<span title="coming later!">art</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -57,7 +57,9 @@
|
|||
# my music
|
||||
</h1>
|
||||
|
||||
<p><a class="collapse-toggle">> "can i use your music in my content?"</a></p>
|
||||
<div id="music-container"></div>
|
||||
|
||||
<h2 id="usage" class="question">> "can i use your music in my content?"</h2>
|
||||
<div class="collapse">
|
||||
<p>
|
||||
<strong class="big">yes!</strong> well, in most cases...
|
||||
|
|
@ -72,7 +74,7 @@
|
|||
</p>
|
||||
<blockquote>
|
||||
music used: mellodoot - Dream<br>
|
||||
buy it here: <a href="https://arimelody.me/music/dream" target="_blank">https://arimelody.me/music/dream</a><br>
|
||||
buy it here: <a href="/music/dream">https://arimelody.me/music/dream</a><br>
|
||||
licensed under CC BY-SA 3.0.
|
||||
</blockquote>
|
||||
<p>
|
||||
|
|
@ -83,7 +85,7 @@
|
|||
<p>
|
||||
in the event the song you want to use is released under some other label, their usage rights
|
||||
will more than likely trump whatever i'd otherwise have in mind. i'll try to negotiate some
|
||||
nice terms, though! ;)
|
||||
nice terms, though! ;3
|
||||
</p>
|
||||
<p>
|
||||
i love the idea of other creators using my songs in their work, so if you do happen to use
|
||||
|
|
@ -93,40 +95,6 @@
|
|||
> <a href="mailto:ari@arimelody.me">ari@arimelody.me</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<article class="music">
|
||||
<div class="music-artwork">
|
||||
<img src="/img/musicart/dream.png" alt="Dream artwork" width=128>
|
||||
</div>
|
||||
<div class="music-details">
|
||||
<h1 class="music-title">Dream <span class="music-year">2022</span></h1>
|
||||
<h2 class="music-artist">mellodoot</h2>
|
||||
<ul class="music-links">
|
||||
<li><a href="#">buy</a></li>
|
||||
<li><a href="#">spotify</a></li>
|
||||
<li><a href="#">apple music</a></li>
|
||||
<li><a href="#">soundcloud</a></li>
|
||||
<li><a href="#">youtube</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="music">
|
||||
<div class="music-artwork">
|
||||
<img src="/img/musicart/gomyway.jpg" alt="Go My Way artwork" width=128>
|
||||
</div>
|
||||
<div class="music-details">
|
||||
<h1 class="music-title">Go My Way <span class="music-year">2021</span></h1>
|
||||
<h2 class="music-artist">mellodoot</h2>
|
||||
<ul class="music-links">
|
||||
<li><a href="#">buy</a></li>
|
||||
<li><a href="#">spotify</a></li>
|
||||
<li><a href="#">apple music</a></li>
|
||||
<li><a href="#">soundcloud</a></li>
|
||||
<li><a href="#">youtube</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</article>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
|
|
|
|||
293
public/music.json
Normal file
293
public/music.json
Normal file
|
|
@ -0,0 +1,293 @@
|
|||
[
|
||||
{
|
||||
"id": "dream",
|
||||
"title": "Dream",
|
||||
"type": "single",
|
||||
"year": 2022,
|
||||
"artists": [ "mellodoot" ],
|
||||
"artwork": "https://mellodoot.com/img/music_artwork/mellodoot_-_Dream.webp",
|
||||
"buylink": "https://arimelody.bandcamp.com/track/dream",
|
||||
"links": [
|
||||
{
|
||||
"title": "Spotify",
|
||||
"url": "https://open.spotify.com/album/5talRpqzjExP1w6j5LFIAh"
|
||||
},
|
||||
{
|
||||
"title": "Apple Music",
|
||||
"url": "https://music.apple.com/ie/album/dream-single/1650037132"
|
||||
},
|
||||
{
|
||||
"title": "Soundcloud",
|
||||
"url": "https://soundcloud.com/mellodoot/dream"
|
||||
},
|
||||
{
|
||||
"title": "YouTube",
|
||||
"url": "https://www.youtube.com/watch?v=nfFgtMuYAx8"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "gomyway",
|
||||
"title": "Go My Way",
|
||||
"type": "single",
|
||||
"year": 2021,
|
||||
"artists": [ "mellodoot" ],
|
||||
"artwork": "https://mellodoot.com/img/music_artwork/mellodoot_-_Go_My_Way.webp",
|
||||
"buylink": "https://arimelody.bandcamp.com/track/go-my-way",
|
||||
"links": [
|
||||
{
|
||||
"title": "Spotify",
|
||||
"url": "https://open.spotify.com/album/35WNtxK12IDHCUoXHDePGE"
|
||||
},
|
||||
{
|
||||
"title": "Apple Music",
|
||||
"url": "https://music.apple.com/ie/album/go-my-way-single/1547145699"
|
||||
},
|
||||
{
|
||||
"title": "Soundcloud",
|
||||
"url": "https://soundcloud.com/mellodoot/go-my-way"
|
||||
},
|
||||
{
|
||||
"title": "YouTube",
|
||||
"url": "https://www.youtube.com/watch?v=CNptNQdLkl0"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "rowboat",
|
||||
"title": "Rowboat",
|
||||
"type": "single",
|
||||
"year": 2020,
|
||||
"artists": [ "mellodoot" ],
|
||||
"artwork": "https://mellodoot.com/img/music_artwork/mellodoot_-_Rowboat.webp",
|
||||
"buylink": "https://arimelody.bandcamp.com/track/rowboat",
|
||||
"links": [
|
||||
{
|
||||
"title": "Spotify",
|
||||
"url": "https://open.spotify.com/album/7jyqJFVKaENCPm58v5O44Y"
|
||||
},
|
||||
{
|
||||
"title": "Apple Music",
|
||||
"url": "https://music.apple.com/ie/album/rowboat-single/1502608714"
|
||||
},
|
||||
{
|
||||
"title": "Soundcloud",
|
||||
"url": "https://soundcloud.com/mellodoot/rowboat"
|
||||
},
|
||||
{
|
||||
"title": "YouTube",
|
||||
"url": "https://www.youtube.com/watch?v=uOQyILDTzME"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "helloworld",
|
||||
"title": "Hello World",
|
||||
"type": "single",
|
||||
"year": 2019,
|
||||
"artists": [ "mellodoot" ],
|
||||
"artwork": "https://mellodoot.com/img/music_artwork/mellodoot_-_Hello_World.webp",
|
||||
"buylink": "https://arimelody.bandcamp.com/track/hello-world",
|
||||
"links": [
|
||||
{
|
||||
"title": "Spotify",
|
||||
"url": "https://open.spotify.com/album/3LbElPXD4dsDumttGBuYxx"
|
||||
},
|
||||
{
|
||||
"title": "Apple Music",
|
||||
"url": "https://music.apple.com/ie/album/hello-world-single/1491880155"
|
||||
},
|
||||
{
|
||||
"title": "Soundcloud",
|
||||
"url": "https://soundcloud.com/mellodoot/helloworld"
|
||||
},
|
||||
{
|
||||
"title": "YouTube",
|
||||
"url": "https://www.youtube.com/watch?v=CQhlRsl0Mjk"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "sine",
|
||||
"title": "Sine",
|
||||
"type": "single",
|
||||
"artists": [
|
||||
"zaire",
|
||||
"mellodoot"
|
||||
],
|
||||
"year": 2019,
|
||||
"artwork": "https://mellodoot.com/img/music_artwork/zaire_-_Sine_ft._mellodoot.webp",
|
||||
"links": [
|
||||
{
|
||||
"title": "Spotify",
|
||||
"url": "https://open.spotify.com/album/4WPuaJtTV7z86KubD9Rnmk"
|
||||
},
|
||||
{
|
||||
"title": "Apple Music",
|
||||
"url": "https://music.apple.com/us/album/sine-feat-mellodoot/1489163020"
|
||||
},
|
||||
{
|
||||
"title": "YouTube",
|
||||
"url": "https://www.youtube.com/watch?v=z1H1s6VRnyY"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "10",
|
||||
"title": "10",
|
||||
"type": "single",
|
||||
"year": 2019,
|
||||
"artists": [ "mellodoot" ],
|
||||
"artwork": "https://mellodoot.com/img/music_artwork/mellodoot_-_10.webp",
|
||||
"buylink": "https://arimelody.bandcamp.com/track/10",
|
||||
"links": [
|
||||
{
|
||||
"title": "Spotify",
|
||||
"url": "https://open.spotify.com/album/2x4gbACfDm99unaXpLXyj0"
|
||||
},
|
||||
{
|
||||
"title": "Apple Music",
|
||||
"url": "https://music.apple.com/ie/album/ten-single/1483193041"
|
||||
},
|
||||
{
|
||||
"title": "Soundcloud",
|
||||
"url": "https://soundcloud.com/mellodoot/ten"
|
||||
},
|
||||
{
|
||||
"title": "YouTube",
|
||||
"url": "https://www.youtube.com/watch?v=C7WP5L2BK4U"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "mad",
|
||||
"title": "MAD",
|
||||
"type": "single",
|
||||
"year": 2018,
|
||||
"artists": [ "mellodoot" ],
|
||||
"artwork": "https://mellodoot.com/img/music_artwork/mellodoot_-_MAD.webp",
|
||||
"buylink": "https://arimelody.bandcamp.com/track/mad",
|
||||
"links": [
|
||||
{
|
||||
"title": "Spotify",
|
||||
"url": "https://open.spotify.com/album/59nFXw1WNoRhXou7lXqBZd"
|
||||
},
|
||||
{
|
||||
"title": "Apple Music",
|
||||
"url": "https://music.apple.com/ie/album/mad/1441233120"
|
||||
},
|
||||
{
|
||||
"title": "Soundcloud",
|
||||
"url": "https://soundcloud.com/mellodoot/mad"
|
||||
},
|
||||
{
|
||||
"title": "YouTube",
|
||||
"url": "https://www.youtube.com/watch?v=OB-Pk6p6mfQ"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "welcomingparty",
|
||||
"title": "Welcoming Party",
|
||||
"type": "album",
|
||||
"year": 2018,
|
||||
"artists": [ "mellodoot" ],
|
||||
"artwork": "https://mellodoot.com/img/music_artwork/mellodoot_-_Welcoming_Party.webp",
|
||||
"buylink": "https://arimelody.bandcamp.com/album/welcoming-party",
|
||||
"links": [
|
||||
{
|
||||
"title": "Spotify",
|
||||
"url": "https://open.spotify.com/album/3EPa4HZpkISQVRAks64LfR"
|
||||
},
|
||||
{
|
||||
"title": "Apple Music",
|
||||
"url": "https://music.apple.com/ie/album/welcoming-party-ep/1441161424"
|
||||
},
|
||||
{
|
||||
"title": "Soundcloud",
|
||||
"url": "https://soundcloud.com/mellodoot/sets/welcoming-party"
|
||||
},
|
||||
{
|
||||
"title": "YouTube",
|
||||
"url": "https://www.youtube.com/playlist?list=PLBG_QJeOHrB5EeniiXBIlHpoQbD6CUJca"
|
||||
}
|
||||
],
|
||||
"tracks": [
|
||||
{
|
||||
"title": "Paradigm"
|
||||
},
|
||||
{
|
||||
"title": "Mitrio"
|
||||
},
|
||||
{
|
||||
"title": "Level One"
|
||||
},
|
||||
{
|
||||
"title": "Cubes"
|
||||
},
|
||||
{
|
||||
"title": "Aria"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "howtheyknow2018",
|
||||
"title": "How They Know (2018)",
|
||||
"type": "single",
|
||||
"year": 2018,
|
||||
"artists": [ "mellodoot" ],
|
||||
"artwork": "https://mellodoot.com/img/music_artwork/mellodoot_-_How_They_Know_2018.webp",
|
||||
"buylink": "https://arimelody.bandcamp.com/track/how-they-know-2018-remastered",
|
||||
"free": true,
|
||||
"links": [
|
||||
{
|
||||
"title": "Soundcloud",
|
||||
"url": "https://soundcloud.com/mellodoot/how-they-know-2018"
|
||||
},
|
||||
{
|
||||
"title": "YouTube",
|
||||
"url": "https://www.youtube.com/watch?v=mbAgSwCzyMw"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "howtheyknow",
|
||||
"title": "How They Know",
|
||||
"type": "single",
|
||||
"year": 2017,
|
||||
"artists": [ "mellodoot" ],
|
||||
"artwork": "https://mellodoot.com/img/music_artwork/mellodoot_-_How_They_Know.webp",
|
||||
"buylink": "https://arimelody.bandcamp.com/track/how-they-know",
|
||||
"free": true,
|
||||
"links": [
|
||||
{
|
||||
"title": "Soundcloud",
|
||||
"url": "https://soundcloud.com/mellodoot/how-they-know"
|
||||
},
|
||||
{
|
||||
"title": "YouTube",
|
||||
"url": "https://www.youtube.com/watch?v=q6lzKuG1Emo"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "traveller",
|
||||
"title": "Traveller",
|
||||
"type": "single",
|
||||
"year": 2017,
|
||||
"artists": [ "mellodoot" ],
|
||||
"artwork": "https://mellodoot.com/img/music_artwork/mellodoot_-_Traveller.webp",
|
||||
"buylink": "https://arimelody.bandcamp.com/track/traveller",
|
||||
"free": true,
|
||||
"links": [
|
||||
{
|
||||
"title": "Soundcloud",
|
||||
"url": "https://soundcloud.com/mellodoot/traveller"
|
||||
},
|
||||
{
|
||||
"title": "YouTube",
|
||||
"url": "https://www.youtube.com/watch?v=ZTO7IQZ-yXA"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
|
@ -9,6 +9,10 @@ document.addEventListener("DOMContentLoaded", () => {
|
|||
.forEach((e) => {
|
||||
fill_list(e);
|
||||
});
|
||||
setTimeout(() => {
|
||||
document.querySelector("footer").style.display = "none";
|
||||
document.querySelector("footer").style.display = null;
|
||||
}, 1000);
|
||||
});
|
||||
|
||||
function type_out(e) {
|
||||
|
|
|
|||
59
public/script/music.js
Normal file
59
public/script/music.js
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
function create_music_card(item) {
|
||||
var artist = "ari melody";
|
||||
if (item.artists) {
|
||||
artist = item.artists.join(", ");
|
||||
}
|
||||
let card = document.createElement('a');
|
||||
card.href = `/music/${item.id}`;
|
||||
card.classList.add("music");
|
||||
card.id = item.id;
|
||||
card.innerHTML =
|
||||
`<div class="music-artwork">
|
||||
<img src=${item.artwork || '/img/music_artwork/placeholder.jpg'} alt="${item.title} artwork" width=128>
|
||||
</div>
|
||||
<div class="music-details">
|
||||
<h1 class="music-title">${item.title}</h1>
|
||||
<h2 class="music-artist">${artist}</h2>
|
||||
<h3 class="music-type-${item.type}">${item.type}</h3>
|
||||
<ul class="music-links">
|
||||
${ item.links.map(link => {
|
||||
return `<li><a href="${link.url}">${link.title.toLowerCase()}</a></li>`
|
||||
}).join("") }
|
||||
</ul>
|
||||
</div>`;
|
||||
return card;
|
||||
}
|
||||
|
||||
document.querySelectorAll("h2.question").forEach(element => {
|
||||
element.onclick = (e) => {
|
||||
const url = `${window.location.protocol}//${window.location.host}${window.location.pathname}#${e.target.id}`;
|
||||
window.location = url;
|
||||
};
|
||||
});
|
||||
|
||||
document.querySelectorAll('blockquote').forEach(
|
||||
element => {
|
||||
element.onclick = (e) => {
|
||||
navigator.clipboard.writeText(e.target.innerText);
|
||||
console.log('copied quote contents to clipboard!\n\n' + e.target.innerText);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
fetch('/music.json')
|
||||
.then(res => {
|
||||
if (!res.ok) {
|
||||
throw new Error(`Failed to download music data! ${res.status}`);
|
||||
}
|
||||
return res.json();
|
||||
})
|
||||
.then(music => {
|
||||
let music_container = document.getElementById('music-container');
|
||||
for (index in music) {
|
||||
let item = music[index];
|
||||
let dom = create_music_card(item);
|
||||
music_container.append(dom);
|
||||
};
|
||||
});
|
||||
|
||||
|
||||
|
|
@ -2,16 +2,18 @@
|
|||
--primary: #b7fd49;
|
||||
--secondary: #f8e05b;
|
||||
--tertiary: #f788fe;
|
||||
--links: #5eb2ff;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #111;
|
||||
color: #eee;
|
||||
font-family: monospace;
|
||||
font-size: 18px;
|
||||
background: #111;
|
||||
color: #eee;
|
||||
font-family: monospace;
|
||||
font-size: 18px;
|
||||
text-shadow: 0 0 2em;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
header {
|
||||
|
|
@ -69,10 +71,11 @@ header ul li {
|
|||
list-style: none;
|
||||
}
|
||||
|
||||
header ul li a {
|
||||
header ul li a,
|
||||
header ul li span {
|
||||
padding: .2em .5em;
|
||||
border: 1px solid #65b4fd;
|
||||
color: #65b4fd;
|
||||
border: 1px solid var(--links);
|
||||
color: var(--links);
|
||||
border-radius: 2px;
|
||||
background-color: transparent;
|
||||
transition-property: color, border-color, background-color;
|
||||
|
|
@ -82,17 +85,17 @@ header ul li a {
|
|||
opacity: 0;
|
||||
}
|
||||
|
||||
header ul li a.inactive {
|
||||
header ul li span {
|
||||
color: #aaa;
|
||||
border-color: #aaa;
|
||||
cursor: default;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
header ul li a:not(.inactive):hover {
|
||||
header ul li a:hover {
|
||||
color: #eee;
|
||||
border-color: #eee;
|
||||
background-color: #65b4fd;
|
||||
background-color: var(--links);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
@ -116,7 +119,7 @@ main h3 {
|
|||
}
|
||||
|
||||
a {
|
||||
color: #65b4fd;
|
||||
color: var(--links);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
@ -177,7 +180,8 @@ h4,
|
|||
h5,
|
||||
h6,
|
||||
p,
|
||||
small {
|
||||
small,
|
||||
blockquote {
|
||||
transition: background-color 0.1s;
|
||||
}
|
||||
|
||||
|
|
@ -188,10 +192,17 @@ main h4:hover,
|
|||
main h5:hover,
|
||||
main h6:hover,
|
||||
main p:hover,
|
||||
main small:hover {
|
||||
main small:hover,
|
||||
main blockquote:hover {
|
||||
background-color: #fff2;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 1rem 0;
|
||||
padding: 0 2.5rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
hr {
|
||||
text-align: center;
|
||||
line-height: 0px;
|
||||
|
|
@ -213,8 +224,8 @@ ul.links li {
|
|||
|
||||
ul.links li a {
|
||||
padding: .2em .5em;
|
||||
border: 1px solid #65b4fd;
|
||||
color: #65b4fd;
|
||||
border: 1px solid var(--links);
|
||||
color: var(--links);
|
||||
border-radius: 2px;
|
||||
background-color: transparent;
|
||||
transition-property: color, border-color, background-color;
|
||||
|
|
@ -227,9 +238,9 @@ ul.links li a {
|
|||
ul.links li a:hover {
|
||||
color: #eee;
|
||||
border-color: #eee;
|
||||
background-color: #65b4fd;
|
||||
background-color: var(--links);
|
||||
text-decoration: none;
|
||||
box-shadow: 0 0 1em #65b4fd;
|
||||
box-shadow: 0 0 1em var(--links);
|
||||
}
|
||||
|
||||
@keyframes list-item-fadein {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
article.music {
|
||||
a.music {
|
||||
margin-bottom: 1rem;
|
||||
padding: 1.5rem;
|
||||
display: flex;
|
||||
|
|
@ -7,14 +7,16 @@ article.music {
|
|||
border-radius: 4px;
|
||||
background-color: #ffffff04;
|
||||
transition: background-color .1s;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
article.music:hover {
|
||||
a.music:hover {
|
||||
background-color: #fff1;
|
||||
}
|
||||
|
||||
.music h1:hover,
|
||||
.music h2:hover {
|
||||
.music h2:hover,
|
||||
.music h3:hover {
|
||||
background: initial;
|
||||
}
|
||||
|
||||
|
|
@ -37,6 +39,32 @@ article.music:hover {
|
|||
color: #aaa;
|
||||
}
|
||||
|
||||
h3[class^=music-type] {
|
||||
margin: 0 0 1rem 0;
|
||||
font-size: .8em;
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
h3.music-type-single {
|
||||
color: var(--tertiary);
|
||||
}
|
||||
|
||||
h3.music-type-ep {
|
||||
color: var(--secondary);
|
||||
}
|
||||
|
||||
h3.music-type-album {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
h3.music-type-comp {
|
||||
color: var(--secondary);
|
||||
}
|
||||
|
||||
h3.music-type-upcoming {
|
||||
color: #f47070;
|
||||
}
|
||||
|
||||
.music-links {
|
||||
margin: .5em 0;
|
||||
padding: 0;
|
||||
|
|
@ -70,8 +98,16 @@ article.music:hover {
|
|||
text-decoration: none;
|
||||
}
|
||||
|
||||
h2.question {
|
||||
margin: 1rem 0;
|
||||
padding: 1rem 1.5rem;
|
||||
background-color: #ffffff04;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.collapse {
|
||||
margin-bottom: 1em;
|
||||
margin: -1rem 0 1rem 0;
|
||||
padding: .5em 1.5em;
|
||||
background-color: #ffffff04;
|
||||
border-radius: 4px;
|
||||
|
|
|
|||
Reference in a new issue