Hide shortcuts when using a touch screen

Author: rosslh

README.md

@@ -45,7 +45,7 @@ For performance optimization, it employs [Web Workers](https://developer.mozilla
 
 It is a [Progressive Web App](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps) (PWA), leveraging [Service Workers](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) to prioritize a local-first experience. This ensures that users can explore the Mandelbrot set with minimal network dependencies.
 
-This robust architecture ensures that Mandelbrot.site provides a seamless and responsive experience for users exploring the intricate details of the Mandelbrot set through an online interface.
+This robust architecture allows Mandelbrot.site to provide a seamless and responsive experience for users exploring the intricate details of the Mandelbrot set through an online interface.
 
 ## Development
 

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 {
+        display: none;
+      }
+    }
+  }
 
-    #macShortcut {
+  @media (pointer: coarse) {
+    #shortcuts {
       display: none;
     }
+
+    #shortcuts + details {
+      border-top: none;
+    }
   }
 
   .iteration-buttons {
@@ -484,8 +496,9 @@ input {
       border-right: 1px solid var(--gray-500);
       background: color-mix(in sRGB, var(--gray-950) 25%, transparent);
       padding-top: calc(env(safe-area-inset-top) + var(--space-16));
-      padding-left: var(--space-24);
+      padding-right: var(--space-24);
       padding-bottom: var(--space-16);
+      padding-left: var(--space-24);
 
       ul {
         list-style: none;

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",
@@ -30,5 +30,5 @@
   "orientation": "any",
   "short_name": "Mandelbrot.site",
   "start_url": "/",
-  "theme_color": "#000000"
+  "theme_color": "#2b2b2b"
 }