From bde12b76737c28b1c0cbb146a09673315d65a0ce Mon Sep 17 00:00:00 2001 From: James Barnsley Date: Mon, 24 Jul 2017 06:03:09 +1200 Subject: [PATCH] Refining fonts and colours --- src/index.html | 2 +- src/js/views/Artist.js | 4 +- src/scss/components/_dragger.scss | 2 +- src/scss/components/_dropdown-field.scss | 6 +-- src/scss/components/_grid.scss | 2 +- src/scss/components/_header.scss | 15 +----- src/scss/components/_images.scss | 14 +++--- src/scss/components/_lists.scss | 6 +-- src/scss/components/_loader.scss | 2 +- src/scss/components/_playback-controls.scss | 5 +- .../components/_sidebar-toggle-button.scss | 10 +--- src/scss/components/_sidebar.scss | 6 +-- src/scss/global/_core.scss | 8 +-- src/scss/global/_forms.scss | 50 ++++++------------- src/scss/global/_variables.scss | 4 +- src/scss/views/_artist.scss | 29 ++++------- 16 files changed, 57 insertions(+), 108 deletions(-) diff --git a/src/index.html b/src/index.html index d5504dc1..99607ba0 100755 --- a/src/index.html +++ b/src/index.html @@ -14,7 +14,7 @@ - + diff --git a/src/js/views/Artist.js b/src/js/views/Artist.js index 0de694db..290cd850 100755 --- a/src/js/views/Artist.js +++ b/src/js/views/Artist.js @@ -205,10 +205,9 @@ class Artist extends React.Component{
- +
-

{this.props.artist ? this.props.artist.name : null}

{ can_play_radio ? : } @@ -231,7 +230,6 @@ class Artist extends React.Component{
-

diff --git a/src/scss/components/_dragger.scss b/src/scss/components/_dragger.scss index a3f80c03..1f2bc5f8 100755 --- a/src/scss/components/_dragger.scss +++ b/src/scss/components/_dragger.scss @@ -28,7 +28,7 @@ width: 100%; height: 100%; z-index: 98; - background: $off_white; + background: darken($dark_grey, 1%); .dropzone { @include animate(); diff --git a/src/scss/components/_dropdown-field.scss b/src/scss/components/_dropdown-field.scss index 3b95ad88..0705f29a 100755 --- a/src/scss/components/_dropdown-field.scss +++ b/src/scss/components/_dropdown-field.scss @@ -46,9 +46,9 @@ background: $white; width: 0; height: 0; - border-left: 5px solid transparent; - border-right: 5px solid transparent; - border-bottom: 6px solid $mid_grey; + border-left: 5px solid $darkest_grey; + border-right: 5px solid $darkest_grey; + border-bottom: 6px solid $white; } .option { diff --git a/src/scss/components/_grid.scss b/src/scss/components/_grid.scss index 7cc69e51..ce7f861c 100755 --- a/src/scss/components/_grid.scss +++ b/src/scss/components/_grid.scss @@ -94,7 +94,7 @@ } &:not(.mini){ .grid-item { - @include grid_item( 5 ) + @include grid_item( 4 ) } } } diff --git a/src/scss/components/_header.scss b/src/scss/components/_header.scss index b8402f27..3d6f8909 100755 --- a/src/scss/components/_header.scss +++ b/src/scss/components/_header.scss @@ -39,7 +39,7 @@ main { padding: 13px 10px; margin: 0; min-width: 0; - color: $black; + color: $white; &:hover { color: $blue; @@ -57,20 +57,7 @@ main { top: 0; left: 0; width: 100%; - color: $white; z-index: 95; - - .icon { - -webkit-filter: invert(1); - -moz-filter: invert(1); - filter: invert(1); - } - - .context-menu-trigger { - .dot { - background: $white; - } - } } @include responsive( $bp_medium ){ diff --git a/src/scss/components/_images.scss b/src/scss/components/_images.scss index 0ea00604..59184fa6 100755 --- a/src/scss/components/_images.scss +++ b/src/scss/components/_images.scss @@ -76,9 +76,9 @@ z-index: 9; pointer-events: none; background: -webkit-linear-gradient(rgba(38,39,40,0), rgba(38,39,40,1)); - background: -moz-linear-gradient(rgba(38,39,40,0), rgba(38,39,40,1)); - background: -o-linear-gradient(rgba(38,39,40,0), rgba(38,39,40,1)); - background: linear-gradient(rgba(38,39,40,0), rgba(38,39,40,1)); + background: -moz-linear-gradient(rgba(38,39,40,0),rgba(38,39,40,1)); + background: -o-linear-gradient(rgba(38,39,40,0),rgba(38,39,40,1)); + background: linear-gradient(rgba(38,39,40,0),rgba(38,39,40,1)); } canvas { @@ -90,7 +90,7 @@ left: -5%; &.loaded { - opacity: 0.4; + opacity: 0.8; } } @@ -105,7 +105,7 @@ padding-bottom: 60px; .tile { - color: $dark_grey; + color: $white; text-align: center; position: relative; z-index: 1; @@ -133,7 +133,7 @@ margin-top: -27px; font-size: 60px; z-index: -1; - color: $faint_grey; + opacity: 0.1; } } @@ -142,7 +142,7 @@ display: block; width: 100%; padding-bottom: 100%; - background: $light_grey; + background: lighten($dark_grey,2%); z-index: -2; } diff --git a/src/scss/components/_lists.scss b/src/scss/components/_lists.scss index c9129da8..1d712a0e 100755 --- a/src/scss/components/_lists.scss +++ b/src/scss/components/_lists.scss @@ -12,7 +12,7 @@ display: block; position: relative; - padding: 12px 10px; + padding: 14px 10px; margin: 0 -10px -1px -10px; cursor: pointer; border-radius: 3px; @@ -334,10 +334,10 @@ &.track-list { .list-item.can-sort { - padding: 8px 30px 8px 78px !important; + padding-left: 78px !important; } .list-item:not(.can-sort){ - padding: 8px 30px 8px 38px !important; + padding-left: 42px !important; } } } diff --git a/src/scss/components/_loader.scss b/src/scss/components/_loader.scss index 598ab459..afe1924b 100755 --- a/src/scss/components/_loader.scss +++ b/src/scss/components/_loader.scss @@ -28,7 +28,7 @@ top: 0; left: 0; border: { - color: $darkest_grey; + color: lighten($dark_grey, 5%); } } diff --git a/src/scss/components/_playback-controls.scss b/src/scss/components/_playback-controls.scss index 719b874b..d1850f17 100755 --- a/src/scss/components/_playback-controls.scss +++ b/src/scss/components/_playback-controls.scss @@ -5,8 +5,9 @@ bottom: 0; right: 0; left: 0; - height: 50px; - background: darken($darkest_grey, 5%); + height: 49px; + background: lighten($dark_grey, 3%); + border-top: 1px solid lighten($dark_grey, 8%); color: $white; .current-track { diff --git a/src/scss/components/_sidebar-toggle-button.scss b/src/scss/components/_sidebar-toggle-button.scss index 2569e8bb..7e08e7e8 100755 --- a/src/scss/components/_sidebar-toggle-button.scss +++ b/src/scss/components/_sidebar-toggle-button.scss @@ -6,7 +6,7 @@ left: 0; padding: 18px; z-index: 98; - color: #FFFFFF; + color: $white; font-size: 18px; cursor: pointer; display: none; @@ -15,14 +15,6 @@ display: block; } - header & { - color: $dark_grey; - } - - header.overlay & { - color: $white; - } - &.open { position: fixed; top: 0; diff --git a/src/scss/components/_sidebar.scss b/src/scss/components/_sidebar.scss index 07b81c9f..c822b1b6 100755 --- a/src/scss/components/_sidebar.scss +++ b/src/scss/components/_sidebar.scss @@ -30,10 +30,10 @@ aside{ line-height: 1em; a { - @include feature_font(); @include gradient_overlay(3px); - font-weight: 800; - font-size: 15px; + font-family: "Overpass"; + font-weight: 500; + font-size: 14px; color: $white; text-decoration: none; display: block; diff --git a/src/scss/global/_core.scss b/src/scss/global/_core.scss index 3de7d23a..274be777 100755 --- a/src/scss/global/_core.scss +++ b/src/scss/global/_core.scss @@ -3,7 +3,7 @@ body, html { background: $dark_grey; - color: $white; + color: $light_grey; font-family: "Archivo Narrow", Helvetica, Arial, sans-serif; font-size: 14px; touch-action: manipulation; @@ -51,9 +51,10 @@ main { color: inherit; text-decoration: none; cursor: pointer; + border-bottom: 1px solid transparent; &:hover { - opacity: 0.7; + border-color: $mid_grey; } } @@ -84,6 +85,7 @@ main { h1 { @include feature_font(); + color: $white; font-weight: 800; font-size: 3rem; line-height: 3.2rem; @@ -114,7 +116,7 @@ h4 { &.underline { padding-bottom: 4px; - border-bottom: 1px solid #000000; + border-bottom: 1px solid $grey; } &:not(:first-child){ diff --git a/src/scss/global/_forms.scss b/src/scss/global/_forms.scss index 955847a9..82a14516 100755 --- a/src/scss/global/_forms.scss +++ b/src/scss/global/_forms.scss @@ -16,10 +16,15 @@ input[type="email"], input[type="date"], select { padding: 10px 14px; - background: $faint_grey; - color: $darkest_grey; + background: rgba(255,255,255,0.1); + color: $white; font-family: "Archivo Narrow", Helvetica, Arial, sans-serif; font-size: 14px; + + &:focus, + &:active { + background: rgba(255,255,255,0.2); + } } .button-wrapper { @@ -49,8 +54,8 @@ input[type="submit"] { display: inline-block; padding: 9px 30px 7px; margin: 0 20px 10px 0; - color: $white; - background: $black; + color: $black; + background: $white; font-size: 14px; box-sizing: border-box; border-radius: 3px; @@ -69,8 +74,7 @@ input[type="submit"] { &:active { @include noanimate(); - background: $black; - color: $white; + background: darken($white,5%); margin-top: 1px; margin-bottom: 9px; } @@ -170,9 +174,6 @@ input[type="submit"] { padding-left: 20px; padding-right: 20px; } - - @include responsive( $bp_narrow ){ - } } .field { @@ -239,26 +240,15 @@ input[type="submit"] { width: 14px; height: 14px; border-radius: 50%; - border: 2px solid #000000; + border: 2px solid $mid_grey; position: absolute; top: 4px; left: 0; } input:checked + .label:before { - background: #000000; - box-shadow: inset 0px 0px 0px 4px #f5f5f5; - } - - &.white { - input + .label:before { - border-color: #FFFFFF; - } - - input:checked + .label:before { - background: #FFFFFF; - box-shadow: inset 0px 0px 0px 4px #222222; - } + background: $mid_grey; + box-shadow: inset 0px 0px 0px 4px #222222; } } @@ -267,12 +257,12 @@ input[type="submit"] { font-family: FontAwesome; font-size: 8px; content: ' '; - color: #000000; + color: $mid_grey; display: inline-block; width: 11px; height: 11px; padding: 3px 0 0 3px; - border: 2px solid #000000; + border: 2px solid $mid_grey; position: absolute; top: 5px; left: 0; @@ -281,16 +271,6 @@ input[type="submit"] { input:checked + .label:before { content: '\f00c'; } - - &.white { - input + .label:before { - border-color: #FFFFFF; - } - - input:checked + .label:before { - color: #FFFFFF; - } - } } .error { diff --git a/src/scss/global/_variables.scss b/src/scss/global/_variables.scss index 2f675fa6..b6fd003a 100755 --- a/src/scss/global/_variables.scss +++ b/src/scss/global/_variables.scss @@ -2,11 +2,11 @@ $turquoise: #08d58f; $off_white: #F5F5F5; $faint_grey: #f4f2f0; -$light_grey: #edeae7; +$light_grey: #cecac4; $mid_grey: #a3a19f; $grey: #383734; $dark_grey: #262728; -$darkest_grey: #1d1e1f; +$darkest_grey: #171819; $secondary_grey: #888888; $white: #FFFFFF; $black: #000000; diff --git a/src/scss/views/_artist.scss b/src/scss/views/_artist.scss index 9a92da30..a10ec10a 100755 --- a/src/scss/views/_artist.scss +++ b/src/scss/views/_artist.scss @@ -22,27 +22,16 @@ .liner { position: relative; z-index: 1; - padding: 30vh 40px 0 350px; - - .thumbnail { - position: absolute; - z-index: 2; - left: 40px; - bottom: 40px; - max-width: 264px; - - .image { - background-color: $darkest_grey; - } - } + padding: 35vh 40px 0; h1 { color: $white; padding-bottom: 25px; + font-size: 4rem; } .actions { - padding-bottom: 60px; + padding-bottom: 20px; .context-menu-trigger { color: $white; @@ -50,19 +39,19 @@ } .sub-views { - color: #FFFFFF; - .option { + @include feature_font(); + color: $white; display: inline-block; padding: 8px 0; margin-right: 25px; - font-size: 18px; - font-weight: 400; - border-bottom: 4px solid transparent; + font-size: 15px; + font-weight: 500; + border-bottom: 1px solid transparent; cursor: pointer; &.active { - border-color: $off_white; + border-color: $white; } &:not(.active):hover {