fix(aio): accessibility items in search and home
Index: Changed h3s to h2s given hierarchy Index: Aligned text and image blocks to be centered Index: Announcement bar button darkened for appropriate contrast Search Results: Changed to list items in unordered list to accommodate accessibility and updated styles accordingly
This commit is contained in:
Stefanie Fluin
Pete Bacon Darwin
parent
f90258162a
commit
ab03852234
|
|
@ -1,9 +1,11 @@
|
|||
<header class="background-sky l-relative">
|
||||
<div class="hero background-superhero-paper is-large"><img
|
||||
src="assets/images/logos/angular/angular.svg" class="hero-logo"/>
|
||||
<h1 class="text-headline">One framework.<br>Mobile & desktop.</h1><a
|
||||
href="guide/quickstart" md-button="md-button"
|
||||
class="hero-cta mat-raised button button-large button-plain">Get Started</a>
|
||||
|
||||
<div class="hero background-superhero-paper is-large">
|
||||
|
||||
<img src="assets/images/logos/angular/angular.svg" class="hero-logo"/>
|
||||
<h1 class="text-headline">One framework.<br>Mobile & desktop.</h1>
|
||||
<a href="guide/quickstart" md-button="md-button" class="hero-cta mat-raised button button-large button-plain">Get Started</a>
|
||||
|
||||
<announcement-bar class="announcement-bar">
|
||||
<div class="announcement-bar-slide cleafix is-visible">
|
||||
<img src="assets/images/logos/angular/angular-banner-logo-grey.png" width="64"/>
|
||||
|
|
@ -11,61 +13,79 @@
|
|||
<a href="http://angularjs.blogspot.com/2017/03/angular-400-now-available.html" target="_blank" class="button mat-button">Learn More</a>
|
||||
</div>
|
||||
</announcement-bar>
|
||||
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<article class="l-content ">
|
||||
|
||||
<div class="home-rows"><!-- Group 1-->
|
||||
<div layout="row" layout-xs="column" class="home-row">
|
||||
|
||||
<div class="promo-img-container promo-1">
|
||||
<div><img src="assets/images/home/responsive-framework.svg" alt="responsive framework"></div>
|
||||
</div>
|
||||
<div class="text-container">
|
||||
<div class="text-block promo-1-desc l-pad-top-2"><h3 class="text-headline">Develop Across
|
||||
All Platforms</h3>
|
||||
<p class="text-body">Learn one way to build applications with Angular and reuse your code
|
||||
and abilities to build apps for any deployment target. For web, mobile web, native
|
||||
mobile and native desktop.
|
||||
</p></div>
|
||||
</div>
|
||||
</div><!-- Group 2-->
|
||||
<div layout="row" layout-xs="column" class="home-row">
|
||||
<div class="text-container">
|
||||
<div class="text-block"><h3 class="text-headline">Speed & Performance</h3>
|
||||
<p class="text-body">Achieve the maximum speed possible on the Web Platform today, and
|
||||
take it further, via Web Workers and server-side rendering.</p>
|
||||
<p class="text-body">Angular puts you in control over scalability. Meet huge data
|
||||
requirements by building data models on RxJS, Immutable.js or another push-model.</p>
|
||||
<div>
|
||||
<img src="assets/images/home/responsive-framework.svg" alt="responsive framework">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-container">
|
||||
<div class="text-block promo-1-desc l-pad-top-2">
|
||||
<h2 class="text-headline">Develop Across All Platforms</h2>
|
||||
<p class="text-body">Learn one way to build applications with Angular and reuse your code and abilities to build apps for any deployment target. For web, mobile web, native mobile and native desktop.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- Group 2-->
|
||||
|
||||
<div layout="row" layout-xs="column" class="home-row">
|
||||
<div class="text-container">
|
||||
<div class="text-block">
|
||||
<h2 class="text-headline">Speed & Performance</h2>
|
||||
<p class="text-body">Achieve the maximum speed possible on the Web Platform today, and take it further, via Web Workers and server-side rendering.</p>
|
||||
<p class="text-body">Angular puts you in control over scalability. Meet huge data requirements by building data models on RxJS, Immutable.js or another push-model.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="promo-img-container promo-2">
|
||||
<div><img src="assets/images/home/speed-performance.svg" alt="speed and performance"></div>
|
||||
<div>
|
||||
<img src="assets/images/home/speed-performance.svg" alt="speed and performance">
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- Group 3-->
|
||||
|
||||
<div layout="row" layout-xs="column" class="home-row">
|
||||
<div class="promo-img-container promo-3">
|
||||
<div><img src="assets/images/home/joyful-development.png" alt="IDE example"></div>
|
||||
</div>
|
||||
|
||||
<div class="text-container">
|
||||
<div class="text-block promo-3-desc"><h3 class="text-headline">Incredible Tooling</h3>
|
||||
<p class="text-body">Build features quickly with simple, declarative templates. Extend the
|
||||
template language with your own components and use a wide array of existing components.
|
||||
Get immediate Angular-specific help and feedback with nearly every IDE and editor. All
|
||||
this comes together so you can focus on building amazing apps rather than trying to make
|
||||
the code work.
|
||||
</p></div>
|
||||
<div class="text-block promo-3-desc">
|
||||
<h2 class="text-headline">Incredible Tooling</h2>
|
||||
<p class="text-body">Build features quickly with simple, declarative templates. Extend the template language with your own components and use a wide array of existing components. Get immediate Angular-specific help and feedback with nearly every IDE and editor. All this comes together so you can focus on building amazing apps rather than trying to make the code work.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- Group 4-->
|
||||
|
||||
<div layout="row" layout-xs="column" class="home-row">
|
||||
|
||||
<div class="text-container">
|
||||
<div class="text-block l-pad-top-2"><h3 class="text-headline">Loved by Millions</h3>
|
||||
<p class="text-body">From prototype through global deployment, Angular delivers the
|
||||
productivity and scalable infrastructure that supports Google's largest
|
||||
applications.</p></div>
|
||||
<div class="text-block l-pad-top-2">
|
||||
<h2 class="text-headline">Loved by Millions</h2>
|
||||
<p class="text-body">From prototype through global deployment, Angular delivers the productivity and scalable infrastructure that supports Google's largest applications.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="promo-img-container promo-4">
|
||||
<div><img src="assets/images/home/loved-by-millions.png" alt="angular on the map"></div>
|
||||
<div>
|
||||
<img src="assets/images/home/loved-by-millions.png" alt="angular on the map">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cta-bar"><a href="/guide/quickstart" md-button="md-button" class="button button-large button-shield mat-raised mat-primary">Get Started</a></div>
|
||||
|
||||
<div class="cta-bar">
|
||||
<a href="/guide/quickstart" md-button="md-button" class="button button-large button-shield mat-raised mat-primary">Get Started</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</article>
|
||||
|
|
|
|||
|
|
@ -2,9 +2,11 @@
|
|||
<h2 class="visually-hidden">Search Results</h2>
|
||||
<div class="search-area" *ngFor="let area of searchAreas | async">
|
||||
<h3>{{area.name}}</h3>
|
||||
<div class="search-page" *ngFor="let page of area.pages">
|
||||
<a class="search-result-item" href="{{ page.path }}" (click)="onResultSelected(page)">{{ page.title }}</a>
|
||||
</div>
|
||||
<ul>
|
||||
<li class="search-page" *ngFor="let page of area.pages">
|
||||
<a class="search-result-item" href="{{ page.path }}" (click)="onResultSelected(page)">{{ page.title }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
div[layout=row]{
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
|
||||
@media (max-width: 480px) {
|
||||
display: block;
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ aio-search-results {
|
|||
.search-results {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
overflow: auto;
|
||||
padding: 68px 32px 0;
|
||||
color: $offwhite;
|
||||
|
|
@ -34,12 +35,23 @@ aio-search-results {
|
|||
flex-direction: column;
|
||||
margin: 16px 16px;
|
||||
height: 100%;
|
||||
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
margin: 10px 0px 5px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: 14px;
|
||||
color: $lightgray;
|
||||
|
|
@ -55,7 +67,6 @@ aio-search-results {
|
|||
}
|
||||
|
||||
@include bp(tiny) {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -108,7 +108,7 @@ $announcement-bar-width: 784px;
|
|||
.button.md-button {
|
||||
margin: 0;
|
||||
padding: 0 40px;
|
||||
background: $lightgray;
|
||||
background: $mediumgray;
|
||||
color: $white;
|
||||
float: right;
|
||||
font-size: 14px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue