Merge pull request #290 from google/microsite-ui-review

Microsite ui review
master
Surma 2015-06-05 09:23:06 -07:00
commit 6f244cdcd9
36 changed files with 368 additions and 196 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.1 KiB

View File

@ -1,23 +1,18 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="156px" height="171px" viewBox="0 0 156 171" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.3 (11970) - http://www.bohemiancoding.com/sketch -->
<title>Group</title>
<svg width="156px" height="172px" viewBox="0 0 156 172" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.3.1 (12002) - http://www.bohemiancoding.com/sketch -->
<title>customize</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="About" sketch:type="MSArtboardGroup" transform="translate(-637.000000, -2280.000000)" stroke-linecap="square" stroke="#FFCCBA" stroke-width="2.43">
<g id="Group" sketch:type="MSLayerGroup" transform="translate(0.000000, 2187.000000)">
<g transform="translate(637.000000, 93.000000)" id="Line" sketch:type="MSShapeGroup">
<path d="M78.3506806,80.2458245 L119.421309,122.314653"></path>
<path d="M74.3449812,169.273813 L119.686418,122.830374"></path>
<path d="M40.2965361,122.08867 L2.18972151,83.0556888"></path>
<path d="M1.7583555,60.5428316 L1.7583555,5.15157666"></path>
<path d="M42.2993859,44.1306079 L76.3478309,7.20310462"></path>
<path d="M100.382027,1.2483711 L154.496048,1.2483711"></path>
<path d="M114.401975,44.1306079 L150.675128,81.2853613"></path>
<path d="M152.070856,105.676447 L152.070856,156.964646"></path>
</g>
</g>
<g id="customize" sketch:type="MSLayerGroup" fill="#FFCCBA">
<path d="M118.32493,123.582464 L74.7730652,169.029045 L76.9390974,171.104691 L122.478266,123.582463 L80.7206306,80.2131323 L78.5595349,82.2939171 L118.32493,123.582464 Z" id="Shape" sketch:type="MSShapeGroup"></path>
<path d="M42.3698536,122.04082 L4.26303897,83.0078388 L2.11640405,85.1035388 L40.2232186,124.13652 L42.3698536,122.04082 L42.3698536,122.04082 Z" id="Shape" sketch:type="MSShapeGroup"></path>
<path d="M3.5,61.5428316 L3.5,6.15157666 L0.5,6.15157666 L0.5,61.5428316 L3.5,61.5428316 L3.5,61.5428316 Z" id="Shape" sketch:type="MSShapeGroup"></path>
<path d="M44.4021636,46.1474074 L78.4506086,9.21990413 L76.2450532,7.18630511 L42.1966082,44.1138084 L44.4021636,46.1474074 L44.4021636,46.1474074 Z" id="Shape" sketch:type="MSShapeGroup"></path>
<path d="M101.382027,3.5 L155.496048,3.5 L155.496048,0.5 L101.382027,0.5 L101.382027,3.5 L101.382027,3.5 Z" id="Shape" sketch:type="MSShapeGroup"></path>
<path d="M114.328658,46.1784579 L150.601811,83.3332113 L152.748445,81.2375113 L116.475292,44.0827579 L114.328658,46.1784579 L114.328658,46.1784579 Z" id="Shape" sketch:type="MSShapeGroup"></path>
<path d="M151.5,157.964646 L154.5,157.964646 L154.5,106.676447 L151.5,106.676447 L151.5,157.964646 Z" id="Shape" sketch:type="MSShapeGroup"></path>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

View File

@ -1,23 +1,19 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="176px" height="201px" viewBox="0 0 176 201" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.3 (11970) - http://www.bohemiancoding.com/sketch -->
<title>mo</title>
<svg width="182px" height="171px" viewBox="0 0 182 171" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.3.1 (12002) - http://www.bohemiancoding.com/sketch -->
<title>customize copy</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="About" sketch:type="MSArtboardGroup" transform="translate(-656.000000, -2263.000000)" stroke-linecap="square" stroke="#FFCCBA" stroke-width="2.43">
<g id="Group" sketch:type="MSLayerGroup" transform="translate(0.000000, 2187.000000)">
<g id="mo" transform="translate(715.000000, 212.500000) rotate(22.000000) translate(-715.000000, -212.500000) translate(637.000000, 93.000000)" sketch:type="MSShapeGroup">
<path d="M78.3506806,80.2458245 L119.421309,122.314653" id="Line"></path>
<path d="M74.3449812,169.273813 L119.686418,122.830374" id="Line"></path>
<path d="M40.2965361,122.08867 L2.18972151,83.0556888" id="Line"></path>
<path d="M1.7583555,60.5428316 L1.7583555,5.15157666" id="Line"></path>
<path d="M42.2993859,44.1306079 L76.3478309,7.20310462" id="Line"></path>
<path d="M100.382027,1.2483711 L154.496048,1.2483711" id="Line"></path>
<path d="M114.401975,44.1306079 L150.675128,81.2853613" id="Line"></path>
<path d="M152.070856,105.676447 L152.070856,156.964646" id="Line"></path>
</g>
</g>
<g id="customize-copy" sketch:type="MSLayerGroup" fill="#FFCCBA">
<path d="M92.3321375,95.1035921 L134.332137,138.103593 L136.478266,136.007374 L94.478266,93.0073736 L92.3321375,95.1035921 L92.3321375,95.1035921 Z" id="Shape" sketch:type="MSShapeGroup" transform="translate(114.405202, 115.555483) rotate(30.000000) translate(-114.405202, -115.555483) "></path>
<path d="M90.4981021,184.734312 L136.163856,137.08309 L133.997891,135.007374 L88.3321375,182.658596 L90.4981021,184.734312 L90.4981021,184.734312 Z" id="Shape" sketch:type="MSShapeGroup" transform="translate(112.247997, 159.870843) rotate(30.000000) translate(-112.247997, -159.870843) "></path>
<path d="M56.3698536,135.04082 L18.263039,96.0078388 L16.116404,98.1035388 L54.2232186,137.13652 L56.3698536,135.04082 L56.3698536,135.04082 Z" id="Shape" sketch:type="MSShapeGroup" transform="translate(36.243129, 116.572179) rotate(30.000000) translate(-36.243129, -116.572179) "></path>
<path d="M17.5,74.5428316 L17.5,19.1515767 L14.5,19.1515767 L14.5,74.5428316 L17.5,74.5428316 L17.5,74.5428316 Z" id="Shape" sketch:type="MSShapeGroup" transform="translate(16.000000, 46.847204) rotate(30.000000) translate(-16.000000, -46.847204) "></path>
<path d="M58.4021636,59.1474074 L92.4506086,22.2199041 L90.2450532,20.1863051 L56.1966082,57.1138084 L58.4021636,59.1474074 L58.4021636,59.1474074 Z" id="Shape" sketch:type="MSShapeGroup" transform="translate(74.323608, 39.666856) rotate(30.000000) translate(-74.323608, -39.666856) "></path>
<path d="M115.382027,16.5 L169.496048,16.5 L169.496048,13.5 L115.382027,13.5 L115.382027,16.5 L115.382027,16.5 Z" id="Shape" sketch:type="MSShapeGroup" transform="translate(142.439037, 15.000000) rotate(30.000000) translate(-142.439037, -15.000000) "></path>
<path d="M128.328658,59.1784579 L164.601811,96.3332113 L166.748445,94.2375113 L130.475292,57.0827579 L128.328658,59.1784579 L128.328658,59.1784579 Z" id="Shape" sketch:type="MSShapeGroup" transform="translate(147.538552, 76.707985) rotate(30.000000) translate(-147.538552, -76.707985) "></path>
<path d="M165.5,170.964646 L168.5,170.964646 L168.5,119.676447 L165.5,119.676447 L165.5,170.964646 L165.5,170.964646 Z" id="Shape" sketch:type="MSShapeGroup" transform="translate(167.000000, 145.320546) rotate(30.000000) translate(-167.000000, -145.320546) "></path>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
docs/_assets/favicon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 905 B

