iSharkFly-Docs/angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
aio/content/marketing/contribute.html
View File

@ -2,7 +2,9 @@
<h1 class="banner-headline no-toc no-anchor">Contribute to Angular</h1> <h1 class="banner-headline no-toc no-anchor">Contribute to Angular</h1>
</header> </header>
<article class="contribute-container"> <article class="contribute-container flex-center">
<div>
<h2 class="no-anchor">Angular Projects</h2> <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> <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. Angular is a next generation mobile and desktop application development platform.
</div> </div>
<a href="https://github.com/angular/angular/blob/master/CONTRIBUTING.md" class="button button-blue" mat-button> <a href="https://github.com/angular/angular/blob/master/CONTRIBUTING.md" class="button button-blue" mat-button>
Contribute Contribute
</a> </a>
@ -23,7 +26,8 @@
<div> <div>
<h3 class="no-anchor">Angular CLI</h3> <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> </div>
@ -36,8 +40,8 @@
<div> <div>
<h3 class="no-anchor">Angular Material</h3> <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 Our goal is to deliver a lean, lightweight set of Angular-based UI elements that implement the material design
for use in Angular single-page applications (SPAs). specification for use in Angular single-page applications (SPAs).
</div> </div>
@ -50,13 +54,15 @@
<div> <div>
<h3 class="no-anchor">AngularFire</h3> <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 AngularFire is the officially supported Angular binding for Firebase.
to build your Angular app. Firebase is a full backend so you don't need servers to build your Angular app.
</div> </div>
<a href="https://github.com/angular/angularfire/blob/master/CONTRIBUTING.md" class="button button-blue" mat-button> <a href="https://github.com/angular/angularfire/blob/master/CONTRIBUTING.md" class="button button-blue" mat-button>
Contribute Contribute
</a> </a>
</div> </div>
</div>
</article> </article>

3
aio/src/styles/2-modules/_contribute.scss
View File

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