From 21ef5a1961ccbcd649e644af2e0f899bb4cea206 Mon Sep 17 00:00:00 2001 From: Stefanie Fluin Date: Thu, 30 Mar 2017 12:21:50 -0700 Subject: [PATCH] feat(aio): docs landing page with styles, logo res fix --- aio/content/marketing/docs.html | 25 ++++++ aio/src/app/app.component.spec.ts | 2 +- aio/src/app/app.component.ts | 2 +- aio/src/styles/0-base/_typography.scss | 9 ++- aio/src/styles/1-layouts/_layout-global.scss | 5 ++ aio/src/styles/1-layouts/_layouts-dir.scss | 3 +- aio/src/styles/1-layouts/_sidenav.scss | 44 ----------- aio/src/styles/1-layouts/_top-menu.scss | 7 +- aio/src/styles/2-modules/_card.scss | 80 ++++++++++++++++++++ aio/src/styles/2-modules/_modules-dir.scss | 1 + 10 files changed, 127 insertions(+), 51 deletions(-) create mode 100644 aio/content/marketing/docs.html create mode 100644 aio/src/styles/1-layouts/_layout-global.scss create mode 100644 aio/src/styles/2-modules/_card.scss diff --git a/aio/content/marketing/docs.html b/aio/content/marketing/docs.html new file mode 100644 index 0000000000..30c72adda5 --- /dev/null +++ b/aio/content/marketing/docs.html @@ -0,0 +1,25 @@ +

Angular Docs

+
v 4.0.0
+

Learn about the latest updates to the documentation. View the Angular change log for enhancements, fixes, and breaking changes in Angular itself. If you're looking for Angular vs2 documents you'll find them at v2.angular.io

+ +
+ + +

Quickstart

+

A short beginner guide explaining the basic concepts of Angular

+

View Quickstart

+ + + +

Developer Guide

+

An intermediuate development guide covering all major features of Angular

+

View Quickstart

+ + + + +

API Reference

+

An advanced reference of all Angular Classes, Methods, etc.

+

View Quickstart

