Spotify/top-lists
0
0
Fork 0
Code Issues Activity

Make app function.

Browse source
This commit is contained in:
Tyler-A 2020-07-05 18:14:59 -06:00
parent e4c81beefe
commit af75bbc522
14 changed files with 865 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

84
css/artist.css Normal file
View file

@ -0,0 +1,84 @@
div.artist {
background-color: var(--card-colour);
color: var(--card-text);
border-radius: 7px;
border-style: none;
padding: 10px;
padding-top: 20px;
margin: 5px auto;
width: 90%;
position: relative;
display: flex;
flex-direction: column;
}
div.artist > div.profile_pic {
text-align: center;
}
div.artist > div.profile_pic img {
width: 200px;
height: 200px;
}
div.artist > div.info {
margin: 0;
text-align: center;
position: relative;
padding-bottom: 20px;
}
div.artist > div.info > span.name {
text-decoration: none;
color: var(--text-on-card);
vertical-align: middle;
font-size: larger;
}
div.artist > .followers {
background-color: var(--on-card-colour);
color: var(--on-card-text);
vertical-align: middle;
position: absolute;
padding: 1px 6px;
bottom: 0px;
right: 0px;
/* top-left top-right lower-right lower-left */
border-radius: 7px 0 7px 0;
}
div.artist > div.info > span.genres {
font-size: smaller;
}
div.artist > .popularity {
background-color: var(--on-card-colour);
color: var(--on-card-text);
position: absolute;
padding: 1px 6px;
bottom: 0px;
left: 0px;
/* top-left top-right lower-right lower-left */
border-radius: 0px 7px 0px 7px;
}
div.artist a {
color: var(--text-on-card);
text-decoration: none;
}
div.artist a:hover {
text-decoration: underline;
}
/* DESKTOP STYLES */
@media only screen and (min-width: 768px) {
div.artist {
width: 230px;
margin: 5px;
}
}