feat(aio): implement resources with resources.json

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

@@ -125,4 +125,8 @@ header.bckground-sky.l-relative {
       }
     }
   }
-}
+}
+
+.text-uppercase {
+  text-transform: uppercase;
+}

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

@@ -21,4 +21,5 @@
    @import 'hr';
    @import 'live-example';
    @import 'scrollbar';
-   @import 'callout';
+   @import 'callout';
+   @import 'resources';

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

@@ -0,0 +1,238 @@
+.text-headline {
+  margin: 0px 0px ($unit * 2) 0px;
+  font-size: 24px;
+  font-weight: 400;
+  line-height: 32px;
+}
+
+.grid-fixed {
+  margin: 0 auto;
+  *zoom: 1;
+  width: 960px;
+}
+
+.grid-fixed .c3, .grid-fixed .c8, {
+  display: inline;
+  margin-left: 10px;
+  margin-right: 10px;
+}
+
+.grid-fixed:after, .grid-fixed:before {
+  content: '.';
+  clear: both;
+  display: block;
+  overflow: hidden;
+  visibility: hidden;
+  font-size: 0;
+  line-height: 0;
+  width: 0;
+  height: 0;
+}
+.grid-fixed .c3 {
+  width: 220px;
+}
+.grid-fixed .c8 {
+  width: 620px;
+}
+
+@media handheld and (max-width: 480px), screen and (max-width: 480px), screen and (max-width: 900px) {
+  .grid-fixed {
+    width: auto;
+  }
+}
+
+@media handheld and (max-width: 480px), screen and (max-width: 480px), screen and (max-width: 900px) {
+  .grid-fixed .c3, .grid-fixed .c8 {
+    margin-left: 20px;
+    margin-right: 20px;
+    float: none;
+    display: block;
+    width: auto;
+  }
+}
+
+@media handheld and (max-width: 480px), screen and (max-width: 480px), screen and (max-width: 480px) {
+  .grid-fixed .c3, .grid-fixed .c8 {
+    margin-left: 0px;
+    margin-right: 0px;
+    float: none;
+    display: block;
+    width: auto;
+  }
+}
+
+@media handheld and (max-width: 900px), screen and (max-width: 900px) {
+  /* line 6, ../scss/_responsive.scss */
+  .grid-fixed{
+    margin: 0 auto;
+    *zoom: 1;
+  }
+  .grid-fixed:after, .grid-fixed:before, {
+    content: '.';
+    clear: both;
+    display: block;
+    overflow: hidden;
+    visibility: hidden;
+    font-size: 0;
+    line-height: 0;
+    width: 0;
+    height: 0;
+  }
+}
+
+@media handheld and (max-width: 480px), screen and (max-width: 480px) {
+  /* line 6, ../scss/_responsive.scss */
+  .grid-fixed {
+    margin: 0 auto;
+    *zoom: 1;
+  }
+  .grid-fixed:after, .grid-fixed:before {
+    content: '.';
+    clear: both;
+    display: block;
+    overflow: hidden;
+    visibility: hidden;
+    font-size: 0;
+    line-height: 0;
+    width: 0;
+    height: 0;
+  }
+}
+
+.resources {
+
+  .shadow-1 {
+    transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: 0 1px 4px 0 rgba($black, 0.37);
+  }
+
+  .showcase {
+    margin-bottom: $unit * 6;
+    border-radius: 4px;
+  }
+
+  .h-affix {
+    position: fixed;
+  }
+
+  .affix-top {
+    top: 150px;
+  }
+
+  .c-resource {
+    h4 {
+      margin: 0;
+      line-height: 24px;
+    }
+
+    p {
+      margin: 0;
+    }
+  }
+
+  .c-resource-nav {
+    margin-top: 48px;
+    width: $unit * 20;
+    z-index: 1;
+    background-color: #fff;
+    border-radius: 2px;
+
+    a {
+      color: #373E41;
+      text-decoration: none;
+    }
+
+    .category {
+      padding: 10px 0;
+
+      .category-link {
+        display: block;
+        margin: 2px 0;
+        padding: 3px 14px;
+        font-size: 18px !important;
+
+        &:hover {
+          background: #edf0f2;
+          color: #2B85E7;
+        }
+      }
+    }
+
+    .subcategory {
+      .subcategory-link {
+        display: block;
+        margin: 2px 0;
+        padding: 4px 14px;
+
+        &:hover {
+          background: #edf0f2;
+          color: #2B85E7;
+        }
+      }
+    }
+  }
+
+  .h-anchor-offset {
+    display: block;
+    position: relative;
+    top: -20px;
+    visibility: hidden;
+  }
+
+  .l-flex--column {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .c-resource-header {
+    margin-bottom: 16px;
+  }
+
+  .c-contribute {
+    margin-bottom: 24px;
+  }
+
+  .c-resource-header h2 {
+    margin: 0;
+  }
+
+  .subcategory-title {
+    padding: 16px 23px;
+    margin: 0;
+    background-color: $mist;
+    color: #373E41;
+  }
+
+  .h-capitalize {
+    text-transform: capitalize;
+  }
+
+  .h-hide {
+    display: none;
+  }
+
+  .resource-row-link {
+    color: #1a2326;
+    border: transparent solid 1px;
+    margin: 0;
+    padding: 16px 23px 16px 23px;
+    position: relative;
+    text-decoration: none;
+    transition: all .3s;
+  }
+
+  .resource-row-link:hover {
+    color: #1a2326;
+    text-decoration: none;
+    border-color: #2B85E7;
+    border-radius: 4px;
+    box-shadow: 0 8px 8px rgba(1, 67, 163, .24), 0 0 8px rgba(1, 67, 163, .12), 0 6px 18px rgba(43, 133, 231, .12);
+    transform: translate3d(0, -2px, 0);
+  }
+
+  @media(max-width: 900px) {
+    .c-resource-nav {
+      display: none;
+    }
+  }
+}

aio/src/styles/_constants.scss

@@ -14,6 +14,7 @@ $white: #FFFFFF;
 $offwhite: #FAFAFA;
 $backgroundgray: #F1F1F1;
 $lightgray: #DBDBDB;
+$mist: #ECEFF1;
 $mediumgray: #7E7E7E;
 $darkgray: #333;
 $black: #0A1014;