honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(aio): swap feature headers for divs to remove anchors and fix feature image resizing (#17156)

This commit is contained in:
Stefanie Fluin 2017-06-01 09:37:27 -07:00 committed by Victor Berchet
parent 665e7071fa
commit 47e4fca7fd
2 changed files with 23 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
aio/content/marketing/features.html
View File

@ -9,18 +9,18 @@
<div class="feature-row"> <div class="feature-row">
<div class="feature"> <div class="feature">
<h5>Progressive Web Apps</h5> <div class="feature-title">Progressive Web Apps</div>
<p class="text-body">Use modern web platform capabilities to deliver app-like experiences. <p class="text-body">Use modern web platform capabilities to deliver app-like experiences.
High performance, offline, and zero-step installation.</p> High performance, offline, and zero-step installation.</p>
</div> </div>
<div class="feature"> <div class="feature">
<h5>Native</h5> <div class="feature-title">Native</div>
<p class="text-body">Build native mobile apps with strategies from Ionic Framework, NativeScript, and React Native.</p> <p class="text-body">Build native mobile apps with strategies from Ionic Framework, NativeScript, and React Native.</p>
</div> </div>
<div class="feature"> <div class="feature">
<h5>Desktop</h5> <div class="feature-title">Desktop</div>
<p class="text-body">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.</p> <p class="text-body">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.</p>
</div> </div>
</div> </div>
@ -34,17 +34,17 @@
<div class="feature-row"> <div class="feature-row">
<div class="feature"> <div class="feature">
<h5>Code Generation</h5> <div class="feature-title">Code Generation</div>
<p class="text-body">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.</p> <p class="text-body">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.</p>
</div> </div>
<div class="feature"> <div class="feature">
<h5>Universal</h5> <div class="feature-title">Universal</div>
<p class="text-body">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.</p> <p class="text-body">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.</p>
</div> </div>
<div class="feature"> <div class="feature">
<h5>Code Splitting</h5> <div class="feature-title">Code Splitting</div>
<p class="text-body">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.</p> <p class="text-body">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.</p>
</div> </div>
</div> </div>
@ -58,17 +58,17 @@
<div class="feature-row"> <div class="feature-row">
<div class="feature"> <div class="feature">
<h5>Templates</h5> <div class="feature-title">Templates</div>
<p class="text-body">Quickly create UI views with simple and powerful template syntax.</p> <p class="text-body">Quickly create UI views with simple and powerful template syntax.</p>
</div> </div>
<div class="feature"> <div class="feature">
<h5>Angular CLI</h5> <div class="feature-title">Angular CLI</div>
<p class="text-body">Command line tools: start building fast, add components and tests, then instantly deploy.</p> <p class="text-body">Command line tools: start building fast, add components and tests, then instantly deploy.</p>
</div> </div>
<div class="feature"> <div class="feature">
<h5>IDEs</h5> <div class="feature-title">IDEs</div>
<p class="text-body">Get intelligent code completion, instant errors, and other feedback in popular editors and IDEs.</p> <p class="text-body">Get intelligent code completion, instant errors, and other feedback in popular editors and IDEs.</p>
</div> </div>
</div> </div>
@ -82,17 +82,17 @@
<div class="feature-row"> <div class="feature-row">
<div class="feature"> <div class="feature">
<h5>Testing</h5> <div class="feature-title">Testing</div>
<p class="text-body">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.</p> <p class="text-body">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.</p>
</div> </div>
<div class="feature"> <div class="feature">
<h5>Animation</h5> <div class="feature-title">Animation</div>
<p class="text-body">Create high-performance, complex choreographies and animation timelines with very little code through Angular's intuitive API.</p> <p class="text-body">Create high-performance, complex choreographies and animation timelines with very little code through Angular's intuitive API.</p>
</div> </div>
<div class="feature"> <div class="feature">
<h5>Accessibility</h5> <div class="feature-title">Accessibility</div>
<p class="text-body">Create accessible applications with ARIA-enabled components, developer guides, and built-in a11y test infrastructure.</p> <p class="text-body">Create accessible applications with ARIA-enabled components, developer guides, and built-in a11y test infrastructure.</p>
</div> </div>
</div> </div>

11
aio/src/styles/1-layouts/_marketing-layout.scss
View File

@ -289,6 +289,10 @@ aio-shell {
} }
} }
.feature-section img {
max-width: 70px;
}
@media (max-width: 600px) { @media (max-width: 600px) {
md-sidenav-container.sidenav-container { md-sidenav-container.sidenav-container {
padding-top: 0; padding-top: 0;
@ -327,6 +331,13 @@ aio-shell {
text-align: center; text-align: center;
} }
} }
.feature-title {
font-size: 16px;
font-weight: 500;
margin: 8px 0px;
clear: both;
}
} }
aio-shell:not(.view-SideNav) { aio-shell:not(.view-SideNav) {