123 lines
2.3 KiB
CSS
123 lines
2.3 KiB
CSS
.blinkies {
|
|
justify-content: center;
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.blinkies img {
|
|
width: 150px;
|
|
height: 20px;
|
|
transition: all 0.2s ease-in-out;
|
|
}
|
|
|
|
.blinkies img:hover {
|
|
transform: scale(1.1) rotate(5deg);
|
|
}
|
|
|
|
.blinkies img:nth-child(odd):hover {
|
|
transform: scale(1.1) rotate(-5deg);
|
|
}
|
|
|
|
.stamps {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
padding: 10px;
|
|
gap: 5px;
|
|
justify-content: center;
|
|
align-content: center;
|
|
}
|
|
|
|
.stamps img {
|
|
width: 99px;
|
|
height: 56px;
|
|
transition: all 0.2s ease-in-out;
|
|
}
|
|
|
|
.stamps img:hover {
|
|
transform: scale(1.1) rotate(5deg);
|
|
}
|
|
|
|
.stamps img:nth-child(odd):hover {
|
|
transform: scale(1.1) rotate(-5deg);
|
|
}
|
|
|
|
#listenbrainz {
|
|
background-image: none;
|
|
backdrop-filter: blur(2px) brightness(0.6);
|
|
border: var(--secondary-background-color) 2px solid;
|
|
border-radius: 10px;
|
|
padding: 15px;
|
|
box-sizing: border-box;
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
height: 300px;
|
|
width: 300px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
#listenbrainz-title {
|
|
font-size: 1.2rem;
|
|
font-weight: 900;
|
|
margin: 0;
|
|
padding: 0;
|
|
mix-blend-mode: difference;
|
|
color: white;
|
|
}
|
|
|
|
#listenbrainz-artist {
|
|
color: white;
|
|
font-size: 0.7rem;
|
|
font-weight: 900;
|
|
margin: 0;
|
|
padding: 0;
|
|
mix-blend-mode: difference;
|
|
}
|
|
|
|
#listenbrainz-live {
|
|
color: white;
|
|
font-size: 0.6rem;
|
|
font-weight: 900;
|
|
margin: 0;
|
|
padding: 0;
|
|
margin-top: auto;
|
|
margin-left: auto;
|
|
background-color: gray;
|
|
border-radius: 30px;
|
|
padding: 2px 6px;
|
|
font-family: var(--ultrafont-font);
|
|
}
|
|
|
|
#button-collection {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
#button-collection img {
|
|
transition: all 0.2s ease-in-out;
|
|
}
|
|
|
|
#button-collection img:hover {
|
|
transform: scale(1.1) rotate(5deg);
|
|
}
|
|
|
|
#button-collection img:nth-child(odd):hover {
|
|
transform: scale(1.1) rotate(-5deg);
|
|
}
|
|
|
|
@media screen and (max-width: 650px) {
|
|
div#spotify {
|
|
box-sizing: border-box;
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
height: 100%;
|
|
width: auto;
|
|
aspect-ratio: 1/1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
} |