Enhance mobile font sizing and touch interaction in secrets.css and secrets.js

- Updated CSS to disable touch actions and prevent text selection on mobile devices.
- Introduced dynamic font sizing based on screen dimensions in secrets.js for improved readability.
- Added event listeners to prevent zoom gestures and pinch zoom on mobile devices, enhancing user experience.

Author: zesameri

css/secrets.css

@@ -3,13 +3,16 @@ body {
   position: relative;
   background: #000;
   margin: 0;
-  touch-action: manipulation;
+  touch-action: none;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
+  -webkit-text-size-adjust: none;
+  -ms-text-size-adjust: none;
+  text-size-adjust: none;
 }
 
 /* Mobile flexbox container for lyrics */
@@ -142,7 +145,7 @@ svg {
 /* Mobile-specific lyric styling */
 .lyric-line.mobile {
   font-family: 'Roboto Slab', serif;
-  font-size: 4.7vw;
+  font-size: var(--mobile-font-size, 4vw);
   width: 100% !important;
   max-width: 100% !important;
   display: block !important;
@@ -182,7 +185,7 @@ svg {
 
   .lyric-line.mobile {
     font-family: 'Roboto Slab', serif;
-    font-size: 5.5vw;
+    font-size: var(--mobile-font-size, 5vw);
     width: 100vw;
     left: 0 !important;
     line-height: 1.4;
@@ -195,7 +198,7 @@ svg {
 @media (max-width: 480px) {
   .lyric-line.mobile {
     font-family: 'Roboto Slab', serif;
-    font-size: 6vw;
+    font-size: var(--mobile-font-size, 5vw);
     width: 100vw;
     left: 0 !important;
     line-height: 1.5;
@@ -214,7 +217,7 @@ svg {
 @media (max-width: 360px) {
   .lyric-line.mobile {
     font-family: 'Roboto Slab', serif;
-    font-size: 7vw;
+    font-size: var(--mobile-font-size, 5vw);
     width: 100vw;
     left: 0 !important;
     line-height: 1.5;

js/secrets.js

@@ -12,7 +12,6 @@ var lyrics = [
   "when will i",
   "when will i",
   "see you again",
-  "<break>",
   "tell me 'bout your day",
   "give me a call",
   "you tripped me",
@@ -76,6 +75,30 @@ function detectMobile() {
 }
 
 function getMobilePosition() {
+  // Calculate optimal font size based on screen dimensions and number of lyrics
+  var totalLyrics = lyrics.length;
+  var screenHeight = $(window).height();
+  var screenWidth = $(window).width();
+  
+  // Calculate available height (use almost all screen height)
+  var availableHeight = screenHeight * 0.95; // Use 95% of screen height
+  
+  // Minimal padding per lyric
+  var paddingPerLyric = (screenHeight * 0.005); // 0.5vh in pixels (minimal padding)
+  var availableForText = availableHeight - (paddingPerLyric * totalLyrics);
+  
+  // Calculate line height for text only (excluding padding)
+  var optimalLineHeight = availableForText / totalLyrics;
+  
+  // Factor in line-height multiplier and convert to vw
+  var optimalFontSizeVw = ((optimalLineHeight / 1.1) / screenWidth) * 100; // Even less aggressive division
+  
+  // Apply reasonable constraints (allow larger fonts)
+  var optimalFontSize = Math.max(3, Math.min(7, optimalFontSizeVw));
+  
+  // Update CSS custom property for dynamic font sizing
+  document.documentElement.style.setProperty('--mobile-font-size', optimalFontSize + 'vw');
+  
   // Zigzag pattern: left, center, right, center, left...
   var patternIndex = mobileLineIndex % 4;
 
@@ -275,6 +298,32 @@ window.addEventListener('load', () => {
   }
 });
 
+// Prevent zoom gestures
+document.addEventListener('gesturestart', function (e) {
+  e.preventDefault();
+});
+
+document.addEventListener('gesturechange', function (e) {
+  e.preventDefault();
+});
+
+document.addEventListener('gestureend', function (e) {
+  e.preventDefault();
+});
+
+// Prevent pinch zoom
+document.addEventListener('touchstart', function (e) {
+  if (e.touches.length > 1) {
+    e.preventDefault();
+  }
+}, { passive: false });
+
+document.addEventListener('touchmove', function (e) {
+  if (e.touches.length > 1) {
+    e.preventDefault();
+  }
+}, { passive: false });
+
 
 window.onresize = function() {
     setup();