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

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

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

@ -2,61 +2,67 @@
<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">
<h2 class="no-anchor">Angular Projects</h2> <div>
<p>We'd love for you to contribute to our source code and to make Angular projects even better.</p> <h2 class="no-anchor">Angular Projects</h2>
<div class="card-section"> <p>We'd love for you to contribute to our source code and to make Angular projects even better.</p>
<div>
<h3 class="no-anchor">Angular</h3>
Angular is a next generation mobile and desktop application development platform. <div class="card-section">
<div>
<h3 class="no-anchor">Angular</h3>
</div> Angular is a next generation mobile and desktop application development platform.
<a href="https://github.com/angular/angular/blob/master/CONTRIBUTING.md" class="button button-blue" mat-button>
Contribute
</a>
</div>
<div class="card-section"> </div>
<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.
<a href="https://github.com/angular/angular/blob/master/CONTRIBUTING.md" class="button button-blue" mat-button>
Contribute
</a>
</div> </div>
<a href="https://github.com/angular/angular-cli/blob/master/CONTRIBUTING.md" class="button button-blue" mat-button> <div class="card-section">
Contribute <div>
</a> <h3 class="no-anchor">Angular CLI</h3>
</div>
<div class="card-section"> Angular CLI makes it easy to create an application that already works, right out of the box.
<div> It already follows our best practices.
<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 </div>
for use in Angular single-page applications (SPAs).
<a href="https://github.com/angular/angular-cli/blob/master/CONTRIBUTING.md" class="button button-blue" mat-button>
Contribute
</a>
</div> </div>
<a href="https://github.com/angular/components/blob/master/CONTRIBUTING.md" class="button button-blue" mat-button> <div class="card-section">
Contribute <div>
</a> <h3 class="no-anchor">Angular Material</h3>
</div>
<div class="card-section"> Our goal is to deliver a lean, lightweight set of Angular-based UI elements that implement the material design
<div> specification for use in Angular single-page applications (SPAs).
<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 </div>
to build your Angular app.
<a href="https://github.com/angular/components/blob/master/CONTRIBUTING.md" class="button button-blue" mat-button>
Contribute
</a>
</div> </div>
<a href="https://github.com/angular/angularfire/blob/master/CONTRIBUTING.md" class="button button-blue" mat-button>
Contribute
</a>
</div>
<div class="card-section">
<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.
</div>
<a href="https://github.com/angular/angularfire/blob/master/CONTRIBUTING.md" class="button button-blue" mat-button>
Contribute
</a>
</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%;
} }