ari/arimelody.me-static
ari/arimelody.me-static
Archived
1
0
Fork 0
Code Issues 1 Pull requests Projects Wiki Activity Actions

music page!!! 🎶

Browse source
This commit is contained in:
ari melody 2023-10-14 23:26:26 +01:00
parent a5ea652f6b
commit 3650f026a2
Signed by: ari
GPG key ID: CF99829C92678188
9 changed files with 442 additions and 66 deletions
Download patch file Download diff file Expand all files Collapse all files

47
public/style/main.css
View file

@ -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 {

44
public/style/music.css
View file

@ -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;