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 @@
+
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
+
+
+
+
+ Developer Guide
+ An intermediuate development guide covering all major features of Angular
+
+
+
+
+
+ API Reference
+ An advanced reference of all Angular Classes, Methods, etc.
+
+
+
\ 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