fix(aio): home & marketing styles cleanup (#17926)

aio/content/marketing/events.html

@@ -2,7 +2,7 @@
   <h1 class="banner-headline no-toc no-anchor">Events</h1>
 </header>
 
-<article class="l-content ">
+<article>
 <p>Where we'll be presenting:</p>
   <table class="is-full-width">
     <thead>

aio/content/marketing/features.html

@@ -2,7 +2,7 @@
   <h1 class="banner-headline no-toc no-anchor">Features & Benefits</h1>
 </header>
 
-<article class="l-content ">
+<article>
   <div class="flex-center">
     <div>
       <div class="feature-section">
@@ -28,6 +28,7 @@
             <p class="text-body">Create desktop-installed apps across Mac, Windows, and Linux using the same Angular methods you've learned for the web plus the ability to access native OS APIs.</p>
           </div>
         </div>
+        <hr>
       </div>
 
       <div class="feature-section">
@@ -52,6 +53,7 @@
             <p class="text-body">Angular apps load quickly with the new Component Router, which delivers automatic code-splitting so users only load code required to render the view they request.</p>
           </div>
         </div>
+        <hr>
       </div>
 
       <div class="feature-section">
@@ -76,6 +78,7 @@
             <p class="text-body">Get intelligent code completion, instant errors, and other feedback in popular editors and IDEs.</p>
           </div>
         </div>
+        <hr>
       </div>
 
       <div class="feature-section">

aio/content/marketing/index.html

@@ -1,5 +1,5 @@
 <!--FULL HEADER BLOCK-->
-<header class="l-relative">
+<header>
 
   <!--BACKGROUND IMAGE-->
   <div class="background-sky hero"></div>
@@ -24,7 +24,7 @@
 
 </header>
 
-<article class="l-content">
+<article>
   <div class="home-rows">
 
     <!--Announcement Bar-->

aio/content/marketing/news.html

@@ -2,7 +2,7 @@
   <h1 class="hero-title no-toc">News</h1>
   <div class="clear"></div>
 </header>
-<article class="l-content ">
+<artice>
   <div class="grid-fluid l-space-bottom-2">
     <div class="c12 text-center"><h3 class="text-headline text-uppercase"> Core Team</h3></div>
     <div class="clear"></div>

aio/src/index.html

@@ -78,10 +78,10 @@
       <div class="homepage-container">
         <div class="hero-headline">One framework.<br>Mobile &amp; desktop.</div>
       </div>
-      <h2 style="color: red; text-align: center;">
-        <b><i>This website requires JavaScript.</i></b>
-      </h2>
     </section>
+    <h2 style="color: red; text-align: center; margin-top: -50px;">
+      <b><i>This website requires JavaScript.</i></b>
+    </h2>
   </noscript>
 </body>
 </html>

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

@@ -86,8 +86,14 @@ p, ol, ul, ol, li, input, a  {
   }
 }
 
