Update mobile CSS

3 files changed, 38 insertions, 0 deletions

diff --git a/index.html b/index.html
index db8e5b4..3df1539 100644
--- a/index.html
+++ b/index.html
@@ -20,5 +20,8 @@
       </aside>
       <canvas id="lissajous"></canvas>
     </main>
+    <footer>
+      <p><a href="https://r.bdr.sh">rbdr</a> &middot; Press shift, or tap with 3 fingers for &pi; mode.</p>
+    </footer>
   </body>
 </html>
diff --git a/lib/factories/ui.js b/lib/factories/ui.js
index c220f67..cc34579 100644
--- a/lib/factories/ui.js
+++ b/lib/factories/ui.js
@@ -46,6 +46,18 @@ export function slider({
         slider.step = step;
       }
     });
+
+    document.addEventListener('touchstart', function(event) {
+      if (event.touches.length == 3) {
+        if (slider.classList.contains('shifted')) {
+          slider.classList.remove('shifted');
+          slider.step = step;
+        } else {
+          slider.classList.add('shifted');
+          slider.step = shiftStep;
+        }
+      }
+    });
   }
 
   slider.addEventListener('input', () => set(slider.value));
diff --git a/style.css b/style.css
index 17fa12e..6871f4c 100644
--- a/style.css
+++ b/style.css
@@ -11,7 +11,30 @@ body {
   overflow: hidden;
 }
 
+@media (orientation: landscape) {
+  body {
+    padding-top: env(safe-area-inset-top);
+    padding-left: env(safe-area-inset-left);
+    padding-right: env(safe-area-inset-right);
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+}
+
+a {
+  color: #fff;
+}
+
+footer {
+  position: fixed;
+  padding: 2px 8px;
+  bottom: 0;
+  min-height: 16px;
+  max-height: 32px;
+}
+
 #settings {
+  overflow-y: auto;
+  max-height: 100%;
   position: absolute;
   top: 5px;
   right: 5px;