From ddeb4355e0265e8cb315a8efba944faa5aca2e90 Mon Sep 17 00:00:00 2001
From: Tom Russell <tomalrussell@gmail.com>
Date: Fri, 13 Apr 2018 12:48:26 +0100
Subject: [PATCH] Section backgrounds and spacing

---
 html/index.html |  57 ++++++++++++++++-------
 html/main.css   | 120 ++++++++++++++++++++++++++++++++++++++++++++----
 2 files changed, 151 insertions(+), 26 deletions(-)

diff --git a/html/index.html b/html/index.html
index 5f0c87d7..75166f4a 100644
--- a/html/index.html
+++ b/html/index.html
@@ -37,8 +37,8 @@
 </a>
 
 <article>
-
-<h1>Can you help us capture information on every building in London?</h1>
+<div class="main-col">
+<h1 class="h2">Can you help us capture information on every building in London?</h1>
 
 <p>
 
@@ -75,7 +75,11 @@ will look like.
 
 
 <a class="btn btn-center" href="files/colouring-london-online-exhibition.pdf">View online exhibition</a>
+</div>
 
+<hr/>
+
+<div class="main-col">
 <p>
 
 Colouring London is being designed and built by the Centre for Advanced Spatial
@@ -93,8 +97,12 @@ will launch in 2019.
     <li><a href="https://www.ordnancesurvey.co.uk/"><img src="images/logo-os.png" alt="Ordnance Survey"></a></li>
     <li><a href="https://www.london.gov.uk/"><img src="images/logo-gla.png" alt="Supported by the Mayor of London"></a></li>
 </ul>
+</div>
 
-<h2>Data Categories</h2>
+<hr/>
+
+<div class="main-col">
+<h2 class="h1">Data Categories</h2>
 
 <p>
 
@@ -155,11 +163,17 @@ research.
         <p class="description">Do you like it?</p>
     </li>
 </ol>
+</div>
 
-<h2>Once built, our platform will allow you to:</h2>
+<hr/>
+
+<div class="main-col">
+<h2 class="h1">Once built, our platform will allow you to:</h2>
+</div>
 
 <section class="pale-pink">
-<h3>View maps</h3>
+<div class="main-col">
+<h3 class="h2">View maps</h3>
 
 <p>
 
@@ -168,11 +182,13 @@ interests you.
 
 </p>
 
-<img src="images/slide-4-view.png" alt="Preview of view maps page">
+<img class="border-image" src="images/slide-4-view.png" alt="Preview of view maps page">
+</div>
 </section>
 
 <section class="pale-yellow">
-<h3>Add and edit data</h3>
+<div class="main-col">
+<h3 class="h2">Add and edit data</h3>
 
 <p>
 
@@ -180,11 +196,13 @@ Find a building and add or edit data for any of the 12 core categories.
 
 </p>
 
-<img src="images/slide-3-edit.png" alt="Preview of add/edit data page">
+<img class="border-image" src="images/slide-3-edit.png" alt="Preview of add/edit data page">
+</div>
 </section>
 
 <section class="pale-orange">
-<h3>See how people are using our data</h3>
+<div class="main-col">
+<h3 class="h2">See how people are using our data</h3>
 
 <p>
 
@@ -194,11 +212,13 @@ history&mdash;or something we haven’t imagined yet.
 
 </p>
 
-<img src="images/slide-6-showcase.png" alt="Preview of data showcase page">
+<img class="border-image" src="images/slide-6-showcase.png" alt="Preview of data showcase page">
+</div>
 </section>
 
 <section class="pale-green">
-<h3>Download, remix and reuse</h3>
+<div class="main-col">
+<h3 class="h2">Download, remix and reuse</h3>
 
 <p>
 
@@ -208,12 +228,15 @@ projects on the Colouring London site.
 
 </p>
 
-<img src="images/slide-5-download.png" alt="Preview of download page">
+<img class="border-image" src="images/slide-5-download.png" alt="Preview of download page">
+</div>
 </section>
 
+<div class="main-col">
+
 <form id="sign-up" action="https://tinyletter.com/colouringlondon" method="post" target="popupwindow"
     onsubmit="window.open('https://tinyletter.com/colouringlondon', 'popupwindow', 'scrollbars=yes,width=800,height=600');return true">
-    <h3>Keep in touch</h3>
+    <h3 class="h1">Keep in touch</h3>
     <p>
 
     Receive occasional newsletters about the project as it develops. You can
@@ -232,14 +255,14 @@ projects on the Colouring London site.
     <input class="btn btn-full" type="submit" value="Sign up for updates" />
 </form>
 
