Shift legend/logo layout

app/src/frontend/legend.css

@@ -6,7 +6,7 @@
     position: absolute;
     bottom: 55px;
     right: 10px;
-    min-width: 7rem;
+    min-width: 12rem;
     float: right;
     background: white;
     border-radius: 4px;
@@ -24,10 +24,14 @@
         bottom: 24px;
     }
 }
-.map-legend h4,
+.map-legend .h4,
+.map-legend p,
 .data-legend {
     padding: 0 0.5rem;
 }
+.map-legend p {
+    margin: 0.25rem 0 0.5rem;
+}
 .data-legend {
     max-height: 30rem;
     overflow-y: auto;

app/src/frontend/legend.js

@@ -106,6 +106,24 @@ const Legend = (props) => {
     const elements = details.elements;
     return (
         <div className="map-legend">
+            <h4 className="h4">{ title }</h4>
+            {
+                details.description?
+                    <p>{details.description}</p>
+                    : null
+            }
+            {
+                elements.length?
+                (<ul className="data-legend">
+                {
+                    elements.map((data_item) => (
+                        <LegendItem {...data_item} key={data_item.color} />
+                    ))
+                }
+                </ul>)
+                : (<p className="data-intro">Coming soon…</p>)
+            }
+
             <div className="logo">
                 <div className="grid">
                     <div className="row">
@@ -132,18 +150,6 @@ const Legend = (props) => {
                     <span>London</span>
                 </h3>
             </div>
-            <h4 className="h4">{ title }</h4>
-            {
-                elements.length?
-                (<ul className="data-legend">
-                {
-                    elements.map((data_item) => (
-                        <LegendItem {...data_item} key={data_item.color} />
-                    ))
-                }
-                </ul>)
-                : (<p className="data-intro">Coming soon…</p>)
-            }
         </div>
     );
 }

app/src/frontend/logo.css

@@ -28,17 +28,17 @@
     letter-spacing: 0;
 }
 .map-legend .logo {
-    margin-top: -5px;
+    padding: 0.5rem;
-    padding: 0 0.4rem 0.4rem 0.4rem;
 }
 .map-legend .logo .logotype {
+    font-size: 1.75rem;
     position: relative;
-    top: 6px;
+    top: 3px;
 }
 .map-legend .logo .row .cell {
     background-color: #ccc;
-    height: 11px;
+    height: 10px;
-    width: 11px;
+    width: 10px;
     animation: none !important;
 }
 .logo .grid {