1
0
mirror of https://github.com/bigchaindb/site.git synced 2024-11-22 09:46:57 +01:00

tweak guide layouts

This commit is contained in:
Matthias Kretschmann 2017-11-22 13:57:03 +01:00
parent c57711bdb0
commit e169c468c3
Signed by: m
GPG Key ID: 606EEEF3C479A91F
4 changed files with 34 additions and 18 deletions

View File

@ -69,10 +69,14 @@
display: block;
box-shadow: none;
background-color: $brand-main-blue-dark;
padding: $spacer * 2;
padding: $spacer * 1.5;
height: 100%;
border-radius: $border-radius;
@media ($screen-sm) {
padding: $spacer * 3;
}
&:before {
opacity: .85;
}
@ -87,9 +91,21 @@
}
p:last-child,
.guide__title:only-child {
.guide__title:only-child,
.guide__tagline,
.grid {
margin-bottom: 0;
}
.section--guides & {
margin-bottom: $spacer * 2;
a {
@media ($screen-sm) {
padding: $spacer * 4;
}
}
}
}
.guide__title,

View File

@ -20,8 +20,10 @@
}
}
.article__title {
@extend .h5, .transition;
.article__title,
h1.article__title {
font-size: $font-size-h5;
font-weight: $font-weight-normal;
margin: 0;
color: #fff;
position: relative;

View File

@ -5,20 +5,18 @@
<p class="section-description">Complete these guides to learn about how to create apps in BigchainDB.</p>
</header>
</div>
<div class="row row--wide">
<div class="grid grid--full grid-small--half grid--gutters">
{% for guide in site.guides limit: 4 %}
<div class="grid__col">
<article class="guide">
<a href="{{ guide.url }}" {% if guide.header %}style="background-image:url('/guides/{{ guide.header }}')" {% endif %}>
<h1 class="guide__title">{{ guide.title }}</h1>
<p class="guide__tagline">{{ guide.tagline }}</p>
</a>
</article>
</div>
{% endfor %}
</div>
<div class="row">
{% for guide in site.guides limit: 4 %}
<article class="guide">
<a href="{{ guide.url }}" {% if guide.header %}style="background-image:url('/guides/{{ guide.header }}')" {% endif %}>
<h1 class="guide__title">{{ guide.title }}</h1>
<p class="guide__tagline">{{ guide.tagline }}</p>
</a>
</article>
{% endfor %}
</div>
<div class="row text-center">
<a class="btn btn-secondary" href="/guides/">All guides</a>
</div>

View File

@ -5,7 +5,7 @@ title: Guides
tagline: "These guides explain you how to get started and build apps with BigchainDB/IPDB"
---
<section class="section section--guides">
<section class="section section--guideslist">
<div class="row row--wide">
<div class="grid grid--full grid-small--half grid--gutters">
{% for guide in site.guides %}