From ad9a3a2d3bbb1e99cc7becf2f79469c614a9884e Mon Sep 17 00:00:00 2001 From: Stefanie Fluin Date: Tue, 11 Apr 2017 13:24:42 -0700 Subject: [PATCH] features page and code/table fixes --- aio/content/marketing/features.html | 111 ++++++++++++++---------- aio/src/styles/2-modules/_features.scss | 13 +-- aio/src/styles/2-modules/_table.scss | 12 ++- 3 files changed, 82 insertions(+), 54 deletions(-) diff --git a/aio/content/marketing/features.html b/aio/content/marketing/features.html index c38935c7a4..ecc9235918 100755 --- a/aio/content/marketing/features.html +++ b/aio/content/marketing/features.html @@ -1,64 +1,87 @@ -

Features & Benefits

-
-
+

Features & Benefits

Cross Platform

-

Progressive web apps

+ +
+
Progressive Web Apps

Use modern web platform capabilities to deliver app-like experiences. - High performance, offline, and zero-step installation.

-

Native

-

Build native mobile apps with strategies from Ionic Framework, - NativeScript, and React Native.

-

Desktop

-

Create desktop-installed apps across Mac, Windows, and Linux using - the same Angular methods you've learned for the web plus the ability to access native OS - APIs.

+ High performance, offline, and zero-step installation.

+
+ +
+
Native
+

Build native mobile apps with strategies from Ionic Framework, NativeScript, and React Native.

+
+ +
+
Desktop
+

Create desktop-installed apps across Mac, Windows, and Linux using the same Angular methods you've learned for the web plus the ability to access native OS APIs.

+
+

Speed and Performance

-

Code generation

-

Angular turns your templates into code that's highly optimized for - today's JavaScript virtual machines, giving you all the benefits of hand-written code - with the productivity of a framework.

-

Universal

-

Serve the first view of your application on node.js, .NET, PHP, and - other servers for near-instant rendering in just HTML and CSS. Also paves the way for - sites that optimize for SEO.

-

Code splitting

-

Angular apps load quickly with the new Component Router, which - delivers automatic code-splitting so users only load code required to render the view - they request.

+ +
+
Code Generation
+

Angular turns your templates into code that's highly optimized for today's JavaScript virtual machines, giving you all the benefits of hand-written code with the productivity of a framework.

+
+ +
+
Universal
+

Serve the first view of your application on node.js, .NET, PHP, and other servers for near-instant rendering in just HTML and CSS. Also paves the way for sites that optimize for SEO.

+
+ +
+
Code Splitting
+

Angular apps load quickly with the new Component Router, which delivers automatic code-splitting so users only load code required to render the view they request.

+
+
+

Productivity

-

Templates

+ +
+
Templates

Quickly create UI views with simple and powerful template syntax.

-

Angular CLI

-

Command line tools: start building fast, add components and tests, - then instantly deploy.

-

IDEs

-

Get intelligent code completion, instant errors, and other feedback - in popular editors and IDEs.

+ +
+
Angular CLI
+

Command line tools: start building fast, add components and tests, then instantly deploy.

+
+ +
+
IDEs
+

Get intelligent code completion, instant errors, and other feedback in popular editors and IDEs.

+
+

Full Development Story

-

Testing

-

With Karma for unit tests, you can know if you've broken things every - time you save. And Protractor makes your scenario tests run faster and in a stable - manner.

-

Animation

-

Create high-performance, complex choreographies and animation - timelines with very little code through Angular's intuitive API.

-

Accessibility

-

Create accessible applications with ARIA-enabled components, - developer guides, and built-in a11y test infrastructure.

+ +
+
Testing
+

With Karma for unit tests, you can know if you've broken things every time you save. And Protractor makes your scenario tests run faster and in a stable manner.

+
+ +
+
Animation
+

Create high-performance, complex choreographies and animation timelines with very little code through Angular's intuitive API.

+
+ +
+
Accessibility
+

Create accessible applications with ARIA-enabled components, developer guides, and built-in a11y test infrastructure.

+
+
-
Get - Started
+ +
Get Started
+
diff --git a/aio/src/styles/2-modules/_features.scss b/aio/src/styles/2-modules/_features.scss index a9b27a2a9f..15398725c6 100644 --- a/aio/src/styles/2-modules/_features.scss +++ b/aio/src/styles/2-modules/_features.scss @@ -1,17 +1,12 @@ .feature-row { display: flex; - justify-content: space-between; + flex-direction: row; flex-wrap: wrap; + margin: 24px 0 0; @media (max-width: 600px) { flex-direction: column; } - - h2.text-headline { - font-size: 28px; - margin-top: 10px; - color: #37474F; - } } .features-desc { @@ -19,6 +14,6 @@ } .feature { - max-width: 350px; - margin-bottom: $unit * 4; + max-width: 300px; + margin: 0 24px 32px 0; } diff --git a/aio/src/styles/2-modules/_table.scss b/aio/src/styles/2-modules/_table.scss index 2ab3fe42c2..b68c2698f3 100644 --- a/aio/src/styles/2-modules/_table.scss +++ b/aio/src/styles/2-modules/_table.scss @@ -9,13 +9,23 @@ table { } thead { + display: table-header-group; + vertical-align: middle; + border-color: inherit; + + tr { + display: table-row; + vertical-align: inherit; + border-color: inherit; + } + th { background: $offwhite; border-bottom: 1px solid $lightgray; color: $darkgray; font-size: 12px; font-weight: 500; - padding: 0 24px; + padding: 8px 32px; text-align: left; text-transform: uppercase; }