From f9d2034e4fb8a7562e7aeb21fb3150d7acbefafd Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Tue, 22 Nov 2016 17:53:09 +0000
Subject: [PATCH] Make the blue header on the home page full-width

This copies the style that Tim and Stephen have been developing for all
product pages.

It also pulls out the CSS for this into its own file, so that it could
potentially be reused.
---
 app/assets/stylesheets/components/banner.scss | 53 ---------------
 app/assets/stylesheets/main.scss              |  1 +
 .../stylesheets/views/product-page.scss       | 66 +++++++++++++++++++
 app/templates/views/signedout.html            | 42 +++++++-----
 4 files changed, 92 insertions(+), 70 deletions(-)
 create mode 100644 app/assets/stylesheets/views/product-page.scss

diff --git a/app/assets/stylesheets/components/banner.scss b/app/assets/stylesheets/components/banner.scss
index 0e709d02c..4c0ea6c5e 100644
--- a/app/assets/stylesheets/components/banner.scss
+++ b/app/assets/stylesheets/components/banner.scss
@@ -111,59 +111,6 @@
 
 }
 
-.banner-intro {
-
-  margin: -10px 0 0 0;
-  padding: $gutter-half $gutter;
-  background: $govuk-blue;
-  color: $white;
-  overflow: hidden;
-
-  .heading-medium {
-    @include core-24;
-  }
-
-  a {
-    &:link,
-    &:visited {
-      color: $white;
-    }
-
-    &:hover,
-    &:active {
-      color: $light-blue-25;
-    }
-  }
-
-  .button-block {
-    line-height: 3.68em;
-  }
-
-  .button {
-
-    @include core-19;
-    background: $white;
-    padding: 0.3684210526em 0.8421052632em 0.2105263158em 0.7421052632em;
-    display: inline-block;
-    margin-top: $gutter-half;
-    margin-right: 0.3em;
-    box-shadow: 0 2px 0 mix($govuk-blue, $text-colour);
-
-    &:link,
-    &:visited,
-    &:hover {
-      color: $govuk-blue;
-    }
-
-    &:hover {
-      background: $light-blue-25;
-      outline: none;
-    }
-
-  }
-
-}
-
 .banner-tour {
 
   @extend %banner;
diff --git a/app/assets/stylesheets/main.scss b/app/assets/stylesheets/main.scss
index f5a0e4d4f..01e593a16 100644
--- a/app/assets/stylesheets/main.scss
+++ b/app/assets/stylesheets/main.scss
@@ -66,6 +66,7 @@ $path: '/static/images/';
 @import 'views/dashboard';
 @import 'views/users';
 @import 'views/api';
+@import 'views/product-page';
 
 // TODO: break this up
 @import 'app';
diff --git a/app/assets/stylesheets/views/product-page.scss b/app/assets/stylesheets/views/product-page.scss
new file mode 100644
index 000000000..1b4eafc1c
--- /dev/null
+++ b/app/assets/stylesheets/views/product-page.scss
@@ -0,0 +1,66 @@
+.product-page {
+
+  &-intro {
+
+    margin: -10px 0 $gutter * 1.5 0;
+    padding: $gutter 0 $gutter * 1.5 0;
+    background: $govuk-blue;
+    color: $white;
+
+    &-wrapper {
+      @extend %site-width-container;
+    }
+
+    h1 {
+      @include bold-36;
+    }
+
+    p {
+      margin: $gutter-half 0 $gutter;
+    }
+
+    .button-container {
+      line-height: 35px;
+    }
+
+    .button {
+
+      @include button($white);
+      color: $govuk-blue;
+      margin-right: 5px;
+
+      &:link,
+      &:visited,
+      &:hover {
+        color: $govuk-blue;
+      }
+
+      &:hover {
+        background: $light-blue-25;
+        outline: none;
+      }
+
+    }
+
+    a {
+
+      &:link,
+      &:visited {
+        color: $white;
+      }
+
+      &:hover,
+      &:active {
+        color: $light-blue-25;
+      }
+
+    }
+
+  }
+
+  &-section {
+    @extend %site-width-container;
+    margin-bottom: $gutter * 1.5;
+  }
+
+}
diff --git a/app/templates/views/signedout.html b/app/templates/views/signedout.html
index ca69f4ee3..7553a9a5d 100644
--- a/app/templates/views/signedout.html
+++ b/app/templates/views/signedout.html
@@ -9,22 +9,30 @@
 
 {% block maincolumn_content %}
 
-  {% call banner_wrapper(type='intro') %}
-    <h1 class="heading-medium">
-      GOV.UK Notify makes it easy to send text messages and emails to
-      your users.
-    </h1>
-    <p class="heading-medium">
-      If you work for a UK government department or agency you can try
-      it now.
-    </p>
-    <p class="button-block">
-      <a class="button button-start" href='{{ url_for('.register' )}}'>
-        Create an account
-      </a>
-      or <a href="{{ url_for('.sign_in' )}}">sign in</a> if you’ve used
-      it before
-    </p>
-  {% endcall %}
+  <div class="product-page-intro">
+    <div class="product-page-intro-wrapper">
+      <div class="grid-row">
+        <div class="column-two-thirds">
+          <h1>
+            Send text messages and emails to your users
+          </h1>
+          <p>
+            If you work for a UK government department or agency you can try
+            it now.
+          </p>
+          <div class="button-container">
+            <a class="button button-start" href='{{ url_for('.register' )}}'>
+              Create an account
+            </a>
+            or <a href="{{ url_for('.sign_in' )}}">sign in</a> if you’ve used
+            it before
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="product-page-section">
+  </div>
 
 {% endblock %}