Mobile ui (#227)

* Basic grid setup

* Fixing thumb on two-up

* Adding margin so you can still access the two-up

* Allow multi-panel to keep one open only

* Edge cases for one-open

* Abstracting results so it can be used as a heading.

* Ordering of items in mobile view. Changing scrolling element.

* Adding labels to collapsed view

* Adding height animation to multi-panel

* Fixing animation bugs

* Expand/collapse icon

* Allow two-up and pinch-zoom to work beneath controls

* Range bubble now behaves properly on mobile

* No longer need this.

* Prevent options overflow at larger widths

src/components/Options/style.scss

@@ -1,15 +1,5 @@
 $horizontalPadding: 15px;
 
-.options {
-  color: #fff;
-  width: 300px;
-  opacity: 0.9;
-  font-size: 1.2rem;
-  max-height: 100%;
-  display: flex;
-  flex-flow: column;
-}
-
 .options-title {
   background: rgba(0, 0, 0, 0.9);
   margin: 0;
@@ -66,35 +56,6 @@ $horizontalPadding: 15px;
   overflow-y: auto;
 }
 
-.results {
-  display: grid;
-  grid-template-columns: 1fr auto;
-  background: rgba(0, 0, 0, 0.9);
-  font-size: 1.4rem;
-}
-
-.result-data {
-  display: flex;
-  align-items: center;
-  padding: 0 $horizontalPadding;
-}
-
-.size-delta {
-  font-size: 1.1rem;
-  font-style: italic;
-  position: relative;
-  top: -1px;
-  margin-left: 0.3em;
-}
-
-.size-increase {
-  color: #e35050;
-}
-
-.size-decrease {
-  color: #50e3c2;
-}
-
 .options-copy {
   display: grid;
   background: rgba(0, 0, 0, 0.9);
@@ -109,58 +70,3 @@ $horizontalPadding: 15px;
   text-align: left;
   padding: 5px 10px;
 }
-
-@keyframes action-enter {
-  from {
-    transform: rotate(-90deg);
-    opacity: 0;
-    animation-timing-function: ease-out;
-  }
-}
-
-@keyframes action-leave {
-  from {
-    transform: rotate(0deg);
-    opacity: 1;
-    animation-timing-function: ease-out;
-  }
-}
-
-.download {
-  background: #34B9EB;
-  --size: 38px;
-  width: var(--size);
-  height: var(--size);
-  display: grid;
-  align-items: center;
-  justify-items: center;
-}
-
-.download-link {
-  animation: action-enter 0.2s;
-  grid-area: 1/1;
-}
-
-.download-link-disable {
-  pointer-events: none;
-  opacity: 0;
-  transform: rotate(90deg);
-  animation: action-leave 0.2s;
-}
-
-.download-icon {
-  color: #fff;
-  display: block;
-  --size: 24px;
-  width: var(--size);
-  height: var(--size);
-  padding: 7px;
-  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.7));
-}
-
-.spinner {
-  --color: #fff;
-  --delay: 0;
-  --size: 22px;
-  grid-area: 1/1;
-}