- {this.props.artist.followers ?
{this.props.artist.followers.total.toLocaleString() } followers
: null}
- {this.props.artist.popularity ?
{this.props.artist.popularity }% popularity
: null}
- {this.props.artist.listeners ?
{ this.props.artist.listeners.toLocaleString() } listeners
: null }
+ {this.props.artist.followers ?
{this.props.artist.followers.total.toLocaleString() } followers
: null}
+ {this.props.artist.popularity ?
{this.props.artist.popularity }% popularity
: null}
+ {this.props.artist.listeners ?
{ this.props.artist.listeners.toLocaleString() } listeners
: null }
diff --git a/src/scss/components/_images.scss b/src/scss/components/_images.scss
index 935bee27..7e3544fc 100755
--- a/src/scss/components/_images.scss
+++ b/src/scss/components/_images.scss
@@ -68,32 +68,67 @@
}
}
-.tile {
- @include grid_item( 2 );
- color: $dark_grey;
- text-align: center;
- position: relative;
- z-index: 1;
- float: left;
- padding-top: 16%;
- font-size: 16px;
+.tiles {
+ padding-bottom: 60px;
- &:before {
- content: '';
- display: block;
- position: absolute;
- top: 0;
- width: 100%;
- padding-bottom: 100%;
- background: $light_grey;
- z-index: -1;
- }
+ .tile {
+ color: $dark_grey;
+ text-align: center;
+ position: relative;
+ z-index: 1;
+ float: left;
+ overflow: hidden;
- .fa {
- display: block;
- font-size: 40px;
- opacity: 0.2;
- z-index: 0;
- padding-bottom: 10px;
+ .text {
+ display: block;
+ position: absolute;
+ top: 50%;
+ left: 10%;
+ right: 10%;
+ vertical-align: top;
+ margin-top: -12px;
+ font-size: 16px;
+ z-index: 2;
+
+ .fa {
+ display: block;
+ position: absolute;
+ top: 50%;
+ left: 10%;
+ right: 10%;
+ text-align: center;
+ margin-top: -27px;
+ font-size: 60px;
+ z-index: -1;
+ color: $faint_grey;
+ }
+ }
+
+ &:before {
+ content: '';
+ display: block;
+ width: 100%;
+ padding-bottom: 100%;
+ background: $light_grey;
+ z-index: -2;
+ }
+
+ @include responsive( null, $bp_medium ){
+ @include grid_item( 2 );
+ }
+
+ @include responsive( $bp_medium ){
+ @include grid_item( 3 );
+ }
+
+ @include responsive( $bp_narrow ){
+ .text {
+ font-size: 14px;
+ .fa {
+ font-size: 28px;
+ margin-top: -12px;
+ }
+ }
+ }
}
}
\ No newline at end of file
diff --git a/src/scss/views/_artist.scss b/src/scss/views/_artist.scss
index 6c7114f1..01747dfe 100755
--- a/src/scss/views/_artist.scss
+++ b/src/scss/views/_artist.scss
@@ -47,7 +47,7 @@
.option {
display: inline-block;
padding: 8px 0;
- margin-right: 15px;
+ margin-right: 25px;
font-size: 18px;
font-weight: 400;
border-bottom: 4px solid transparent;
@@ -66,7 +66,8 @@
}
- .body.about {
+ .body.about {
+ @include clearfix();
padding: 0 40px 40px 40px;
}
@@ -104,6 +105,15 @@
display: none;
}
}
+
+ &.about {
+ .col.w40,
+ .col.w60 {
+ @include clearfix();
+ width: 100%;
+ float: none;
+ }
+ }
}
}
}