Hide shortcuts when using a touch screen

Author: rosslh

client/css/styles.scss

@@ -128,24 +128,36 @@ html.fractal-root {
   padding-top: 0;
   flex-direction: column;
 
-  .shortcut-hint {
-    text-decoration: underline;
-  }
+  #shortcuts {
+    .shortcut-hint {
+      text-decoration: underline;
+    }
 
-  .checkbox-wrapper {
-    display: flex;
-    align-items: center;
-    gap: var(--space-4);
-  }
+    .checkbox-wrapper {
+      display: flex;
+      align-items: center;
+      gap: var(--space-4);
+    }
 
-  .shortcut-wrapper {
-    display: flex;
-    align-items: center;
-    gap: var(--space-8);
+    .shortcut-wrapper {
+      display: flex;
+      align-items: center;
+      gap: var(--space-8);
 
-    #macShortcut {
+      #macShortcut {
+        display: none;
+      }
+    }
+  }
+
+  @media (pointer: coarse) {
+    #shortcuts {
       display: none;
     }
+
+    #shortcuts + details {
+      border-top: none;
+    }
   }
 
   .iteration-buttons {

client/html/index.html

@@ -104,7 +104,7 @@ <h1 class="nav-heading">
       </div>
     </div>
     <div id="inputsWrapper" class="overlay">
-      <details open class="mobile-hidden">
+      <details open class="mobile-hidden" id="shortcuts">
         <summary><span>Shortcuts</span></summary>
         <div class="details-content">
           <div class="shortcut-wrapper">

client/static/site.webmanifest

@@ -3,7 +3,7 @@
   "categories": ["education", "entertainment", "games"],
   "description": "Explore the infinite complexity of the Mandelbrot Set with this online fractal viewer. Zoom in and generate high resolution images.",
   "dir": "ltr",
-  "display": "standalone",
+  "display": "minimal-ui",
   "icons": [
     {
       "purpose": "maskable",
@@ -29,6 +29,5 @@
   "name": "Mandelbrot Set Explorer",
   "orientation": "any",
   "short_name": "Mandelbrot.site",
-  "start_url": "/",
-  "theme_color": "#000000"
+  "start_url": "/"
 }