From 78a70498b5dd41cd641ad83890f75fa55734e0f1 Mon Sep 17 00:00:00 2001 From: George Kalpakas Date: Mon, 22 Feb 2021 16:21:11 +0200 Subject: [PATCH] fix(docs-infra): improve the layout and appearance of the "Press kit" page (#40945) This commit improves the layout and appearance of the "Press kit" page. Most notable changes include: - Center content and limit max width to 50em (which is 50px by default). - Remove uppercase transform for headings. - Use a two-column layout for icons (instead of one icon per row). - Show "download" icons next to download links. Before (wide): ![presskit page (wide) before][1] Before (narrow 1/2): ![presskit page (narrow 1/2) before][2] Before (narrow 2/2): ![presskit page (narrow 2/2) before][3] After (wide): ![presskit page (wide) after][4] After (narrow 1/2): ![presskit page (narrow 1/2) after][5] After (narrow 2/2): ![presskit page (narrow 2/2) after][6] This change is based on code from #36045. [1]: https://user-images.githubusercontent.com/8604205/108739632-80d79900-753d-11eb-8ddc-ac542ec5b3ac.png [2]: https://user-images.githubusercontent.com/8604205/108739641-82a15c80-753d-11eb-9b20-8119ad117460.png [3]: https://user-images.githubusercontent.com/8604205/108739643-83d28980-753d-11eb-8afa-2d7a5e87d586.png [4]: https://user-images.githubusercontent.com/8604205/108739638-8208c600-753d-11eb-99bb-ea119640de39.png [5]: https://user-images.githubusercontent.com/8604205/108739642-8339f300-753d-11eb-9b25-5c1988adb1dd.png [6]: https://user-images.githubusercontent.com/8604205/108739645-846b2000-753d-11eb-8ef3-b6a8b7c6d1ff.png Co-authored-by: Stefanie Fluin PR Close #40945 --- aio/content/marketing/presskit.html | 1116 +++++++++--------- aio/src/styles/0-base/_typography.scss | 4 + aio/src/styles/1-layouts/_layout-global.scss | 5 + aio/src/styles/2-modules/_presskit.scss | 106 +- 4 files changed, 594 insertions(+), 637 deletions(-) diff --git a/aio/content/marketing/presskit.html b/aio/content/marketing/presskit.html index 4ae5b7cca4..04f9c55a51 100644 --- a/aio/content/marketing/presskit.html +++ b/aio/content/marketing/presskit.html @@ -2,628 +2,594 @@

Press kit

-
-
-
-
-

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.

-
-
-
+
+ +
+

Official Angular Logo

-
-
-
- Full color logo Angular -
-
-

FULL COLOR 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 Angular +
+

Full Color Logo

+ +
+
+ +
+
Black logo Angular
-
-
-

ONE COLOR LOGO

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

One Color Logo

+
-
-

ONE COLOR INVERSE LOGO

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

One Color Inverse Logo

+ +
-
-
-
-

BRAND ICONS

-
-
-
+ +
+

Brand Icons

-
-
-
- Animations Icon +
+
+
+ Animations icon +
+
+

Animations

+ +
-
-

ANIMATIONS

-
    -
  • - Animations Icon (png) - Download -
    • -
  • - Animations Icon (svg) - Download -
    • -
-
-
-
-
-
-
- Augury Icon +
+
+ Augury icon +
+
+

Augury

+ +
-
-

AUGURY

- -
-
-
-
-
-
- CDK Icon +
+
+ CDK icon +
+
+

Component Dev Kit (CDK)

+ +
-
-

COMPONENT DEV KIT (CDK)

- -
-
-
-
-
-
- CLI Icon +
+
+ CLI icon +
+
+

CLI (Command Line Interface)

+ +
-
-

CLI

- -
-
-
-
-
-
- Compiler Icon +
+
+ Compiler icon +
+
+

Compiler

+ +
-
-

COMPILER

- -
-
-
-
-
-
- Components Icon +
+
+ Components icon +
+
+

Web Components

+ +
-
-

WEB COMPONENTS

-
    -
  • - Web Components Icon (png) - Download -
    • -
  • - Web Components Icon (svg) - Download -
    • -
-
-
-
-
-
-
- Forms Icon +
+
+ Forms icon +
+
+

Forms

+ +
-
-

FORMS

- -
-
-
-
-
-
- HTTP Icon +
+
+ HTTP icon +
+
+

HTTP

+ +
-
-

HTTP

- -
-
-
-
-
-
- i18n Icon +
+
+ i18n icon +
+
+

i18n

+ +
-
-

i18n

- -
-
-
-
-
-
- Karma Icon +
+
+ Karma icon +
+
+

Karma

+ +
-
-

KARMA

- + +
+
+ Labs icon +
+
+

Angular Labs

+ +
-
-
-
-
-
- Labs Icon +
+
+ Language services icon +
+
+

Language Services

+ +
-
-

LABS

- -
-
-
- -
-
-
- Language Services Icon -
-
-

LANGUAGE SERVICES

-
    -
  • - Language Services Icon (png) - Download -
    • -
  • - Language Services Icon (svg) - Download -
    • -
-
-
-
- -
-
-
- Material Icon -
-
-

MATERIAL

- -
-
-
- -
-
-
- Protractor Icon -
-
-

PROTRACTOR

-
    -
  • - Protractor Icon (png) - Download -
    • -
  • - Protractor Icon (svg) - Download -
    • -
-
-
-
- -
-
-
- PWA Icon -
-
-

PWA

- -
-
-
- -
-
-
- Router Icon -
-
-

ROUTER

- -
-
-
- -
-
-
- Universal Icon -
-
-

UNIVERSAL

- -
-
-
- -
-
-
-

CONCEPT & FEATURE ICONS

-
-
-
- -
-
-
- Dependency Injection Icon -
-
-

DEPENDENCY INJECTION

-
    -
  • - Dependency Injection Icon (png) - Download -
    • -
  • - Dependency Injection Icon (svg) - Download -
    • -
-
-
-
- -
-
-
- Lazy Loading Icon -
-
-

LAZY LOADING

-
    -
  • - Lazy Loading Icon (png) - Download -
    • -
  • - Lazy Loading Icon (svg) - Download -
    • -
-
-
-
- -
-
-
- Libraries Icon -
-
-

LIBRARIES

- -
-
-
- -
-
-
- Performance Icon -
-
-

PERFORMANCE

-
    -
  • - Performance Icon (png) - Download -
    • -
  • - Performance Icon (svg) - Download -
    • -
-
-
-
- -
-
-
- Templates Icon -
-
-

TEMPLATES

- -
-
-
- -
-
-
-

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 v4.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 ..."

-

Incorrect: "New *ngIf capabilities in Angular 4—Angular 4 introduces the ability to ..."

- -

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

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 -
+
- OK to use -
    -
  • ng-
    • -
  • angular-
    • +
    +
    + Protractor icon +
    +
    +

    Protractor

    + +
    +
    -

    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

    -
-
-
-
-

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)
    • -
