From ab4898f11ddb20052f8abddce439101c1db4983d Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Wed, 13 Jun 2018 12:37:11 +0200
Subject: [PATCH] add newsletter page

---
 _src/_assets/styles/_page-newsletter.scss     | 69 +++++++++++++++++++
 .../styles/_sections/_section-newsletter.scss | 10 +++
 _src/_assets/styles/bigchain.scss             |  1 +
 _src/newsletter.md                            |  9 +++
 4 files changed, 89 insertions(+)
 create mode 100644 _src/_assets/styles/_page-newsletter.scss
 create mode 100644 _src/newsletter.md

diff --git a/_src/_assets/styles/_page-newsletter.scss b/_src/_assets/styles/_page-newsletter.scss
new file mode 100644
index 0000000..b62e435
--- /dev/null
+++ b/_src/_assets/styles/_page-newsletter.scss
@@ -0,0 +1,69 @@
+.page-newsletter {
+    .header--newsletter {
+        background: url('../img/nosprite/starbase-drivers.svg') no-repeat center 103%;
+        background-size: contain;
+        padding-bottom: 5%;
+
+        &:before {
+            display: none;
+        }
+    }
+
+    .content--page--markdown {
+        padding-top: 0;
+        padding-bottom: 0;
+    }
+
+    .section--newsletter {
+        width: 100vw;
+        position: relative;
+        left: 50%;
+        right: 50%;
+        margin-left: -50vw;
+        margin-right: -50vw;
+        display: flex;
+        align-items: center;
+        min-height: 60vh;
+        background: darken($body-bg, 5%);
+
+        .form-control {
+            border-color: $gray-light;
+
+            &:focus {
+                border-color: #fff;
+            }
+        }
+
+        .btn {
+            @extend .btn-primary;
+        }
+
+        .newsletter__title {
+            color: $brand-main-blue-light;
+        }
+
+        // stylelint-disable selector-max-compound-selectors
+        .form-label,
+        .form-control,
+        .form-control:focus ~ .form-label,
+        .newsletter__text,
+        .newsletter__gdpr {
+            color: $text-color;
+        }
+        // stylelint-enable selector-max-compound-selectors
+
+        .icon {
+            stroke: $gray-light;
+            color: $gray-light;
+        }
+
+        a {
+            box-shadow: inset 0 -1px 0 $gray-light;
+
+            &:hover,
+            &:focus {
+                background: $gray-light;
+            }
+        }
+    }
+}
diff --git a/_src/_assets/styles/_sections/_section-newsletter.scss b/_src/_assets/styles/_sections/_section-newsletter.scss
index 7f67a54..2f42bf1 100644
--- a/_src/_assets/styles/_sections/_section-newsletter.scss
+++ b/_src/_assets/styles/_sections/_section-newsletter.scss
@@ -12,6 +12,10 @@
         &:focus {
             border-color: #000;
         }
+
+        &.parsley-error {
+            border-color: $brand-danger !important; // stylelint-disable-line
+        }
     }
 
     .btn {
@@ -32,6 +36,12 @@
     .form--newsletter {
         margin-top: $spacer * 2;
     }
+
+    .parsley-errors-list {
+        right: auto;
+        left: 0;
+        bottom: -.25rem;
+    }
 }
 
 .newsletter__title {
diff --git a/_src/_assets/styles/bigchain.scss b/_src/_assets/styles/bigchain.scss
index 6e3e705..a678716 100644
--- a/_src/_assets/styles/bigchain.scss
+++ b/_src/_assets/styles/bigchain.scss
@@ -65,3 +65,4 @@
 @import 'page-services';
 @import 'oceanprotocol';
 @import 'page-guide';
+@import 'page-newsletter';
diff --git a/_src/newsletter.md b/_src/newsletter.md
new file mode 100644
index 0000000..93cfcc3
--- /dev/null
+++ b/_src/newsletter.md
@@ -0,0 +1,9 @@
+---
+layout: page
+
+title: Newsletter
+tagline: Subscribe to stay in the loop about all things BigchainDB
+description: Subscribe to stay in the loop about all things BigchainDB
+---
+
+{% include sections/section-newsletter.html %}