Skip to content
This repository has been archived by the owner on Dec 5, 2022. It is now read-only.

Commit

Permalink
Merge pull request #50 from GoogleChrome/updatedesign
Browse files Browse the repository at this point in the history 
Update design to spec
  • Loading branch information
@ebidel
ebidel committed Dec 22, 2014
2 parents 0a7eb0e + b5aea51 commit 379db5c
Show file tree
Hide file tree
Showing 7 changed files with 152 additions and 151 deletions.
12 changes: 6 additions & 6 deletions app/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@

<core-drawer-panel forceNarrow>
<div drawer>
<core-toolbar class="tall cyan-bg">
<core-toolbar class="tall bg-cyan">
<div class="top io-logo" flex></div>
<div class="bottom">
<p class="typo-white">Smarch xx - xx</p>
Expand Down Expand Up @@ -116,9 +116,9 @@
</div>
<div main>

<header class="masthead lightgrey-bg" layout vertical>
<header class="masthead bg-medium-grey" layout vertical>
<core-toolbar id="navbar" class="{{ {'core-narrow': isPhoneSize} | tokenList }}">
<paper-icon-button icon="menu" class="typo-white" core-drawer-toggle></paper-icon-button>
<paper-icon-button icon="menu" core-drawer-toggle></paper-icon-button>
<div flex></div>
<paper-tabs class="white" link>
<paper-tab>
Expand Down Expand Up @@ -149,9 +149,9 @@
</paper-tabs>
</core-toolbar>
<div class="masthead-container" flex end?="{{!isPhoneSize}}" layout vertical?="{{isPhoneSize}}" horizontal?="{{isDesktopSize || isTabletSize}}">
<div id="masthead-io-meta" layout vertical end-justified?="{{isPhoneSize}}" flex>
<h1 class="masthead-title typo-white">Smarch xx - xx</h1>
<h2 class="masthead-subtitle">Moscone Center West,<br>San Francisco</h2>
<div class="masthead-meta" layout vertical end-justified?="{{isPhoneSize}}" flex>
<h2 class="masthead-title">Smarch xx - xx</h2>
<h5 class="masthead-subtitle">Moscone Center West,<br>San Francisco</h5>
</div>
</div>
<paper-fab icon="add" mini?="{{isPhoneSize}}"></paper-fab>
Expand Down
65 changes: 51 additions & 14 deletions app/styles/base/_color.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
1 change: 1 addition & 0 deletions app/styles/base/_reset.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@

html, body {
background: $color-body;
color: $color-text;
margin: 0;
padding: 0;
height: 100%;
Expand Down
191 changes: 74 additions & 117 deletions app/styles/base/_typography.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand All @@ -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;
}
Expand All @@ -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();
}
}
Loading

0 comments on commit 379db5c

Please sign in to comment.