menu; configuration; localStorage

style/style.styl

@@ -1,42 +1,103 @@
 svg
-  width: 100%
+  display: block
+  width: auto
   height: auto
+  max-width: 100%
+  max-height: 100%
+  margin: auto
+
+a
+  text-decoration: inherit
 
 header
+  z-index: 98
   display: flex
+  overflow: visible
   justify-content: space-between
   background-color: blue
   color: white
   line-height: 1em
   h1
+    z-index: 99
     font-size: 100%
-    a:link
+    margin: 0.5em
+    &::before
+      width: 1em
+      content: "☰"
       color: white
-  #downloads
+      margin-right: .25em
+    &:hover #menu
+      display: block
+    #menu
+      display: none
+      background-color: #ccc
+      color: black
+      margin: 1px
+      padding: 0
+      border: 1px solid black
+      z-index: 100
+      a
+        margin: 0
+        padding: .5em
+        &:hover
+          background-color: #eee
+      a + a
+        border-top: 1px solid black
+      &:hover
+        display: block
+  a
+    margin: 0.5em
+    display: none
+    &[href]
+      display: block
+    &:link
+      color: inherit
+  #downloads, #info
     display: flex
-
-#info
-  display: none
-
+  #clock
+    margin: 0.5em
+  #status
+    margin: 0.5em
+    &.wait
+      &::before
+        content: "⌛"
+        color: inherit
+    &.error
+      &::before
+        content: "✘"
+        color: red
+    &.success
+      &::before
+        content: "✔"
+        color: green
+  #orientation
+    margin: 0.5em
+    &.lr
+      &::before
+        content: "→"
+    &.tb
+      &::before
+        content: "↓"
+    &.rl
+      &::before
+        content: "←"
+    &.bt
+      &::before
+        content: "↑"
+    
 #error
   display: none
   background-color: red
 
-#svg, #dot
-  text-decoration: inherit
-  color: white
-  display: none
-  &[href]
-    display: block
-
 .top
   header
     position: absolute
     top: 0
     left: 0
-    right: 0
+    width: 100%
     height: 2em
-    overflow: hidden
+    #menu
+      position: absolute
   main
     position: absolute
     top: 2em
@@ -50,9 +111,11 @@ header
     position: absolute
     bottom: 0
     left: 0
-    right: 0
+    width: 100%
     height: 2em
-    overflow: hidden
+    #menu
+      position: absolute
+      transform: translate(0, -100%) translate(0, -1em)
   main
     position: absolute
     top: 0
@@ -63,30 +126,39 @@ header
 
 .left
   header
+    transform: translate(-50%) translate(1em) rotate(270deg) translate(-50%) translate(1em)
     position: absolute
     top: 0
-    right: 2em
     left: 0
+    width: 100vh
     height: 2em
-    overflow: hidden
-    transform: translate(-50%) translate(1em) rotate(270deg) translate(-50%) translate(2em)
+    #orientation
+      transform: rotate(90deg)
+   #menu
+      position: absolute
+      left: -3em
+      transform: rotate(90deg) translate(50%) translate(-2em)
   main
     position: absolute
     top: 0
-    left: 2em
     right: 0
+    left: 2em
     bottom: 0
-    overflow: auto
 
 .right
   header
     position: absolute
     top: 0
     right: 0
-    left: 3em
+    width: 100vh
     height: 2em
-    overflow: hidden
     transform: translate(50%) translate(-1em) rotate(90deg) translate(50%) translate(-1em)
+    #orientation
+      transform: rotate(270deg)
+    #menu
+      position: absolute
+      left: -3em
+      transform: rotate(270deg) translate(-50%) translate(2em)
   main
     position: absolute
     top: 0
@@ -94,3 +166,11 @@ header
     right: 2em
     bottom: 0
     overflow: auto
+  
+#image
+  height: 100%
+  
+div#loading
+  text-align: center
+  margin-top: 40vh
+  font-size: 200%