space saving header tweaks, output tagline

_src/_assets/styles/_page-getstarted.scss

@@ -9,6 +9,7 @@
         font-size: $font-size-h3;
         margin-top: -($spacer * 2);
         margin-bottom: $spacer * 3;
+        text-align: left;
 
         &:after {
             display: none;
@@ -160,6 +161,7 @@
     margin-top: -($spacer * 2);
     display: flex;
     align-items: flex-end;
+    opacity: .7;
 
     // horizon layer
     &:before {

_src/_assets/styles/bigchain/_header.scss

@@ -2,8 +2,14 @@
     @extend .background--photo;
 }
 
+.header__content {
+    padding: ($spacer * 4) 0;
+    text-align: center;
+}
+
 // intro animation
 .header__title,
+.header__tagline,
 .header__description,
 .header__logo,
 .header__label {
@@ -30,10 +36,15 @@
     }
 }
 
-.header__title {
+.header__title,
+.header__tagline {
     position: relative;
     z-index: 1;
     text-align: center;
     margin: 0;
-    padding: ($spacer * 5) 0;
+}
+
+.header__tagline {
+    font-size: $font-size-h3;
+    color: #fff;
 }

_src/_layouts/page.html

@@ -7,13 +7,13 @@ layout: base
     {% include menu-main.html %}
 
     <div class="row">
-        <h1 class="header__title">
+        <div class="header__content">
             {% if page.tagline %}
-                {{ page.tagline }}
+                <h1 class="header__tagline">{{ page.tagline }}
             {% else %}
-                {{ page.title }}
+                <h1 class="header__title">{{ page.title }}</h1>
             {% endif %}
-        </h1>
+        </div>
     </div>
 </header>
 

_src/getstarted.html

@@ -3,6 +3,7 @@ layout: page
 
 title: Get started
 description: "Explore drivers, tools & documentation to get started with IPDB & BigchainDB"
+tagline: "Explore drivers, tools & documentation"
 
 js: page-getstarted.min.js