feat(aio): marketing page styles

aio/content/marketing/index.html

@@ -3,14 +3,15 @@
       src="assets/images/logos/angular/angular.svg" class="hero-logo"/>
     <h1 class="text-headline">One framework.<br>Mobile &amp; desktop.</h1><a
         href="/docs/ts/latest/quickstart.html" md-button="md-button"
-        class="hero-cta mat-raised button button-large button-plain">Get Started</a></div>
-  <announcement-bar class="announcement-bar">
-    <div class="announcement-bar-slide cleafix is-visible"><img
-        src="assets/images/logos/anglebrackets/devintersection.png" width="64"/>
-      <p>Join us for <strong>DEVintersection Amsterdam</strong> Nov 14-16!</p><a
-          href="https://www.devintersectioneurope.com/#!/" target="_blank" class="button mat-button">Register
-        now</a></div>
-  </announcement-bar>
+        class="hero-cta mat-raised button button-large button-plain">Get Started</a>
+    <announcement-bar class="announcement-bar">
+      <div class="announcement-bar-slide cleafix is-visible"><img
+          src="assets/images/logos/anglebrackets/devintersection.png" width="64"/>
+        <p>Join us for <strong>DEVintersection Amsterdam</strong> Nov 14-16!</p><a
+            href="https://www.devintersectioneurope.com/#!/" target="_blank" class="button mat-button">Register
+          now</a></div>
+    </announcement-bar>
+  </div>
 </header>
 <article class="l-content ">
   <div class="home-rows"><!-- Group 1-->

aio/e2e/app.e2e-spec.ts

