Slightly improve styling on mobile devices

index.html

@@ -10,6 +10,9 @@
     <noscript>Sorry, but you'll need JavaScript enabled for any of this to work!</noscript>
     <aside>
       <h1>Chandler's Maps</h1>
+      <div class="ol-unselectable ol-control close" style="pointer-events: auto;">
+        <button onclick="document.body.classList.toggle('nav-open')">&lsaquo;</button>
+      </div>
     </aside>
     <div id="map"></div>
     <script type="module" src="./main.js"></script>

style.css

@@ -1,10 +1,5 @@
 @import "node_modules/ol/ol.css";
 
-html, body {
-  margin: 0;
-  height: 100%;
-}
-
 #map {
   position: absolute;
   top: 0;
@@ -41,3 +36,28 @@ aside ul li {
 h1 {
   text-align: center;
 }
+
+aside .close {
+  display: none;
+}
+
+@media (max-width: 400px) {
+  .nav-open #map {
+    left: 100%;
+  }
+
+  aside {
+    margin-left: calc(-100% + 2em);
+    width: calc(100% - 2em);
+  }
+
+  aside .close {
+    display: initial;
+  }
+
+  .nav-open aside .close {
+    position: absolute;
+    top: 0.5em;
+    right: 0.5em;
+  }
+}