kredits/kredits-web
9
0
Fork 0
Code Issues 22 Pull Requests 1 Actions Releases 18 Activity

New CSS grid layout

Browse Source
This commit is contained in:
Basti
2018-06-16 16:09:33 +02:00
parent 24e3171311
commit 44b4340a91
5 changed files with 94 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/styles/_layout.scss
+27 -10
View File
@@ -1,11 +1,36 @@
#topbar { #topbar {
height: 3rem;
}
main {
padding: 1rem;
&#index {
width: 100%;
display: grid;
grid-row-gap: 2rem;
grid-template-areas:
"people"
"contributions";
}
}
@media (min-width: 550px) {
main {
&#index {
grid-column-gap: 4rem;
grid-row-gap: 2rem;
grid-template-columns: 2fr 4fr;
grid-template-areas:
"people contributions"
}
}
} }
main section { main section {
@include outer-container;
margin-bottom: 8rem; margin-bottom: 8rem;
&:first-of-type { &:first-of-type {
margin-top: 6rem; margin-top: 2rem;
} }
@include media($mobile) { @include media($mobile) {
@@ -16,19 +41,11 @@ main section {
} }
header { header {
@include span-columns(12);
padding-bottom: 3rem; padding-bottom: 3rem;
text-align: center; text-align: center;
// background-color: purple;
@include media($mobile) { @include media($mobile) {
@include span-columns(10);
@include shift(1);
padding-bottom: 2rem; padding-bottom: 2rem;
} }
div.content {
@include span-columns(12);
}
} }
} }
app/styles/app.scss
+2 -5
View File
@@ -43,14 +43,11 @@ h1, h2, h3, h4, h5, input, button {
section { section {
h2 { h2 {
font-size: 2.8rem;
color: $primaryColor;
@include media($mobile) {
font-size: 2rem; font-size: 2rem;
} color: $primaryColor;
} }
&#contributors { &#people {
.content { .content {
p.stats { p.stats {
padding-top: 3rem; padding-top: 3rem;
app/styles/settings/_neat.scss
+1 -1
View File
@@ -2,4 +2,4 @@
// $visual-grid-color: red; // $visual-grid-color: red;
// $visual-grid-index: front; // $visual-grid-index: front;
// $visual-grid-opacity: 0.5; // $visual-grid-opacity: 0.5;
$max-width: em(500, 12); $max-width: em(1200, 12);
app/templates/application.hbs
+2 -3
View File
@@ -12,6 +12,5 @@
{{/if}} {{/if}}
</section> </section>
</header> </header>
<main id="content">
{{outlet}} {{outlet}}
</main>
app/templates/index.hbs
+17 -11
View File
@@ -1,6 +1,8 @@
<section id="contributors"> <main id="index">
<section id="people">
<header> <header>
<h2>Kosmos Contributors</h2> <h2>Contributors</h2>
</header> </header>
<div class="content"> <div class="content">
{{contributor-list contributors=contributorsSorted}} {{contributor-list contributors=contributorsSorted}}
@@ -10,12 +12,13 @@
<span class="number">{{contributorsWithKredits.length}}</span> contributors. <span class="number">{{contributorsWithKredits.length}}</span> contributors.
</p> </p>
</div> </div>
</section> </section>
{{#if proposalsOpen}} <div id="contributions">
{{#if proposalsOpen}}
<section id="proposals-open"> <section id="proposals-open">
<header> <header>
<h2>Open Proposals</h2> <h2>Unconfirmed Contributions</h2>
</header> </header>
<div class="content"> <div class="content">
{{!-- TODO: We need a better naming for kredits.hasAccounts --}} {{!-- TODO: We need a better naming for kredits.hasAccounts --}}
@@ -31,11 +34,11 @@
{{/if}} {{/if}}
</div> </div>
</section> </section>
{{/if}} {{/if}}
<section id="proposals-closed"> <section id="proposals-closed">
<header> <header>
<h2>Closed Proposals</h2> <h2>Confirmed Contributions</h2>
</header> </header>
<div class="content"> <div class="content">
{{proposal-list proposals=proposalsClosedSorted {{proposal-list proposals=proposalsClosedSorted
@@ -48,9 +51,10 @@
</p> </p>
{{/if}} {{/if}}
</div> </div>
</section> </section>
</div>
<section id="add-contributor"> <section id="add-contributor">
<header> <header>
<h2>Add Contributor</h2> <h2>Add Contributor</h2>
</header> </header>
@@ -62,4 +66,6 @@
Only core team members can add new contributors. Please ask someone to set you up. Only core team members can add new contributors. Please ask someone to set you up.
{{/if}} {{/if}}
</div> </div>
</section> </section>
</main>