@@ -6,6 +6,7 @@ describe('site App', function() {
 
   beforeEach(() => {
     page = new SitePage();
+    page.setWindowWidth(1050);   // Make the window wide enough to show the SideNav side-by-side.
     page.navigateTo();
   });
 

aio/e2e/app.po.ts

@@ -35,6 +35,11 @@ export class SitePage {
     return browser.executeScript('return arguments[0].innerHTML;', element);
   }
 
+  setWindowWidth(newWidth: number) {
+    const win = browser.driver.manage().window();
+    return win.getSize().then(oldSize => win.setSize(newWidth, oldSize.height));
+  }
+
   /**
    * Replace the ambient Google Analytics tracker with homebrew spy
    * don't send commands to GA during e2e testing!

aio/src/app/app.component.spec.ts

@@ -64,7 +64,7 @@ describe('AppComponent', () => {
 
   describe('onResize', () => {
     it('should update `isSideBySide` accordingly', () => {
-      component.onResize(1000);
+      component.onResize(1033);
       expect(component.isSideBySide).toBe(true);
       component.onResize(500);
       expect(component.isSideBySide).toBe(false);
@@ -168,7 +168,7 @@ describe('AppComponent', () => {
     it('should be called when a document has been rendered', () => {
       const scrollService: AutoScrollService = fixture.debugElement.injector.get(AutoScrollService);
       spyOn(scrollService, 'scroll');
-      component.onDocRendered(null);
+      component.onDocRendered();
       expect(scrollService.scroll).toHaveBeenCalledWith(jasmine.any(HTMLElement));
     });
   });

aio/src/app/app.component.ts

@@ -28,7 +28,9 @@ export class AppComponent implements OnInit {
   isSideBySide = false;
   private isSideNavDoc = false;
   private previousNavView: string;
-  private readonly sideBySideWidth = 600;
+  // Set to 1032 to account for computed html window size
+  private readonly sideBySideWidth = 1032;
+
   sideNavNodes: NavigationNode[];
   topMenuNodes: NavigationNode[];
   versionInfo: VersionInfo;

aio/src/styles/0-base/_typography.scss

@@ -65,6 +65,9 @@
       font-size: 14px;
       line-height: 24px;
       letter-spacing: 0.30px;
+      & > em {
+        letter-spacing: 0.30px;
+      }
     }
 
     ol li {
@@ -117,7 +120,7 @@
       text-align: left;
     }
 
-    p > code {
+    p > code, li > code, table code {
       font-family: $code-font;
       font-size: 90%;
       color: $blue;

aio/src/styles/1-layouts/_content-layout.scss

@@ -20,12 +20,4 @@
 
 .sidenav-content button {
   min-width: 50px;
-}
-
-.l-sub-section {
-  color: $blue;
-  margin: 0 0 10px 0px;
-  padding: 10px;
-  background: $offwhite;
-  border-left: 4px solid $blue;
 }

aio/src/styles/1-layouts/_footer.scss

@@ -42,6 +42,10 @@ footer {
   p {
     text-align: center;
     margin: 10px 0px 5px;
+    
+    @media (max-width: 480px) {
+      text-align: left;
+    }
   }
 
   div.grid-fluid {
@@ -65,8 +69,18 @@ footer {
         text-align: left;
       }
     }
+
+    @media (max-width: 480px) {
+      flex-direction: column;
+      .footer-block {
+        margin: 8px 24px;
+      }
+    }
   }
 
+  
+
+
   @media (max-width: 700px) {
     h3 {
       font-size: 110%;

aio/src/styles/1-layouts/_layout-global.scss

@@ -2,4 +2,18 @@
     content: "";
     display: table;
     clear: both;
+}
+
+l-relative {
+    position: relative;
+}
+
+.l-clearfix:after, .clearfix:after {
+    content: "";
+    display: table;
+    clear: both;
+}
+
+.is-visible {
+    display: block!important;
 }

aio/src/styles/1-layouts/_marketing-layout.scss

@@ -1,12 +1,128 @@
-.hero {
+#home {
+  padding: 0rem 0rem 3rem;
+
+  @media (max-width: 800px) {
+    article {
+      padding: 0 30px;
+    }
+  }
+}
+
+div[layout=row]{
+    display: flex;
+    box-sizing: border-box;
+
+    @media (max-width: 480px) {
+      display: block;
+  }
+}
+
+.layout-row {
+    flex-direction: row;
+}
+
+.home-rows {
+    margin-top: 112px;
+}
+
+.home-row .promo-image-container, .home-row .text-container {
+    max-width: 50%;
+}
+
+.background-superhero-paper {
+    background: url('assets/images/backgrounds/super-hero-large.png') no-repeat bottom center , $bluegradient;
+    background-blend-mode: multiply;
+    background-size: 100%;
+}
+
+.background-sky {
+  background-color: $blue;
+  background: $bluegradient;
+  color: $white;
+}
+
+header.bckground-sky.l-relative {
     display: flex;
     flex-direction: column;
-    align-items: center;
-    text-align: center;
-    h1:after {
-        display: none;
+}
+
+.home-rows {
+  // NOTE (ericjim): if a banner is placed on the homescreen, add this margin.
+  margin-top: 112px;
+}
+
+.home-row {
+  max-width: 920px;
+  margin: 0 0 60px 0;
+  margin-left: auto;
+  margin-right: auto;
+
+  @media (max-width: 480px) {
+      display: block;
+  }
+
+  h3.text-headline {
+    font-size: 28px;
+    margin-top: 10px;
+  }
+
+  // NOTE (ericjim): remove if graphic changes.
+  .promo-3 {
+    margin-top: 15px;
+
+    @media(max-width: 599px) {
+      margin-top: 0;
     }
+  }
+
+  // -- Utility margins for promos
+  .promo-1-desc, .promo-3-desc {
+    padding-left: 5px;
+  }
+
+  // -- Reset margins for the utility margins
+  @media(max-width: 599px) {
+    .promo-1, .promo-2, .promo-3, .promo-4 {
+      margin: 0;
+    }
+  }
+
+  .text-block {
+    padding-right: 15%;
+
+    @media(max-width: 599px) {
+      padding: 0;
+    }
+  }
+
+  @media(max-width: 599px) {
+    .promo-image-container, .text-container {
+      max-width: 100%;
+    }
+
+    &:nth-child(even) {
+      flex-direction: column-reverse;
+    }
+  }
+
+  .promo-img-container {
+
+    @media (max-width: 375px) {
+      text-align: initial;
+    }
+
+    p {
+      margin: 0 20px;
+    }
+
     img {
-        max-width: 200px;
+      max-width: 90%;
+
+
+      @media (max-width: 599px) {
+        max-width: 100%;
+        float: initial !important;
+      }
     }
+  }
 }

aio/src/styles/1-layouts/_search-results.scss

@@ -17,16 +17,22 @@ aio-search-results {
     background-color: $darkgray;
     border: 24px solid $darkgray;
 
-    @include bp(tiny) {
+    @media (max-width: 480px) {
         display: block;
-        max-height: 60%;
+        max-height: 70%;
+        box-sizing: border-box;
+        .search-area {
+            display: block;
+            margin: 16px 16px;
+        }
     }
 }
 
 .search-area {
     display: flex;
     flex-direction: column;
-    margin: 0 10px;
+    margin: 16px 16px;
+    height: 100%;
     h2 {
         font-size: 16px;
         margin: 10px 0px 5px;

aio/src/styles/1-layouts/_sidenav.scss

@@ -10,6 +10,20 @@ aio-nav-menu.top-menu .vertical-menu-item  {
   min-width: 260px;
 }
 
+md-sidenav-container.sidenav-container {
+    height: auto;
+    transform: none;
+  }
+
+// md-sidenav.sidenav.mat-sidenav.mat-sidenav-side.mat-sidenav-opened {
+//   position: fixed;
+//   padding-top: 72px;
+// }
+
+md-sidenav-container div.mat-sidenav-content {
+    height: auto;
+}
+
 .vertical-menu-item {
   box-sizing: border-box;
   color: $darkgray;

aio/src/styles/1-layouts/_top-menu.scss

@@ -85,7 +85,7 @@ aio-search-box input {
       width: 50%;
     }
   }
-  @include bp(medium) {
+  @media (max-width: 480px) {
     transition: width 0.4s ease-in-out;
     &:focus {
       width: 50%;

aio/src/styles/2-modules/_alert.scss

@@ -6,19 +6,31 @@
     &.is-critical {
         border-left: 10px solid $brightred;
         background-color: rgba($brightred, 0.05);
+
+        h1, h2, h3, h4, h5, h6 {
+            color: $brightred;
+        }
     }
 
     &.is-important {
         border-left: 10px solid $orange;
         background-color: rgba($orange, 0.05);
+
+        h1, h2, h3, h4, h5, h6 {
+            color: $orange;
+        }
     }
 
     &.is-helpful {
         border-left: 10px solid $blue;
         background-color: rgba($blue, 0.05);
+
+        h1, h2, h3, h4, h5, h6 {
+            color: $blue;
+        }
     }
 
-    p {
+    > * {
         margin: 0;
         padding: 8px 16px;
     }

aio/src/styles/2-modules/_announcement-bar.scss

@@ -0,0 +1,179 @@
+/* Announcment Bar Module */
+/* A module displaying time senstive announcemnts */
+
+
+/* VARIABLES */
+
+$announcement-bar: '.announcement-bar';
+$announcement-bar-height: 104px;
+$announcement-bar-width: 784px;
+
+/* CLASS */
+
+#{$announcement-bar} {
+  height: 104px;
+  width: $announcement-bar-width;
+  position: absolute;
+  margin-left: auto;
+  top: 500px;
+  color: $darkgray;
+  background: $white;
+  border-radius: 4px;
+  overflow: hidden;
+  box-sizing: border-box;
+  box-shadow: 0 4px 4px rgba(0,0,0,0.24), 0 0 4px rgba(0,0,0,0.12);
+
+  @media (max-width: $announcement-bar-width) {
+    height: auto;
+    margin: 0;
+    position: static;
+    text-align: center;
+    width: 100%;
+  }
+}
+
+// SLIDES CONTAINER
+#{$announcement-bar}-slides {
+  position: relative;
+  overflow: hidden;
+  color: $darkgray;
+  background: $white;
+  height: $announcement-bar-height;
+  width: $announcement-bar-width;
+  box-sizing: border-box;
+  box-shadow: 0 4px 4px rgba($black, 0.24), 0 0 4px rgba($black, 0.12);
+
+  @media (max-width: 480px) {
+    box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
+    height: 240px;
+    margin: 0;
+    padding: 32px 48px;
+    text-align: center;
+    width: auto;
+  }
+}
+
+// INDIVIDUAL SLIDE
+#{$announcement-bar}-slide {
+  bottom: 0;
+  box-sizing: border-box;
+  height: $announcement-bar-height;
+  left: 0;
+  margin-bottom: -$announcement-bar-height;
+  opacity: 0;
+  padding: 32px;
+  position: absolute;
+  right: 0;
+  transition: all .8s;
+  width: $announcement-bar-width;
+  z-index: 1;
+
+  @media (max-width: 480px) {
+    height: auto;
+    margin: 0;
+    padding:0;
+    width: auto;
+    transition: opacity .8s;
+    visibility: hidden;
+  }
+
+  img, p {
+    float: left;
+
+    @media (max-width: 480px) {
+      display: block;
+      float: none;
+    }
+  }
+
+  img {
+    height: 40px;
+    margin: 8px auto;
+  }
+
+  p {
+    font-size: 18px;
+    line-height: 40px;
+    margin: 0;
+    padding: 0;
+
+    @media (max-width: 480px) {
+      line-height: 24px;
+      margin: auto;
+    }
+
+  }
+
+  .button,
+  .button.md-button {
+    margin: 0;
+    padding: 0 40px;
+    background: $lightgray;
+    color: $white;
+    float: right;
+    font-size: 14px;
+    line-height: 40px;
+    transition: all .3s ease-in-out;
+
+    &:hover {
+      background: $blue;
+      box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
+      color: $white;
+    }
+
+    @media (max-width: $announcement-bar-width) {
+      float: none;
+      margin: 16px auto;
+    }
+  }
+
+  &.is-visible  {
+    margin-bottom: 0;
+    opacity: 1;
+    z-index: 2;
+
+    @media (max-width: $announcement-bar-width) {
+      position: static;
+      visibility: visible;
+      justify-content: center;
+      display: flex !important;
+      flex-direction: column;
+      padding: 8px;
+      height: auto;
+      width: 100%;
+      margin: 0;
+    }
+
+    @media (max-width: 480px) {
+      padding: 16px;
+    }
+  }
+}
+
+// NAV BAR
+#{$announcement-bar} nav {
+  bottom: -40px;
+  color: $lightgray;
+  left: 0;
+  position: absolute;
+  right: 0;
+  text-align: center;
+  z-index: 1;
+
+  button {
+    background: $lightgray;
+    border: none;
+    border-radius: 100px;
+    height: 12px;
+    margin: 0 4px;
+    outline: none;
+    overflow: hidden;
+    text-indent: -3000px;
+    width: 12px;
+
+    &.is-selected,
+    &.selected  {
+      background: $lightgray;
+    }
+  }
+}

