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

Refining fonts and colours

Browse Source
This commit is contained in:
James Barnsley
2017-07-24 06:03:09 +12:00
parent 396aec1a49
commit bde12b7673
16 changed files with 57 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/index.html
View File

@ -14,7 +14,7 @@
<link rel="shortcut icon" type="image/x-icon" href="/iris/assets/favicon.ico" /> <link rel="shortcut icon" type="image/x-icon" href="/iris/assets/favicon.ico" />
<link rel="shortcut-icon" href="/iris/assets/favicon.ico" /> <link rel="shortcut-icon" href="/iris/assets/favicon.ico" />
<link href="//fonts.googleapis.com/css?family=Archivo+Narrow:400,700|Lato:400,400i,700|Overpass:400,400i,600,700,800|Montserrat:400|500|600|News+Cycle:400,700|PT+Sans+Narrow:400,700" rel="stylesheet"> <link href="//fonts.googleapis.com/css?family=Archivo+Narrow:400,700|Lato:400,400i,700|Overpass:400,400i,600,700,800|Montserrat:400|500|600|News+Cycle:400,700|PT+Sans+Narrow:400,700|Roboto+Condensed:300,400,700|Fira+Sans:400,500,600,700|Open+Sans:400,600,700|Source+Sans+Pro:400,600,700" rel="stylesheet">
<link href="/iris/app.css" rel="stylesheet" /> <link href="/iris/app.css" rel="stylesheet" />
<link rel="manifest" href="/iris/assets/manifest.json"> <link rel="manifest" href="/iris/assets/manifest.json">

4
src/js/views/Artist.js
View File

@ -205,10 +205,9 @@ class Artist extends React.Component{
<div className="intro"> <div className="intro">
<Parallax blur image={image} /> <Parallax image={image} />
<div className="liner"> <div className="liner">
<Thumbnail image={image} canZoom circle />
<h1>{this.props.artist ? this.props.artist.name : null}</h1> <h1>{this.props.artist ? this.props.artist.name : null}</h1>
<div className="actions"> <div className="actions">
{ can_play_radio ? <button className="primary" onClick={e => this.props.pusherActions.startRadio([this.props.artist.uri])}>Start radio</button> : <button className="primary" onClick={e => this.props.mopidyActions.playURIs(this.props.artist.albums_uris, this.props.artist.uri)}>Play all</button>} { can_play_radio ? <button className="primary" onClick={e => this.props.pusherActions.startRadio([this.props.artist.uri])}>Start radio</button> : <button className="primary" onClick={e => this.props.mopidyActions.playURIs(this.props.artist.albums_uris, this.props.artist.uri)}>Play all</button>}
@ -231,7 +230,6 @@ class Artist extends React.Component{
<div className="intro"> <div className="intro">
<Parallax /> <Parallax />
<div className="liner"> <div className="liner">
<Thumbnail circle />
<h1> <h1>
<span className="placeholder"></span> <span className="placeholder"></span>
</h1> </h1>

2
src/scss/components/_dragger.scss
View File

@ -28,7 +28,7 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: 98; z-index: 98;
background: $off_white; background: darken($dark_grey, 1%);
.dropzone { .dropzone {
@include animate(); @include animate();

6
src/scss/components/_dropdown-field.scss
View File

@ -46,9 +46,9 @@
background: $white; background: $white;
width: 0; width: 0;
height: 0; height: 0;
border-left: 5px solid transparent; border-left: 5px solid $darkest_grey;
border-right: 5px solid transparent; border-right: 5px solid $darkest_grey;
border-bottom: 6px solid $mid_grey; border-bottom: 6px solid $white;
} }
.option { .option {

2
src/scss/components/_grid.scss
View File

@ -94,7 +94,7 @@
} }
&:not(.mini){ &:not(.mini){
.grid-item { .grid-item {
@include grid_item( 5 ) @include grid_item( 4 )
} }
} }
} }

15
src/scss/components/_header.scss
View File

@ -39,7 +39,7 @@ main {
padding: 13px 10px; padding: 13px 10px;
margin: 0; margin: 0;
min-width: 0; min-width: 0;
color: $black; color: $white;
&:hover { &:hover {
color: $blue; color: $blue;
@ -57,20 +57,7 @@ main {
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
color: $white;
z-index: 95; 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 ){ @include responsive( $bp_medium ){

14
src/scss/components/_images.scss
View File

@ -76,9 +76,9 @@
z-index: 9; z-index: 9;
pointer-events: none; pointer-events: none;
background: -webkit-linear-gradient(rgba(38,39,40,0), rgba(38,39,40,1)); 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: -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: -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: linear-gradient(rgba(38,39,40,0),rgba(38,39,40,1));
} }
canvas { canvas {
@ -90,7 +90,7 @@
left: -5%; left: -5%;
&.loaded { &.loaded {
opacity: 0.4; opacity: 0.8;
} }
} }
@ -105,7 +105,7 @@
padding-bottom: 60px; padding-bottom: 60px;
.tile { .tile {
color: $dark_grey; color: $white;
text-align: center; text-align: center;
position: relative; position: relative;
z-index: 1; z-index: 1;
@ -133,7 +133,7 @@
margin-top: -27px; margin-top: -27px;
font-size: 60px; font-size: 60px;
z-index: -1; z-index: -1;
color: $faint_grey; opacity: 0.1;
} }
} }
@ -142,7 +142,7 @@
display: block; display: block;
width: 100%; width: 100%;
padding-bottom: 100%; padding-bottom: 100%;
background: $light_grey; background: lighten($dark_grey,2%);
z-index: -2; z-index: -2;
} }