+ +
\ No newline at end of file diff --git a/aio/src/app/app.component.spec.ts b/aio/src/app/app.component.spec.ts index a6895e09de..b21347bf8a 100644 --- a/aio/src/app/app.component.spec.ts +++ b/aio/src/app/app.component.spec.ts @@ -171,7 +171,7 @@ describe('AppComponent', () => { describe('footer', () => { it('should have version number', () => { - const versionEl: HTMLElement = fixture.debugElement.query(By.css('aio-footer p')).nativeElement; + const versionEl: HTMLElement = fixture.debugElement.query(By.css('aio-footer')).nativeElement; expect(versionEl.innerText).toContain(TestHttp.versionFull); }); }); diff --git a/aio/src/app/app.component.ts b/aio/src/app/app.component.ts index bdf8aa63e0..4fcd36630c 100644 --- a/aio/src/app/app.component.ts +++ b/aio/src/app/app.component.ts @@ -33,7 +33,7 @@ export class AppComponent implements OnInit { get homeImageUrl() { return this.isSideBySide ? - 'assets/images/logos/standard/logo-nav.png' : + 'assets/images/logos/standard/logo-nav@2x.png' : 'assets/images/logos/standard/logo-nav-small.png'; } get isOpened() { return this.isSideBySide && this.isSideNavDoc; } diff --git a/aio/src/styles/0-base/_typography.scss b/aio/src/styles/0-base/_typography.scss index 3bdafe5bdb..a10ccf5930 100755 --- a/aio/src/styles/0-base/_typography.scss +++ b/aio/src/styles/0-base/_typography.scss @@ -47,9 +47,16 @@ font-size: 18px; font-weight: 500; margin: 8px 0px; - text-transform: uppercase; } + h6 { + color: $mediumgray; + font-size: 18px; + font-weight: 400; + margin: 8px 0px; + } + + .mat-tab-body-wrapper h2 { margin-top: 0; } diff --git a/aio/src/styles/1-layouts/_layout-global.scss b/aio/src/styles/1-layouts/_layout-global.scss new file mode 100644 index 0000000000..0c643dabef --- /dev/null +++ b/aio/src/styles/1-layouts/_layout-global.scss @@ -0,0 +1,5 @@ +.clearfix { + content: ""; + display: table; + clear: both; +} \ No newline at end of file diff --git a/aio/src/styles/1-layouts/_layouts-dir.scss b/aio/src/styles/1-layouts/_layouts-dir.scss index 010be8ad50..c35b1d45a1 100644 --- a/aio/src/styles/1-layouts/_layouts-dir.scss +++ b/aio/src/styles/1-layouts/_layouts-dir.scss @@ -7,4 +7,5 @@ @import 'search-results'; @import 'top-menu'; @import 'marketing-layout'; -@import 'footer'; \ No newline at end of file +@import 'footer'; +@import 'layout-global'; \ No newline at end of file diff --git a/aio/src/styles/1-layouts/_sidenav.scss b/aio/src/styles/1-layouts/_sidenav.scss index 4ef29f59a1..3e75580014 100644 --- a/aio/src/styles/1-layouts/_sidenav.scss +++ b/aio/src/styles/1-layouts/_sidenav.scss @@ -1,47 +1,3 @@ -/************************************ - - Media queries - - To use these, put this snippet in the approriate selector: - - @include bp(tiny) { - background-color: purple; - } - - Replace "tiny" with "medium" or "big" as necessary. -*************************************/ - -@mixin bp($point) { - - $bp-xsmall: "(min-width: 320px)"; - $bp-teeny: "(min-width: 480px)"; - $bp-tiny: "(min-width: 600px)"; - $bp-small: "(min-width: 650px)"; - $bp-medium: "(min-width: 800px)"; - $bp-big: "(min-width: 1000px)"; - - @if $point == big { - @media #{$bp-big} { @content; } - } - @else if $point == medium { - @media #{$bp-medium} { @content; } - } - @else if $point == small { - @media #{$bp-small} { @content; } - } - @else if $point == tiny { - @media #{$bp-tiny} { @content; } - } - @else if $point == teeny { - @media #{$bp-teeny} { @content; } - } - @else if $point == xsmall { - @media #{$bp-xsmall} { @content; } - } -} - -/************************************/ - aio-nav-menu.top-menu .vertical-menu-item { background-color: $lightgray; text-transform: uppercase; diff --git a/aio/src/styles/1-layouts/_top-menu.scss b/aio/src/styles/1-layouts/_top-menu.scss index 0344ea7ed8..658c7fa8e8 100644 --- a/aio/src/styles/1-layouts/_top-menu.scss +++ b/aio/src/styles/1-layouts/_top-menu.scss @@ -11,9 +11,10 @@ .nav-link.home img { position: relative; - margin-top: -15px; + margin-top: -21px; + margin-right: 20px; top: 12px; - height: 36px; + height: 40px; } @media (max-width: 700px) { @@ -90,4 +91,4 @@ aio-search-box input { width: 50%; } } -} +} \ No newline at end of file diff --git a/aio/src/styles/2-modules/_card.scss b/aio/src/styles/2-modules/_card.scss new file mode 100644 index 0000000000..9d148f21de --- /dev/null +++ b/aio/src/styles/2-modules/_card.scss @@ -0,0 +1,80 @@ +.card-container { + display: flex; + flex-direction: row; + flex-wrap: wrap; + margin: 24px 0; +} + +.card { + background: $white; + border-radius: 4px; + box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12); + box-sizing: border-box; + height: 194px; + margin: 24px 8px; + max-width: 340px; + min-width: 262px; + padding-bottom: 48px; + position: relative; + transition: box-shadow .5s; + width: 30%; + + &:hover { + // border: 2px solid $blue; + box-shadow: 0 8px 8px rgba($black, 0.24), 0 0 8px rgba($black, 0.12); + text-decoration: none; + + h2 { + color: $blue; + } + + p { + color: $darkgray; + padding: 0 16px; + } + + .card-footer { + line-height: 32px; + padding: 8px 16px; + background-color: rgba($blue, 0.1); + color: $blue; + } + } + + + h2 { + color: $darkgray; + font-size: 20px; + line-height: 24px; + margin: 0; + padding: 32px 0 24px; + text-transform: none; + text-align: center; + } + + p { + color: $darkgray; + font-size: 13px; + line-height: 24px; + padding: 0 16px; + margin: 0; + text-align: center; + } + + .card-footer { + bottom: 0; + border-top: 0.5px solid $lightgray; + box-sizing: border-box; + line-height: 48px; + left: 0; + position: absolute; + right: 0; + text-align: right; + color: $mediumgray; + + a { + color: $mediumgray; + font-size: 13px; + } + } +} \ No newline at end of file diff --git a/aio/src/styles/2-modules/_modules-dir.scss b/aio/src/styles/2-modules/_modules-dir.scss index ee78e42349..0233b30f18 100644 --- a/aio/src/styles/2-modules/_modules-dir.scss +++ b/aio/src/styles/2-modules/_modules-dir.scss @@ -9,3 +9,4 @@ @import 'images'; @import 'table'; @import 'presskit'; + @import 'card'; \ No newline at end of file