diff --git a/public/_includes/_cta-bar.jade b/public/_includes/_cta-bar.jade index beb8f9153c..f020bf53ef 100644 --- a/public/_includes/_cta-bar.jade +++ b/public/_includes/_cta-bar.jade @@ -1,2 +1,3 @@ -a(href="http://google.com" class="md-raised md-primary" md-button) Learn in 5 Min -a(href="http://google.com" class="md-raised md-primary" md-button) Download +.cta-bar + a(href="/docs/quickstart.html" class="cta-primary button button-large button-shield md-raised md-primary" md-button) Learn in 5 Min + a(href="download.html" class="cta-secondary button button-large button-secondary" md-button) Download diff --git a/public/_includes/_docs-nav.jade b/public/_includes/_docs-nav.jade index 7dbd480782..95ac679464 100644 --- a/public/_includes/_docs-nav.jade +++ b/public/_includes/_docs-nav.jade @@ -1,6 +1,6 @@ nav.side-nav.l-pinned-left.l-layer-4.l-offset-nav .side-nav-search - input(type="search" placeholder="Search Docs...") + input(type="search" placeholder="SEARCH DOCS...") ul.side-nav-primary li Quick Start diff --git a/public/_includes/_hero-home.jade b/public/_includes/_hero-home.jade index e063cb694d..d8f9ffa70f 100644 --- a/public/_includes/_hero-home.jade +++ b/public/_includes/_hero-home.jade @@ -1,10 +1,17 @@ header(class="background-sky") - div.hero.background-sf-paper.is-large - + .hero.background-sf-paper.is-large h1.text-headline.hero-logo Angular is a modern javascript framework for building professional web applications. .hero-cta a(href="/docs/quickstart.html" class="md-raised button button-large button-plain" md-button) Learn in 5 mins - a(href="/download.html" class="button button-large button-heavy" md-button) Download + a(href="/download.html" class="button button-large button-navy" md-button) Download - != partial("_social-icons") \ No newline at end of file + != partial("_social-icons") + + +.banner.is-centered + .banner-ng-annoucement + h3.text-display-1 NG-CONF 2015 + h4.text-subhead March 5-6. Salt Lake City, Utah + + a(href="http://www.ng-conf.org/" class="button button-large button-banner" md-button) Register Today \ No newline at end of file diff --git a/public/_includes/_logo-shield.jade b/public/_includes/_logo-shield.jade new file mode 100644 index 0000000000..ed524a7940 --- /dev/null +++ b/public/_includes/_logo-shield.jade @@ -0,0 +1,11 @@ +xml(version="1.0" encoding="UTF-8" standalone="no") +svg(width="184px" height="200px" viewBox="0 0 184 200" 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") + title shield-large + defs + g(id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage") + g(id="shield-large" sketch:type="MSArtboardGroup") + g(id="Logo-Sheild" sketch:type="MSLayerGroup" transform="translate(10.000000, 8.000000)") + path(d="M81.2307692,0.0671014493 L81.2307692,0.0630797101 L0.299538462,30.4687681 L12.5933077,143.354964 L81.0353077,183.431594 L150.450808,142.81471 L163.983346,29.9298551 L81.2307692,0.0671014493" id="Fill-1" fill="#E23237" sketch:type="MSShapeGroup") + path(d="M163.865308,29.9298551 L81.0073846,0.0671014493 L81.0073846,183.431594 L150.436846,142.81471 L163.865308,29.9298551 L163.865308,29.9298551 Z" id="Fill-2" fill="#B52E31" sketch:type="MSShapeGroup") + path(d="M0.187846154,30.4687681 L12.5374615,143.354964 L81.0073846,183.431594 L81.0073846,0.0630797101 L0.187846154,30.4687681 L0.187846154,30.4687681 Z" id="Fill-3" fill="#E23237" sketch:type="MSShapeGroup") + path(d="M98.3006538,96.3850725 L81.0073846,58.6397101 L66.1231154,96.3850725 L98.3006538,96.3850725 L98.3006538,96.3850725 Z M104.825769,112.256196 L59.4634615,112.256196 L49.3159615,139.066449 L30.4399615,139.433768 L81.0073846,20.5082609 L133.431692,139.433768 L115.935346,139.433768 L104.825769,112.256196 L104.825769,112.256196 Z" id="Fill-4" fill="#FFFFFF" sketch:type="MSShapeGroup") diff --git a/public/resources/css/_options.scss b/public/resources/css/_options.scss index 7d6a81ef04..458ae93787 100644 --- a/public/resources/css/_options.scss +++ b/public/resources/css/_options.scss @@ -25,6 +25,7 @@ $coal: #000000; $steel: #253238; $silver: #36474F; $platinum: #445A64; +$metal: #536E7A; $tin: #8FA4AE; // LIGHT GRAY COLORS diff --git a/public/resources/css/base/_type.scss b/public/resources/css/base/_type.scss index 648bb86ab0..6955a479c8 100644 --- a/public/resources/css/base/_type.scss +++ b/public/resources/css/base/_type.scss @@ -35,7 +35,7 @@ body { } .text-display-1 { - margin: 0px 0px ($unit * 2) 0px; + margin: 0px; font-size: 34px; font-weight: 400; opacity: .54; diff --git a/public/resources/css/main.scss b/public/resources/css/main.scss index 687607c3a7..99c2c7921a 100644 --- a/public/resources/css/main.scss +++ b/public/resources/css/main.scss @@ -20,5 +20,7 @@ @import 'module/main-footer'; @import 'module/side-nav'; @import 'module/hero'; +@import 'module/banner'; +@import 'module/cta-bar'; @import 'module/buttons'; @import 'module/sticker'; \ No newline at end of file diff --git a/public/resources/css/module/_banner.scss b/public/resources/css/module/_banner.scss new file mode 100644 index 0000000000..1255141a99 --- /dev/null +++ b/public/resources/css/module/_banner.scss @@ -0,0 +1,31 @@ +/* +* Banner +* +* Addtional announcements that generally follow a hero +*/ + +.banner { + background: $mist; + padding: $unit * 4; + + &.is-centered { + text-align: center; + } + + .banner-ng-annoucement { + background: url('/resources/images/logos/ng-conf/ng-conf-shield.png') 0px 0px no-repeat; + padding-left: 68px; + margin-right: $unit * 3; + display: inline-block; + } + + h3 { + opacity: .87; + line-height: 34px; + } + + h4 { + margin: 0px; + line-height: 24px; + } +} \ No newline at end of file diff --git a/public/resources/css/module/_buttons.scss b/public/resources/css/module/_buttons.scss index f8116e5dc6..d165b325ba 100644 --- a/public/resources/css/module/_buttons.scss +++ b/public/resources/css/module/_buttons.scss @@ -12,6 +12,8 @@ border-radius: 3px; text-decoration: none; text-transform: uppercase; + overflow: hidden; + // SIZES &.button-large { @@ -20,15 +22,40 @@ padding: 0px ($unit * 3); } + &.button-x-large { + font-size: 16px; + line-height: $unit * 7; + padding: 0px ($unit * 3); + } + + // COLORS + + &.button-secondary { + background: $fog; + color: rgba($snow, .87); + } + &.button-plain { background: $snow; color: rgba($steel, .87); } - &.button-heavy { + &.button-navy { background: $ocean; color: rgba($snow, .87); } -} + &.button-banner { + background: $metal; + color: rgba($snow, .87); + } + + &.button-shield { + background: $regal url('/resources/images/logos/inverse/shield/22.png') 24px 13px no-repeat; + color: rgba($snow, .87); + padding-left: 54px; + } + + +} \ No newline at end of file diff --git a/public/resources/css/module/_cta-bar.scss b/public/resources/css/module/_cta-bar.scss new file mode 100644 index 0000000000..3fb49886d1 --- /dev/null +++ b/public/resources/css/module/_cta-bar.scss @@ -0,0 +1,14 @@ +/* +* CTA Bar (Call to action) +* +* Call to action located at the bottom of most pages +*/ + +.cta-bar { + text-align: center; + padding-top: ($unit * 8); + + .button { + margin: 0px ($unit * 1); + } +} \ No newline at end of file diff --git a/public/resources/css/module/_hero.scss b/public/resources/css/module/_hero.scss index 062e24a851..0e80a455a4 100644 --- a/public/resources/css/module/_hero.scss +++ b/public/resources/css/module/_hero.scss @@ -28,7 +28,7 @@ $hero-padding: $unit * 2; opacity: 1; width: $unit * 70; margin: ($unit * 3) auto ($unit * 5) auto; - font-weight: 300; + font-weight: 400; } // CTA BUTTONS @@ -43,7 +43,6 @@ $hero-padding: $unit * 2; right: $unit * 3; z-index: $layer-1; - a { color: $snow; opacity: .56; diff --git a/public/resources/css/module/_side-nav.scss b/public/resources/css/module/_side-nav.scss index 669f7dd72b..06acc521e1 100644 --- a/public/resources/css/module/_side-nav.scss +++ b/public/resources/css/module/_side-nav.scss @@ -10,7 +10,7 @@ .side-nav-search { background: $tin; - padding: 0px ($unit * 2); + padding: 0px ($unit * 1); height: $unit * 6; border-bottom: 1px solid $fog; @@ -19,9 +19,9 @@ border-radius: 200px; width: 100%; box-sizing: border-box; - height: $unit * 4; + height: 30px; padding: 0px $unit; - margin-top: $unit; + margin: $unit 0px; } } @@ -38,7 +38,9 @@ > a { line-height: $unit * 6; padding: 0px ($unit * 2); - color: $steel; + color: $metal; + font-size: 14px; + text-transform: uppercase; } } } diff --git a/public/resources/images/logos/inverse/shield/22.png b/public/resources/images/logos/inverse/shield/22.png new file mode 100644 index 0000000000..4fbfafa45b Binary files /dev/null and b/public/resources/images/logos/inverse/shield/22.png differ diff --git a/public/resources/images/logos/inverse/shield/22@2x.png b/public/resources/images/logos/inverse/shield/22@2x.png new file mode 100644 index 0000000000..bf47d55a14 Binary files /dev/null and b/public/resources/images/logos/inverse/shield/22@2x.png differ diff --git a/public/resources/images/logos/inverse/shield/22svg.svg b/public/resources/images/logos/inverse/shield/22svg.svg new file mode 100644 index 0000000000..682797233c --- /dev/null +++ b/public/resources/images/logos/inverse/shield/22svg.svg @@ -0,0 +1,17 @@ + + + + 22svg + Created with Sketch. + + + + + + + \ No newline at end of file diff --git a/public/resources/images/logos/ng-conf/ng-conf-shield.png b/public/resources/images/logos/ng-conf/ng-conf-shield.png new file mode 100644 index 0000000000..e2064d32c6 Binary files /dev/null and b/public/resources/images/logos/ng-conf/ng-conf-shield.png differ diff --git a/public/resources/images/logos/ng-conf/ng-conf-shield@2x.png b/public/resources/images/logos/ng-conf/ng-conf-shield@2x.png new file mode 100644 index 0000000000..b0ec6dfe35 Binary files /dev/null and b/public/resources/images/logos/ng-conf/ng-conf-shield@2x.png differ