diff --git a/_src/_assets/images/nosprite/starbase-guides.svg b/_src/_assets/images/nosprite/starbase-guides.svg
index d064ff1..5a1a358 100644
--- a/_src/_assets/images/nosprite/starbase-guides.svg
+++ b/_src/_assets/images/nosprite/starbase-guides.svg
@@ -1,5 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1188" height="281" viewBox="0 0 1188 281">
- <g fill="none" fill-rule="evenodd">
+ <g fill="none" fill-rule="evenodd" opacity=".7">
<polygon fill="#5D6F82" points="1188 73.5 0 73.5 0 0 1188 0" transform="translate(0 206)"/>
<g transform="translate(46.883 .18)">
<path fill="#093749" d="M51.0810302,279 C30.9357077,262.19217 20.8630464,253.788255 20.8630464,253.788255 C20.8630464,253.788255 44.3381201,253.819672 91.2882674,253.882507 L120.590004,279 L51.0810302,279 Z" opacity=".2" transform="matrix(-1 0 0 1 141.453 0)"/>
diff --git a/_src/_assets/styles/_page-guides.scss b/_src/_assets/styles/_page-guides.scss
index 3e46e22..db8887d 100644
--- a/_src/_assets/styles/_page-guides.scss
+++ b/_src/_assets/styles/_page-guides.scss
@@ -11,6 +11,11 @@
@extend .row--wide;
}
+ .header__content {
+ padding-top: ($spacer * 5);
+ padding-bottom: ($spacer * 5);
+ }
+
.header__tagline {
@media ($screen-sm) {
max-width: 40rem;
@@ -20,6 +25,13 @@
}
}
+.header--guide {
+ .header__content {
+ padding-top: ($spacer * 5);
+ padding-bottom: ($spacer * 5);
+ }
+}
+
.content--guide {
.content--page--markdown {
padding-top: $spacer * 4;
@@ -45,13 +57,12 @@
h2 {
font-size: $font-size-h4;
- margin-bottom: ($spacer * 2);
- margin-top: ($spacer * 2);
+ margin-top: ($spacer * 2.5);
}
h3 {
font-size: $font-size-base;
- font-weight: $font-weight-bold;
+ font-weight: $font-weight-normal;
color: #fff;
margin-bottom: $spacer;
margin-top: ($spacer * 2);
@@ -79,6 +90,13 @@
.section--guides-more {
padding-top: 0;
+ background: url('../img/nosprite/starbase-guides.svg') no-repeat center bottom;
+ background-size: contain;
+ padding-bottom: 25%;
+
+ .grid {
+ margin-top: -($spacer * 3);
+ }
}
.guide {
@@ -120,7 +138,8 @@
margin-bottom: 0;
}
- .section--guides & {
+ .section--guides &,
+ .section--guideslist & {
margin-bottom: $spacer * 2;
a {
@@ -200,13 +219,6 @@ li.toc-h3 {
display: none;
}
-.header--guide {
- .header__content {
- padding-top: ($spacer * 5);
- padding-bottom: ($spacer * 5);
- }
-}
-
.section--getstarted {
padding-bottom: 0;
diff --git a/_src/_assets/styles/bigchain/_content-page.scss b/_src/_assets/styles/bigchain/_content-page.scss
index a0fffed..b490799 100644
--- a/_src/_assets/styles/bigchain/_content-page.scss
+++ b/_src/_assets/styles/bigchain/_content-page.scss
@@ -12,7 +12,7 @@
.faq__question {
border-bottom: 2px solid $brand-main-blue-light;
padding-bottom: $spacer;
- margin-bottom: ($spacer * 2);
+ margin-bottom: ($spacer * 1.5);
margin-top: ($spacer * 3);
position: relative;
diff --git a/_src/_assets/styles/bigchain/_variables.scss b/_src/_assets/styles/bigchain/_variables.scss
index b4e1e35..818909d 100644
--- a/_src/_assets/styles/bigchain/_variables.scss
+++ b/_src/_assets/styles/bigchain/_variables.scss
@@ -60,7 +60,7 @@ $line-height: 1.5 !default;
$headings-font-family: inherit !default;
$headings-font-weight: $font-weight-light !default;
-$headings-line-height: 1.3 !default;
+$headings-line-height: 1.2 !default;
$headings-color: $brand-main-blue-light !default;
diff --git a/_src/_includes/header.html b/_src/_includes/header.html
index d4b528f..7de8b33 100644
--- a/_src/_includes/header.html
+++ b/_src/_includes/header.html
@@ -1,4 +1,4 @@
-<header role="banner" class="header header--{{ page.url | replace: '/','' }}"
+<header role="banner" class="header header--{{ page.url | replace: '/','' }} header--{{ page.layout }}"
{% if page.header %}
{% if page.path contains '_guides' %}
style="background-image:url('../{{ page.header }}')"
diff --git a/_src/_layouts/guide.html b/_src/_layouts/guide.html
index 9d51bb6..4abae90 100644
--- a/_src/_layouts/guide.html
+++ b/_src/_layouts/guide.html
@@ -33,7 +33,7 @@ layout: base
{% unless page.id == guide.id %}
<div class="grid__col">
<article class="guide">
- <a href="{{ guide.url }}" {% if guide.header %}style="background-image:url('../{{ guide.header }}')" {% endif %}>
+ <a href="{{ guide.url }}" {% if guide.header %}style="background-image:url('../{{ guide.header }}')"{% endif %}>
<h1 class="guide__title">{{ guide.title }}</h1>
</a>
</article>
@@ -43,7 +43,7 @@ layout: base
</div>
</div>
<div class="row text-center">
- <a class="btn btn-secondary" href="/guides/">All guides</a>
+ <a class="btn btn-primary" href="/guides/">All guides</a>
</div>
</section>
diff --git a/_src/guides.html b/_src/guides.html
index 864a9cb..0ddc335 100644
--- a/_src/guides.html
+++ b/_src/guides.html
@@ -7,20 +7,16 @@ image: share-image-guides.png
---
<section class="section section--guideslist">
- <div class="row row--wide">
- <div class="grid grid--full grid-small--half grid--gutters">
- {% assign guides = site.guides | sort: 'order' %}
- {% for guide in guides %}
- <div class="grid__col">
- <article class="guide">
- <a href="{{ guide.url }}" {% if guide.header %}style="background-image:url('./{{ 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">
+ {% assign guides = site.guides | sort: 'order' %}
+ {% for guide in guides %}
+ <article class="guide">
+ <a href="{{ guide.url }}" {% if guide.header %}style="background-image:url('./{{ guide.header }}')" {% endif %}>
+ <h1 class="guide__title">{{ guide.title }}</h1>
+ <p class="guide__tagline">{{ guide.tagline }}</p>
+ </a>
+ </article>
+ {% endfor %}
</div>
</section>