-ol li {
+ol {
-  margin: 14px 0px;
+  li, p {
+    margin: 4px 0;
+  }
+}
+
+li p {
+  margin: 0;
 }
 
 a {

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

@@ -16,10 +16,6 @@ body {
     clear: both;
 }
 
-l-relative {
-    position: relative;
-}
-
 .l-clearfix:after, .clearfix:after {
     content: "";
     display: table;

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

@@ -1,21 +1,21 @@
 .hero {
-  width: 100%;
-  min-height: 480px;
-  height: 80vh;
-  max-height: 560px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  box-sizing: border-box;
-  padding: 48px 48px 32px 48px;
   position: absolute;
   width: 100%;
+  min-height: 480px;
+  height: 80vh;
+  max-height: 560px;
+  box-sizing: border-box;
+  padding: 48px 48px 32px 48px;
   overflow: hidden;
   transform: skewY(8deg);
   transform-origin: 100%;
 
   @media (max-width: 480px) {
+    max-height: 486px;
     padding-top: 40px;
     transform: none;
   }
@@ -29,7 +29,7 @@
     font-size: 28px;
     font-weight: 400;
     line-height: 48px;
-    margin: 0 $unit 0 0;
+    margin: 0 8px 0 0;
     text-transform: uppercase;
 
     &.is-standard-case {
@@ -40,20 +40,20 @@
 
 section#intro {
   display: flex;
-  width: 900px;
-  height: 480px;
-  margin: 0 auto;
-  padding: 48px 0 0;
   align-items: center;
   position: relative;
+  width: 900px;
+  height: 480px;
+  margin: 0 auto -32px;
+  padding: 48px 0 0;
   color: white;
 
   @media (max-width: 780px) {
     flex-direction: column;
-    max-width: 100vw;
-    width: 100%;
     justify-content: center;
-    padding: 64px 0 32px;
+    width: 100%;
+    max-width: 100vw;
+    padding: 40px 0 32px;
 
     button {
       margin: 0;
@@ -62,12 +62,12 @@ section#intro {
   }
 
   .homepage-container {
+    width: 100%;
+    max-width: 1040px;
+    margin: 0 auto;
     margin-top: -7%;
     padding-top: 0;
     padding-bottom: 0;
-    max-width: 1040px;
-    width: 100%;
-    margin: 0 auto;
 
     @media  (max-width: 780px) {
       display: flex;
@@ -92,22 +92,27 @@ section#intro {
     @media (max-width: 780px) {
       text-align: center;
     }
+
+    @media (max-width: 575px) {
+      font-size: 32px;
+      line-height: 50px;
+    }
   }
 
   .hero-logo {
-    width: 400px;
     display: flex;
+    width: 400px;
 
     @media (max-width: 780px) {
-      width: 250px;
+      justify-content: center;
     }
 
     img {
-      filter: drop-shadow(0 2px 2px rgba($black, 0.24));
-      margin-bottom: 8px;
-      padding: 0;
       width: 400px;
       height: 400px;
+      margin-bottom: 8px;
+      padding: 0;
+      filter: drop-shadow(0 2px 2px rgba($black, 0.24));
 
       @media (max-width: 780px) {
         width: 250px;
@@ -121,36 +126,44 @@ section#intro {
   display: flex;
   flex-direction: row;
   justify-content: space-around;
-  padding: 16px;
+  align-items: center;
-  margin: 0 auto;
   max-width: 50vw;
+  margin: 0 auto;
+  padding: 16px;
   background-color: $white;
   border-radius: 4px;
   box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
   box-sizing: border-box;
-  align-items: center;
   transition: all 0.3s ease-in;
 
-  @media (max-width: 600px) {
+  @media (max-width: 992px) {
     flex-direction: column;
     text-align: center;
-    min-width: 100%;
     padding: 32px 16px;
   }
 
+  @media (max-width: 768px) {
+    width: 100%;
+    max-width: none;
+  }
+
+  & > * {
+    margin: 8px;
+  }
+
   .button {
+    display: flex;
+    justify-content: center;
     align-items: center;
+    height: 40px;
+    min-width: 160px;
+    font-size: 16px;
+    color: $white;
     background-color: $blue;
     border-radius: 48px;
     box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
     box-sizing: border-box;
-    color: $white;
     cursor: pointer;
-    display: flex;
-    font-size: 16px;
-    height: 40px;
-    justify-content: center;
-    min-width: 160px;
 
     &:hover {
       color: rgba($white, 0.7);
@@ -158,9 +171,9 @@ section#intro {
   }
 
   .material-icons {
+    display: none;
     right: 0;
     position: static;
-    display: none;
     transition: all 0.3s ease-in;
     font-size: 16px;
   }
@@ -168,6 +181,7 @@ section#intro {
   p {
     font-size: 16px;
     margin: 8px;
+    text-align: center;
   }
 }
 
@@ -180,16 +194,16 @@ section#intro {
 
 .home-row .card {
   @include card(70%, auto);
-  min-width: 350px;
-  width: 70%;
-  height: auto;
-  padding: 24px;
-  margin: auto;
   display: flex;
   flex-direction: row;
   align-items: center;
-  box-shadow: 0 6px 6px rgba(10, 16, 20, 0.15), 0 0 52px rgba(10, 16, 20, 0.12);
   position: relative;
+  width: 70%;
+  min-width: 350px;
+  height: auto;
+  margin: auto;
+  padding: 24px;
+  box-shadow: 0 6px 6px rgba(10, 16, 20, 0.15), 0 0 52px rgba(10, 16, 20, 0.12);
 
   @media (max-width: 600px) {
     margin: 16px auto 0;
@@ -206,8 +220,8 @@ section#intro {
 
   @media (max-width: 1300px) {
     img {
-      max-width: none;
       height: 70px;
+      max-width: none;
     }
   }
 
@@ -220,9 +234,9 @@ section#intro {
 
     p {
       text-align: left;
-      padding: 8px 0;
       color: $darkgray;
       margin: 0;
+      padding: 8px 0;
     }
   }
 
@@ -235,17 +249,20 @@ section#intro {
 }
 
 .button.hero-cta {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 184px;
+  height: 40px;
+  padding: 0 24px;
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 40px;
   background-color: $white;
   border-radius: 48px;
   box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
   box-sizing: border-box;
   cursor: pointer;
-  font-size: 18px;
-  font-weight: 600;
-  height: 40px;
-  line-height: 40px;
-  padding: 0 24px;
-  text-align: center;
 
   &:hover {
     opacity: 0.9;
@@ -275,6 +292,12 @@ aio-shell {
     }
   }
 
+  &.page-features {
+    article {
+      padding: 0 3rem;
+    }
+  }
+
   &.page-home, &.page-resources, &.page-events, &.page-features {
 
     .content img {
@@ -306,27 +329,10 @@ aio-shell {
 
 .text-headline {
   font-size: 20px;
+  font-weight: 500;
+  color: $blue;
   margin-top: 10px;
   text-transform: uppercase;
-  color: $blue;
-  font-weight: 500;
-}
-
-.feature-section {
-  .feature-header {
-    text-align: center;
-
-    .text-headline {
-      text-align: center;
-    }
-  }
-
-  .feature-title {
-    font-size: 16px;
-    font-weight: 500;
-    margin: 8px 0px;
-    clear: both;
-  }
 }
 
 aio-shell:not(.view-SideNav) {
@@ -338,8 +344,8 @@ aio-shell:not(.view-SideNav) {
 div[layout=row]{
     display: flex;
     justify-content: center;
-    box-sizing: border-box;
     align-items: center;
+    box-sizing: border-box;
 
     @media (max-width: 480px) {
       display: block;
@@ -357,32 +363,26 @@ div[layout=row]{
     }
 }
 
-.home-row .promo-img-container, .home-row .text-container {
-    max-width: 50%;
-}
-
 .background-superhero-paper {
-    background-blend-mode: multiply;
     background-size: 100%;
-}
+    background-blend-mode: multiply;
-
-header.bckground-sky.l-relative {
-    display: flex;
-    flex-direction: column;
 }
 
 .home-row {
   max-width: 920px;
-  margin: 32px;
+  margin: 32px auto;
-  margin-left: auto;
-  margin-right: auto;
 
-  @media (max-width: 480px) {
+  .promo-img-container, .text-container {
-      display: block;
+    max-width: 50%;
 
-      .text-headline, .promo-img-container {
+    @media(max-width: 480px) {
-        text-align: center;
+      max-width: 100%;
+      text-align: center;
+
+      &:nth-child(even) {
+        flex-direction: column-reverse;
       }
+    }
   }
 
   .text-block {
@@ -393,20 +393,10 @@ header.bckground-sky.l-relative {
     }
   }
 
-  @media(max-width: 600px) {
-    .promo-img-container, .text-container {
-      max-width: 100%;
-    }
-
-    &:nth-child(even) {
-      flex-direction: column-reverse;
-    }
-  }
-
   .promo-img-container {
 
-    @media (max-width: 375px) {
+    img {
-      text-align: initial;
+      max-width: 90% !important;
     }
 
     p {

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

@@ -163,13 +163,6 @@ button.vertical-menu-item {
  // margin: 4px;
 }
 
-.promo-img-container img {
-  max-width: 90%;
-  @include bp(small) {
-    max-width: 100%;
-  }
-}
-
 aio-nav-menu.top-menu {
   padding: 24px 0 0;
 

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

@@ -4,6 +4,12 @@
   margin-right: 20px;
   top: 12px;
   height: 40px;
+
+  @media(max-width: 992px) {
+    &:hover {
+      transform: scale(1.1);
+    }
+  }
 }
 
 aio-top-menu {

aio/src/styles/2-modules/_api-list.scss

@@ -42,9 +42,6 @@ aio-api-list {
   }
 }
 
-$phone-breakpoint: 480px;
-$tablet-breakpoint: 800px;
-
 /* LAYOUT */
 
 .docs-content {
@@ -59,8 +56,7 @@ $tablet-breakpoint: 800px;
   @media handheld and (max-width: $phone-breakpoint),
   screen and (max-device-width: $phone-breakpoint),
   screen and (max-width: $tablet-breakpoint) {
-    padding: 0;
+    padding: 24px 0 0;
-    padding-top: ($unit * 3);
   }
 }
 
@@ -108,7 +104,7 @@ $tablet-breakpoint: 800px;
   .material-icons {
     color: $blue-grey-100;
     font-size: 20px;
-    left: $unit;
+    left: 8px;
     position: absolute;
     top: 6px;
     z-index: $layer-1;
@@ -186,7 +182,7 @@ $tablet-breakpoint: 800px;
     white-space: nowrap;
 
     .symbol {
-      margin-right: $unit;
+      margin-right: 8px;
     }
     a {
       color: $blue-grey-600;
@@ -256,7 +252,7 @@ p {
 }
 
 .code-margin {
-  margin-bottom: $unit;
+  margin-bottom: 8px;
 }
 
 .no-bg {

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

@@ -1,18 +1,38 @@
-.feature-row {
+// FEATURES MARKETING PAGE SPECIFIC STYLES
-  display: flex;
-  flex-wrap: wrap;
-  margin: 24px 0 0;
 
-  @media (max-width: 600px) {
+.feature-section {
-    flex-direction: column;
+  margin: 0 0 32px;
+
+  .feature-header, .text-headline {
+    text-align: center;
   }
-}
 
-.features-desc {
+  .feature-header img {
-  max-width: 920px;
+    margin: 16px;
-}
+  }
 
-.feature {
+  .feature-title {
-  max-width: 300px;
+    font-size: 16px;
-  margin: 0 24px 32px 0;  
+    font-weight: 500;
-}
+    margin: 8px 0px;
+    clear: both;
+  }
+
+  .feature-row {
+    display: flex;
+    flex-wrap: wrap;
+
+    @media (max-width: 600px) {
+      flex-direction: column;
+    }
+
+    .feature {
+      max-width: 300px;
+      margin: 0 16px;  
+      
+      @media (max-width: 768px) {
+        max-width: 100%;
+      }
+    }
+  }
+}

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

@@ -43,9 +43,4 @@
       border-radius: 4px;
     }
   }
-
-  // This page specific style should not really be here
-  .home-row .promo-img-container img {
-    max-width: 90%;
-  }
 }

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

@@ -15,7 +15,7 @@
   }
 
   .presskit-row {
-    margin: $unit * 6 0;
+    margin: 48px 0;
     width: 100%;
 
     .presskit-inner {
@@ -33,7 +33,7 @@
         color: #455A64;
 
         @media(max-width: 599px) {
-          padding-bottom: $unit * 2;
+          padding-bottom: 16px;
         }
       }
 
@@ -55,7 +55,7 @@
         }
 
         li {
-          margin: 0 0 $unit 0;
+          margin: 0 0 8px 0;
         }
       }
     }
@@ -69,7 +69,7 @@
       img {
         width: 128px;
         height: 128px;
-        margin-bottom: $unit * 2;
+        margin-bottom: 8px * 2;
       }
     }
   }

aio/src/styles/_constants.scss

@@ -1,6 +1,3 @@
-$small-breakpoint-width: 840px;
-$unit: 8px;
-
 // TYPOGRAPHY
 $main-font: "Roboto","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
 $code-font: "Droid Sans Mono", monospace;
@@ -113,3 +110,8 @@ $api-symbols: (
     background: $purple-600
   )
 );
+
+// OTHER
+$small-breakpoint-width: 840px;
+$phone-breakpoint: 480px;
+$tablet-breakpoint: 800px;

aio/src/styles/_mixins.scss

@@ -58,6 +58,7 @@
     border: 0.5px solid $lightgray;
 }
 
+// INFO CARD SKELETON
 @mixin card($height, $width) {
   height: $height;
   width: $width;