Update mobile CSS

diff --git a/index.html b/index.html
index db8e5b4e314fb44a16b34962bdee0711e20b2d6c..3df1539a4c3d6f5f272a121f8cb06ac169bcd8bd 100644 (file)
--- a/index.html
+++ b/index.html
@@ -20,5 +20,8 @@
       </aside>
       <canvas id="lissajous"></canvas>
     </main>
       </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>
   </body>
 </html>

diff --git a/lib/factories/ui.js b/lib/factories/ui.js
index c220f67b208e8a23d3d2f6e6b2587e7bb81782f5..cc34579f55ba06d6089c9129d2d1df7a89eac8c0 100644 (file)
--- a/lib/factories/ui.js
+++ b/lib/factories/ui.js
@@ -46,6 +46,18 @@ export function slider({
         slider.step = step;
       }
     });
         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));
   }
 
   slider.addEventListener('input', () => set(slider.value));

diff --git a/style.css b/style.css
index 17fa12e314b0c2f399c75dfb566ca09fac9d0497..6871f4c9a7c6aaf0b3bcba70c8d69731e785ba08 100644 (file)
--- a/style.css
+++ b/style.css
@@ -11,7 +11,30 @@ body {
   overflow: hidden;
 }
 
   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 {
 #settings {

+  overflow-y: auto;
+  max-height: 100%;

   position: absolute;
   top: 5px;
   right: 5px;
   position: absolute;
   top: 5px;
   right: 5px;