From f4d18f7bda6ad502b79844176b530383b4969c98 Mon Sep 17 00:00:00 2001
From: Tom Russell <tomalrussell@gmail.com>
Date: Thu, 9 Apr 2020 15:57:17 +0100
Subject: [PATCH] Move welcome float to sidebar

---
 app/src/frontend/map-app.tsx           |  4 ++-
 app/src/frontend/pages/welcome.css     | 40 ++------------------------
 app/src/frontend/pages/welcome.tsx     | 36 +++++++++++++++++------
 app/src/frontend/styles/typography.css |  1 -
 4 files changed, 32 insertions(+), 49 deletions(-)

diff --git a/app/src/frontend/map-app.tsx b/app/src/frontend/map-app.tsx
index 69854e77..abfbe9ed 100644
--- a/app/src/frontend/map-app.tsx
+++ b/app/src/frontend/map-app.tsx
@@ -224,7 +224,9 @@ class MapApp extends React.Component<MapAppProps, MapAppState> {
             <Fragment>
                 <Switch>
                     <Route exact path="/">
-                        <Welcome />
+                        <Sidebar>
+                            <Welcome />
+                        </Sidebar>
                     </Route>
                     <Route exact path="/:mode/categories/:building?">
                         <Sidebar>
diff --git a/app/src/frontend/pages/welcome.css b/app/src/frontend/pages/welcome.css
index a78ffb64..cc53043e 100644
--- a/app/src/frontend/pages/welcome.css
+++ b/app/src/frontend/pages/welcome.css
@@ -1,42 +1,6 @@
 /**
  * Welcome jumbotron
  */
-.welcome-float {
-    position: absolute;
-    z-index: 10000;
-    top: 100px;
-    width: 100%;
-    max-height: 95%;
-    max-height: calc(100%-2em);
-    overflow-y: auto;
-}
-
-.welcome-float.jumbotron {
-    padding: 1em 2.5em 1.5em;
-    background: #fff;
-    background-color: rgba(255,255,255,0.9);
-    box-shadow: #000 0px 0px 2px -1px;
-}
-@media (min-width: 990px) and (max-width: 1199px){
-    .welcome-float {
-        right: 5%;
-        width: 30em;
-        max-height: 80vh;
-    }
-}
-@media (min-width: 1200px){
-    .welcome-float {
-        left: 50%;
-        margin-left: -120px; /* 480 -360 */
-        width: 45em;
-    }
-}
-
-.welcome-float .lead {
-    font-size: 1.2em;
-}
-
-.welcome-float .lead a {
-    color: #333;
-    border-bottom-color: #333;
+.welcome.section-body {
+    padding-bottom: 1rem;
 }
diff --git a/app/src/frontend/pages/welcome.tsx b/app/src/frontend/pages/welcome.tsx
index d363dde1..77296a2e 100644
--- a/app/src/frontend/pages/welcome.tsx
+++ b/app/src/frontend/pages/welcome.tsx
@@ -4,23 +4,41 @@ import { Link } from 'react-router-dom';
 import './welcome.css';
 
 const Welcome = () => (
-    <div className="jumbotron welcome-float">
-        <h1 className="h1">Welcome to Colouring London</h1>
-        <p className="lead">
-            Colouring London is a knowledge exchange platform set up by University College London to help make the city more sustainable. It provides open statistical data on the characteristics of the city's buildings and on the dynamic behaviour of the stock. We're working to collate, collect, generate, verify over fifty types of data and to visualise many of these datasets.
+    <div className="section-body welcome">
+        <h1 className="h2">Welcome to Colouring London!</h1>
+        <p>
+
+            Colouring London is a knowledge exchange platform set up by University College
+            London to help make the city more sustainable. It provides open statistical data
+            on the characteristics of the city's buildings and on the dynamic behaviour of the
+            stock. We're working to collate, collect, generate, verify over fifty types of
+            data and to visualise many of these datasets.
+
         </p>
-        <p className="lead">
-           Our information comes from many different sources. As we are unable to vouch for data accuracy, we are currently experimenting with a range of features including 'data source', 'edit history', and 'entry verification', to assist you in checking reliability and judging how suitable the data are for your intended use. Your help in checking and adding data is very much appreciated.
+        <p>
+
+            Our information comes from many different sources. As we are unable to vouch for
+            data accuracy, we are currently experimenting with a range of features including
+            'data source', 'edit history', and 'entry verification', to assist you in checking
+            reliability and judging how suitable the data are for your intended use. Your help
+            in checking and adding data is very much appreciated.
+
         </p>
-        <p className="lead">
-            All data we collect are made <Link to="/data-extracts.html">openly available</Link>. We just ask you to credit Colouring London and read our <a href="https://www.pages.colouring.london/data-ethics">data ethics policy</a>  when using or sharing our data, maps or <a href="https://github.com/tomalrussell/colouring-london">code</a>.
+        <p>
+
+            All data we collect are made <Link to="/data-extracts.html">openly
+            available</Link>. We just ask you to credit Colouring London and read our <a
+            href="https://www.pages.colouring.london/data-ethics">data ethics policy</a> when
+            using or sharing our data, maps or <a
+            href="https://github.com/colouring-london/colouring-london">code</a>.
+
         </p>
         <Link to="/view/categories"
             className="btn btn-outline-dark btn-lg btn-block">
             Start Colouring Here!
         </Link>
         <p>
-        <img src="images/supporter-logos.png" alt="Colouring London collaborating organisations: The Bartlett UCL, Ordnance Survey, Historic England, Greater London Authority" />
+            <img src="images/supporter-logos.png" alt="Colouring London collaborating organisations: The Bartlett UCL, Ordnance Survey, Historic England, Greater London Authority" />
         </p>
     </div>
 );
diff --git a/app/src/frontend/styles/typography.css b/app/src/frontend/styles/typography.css
index 8429a7cf..656bba90 100644
--- a/app/src/frontend/styles/typography.css
+++ b/app/src/frontend/styles/typography.css
@@ -8,7 +8,6 @@ body {
 }
 .h2 {
     font-weight: normal;
-    margin: 0;
 }
 .h3, .h4, .h5 {
     font-weight: normal;