Add responsive scaling; improve scanlines and Mobile Safari support

- Replace CSS zoom with CSS transform scaling for better mobile compatibility
- Implement wrapper-based scaling approach that includes both content and navigation bar
- Replace Almanac layout with CSS Grid for better cross-browser layout
- Greatly improve scanline algorithm to handle a wide variety of displays
- Add setting to override automatic scanlines to user-specified scale factor
- Remove scanline scaling debug functions
- Refactor settings module: initialize settings upfront and improve change handler declarations
- Enhance scanline SCSS with repeating-linear-gradient for better performance
- Add app icon for iOS/iPadOS
- Add 'fullscreen' event listener
- De-bounce 'resize' event listener
- Add 'orientationchange' event listener
- Implement three resize scaling algorithms:
  - Baseline (when no scaling is needed, like on the index page)
  - Mobile scaling (except Mobile Safari kiosk mode)
  - Mobile Safari kiosk mode (using manual offset calculations)
  - Standard fullscreen/kiosk mode (using CSS centering)

server/scripts/modules/almanac.mjs

@@ -113,17 +113,28 @@ class Almanac extends WeatherDisplay {
 	async drawCanvas() {
 		super.drawCanvas();
 		const info = this.data;
+
+		// Generate sun data grid in reading order (left-to-right, top-to-bottom)
+
+		// Set day names
 		const Today = DateTime.local();
 		const Tomorrow = Today.plus({ days: 1 });
+		this.elem.querySelector('.day-1').textContent = Today.toLocaleString({ weekday: 'long' });
+		this.elem.querySelector('.day-2').textContent = Tomorrow.toLocaleString({ weekday: 'long' });
 
-		// sun and moon data
-		this.elem.querySelector('.day-1').innerHTML = Today.toLocaleString({ weekday: 'long' });
-		this.elem.querySelector('.day-2').innerHTML = Tomorrow.toLocaleString({ weekday: 'long' });
-		this.elem.querySelector('.rise-1').innerHTML = timeFormat(DateTime.fromJSDate(info.sun[0].sunrise));
-		this.elem.querySelector('.rise-2').innerHTML = timeFormat(DateTime.fromJSDate(info.sun[1].sunrise));
-		this.elem.querySelector('.set-1').innerHTML = timeFormat(DateTime.fromJSDate(info.sun[0].sunset));
-		this.elem.querySelector('.set-2').innerHTML = timeFormat(DateTime.fromJSDate(info.sun[1].sunset));
+		const todaySunrise = DateTime.fromJSDate(info.sun[0].sunrise);
+		const todaySunset = DateTime.fromJSDate(info.sun[0].sunset);
+		const [todaySunriseFormatted, todaySunsetFormatted] = formatTimesForColumn([todaySunrise, todaySunset]);
+		this.elem.querySelector('.rise-1').textContent = todaySunriseFormatted;
+		this.elem.querySelector('.set-1').textContent = todaySunsetFormatted;
 
+		const tomorrowSunrise = DateTime.fromJSDate(info.sun[1].sunrise);
+		const tomorrowSunset = DateTime.fromJSDate(info.sun[1].sunset);
+		const [tomorrowSunriseFormatted, tomorrowSunsetformatted] = formatTimesForColumn([tomorrowSunrise, tomorrowSunset]);
+		this.elem.querySelector('.rise-2').textContent = tomorrowSunriseFormatted;
+		this.elem.querySelector('.set-2').textContent = tomorrowSunsetformatted;
+
+		// Moon data
 		const days = info.moon.map((MoonPhase) => {
 			const fill = {};
 
@@ -168,7 +179,20 @@ const imageName = (type) => {
 	}
 };
 
-const timeFormat = (dt) => dt.setZone(timeZone()).toLocaleString(DateTime.TIME_SIMPLE).toLowerCase();
+const formatTimesForColumn = (times) => {
+	const formatted = times.map((dt) => dt.setZone(timeZone()).toFormat('h:mm a').toUpperCase());
+
+	// Check if any time has a 2-digit hour (starts with '1')
+	const hasTwoDigitHour = formatted.some((time) => time.startsWith('1'));
+
+	// If mixed digit lengths, pad single-digit hours with non-breaking space
+	if (hasTwoDigitHour) {
+		return formatted.map((time) => (time.startsWith('1') ? time : `\u00A0${time}`));
+	}
+
+	// Otherwise, no padding needed
+	return formatted;
+};
 
 // register display
 const display = new Almanac(9, 'almanac');

server/scripts/modules/settings.mjs

@@ -1,12 +1,87 @@
 import Setting from './utils/setting.mjs';
 
-document.addEventListener('DOMContentLoaded', () => {
-	init();
-});
-
-// default speed
+// Initialize settings immediately so other modules can access them
 const settings = { speed: { value: 1.0 } };
 
+// Declare change functions first, before they're referenced in init() to avoid the Temporal Dead Zone (TDZ)
+const wideScreenChange = (value) => {
+	const container = document.querySelector('#divTwc');
+	if (!container) return; // DOM not ready
+
+	if (value) {
+		container.classList.add('wide');
+	} else {
+		container.classList.remove('wide');
+	}
+	// Trigger resize to recalculate scaling for new width
+	window.dispatchEvent(new Event('resize'));
+};
+
+const kioskChange = (value) => {
+	const body = document.querySelector('body');
+	if (!body) return; // DOM not ready
+
+	if (value) {
+		body.classList.add('kiosk');
+		window.dispatchEvent(new Event('resize'));
+	} else {
+		body.classList.remove('kiosk');
+	}
+};
+
+const scanLineChange = (value) => {
+	const container = document.getElementById('container');
+	const navIcons = document.getElementById('ToggleScanlines');
+
+	if (!container || !navIcons) return; // DOM elements not ready
+
+	if (value) {
+		container.classList.add('scanlines');
+		navIcons.classList.add('on');
+	} else {
+		// Remove all scanline classes
+		container.classList.remove('scanlines', 'scanlines-auto', 'scanlines-fine', 'scanlines-normal', 'scanlines-thick', 'scanlines-classic', 'scanlines-retro');
+		navIcons.classList.remove('on');
+	}
+};
+
+const scanLineModeChange = (_value) => {
+	// Only apply if scanlines are currently enabled
+	if (settings.scanLines?.value) {
+		// Call the scanline update function directly with current scale
+		if (typeof window.applyScanlineScaling === 'function') {
+			// Get current scale from navigation module or use 1.0 as fallback
+			const scale = window.currentScale || 1.0;
+			window.applyScanlineScaling(scale);
+		}
+	}
+};
+
+// Simple global helper to change scanline mode when remote debugging or in kiosk mode
+window.changeScanlineMode = (mode) => {
+	if (typeof settings === 'undefined' || !settings.scanLineMode) {
+		console.error('Settings system not available');
+		return false;
+	}
+
+	const validModes = ['auto', 'thin', 'medium', 'thick'];
+	if (!validModes.includes(mode)) {
+		return false;
+	}
+
+	settings.scanLineMode.value = mode;
+	return true;
+};
+
+const unitChange = () => {
+	// reload the data at the top level to refresh units
+	// after the initial load
+	if (unitChange.firstRunDone) {
+		window.location.reload();
+	}
+	unitChange.firstRunDone = true;
+};
+
 const init = () => {
 	// create settings see setting.mjs for defaults
 	settings.wide = new Setting('wide', {
@@ -39,6 +114,19 @@ const init = () => {
 		changeAction: scanLineChange,
 		sticky: true,
 	});
+	settings.scanLineMode = new Setting('scanLineMode', {
+		name: 'Scan Line Style',
+		type: 'select',
+		defaultValue: 'auto',
+		changeAction: scanLineModeChange,
+		sticky: true,
+		values: [
+			['auto', 'Auto (Adaptive)'],
+			['thin', 'Thin (1p)'],
+			['medium', 'Medium (2x)'],
+			['thick', 'Thick (3x)'],
+		],
+	});
 	settings.units = new Setting('units', {
 		name: 'Units',
 		type: 'select',
@@ -62,54 +150,16 @@ const init = () => {
 		],
 		visible: false,
 	});
+};
 
-	// generate html objects
+init();
+
+// generate html objects
+document.addEventListener('DOMContentLoaded', () => {
 	const settingHtml = Object.values(settings).map((d) => d.generate());
-
-	// write to page
 	const settingsSection = document.querySelector('#settings');
 	settingsSection.innerHTML = '';
 	settingsSection.append(...settingHtml);
-};
-
-const wideScreenChange = (value) => {
-	const container = document.querySelector('#divTwc');
-	if (value) {
-		container.classList.add('wide');
-	} else {
-		container.classList.remove('wide');
-	}
-};
-
-const kioskChange = (value) => {
-	const body = document.querySelector('body');
-	if (value) {
-		body.classList.add('kiosk');
-		window.dispatchEvent(new Event('resize'));
-	} else {
-		body.classList.remove('kiosk');
-	}
-};
-
-const scanLineChange = (value) => {
-	const container = document.getElementById('container');
-	const navIcons = document.getElementById('ToggleScanlines');
-	if (value) {
-		container.classList.add('scanlines');
-		navIcons.classList.add('on');
-	} else {
-		container.classList.remove('scanlines');
-		navIcons.classList.remove('on');
-	}
-};
-
-const unitChange = () => {
-	// reload the data at the top level to refresh units
-	// after the initial load
-	if (unitChange.firstRunDone) {
-		window.location.reload();
-	}
-	unitChange.firstRunDone = true;
-};
+});
 
 export default settings;

server/scripts/modules/utils/setting.mjs

@@ -171,8 +171,9 @@ class Setting {
 					}
 				}
 			}
-		} catch {
-			return null;
+		} catch (error) {
+			console.warn(`Failed to parse settings from localStorage: ${error} - allSettings=${allSettings}`);
+			localStorage?.removeItem(SETTINGS_KEY);
 		}
 		return null;
 	}