-
diff --git a/app/styles/base/_color.scss b/app/styles/base/_color.scss
index b1b121be..b1ee0570 100644
--- a/app/styles/base/_color.scss
+++ b/app/styles/base/_color.scss
@@ -15,44 +15,81 @@
*/
$color-text: #212121;
-$color-heading: #000;
-
-$color-body: #F5F5F5; // grey 100
-$color-card: $color-body;
+$color-heading: #5c5c5c;
// Nav colors
-$color-cyan-900: #006064;
-$color-bluegrey-600: #546E7A;
-$color-bluegrey-200: #B0BEC5;
+$color-cyan-900: #004446;
// Background
+$color-body: #F5F5F5; // grey 100
$color-cyan-500: #00BCD4;
$color-cyan-400: #26C6DA;
$color-bluegrey-100: #CFD8DC;
$color-bluegrey-700: #455A64;
// Links
-$color-cyan-900: #004446;
+$color-link-grey: #666666;
$color-cyan-A700: #008094;
$color-cyan-A400: #00E5FF;
$color-gray: #9e9e9e;
+a {
+ color: $color-cyan-A700;
+}
+
+h1, h2 {
+ color: $color-heading;
+}
+
+h3, h4, h5, h6 {
+ color: $color-text;
+}
+
.typo-white {
color: #fff;
}
-.cyan-bg {
+.bg-cyan {
background-color: $color-cyan-500;
- color: $color-cyan-900;
+ color: #07434D;
+
+ a {
+ @extend .typo-white;
+ }
}
-.lightgrey-bg {
+.bg-light-grey {
+ background-color: $color-body;
+ color: $color-text;
+
+ h1, h2 {
+ color: $color-heading;
+ }
+
+ a {
+ color: $color-cyan-A700;
+ }
+}
+
+.bg-medium-grey {
background-color: $color-bluegrey-100;
- color: $color-bluegrey-700;
+ color: #373839;
+
+ h1, h2 {
+ color: #4A4D4F;
+ }
+
+ a {
+ color: $color-cyan-A700;
+ }
}
-.darkgrey-bg {
+.bg-dark-grey {
background-color: $color-bluegrey-700;
- color: $color-bluegrey-100;
+ color: #E5E8E9;
+
+ a {
+ color: $color-cyan-A400;
+ }
}
diff --git a/app/styles/base/_reset.scss b/app/styles/base/_reset.scss
index ce7a63a4..1e944d41 100644
--- a/app/styles/base/_reset.scss
+++ b/app/styles/base/_reset.scss
@@ -16,6 +16,7 @@
html, body {
background: $color-body;
+ color: $color-text;
margin: 0;
padding: 0;
height: 100%;
diff --git a/app/styles/base/_typography.scss b/app/styles/base/_typography.scss
index da7c23ec..df0f9567 100644
--- a/app/styles/base/_typography.scss
+++ b/app/styles/base/_typography.scss
@@ -20,39 +20,49 @@
letter-spacing: -0.01em;
}
-@mixin typo-display-4() {
+@mixin typo-heading-1() {
font-family: 'Roboto', sans-serif;
font-size: 48px;
font-weight: 300;
- opacity: 0.54;
line-height: 56px;
letter-spacing: -0.04em;
}
-@mixin typo-display-3() {
+@mixin typo-heading-2() {
font-family: 'Roboto', sans-serif;
- font-size: 32px;
+ font-size: 34px;
font-weight: 300;
- opacity: 0.54;
line-height: 48px;
letter-spacing: -0.02em;
}
-@mixin typo-display-2() {
+@mixin typo-heading-3() {
+ font-family: 'Roboto', sans-serif;
+ font-size: 24px;
+ font-weight: 400;
+ line-height: 36px;
+}
+
+@mixin typo-heading-4() {
font-family: 'Roboto', sans-serif;
font-size: 20px;
- // font-weight: 400; // TODO: part of the site design, but looks less nice.
- font-weight: 300;
- opacity: 0.87;
+ font-weight: 400;
line-height: 32px;
}
-@mixin typo-display-1() {
+@mixin typo-heading-5() {
+ font-family: 'Roboto', sans-serif;
+ font-size: 16px;
+ font-weight: 500;
+ line-height: 24px;
+}
+
+@mixin typo-body() {
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-weight: 400;
- opacity: 0.87;
line-height: 24px;
+ letter-spacing: -0.01em;
}
@mixin typo-button() {
@@ -66,25 +76,19 @@
html, body {
font-family: 'Helvetica', 'Arial', 'sans-serif';
- font-size: 14px;
- font-weight: 400;
- line-height: 20px;
- color: $color-text;
+ @include typo-body();
}
h1, h2, h3, h4, h5, h6, p {
margin: 0;
padding: 0;
- color: $color-heading;
}
p {
margin: 0 0 8px 0;
- color: $color-text;
}
a {
- color: $color-bluegrey-700;
font-weight: bold;
text-decoration: none;
}
@@ -97,120 +101,73 @@ li {
line-height: 1.7;
}
-h1 {
- @include typo-display-3();
-}
-h2 {
- @include typo-display-2();
- font-size: 24px;
+@media (max-width: $phone-breakpoint-max) {
+ h1 {
+ @include typo-heading-1();
+ font-size: 34px;
+ line-height: 48px;
+ font-weight: 300;
+ }
}
-h3 {
- @include typo-display-1();
- font-size: 20px;
- line-height: 32px;
-}
+@media (max-width: $desktop-breakpoint-mid) {
+ h1 {
+ @include typo-heading-1();
+ font-size: 48px;
+ line-height: 56px;
+ }
+ h1 {
+ @include typo-heading-1();
+ font-size: 34px;
+ line-height: 48px;
+ font-weight: 300;
+ }
+ h2 {
+ @include typo-heading-2();
+ font-size: 24px;
+ line-height: 36px;
+ // font-weight: 400;
+ }
-h4 {
- @include typo-display-1();
-}
+ h3 {
+ @include typo-heading-3();
+ font-size: 20px;
+ line-height: 32px;
+ font-weight: 400;
+ }
-h5 {
- @include typo-button();
+ h4 {
+ @include typo-heading-4();
+ font-size: 16px;
+ line-height: 24px;
+ font-weight: 500;
+ }
+
+ h5 {
+ @include typo-heading-5();
+ font-size: 14px;
+ line-height: 24px;
+ font-weight: 500;
+ }
}
@media (min-width: $desktop-breakpoint-mid) {
- h1 {
- @include typo-display-4();
- }
+ // h1 is same as tablet.
h2 {
- @include typo-display-3();
+ @include typo-heading-2();
}
h3 {
- @include typo-display-2();
+ @include typo-heading-3();
}
h4 {
- @include typo-display-1();
+ @include typo-heading-4();
}
-}
-// @mixin typo-headline() {
-// font-family: 'Roboto', sans-serif;
-// font-size: 24px;
-// font-weight: 400;
-// opacity: 0.87;
-// line-height: 32px;
-// -moz-osx-font-smoothing: grayscale;
-// }
-
-// @mixin typo-title() {
-// font-family: 'Roboto', sans-serif;
-// font-size: 20px;
-// font-weight: 500;
-// opacity: 0.87;
-// line-height: 1;
-// letter-spacing: 0.02em;
-// }
-
-// @mixin typo-subhead() {
-// font-family: 'Roboto', sans-serif;
-// font-size: 16px;
-// font-weight: 400;
-// opacity: 0.87;
-// line-height: 24px;
-// letter-spacing: 0.04em;
-// }
-
-// @mixin typo-subhead-2() {
-// font-family: 'Roboto', sans-serif;
-// font-size: 16px;
-// font-weight: 400;
-// opacity: 0.87;
-// line-height: 24px;
-// letter-spacing: 0.04em;
-// }
-
-// @mixin typo-subhead-2() {
-// font-family: 'Roboto', sans-serif;
-// line-height: 28px;
-// }
-
-// @mixin typo-body-2() {
-// font-size: 14px;
-// font-weight: 500;
-// opacity: 0.87;
-// line-height: 24px;
-// letter-spacing: 0.04em;
-// }
-
-// @mixin typo-caption() {
-// font-family: 'Roboto', sans-serif;
-// font-size: 12px;
-// font-weight: 400;
-// opacity: 0.54;
-// line-height: 1;
-// letter-spacing: 0.08em;
-// }
-
-// @mixin typo-menu() {
-// font-family: 'Roboto', sans-serif;
-// font-size: 14px;
-// font-weight: 500;
-// opacity: 0.87;
-// line-height: 1;
-// letter-spacing: 0.04em;
-// }
-
-// @mixin typo-button() {
-// font-family: 'Roboto', sans-serif;
-// font-size: 14px;
-// font-weight: 500;
-// text-transform: uppercase;
-// opacity: 0.87;
-// line-height: 1;
-// letter-spacing: 0.04em;
-// }
+ h5 {
+ @include typo-heading-5();
+ }
+}
diff --git a/app/styles/components/_card.scss b/app/styles/components/_card.scss
index 32cd6979..d2901951 100644
--- a/app/styles/components/_card.scss
+++ b/app/styles/components/_card.scss
@@ -22,12 +22,11 @@
display: block;
.card-content {
- // @include typo-display-3();
padding: 0 $mobileKeyline;
}
a {
- color: $color-cyan-A700;
+ // color: $color-cyan-A700;
@include typo-button();
}
}
@@ -37,10 +36,6 @@
.card {
padding-top: 32px;
- h2 {
- @include typo-display-2();
- }
-
.card-content {
padding: 0 16px 32px 16px;
@include keyline-72l();
diff --git a/app/styles/components/_masthead.scss b/app/styles/components/_masthead.scss
index d608623e..01b2cbd5 100644
--- a/app/styles/components/_masthead.scss
+++ b/app/styles/components/_masthead.scss
@@ -36,6 +36,16 @@
min-height: 400px;
height: 60vh; // ~2/3 viewport height
max-height: 550px;
+
+ &.bg-medium-grey {
+ color: $color-bluegrey-700;
+ }
+ &.bg-cyan {
+ color: $color-cyan-900;
+ }
+ &.bg-dark-grey {
+ color: $color-bluegrey-100;
+ }
}
core-drawer-panel {
@@ -45,6 +55,9 @@ core-drawer-panel {
[main] {
overflow: auto;
}
+ core-toolbar .bottom {
+ padding-bottom: $mobileKeyline;
+ }
.drawer-panel-content {
core-menu {
margin-left: 0;
@@ -94,19 +107,18 @@ core-drawer-panel {
}
.masthead-title {
- @include typo-display-3();
- font-weight: 400;
- opacity: 1;
+ font-size: 32px;
+ font-weight: 300;
+ color: $color-cyan-A700 !important;
}
.masthead-subtitle {
- @include typo-display-2();
- color: $color-bluegrey-600;
+ color: $color-bluegrey-700;
}
paper-fab {
color: inherit;
- background: $color-card;
+ background: #fff;
position: absolute;
bottom: -20px; // paper-fab's height / 2
right: $mobileKeyline;
@@ -124,7 +136,7 @@ paper-fab {
margin-bottom: -115px;
}
- #masthead-io-meta {
+ .masthead-meta {
text-align: right;
}
diff --git a/package.json b/package.json
index 9b0e11fe..348415ac 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,6 @@
"gulp-cache": "^0.2.2",
"gulp-changed": "^1.0.0",
"gulp-chmod": "^1.2.0",
- "gulp-compass": "^1.3.2",
"gulp-csso": "^0.2.9",
"gulp-flatten": "^0.0.2",
"gulp-foreach": "0.0.1",