feat(aio): add presskit and correct "/logos/angular2/"

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

@@ -86,18 +86,18 @@ footer::after {
     left: 0;
     right: 0;
     background:
-        url('../src/assets/images/logos/angular2/angular_whiteTransparent.png') top left repeat-y,
-        url('../src/assets/images/logos/angular2/angular_whiteTransparent.png') top 80px left 168px repeat-y,
-        url('../src/assets/images/logos/angular2/angular_whiteTransparent.png') top left 336px repeat-y,
-        url('../src/assets/images/logos/angular2/angular_whiteTransparent.png') top 80px left 504px repeat-y,
-        url('../src/assets/images/logos/angular2/angular_whiteTransparent.png') top left 672px repeat-y,
-        url('../src/assets/images/logos/angular2/angular_whiteTransparent.png') top 80px left 840px repeat-y,
-        url('../src/assets/images/logos/angular2/angular_whiteTransparent.png') top left 1008px repeat-y,
-        url('../src/assets/images/logos/angular2/angular_whiteTransparent.png') top 80px left 1176px repeat-y,
-        url('../src/assets/images/logos/angular2/angular_whiteTransparent.png') top left 1344px repeat-y,
-        url('../src/assets/images/logos/angular2/angular_whiteTransparent.png') top 80px left 1512px repeat-y,
-        url('../src/assets/images/logos/angular2/angular_whiteTransparent.png') top left 1680px repeat-y,
-        url('../src/assets/images/logos/angular2/angular_whiteTransparent.png') top 80px left 1848px repeat-y;
+        url('../src/assets/images/logos/angular/angular_whiteTransparent.png') top left repeat-y,
+        url('../src/assets/images/logos/angular/angular_whiteTransparent.png') top 80px left 168px repeat-y,
+        url('../src/assets/images/logos/angular/angular_whiteTransparent.png') top left 336px repeat-y,
+        url('../src/assets/images/logos/angular/angular_whiteTransparent.png') top 80px left 504px repeat-y,
+        url('../src/assets/images/logos/angular/angular_whiteTransparent.png') top left 672px repeat-y,
+        url('../src/assets/images/logos/angular/angular_whiteTransparent.png') top 80px left 840px repeat-y,
+        url('../src/assets/images/logos/angular/angular_whiteTransparent.png') top left 1008px repeat-y,
+        url('../src/assets/images/logos/angular/angular_whiteTransparent.png') top 80px left 1176px repeat-y,
+        url('../src/assets/images/logos/angular/angular_whiteTransparent.png') top left 1344px repeat-y,
+        url('../src/assets/images/logos/angular/angular_whiteTransparent.png') top 80px left 1512px repeat-y,
+        url('../src/assets/images/logos/angular/angular_whiteTransparent.png') top left 1680px repeat-y,
+        url('../src/assets/images/logos/angular/angular_whiteTransparent.png') top 80px left 1848px repeat-y;
     opacity: 0.1;
     background-size: 160px auto;
 }

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

@@ -7,4 +7,5 @@
    @import 'alert';
    @import 'filetree';
    @import 'images';
-   @import 'table';
+   @import 'table';
+   @import 'presskit';

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

@@ -0,0 +1,73 @@
+$unit: 8px;
+.presskit-container {
+  h2 {
+    color: #37474F;
+  }
+
+  .l-space-left-3 {
+    margin-left: 3 * 8px;
+  }
+
+  .cc-by-anchor {
+    text-decoration: underline;
+    color: grey !important;
+  }
+
+  .presskit-row {
+    margin: $unit * 6 0;
+    width: 100%;
+
+    .presskit-inner {
+      display: flex;
+      align-items: center;
+
+      @media(max-width: 599px) {
+        flex-direction: column;
+      }
+
+      h3 {
+        font-weight: 500;
+        margin-top: 0;
+        margin-bottom: 0;
+        color: #455A64;
+
+        @media(max-width: 599px) {
+          padding-bottom: $unit * 2;
+        }
+      }
+
+      .transparent-img-bg {
+        margin-top: 10px;
+        border-radius: 4px;
+        width: 128px;
+        background-color: #34474F;
+      }
+
+      ul {
+        padding: 0;
+        list-style-type: none;
+
+        @media(max-width: 599px) {
+          padding: 0 !important;
+          margin: 0 !important;
+        }
+
+        li {
+          margin: 0 0 $unit 0;
+        }
+      }
+    }
+
+    .presskit-image-container {
+
+      @media(max-width: 599px) {
+        text-align: center;
+      }
+
+      img {
+        width: 128px;
+        margin-bottom: $unit * 2;
+      }
+    }
+  }
+}