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/index.mjs

@@ -1,13 +1,14 @@
 import { json } from './modules/utils/fetch.mjs';
 import noSleep from './modules/utils/nosleep.mjs';
 import {
-	message as navMessage, isPlaying, resize, resetStatuses, latLonReceived,
+	message as navMessage, isPlaying, resize, resetStatuses, latLonReceived, isIOS,
 } from './modules/navigation.mjs';
 import { round2 } from './modules/utils/units.mjs';
 import { parseQueryString } from './modules/share.mjs';
 import settings from './modules/settings.mjs';
 import AutoComplete from './modules/autocomplete.mjs';
 import { loadAllData } from './modules/utils/data-loader.mjs';
+import { debugFlag } from './modules/utils/debug.mjs';
 
 document.addEventListener('DOMContentLoaded', () => {
 	init();
@@ -56,7 +57,15 @@ const init = async () => {
 	document.querySelector('#NavigatePrevious').addEventListener('click', btnNavigatePreviousClick);
 	document.querySelector('#NavigatePlay').addEventListener('click', btnNavigatePlayClick);
 	document.querySelector('#ToggleScanlines').addEventListener('click', btnNavigateToggleScanlines);
-	document.querySelector(TOGGLE_FULL_SCREEN_SELECTOR).addEventListener('click', btnFullScreenClick);
+
+	// Hide fullscreen button on iOS since it doesn't support true fullscreen
+	const fullscreenButton = document.querySelector(TOGGLE_FULL_SCREEN_SELECTOR);
+	if (isIOS()) {
+		fullscreenButton.style.display = 'none';
+	} else {
+		fullscreenButton.addEventListener('click', btnFullScreenClick);
+	}
+
 	const btnGetGps = document.querySelector(BNT_GET_GPS_SELECTOR);
 	btnGetGps.addEventListener('click', btnGetGpsClick);
 	if (!navigator.geolocation) btnGetGps.style.display = 'none';
@@ -64,9 +73,6 @@ const init = async () => {
 	document.querySelector('#divTwc').addEventListener('mousemove', () => {
 		if (document.fullscreenElement) updateFullScreenNavigate();
 	});
-	// local change detection when exiting full screen via ESC key (or other non button click methods)
-	window.addEventListener('resize', fullScreenResizeCheck);
-	fullScreenResizeCheck.wasFull = false;
 
 	document.querySelector('#btnGetLatLng').addEventListener('click', () => autoComplete.directFormSubmit());
 
@@ -116,9 +122,21 @@ const init = async () => {
 		btnGetGpsClick();
 	}
 
-	// if kiosk mode was set via the query string, also play immediately
+	// Handle kiosk mode initialization
-	settings.kiosk.value = parsedParameters['settings-kiosk-checkbox'] === 'true';
+	const urlKioskCheckbox = parsedParameters['settings-kiosk-checkbox'];
-	const play = parsedParameters['settings-kiosk-checkbox'] ?? localStorage.getItem('play');
+
+	// If kiosk=false is specified, disable kiosk mode and clear any stored value
+	if (urlKioskCheckbox === 'false') {
+		settings.kiosk.value = false;
+		// Clear stored value by using conditional storage with false
+		settings.kiosk.conditionalStoreToLocalStorage(false, false);
+	} else if (urlKioskCheckbox === 'true') {
+		// if kiosk mode was set via the query string, enable it
+		settings.kiosk.value = true;
+	}
+
+	// Auto-play logic: also play immediately if kiosk mode is enabled
+	const play = urlKioskCheckbox ?? localStorage.getItem('play');
 	if (play === null || play === 'true') postMessage('navButton', 'play');
 
 	document.querySelector('#btnClearQuery').addEventListener('click', () => {
@@ -195,8 +213,7 @@ const enterFullScreen = async () => {
 	const element = document.querySelector('#divTwc');
 
 	// Supports most browsers and their versions.
-	const requestMethod = element.requestFullscreen || element.webkitRequestFullscreen
+	const requestMethod = element.requestFullscreen || element.webkitRequestFullscreen || element.mozRequestFullscreen || element.msRequestFullscreen;
-		|| element.mozRequestFullscreen || element.msRequestFullscreen;
 
 	if (requestMethod) {
 		try {
@@ -206,24 +223,27 @@ const enterFullScreen = async () => {
 				allowsInlineMediaPlayback: true,
 			});
 
-			// Allow a moment for fullscreen to engage, then optimize
+			if (debugFlag('fullscreen')) {
-			setTimeout(() => {
+				setTimeout(() => {
-				resize();
+					console.log(`🖥️ Fullscreen engaged. window=${window.innerWidth}x${window.innerHeight} fullscreenElement=${!!document.fullscreenElement}`);
-			}, 100);
+				}, 150);
+			}
 		} catch (error) {
 			console.error('❌ Fullscreen request failed:', error);
 		}
 	} else {
 		// iOS doesn't support FullScreen API.
 		window.scrollTo(0, 0);
+		resize(true); // Force resize for iOS
 	}
-	resize();
 	updateFullScreenNavigate();
 
 	// change hover text and image
 	const img = document.querySelector(TOGGLE_FULL_SCREEN_SELECTOR);
-	img.src = 'images/nav/ic_fullscreen_exit_white_24dp_2x.png';
+	if (img && img.style.display !== 'none') {
-	img.title = 'Exit fullscreen';
+		img.src = 'images/nav/ic_fullscreen_exit_white_24dp_2x.png';
+		img.title = 'Exit fullscreen';
+	}
 };
 
 const exitFullscreen = () => {
@@ -239,15 +259,17 @@ const exitFullscreen = () => {
 	} else if (document.msExitFullscreen) {
 		document.msExitFullscreen();
 	}
-	resize();
+	// Note: resize will be called by fullscreenchange event listener
 	exitFullScreenVisibilityChanges();
 };
 
 const exitFullScreenVisibilityChanges = () => {
 	// change hover text and image
 	const img = document.querySelector(TOGGLE_FULL_SCREEN_SELECTOR);
-	img.src = 'images/nav/ic_fullscreen_white_24dp_2x.png';
+	if (img && img.style.display !== 'none') {
-	img.title = 'Enter fullscreen';
+		img.src = 'images/nav/ic_fullscreen_white_24dp_2x.png';
+		img.title = 'Enter fullscreen';
+	}
 	document.querySelector('#divTwc').classList.remove('no-cursor');
 	const divTwcBottom = document.querySelector('#divTwcBottom');
 	divTwcBottom.classList.remove('hidden');
@@ -429,21 +451,6 @@ const getForecastFromLatLon = (latitude, longitude, fromGps = false) => {
 	});
 };
 
-// check for change in full screen triggered by browser and run local functions
-const fullScreenResizeCheck = () => {
-	if (fullScreenResizeCheck.wasFull && !document.fullscreenElement) {
-		// leaving full screen
-		exitFullScreenVisibilityChanges();
-	}
-	if (!fullScreenResizeCheck.wasFull && document.fullscreenElement) {
-		// entering full screen
-		// can't do much here because a UI interaction is required to change the full screen div element
-	}
-
-	// store state of fullscreen element for next change detection
-	fullScreenResizeCheck.wasFull = !!document.fullscreenElement;
-};
-
 const getCustomCode = async () => {
 	// fetch the custom file and see if it returns a 200 status
 	const response = await fetch('scripts/custom.js', { method: 'HEAD' });

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
+		const todaySunrise = DateTime.fromJSDate(info.sun[0].sunrise);
-		this.elem.querySelector('.day-1').innerHTML = Today.toLocaleString({ weekday: 'long' });
+		const todaySunset = DateTime.fromJSDate(info.sun[0].sunset);
-		this.elem.querySelector('.day-2').innerHTML = Tomorrow.toLocaleString({ weekday: 'long' });
+		const [todaySunriseFormatted, todaySunsetFormatted] = formatTimesForColumn([todaySunrise, todaySunset]);
-		this.elem.querySelector('.rise-1').innerHTML = timeFormat(DateTime.fromJSDate(info.sun[0].sunrise));
+		this.elem.querySelector('.rise-1').textContent = todaySunriseFormatted;
-		this.elem.querySelector('.rise-2').innerHTML = timeFormat(DateTime.fromJSDate(info.sun[1].sunrise));
+		this.elem.querySelector('.set-1').textContent = todaySunsetFormatted;
-		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 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', () => {
+// Initialize settings immediately so other modules can access them
-	init();
-});
-
-// default speed
 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 {
+		} catch (error) {
-			return null;
+			console.warn(`Failed to parse settings from localStorage: ${error} - allSettings=${allSettings}`);
+			localStorage?.removeItem(SETTINGS_KEY);
 		}
 		return null;
 	}

server/styles/scss/_almanac.scss

@@ -1,5 +1,5 @@
-@use 'shared/_colors'as c;
+@use 'shared/_colors' as c;
-@use 'shared/_utils'as u;
+@use 'shared/_utils' as u;
 
 #almanac-html.weather-display {
 	background-image: url('../images/backgrounds/3.png');
@@ -11,62 +11,57 @@
 	@include u.text-shadow();
 
 	.sun {
-		display: table;
+		// Use CSS Grid for cross-browser consistency
-		margin-left: 50px;
+		// Grid is populated in reading order (left-to-right, top-to-bottom):
-		height: 100px;
+		display: grid;
+		grid-template-columns: auto auto auto;
+		grid-template-rows: auto auto auto;
+		gap: 0px 90px;
+		margin: 3px auto 5px auto; // align the bottom of the div with the background
+		width: fit-content;
+		line-height: 30px;
 
-
+		.grid-item {
-		&>div {
+			// Reset inherited styles that interfere with grid layout
-			display: table-row;
+			width: auto;
+			height: auto;
+			padding: 0;
+			margin: 0;
 			position: relative;
 
-			&>div {
+			// Column headers (day names)
-				display: table-cell;
+			&.header {
-			}
+				color: c.$column-header-text;
-		}
+				text-align: center;
-
-		.days {
-			color: c.$column-header-text;
-			text-align: right;
-			top: -5px;
-
-			.day {
-				padding-right: 10px;
 			}
 
-		}
+			// Row labels (Sunrise:, Sunset:)
-
+			&.row-label {
-		.times {
+				// color: c.$column-header-text; // screenshots show labels were white
-			text-align: right;
+				text-align: right;
-
-			.sun-time {
-				width: 200px;
 			}
 
-			&.times-1 {
+			// Time values (sunrise/sunset)
-				top: -10px;
+			&.time {
-			}
+				text-align: center;
-
-			&.times-2 {
-				top: -15px;
 			}
 		}
 	}
 
 	.moon {
 		position: relative;
-		top: -10px;
+		padding: 7px 50px;
-
+		line-height: 36px;
-		padding: 0px 60px;
 
 		.title {
 			color: c.$column-header-text;
+			padding-left: 13px;
 		}
 
 		.day {
 			display: inline-block;
 			text-align: center;
-			width: 130px;
+			width: 132px;
 
 			.icon {
 				// shadow in image make it look off center
@@ -82,4 +77,4 @@
 
 
 
-}
+}

server/styles/scss/_current-weather.scss

@@ -1,5 +1,5 @@
-@use 'shared/_colors'as c;
+@use 'shared/_colors' as c;
-@use 'shared/_utils'as u;
+@use 'shared/_utils' as u;
 
 .weather-display .main.current-weather {
 	&.main {
@@ -58,27 +58,19 @@
 			font-size: 24pt;
 		}
 
-		.condition {}
-
 		.icon {
-			height: 100px;
-
 			img {
-				max-width: 126px;
+				margin: 0 auto;
+				display: block;
 			}
 		}
 
 		.wind-container {
-			margin-bottom: 10px;
+			margin-left: 10px;
+			display: flex;
 
 			&>div {
-				width: 45%;
+				width: 50%;
-				display: inline-block;
-				margin: 0px;
-			}
-
-			.wind-label {
-				margin-left: 5px;
 			}
 
 			.wind {
@@ -87,7 +79,8 @@
 		}
 
 		.wind-gusts {
-			margin-left: 5px;
+			text-align: right;
+			font-size: 28px;
 		}
 
 		.location {
@@ -99,4 +92,4 @@
 			text-wrap: nowrap;
 		}
 	}
-}
+}

server/styles/scss/_page.scss

@@ -9,6 +9,7 @@
 
 body {
 	font-family: "Star4000";
+	margin: 0;
 
 	@media (prefers-color-scheme: dark) {
 		background-color: #000000;
@@ -23,13 +24,17 @@ body {
 
 	&.kiosk {
 		margin: 0px;
+		padding: 0px;
 		overflow: hidden;
 		width: 100vw;
+		// Always use black background in kiosk mode, regardless of light/dark preference
+		background-color: #000000 !important;
 	}
 }
 
 #divQuery {
 	max-width: 640px;
+	padding: 8px;
 
 	.buttons {
 		display: inline-block;
@@ -137,12 +142,26 @@ body {
 	color: #ffffff;
 	width: 100%;
 	max-width: 640px;
+	margin: 0; // Ensure edge-to-edge display
 
 	&.wide {
 		max-width: 854px;
 	}
 }
 
+.content-wrapper {
+	padding: 8px;
+}
+
+#divTwcMain {
+	width: 640px;
+	height: 480px;
+
+	.wide & {
+		width: 854px;
+	}
+}
+
 .kiosk #divTwc {
 	max-width: unset;
 }
@@ -184,7 +203,11 @@ body {
 	background-color: #000000;
 
 	color: #ffffff;
-	width: 100%;
+	width: 640px;
+
+	.wide & {
+		width: 854px;
+	}
 
 	@media (prefers-color-scheme: dark) {
 		background-color: rgb(48, 48, 48);
@@ -196,25 +219,26 @@ body {
 	padding-left: 6px;
 	padding-right: 6px;
 
-	// scale down the buttons on narrower screens
+	// Use font-size scaling instead of zoom/transform to avoid layout gaps and preserve icon tap targets.
+	// While not semantically ideal, it works well for our fixed-layout design.
 	@media (max-width: 550px) {
-		zoom: 0.90;
+		font-size: 0.90em;
 	}
 
 	@media (max-width: 500px) {
-		zoom: 0.80;
+		font-size: 0.80em;
 	}
 
 	@media (max-width: 450px) {
-		zoom: 0.70;
+		font-size: 0.70em;
 	}
 
 	@media (max-width: 400px) {
-		zoom: 0.60;
+		font-size: 0.60em;
 	}
 
 	@media (max-width: 350px) {
-		zoom: 0.50;
+		font-size: 0.50em;
 	}
 }
 
@@ -325,7 +349,6 @@ body {
 	// background-image: none;
 	width: unset;
 	height: unset;
-	transform-origin: unset;
 }
 
 #loading {
@@ -399,7 +422,8 @@ body {
 
 	label {
 		display: block;
-		max-width: 300px;
+		max-width: fit-content;
+		cursor: pointer;
 
 		.alert {
 			display: none;
@@ -414,6 +438,13 @@ body {
 
 #divTwcBottom img {
 	transform: scale(0.75);
+
+	// Make icons larger in widescreen mode on mobile
+	@media (max-width: 550px) {
+		.wide & {
+			transform: scale(1.0); // Larger icons in widescreen
+		}
+	}
 }
 
 #divTwc:fullscreen,
@@ -446,9 +477,7 @@ body {
 
 .kiosk {
 	#divTwc #divTwcBottom {
-		>div {
+		display: none;
-			display: none;
-		}
 	}
 }
 

server/styles/scss/_progress.scss

@@ -1,5 +1,5 @@
-@use 'shared/_colors'as c;
+@use 'shared/_colors' as c;
-@use 'shared/_utils'as u;
+@use 'shared/_utils' as u;
 
 .weather-display .progress {
 	@include u.text-shadow();
@@ -13,6 +13,7 @@
 		box-sizing: border-box;
 		height: 310px;
 		overflow: hidden;
+		line-height: 28px;
 
 		.item {
 			position: relative;
@@ -117,4 +118,4 @@
 			transition: width 1s steps(6);
 		}
 	}
-}
+}

server/styles/scss/_travel.scss

@@ -1,5 +1,5 @@
-@use 'shared/_colors'as c;
+@use 'shared/_colors' as c;
-@use 'shared/_utils'as u;
+@use 'shared/_utils' as u;
 
 .weather-display .main.travel {
 	&.main {
@@ -8,14 +8,11 @@
 		.column-headers {
 			background-color: c.$column-header;
 			height: 20px;
-			position: absolute;
-			width: 100%;
-		}
-
-		.column-headers {
 			position: sticky;
 			top: 0px;
+			width: 100%;
 			z-index: 5;
+			overflow: hidden; // prevent thin gaps between header and content
 
 			div {
 				display: inline-block;
@@ -100,4 +97,4 @@
 			}
 		}
 	}
-}
+}

server/styles/scss/_weather-display.scss

@@ -94,11 +94,13 @@
 
 		&.has-scroll {
 			width: 640px;
+			margin-top: 0;
 			height: 310px;
 			overflow: hidden;
 
 			&.no-header {
 				height: 400px;
+				margin-top: 0; // Reset for no-header case since the gap issue is header-related
 			}
 		}
 

server/styles/scss/shared/_scanlines.scss

@@ -83,10 +83,12 @@ $scan-opacity: .75;
 		bottom: 0;
 		left: 0;
 		z-index: $scan-z-index;
-		background: linear-gradient(to bottom,
+		// repeating-linear-gradient is more efficient than linear-gradient+background-size because it doesn't require the browser to calculate tiling
-				transparent 50%,
+		background: repeating-linear-gradient(to bottom,
-				$scan-color 51%);
+				transparent 0,
-		background-size: 100% $scan-width*2;
+				transparent $scan-width,
+				$scan-color $scan-width,
+				$scan-color calc($scan-width * 2));
 		@include scan-crt($scan-crt);
 
 		// Prevent sub-pixel aliasing on scaled displays
@@ -94,51 +96,21 @@ $scan-opacity: .75;
 		image-rendering: pixelated;
 	}
 
-	// Responsive scanlines for different display scenarios
+	// Scanlines use dynamic thickness calculated by JavaScript
-
+	// JavaScript calculates optimal thickness to prevent banding at any scale factor
-	// High DPI displays - use original sizing
+	// The --scanline-thickness custom property is set by applyScanlineScaling()
-	@media (-webkit-min-device-pixel-ratio: 2),
+	// The modes (hairline, thin, medium, thick) force the base thickness selection
-	(min-resolution: 192dpi) {
+	// Some modes may appear the same (e.g. hairline and thin) depending on the display
-		&:before {
+	&:before {
-			height: $scan-width;
+		height: var(--scanline-thickness, $scan-width);
-		}
-
-		&:after {
-			background-size: 100% calc($scan-width * 2);
-		}
 	}
 
-	// Medium resolution displays (1024x768 and similar)
+	&:after {
-	@media (max-width: 1200px) and (max-height: 900px) and (-webkit-max-device-pixel-ratio: 1.5) {
+		background: repeating-linear-gradient(to bottom,
-		&:before {
+				transparent 0,
-			height: calc($scan-width * 1.5);
+				transparent var(--scanline-thickness, $scan-width),
-		}
+				$scan-color var(--scanline-thickness, $scan-width),
-
+				$scan-color calc(var(--scanline-thickness, $scan-width) * 2));
-		&:after {
-			background-size: 100% calc($scan-width * 3);
-		}
-	}
-
-	// Low resolution displays - increase thickness to prevent banding
-	@media (max-width: 1024px) and (max-height: 768px) {
-		&:before {
-			height: calc($scan-width * 2);
-		}
-
-		&:after {
-			background-size: 100% calc($scan-width * 4);
-		}
-	}
-
-	// Very low resolution displays
-	@media (max-width: 800px) and (max-height: 600px) {
-		&:before {
-			height: calc($scan-width * 3);
-		}
-
-		&:after {
-			background-size: 100% calc($scan-width * 6);
-		}
 	}
 }
 

views/index.ejs

@@ -14,6 +14,7 @@
   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
   <link rel="manifest" href="manifest.json" />
   <link rel="icon" href="images/logos/logo192.png" />
+  <link rel="apple-touch-icon" sizes="180x180" href="images/logos/app-icon-180.png" />
 	<link rel="preload" href="playlist.json" as="fetch" crossorigin="anonymous"/>
 	<meta property="og:image" content="https://weatherstar.netbymatt.com/images/social/1200x600.png">
 	<meta property="og:image:width" content="1200">
@@ -80,64 +81,66 @@
 	</div>
 
 	<div id="divTwc">
-		<div id="container">
+		<div id="divTwcMain">
-			<div id="loading" width="640" height="480">
+			<div id="container">
-				<div>
+				<div id="loading" width="640" height="480">
-					<div class="title">WeatherStar 4000+</div>
+					<div>
-					<div class="version">v<%- version %></div>
+						<div class="title">WeatherStar 4000+</div>
-          <div class="instructions">Enter your location above to continue</div>
+						<div class="version">v<%- version %></div>
-        </div>
+						<div class="instructions">Enter your location above to continue</div>
-      </div>
+					</div>
-      <div id="progress-html" class="weather-display">
+				</div>
-        <%- include('partials/progress.ejs') %>
+				<div id="progress-html" class="weather-display">
-      </div>
+					<%- include('partials/progress.ejs') %>
-      <div id="hourly-html" class="weather-display">
+				</div>
-        <%- include('partials/hourly.ejs') %>
+				<div id="hourly-html" class="weather-display">
-      </div>
+					<%- include('partials/hourly.ejs') %>
-      <div id="hourly-graph-html" class="weather-display">
+				</div>
-        <%- include('partials/hourly-graph.ejs') %>
+				<div id="hourly-graph-html" class="weather-display">
-      </div>
+					<%- include('partials/hourly-graph.ejs') %>
-      <div id="travel-html" class="weather-display">
+				</div>
-        <%- include('partials/travel.ejs') %>
+				<div id="travel-html" class="weather-display">
-      </div>
+					<%- include('partials/travel.ejs') %>
-      <div id="current-weather-html" class="weather-display">
+				</div>
-        <%- include('partials/current-weather.ejs') %>
+				<div id="current-weather-html" class="weather-display">
-      </div>
+					<%- include('partials/current-weather.ejs') %>
-      <div id="local-forecast-html" class="weather-display">
+				</div>
-        <%- include('partials/local-forecast.ejs') %>
+				<div id="local-forecast-html" class="weather-display">
-      </div>
+					<%- include('partials/local-forecast.ejs') %>
-      <div id="latest-observations-html" class="weather-display">
+				</div>
-        <%- include('partials/latest-observations.ejs') %>
+				<div id="latest-observations-html" class="weather-display">
-      </div>
+					<%- include('partials/latest-observations.ejs') %>
-      <div id="regional-forecast-html" class="weather-display">
+				</div>
-        <%- include('partials/regional-forecast.ejs') %>
+				<div id="regional-forecast-html" class="weather-display">
-      </div>
+					<%- include('partials/regional-forecast.ejs') %>
-      <div id="almanac-html" class="weather-display">
+				</div>
-        <%- include('partials/almanac.ejs') %>
+				<div id="almanac-html" class="weather-display">
-      </div>
+					<%- include('partials/almanac.ejs') %>
-      <div id="spc-outlook-html" class="weather-display">
+				</div>
-        <%- include('partials/spc-outlook.ejs') %>
+				<div id="spc-outlook-html" class="weather-display">
-      </div>
+					<%- include('partials/spc-outlook.ejs') %>
-      <div id="extended-forecast-html" class="weather-display">
+				</div>
-        <%- include('partials/extended-forecast.ejs') %>
+				<div id="extended-forecast-html" class="weather-display">
-      </div>
+					<%- include('partials/extended-forecast.ejs') %>
-      <div id="radar-html" class="weather-display">
+				</div>
-        <%- include('partials/radar.ejs') %>
+				<div id="radar-html" class="weather-display">
-      </div>
+					<%- include('partials/radar.ejs') %>
-      <div id="hazards-html" class="weather-display">
+				</div>
-        <%- include('partials/hazards.ejs') %>
+				<div id="hazards-html" class="weather-display">
-      </div>
+					<%- include('partials/hazards.ejs') %>
-    </div>
+				</div>
-    <div id="divTwcBottom">
+			</div>
-      <div id="divTwcBottomLeft">
+		</div>
-        <img id="NavigateMenu" class="navButton" src="images/nav/ic_menu_white_24dp_2x.png" title="Menu" />
+		<div id="divTwcBottom">
-        <img id="NavigatePrevious" class="navButton" src="images/nav/ic_skip_previous_white_24dp_2x.png" title="Previous" />
+			<div id="divTwcBottomLeft">
-        <img id="NavigateNext" class="navButton" src="images/nav/ic_skip_next_white_24dp_2x.png" title="Next" />
+				<img id="NavigateMenu" class="navButton" src="images/nav/ic_menu_white_24dp_2x.png" title="Menu" />
-        <img id="NavigatePlay" class="navButton" src="images/nav/ic_play_arrow_white_24dp_2x.png" title="Play" />
+				<img id="NavigatePrevious" class="navButton" src="images/nav/ic_skip_previous_white_24dp_2x.png" title="Previous" />
-      </div>
+				<img id="NavigateNext" class="navButton" src="images/nav/ic_skip_next_white_24dp_2x.png" title="Next" />
-      <div id="divTwcBottomMiddle">
+				<img id="NavigatePlay" class="navButton" src="images/nav/ic_play_arrow_white_24dp_2x.png" title="Play" />
-        <img id="NavigateRefresh" class="navButton" src="images/nav/ic_refresh_white_24dp_2x.png" title="Refresh" />
+			</div>
-      </div>
+			<div id="divTwcBottomMiddle">
+				<img id="NavigateRefresh" class="navButton" src="images/nav/ic_refresh_white_24dp_2x.png" title="Refresh" />
+			</div>
       <div id="divTwcBottomRight">
 				<div id="ToggleMedia">
 					<img class="navButton off" src="images/nav/ic_volume_off_white_24dp_2x.png" title="Unmute" />
@@ -152,41 +155,42 @@
     </div>
   </div>
 
-	<br />
+  <div class="content-wrapper">
+    <br />
 
-  <div class="info">
+    <div class="info">
-    <a href="https://github.com/netbymatt/ws4kp#weatherstar-4000">More information</a>
+      <a href="https://github.com/netbymatt/ws4kp#weatherstar-4000">More information</a>
+    </div>
+    <div class="media"></div>
+
+    <div class='heading'>Selected displays</div>
+    <div id='enabledDisplays'>
+
+    </div>
+
+    <div class='heading'>Settings</div>
+    <div id='settings'>
+    </div>
+
+    <div class='heading'>Sharing</div>
+    <div class='info'>
+      <a href='' id='share-link'>Copy Permalink</a> <span id="share-link-copied">Link copied to clipboard!</span>
+      <div id="share-link-instructions">
+        Copy this long URL:
+        <input type='text' id="share-link-url">
+      </div>
+    </div>
+
+    <div class='heading'>Forecast Information</div>
+    <div id="divInfo">
+      Location: <span id="spanCity"></span> <span id="spanState"></span><br />
+      Station Id: <span id="spanStationId"></span><br />
+      Radar Id: <span id="spanRadarId"></span><br />
+      Zone Id: <span id="spanZoneId"></span><br />
+      Music: <span id="musicTrack">Not playing</span><br />
+      Ws4kp Version: <span><%- version %></span>
+    </div>
   </div>
-	<div class="media"></div>
-
-	<div class='heading'>Selected displays</div>
-	<div id='enabledDisplays'>
-
-	</div>
-
-	<div class='heading'>Settings</div>
-	<div id='settings'>
-	</div>
-
-	<div class='heading'>Sharing</div>
-	<div class='info'>
-		<a href='' id='share-link'>Copy Permalink</a> <span id="share-link-copied">Link copied to clipboard!</span>
-		<div id="share-link-instructions">
-			Copy this long URL:
-			<input type='text' id="share-link-url">
-		</div>
-	</div>
-	</div>
-
-	<div class='heading'>Forecast Information</div>
-	<div id="divInfo">
-		Location: <span id="spanCity"></span> <span id="spanState"></span><br />
-		Station Id: <span id="spanStationId"></span><br />
-		Radar Id: <span id="spanRadarId"></span><br />
-		Zone Id: <span id="spanZoneId"></span><br />
-		Music: <span id="musicTrack">Not playing</span><br />
-		Ws4kp Version: <span><%- version %></span>
-	</div>
 
 </body>
 

views/partials/almanac.ejs

@@ -1,21 +1,15 @@
 <%- include('header.ejs', {title:'Almanac', hasTime: true}) %>
 <div class="main has-scroll almanac">
   <div class="sun">
-    <div class="days">
+    <div class="grid-item empty"></div>
-      <div class="day"></div>
+    <div class="grid-item header day-1"></div>
-      <div class="day day-1">Monday</div>
+    <div class="grid-item header day-2"></div>
-      <div class="day day-2">Tuesday</div>
+    <div class="grid-item row-label">Sunrise:</div>
-    </div>
+    <div class="grid-item time rise-1"></div>
-    <div class="times times-1">
+    <div class="grid-item time rise-2"></div>
-      <div class="name">Sunrise:</div>
+    <div class="grid-item row-label">Sunset:</div>
-      <div class="sun-time rise-1">6:24 am</div>
+    <div class="grid-item time set-1"></div>
-      <div class="sun-time rise-2">6:25 am</div>
+    <div class="grid-item time set-2"></div>
-    </div>
-    <div class="times times-2">
-      <div class="name">Sunset:</div>
-      <div class="sun-time set-1">6:24 am</div>
-      <div class="sun-time set-2">6:25 am</div>
-    </div>
   </div>
   <div class="moon">
     <div class="title">Moon Data:</div>
@@ -28,4 +22,4 @@
     </div>
   </div>
 </div>
-<%- include('scroll.ejs') %>
+<%- include('scroll.ejs') %>