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

Playlist and album views

Browse Source
This commit is contained in:
James Barnsley
2016-10-31 16:49:42 +13:00
parent 869d73231b
commit bab6c66852
20 changed files with 581 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/scss/app.scss
View File

@ -17,4 +17,5 @@
@import 'views/artist';
@import 'views/album';
@import 'views/playlist';

13
src/scss/global/_core.scss
View File

@ -41,7 +41,18 @@ main {
font-size: 40px;
}
h2 {
font-weight: 500;
font-size: 30px;
}
h3 {
font-weight: 100;
font-style: italic;
font-size: 20px;
}
h4 {
font-size: 14px;
margin-bottom: 14px;
text-transform: uppercase;
@ -112,4 +123,4 @@ footer {
padding-top: 50px;
padding-bottom: 50px;
text-align: center;
}
}

1
src/scss/global/_variables.scss
View File

@ -1,5 +1,6 @@
$turquoise: #08d58f;
$faint_grey: #EEEEEE;
$light_grey: #DDDDDD;
$mid_grey: #AAAAAA;
$dark_grey: #333333;

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

@ -6,19 +6,67 @@
left: 0;
bottom: 0;
width: 300px;
background: $light_grey;
background: $faint_grey;
.thumbnail {
float: none;
margin: 0 auto;
}
h1 {
padding-top: 30px;
.details {
padding: 30px;
color: $mid_grey;
text-transform: uppercase;
}
.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;
}
&:hover {
.name {
opacity: 1;
}
}
}
}
}
.main {
.title {
padding: 30px 40px;
h3 {
color: $mid_grey;
a:hover {
color: darken($mid_grey, 20%);
}
}
}
padding-left: 300px;
}
}

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

@ -1,30 +1,72 @@
.album-view {
.playlist-view {
.intro {
@include clearfix;
position: relative;
text-align: center;
color: #FFFFFF;
padding: 20px;
height: 40vh;
z-index: 2;
.parallax {
position: absolute;
top: 0;
left: 0;
height: 100%;
z-index: -1;
}
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 300px;
background: $faint_grey;
.thumbnail {
float: none;
margin: 0 auto;
max-width: 160px;
}
h1 {
padding-top: 30px;
.details {
padding: 30px;
color: $mid_grey;
text-transform: uppercase;
}
.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;
}
&:hover {
.name {
opacity: 1;
}
}
}
}
}
.main {
.title {
padding: 30px 40px;
h3 {
color: $mid_grey;
a:hover {
color: darken($mid_grey, 20%);
}
}
}
padding-left: 300px;
}
}