BIN
docs/_assets/header.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 70 KiB

BIN
docs/_assets/header_2x.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 392 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

View File

@ -1,17 +1,12 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="35px" height="35px" viewBox="0 0 35 35" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.3 (11970) - http://www.bohemiancoding.com/sketch -->
<title>MDL logo</title>
<svg width="121px" height="121px" viewBox="0 0 121 121" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.3.1 (12002) - http://www.bohemiancoding.com/sketch -->
<title>MDL-logo</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="Template-1---Left-nav" sketch:type="MSArtboardGroup" transform="translate(-56.000000, -56.000000)" stroke-width="3" stroke="#FFFFFF">
<g id="Header-icons-+-logo" sketch:type="MSLayerGroup" transform="translate(56.000000, 56.000000)">
<g id="MDL-logo" sketch:type="MSShapeGroup">
<path d="M0,0 L35,0 L35,35 L0,35 L0,0 Z" id="Shape"></path>
<path d="M35,0 L17.5,35 L0,0 L35,0 Z" id="Shape"></path>
</g>
</g>
<g id="MDL-logo" sketch:type="MSLayerGroup" transform="translate(2.000000, 1.000000)" stroke="#FFFFFF" stroke-width="3">
<path d="M116,1 L117,1 L117,118 L0,118 L0,1 L1.49145299,1 L1.49145299,1 L58.2521552,116.49569 L58,117 L58.2521552,116.49569 L1.49145299,1 L116,1 L58.2521552,116.49569 L58.5,117 L58.2521552,116.49569 L116,1 Z" id="Shape" sketch:type="MSShapeGroup"></path>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 955 B

View File

