From e169c468c3327304610b124bc60ce32ed74f721b Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Wed, 22 Nov 2017 13:57:03 +0100
Subject: [PATCH] tweak guide layouts

---
 _src/_assets/styles/_page-guides.scss         | 20 ++++++++++++++--
 .../styles/_sections/_section-blog.scss       |  6 +++--
 _src/_includes/sections/section-guides.html   | 24 +++++++++----------
 _src/guides.html                              |  2 +-
 4 files changed, 34 insertions(+), 18 deletions(-)

diff --git a/_src/_assets/styles/_page-guides.scss b/_src/_assets/styles/_page-guides.scss
index 64581be..1e19db9 100644
--- a/_src/_assets/styles/_page-guides.scss
+++ b/_src/_assets/styles/_page-guides.scss
@@ -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,
diff --git a/_src/_assets/styles/_sections/_section-blog.scss b/_src/_assets/styles/_sections/_section-blog.scss
index cd9baf6..3d9ba85 100644
--- a/_src/_assets/styles/_sections/_section-blog.scss
+++ b/_src/_assets/styles/_sections/_section-blog.scss
@@ -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;
diff --git a/_src/_includes/sections/section-guides.html b/_src/_includes/sections/section-guides.html
index bde7dbc..38e5c7a 100644
--- a/_src/_includes/sections/section-guides.html
+++ b/_src/_includes/sections/section-guides.html
@@ -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>
diff --git a/_src/guides.html b/_src/guides.html
index 90d0626..0034628 100644
--- a/_src/guides.html
+++ b/_src/guides.html
@@ -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 %}