Restyle sidebar

app/src/frontend/building/categories.css

@@ -9,10 +9,11 @@
   text-align: center;
 }
 .data-category-list li {
+  position: relative;
   display: inline-block;
   vertical-align: bottom;
-  width: 11rem;
-  height: 11rem;
+  width: 10rem;
+  height: 10rem;
   margin: 0.375rem;
   box-shadow: 0 0 2px 5px #ffffff;
   transition: box-shadow 0.2s;
@@ -28,7 +29,7 @@
   display: block;
   padding: 0.1em;
   width: 100%;
-  height: 7rem;
+  height: 100%;
 }
 .data-category-list .category-link:hover,
 .data-category-list .category-link:active,
@@ -36,18 +37,24 @@
   color: #222;
 }
 .data-category-list .help {
-  height: 4rem;
-  padding: 1.5em 0;
-  width: 100%;
-  background-color: rgba(255,255,255,0.2);
-  transition: background-color 0.2s;
+  position: absolute;
+  bottom: 0.75rem;
+  right: 0.75rem;
+  color: #222;
 }
 .data-category-list .help:hover,
 .data-category-list .help:active,
 .data-category-list .help:focus {
-  color: #222;
-  background-color: rgba(255,255,255,0.3);
+  color: #000;
+  background-color: rgba(37, 10, 10, 0.3);
 }
+
+.data-category-list .help::before {
+  content: "\f05a";
+  font-family: FontAwesome;
+  margin-right: 0.25rem;
+}
+
 .data-category-list .category {
   text-align: center;
   font-size: 1.5em;

app/src/frontend/building/categories.tsx

@@ -138,7 +138,7 @@ const Category = (props) => (
             <p className="description">{props.desc}</p>
         </NavLink>
         <a className="icon-button help" href={props.help}>
-            More info
+            More
         </a>
     </li>
 )

app/src/frontend/building/sidebar.css

@@ -2,51 +2,25 @@
  * Sidebar layout
  */
 .info-container {
-    position: absolute;
-    top: 50%;
-    left: 0;
-    right: 0;
-    bottom: 3rem;
+    order: 1;
     padding: 0 0 2em;
     background: #fff;
-    z-index: 1000;
-    overflow-y: auto;
+    overflow-y: scroll;
+    height: 40%;
 }
+
 .info-container h2:first-child {
     margin-bottom: 0.5rem;
     margin-top: 0.5rem;
     margin-left: -0.1em;
     padding: 0 0.75rem;
 }
-#root .leaflet-container .leaflet-control-attribution {
-    width: 100%;
-    height: 3rem;
-    background: #fff;
-    background: rgba(255, 255, 255, 0.7);
-}
-.leaflet-right{
-    left: 0;
-}
-@media (min-width: 380px){
-    .info-container {
-        bottom: 2rem;
-    }
-    #root .leaflet-container .leaflet-control-attribution {
-        height: 2rem;
-    }
-}
+
 @media (min-width: 768px){
     .info-container {
-        top: 0;
-        left: 0;
-        width: 25rem;
-        bottom: 0;
-    }
-    .leaflet-right{
-        left: 25rem;
-    }
-    #root .leaflet-container .leaflet-control-attribution {
-        height: auto;
+        order: 0;
+        height: unset;
+        width: 23rem;
     }
 }