@ -2,12 +2,16 @@ html > body {
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif !important;
}
.mdl-layout__header {
height: 50vh;
height: 33vh;
flex-shrink: 0;
background-size: auto 30%;
background-repeat: no-repeat;
background-position: center center;
box-shadow: none !important;
align-items: flex-start;
padding: 40px;
flex-shrink: 0;
position: relative;
}
.mdl-layout__header .mdl-textfield {
padding-top: 0;
@ -17,8 +21,14 @@ html > body {
align-items: flex-start;
height: auto;
}
.mdl-layout__header > .mdl-navigation {
position: absolute;
bottom: 1px;
left: 0;
width: 100%;
}
.mdl-layout-title {
font-weight: 300;
font-weight: 500;
text-transform: uppercase;
line-height: 1.5em;
font-size: 1rem;
@ -30,36 +40,61 @@ html > body {
background-color: #37474f;
background-image: url('logo.svg');
}
.about .mdl-navigation {
background-color: #37474f;
.mdl-layout__header {
box-shadow: none !important;
}
.mdl-layout__header .mdl-textfield .mdl-button {
right: 0;
}
.mdl-layout__header .mdl-textfield .mdl-textfield__expandable-holder {
margin-right: 32px;
}
.mdl-layout__header .mdl-textfield label:after {
background-color: rgba(255, 255, 255, 0.12);
}
body.about .mdl-layout__header {
background: url('logo.svg'), url('header.jpg');
background-size: auto 30%, cover;
background-repeat: no-repeat, no-repeat;
background-position: center center, center center;
}
@media all and (-webkit-min-device-pixel-ratio: 2) {
.about .mdl-layout__header {
background: url('logo.svg'), url('header_2x.jpg');
background-size: auto 30%, cover;
background-repeat: no-repeat, no-repeat;
background-position: center center, center center;
}
}
body:not(.about) .mdl-layout__header {
background-size: auto 30%;
background-repeat: no-repeat;
background-position: center center;
}
.templates .mdl-layout__header {
background-color: #00ACC2;
background-color: #263238;
background-image: url('templates.svg');
}
.templates .mdl-navigation {
background-color: #00ACC2;
}
.components .mdl-layout__header {
background-color: #E90974;
background-color: #C2185B;
background-image: url('components.svg');
}
.components .mdl-navigation {
background-color: #E90974;
}
.styles .mdl-layout__header {
background-color: #8F4099;
background-color: #8E24AA;
background-image: url('styles.svg');
}
.styles .mdl-navigation {
background-color: #8F4099;
}
.customize .mdl-layout__header {
background-color: #191E80;
background-color: #1A237E;
background-image: url('customize.svg');
}
.customize .mdl-navigation {
background-color: #191E80;
body:not(.about) .mdl-layout__header {
box-sizing: border-box;
height: 144px;
padding-top: 0;
background-position: 40px 32px;
}
body:not(.about) .mdl-layout-title {
display: none;
}
.mdl-navigation {
box-shadow: none !important;
@ -68,9 +103,19 @@ html > body {
width: 100%;
height: 64px;
flex-shrink: 0;
padding-left: 16px !important;
}
.mdl-navigation span.mdl-icon {
font-size: 24px;
margin-right: 8px;
}
.mdl-navigation a {
font-weight: 300;
display: flex;
}
.mdl-navigation a, section.download {
font-weight: 500;
font-size: 13px;
text-transform: uppercase;
line-height: 64px;
padding: 0 24px;
color: white;
@ -83,9 +128,22 @@ html > body {
.mdl-navigation a:not(.download) {
opacity: 0.65;
}
.mdl-navigation a.download > span {
opacity: 0.65;
}
.mdl-navigation .mdl-layout-spacer ~ a {
text-transform: none;
}
.mdl-navigation .mdl-layout-spacer ~ a:hover {
background-color: transparent;
}
.mdl-navigation a.download {
text-decoration: none;
}
.mdl-navigation a.download > span {
color: inherit;
text-decoration: inherit;
}
.mdl-navigation a.download button {
margin-left: 8px;
}
@ -107,7 +165,6 @@ html > body {
.mdl-layout__content > section.download {
width: 100%;
height: 6rem;
font-size: 1.5rem;
display: flex;
justify-content: center;
align-items: center;
@ -131,8 +188,10 @@ html > body {
justify-content: center;
align-items: center;
}
.mdl-mini-footer ul > * {
.mdl-mini-footer ul > a {
margin: 0 8px;
font-weight: 400;
font-size: 12px;
}
.about-panel {
@ -142,8 +201,10 @@ html > body {
}
.about-panel--text {
padding: 100px;
}
.about-panel--text p {
width: 640px;
margin: 0 auto;
width: 100%;
line-height: 2em;
}
.about-panel--text dl {
@ -156,13 +217,13 @@ html > body {
.about-panel--text dl dt {
text-align: right;
vertical-align: top;
width: 33%;
width: 160px;
margin-right: 24px;
}
.about-panel--text dl dd {
text-align: left;
vertical-align: top;
width: 66%;
width: 600px;
margin: 0;
margin-left: 24px;
}
@ -207,6 +268,7 @@ html > body {
background-image: url(styles_mo.svg);
}
.about-panel--customize {
height: 400px;
background-color: #191E80;
background-image: url(customize.svg);
}
@ -223,23 +285,23 @@ html > body {
.template {
width: 100%;
margin-bottom: 72px;
align-items: flex-start;
}
.template > .template__meta {
align-content: flex-start;
}
.template > .template__meta.template__meta > * {
margin-bottom: 24px;
}
.template > .template__meta > *:last-child {
margin-bottom: 0px;
}
.template > .template__meta a {
color:inherit;
}
.template > .template__preview {
background-position: center center;
background-size: cover;
min-height: 30vh;
height: auto;
}
.template.template--product > .template__preview {
background-image: url('template_product.jpg');
}
.template.template--general > .template__preview {
background-image: url('template_general.jpg');
}
.mdl-layout__content p {
font-size: 15px;
margin-bottom: 32px;
@ -269,8 +331,7 @@ html > body {
}
.mdl-layout__content a {
color: #c2185b;
font-weight: bold;
@extend mdl-color-text--cyan-600;
text-decoration: none;
}
@ -292,3 +353,42 @@ button a {
.component-description .mdl-button:first-of-type {
margin-top: 8px;
}
.social-btn {
background-position: center;
background-size: contain;
background-repeat: no-repeat;
background-color: transparent;
}
.social-btn__twitter {
background-image: url('https://www.gstatic.com/images/icons/material/system/1x/post_twitter_white_24dp.png');
}
.social-btn__blogger {
background-image: url('https://www.gstatic.com/images/icons/material/system/1x/post_blogger_white_24dp.png');
}
.social-btn__gplus {
background-image: url('https://www.gstatic.com/images/icons/material/system/1x/post_gplus_white_24dp.png');
}
@media all and (-webkit-min-device-pixel-ratio: 2) {
.social-btn__twitter {
background-image: url('https://www.gstatic.com/images/icons/material/system/2x/post_twitter_white_24dp.png');
}
.social-btn__blogger {
background-image: url('https://www.gstatic.com/images/icons/material/system/2x/post_blogger_white_24dp.png');
}
.social-btn__gplus {
background-image: url('https://www.gstatic.com/images/icons/material/system/2x/post_gplus_white_24dp.png');
}
}
.subpageheader {
height: 80px;
display: flex;
align-items: center;
padding: 0 40px;
flex-shrink: 0;
text-transform: uppercase;
font-size: 16px;
font-weight: 500;
}
.about .subpageheader {
display: none;
}

View File

@ -1,24 +1,15 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="333px" height="297px" viewBox="0 0 333 297" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.3.1 (12005) - http://www.bohemiancoding.com/sketch -->
<svg width="252px" height="298px" viewBox="0 0 252 298" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.3.1 (12002) - http://www.bohemiancoding.com/sketch -->
<title>styles</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="styles" sketch:type="MSLayerGroup" transform="translate(2.000000, 0.000000)">
<g id="Page-1" transform="translate(2.000000, 2.000000)" stroke-width="3" sketch:type="MSShapeGroup">
<g id="About">
<g id="Group-5">
<path d="M125,136.297592 L125,291.5" id="Line-3" stroke="#EA5B61"></path>
<path d="M247,61.2975922 L247,216.5" id="Line-3" stroke="#EA5B61"></path>
<path d="M0,77.2975922 L0,232.5" id="Line-3" stroke="#EA5B61"></path>
<path d="M0.5,233.5 L126,293" id="Line" stroke="#EA5B61"></path>
<path d="M126.5,292.5 L245.5,218.5" id="Line" stroke="#EA5B61"></path>
<path d="M0,76 L124,0 L246,59 L124,135 L0,76 L0,76 Z" id="Path-3" stroke="#FFFFFF"></path>
<g id="styles" sketch:type="MSLayerGroup" transform="translate(0.000000, -1.000000)">
<g id="Line-3-+-Shape" transform="translate(0.000000, 62.000000)" fill="#EA5B61" sketch:type="MSShapeGroup">
<path d="M127.5,232.80966 L127.5,76.297592 L124.5,76.297592 L124.5,232.318538 L3.32910156,173.232307 L3.32910156,17.1943359 L0.329101562,17.1943359 L0.329101563,175.085808 L126.803667,236.779663 L250.712891,159.526792 L250.712891,0.219169188 L247.712891,0.219169188 L247.712891,157.818489 L127.5,232.80966 Z" id="Shape"></path>
</g>
</g>
</g>
<rect id="Rectangle-2" stroke-opacity="0.01" stroke="#979797" sketch:type="MSShapeGroup" x="0" y="0" width="331" height="297"></rect>
<path d="M126.542005,139.839072 L251.125977,62.1313477 L125.935438,1 L0.125976552,79.1210952 L126.542005,139.839072 Z M126.124,136.410152 L244.875835,62.1757813 L126.124,4.65283203 L6.46650378,78.9510133 L126.124,136.410152 Z" id="Path" fill="#FFFFFF" sketch:type="MSShapeGroup"></path>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

View File

@ -1,24 +1,15 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="333px" height="297px" viewBox="0 0 333 297" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.3.1 (12005) - http://www.bohemiancoding.com/sketch -->
<title>styles_mo</title>
<svg width="331px" height="298px" viewBox="0 0 331 298" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.3.1 (12002) - http://www.bohemiancoding.com/sketch -->
<title>styles</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="styles_mo" sketch:type="MSLayerGroup" transform="translate(2.000000, 0.000000)">
<g id="Page-1" transform="translate(2.000000, 2.000000)" stroke-width="3" sketch:type="MSShapeGroup">
<g id="About">
<g id="mo">
<path d="M125,136.297592 L205,291.5" id="Line-3" stroke="#EA5B61"></path>
<path d="M247,61.2975922 L327,216.5" id="Line-3" stroke="#EA5B61"></path>
<path d="M0,77.2975922 L80,232.5" id="Line-3" stroke="#EA5B61"></path>
<path d="M80.5,233.5 L206,293" id="Line" stroke="#EA5B61"></path>
<path d="M206.5,292.5 L325.5,218.5" id="Line" stroke="#EA5B61"></path>
<path d="M0,76 L124,0 L246,59 L124,135 L0,76 L0,76 Z" id="Path-3" stroke="#FFFFFF"></path>
<g id="styles" sketch:type="MSLayerGroup" transform="translate(0.000000, -1.000000)">
<g id="Line-3-+-Shape" transform="translate(0.000000, 62.000000)" fill="#EA5B61" sketch:type="MSShapeGroup">
<path d="M207.249961,233.725588 L207.205676,233.638168 L207.37247,233.719233 L207.249961,233.725588 Z M206.957444,233.148153 L127.5,76.297592 L124.5,76.297592 L203.225801,231.703875 L82.5410156,173.048835 L3.32910156,17.1943359 L0.329101562,17.1943359 L80.3291016,175.085808 L206.803667,236.779663 L330.712891,159.526792 L250.712891,0.219169188 L247.712891,0.219169188 L327.330078,158.061531 L206.957444,233.148153 Z" id="Shape"></path>
</g>
</g>
</g>
<rect id="Rectangle-2" stroke-opacity="0.01" stroke="#979797" sketch:type="MSShapeGroup" x="0" y="0" width="331" height="297"></rect>
<path d="M126.542005,139.839072 L251.125977,62.1313477 L125.935438,1 L0.125976552,79.1210952 L126.542005,139.839072 Z M126.124,136.410152 L244.875835,62.1757813 L126.124,4.65283203 L6.46650378,78.9510133 L126.124,136.410152 Z" id="Path" fill="#FFFFFF" sketch:type="MSShapeGroup"></path>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

View File

@ -1,15 +1,17 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="279px" height="251px" viewBox="0 0 279 251" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.3 (11970) - http://www.bohemiancoding.com/sketch -->
<title>Path 1 + Path 1 + Path 1</title>
<svg width="287px" height="255px" viewBox="0 0 287 255" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.3.1 (12002) - http://www.bohemiancoding.com/sketch -->
<title>templates_mo</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="About" sketch:type="MSArtboardGroup" transform="translate(-582.000000, -1056.000000)" stroke-width="3">
<g id="Path-1-+-Path-1-+-Path-1" sketch:type="MSLayerGroup" transform="translate(582.000000, 1056.000000)">
<path d="M123.409063,112 L279,180.394072 L155.590937,251 L0,182.605928 L123.409063,112 L123.409063,112 Z" id="Rectangle-8" stroke="#204489" sketch:type="MSShapeGroup"></path>
<path d="M279,124.394072 L155.590937,195 L0,126.605928 L123.409063,56 L279,124.394072 Z" id="Rectangle-8" stroke="#18BFD6" sketch:type="MSShapeGroup"></path>
<path d="M279,68.3940718 L155.590937,139 L0,70.6059282 L123.409063,0 L279,68.3940718 Z" id="Rectangle-8" stroke="#FFFFFF" sketch:type="MSShapeGroup"></path>
<g id="templates_mo" sketch:type="MSLayerGroup">
<g id="Page-1" sketch:type="MSShapeGroup">
<g id="templates_mo">
<path d="M0.672279839,184.781666 L159.679524,254.677465 L286.32772,182.218334 L127.320476,112.322535 L0.672279839,184.781666 Z M7.28287763,184.513997 L159.512536,251.321935 L279.816416,182.543294 L127.484375,115.674642 L7.28287763,184.513997 Z" id="Path" fill="#204489"></path>
<path d="M0.672279839,128.781666 L159.679524,198.677465 L286.32772,126.218334 L127.320476,56.322535 L0.672279839,128.781666 Z M7.28287763,128.513997 L159.512536,195.321935 L279.816416,126.543294 L127.484375,59.6746419 L7.28287763,128.513997 Z" id="Path-Copy-2" fill="#18BFD6"></path>
<path d="M0.672279839,72.7816655 L159.679524,142.677465 L286.32772,70.2183345 L127.320476,0.32253504 L0.672279839,72.7816655 Z M7.28287763,72.5139974 L159.512536,139.321935 L279.816416,70.5432943 L127.484375,3.67464191 L7.28287763,72.5139974 Z" id="Path-Copy-3" fill="#FFFFFF"></path>
</g>
</g>
</g>
</g>

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 62 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 200 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 39 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 94 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 111 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 298 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 123 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 364 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 95 KiB

View File

@ -1,15 +1,17 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="279px" height="251px" viewBox="0 0 279 251" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.3 (11970) - http://www.bohemiancoding.com/sketch -->
<title>Path 1 + Path 1 + Path 1</title>
<svg width="287px" height="335px" viewBox="0 0 287 335" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.3.1 (12002) - http://www.bohemiancoding.com/sketch -->
<title>templates_mo</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="About" sketch:type="MSArtboardGroup" transform="translate(-582.000000, -1056.000000)" stroke-width="3">
<g id="Path-1-+-Path-1-+-Path-1" sketch:type="MSLayerGroup" transform="translate(582.000000, 1056.000000)">
<path d="M123.409063,112 L279,180.394072 L155.590937,251 L0,182.605928 L123.409063,112 L123.409063,112 Z" id="Rectangle-8" stroke="#204489" fill="#204489" sketch:type="MSShapeGroup"></path>
<path d="M279,124.394072 L155.590937,195 L0,126.605928 L123.409063,56 L279,124.394072 Z" id="Rectangle-8" stroke="#18BFD6" fill="#18BFD6" sketch:type="MSShapeGroup"></path>
<path d="M279,68.3940718 L155.590937,139 L0,70.6059282 L123.409063,0 L279,68.3940718 Z" id="Rectangle-8" stroke="#FFFFFF" fill="#FFFFFF" sketch:type="MSShapeGroup"></path>
<g id="templates_mo" sketch:type="MSLayerGroup">
<g id="Page-1" sketch:type="MSShapeGroup">
<g id="templates_mo">
<path d="M0.672279839,264.781666 L159.679524,334.677465 L286.32772,262.218334 L127.320476,192.322535 L0.672279839,264.781666 Z M7.28287763,264.513997 L159.512536,331.321935 L279.816416,262.543294 L127.484375,195.674642 L7.28287763,264.513997 Z" id="Path" fill="#204489"></path>
<path d="M0.672279839,168.781666 L159.679524,238.677465 L286.32772,166.218334 L127.320476,96.322535 L0.672279839,168.781666 Z M7.28287763,168.513997 L159.512536,235.321935 L279.816416,166.543294 L127.484375,99.6746419 L7.28287763,168.513997 Z" id="Path-Copy-2" fill="#18BFD6"></path>
<path d="M0.672279839,72.7816655 L159.679524,142.677465 L286.32772,70.2183345 L127.320476,0.32253504 L0.672279839,72.7816655 Z M7.28287763,72.5139974 L159.512536,139.321935 L279.816416,70.5432943 L127.484375,3.67464191 L7.28287763,72.5139974 Z" id="Path-Copy-3" fill="#FFFFFF"></path>
</g>
</g>
</g>
</g>

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

View File

@ -18,7 +18,9 @@ include_prefix: ./
</section>
<section class="about-panel about-panel--text mdl-cell mdl-cell--12-col">
<p>
Esse dolor ullamco ipsum enim aliquip minim. Sunt ullamco excepteur laboris nulla sunt. Consequat labore irure sint cillum aute labore est cupidatat eu. Culpa sint do non amet quis quis fugiat laboris sit sint id Lorem. Dolor adipisicing eu nostrud eiusmod sint consequat enim est velit et non mollit minim.
</p>
</section>
<section class="about-panel about-panel--components mdl-color-text--white mdl-cell mdl-cell--6-col-desktop mdl-cell--4-col" data-target="components">
@ -32,6 +34,8 @@ include_prefix: ./
</section>
<section class="about-panel about-panel--text mdl-cell--12-col">
<p>
Cillum magna sit ea exercitation excepteur enim pariatur ex deserunt. Deserunt aute nisi in laboris anim proident sunt enim pariatur quis. Aliqua anim voluptate veniam ad eiusmod ullamco deserunt. Laborum duis proident ipsum ex velit sint sint veniam amet eu Lorem. Nostrud adipisicing consequat deserunt magna consectetur pariatur culpa qui do. Ex dolor incididunt laborum ex ea non ea incididunt labore laboris minim consequat cillum. Proident nisi pariatur amet velit exercitation Lorem officia irure occaecat in deserunt. Tempor enim culpa do eu ipsum consequat irure amet officia.
</p>
</section>
<script src="assets/index.js" async></script>

View File

@ -4,22 +4,22 @@ title: Templates
bodyclass: templates
include_prefix: ../
templates:
- name: product
title: Product
description: Laborum quis laboris veniam minim labore id excepteur.
- name: blog
title: Blog
description: Deserunt dolor dolore ut excepteur tempor occaecat aliqua sunt eu velit incididunt irure irure in.
- name: general
title: Universal
description: Esse irure aliqua amet ullamco aliqua ullamco est exercitation adipisicing nisi laborum sit labore voluptate.
- name: dashboard
title: Dashboard
description: Non laboris consequat ullamco aute cillum ad.
- name: text-only
title: Text-heavy webpage
description: Laborum quis laboris veniam minim labore id excepteur.
- name: article
title: Stand-alone article
description: Non laboris consequat ullamco aute cillum ad.
- name: general
title: Universal
description: Esse irure aliqua amet ullamco aliqua ullamco est exercitation adipisicing nisi laborum sit labore voluptate.
- name: blog
title: Blog
description: Deserunt dolor dolore ut excepteur tempor occaecat aliqua sunt eu velit incididunt irure irure in.
- name: product
title: Product
description: Laborum quis laboris veniam minim labore id excepteur.
- name: dashboard
title: Dashboard
description: Non laboris consequat ullamco aute cillum ad.
---

View File

@ -13,20 +13,21 @@
<!-- Fallback to homescreen for Chrome <39 on Android -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="application-name" content="Material Design Lite">
<link rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon-192x192.png">
<link rel="icon" sizes="192x192" href="{{page.include_prefix}}assets/android-desktop.png">
<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Material Design Lite">
<link rel="apple-touch-icon" href="images/touch/apple-touch-icon.png">
<link rel="apple-touch-icon" href="{{page.include_prefix}}assets/ios-desktop.png">
<!-- Tile icon for Win8 (144x144 + tile color) -->
<meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
<meta name="msapplication-TileColor" content="#3372DF">
<!-- TODO: Tile icon for Win8 (144x144 + tile color) -->
<!-- <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png"> -->
<!-- <meta name="msapplication-TileColor" content="#3372DF"> -->
<meta name="theme-color" content="#3372DF">
<meta name="theme-color" content="#263238">
<link rel="shortcut icon" href="{{page.include_prefix}}assets/favicon.png" />
<!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
<!--
<link rel="canonical" href="http://www.example.com/">
@ -58,15 +59,14 @@
</div>
</div>
</div>
</header>
<nav class="mdl-navigation mdl-js-ripple-effect">
<a href="{{page.include_prefix}}" class="mdl-navigation__link about">About</a>
<a href="{{page.include_prefix}}templates" class="mdl-navigation__link templates">Templates</a>
<a href="{{page.include_prefix}}components" class="mdl-navigation__link components">Components</a>
<a href="{{page.include_prefix}}styles" class="mdl-navigation__link styles">Styles</a>
<a href="{{page.include_prefix}}customize" class="mdl-navigation__link customize">Customize</a>
<a href="https://github.com/google/material-design-lite" class="mdl-navigation__link">GitHub</a>
<div class="mdl-layout-spacer"></div>
<a href="https://github.com/google/material-design-lite" class="mdl-navigation__link"><span class="mdl-icon mdl-icon--link"></span>GitHub</a>
<a href="#" class="download">
Download
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--fab mdl-button--mini-fab mdl-color--lime-A200">
@ -74,6 +74,8 @@
</button>
</a>
</nav>
</header>
<div class="subpageheader">{{page.title}}</div>
<main class="mdl-layout__content mdl-color-text--grey-600">
<div class="content mdl-grid mdl-grid--no-spacing">
{% block content %}
@ -85,14 +87,14 @@
</section>
<footer class="mdl-mini-footer mdl-color--grey-900">
<ul>
<button class="mdl-mini-footer--social-btn"></button>
<button class="mdl-mini-footer--social-btn"></button>
<button class="mdl-mini-footer--social-btn"></button>
<button class="mdl-mini-footer--social-btn social-btn social-btn__twitter"></button>
<button class="mdl-mini-footer--social-btn social-btn social-btn__blogger"></button>
<button class="mdl-mini-footer--social-btn social-btn social-btn__gplus"></button>
</ul>
<ul>
<a href="https://developers.google.com/web/starter-kit/">Web Starter Kit</a>
<a href="#">Help</a>
<a href="#">Privacy & Terms</a>
<a class="mdl-color-text--grey-600" href="https://developers.google.com/web/starter-kit/">Web Starter Kit</a>
<a class="mdl-color-text--grey-600" href="#">Help</a>
<a class="mdl-color-text--grey-600" href="#">Privacy & Terms</a>
</ul>
</footer>
</main>

View File

@ -3,7 +3,7 @@
{% for template in page.templates %}
<section class="template template--{{ template.name }} mdl-grid mdl-cell mdl-cell--12-col">
<div class="template__meta mdl-cell mdl-cell--4-col mdl-grid mdl-grid--no-spacing">
<h3 class="template__header mdl-cell mdl-cell--12-col">{{ template.title }}</h3>
<h3 class="template__header mdl-cell mdl-cell--12-col mdl-typography--body-2">{{ template.title }}</h3>
<p class="mdl-cell mdl-cell--12-col">
{{ template.description }}
</p>
@ -20,8 +20,7 @@
Preview
</a>
</div>
<div class="template__preview mdl-cell mdl-cell--8-col" style="background-image: url('{{page.include_prefix}}/assets/template_{{ template.name }}.jpg');">
</div>
<img src="{{page.include_prefix}}/assets/templates/{{ template.name }}.jpg" srcset="{{page.include_prefix}}/assets/templates/{{ template.name }}.jpg 1x, {{page.include_prefix}}/assets/templates/{{ template.name }}_2x.jpg 2x" class="template__preview mdl-cell mdl-cell--8-col">
</section>
{% endfor %}
{% endblock %}

View File

@ -323,7 +323,7 @@ gulp.task('pages', ['components'], function() {
* Copies assets from MDL and _assets directory.
*/
gulp.task('assets', function () {
return gulp.src(['docs/_assets/**'])
return gulp.src(['docs/_assets/**/*'])
.pipe($.if(/\.(svg|jpg|png)$/i, $.imagemin({
progressive: true,
interlaced: true

View File

@ -85,6 +85,24 @@
<p>
Commodo nisi non consectetur voluptate incididunt mollit duis dolore amet amet tempor exercitation. Qui amet aute ea aute id ad aliquip proident. Irure duis qui labore deserunt enim in quis nisi sint consequat aliqua. Ex proident labore et laborum tempor fugiat sint magna veniam minim. Nulla dolor labore adipisicing in enim mollit laboris fugiat eu. Aliquip minim cillum ullamco voluptate non dolore non ex duis fugiat duis ad. Deserunt cillum ad et nisi amet non voluptate culpa qui do. Labore ullamco et minim proident est laborum mollit ad labore deserunt ut irure dolore. Reprehenderit ad ad irure ut irure qui est eu velit eu excepteur adipisicing culpa. Laborum cupidatat ullamco eu duis anim reprehenderit proident aute ad consectetur eiusmod.
</p>
<p>
Cillum dolor esse sit incididunt velit eiusmod magna ad nostrud officia aute dolor dolor. Magna esse ullamco pariatur adipisicing consectetur eu commodo officia. Ex cillum consequat mollit minim elit est deserunt occaecat nisi amet. Quis aliqua nostrud Lorem occaecat sunt. Eiusmod quis amet ullamco aliquip dolore ut incididunt duis adipisicing. Elit consequat nisi eiusmod aute ipsum sunt veniam do est. Occaecat mollit aliquip ut proident consectetur amet ex dolore consectetur aliqua elit.
</p>
<p>
Commodo nisi non consectetur voluptate incididunt mollit duis dolore amet amet tempor exercitation. Qui amet aute ea aute id ad aliquip proident. Irure duis qui labore deserunt enim in quis nisi sint consequat aliqua. Ex proident labore et laborum tempor fugiat sint magna veniam minim. Nulla dolor labore adipisicing in enim mollit laboris fugiat eu. Aliquip minim cillum ullamco voluptate non dolore non ex duis fugiat duis ad. Deserunt cillum ad et nisi amet non voluptate culpa qui do. Labore ullamco et minim proident est laborum mollit ad labore deserunt ut irure dolore. Reprehenderit ad ad irure ut irure qui est eu velit eu excepteur adipisicing culpa. Laborum cupidatat ullamco eu duis anim reprehenderit proident aute ad consectetur eiusmod.
</p>
<p>
Cillum dolor esse sit incididunt velit eiusmod magna ad nostrud officia aute dolor dolor. Magna esse ullamco pariatur adipisicing consectetur eu commodo officia. Ex cillum consequat mollit minim elit est deserunt occaecat nisi amet. Quis aliqua nostrud Lorem occaecat sunt. Eiusmod quis amet ullamco aliquip dolore ut incididunt duis adipisicing. Elit consequat nisi eiusmod aute ipsum sunt veniam do est. Occaecat mollit aliquip ut proident consectetur amet ex dolore consectetur aliqua elit.
</p>
<p>
Commodo nisi non consectetur voluptate incididunt mollit duis dolore amet amet tempor exercitation. Qui amet aute ea aute id ad aliquip proident. Irure duis qui labore deserunt enim in quis nisi sint consequat aliqua. Ex proident labore et laborum tempor fugiat sint magna veniam minim. Nulla dolor labore adipisicing in enim mollit laboris fugiat eu. Aliquip minim cillum ullamco voluptate non dolore non ex duis fugiat duis ad. Deserunt cillum ad et nisi amet non voluptate culpa qui do. Labore ullamco et minim proident est laborum mollit ad labore deserunt ut irure dolore. Reprehenderit ad ad irure ut irure qui est eu velit eu excepteur adipisicing culpa. Laborum cupidatat ullamco eu duis anim reprehenderit proident aute ad consectetur eiusmod.
</p>
<p>
Cillum dolor esse sit incididunt velit eiusmod magna ad nostrud officia aute dolor dolor. Magna esse ullamco pariatur adipisicing consectetur eu commodo officia. Ex cillum consequat mollit minim elit est deserunt occaecat nisi amet. Quis aliqua nostrud Lorem occaecat sunt. Eiusmod quis amet ullamco aliquip dolore ut incididunt duis adipisicing. Elit consequat nisi eiusmod aute ipsum sunt veniam do est. Occaecat mollit aliquip ut proident consectetur amet ex dolore consectetur aliqua elit.
</p>
<p>
Commodo nisi non consectetur voluptate incididunt mollit duis dolore amet amet tempor exercitation. Qui amet aute ea aute id ad aliquip proident. Irure duis qui labore deserunt enim in quis nisi sint consequat aliqua. Ex proident labore et laborum tempor fugiat sint magna veniam minim. Nulla dolor labore adipisicing in enim mollit laboris fugiat eu. Aliquip minim cillum ullamco voluptate non dolore non ex duis fugiat duis ad. Deserunt cillum ad et nisi amet non voluptate culpa qui do. Labore ullamco et minim proident est laborum mollit ad labore deserunt ut irure dolore. Reprehenderit ad ad irure ut irure qui est eu velit eu excepteur adipisicing culpa. Laborum cupidatat ullamco eu duis anim reprehenderit proident aute ad consectetur eiusmod.
</p>
</div>
</div>
</main>

View File

@ -20,6 +20,12 @@ header.mdl-layout__header {
display: flex !important;
}
.container {
max-width: 1600px;
width: 100%;
margin: 0 auto;
}
.content {
border-radius: 2px;
padding: 24px;

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

View File

@ -117,8 +117,12 @@
</svg>
</div>
<div class="graphs mdl-shadow--2dp mdl-color--white mdl-cell mdl-cell--8-col">
<img src="images/graph1.png">
<img src="images/graph2.png">
<svg width="500px" height="325px" viewBox="0 0 500 250" preserveAspectRatio="none" class="graph">
<use xlink:href="#chart"/>
</svg>
<svg width="500px" height="325px" viewBox="0 0 500 250" preserveAspectRatio="none" class="graph">
<use xlink:href="#chart"/>
</svg>
</div>
<div class="cards mdl-cell mdl-cell--4-col mdl-cell--8-col-tablet mdl-grid">
<div class="mdl-card mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-cell--12-col-desktop">
@ -175,6 +179,41 @@
</g>
</defs>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 250">
<defs>
<g id="chart">
<g id="Gridlines">
<line fill="#888888" stroke="#888888" stroke-miterlimit="10" x1="0" y1="27.3" x2="468.3" y2="27.3"/>
<line fill="#888888" stroke="#888888" stroke-miterlimit="10" x1="0" y1="66.7" x2="468.3" y2="66.7"/>
<line fill="#888888" stroke="#888888" stroke-miterlimit="10" x1="0" y1="105.3" x2="468.3" y2="105.3"/>
<line fill="#888888" stroke="#888888" stroke-miterlimit="10" x1="0" y1="144.7" x2="468.3" y2="144.7"/>
<line fill="#888888" stroke="#888888" stroke-miterlimit="10" x1="0" y1="184.3" x2="468.3" y2="184.3"/>
</g>
<g id="Numbers">
<text transform="matrix(1 0 0 1 485 29.3333)" fill="#888888" font-family="'Roboto-Regular'" font-size="9">500</text>
<text transform="matrix(1 0 0 1 485 69)" fill="#888888" font-family="'Roboto-Regular'" font-size="9">400</text>
<text transform="matrix(1 0 0 1 485 109.3333)" fill="#888888" font-family="'Roboto-Regular'" font-size="9">300</text>
<text transform="matrix(1 0 0 1 485 149)" fill="#888888" font-family="'Roboto-Regular'" font-size="9">200</text>
<text transform="matrix(1 0 0 1 485 188.3333)" fill="#888888" font-family="'Roboto-Regular'" font-size="9">100</text>
<text transform="matrix(1 0 0 1 0 249.0003)" fill="#888888" font-family="'Roboto-Regular'" font-size="9">1</text>
<text transform="matrix(1 0 0 1 78 249.0003)" fill="#888888" font-family="'Roboto-Regular'" font-size="9">2</text>
<text transform="matrix(1 0 0 1 154.6667 249.0003)" fill="#888888" font-family="'Roboto-Regular'" font-size="9">3</text>
<text transform="matrix(1 0 0 1 232.1667 249.0003)" fill="#888888" font-family="'Roboto-Regular'" font-size="9">4</text>
<text transform="matrix(1 0 0 1 309 249.0003)" fill="#888888" font-family="'Roboto-Regular'" font-size="9">5</text>
<text transform="matrix(1 0 0 1 386.6667 249.0003)" fill="#888888" font-family="'Roboto-Regular'" font-size="9">6</text>
<text transform="matrix(1 0 0 1 464.3333 249.0003)" fill="#888888" font-family="'Roboto-Regular'" font-size="9">7</text>
</g>
<g id="Layer_5">
<polygon opacity="0.36" stroke-miterlimit="10" points="0,223.3 48,138.5 154.7,169 211,88.5
294.5,80.5 380,165.2 437,75.5 469.5,223.3 "/>
</g>
<g id="Layer_4">
<polygon stroke-miterlimit="10" points="469.3,222.7 1,222.7 48.7,166.7 155.7,188.3 212,132.7
296.7,128 380.7,184.3 436.7,125 "/>
</g>
</g>
</defs>
</svg>
<a href="https://github.com/google/material-design-lite/blob/master/templates/dashboard/index.html" target="_blank" id="view-source" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-color--accent mdl-color-text--accent-contrast">View Source</a>
<script src="../../material.min.js"></script>
</body>

View File

@ -71,8 +71,20 @@ html, body {
height: auto;
margin-bottom: 80px;
}
.graph {
width:100%;
height: auto;
}
.graph:nth-child(1) {
fill: #00b9d8;
}
.graph:nth-child(2) {
fill: #d9006e;
}
.cards {
padding: 0;
margin: 0;
}
.cards .mdl-card {
height: auto;

View File

@ -64,37 +64,37 @@
</header>
<section id="squares" class="mdl-cell--12-col mdl-grid mdl-grid--no-spacing">
<div class="square mdl-cell mdl-cell--4-col mdl-cell--3-col-desktop">
<footer class="mdl-color--primary-dark">
<button class="mdl-button mdl-js-button mdl-button--icon mdl-js-ripple-effect">
<i class="material-icons">arrow_forward</i>
</button>
<footer class="mdl-color--primary-dark">
<h3>Escape</h3>
<p>Lorem commodo do eiusmod anim quis.</p>
</footer>
</div>
<div class="square mdl-cell mdl-cell--4-col mdl-cell--3-col-desktop">
<footer class="mdl-color--primary-dark">
<button class="mdl-button mdl-js-button mdl-button--icon mdl-js-ripple-effect">
<i class="material-icons">arrow_forward</i>
</button>
<footer class="mdl-color--primary-dark">
<h3>Action</h3>
<p>Lorem commodo do eiusmod anim quis.</p>
</footer>
</div>
<div class="square mdl-cell mdl-cell--4-col mdl-cell--3-col-desktop">
<footer class="mdl-color--primary-dark">
<button class="mdl-button mdl-js-button mdl-button--icon mdl-js-ripple-effect">
<i class="material-icons">arrow_forward</i>
</button>
<footer class="mdl-color--primary-dark">
<h3>Nature</h3>
<p>Lorem commodo do eiusmod anim quis.</p>
</footer>
</div>
<div class="square mdl-cell mdl-cell--4-col mdl-cell--3-col-desktop">
<footer class="mdl-color--primary-dark">
<button class="mdl-button mdl-js-button mdl-button--icon mdl-js-ripple-effect">
<i class="material-icons">arrow_forward</i>
</button>
<footer class="mdl-color--primary-dark">
<h3>Discovery</h3>
<p>Lorem commodo do eiusmod anim quis.</p>
</footer>
@ -102,8 +102,9 @@
</section>
<section id="cta" class="mdl-cell--12-col mdl-grid mdl-grid--no-spacing">
<h3 class="mdl-cell mdl-cell--12-col mdl-cell--bottom">Start your journey today</h3>
<div class="spacer mdl-cell mdl-cell--5-col-desktop mdl-cell--3-col-tablet mdl-cell--1-col-phone"></div>
<button class="mdl-cell mdl-cell--2-col mdl-cell--top mdl-button mdl-js-button mdl-js-ripple-effect mdl-color--accent mdl-color-text--accent-contrast">Contact Us</button>
<!-- <div class="spacer mdl-cell mdl-cell--5-col-desktop mdl-cell--3-col-tablet mdl-cell--1-col-phone"></div> -->
<!-- <button class="mdl-cell mdl-cell--2-col mdl-cell--top mdl-button mdl-js-button mdl-js-ripple-effect mdl-color--accent mdl-color-text--accent-contrast">Contact Us</button> -->
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-color--accent mdl-color-text--accent-contrast">Contact Us</button>
</section>
<section id="authors" class="mdl-color--primary-contrast mdl-color-text--grey-600 mdl-cell--12-col mdl-grid mdl-grid--no-spacing">
<div class="author mdl-cell mdl-cell--4-col">

View File

@ -6,6 +6,9 @@ body {
font-family: 'Roboto';
color: white;
}
.mdl-layout {
height: auto ;
}
header.mdl-layout__header {
height: 40vh;
width: 100%;
@ -17,8 +20,11 @@ header.mdl-layout__header {
}
.mdl-layout__tab-bar-container {
overflow: visible;
height: 96px;
height: 64px;
box-shadow: none !important;
position: absolute;
bottom: 0;
width: 100%;
}
.mdl-layout__tab-bar-button {
display: none;
@ -29,10 +35,11 @@ header.mdl-layout__header {
height: 100%;
width: 100%;
box-shadow: none !important;
margin: 0;
}
.mdl-layout__tab-bar a {
height: 100%;
line-height: 96px;
line-height: 64px;
}
@media (max-width: 850px) {
.mdl-layout__header {
@ -61,7 +68,7 @@ header.mdl-layout__header {
#mail {
position: absolute;
right: 40px;
top: 64px;
top: calc(64px - 32px);
z-index: 999;
}
main > .mdl-layout__tab-panel > header {
@ -71,6 +78,12 @@ main > .mdl-layout__tab-panel > header {
main > .mdl-layout__tab-panel > header > *:last-child {
margin-bottom: 0;
}
main > .mdl-layout__tab-panel > header > *:first-child {
margin-top: 0;
}
main > .mdl-layout__tab-panel > header > h2 {
font-size: 24px;
}
#squares > .square {
min-height: 25vw;
@ -103,17 +116,20 @@ main > .mdl-layout__tab-panel > header > *:last-child {
background: url('images/sq4.jpg') center center;
background-size: cover;
}
.square > button {
float: right;
margin-top: 20px;
margin-right: 20px;
background-color: rgba(55, 71, 79, 0.7);
}
.square > footer {
position: absolute;
height: 33%;
width: 100%;
bottom: 0;
opacity: 0.7;
padding: 20px;
box-sizing: border-box;
}
.square > footer > button {
float: right;
background-color: rgba(55, 71, 79, 0.7);
}
.square > footer h3 {
font-size: 1.1em;
@ -131,6 +147,9 @@ main > .mdl-layout__tab-panel > header > *:last-child {
background: url('images/cta.jpg') center center;
background-size: cover;
}
#cta button {
margin: 0 auto;
}
#cta h3 {
margin: 30px;
@ -138,7 +157,7 @@ main > .mdl-layout__tab-panel > header > *:last-child {
}
#authors{
padding-top: 40px;
padding: 40px 0;
background-color: white;
}
#authors > .author {