ari/arimelody.me
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

light theme! crt now disabled by default

Browse source
This commit is contained in:
ari melody 2025-01-22 11:39:15 +00:00
parent cdcc7466e5
commit c6afc274c2
Signed by: ari
GPG key ID: CF99829C92678188
9 changed files with 355 additions and 315 deletions
Download patch file Download diff file Expand all files Collapse all files

149
public/style/music.css
View file

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