Move welcome float to sidebar

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>

app/src/frontend/pages/welcome.css

@@ -1,42 +1,6 @@
 /**
  * Welcome jumbotron
  */
-.welcome-float {
+.welcome.section-body {
-    position: absolute;
+    padding-bottom: 1rem;
-    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;
 }

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">
+    <div className="section-body welcome">
-        <h1 className="h1">Welcome to Colouring London</h1>
+        <h1 className="h2">Welcome to Colouring London!</h1>
-        <p className="lead">
+        <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.
+
+            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">
+        <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.
+
+            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">
+        <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/tomalrussell/colouring-london">code</a>.
+
+            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>
 );

app/src/frontend/styles/typography.css

@@ -8,7 +8,6 @@ body {
 }
 .h2 {
     font-weight: normal;
-    margin: 0;
 }
 .h3, .h4, .h5 {
     font-weight: normal;