honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

mobile styles initial

This commit is contained in:
Alex Wolfe 2015-03-04 07:13:59 -08:00
parent d6e901caa0
commit 8dff8a8b6a
5 changed files with 125 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
public/_includes/_main-nav.jade
View File

@ -3,8 +3,8 @@ md-toolbar(class="main-nav background-regal l-pinned-top l-layer-5")
h1 <a href="/" md-button>Angular <sup>by Google</sup></a>
ul
li <a class="main-nav-button" href="/features.html" md-button>Features</a>
li <a class="main-nav-button" href="/docs/js/latest/" md-button>Docs</a>
li <a class="main-nav-button" href="/about/" md-button>About</a>
li <a class="main-nav-button" href="/contribute.html" md-button>Contribute</a>
a(class="cta main-nav-button has-icon" href="/download/" md-button) <span class="icon icon-cloud-download"></span> Download
li.l-left <a class="main-nav-button" href="/features.html" md-button>Features</a>
li.l-left <a class="main-nav-button" href="/docs/js/latest/" md-button>Docs</a>
li.l-left <a class="main-nav-button" href="/about/" md-button>About</a>
li.l-left <a class="main-nav-button" href="/contribute.html" md-button>Contribute</a>
li.l-right <a class="main-nav-button has-icon" href="/download/" md-button> <span class="icon icon-cloud-download"></span> Download</a>

85
public/resources/css/_options.scss
View File

@ -1,3 +1,42 @@
/*
* Typography
*
* Only the fonts listed below should be used throughout the site.
*/
$brand-font: 'Roboto', "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
$mono-font: Monaco, "Lucida Console", monospace;
/*
* Metrics
*
* Metrics based on material design 8pt unit
*/
$unit: 8px;
$phone-breakpoint: 480px;
$tablet-breakpoint: 900px;
/*
* Layer Stacking
*
* The approved range that can be used for layering (z-indexes)
*/
$layer-1: 1;
$layer-2: 2;
$layer-3: 3;
$layer-4: 4;
$layer-5: 5;
$layer-6: 6;
$layer-7: 7;
$layer-8: 8;
$layer-9: 9;
$layer-10: 10;
/*
* Colors
*
@ -44,48 +83,4 @@ $tin: #8FA4AE;
$cloud: #AFBEC5;
$fog: #CFD8DC;
$mist: #ECEFF1;
$snow: #FFFFFF;
/*
* Typography
*
* Only the fonts listed below should be used throughout the site.
*/
$brand-font: 'Roboto', "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
$mono-font: Monaco, "Lucida Console", monospace;
/*
* Metrics
*
* Metrics based on material design 8pt unit
*/
$unit: 8px;
/*
* Layer Stacking
*
* The approved range that can be used for layering (z-indexes)
*/
$layer-1: 1;
$layer-2: 2;
$layer-3: 3;
$layer-4: 4;
$layer-5: 5;
$layer-6: 6;
$layer-7: 7;
$layer-8: 8;
$layer-9: 9;
$layer-10: 10;
$snow: #FFFFFF;

3
public/resources/css/module/_dropdown.scss
View File

@ -32,7 +32,8 @@
ul {
list-style-type: none;
margin: 0px 0px ($unit * 2) 0px;
border-bottom: 1px solid $fog;
margin: 0px;
padding: 0px;
&:last-child {

42
public/resources/css/module/_hero.scss
View File

@ -5,20 +5,44 @@ $hero-padding: $unit * 2;
padding: $hero-padding;
height: 192px;
@media handheld and (max-width: $phone-breakpoint),
screen and (max-device-width: $phone-breakpoint),
screen and (max-width: $tablet-breakpoint) {
height: auto;
}
&.is-large {
height: 478px;
text-align: center;
@media handheld and (max-width: $phone-breakpoint),
screen and (max-device-width: $phone-breakpoint),
screen and (max-width: $tablet-breakpoint) {
height: auto;
}
}
.hero-title {
text-transform: uppercase;
margin: ($unit * 9) 0px 0px ($unit * 10);
opacity: .87;
@media handheld and (max-width: $phone-breakpoint),
screen and (max-device-width: $phone-breakpoint),
screen and (max-width: $tablet-breakpoint) {
margin: ($unit * 6) 0px 0px 0px;
}
}
.hero-subtitle {
margin: 0px 0px 0px ($unit * 10);
opacity: .87;
@media handheld and (max-width: $phone-breakpoint),
screen and (max-device-width: $phone-breakpoint),
screen and (max-width: $tablet-breakpoint) {
margin: 0px;
}
}
// LARGE SHEILD LOGO
@ -29,6 +53,16 @@ $hero-padding: $unit * 2;
width: $unit * 70;
margin: ($unit * 3) auto ($unit * 5) auto;
font-weight: 400;
@media handheld and (max-width: $phone-breakpoint),
screen and (max-device-width: $phone-breakpoint),
screen and (max-width: $tablet-breakpoint) {
width: auto;
font-size: 20px;
line-height: 28px;
margin: ($unit * 2) auto;
padding-top: 208px;
}
}
// CTA BUTTONS
@ -43,6 +77,13 @@ $hero-padding: $unit * 2;
right: $unit * 3;
z-index: $layer-1;
@media handheld and (max-width: $phone-breakpoint),
screen and (max-device-width: $phone-breakpoint),
screen and (max-width: $tablet-breakpoint) {
right: auto;
left: 0;
}
button {
color: $snow;
opacity: .56;
@ -55,5 +96,4 @@ $hero-padding: $unit * 2;
outline: none;
}
}
}

42
public/resources/css/module/_top-nav.scss
View File

@ -25,11 +25,27 @@
list-style-type: none;
margin: 0px;
padding: 0px;
float: left;
li {
margin: 0px 0px 0px 0px;
display: inline;
}
@media handheld and (max-width: $phone-breakpoint),
screen and (max-device-width: $phone-breakpoint),
screen and (max-width: $tablet-breakpoint) {
box-shadow: 0px 2px 5px rgba(0, 0, 0, .3);
float: none;
position: absolute;
top: 0px;
right: $unit;
z-index: $layer-1;
background: $regal;
display: none;
li {
display: block;
float: none;
}
}
}
@ -61,9 +77,25 @@
left: ($unit * 2);
z-index: $layer-1;
}
}
.cta {
float: right;
@media handheld and (max-width: $phone-breakpoint),
screen and (max-device-width: $phone-breakpoint),
screen and (max-width: $tablet-breakpoint) {
display: block;
float: none;
line-height: $unit * 6;
text-align: left;
font-size: 14px;
padding: 0px ($unit * 4);
&.has-icon {
padding: 0px ($unit * 4);
position: static;
}
.icon {
display: none;
}
}
}
}