From 0aa90c6be41def42e74388e607caebcc0d5fcc9a Mon Sep 17 00:00:00 2001 From: Ward Bell Date: Fri, 31 Mar 2017 02:50:15 -0700 Subject: [PATCH] feat(aio): add presskit and correct "/logos/angular2/" --- aio/content/guide/webpack.md | 4 +- aio/content/marketing/index.html | 2 +- aio/content/marketing/presskit.html | 194 ++++++++++++++++++ .../angular-banner-logo-grey.png | Bin .../angular-logo-banner.png | Bin .../logos/{angular2 => angular}/angular.png | Bin .../logos/{angular2 => angular}/angular.svg | 0 .../angular_solidBlack.png | Bin .../angular_solidBlack.svg | 0 .../angular_whiteTransparent.png | Bin .../angular_whiteTransparent.svg | 0 .../shield-with-beta.png | Bin aio/src/styles/1-layouts/_footer.scss | 24 +-- aio/src/styles/2-modules/_modules-dir.scss | 3 +- aio/src/styles/2-modules/_presskit.scss | 73 +++++++ 15 files changed, 284 insertions(+), 16 deletions(-) create mode 100644 aio/content/marketing/presskit.html rename aio/src/assets/images/logos/{angular2 => angular}/angular-banner-logo-grey.png (100%) rename aio/src/assets/images/logos/{angular2 => angular}/angular-logo-banner.png (100%) rename aio/src/assets/images/logos/{angular2 => angular}/angular.png (100%) rename aio/src/assets/images/logos/{angular2 => angular}/angular.svg (100%) rename aio/src/assets/images/logos/{angular2 => angular}/angular_solidBlack.png (100%) rename aio/src/assets/images/logos/{angular2 => angular}/angular_solidBlack.svg (100%) rename aio/src/assets/images/logos/{angular2 => angular}/angular_whiteTransparent.png (100%) rename aio/src/assets/images/logos/{angular2 => angular}/angular_whiteTransparent.svg (100%) rename aio/src/assets/images/logos/{angular2 => angular}/shield-with-beta.png (100%) create mode 100644 aio/src/styles/2-modules/_presskit.scss diff --git a/aio/content/guide/webpack.md b/aio/content/guide/webpack.md index 2a37cae452..93ca3431d0 100644 --- a/aio/content/guide/webpack.md +++ b/aio/content/guide/webpack.md @@ -728,8 +728,8 @@ Webpack techniques covered in this guide. The app.component.html displays this downloadable Angular logo - -. + +. 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. diff --git a/aio/content/marketing/index.html b/aio/content/marketing/index.html index 54e34103d0..5acc2d5ccc 100755 --- a/aio/content/marketing/index.html +++ b/aio/content/marketing/index.html @@ -1,6 +1,6 @@
+ src="assets/images/logos/angular/angular.svg" class="hero-logo"/>

One framework.
Mobile & desktop.

Get Started
diff --git a/aio/content/marketing/presskit.html b/aio/content/marketing/presskit.html new file mode 100644 index 0000000000..7001fdaf51 --- /dev/null +++ b/aio/content/marketing/presskit.html @@ -0,0 +1,194 @@ +
+
+
+
+

ANGULAR LOGO

+

+ The logo graphics available for download on this page are provided under + CC BY 4.0. + 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. +

+

We do ask that you not use the rest of the site graphics in other contexts to avoid confusion.

+
+
+
+ +
+
+
+ +
+
+

FULL COLOR LOGO

+ +
+
+
+ +
+
+
+
+ +
+
+
+

ONE COLOR LOGO

+
    +
  • + Angular Logo Black (png) - Download +
    • +
  • + Angular Logo Black (svg) - Download +
    • +
+
+
+
+ +
+
+
+
+ +
+
+
+

ONE COLOR INVERSE LOGO

+
    +
  • + Angular Logo White Semi-Transparent (png) - Download +
    • +
  • + Angular Logo Semi-Transparent (svg) - Download +
    • +
+
+
+
+ +
+
+
+

PRESS AND MEDIA

+

For inquiries regarding press and media please contact us at + press@angular.io.

+
+
+
+ + + +
+
+
+

BRAND NAMES

+

Angular

+

The name Angular represents the work and promises provided to you by the Angular team.

+ +

When not specified, Angular is assumed to be referring to the latest and greatest stable version from the Angular Team.

+ +

Example

+

Version 4.1 Now Available - We are pleased to announce that the latest release of Angular is now available. Staying up to date is easy!

+ +

Example

+

Correct

+ +

New *ngIf Capabilities - 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 …

+ +

Incorrect

+ +

New *ngIf Capabilities In Angular 4 - 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 …

+ +

Reasoning

+ +

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.

+ +

AngularJS

+ +

AngularJS is the 1.x series of work and promises provided by the Angular team.

+ +

Examples

+
    +
  1. AngularJS is one of the most used framework on the web today (by number of projects).
    2. +
  2. Millions of developers are currently building with AngularJS.
    3. +
  3. Developers are beginning to upgrade from AngularJS to Angular.
    4. +
  4. I’m upgrading my application from AngularJS to Angular.
    5. +
  5. I'm using AngularJS Material on this project.
    6. +