aio/src/styles/2-modules/_buttons.scss

@@ -0,0 +1,89 @@
+/* Button Styles */
+
+.button,
+a.button.md-button {
+  display: inline-block;
+  line-height: 32px;
+  padding: 0px 16px;
+  font-size: 14px;
+  font-weight: 400;
+  border-radius: 3px;
+  text-decoration: none;
+  text-transform: uppercase;
+  overflow: hidden;
+  border: none;
+
+  // SIZES
+  &.button-small {
+    font-size: 12px;
+    line-height: 24px;
+    padding: 0px 8px;
+  }
+
+  &.button-large {
+    font-size: 15px;
+    line-height: 48px;
+    padding: 0px 24px;
+  }
+
+  &.button-x-large {
+    font-size: 16px;
+    line-height: 56px;
+    padding: 0px 24px;
+  }
+
+
+  // COLORS
+
+  &.button-secondary {
+    background: $mediumgray;
+    color: rgba($white, .87);
+  }
+
+  &.button-plain {
+    background: $white;
+    color: rgba($darkgray, .87);
+  }
+
+  &.button-subtle {
+    background: $mediumgray;
+    color: darken($offwhite, 10%);
+  }
+
+  &.button-navy {
+    background: $blue;
+    color: rgba($white, .87);
+  }
+
+  &.button-banner {
+    background: $darkgray;
+    color: rgba($white, .87);
+  }
+
+  &.button-shield,
+  &.button-shield.md-button {
+    background-color: $blue;
+    background: $blue url('assets/images/logos/angular/angular_whiteTransparent.svg') 24px 13px no-repeat;
+    color: rgba($white, .87);
+    padding-left: 54px;
+
+    @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
+      background: $blue url('assets/images/logos/angular/angular_whiteTransparent.svg') 24px 13px no-repeat;
+      background-size: 22px 22px;
+    }
+  }
+}
+
+.cta-bar {
+  text-align: center;
+
+  .button {
+    margin: 0px 8px;
+    box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
+    transition: all .2s ease-in-out;
+    &:hover {
+        transform: scale(1.1);
+        color: $offwhite;
+    }
+  }
+}