-<a  class="btn btn-half" href="files/colouring-london-online-exhibition.pdf" target="_blank">View online exhibition</a>
-
-<a class="btn btn-half" href="faq.html">FAQ</a>
+<a  class="btn btn-half" href="files/colouring-london-online-exhibition.pdf" target="_blank">View online exhibition</a><!--
+--><a class="btn btn-half" href="faq.html">FAQ</a>
+</div>
 
 </article>
 
 <footer>
-    <a class="logo" href="index.html#top">
+    <a class="logo h2" href="index.html#top">
         <div class="grid">
             <div class="row">
                 <div class="cell"></div>
diff --git a/html/main.css b/html/main.css
index a6582942..8b4057e9 100644
--- a/html/main.css
+++ b/html/main.css
@@ -1,9 +1,37 @@
 /**
  * Layout
  */
+html {
+    box-sizing: border-box;
+}
+*, *:before, *:after {
+    box-sizing: inherit;
+}
 html, body {
     margin: 0;
 }
+section {
+    overflow: hidden;
+    margin: 2.25em 0 4em;
+    padding: 2em 0 4em;
+}
+.main-col {
+    max-width: 40em;
+    margin: 0 auto;
+    padding: 0 1em;
+}
+hr {
+    display: block;
+    height: 1px;
+    border: 0;
+    background: #000;
+    width: 100%;
+    margin: 2em 0;
+    padding: 0;
+}
+footer {
+    margin: 4em 0 2em;
+}
 
 /**
  * Typography
@@ -22,12 +50,35 @@ body {
     background: #fff;
     color: #222;
 }
+input {
+    font-family: 'glacial_cl', sans-serif;
+}
 h1, h2, h3, h4 {
     font-weight: normal;
 }
+.h1 {
+    font-size: 2em;
+    margin-bottom: 0.5em;
+}
+.h2 {
+    font-size: 1.5em;
+    margin: 0.25em 0 0.5em;
+}
+p, li, dd {
+    line-height: 1.3;
+}
+dd {
+    margin: 0 0 1.5em;
+}
+small {
+    font-size: 0.75em;
+}
 .text-muted {
     color: #878d96 !important;
 }
+.border-image {
+    border: 1px solid #000;
+}
 
 /**
  * Form
@@ -38,6 +89,38 @@ input[type="email"] {
     width: 100%;
     border: 1px solid #222;
     padding: 0.5em 0.25em;
+    margin: 0.5em 0 0;
+}
+form .btn {
+    margin-top: 1em;
+}
+.btn {
+    background: #cecfd3;
+    border: 0;
+    border-radius: 1em;
+    margin: 0.5em 0;
+    padding: 0.5em 1em;
+    width: 100%;
+    font-size: 1em;
+    text-align: center;
+    display: inline-block;
+    color: #000;
+    text-decoration: none;
+    cursor: pointer;
+}
+.btn:hover,
+.btn:focus,
+.btn:active {
+    background-color: #bcbec0;
+}
+.btn.btn-half {
+    width: 49%;
+    margin-left: 0;
+    margin-right: 2%;
+    min-width: 11.45em;
+}
+.btn.btn-half:nth-child(2n+1) {
+    margin-right: 0;
 }
 
 /**
@@ -281,20 +364,38 @@ img {
     position: relative;
 }
 .carousel-control {
-    position: absolute;
     display: none;
-    top: 0;
-    bottom: 0;
-    width: 1em;
 }
 .carousel.active .carousel-control {
     display: block;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 1.75em;
+    border: 0;
+    background-color: #fff;
+    background-position: center center;
+    background-size: contain;
+    background-repeat: no-repeat;
+    cursor: pointer;
+}
+.carousel.active .carousel-control:hover,
+.carousel.active .carousel-control:active,
+.carousel.active .carousel-control:focus {
+    border: 0;
+    outline: none;
+    opacity: 0.6;
+}
+.carousel button::-moz-focus-inner {
+    border:0;
 }
 .carousel-control.next {
-    right: 0;
+    right: -1em;
+    background-image: url('images/arrow-next.png');
 }
 .carousel-control.back {
-    left: 0;
+    left: -1em;
+    background-image: url('images/arrow-back.png');
 }
 .carousel-content {
     padding: 0;
@@ -320,8 +421,8 @@ img {
 }
 .logo-list li {
     display: inline-block;
-    width: 10em;
-    padding: 0 1em;
+    width: 8em;
+    padding: 0 0.25em;
     vertical-align: middle;
 }
 .logo-list li:first-child {
@@ -335,13 +436,14 @@ img {
     padding: 0;
     text-align: center;
     list-style: none;
+    margin: 0 -0.75em;
 }
 .data-category-list li {
     display: inline-block;
     vertical-align: bottom;
     width: 9em;
     height: 9em;
-    margin: 0.5em;
+    margin: 0.375em;
     padding: 0.1em;
 }
 .data-category-list .category {