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;
|
client_max_body_size 0;
|
||||||
|
|
||||||
|
add_header Cache-Control "max-age=604800";
|
||||||
|
|
||||||
location / {
|
location / {
|
||||||
try_files $uri $uri/ $uri.html =404;
|
try_files $uri $uri/ $uri.html =404;
|
||||||
|
rewrite ^/music/(.*)$ https://mellodoot.com/music/$1 last;
|
||||||
}
|
}
|
||||||
|
|
||||||
if ($scheme != "https") {
|
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>
|
<title>ari melody 💫</title>
|
||||||
<link rel="shortcut icon" href="img/favicon.png" type="image/x-icon">
|
<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:title" content="ari melody">
|
||||||
<meta property="og:type" content="website">
|
<meta property="og:type" content="website">
|
||||||
<meta property="og:url" content="www.arimelody.me">
|
<meta property="og:url" content="www.arimelody.me">
|
||||||
|
|
@ -24,7 +26,7 @@
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<div id="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">
|
<div id="header-text">
|
||||||
<h1>ari melody</h1>
|
<h1>ari melody</h1>
|
||||||
<h2>your local SPACEGIRL 💫</h2>
|
<h2>your local SPACEGIRL 💫</h2>
|
||||||
|
|
@ -41,11 +43,11 @@
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<!-- coming later! -->
|
<!-- coming later! -->
|
||||||
<a class="inactive" title="coming later!">blog</a>
|
<span title="coming later!">blog</span>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<!-- coming later! -->
|
<!-- coming later! -->
|
||||||
<a class="inactive" title="coming later!">art</a>
|
<span title="coming later!">art</span>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -78,7 +80,7 @@
|
||||||
<p>
|
<p>
|
||||||
if you're looking to support me financially, that's so cool of you!! if you like, you
|
if you're looking to support me financially, that's so cool of you!! if you like, you
|
||||||
can buy
|
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
|
troubles. thank
|
||||||
you very much either way!! 💕
|
you very much either way!! 💕
|
||||||
</p>
|
</p>
|
||||||
|
|
|
||||||
|
|
@ -25,7 +25,7 @@
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<div id="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">
|
<div id="header-text">
|
||||||
<h1>ari melody</h1>
|
<h1>ari melody</h1>
|
||||||
<h2>your local SPACEGIRL 💫</h2>
|
<h2>your local SPACEGIRL 💫</h2>
|
||||||
|
|
@ -42,11 +42,11 @@
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<!-- coming later! -->
|
<!-- coming later! -->
|
||||||
<a class="inactive" title="coming later!">blog</a>
|
<span title="coming later!">blog</span>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<!-- coming later! -->
|
<!-- coming later! -->
|
||||||
<a class="inactive" title="coming later!">art</a>
|
<span title="coming later!">art</span>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -57,7 +57,9 @@
|
||||||
# my music
|
# my music
|
||||||
</h1>
|
</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">
|
<div class="collapse">
|
||||||
<p>
|
<p>
|
||||||
<strong class="big">yes!</strong> well, in most cases...
|
<strong class="big">yes!</strong> well, in most cases...
|
||||||
|
|
@ -72,7 +74,7 @@
|
||||||
</p>
|
</p>
|
||||||
<blockquote>
|
<blockquote>
|
||||||
music used: mellodoot - Dream<br>
|
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.
|
licensed under CC BY-SA 3.0.
|
||||||
</blockquote>
|
</blockquote>
|
||||||
<p>
|
<p>
|
||||||
|
|
@ -83,7 +85,7 @@
|
||||||
<p>
|
<p>
|
||||||
in the event the song you want to use is released under some other label, their usage rights
|
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
|
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>
|
||||||
<p>
|
<p>
|
||||||
i love the idea of other creators using my songs in their work, so if you do happen to use
|
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>
|
> <a href="mailto:ari@arimelody.me">ari@arimelody.me</a>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</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>
|
</main>
|
||||||
|
|
||||||
<footer>
|
<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) => {
|
.forEach((e) => {
|
||||||
fill_list(e);
|
fill_list(e);
|
||||||
});
|
});
|
||||||
|
setTimeout(() => {
|
||||||
|
document.querySelector("footer").style.display = "none";
|
||||||
|
document.querySelector("footer").style.display = null;
|
||||||
|
}, 1000);
|
||||||
});
|
});
|
||||||
|
|
||||||
function type_out(e) {
|
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,6 +2,7 @@
|
||||||
--primary: #b7fd49;
|
--primary: #b7fd49;
|
||||||
--secondary: #f8e05b;
|
--secondary: #f8e05b;
|
||||||
--tertiary: #f788fe;
|
--tertiary: #f788fe;
|
||||||
|
--links: #5eb2ff;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
|
|
@ -12,6 +13,7 @@ body {
|
||||||
font-family: monospace;
|
font-family: monospace;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
text-shadow: 0 0 2em;
|
text-shadow: 0 0 2em;
|
||||||
|
scroll-behavior: smooth;
|
||||||
}
|
}
|
||||||
|
|
||||||
header {
|
header {
|
||||||
|
|
@ -69,10 +71,11 @@ header ul li {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
header ul li a {
|
header ul li a,
|
||||||
|
header ul li span {
|
||||||
padding: .2em .5em;
|
padding: .2em .5em;
|
||||||
border: 1px solid #65b4fd;
|
border: 1px solid var(--links);
|
||||||
color: #65b4fd;
|
color: var(--links);
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
transition-property: color, border-color, background-color;
|
transition-property: color, border-color, background-color;
|
||||||
|
|
@ -82,17 +85,17 @@ header ul li a {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
header ul li a.inactive {
|
header ul li span {
|
||||||
color: #aaa;
|
color: #aaa;
|
||||||
border-color: #aaa;
|
border-color: #aaa;
|
||||||
cursor: default;
|
cursor: default;
|
||||||
text-decoration: none !important;
|
text-decoration: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
header ul li a:not(.inactive):hover {
|
header ul li a:hover {
|
||||||
color: #eee;
|
color: #eee;
|
||||||
border-color: #eee;
|
border-color: #eee;
|
||||||
background-color: #65b4fd;
|
background-color: var(--links);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -116,7 +119,7 @@ main h3 {
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: #65b4fd;
|
color: var(--links);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -177,7 +180,8 @@ h4,
|
||||||
h5,
|
h5,
|
||||||
h6,
|
h6,
|
||||||
p,
|
p,
|
||||||
small {
|
small,
|
||||||
|
blockquote {
|
||||||
transition: background-color 0.1s;
|
transition: background-color 0.1s;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -188,10 +192,17 @@ main h4:hover,
|
||||||
main h5:hover,
|
main h5:hover,
|
||||||
main h6:hover,
|
main h6:hover,
|
||||||
main p:hover,
|
main p:hover,
|
||||||
main small:hover {
|
main small:hover,
|
||||||
|
main blockquote:hover {
|
||||||
background-color: #fff2;
|
background-color: #fff2;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
blockquote {
|
||||||
|
margin: 1rem 0;
|
||||||
|
padding: 0 2.5rem;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
hr {
|
hr {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 0px;
|
line-height: 0px;
|
||||||
|
|
@ -213,8 +224,8 @@ ul.links li {
|
||||||
|
|
||||||
ul.links li a {
|
ul.links li a {
|
||||||
padding: .2em .5em;
|
padding: .2em .5em;
|
||||||
border: 1px solid #65b4fd;
|
border: 1px solid var(--links);
|
||||||
color: #65b4fd;
|
color: var(--links);
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
transition-property: color, border-color, background-color;
|
transition-property: color, border-color, background-color;
|
||||||
|
|
@ -227,9 +238,9 @@ ul.links li a {
|
||||||
ul.links li a:hover {
|
ul.links li a:hover {
|
||||||
color: #eee;
|
color: #eee;
|
||||||
border-color: #eee;
|
border-color: #eee;
|
||||||
background-color: #65b4fd;
|
background-color: var(--links);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
box-shadow: 0 0 1em #65b4fd;
|
box-shadow: 0 0 1em var(--links);
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes list-item-fadein {
|
@keyframes list-item-fadein {
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
article.music {
|
a.music {
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
padding: 1.5rem;
|
padding: 1.5rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -7,14 +7,16 @@ article.music {
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
background-color: #ffffff04;
|
background-color: #ffffff04;
|
||||||
transition: background-color .1s;
|
transition: background-color .1s;
|
||||||
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
article.music:hover {
|
a.music:hover {
|
||||||
background-color: #fff1;
|
background-color: #fff1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.music h1:hover,
|
.music h1:hover,
|
||||||
.music h2:hover {
|
.music h2:hover,
|
||||||
|
.music h3:hover {
|
||||||
background: initial;
|
background: initial;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -37,6 +39,32 @@ article.music:hover {
|
||||||
color: #aaa;
|
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 {
|
.music-links {
|
||||||
margin: .5em 0;
|
margin: .5em 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
@ -70,8 +98,16 @@ article.music:hover {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
h2.question {
|
||||||
|
margin: 1rem 0;
|
||||||
|
padding: 1rem 1.5rem;
|
||||||
|
background-color: #ffffff04;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
.collapse {
|
.collapse {
|
||||||
margin-bottom: 1em;
|
margin: -1rem 0 1rem 0;
|
||||||
padding: .5em 1.5em;
|
padding: .5em 1.5em;
|
||||||
background-color: #ffffff04;
|
background-color: #ffffff04;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
|
|
|
||||||
Reference in a new issue