render roulette

wmodes · wmodes · commit b08a7dd47878 · 2025-01-30T15:26:35.000-08:00
diff --git a/render-roulette/css/index.css b/render-roulette/css/index.css
@@ -12,6 +12,9 @@ body {
   margin: 0;
   padding: 1rem; /* Prevents text from hitting edges */
   box-sizing: border-box;
+  font-size: 1rem; /* Base size to prevent unexpected upscaling */
+  -webkit-text-size-adjust: 100%; /* Prevent Safari from auto-scaling text */
+  text-size-adjust: 100%; /* Standard property */
 }
 
 /* Title adjustments */
@@ -62,37 +65,38 @@ body {
   opacity: 1;
 }
 
-/* Responsive: Medium screens (tablets, landscape mobile) */
-@media (max-width: 1024px) {
+
+
+/* Adjust media queries to better detect mobile devices */
+@media (max-width: 1024px), (pointer: coarse) {
   #output {
-    font-size: 2.5rem;
+    font-size: 2.5rem; /* Scale down slightly for touchscreens */
   }
 
   #title, #instructions {
-    font-size: 0.875rem;
+    font-size: 0.875rem; /* Adjust smaller text elements */
   }
 }
 
-/* Responsive: Small screens (portrait mobile) */
-@media (max-width: 768px) {
+@media (max-width: 900px), (pointer: coarse) {
   #output {
     font-size: 2rem;
-    max-width: 90vw; /* Prevents horizontal cut-off */
+    max-width: 90vw; /* Prevent text from hitting screen edges */
   }
 
   #title, #instructions {
     font-size: 0.75rem;
   }
 }
 
-/* Responsive: Wide but short screens (landscape mobile) */
-@media (max-width: 900px) and (max-height: 450px) {
+/* Mobile-specific styles with extra width buffer */
+@media (max-width: 850px), (max-device-width: 850px), (pointer: coarse) {
   #output {
-    font-size: 1.8rem; /* Scale down text for landscape */
+    font-size: 1.8rem; /* Further scaling for small screens */
     max-height: 75vh;
   }
 
   #title, #instructions {
     font-size: 0.7rem;
   }
-}
+}
diff --git a/render-roulette/index.html b/render-roulette/index.html
@@ -28,6 +28,7 @@
     <!-- Custom JavaScript -->
     <script defer src="js/prompts.js"></script>
     <script defer src="js/generate_prompt.js"></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
 <body>
     <div id="container">

Original file line number	Diff line number	Diff line change
`@@ -12,6 +12,9 @@ body {`
`12`	`12`	`margin: 0;`
`13`	`13`	`padding: 1rem; /* Prevents text from hitting edges */`
`14`	`14`	`box-sizing: border-box;`
	`15`	`+ font-size: 1rem; /* Base size to prevent unexpected upscaling */`
	`16`	`+ -webkit-text-size-adjust: 100%; /* Prevent Safari from auto-scaling text */`
	`17`	`+ text-size-adjust: 100%; /* Standard property */`
`15`	`18`	`}`
`16`	`19`
`17`	`20`	`/* Title adjustments */`
`@@ -62,37 +65,38 @@ body {`
`62`	`65`	`opacity: 1;`
`63`	`66`	`}`
`64`	`67`
`65`		`-/* Responsive: Medium screens (tablets, landscape mobile) */`
`66`		`-@media (max-width: 1024px) {`
	`68`	`+`
	`69`	`+`
	`70`	`+/* Adjust media queries to better detect mobile devices */`
	`71`	`+@media (max-width: 1024px), (pointer: coarse) {`
`67`	`72`	`#output {`
`68`		`- font-size: 2.5rem;`
	`73`	`+ font-size: 2.5rem; /* Scale down slightly for touchscreens */`
`69`	`74`	`}`
`70`	`75`
`71`	`76`	`#title, #instructions {`
`72`		`- font-size: 0.875rem;`
	`77`	`+ font-size: 0.875rem; /* Adjust smaller text elements */`
`73`	`78`	`}`
`74`	`79`	`}`
`75`	`80`
`76`		`-/* Responsive: Small screens (portrait mobile) */`
`77`		`-@media (max-width: 768px) {`
	`81`	`+@media (max-width: 900px), (pointer: coarse) {`
`78`	`82`	`#output {`
`79`	`83`	`font-size: 2rem;`
`80`		`- max-width: 90vw; /* Prevents horizontal cut-off */`
	`84`	`+ max-width: 90vw; /* Prevent text from hitting screen edges */`
`81`	`85`	`}`
`82`	`86`
`83`	`87`	`#title, #instructions {`
`84`	`88`	`font-size: 0.75rem;`
`85`	`89`	`}`
`86`	`90`	`}`
`87`	`91`
`88`		`-/* Responsive: Wide but short screens (landscape mobile) */`
`89`		`-@media (max-width: 900px) and (max-height: 450px) {`
	`92`	`+/* Mobile-specific styles with extra width buffer */`
	`93`	`+@media (max-width: 850px), (max-device-width: 850px), (pointer: coarse) {`
`90`	`94`	`#output {`
`91`		`- font-size: 1.8rem; /* Scale down text for landscape */`
	`95`	`+ font-size: 1.8rem; /* Further scaling for small screens */`
`92`	`96`	`max-height: 75vh;`
`93`	`97`	`}`
`94`	`98`
`95`	`99`	`#title, #instructions {`
`96`	`100`	`font-size: 0.7rem;`
`97`	`101`	`}`
`98`		`-}`
	`102`	`+}`