6
src/scss/components/_lists.scss
View File

@ -12,7 +12,7 @@
display: block; display: block;
position: relative; position: relative;
padding: 12px 10px; padding: 14px 10px;
margin: 0 -10px -1px -10px; margin: 0 -10px -1px -10px;
cursor: pointer; cursor: pointer;
border-radius: 3px; border-radius: 3px;
@ -334,10 +334,10 @@
&.track-list { &.track-list {
.list-item.can-sort { .list-item.can-sort {
padding: 8px 30px 8px 78px !important; padding-left: 78px !important;
} }
.list-item:not(.can-sort){ .list-item:not(.can-sort){
padding: 8px 30px 8px 38px !important; padding-left: 42px !important;
} }
} }
} }

2
src/scss/components/_loader.scss
View File

@ -28,7 +28,7 @@
top: 0; top: 0;
left: 0; left: 0;
border: { border: {
color: $darkest_grey; color: lighten($dark_grey, 5%);
} }
} }

5
src/scss/components/_playback-controls.scss
View File

@ -5,8 +5,9 @@
bottom: 0; bottom: 0;
right: 0; right: 0;
left: 0; left: 0;
height: 50px; height: 49px;
background: darken($darkest_grey, 5%); background: lighten($dark_grey, 3%);
border-top: 1px solid lighten($dark_grey, 8%);
color: $white; color: $white;
.current-track { .current-track {

10
src/scss/components/_sidebar-toggle-button.scss
View File

@ -6,7 +6,7 @@
left: 0; left: 0;
padding: 18px; padding: 18px;
z-index: 98; z-index: 98;
color: #FFFFFF; color: $white;
font-size: 18px; font-size: 18px;
cursor: pointer; cursor: pointer;
display: none; display: none;
@ -15,14 +15,6 @@
display: block; display: block;
} }
header & {
color: $dark_grey;
}
header.overlay & {
color: $white;
}
&.open { &.open {
position: fixed; position: fixed;
top: 0; top: 0;

6
src/scss/components/_sidebar.scss
View File

@ -30,10 +30,10 @@ aside{
line-height: 1em; line-height: 1em;
a { a {
@include feature_font();
@include gradient_overlay(3px); @include gradient_overlay(3px);
font-weight: 800; font-family: "Overpass";
font-size: 15px; font-weight: 500;
font-size: 14px;
color: $white; color: $white;
text-decoration: none; text-decoration: none;
display: block; display: block;

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

@ -3,7 +3,7 @@
body, body,
html { html {
background: $dark_grey; background: $dark_grey;
color: $white; color: $light_grey;
font-family: "Archivo Narrow", Helvetica, Arial, sans-serif; font-family: "Archivo Narrow", Helvetica, Arial, sans-serif;
font-size: 14px; font-size: 14px;
touch-action: manipulation; touch-action: manipulation;
@ -51,9 +51,10 @@ main {
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
border-bottom: 1px solid transparent;
&:hover { &:hover {
opacity: 0.7; border-color: $mid_grey;
} }
} }
@ -84,6 +85,7 @@ main {
h1 { h1 {
@include feature_font(); @include feature_font();
color: $white;
font-weight: 800; font-weight: 800;
font-size: 3rem; font-size: 3rem;
line-height: 3.2rem; line-height: 3.2rem;
@ -114,7 +116,7 @@ h4 {
&.underline { &.underline {
padding-bottom: 4px; padding-bottom: 4px;
border-bottom: 1px solid #000000; border-bottom: 1px solid $grey;
} }
&:not(:first-child){ &:not(:first-child){

50
src/scss/global/_forms.scss
View File

@ -16,10 +16,15 @@ input[type="email"],
input[type="date"], input[type="date"],
select { select {
padding: 10px 14px; padding: 10px 14px;
background: $faint_grey; background: rgba(255,255,255,0.1);
color: $darkest_grey; color: $white;
font-family: "Archivo Narrow", Helvetica, Arial, sans-serif; font-family: "Archivo Narrow", Helvetica, Arial, sans-serif;
font-size: 14px; font-size: 14px;
&:focus,
&:active {
background: rgba(255,255,255,0.2);
}
} }
.button-wrapper { .button-wrapper {
@ -49,8 +54,8 @@ input[type="submit"] {
display: inline-block; display: inline-block;
padding: 9px 30px 7px; padding: 9px 30px 7px;
margin: 0 20px 10px 0; margin: 0 20px 10px 0;
color: $white; color: $black;
background: $black; background: $white;
font-size: 14px; font-size: 14px;
box-sizing: border-box; box-sizing: border-box;
border-radius: 3px; border-radius: 3px;
@ -69,8 +74,7 @@ input[type="submit"] {
&:active { &:active {
@include noanimate(); @include noanimate();
background: $black; background: darken($white,5%);
color: $white;
margin-top: 1px; margin-top: 1px;
margin-bottom: 9px; margin-bottom: 9px;
} }
@ -170,9 +174,6 @@ input[type="submit"] {
padding-left: 20px; padding-left: 20px;
padding-right: 20px; padding-right: 20px;
} }
@include responsive( $bp_narrow ){
}
} }
.field { .field {
@ -239,26 +240,15 @@ input[type="submit"] {
width: 14px; width: 14px;
height: 14px; height: 14px;
border-radius: 50%; border-radius: 50%;
border: 2px solid #000000; border: 2px solid $mid_grey;
position: absolute; position: absolute;
top: 4px; top: 4px;
left: 0; left: 0;
} }
input:checked + .label:before { input:checked + .label:before {
background: #000000; background: $mid_grey;
box-shadow: inset 0px 0px 0px 4px #f5f5f5; box-shadow: inset 0px 0px 0px 4px #222222;
}
&.white {
input + .label:before {
border-color: #FFFFFF;
}
input:checked + .label:before {
background: #FFFFFF;
box-shadow: inset 0px 0px 0px 4px #222222;
}
} }
} }
@ -267,12 +257,12 @@ input[type="submit"] {
font-family: FontAwesome; font-family: FontAwesome;
font-size: 8px; font-size: 8px;
content: ' '; content: ' ';
color: #000000; color: $mid_grey;
display: inline-block; display: inline-block;
width: 11px; width: 11px;
height: 11px; height: 11px;
padding: 3px 0 0 3px; padding: 3px 0 0 3px;
border: 2px solid #000000; border: 2px solid $mid_grey;
position: absolute; position: absolute;
top: 5px; top: 5px;
left: 0; left: 0;
@ -281,16 +271,6 @@ input[type="submit"] {
input:checked + .label:before { input:checked + .label:before {
content: '\f00c'; content: '\f00c';
} }
&.white {
input + .label:before {
border-color: #FFFFFF;
}
input:checked + .label:before {
color: #FFFFFF;
}
}
} }
.error { .error {

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

@ -2,11 +2,11 @@
$turquoise: #08d58f; $turquoise: #08d58f;
$off_white: #F5F5F5; $off_white: #F5F5F5;
$faint_grey: #f4f2f0; $faint_grey: #f4f2f0;
$light_grey: #edeae7; $light_grey: #cecac4;
$mid_grey: #a3a19f; $mid_grey: #a3a19f;
$grey: #383734; $grey: #383734;
$dark_grey: #262728; $dark_grey: #262728;
$darkest_grey: #1d1e1f; $darkest_grey: #171819;
$secondary_grey: #888888; $secondary_grey: #888888;
$white: #FFFFFF; $white: #FFFFFF;
$black: #000000; $black: #000000;

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

@ -22,27 +22,16 @@
.liner { .liner {
position: relative; position: relative;
z-index: 1; z-index: 1;
padding: 30vh 40px 0 350px; padding: 35vh 40px 0;
.thumbnail {
position: absolute;
z-index: 2;
left: 40px;
bottom: 40px;
max-width: 264px;
.image {
background-color: $darkest_grey;
}
}
h1 { h1 {
color: $white; color: $white;
padding-bottom: 25px; padding-bottom: 25px;
font-size: 4rem;
} }
.actions { .actions {
padding-bottom: 60px; padding-bottom: 20px;
.context-menu-trigger { .context-menu-trigger {
color: $white; color: $white;
@ -50,19 +39,19 @@
} }
.sub-views { .sub-views {
color: #FFFFFF;
.option { .option {
@include feature_font();
color: $white;
display: inline-block; display: inline-block;
padding: 8px 0; padding: 8px 0;
margin-right: 25px; margin-right: 25px;
font-size: 18px; font-size: 15px;
font-weight: 400; font-weight: 500;
border-bottom: 4px solid transparent; border-bottom: 1px solid transparent;
cursor: pointer; cursor: pointer;
&.active { &.active {
border-color: $off_white; border-color: $white;
} }
&:not(.active):hover { &:not(.active):hover {