aio/src/styles/2-modules/_code.scss

@@ -7,6 +7,10 @@ code-tabs md-tab-body {
     display: block;
     padding: 8px 16px;
     margin: 16px auto;
+
+    code {
+      overflow: auto;
+    }
 }
 
 // TERMINAL / SHELL TEXT STYLES
@@ -51,6 +55,10 @@ aio-code pre {
     display: flex;
     padding: 0 48px 0 0;
     white-space: pre-wrap;
+
+    code span, code ol li {
+      line-height: 18px;
+    }
 }
 
 code ol {
@@ -79,6 +87,10 @@ code ol {
   &:hover {
     color: $mediumgray;
   }
+  @media (max-width: 480px) {
+    top: 0;
+    bottom: 0;
+  }
 }
 
 .lang-sh .copy-button, .lang-bash .copy-button {

aio/src/styles/2-modules/_contributor.scss

@@ -2,6 +2,24 @@ $metal: #536E7A;
 $snow: #FFFFFF;
 $steel: #253238;
 
+// .bio-card {
+//     margin: 0 0 32px 0;
+//     position: relative;
+//     cursor: pointer;
+//     box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
+//     background: $white;
+//     transition: all .3s;
+
+//   &:hover {
+//     transform: translate3d(0,-3px,0);
+//     box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.4);
+
+//     nav {
+//       opacity: 1;
+//     }
+//   }
+
+
 aio-contributor-list {
   .grid-fluid {
     margin: 0 auto;
@@ -69,7 +87,15 @@ aio-contributor {
   header {
     position: relative;
     overflow: hidden;
-    border-radius: 2px 2px 0px 0px;
+    border-radius: 4px;
+
+    img {
+      box-sizing: border-box;
+      display: flex;
+      flex: 0 0 auto;
+      width: 100%;
+      height: auto;
+    }
 
     nav {
       transition: opacity .5s;
@@ -78,13 +104,13 @@ aio-contributor {
       left: 0;
       right: 0;
       z-index: 1;
-      padding: $unit;
+      padding: 8px;
       background: rgba($steel, .4);
       opacity: 0;
 
       button {
         font-size: 14px;
-        color: $snow;
+        color: $white;
         text-transform: uppercase;
         opacity: .87;
         background: none;
@@ -92,17 +118,16 @@ aio-contributor {
       }
 
       a {
-        color: $snow;
+        color: $white;
         font-size: 20px;
         text-decoration: none;
         opacity: .87;
-        margin-right: $unit;
+        margin-right: 8px;
         float: right;
       }
     }
   }
 
-
   // MAIN CONTENT
 
   h3 {
@@ -124,4 +149,4 @@ aio-contributor {
     margin: 0;
     text-overflow: ellipsis;
   }
-}
+}

aio/src/styles/2-modules/_hero.scss

@@ -0,0 +1,113 @@
+/*
+* Hero Module
+*
+* A hero banner located at the top of each page that displays the
+* title of the page and sometimes a decorative background.
+*
+*/
+
+
+/*
+* Class
+*/
+
+.hero {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 48px 48px 32px 48px;
+  position: relative;
+
+  @media (max-width: 480px) {
+    height: auto;
+    padding-top: 40px;
+  }
+
+  h1:after {
+   content: none;
+  }
+
+  .hero-title {
+    display: inline-block;
+    font-size: 28px;
+    font-weight: 400;
+    float: left;
+    line-height: 48px;
+    margin: 0 $unit 0 0;
+    text-transform: uppercase;
+
+    &.is-standard-case {
+      text-transform: none;
+    }
+  }
+
+  .hero-subtitle {
+    font-size: 14px;
+    font-weight: 400;
+    line-height: $unit * 3;
+    margin: 0;
+    text-transform: uppercase;
+  }
+
+
+  // CTA BUTTONS
+  .button {
+    margin: 0px $unit;
+
+    // @include respond-to('mobile') {
+    //   margin: 16px 0;
+    //   display: block;
+    // }
+  }
+
+  button {
+    // Override md-button from angular material to align language select with hero title.
+    margin: 0 !important;
+  }
+
+
+  /*
+  * Large Banner
+  */
+
+  &.is-large {
+    padding-top: 32px;
+    text-align: center;
+
+    // @include respond-to('mobile') {
+    //   height: auto;
+    // }
+
+    // LARGE SHEILD LOGO
+    .hero-logo {
+      filter: drop-shadow(0 2px 2px rgba($black, 0.24));
+      margin-bottom: 8px;
+      opacity: 1;
+      padding: 0;
+      width: 240px;
+
+    //   @include respond-to('mobile') {
+    //     width: 192px;
+    //   }
+    }
+
+    .hero-cta,
+    .hero-cta.md-button {
+      background: rgba($white, .87);
+      border-radius: 2px;
+      color: $blue;
+      font-weight: 500;
+      padding: 0 64px;
+      margin: 40px 0;
+      transition: all .3s;
+
+      &:hover {
+        background: $white;
+        box-shadow: 0 8px 8px rgba($black, 0.24), 0 0 8px rgba($black, 0.12);
+        color: $blue;
+      }
+    }
+  }
+}

aio/src/styles/2-modules/_images.scss

@@ -1,3 +1,9 @@
+img {
+  @media (max-width: 600px) {
+    max-width: 100%;
+    float: none !important;
+  }
+}
 
 .image-display {
   border-radius: 4px;
@@ -12,4 +18,8 @@
     display: inline-block;
     max-width: 100%;
   }
+}
+
+.home-row .promo-img-container img {
+  max-width: 90%;
 }

aio/src/styles/2-modules/_modules-dir.scss

@@ -12,3 +12,7 @@
    @import 'table';
    @import 'presskit';
    @import 'card';
+   @import 'subsection';
+   @import 'buttons';
+   @import 'hero';
+   @import 'announcement-bar';

aio/src/styles/2-modules/_subsection.scss

@@ -1,8 +1,7 @@
 .l-sub-section {
     color: $darkgray;
-    border-width: 1px;
-    border-style: solid;
-    padding: 20px;
-    border-radius: 4px;
+    background-color: $lightgray;
+    border-left: 10px solid $mediumgray;
+    padding: 16px;
     margin-bottom: 10px;
 }