fix(docs-infra): center the "Contribute" page (#40944)

This commit improves the layout of the "Contribute" page by centering
the content (similar to other marketing pages).

Before: ![contribute layout before][1]
After: ![contribute layout after][2]

This change has been extracted from #36045.

[1]: https://user-images.githubusercontent.com/8604205/108595056-5b545f00-7386-11eb-97b6-c3606dbfb5fa.png
[2]: https://user-images.githubusercontent.com/8604205/108595060-5becf580-7386-11eb-91fa-b2877f2a4691.png

Co-authored-by: Stefanie Fluin <sjtrimble@gmail.com>

PR Close #40944
This commit is contained in:
George Kalpakas 2021-02-23 16:49:19 +02:00 committed by Zach Arend
parent 2af8099fbc
commit 00562ed935
2 changed files with 47 additions and 40 deletions

View File

@ -2,7 +2,9 @@
<h1 class="banner-headline no-toc no-anchor">Contribute to Angular</h1>
</header>
<article class="contribute-container">
<article class="contribute-container flex-center">
<div>
<h2 class="no-anchor">Angular Projects</h2>
<p>We'd love for you to contribute to our source code and to make Angular projects even better.</p>
@ -14,6 +16,7 @@
Angular is a next generation mobile and desktop application development platform.
</div>
<a href="https://github.com/angular/angular/blob/master/CONTRIBUTING.md" class="button button-blue" mat-button>
Contribute
</a>
@ -23,7 +26,8 @@
<div>
<h3 class="no-anchor">Angular CLI</h3>
Angular CLI makes it easy to create an application that already works, right out of the box. It already follows our best practices.
Angular CLI makes it easy to create an application that already works, right out of the box.
It already follows our best practices.
</div>
@ -36,8 +40,8 @@
<div>
<h3 class="no-anchor">Angular Material</h3>
Our goal is to deliver a lean, lightweight set of Angular-based UI elements that implement the material design specification
for use in Angular single-page applications (SPAs).
Our goal is to deliver a lean, lightweight set of Angular-based UI elements that implement the material design
specification for use in Angular single-page applications (SPAs).
</div>
@ -50,13 +54,15 @@
<div>
<h3 class="no-anchor">AngularFire</h3>
AngularFire is the officially supported Angular binding for Firebase. Firebase is a full backend so you don't need servers
to build your Angular app.
AngularFire is the officially supported Angular binding for Firebase.
Firebase is a full backend so you don't need servers to build your Angular app.
</div>
<a href="https://github.com/angular/angularfire/blob/master/CONTRIBUTING.md" class="button button-blue" mat-button>
Contribute
</a>
</div>
</div>
</article>

View File

@ -13,7 +13,8 @@
> :first-child {
margin-right: 2rem;
width: 60%;
width: 67%;
@media (max-width: 600px) {
width: 100%;
}