basic bones for music page- needs db and custom server!
This commit is contained in:
parent
c6442e3333
commit
a5ea652f6b
GPG key ID:
CF99829C92678188
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -1,3 +1,4 @@
|
||||||
certs/
|
certs/
|
||||||
|
public/img/musicart/*
|
||||||
docker-compose*.yml
|
docker-compose*.yml
|
||||||
!docker-compose-example.yml
|
!docker-compose-example.yml
|
||||||
|
|
|
||||||
27
nginx.conf
27
nginx.conf
|
|
@ -1,20 +1,21 @@
|
||||||
server {
|
server {
|
||||||
listen 443 ssl;
|
listen 443 ssl;
|
||||||
server_name arimelody.me;
|
server_name arimelody.me;
|
||||||
|
|
||||||
ssl_protocols TLSv1.2 TLSv1.3;
|
ssl_protocols TLSv1.2 TLSv1.3;
|
||||||
|
|
||||||
ssl_certificate /etc/nginx/ssl/arimelody.crt;
|
ssl_certificate /etc/nginx/ssl/arimelody.crt;
|
||||||
ssl_certificate_key /etc/nginx/ssl/arimelody.key;
|
ssl_certificate_key /etc/nginx/ssl/arimelody.key;
|
||||||
|
|
||||||
root /usr/share/nginx/arimelody/;
|
root /usr/share/nginx/arimelody/;
|
||||||
|
|
||||||
client_max_body_size 0;
|
client_max_body_size 0;
|
||||||
|
|
||||||
location / {
|
location / {
|
||||||
}
|
try_files $uri $uri/ $uri.html =404;
|
||||||
|
}
|
||||||
|
|
||||||
if ($scheme != "https") {
|
if ($scheme != "https") {
|
||||||
return 301 https://$server_name$request_uri;
|
return 301 https://$server_name$request_uri;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
270
public/data/music.xml
Normal file
270
public/data/music.xml
Normal file
|
|
@ -0,0 +1,270 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" ?>
|
||||||
|
<music>
|
||||||
|
|
||||||
|
<row>
|
||||||
|
<id>dream</id>
|
||||||
|
<title>Dream</title>
|
||||||
|
<type>single</type>
|
||||||
|
<year>2022</year>
|
||||||
|
<artwork>https://mellodoot.com/img/music_artwork/mellodoot_-_Dream.webp</artwork>
|
||||||
|
<buylink>https://mellodoot.bandcamp.com/track/dream</buylink>
|
||||||
|
<links>
|
||||||
|
<title>Spotify</title>
|
||||||
|
<url>https://open.spotify.com/album/5talRpqzjExP1w6j5LFIAh</url>
|
||||||
|
</links>
|
||||||
|
<links>
|
||||||
|
<title>Apple Music</title>
|
||||||
|
<url>https://music.apple.com/ie/album/dream-single/1650037132</url>
|
||||||
|
</links>
|
||||||
|
<links>
|
||||||
|
<title>Soundcloud</title>
|
||||||
|
<url>https://soundcloud.com/mellodoot/dream</url>
|
||||||
|
</links>
|
||||||
|
<links>
|
||||||
|
<title>YouTube</title>
|
||||||
|
<url>https://www.youtube.com/watch?v=nfFgtMuYAx8</url>
|
||||||
|
</links>
|
||||||
|
</row>
|
||||||
|
|
||||||
|
<row>
|
||||||
|
<id>gomyway</id>
|
||||||
|
<title>Go My Way</title>
|
||||||
|
<type>single</type>
|
||||||
|
<year>2021</year>
|
||||||
|
<artwork>https://mellodoot.com/img/music_artwork/mellodoot_-_Go_My_Way.webp</artwork>
|
||||||
|
<buylink>https://mellodoot.bandcamp.com/track/go-my-way</buylink>
|
||||||
|
<links>
|
||||||
|
<title>Spotify</title>
|
||||||
|
<url>https://open.spotify.com/album/35WNtxK12IDHCUoXHDePGE</url>
|
||||||
|
</links>
|
||||||
|
<links>
|
||||||
|
<title>Apple Music</title>
|
||||||
|
<url>https://music.apple.com/ie/album/go-my-way-single/1547145699</url>
|
||||||
|
</links>
|
||||||
|
<links>
|
||||||
|
<title>Soundcloud</title>
|
||||||
|
<url>https://soundcloud.com/mellodoot/go-my-way</url>
|
||||||
|
</links>
|
||||||
|
<links>
|
||||||
|
<title>YouTube</title>
|
||||||
|
<url>https://www.youtube.com/watch?v=CNptNQdLkl0</url>
|
||||||
|
</links>
|
||||||
|
</row>
|
||||||
|
|
||||||
|
<row>
|
||||||
|
<id>rowboat</id>
|
||||||
|
<title>Rowboat</title>
|
||||||
|
<type>single</type>
|
||||||
|
<year>2020</year>
|
||||||
|
<artwork>https://mellodoot.com/img/music_artwork/mellodoot_-_Rowboat.webp</artwork>
|
||||||
|
<buylink>https://mellodoot.bandcamp.com/track/rowboat</buylink>
|
||||||
|
<links>
|
||||||
|
<title>Spotify</title>
|
||||||
|
<url>https://open.spotify.com/album/7jyqJFVKaENCPm58v5O44Y</url>
|
||||||
|
</links>
|
||||||
|
<links>
|
||||||
|
<title>Apple Music</title>
|
||||||
|
<url>https://music.apple.com/ie/album/rowboat-single/1502608714</url>
|
||||||
|
</links>
|
||||||
|
<links>
|
||||||
|
<title>Soundcloud</title>
|
||||||
|
<url>https://soundcloud.com/mellodoot/rowboat</url>
|
||||||
|
</links>
|
||||||
|
<links>
|
||||||
|
<title>YouTube</title>
|
||||||
|
<url>https://www.youtube.com/watch?v=uOQyILDTzME</url>
|
||||||
|
</links>
|
||||||
|
</row>
|
||||||
|
|
||||||
|
<row>
|
||||||
|
<id>helloworld</id>
|
||||||
|
<title>Hello World</title>
|
||||||
|
<type>single</type>
|
||||||
|
<year>2019</year>
|
||||||
|
<artwork>https://mellodoot.com/img/music_artwork/mellodoot_-_Hello_World.webp</artwork>
|
||||||
|
<buylink>https://mellodoot.bandcamp.com/track/hello-world</buylink>
|
||||||
|
<links>
|
||||||
|
<title>Spotify</title>
|
||||||
|
<url>https://open.spotify.com/album/3LbElPXD4dsDumttGBuYxx</url>
|
||||||
|
</links>
|
||||||
|
<links>
|
||||||
|
<title>Apple Music</title>
|
||||||
|
<url>https://music.apple.com/ie/album/hello-world-single/1491880155</url>
|
||||||
|
</links>
|
||||||
|
<links>
|
||||||
|
<title>Soundcloud</title>
|
||||||
|
<url>https://soundcloud.com/mellodoot/helloworld</url>
|
||||||
|
</links>
|
||||||
|
<links>
|
||||||
|
<title>YouTube</title>
|
||||||
|
<url>https://www.youtube.com/watch?v=CQhlRsl0Mjk</url>
|
||||||
|
</links>
|
||||||
|
</row>
|
||||||
|
|
||||||
|
<row>
|
||||||
|
<id>sine</id>
|
||||||
|
<title>Sine</title>
|
||||||
|
<type>single</type>
|
||||||
|
<artists>zaire</artists>
|
||||||
|
<artists>mellodoot</artists>
|
||||||
|
<year>2019</year>
|
||||||
|
<artwork>https://mellodoot.com/img/music_artwork/zaire_-_Sine_ft._mellodoot.webp</artwork>
|
||||||
|
<links>
|
||||||
|
<title>Spotify</title>
|
||||||
|
<url>https://open.spotify.com/album/4WPuaJtTV7z86KubD9Rnmk</url>
|
||||||
|
</links>
|
||||||
|
<links>
|
||||||
|
<title>Apple Music</title>
|
||||||
|
<url>https://music.apple.com/us/album/sine-feat-mellodoot/1489163020</url>
|
||||||
|
</links>
|
||||||
|
<links>
|
||||||
|
<title>YouTube</title>
|
||||||
|
<url>https://www.youtube.com/watch?v=z1H1s6VRnyY</url>
|
||||||
|
</links>
|
||||||
|
</row>
|
||||||
|
|
||||||
|
<row>
|
||||||
|
<id>10</id>
|
||||||
|
<title>10</title>
|
||||||
|
<type>single</type>
|
||||||
|
<year>2019</year>
|
||||||
|
<artwork>https://mellodoot.com/img/music_artwork/mellodoot_-_10.webp</artwork>
|
||||||
|
<buylink>https://mellodoot.bandcamp.com/track/10</buylink>
|
||||||
|
<links>
|
||||||
|
<title>Spotify</title>
|
||||||
|
<url>https://open.spotify.com/album/2x4gbACfDm99unaXpLXyj0</url>
|
||||||
|
</links>
|
||||||
|
<links>
|
||||||
|
<title>Apple Music</title>
|
||||||
|
<url>https://music.apple.com/ie/album/ten-single/1483193041</url>
|
||||||
|
</links>
|
||||||
|
<links>
|
||||||
|
<title>Soundcloud</title>
|
||||||
|
<url>https://soundcloud.com/mellodoot/ten</url>
|
||||||
|
</links>
|
||||||
|
<links>
|
||||||
|
<title>YouTube</title>
|
||||||
|
<url>https://www.youtube.com/watch?v=C7WP5L2BK4U</url>
|
||||||
|
</links>
|
||||||
|
</row>
|
||||||
|
|
||||||
|
<row>
|
||||||
|
<id>mad</id>
|
||||||
|
<title>MAD</title>
|
||||||
|
<type>single</type>
|
||||||
|
<year>2018</year>
|
||||||
|
<artwork>https://mellodoot.com/img/music_artwork/mellodoot_-_MAD.webp</artwork>
|
||||||
|
<buylink>https://mellodoot.bandcamp.com/track/mad</buylink>
|
||||||
|
<links>
|
||||||
|
<title>Spotify</title>
|
||||||
|
<url>https://open.spotify.com/album/59nFXw1WNoRhXou7lXqBZd</url>
|
||||||
|
</links>
|
||||||
|
<links>
|
||||||
|
<title>Apple Music</title>
|
||||||
|
<url>https://music.apple.com/ie/album/mad/1441233120</url>
|
||||||
|
</links>
|
||||||
|
<links>
|
||||||
|
<title>Soundcloud</title>
|
||||||
|
<url>https://soundcloud.com/mellodoot/mad</url>
|
||||||
|
</links>
|
||||||
|
<links>
|
||||||
|
<title>YouTube</title>
|
||||||
|
<url>https://www.youtube.com/watch?v=OB-Pk6p6mfQ</url>
|
||||||
|
</links>
|
||||||
|
</row>
|
||||||
|
|
||||||
|
<row>
|
||||||
|
<id>welcomingparty</id>
|
||||||
|
<title>Welcoming Party</title>
|
||||||
|
<type>album</type>
|
||||||
|
<year>2018</year>
|
||||||
|
<artwork>https://mellodoot.com/img/music_artwork/mellodoot_-_Welcoming_Party.webp</artwork>
|
||||||
|
<buylink>https://mellodoot.bandcamp.com/album/welcoming-party</buylink>
|
||||||
|
<links>
|
||||||
|
<title>Spotify</title>
|
||||||
|
<url>https://open.spotify.com/album/3EPa4HZpkISQVRAks64LfR</url>
|
||||||
|
</links>
|
||||||
|
<links>
|
||||||
|
<title>Apple Music</title>
|
||||||
|
<url>https://music.apple.com/ie/album/welcoming-party-ep/1441161424</url>
|
||||||
|
</links>
|
||||||
|
<links>
|
||||||
|
<title>Soundcloud</title>
|
||||||
|
<url>https://soundcloud.com/mellodoot/sets/welcoming-party</url>
|
||||||
|
</links>
|
||||||
|
<links>
|
||||||
|
<title>YouTube</title>
|
||||||
|
<url>https://www.youtube.com/playlist?list=PLBG_QJeOHrB5EeniiXBIlHpoQbD6CUJca</url>
|
||||||
|
</links>
|
||||||
|
<tracks>
|
||||||
|
<title>Paradigm</title>
|
||||||
|
</tracks>
|
||||||
|
<tracks>
|
||||||
|
<title>Mitrio</title>
|
||||||
|
</tracks>
|
||||||
|
<tracks>
|
||||||
|
<title>Level One</title>
|
||||||
|
</tracks>
|
||||||
|
<tracks>
|
||||||
|
<title>Cubes</title>
|
||||||
|
</tracks>
|
||||||
|
<tracks>
|
||||||
|
<title>Aria</title>
|
||||||
|
</tracks>
|
||||||
|
</row>
|
||||||
|
|
||||||
|
<row>
|
||||||
|
<id>howtheyknow2018</id>
|
||||||
|
<title>How They Know (2018)</title>
|
||||||
|
<type>single</type>
|
||||||
|
<year>2018</year>
|
||||||
|
<artwork>https://mellodoot.com/img/music_artwork/mellodoot_-_How_They_Know_2018.webp</artwork>
|
||||||
|
<buylink>https://mellodoot.bandcamp.com/track/how-they-know-2018-remastered</buylink>
|
||||||
|
<free>true</free>
|
||||||
|
<links>
|
||||||
|
<title>Soundcloud</title>
|
||||||
|
<url>https://soundcloud.com/mellodoot/how-they-know-2018</url>
|
||||||
|
</links>
|
||||||
|
<links>
|
||||||
|
<title>YouTube</title>
|
||||||
|
<url>https://www.youtube.com/watch?v=mbAgSwCzyMw</url>
|
||||||
|
</links>
|
||||||
|
</row>
|
||||||
|
|
||||||
|
<row>
|
||||||
|
<id>howtheyknow</id>
|
||||||
|
<title>How They Know</title>
|
||||||
|
<type>single</type>
|
||||||
|
<year>2017</year>
|
||||||
|
<artwork>https://mellodoot.com/img/music_artwork/mellodoot_-_How_They_Know.webp</artwork>
|
||||||
|
<buylink>https://mellodoot.bandcamp.com/track/how-they-know</buylink>
|
||||||
|
<free>true</free>
|
||||||
|
<links>
|
||||||
|
<title>Soundcloud</title>
|
||||||
|
<url>https://soundcloud.com/mellodoot/how-they-know</url>
|
||||||
|
</links>
|
||||||
|
<links>
|
||||||
|
<title>YouTube</title>
|
||||||
|
<url>https://www.youtube.com/watch?v=q6lzKuG1Emo</url>
|
||||||
|
</links>
|
||||||
|
</row>
|
||||||
|
|
||||||
|
<row>
|
||||||
|
<id>traveller</id>
|
||||||
|
<title>Traveller</title>
|
||||||
|
<type>single</type>
|
||||||
|
<year>2017</year>
|
||||||
|
<artwork>https://mellodoot.com/img/music_artwork/mellodoot_-_Traveller.webp</artwork>
|
||||||
|
<buylink>https://mellodoot.bandcamp.com/track/traveller</buylink>
|
||||||
|
<free>true</free>
|
||||||
|
<links>
|
||||||
|
<title>Soundcloud</title>
|
||||||
|
<url>https://soundcloud.com/mellodoot/traveller</url>
|
||||||
|
</links>
|
||||||
|
<links>
|
||||||
|
<title>YouTube</title>
|
||||||
|
<url>https://www.youtube.com/watch?v=ZTO7IQZ-yXA</url>
|
||||||
|
</links>
|
||||||
|
</row>
|
||||||
|
|
||||||
|
</music>
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en"><head>
|
<html lang="en">
|
||||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
<head>
|
||||||
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
|
@ -19,7 +20,7 @@
|
||||||
|
|
||||||
<script src="script/main.js" defer="defer"></script>
|
<script src="script/main.js" defer="defer"></script>
|
||||||
<link rel="me" href="https://wetdry.world/@ari">
|
<link rel="me" href="https://wetdry.world/@ari">
|
||||||
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<div id="header">
|
<div id="header">
|
||||||
|
|
@ -30,10 +31,10 @@
|
||||||
</div>
|
</div>
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
<a href="/" target="_blank">home</a>
|
<a href="/">home</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="https://mellodoot.com/music" target="_blank">music</a>
|
<a href="/music">music</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="https://github.com/mellodoot/arimelody.me" target="_blank">source</a>
|
<a href="https://github.com/mellodoot/arimelody.me" target="_blank">source</a>
|
||||||
|
|
@ -142,15 +143,14 @@
|
||||||
this site is intended to eventually replace
|
this site is intended to eventually replace
|
||||||
<a href="https://mellodoot.com/" target="_blank">mellodoot.com</a>.
|
<a href="https://mellodoot.com/" target="_blank">mellodoot.com</a>.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<hr>
|
|
||||||
|
|
||||||
<small><em>*made with ♥ by ari, 2023*</em></small>
|
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
|
<div id="footer">
|
||||||
|
<small><em>*made with ♥ by ari, 2023*</em></small>
|
||||||
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
<div id="overlay"></div>
|
<div id="overlay"></div>
|
||||||
|
</body>
|
||||||
</body></html>
|
</html>
|
||||||
|
|
|
||||||
140
public/music.html
Normal file
140
public/music.html
Normal file
|
|
@ -0,0 +1,140 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
|
||||||
|
<title>music - ari melody 💫</title>
|
||||||
|
<link rel="shortcut icon" href="/img/favicon.png" type="image/x-icon">
|
||||||
|
|
||||||
|
<meta property="og:title" content="ari melody music">
|
||||||
|
<meta property="og:type" content="website">
|
||||||
|
<meta property="og:url" content="www.arimelody.me/music">
|
||||||
|
<meta property="og:image" content="https://www.arimelody.me/img/favicon.png">
|
||||||
|
<meta property="og:site_name" content="ari melody">
|
||||||
|
<meta property="og:description" content="music from your local SPACEGIRL 💫">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="/style/main.css">
|
||||||
|
<link rel="stylesheet" href="/style/music.css">
|
||||||
|
|
||||||
|
<script src="/script/main.js" defer="defer"></script>
|
||||||
|
<script src="/script/music.js" defer="defer"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<div id="header">
|
||||||
|
<img src="/img/favicon.png" id="header-icon" width="100" height="100">
|
||||||
|
<div id="header-text">
|
||||||
|
<h1>ari melody</h1>
|
||||||
|
<h2>your local SPACEGIRL 💫</h2>
|
||||||
|
</div>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="/">home</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/music">music</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://github.com/mellodoot/arimelody.me" target="_blank">source</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<!-- coming later! -->
|
||||||
|
<a class="inactive" title="coming later!">blog</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<!-- coming later! -->
|
||||||
|
<a class="inactive" title="coming later!">art</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<h1>
|
||||||
|
# my music
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p><a class="collapse-toggle">> "can i use your music in my content?"</a></p>
|
||||||
|
<div class="collapse">
|
||||||
|
<p>
|
||||||
|
<strong class="big">yes!</strong> well, in most cases...
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
from <a href="/music/dream">Dream (2022)</a> onward, all of my <em>self-released</em> songs are
|
||||||
|
licensed under <a href="https://creativecommons.org/licenses/by-sa/3.0/" target="_blank">Creative Commons Attribution-ShareAlike 3.0</a>. anyone may use these
|
||||||
|
songs freely, so long as they provide credit back to me!
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
a great example of some credit text would be as follows:
|
||||||
|
</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>
|
||||||
|
licensed under CC BY-SA 3.0.
|
||||||
|
</blockquote>
|
||||||
|
<p>
|
||||||
|
for any songs prior to this, they were all either released by me (in which case, i honestly
|
||||||
|
don't mind), or in collaboration with chill people who i don't see having an issue with it.
|
||||||
|
do be sure to ask them about it, though!
|
||||||
|
</p>
|
||||||
|
<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! ;)
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
i love the idea of other creators using my songs in their work, so if you do happen to use
|
||||||
|
my stuff in a work you're particularly proud of, feel free to send it my way!
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
> <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>
|
||||||
|
<div id="footer">
|
||||||
|
<small><em>*made with ♥ by ari, 2023*</em></small>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<div id="overlay"></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -98,6 +98,7 @@ header ul li a:not(.inactive):hover {
|
||||||
|
|
||||||
main {
|
main {
|
||||||
width: min(calc(100% - 4rem), 720px);
|
width: min(calc(100% - 4rem), 720px);
|
||||||
|
min-height: calc(100vh - 10.3rem);
|
||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -243,7 +244,13 @@ ul.links li a:hover {
|
||||||
}
|
}
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
margin: 2rem;
|
border-top: 1px solid #888;
|
||||||
|
}
|
||||||
|
|
||||||
|
#footer {
|
||||||
|
width: min(calc(100% - 4rem), 720px);
|
||||||
|
margin: auto;
|
||||||
|
padding: 2rem 0;
|
||||||
color: #aaa;
|
color: #aaa;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
79
public/style/music.css
Normal file
79
public/style/music.css
Normal file
|
|
@ -0,0 +1,79 @@
|
||||||
|
article.music {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
padding: 1.5rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
gap: 1.5em;
|
||||||
|
border-radius: 4px;
|
||||||
|
background-color: #ffffff04;
|
||||||
|
transition: background-color .1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
article.music:hover {
|
||||||
|
background-color: #fff1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.music h1:hover,
|
||||||
|
.music h2:hover {
|
||||||
|
background: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
.music-artwork img {
|
||||||
|
border: 1px solid #888;
|
||||||
|
}
|
||||||
|
|
||||||
|
.music-title {
|
||||||
|
margin: 0;
|
||||||
|
color: #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.music-year {
|
||||||
|
color: #888;
|
||||||
|
}
|
||||||
|
|
||||||
|
.music-artist {
|
||||||
|
margin: -.5rem 0 0 0;
|
||||||
|
font-size: 1em;
|
||||||
|
color: #aaa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.music-links {
|
||||||
|
margin: .5em 0;
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
gap: .5rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.music-links li {
|
||||||
|
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: #65b4fd;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.collapse {
|
||||||
|
margin-bottom: 1em;
|
||||||
|
padding: .5em 1.5em;
|
||||||
|
background-color: #ffffff04;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
Reference in a new issue