secstate/Iris
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

More of a spotify-esque design

Browse Source
This commit is contained in:
James Barnsley
2017-02-07 20:07:04 +13:00
parent 48ccb69690
commit 20e6d903c6
9 changed files with 132 additions and 250 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
src/scss/views/_album.scss
View File

@ -1,105 +1,29 @@
.album-view {
.main {
padding-left: 300px;
.title {
padding: 30px 40px;
.title {
padding: 30px 40px;
h3 {
color: $mid_grey;
a:hover {
color: darken($mid_grey, 20%);
}
h3 {
color: $mid_grey;
a:hover {
color: darken($mid_grey, 20%);
}
}
}
.intro {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 300px;
background: $faint_grey;
.thumbnail {
float: none;
margin: 0 auto;
max-width: none;
}
.details {
padding: 30px;
}
.artist-grid {
padding: 0;
margin: 0;
.grid-item {
margin: 0;
width: 50%;
position: relative;
background: #000000;
.name {
@include animate();
position: absolute;
top: 40%;
left: 0;
right: 0;
text-align: center;
color: #FFFFFF;
opacity: 0;
z-index: 2;
font-weight: bold;;
font-size: 14px;
}
.secondary {
display: none;
}
&:hover {
.thumbnail {
opacity: 0.3;
}
.name {
opacity: 1;
}
}
}
}
.source {
text-transform: uppercase;
padding-bottom: 15px;
}
@include responsive( $bp_medium ){
.actions {
@include clearfix();
}
.main {
padding-left: 0;
.title {
padding: 20px;
}
}
.intro {
position: static;
width: auto;
.artist-grid {
display: none;
}
.details {
padding: 20px;
li {
display: inline-block;
padding-right: 15px;
}
}
}
.thumbnail {
float: left;
max-width: 230px;
margin: 0 30px 30px 0;
}
}

13
src/scss/views/_artist.scss
View File

@ -18,7 +18,7 @@
.liner {
position: relative;
z-index: 1;
padding: 15vh 40px 20px 40px;
padding: 20vh 40px 0 40px;
h1 {
color: #FFFFFF;
@ -26,21 +26,20 @@
}
.actions {
.button {
margin-right: 30px;
padding-bottom: 15px;
button {
margin-right: 20px;
}
}
.sub-views {
color: #FFFFFF;
position: absolute;
bottom: 0;
right: 30px;
.option {
display: inline-block;
padding: 8px 0;
margin: 0 10px;
margin: 0 25px 0 0;
font-size: 18px;
font-weight: 400;
border-bottom: 4px solid transparent;

108
src/scss/views/_playlist.scss
View File

@ -1,103 +1,33 @@
.playlist-view {
.main {
padding-left: 300px;
.title {
padding: 30px 40px;
.title {
padding: 30px 40px;
h3 {
color: $mid_grey;
a:hover {
color: darken($mid_grey, 20%);
}
h3 {
color: $mid_grey;
a:hover {
color: darken($mid_grey, 20%);
}
}
}
.intro {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 300px;
background: $faint_grey;
> .thumbnail {
float: none;
margin: 0 auto;
max-width: none;
}
.details {
padding: 30px;
}
.artist-grid {
padding: 0;
margin: 0;
.grid-item {
margin: 0;
width: 50%;
position: relative;
.thumbnail .image {
background-color: $secondary_grey;
}
.name {
@include animate();
position: absolute;
top: 35%;
left: 0;
right: 0;
text-align: center;
color: #FFFFFF;
opacity: 0;
z-index: 2;
font-weight: bold;
}
.secondary {
display: none;
}
&:hover {
.name {
opacity: 1;
}
}
}
}
.owner {
padding: 30px;
}
.source {
text-transform: uppercase;
padding-bottom: 15px;
}
@include responsive( $bp_medium ){
.actions {
@include clearfix();
}
.main {
padding-left: 0px;
.description {
padding-bottom: 5px;
}
.title {
padding: 20px;
}
}
.intro {
width: auto;
position: static;
.details {
padding: 20px;
li {
display: inline-block;
padding-right: 15px;
}
}
}
.thumbnail {
float: left;
max-width: 230px;
margin: 0 30px 30px 0;
}
}