feat(press kit): press kit with logos

Author: Eric Jimenez

public/_data.json

@@ -29,5 +29,9 @@
   "support": {
     "title": "Support",
     "subtitle": "Get help from the Angular Community"
+  },
+
+  "presskit": {
+    "title": "Press Kit"
   }
 }

public/presskit.jade

@@ -0,0 +1,52 @@
+div(class="presskit-container l-space-neg-top-8")
+  div(class="presskit-row")
+    div(class="presskit-inner")
+      div
+        h2 ANGULAR LOGO
+        p The logo graphics available for download on this page are provided under <a class="cc-by-anchor" target="_blank" href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>
+
+  div(class="presskit-row")
+    div(class="presskit-inner")
+      div(class="presskit-image-container")
+        img(src="resources/images/logos/angular2/angular.svg")
+      div
+        h3(class="l-space-left-3") FULL COLOR LOGO
+        ul(class="l-space-left-3")
+          li
+            span Angular Logo (png) - <a href="resources/images/logos/angular2/angular.png" download>Download</a>
+          li
+            span Angular Logo (svg) - <a href="resources/images/logos/angular2/angular.svg" download>Download</a>
+
+  div(class="presskit-row")
+    div(class="presskit-inner")
+      div(class="presskit-image-container")
+        div
+          img(src="resources/images/logos/angular2/angular_solidBlack.svg")
+      div
+        h3(class="l-space-left-3") ONE COLOR LOGO
+        ul(class="l-space-left-3")
+          li
+            span Angular Logo Black (png) - <a href="resources/images/logos/angular2/angular_solidBlack.png" download>Download</a>
+          li
+            span Angular Logo Black (svg) - <a href="resources/images/logos/angular2/angular_solidBlack.svg" download>Download</a>
+
+  div(class="presskit-row")
+    div(class="presskit-inner")
+      div(class="presskit-image-container")
+        div
+          img(src="resources/images/logos/angular2/angular_whiteTransparent.svg" class="transparent-img-bg")
+      div
+        h3(class="l-space-left-3") ONE COLOR INVERSE LOGO
+        ul(class="l-space-left-3")
+          li
+            span Angular Logo White Semi-Transparent (png) - <a href="resources/images/logos/angular2/angular_whiteTransparent.png" download>Download</a>
+          li
+            span Angular Logo Semi-Transparent (svg) - <a href="resources/images/logos/angular2/angular_whiteTransparent.svg" download>Download</a>
+
+  div(class="presskit-row")
+    div(class="presskit-inner")
+      div
+        h2 PRESS AND MEDIA
+        p
+        | For inquiries regarding press and media please contact us at
+        | <a href="mailto:[email protected]">[email protected]</a>.

public/resources/css/layout/_layout.scss

@@ -206,6 +206,14 @@ button.verbose.on {display: none}
   .l-pad-right-#{$i} {
     padding-right: $i * 8px;
   }
+
+  .l-space-neg-top-#{$i} {
+    margin-top: $i * -8px;
+  }
+
+  .l-space-neg-left-#{$i} {
+    margin-left: $i * -8px;
+  }
 }
 
 

public/resources/css/main.scss

@@ -49,6 +49,7 @@
 @import 'module/support';
 @import 'module/article-card';
 @import 'module/style-guide';
+@import 'module/_press-kit';
 
 
 /*

public/resources/css/module/_press-kit.scss

@@ -0,0 +1,68 @@
+.presskit-container {
+  h2 {
+    color: #37474F;
+  }
+
+  .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;
+      }
+    }
+  }
+}