Enhance mobile responsiveness and layout in secrets.html and secrets.css

- Added viewport meta tag in secrets.html for better mobile scaling.
- Updated CSS in secrets.css to improve touch interactions and prevent text selection on mobile devices.
- Adjusted padding in secrets.js for better layout on smaller screens, optimizing the display of elements.

Author: zesameri

css/secrets.css

@@ -3,6 +3,13 @@ body {
   position: relative;
   background: #000;
   margin: 0;
+  touch-action: manipulation;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
 
 /* Mobile flexbox container for lyrics */
@@ -18,6 +25,8 @@ body {
   bottom: 0;
   z-index: 5;
   pointer-events: none;
+  max-width: 100vw;
+  max-height: 100vh;
 }
 
 svg {

js/secrets.js

@@ -300,17 +300,12 @@ function setup() {
   var isOtherMediaQuery = window.matchMedia("only screen and (min-width:1080px)").matches;
   if(isMobile && !isOtherMediaQuery) {
     svgSize = 250;
-    padding = 40;
+    padding = 20;
   }
 
   var rows = Math.floor(height / svgSize) + 1.5; // Add 1.5 rows: 1 full + 0.5 for 1/4 cutoff
   rows = Math.ceil(rows); // Round up to ensure we have enough rows
   var cols = Math.floor(width / svgSize) + 1; // Add extra column for better coverage
-  
-  // Add one more column for mobile devices
-  if(isMobile && !isOtherMediaQuery) {
-    cols += 1;
-  }
   var radius = Math.floor(Math.max(width, height) / Math.max(rows, cols)) / 2;
 
   shapes = makeFlowers(radius);
@@ -390,7 +385,7 @@ function pickFlower(flowers) {
   var colors = ['tomato', 'orangered', 'floralwhite',
     'gold', 'red', 'darkorange'];
   colors = ['DARKMAGENTA', 'REBECCAPURPLE', 'SLATEBLUE', 'ROYALBLUE', '#9c27b0', '#9f9fff',
-    'ALICEBLUE', 'PLUM', 'CORNFLOWERBLUE', 'DARKBLUE', 'MEDIUMBLUE', 'DARKSLATEBLUE'];
+    'PLUM', 'CORNFLOWERBLUE', 'DARKBLUE', 'MEDIUMBLUE', 'DARKSLATEBLUE'];
   var color = colors[Math.floor(Math.random() * colors.length)];
   flower.rotation = (Math.PI  / 2) * (Math.floor(Math.random() * 12) / 12);
   flower.stroke = color;

secrets.html

@@ -9,9 +9,10 @@
 
      gtag('config', 'UA-72294820-1');
    </script>
-   <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
-   <meta content="utf-8" http-equiv="encoding">
-   <title>Secrets</title>
+  <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
+  <meta content="utf-8" http-equiv="encoding">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <title>Secrets</title>
    <link href="./css/secrets.css" rel="stylesheet">
    <script src="./js/two.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>