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

aio/content/guide/webpack.md

@@ -728,8 +728,8 @@ Webpack techniques covered in this guide.
 </code-tabs>
 
 The <code>app.component.html</code> displays this downloadable Angular logo
-<a href="https://raw.githubusercontent.com/angular/angular.io/master/publicassets/images/logos/angular2/angular.png" target="_blank">
+<a href="https://raw.githubusercontent.com/angular/angular.io/master/publicassets/images/logos/angular/angular.png" target="_blank">
-<img src="assets/images/logos/angular2/angular.png" height="40px" title="download Angular logo"></a>.
+<img src="assets/images/logos/angular/angular.png" height="40px" title="download Angular logo"></a>.
 Create a folder called `images` under the project's `assets` folder, then right-click (Cmd+click on Mac) 
 on the image and download it to that folder.
 

aio/content/marketing/index.html

@@ -1,6 +1,6 @@
 <header class="background-sky l-relative">
   <div class="hero background-superhero-paper is-large"><img
-      src="assets/images/logos/angular2/angular.svg" class="hero-logo"/>
+      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>

aio/content/marketing/presskit.html

@@ -0,0 +1,194 @@
+<div class="presskit-container l-space-neg-top-8">
+  <div class="presskit-row">
+    <div class="presskit-inner">
+      <div>
+        <h2>ANGULAR LOGO</h2>
+        <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>.
+          This means that you can pretty much do what you like with it including printing it on shirts, creating your own variations, or getting it tattooed over your navel.
+        </p>
+        <p>We do ask that you not use the rest of the site graphics in other contexts to avoid confusion.</p>
+      </div>
+    </div>
+  </div>
+
+  <div class="presskit-row">
+    <div class="presskit-inner">
+      <div class="presskit-image-container">
+        <img src="assets/images/logos/angular/angular.svg">
+      </div>
+      <div>
+        <h3 class="l-space-left-3">FULL COLOR LOGO</h3>
+        <ul class="l-space-left-3">
+          <li>
+            <span>Angular Logo (png) - <a href="assets/images/logos/angular/angular.png" download>Download</a></span>
+          </li>
+          <li>
+            <span>Angular Logo (svg) - <a href="assets/images/logos/angular/angular.svg" download>Download</a></span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <div class="presskit-row">
+    <div class="presskit-inner">
+      <div class="presskit-image-container">
+        <div>
+          <img src="assets/images/logos/angular/angular_solidBlack.svg">
+        </div>
+      </div>
+      <div>
+        <h3 class="l-space-left-3">ONE COLOR LOGO</h3>
+        <ul class="l-space-left-3">
+          <li>
+            <span>Angular Logo Black (png) - <a href="assets/images/logos/angular/angular_solidBlack.png" download>Download</a></span>
+          </li>
+          <li>
+            <span>Angular Logo Black (svg) - <a href="assets/images/logos/angular/angular_solidBlack.svg" download>Download</a></span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <div class="presskit-row">
+    <div class="presskit-inner">
+      <div class="presskit-image-container">
+        <div>
+          <img src="assets/images/logos/angular/angular_whiteTransparent.svg" class="transparent-img-bg">
+        </div>
+      </div>
+      <div>
+        <h3 class="l-space-left-3">ONE COLOR INVERSE LOGO</h3>
+        <ul class="l-space-left-3">
+          <li>
+            <span>Angular Logo White Semi-Transparent (png) - <a href="assets/images/logos/angular/angular_whiteTransparent.png" download>Download</a></span>
+          </li>
+          <li>
+            <span>Angular Logo Semi-Transparent (svg) - <a href="assets/images/logos/angular/angular_whiteTransparent.svg" download>Download</a></span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <div class="presskit-row">
+    <div class="presskit-inner">
+      <div>
+        <h2>PRESS AND MEDIA</h2>
+        <p>For inquiries regarding press and media please contact us at
+        <a href="mailto:press@angular.io">press@angular.io</a>.</p>
+      </div>
+    </div>
+  </div>
+
+  <style>
+    div.bullets ul {
+      list-style-type: disc !important; margin-left: 1em !important;
+    }
+  </style>
+
+  <div class="presskit-row">
+    <div class="presskit-inner">
+      <div class="bullets">
+        <h2>BRAND NAMES</h2>
+          <h3>Angular</h3>
+          <p>The name <b>Angular</b> represents the work and promises provided to you by the Angular team.</p>
+
+          <p>When not specified, Angular is assumed to be referring to the latest and greatest stable version from the Angular Team.</p>
+
+          <h4>Example</h4>
+          <p><b>Version 4.1 Now Available</b> - We are pleased to announce that the latest release of Angular is now available. Staying up to date is easy!</p>
+
+          <h4>Example</h4>
+          <p><b>Correct</b></p>
+
+          <p><b>New *ngIf Capabilities</b> - New in version 4.0 is the ability to use additional syntax to create local variables. This can be very helpful in cases such as working with observables …</p>
+
+          <p><b>Incorrect</b></p>
+
+          <p><b>New *ngIf Capabilities In Angular 4</b> - Angular 4 introduces the ability to use additional syntax to create local variables. This can be very helpful in cases such as working with observables …</p>
+
+          <p><b>Reasoning</b></p>
+
+          <p>By not using “Angular 4” in the title, the content still feels applicable and useful after version 5, 6, 7 have been released, as the syntax is unlikely to change in the short and medium term.</p>
+
+          <h3>AngularJS</h3>
+
+          <p><b>AngularJS</b> is the 1.x series of work and promises provided by the Angular team.</p>
+
+          <h4>Examples</h4>
+          <ol>
+            <li>AngularJS is one of the most used framework on the web today (by number of projects).</li>
+            <li>Millions of developers are currently building with AngularJS.</li>
+            <li>Developers are beginning to upgrade from AngularJS to Angular.</li>
+            <li>I’m upgrading my application from AngularJS to Angular.</li>
+            <li>I'm using AngularJS Material on this project.</li>
+          </ol>
+
+          <p>AngularJS projects should use the
+          <a href="/assets/images/logos/angularjs/AngularJS-Shield.svg" target="_blank" title="AngularJS logo">
+          original AngularJS logo</a> / icon, and not the Angular icon.</p>
+
+        <img src="/assets/images/logos/angularjs/AngularJS-Shield.svg" alt="AngularJS Logo" style="margin-left:20px;" >
+
+          <h3>Angular Material</h3>
+
+          <p>This is the work being performed by the Angular team to provide Material Design components for Angular applications.</p>
+
+          <h3>AngularJS Material</h3>
+
+          <p>This is the work being performed by the Angular team on Material Design components that are compatible with AngularJS.</p>
+
+          <h3>3rd Party Projects</h3>
+
+          <b>X for Angular</b>
+          <p>3rd parties should use the terminology “X for Angular” or “ng-X” for software projects. Projects should avoid the use of Angular X (e.g. Angular UI Toolkit), as it could create authorship confusion. This rule does not apply to events or meetup groups.</p>
+
+          <p>Developers should avoid using Angular version numbers in project names, as this will artificially limit their projects by tying them to a point in time of Angular, or will require renaming over time.</p>
+
+          <p>Where a codename or shortname is used, such as on npm or github, some are acceptable, some are not acceptable.</p>
+
+          <b>Do not use</b>
+          <ul>
+            <li>ng2-</li>
+            <li>angular2-</li>
+          </ul>
+
+          <b>OK to use</b>
+          <ul>
+            <li>ng-</li>
+            <li>angular-</li>
+          </ul>
+
+          <p>As always, component and directive selectors should not begin with “ng-” selectors as this will conflict with components and directives provided by the Angular team.</p>
+
+          <h4>Examples</h4>
+          <ul>
+            <li>The ng-BE team just launched ng-health to help developers track their own health.</li>
+            <li>I’m going to use NativeScript for Angular to take advantage of native UI widgets.</li>
+            <li>ReallyCoolTool for Angular.</li>
+            <li>ReallyCoolTool for AngularJS.</li>
+          </ul>
+      </div>
+    </div>
+  </div>
+
+  <div class="presskit-row">
+    <div class="presskit-inner">
+      <div class="bullets">
+        <h2>TERMS WE USE</h2>
+        <p>
+        We often use terms that are not part of our brand,
+        but we want to remain consistent on the styling and use of them to prevent confusion and to appear unified.
+        </p>
+        <ul>
+          <li>Ahead of Time Compilation (AOT)</li>
+          <li>Just in Time Compilation (JIT)</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</div>

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/angular/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/angular/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/angular/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/angular/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/angular/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/angular/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/angular/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/angular/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/angular/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/angular/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/angular/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 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;
+      }
+    }
+  }
+}