+ +

AngularJS projects should use the + + original AngularJS logo / icon, and not the Angular icon.

+ + AngularJS Logo + +

Angular Material

+ +

This is the work being performed by the Angular team to provide Material Design components for Angular applications.

+ +

AngularJS Material

+ +

This is the work being performed by the Angular team on Material Design components that are compatible with AngularJS.

+ +

3rd Party Projects

+ + X for Angular +

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.

+ +

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.

+ +

Where a codename or shortname is used, such as on npm or github, some are acceptable, some are not acceptable.

+ + Do not use +
    +
  • ng2-
    • +
  • angular2-
    • +
+ + OK to use +
    +
  • ng-
    • +
  • angular-
    • +
+ +

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.

+ +

Examples

+
    +
  • The ng-BE team just launched ng-health to help developers track their own health.
    • +
  • I’m going to use NativeScript for Angular to take advantage of native UI widgets.
    • +
  • ReallyCoolTool for Angular.
    • +
  • ReallyCoolTool for AngularJS.
    • +
+
+
+
+ +
+
+
+

TERMS WE USE

+

+ 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. +

+
    +
  • Ahead of Time Compilation (AOT)
    • +
  • Just in Time Compilation (JIT)
    • +
+
+
+
+
diff --git a/aio/src/assets/images/logos/angular2/angular-banner-logo-grey.png b/aio/src/assets/images/logos/angular/angular-banner-logo-grey.png similarity index 100% rename from aio/src/assets/images/logos/angular2/angular-banner-logo-grey.png rename to aio/src/assets/images/logos/angular/angular-banner-logo-grey.png diff --git a/aio/src/assets/images/logos/angular2/angular-logo-banner.png b/aio/src/assets/images/logos/angular/angular-logo-banner.png similarity index 100% rename from aio/src/assets/images/logos/angular2/angular-logo-banner.png rename to aio/src/assets/images/logos/angular/angular-logo-banner.png diff --git a/aio/src/assets/images/logos/angular2/angular.png b/aio/src/assets/images/logos/angular/angular.png similarity index 100% rename from aio/src/assets/images/logos/angular2/angular.png rename to aio/src/assets/images/logos/angular/angular.png diff --git a/aio/src/assets/images/logos/angular2/angular.svg b/aio/src/assets/images/logos/angular/angular.svg similarity index 100% rename from aio/src/assets/images/logos/angular2/angular.svg rename to aio/src/assets/images/logos/angular/angular.svg diff --git a/aio/src/assets/images/logos/angular2/angular_solidBlack.png b/aio/src/assets/images/logos/angular/angular_solidBlack.png similarity index 100% rename from aio/src/assets/images/logos/angular2/angular_solidBlack.png rename to aio/src/assets/images/logos/angular/angular_solidBlack.png diff --git a/aio/src/assets/images/logos/angular2/angular_solidBlack.svg b/aio/src/assets/images/logos/angular/angular_solidBlack.svg similarity index 100% rename from aio/src/assets/images/logos/angular2/angular_solidBlack.svg rename to aio/src/assets/images/logos/angular/angular_solidBlack.svg diff --git a/aio/src/assets/images/logos/angular2/angular_whiteTransparent.png b/aio/src/assets/images/logos/angular/angular_whiteTransparent.png similarity index 100% rename from aio/src/assets/images/logos/angular2/angular_whiteTransparent.png rename to aio/src/assets/images/logos/angular/angular_whiteTransparent.png diff --git a/aio/src/assets/images/logos/angular2/angular_whiteTransparent.svg b/aio/src/assets/images/logos/angular/angular_whiteTransparent.svg similarity index 100% rename from aio/src/assets/images/logos/angular2/angular_whiteTransparent.svg rename to aio/src/assets/images/logos/angular/angular_whiteTransparent.svg diff --git a/aio/src/assets/images/logos/angular2/shield-with-beta.png b/aio/src/assets/images/logos/angular/shield-with-beta.png similarity index 100% rename from aio/src/assets/images/logos/angular2/shield-with-beta.png rename to aio/src/assets/images/logos/angular/shield-with-beta.png diff --git a/aio/src/styles/1-layouts/_footer.scss b/aio/src/styles/1-layouts/_footer.scss index a1ce0d9b06..7564a89da6 100644 --- a/aio/src/styles/1-layouts/_footer.scss +++ b/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; } diff --git a/aio/src/styles/2-modules/_modules-dir.scss b/aio/src/styles/2-modules/_modules-dir.scss index 6d67a30979..ee78e42349 100644 --- a/aio/src/styles/2-modules/_modules-dir.scss +++ b/aio/src/styles/2-modules/_modules-dir.scss @@ -7,4 +7,5 @@ @import 'alert'; @import 'filetree'; @import 'images'; - @import 'table'; \ No newline at end of file + @import 'table'; + @import 'presskit'; diff --git a/aio/src/styles/2-modules/_presskit.scss b/aio/src/styles/2-modules/_presskit.scss new file mode 100644 index 0000000000..9591295435 --- /dev/null +++ b/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; + } + } + } +}