+ +
+

Concept and Feature Icons

+ +
+
+
+ Dependency injection icon +
+
+

Dependency Injection

+ +
+
+ +
+
+ Lazy loading icon +
+
+

Lazy Loading

+ +
+
+ +
+
+ Libraries icon +
+
+

Libraries

+ +
+
+ +
+
+ Performance icon +
+
+

Performance

+ +
+
+ +
+
+ Templates icon +
+
+

Templates

+ +
+ + +
+

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

+

+ Incorrect: "New *ngIf capabilities in Angular 4—Angular 4 introduces + the ability to ..." +

+

+ 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 v1.x series of work and promises provided by the Angular team. +

+ +

Examples

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

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

Terminology

+

+ 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/styles/0-base/_typography.scss b/aio/src/styles/0-base/_typography.scss index da432e6ff5..48bc9374ad 100755 --- a/aio/src/styles/0-base/_typography.scss +++ b/aio/src/styles/0-base/_typography.scss @@ -227,3 +227,7 @@ code { } } } + +.error-text { + color: $brightred; +} diff --git a/aio/src/styles/1-layouts/_layout-global.scss b/aio/src/styles/1-layouts/_layout-global.scss index 87c0bbc65c..2ea7343131 100644 --- a/aio/src/styles/1-layouts/_layout-global.scss +++ b/aio/src/styles/1-layouts/_layout-global.scss @@ -7,6 +7,11 @@ body, background-color: $white; } +.center-layout { + margin: 0 auto; + max-width: 50em; +} + .github-links + .content h1 { max-width: 90%; } diff --git a/aio/src/styles/2-modules/_presskit.scss b/aio/src/styles/2-modules/_presskit.scss index fff58441d6..2298e6c473 100644 --- a/aio/src/styles/2-modules/_presskit.scss +++ b/aio/src/styles/2-modules/_presskit.scss @@ -1,78 +1,60 @@ .presskit-container { padding: 0 32px 32px 32px; - h2 { - color: #37474F; + img { + height: 128px; + width: auto; } - .l-space-left-3 { - margin-left: 3 * 8px; - } - - .cc-by-anchor { - text-decoration: underline; - color: grey !important; - } - - .presskit-row { - margin: 48px 0; - width: 100%; - - &:first-child { - margin-top: 0; - } - - .presskit-inner { + .presskit-section { + .presskit-icon-group { display: flex; - align-items: center; + flex-wrap: wrap; - @media(max-width: 599px) { - flex-direction: column; - } + .presskit-icon-item { + align-items: center; + display: flex; + margin: 1rem; + width: calc(50% - 2rem); - h3 { - font-weight: 500; - margin-top: 0; - margin-bottom: 0; - color: #455A64; - - @media(max-width: 599px) { - padding-bottom: 16px; - } - } - - .transparent-img-bg { - margin-top: 10px; - border-radius: 4px; - width: 128px; - height: 128px; - background-color: #34474F; - } - - ul { - padding: 0; - list-style-type: none; - - @media(max-width: 599px) { - padding: 0 !important; - margin: 0 !important; + @media screen and (max-width: 600px) { + align-items: flex-start; + flex-direction: column; + margin-bottom: 2rem; } - li { - margin: 0 0 8px 0; + .presskit-image-container { + flex: none; + margin-right: 2rem; + + @media (max-width: 600px) { + width: 100%; + margin-right: 0; + } + + .transparent-img { + background-color: $deepgray; + border-radius: 50%; + } } - } - } - .presskit-image-container { - @media(max-width: 599px) { - text-align: center; - } + .presskit-links-container { + list-style-type: none; + margin-bottom: 0; + padding: 0; - img { - height: 128px; - width: auto; - margin-bottom: 8px * 2; + a { + display: flex; + align-items: center; + + &:after { + font-family: 'Material Icons'; + content: 'cloud_download'; + @include font-size(24); + margin-left: 0.5rem; + } + } + } } } }