Improve screen layout for themes + Radar layout adjustments

server/scripts/modules/currentweather.mjs

@@ -45,11 +45,15 @@ class CurrentWeather extends WeatherDisplay {
 		const wind = this.data.WindSpeed > 0
 			? this.data.WindDirection.padEnd(3, '') + this.data.WindSpeed.toString().padStart(3, ' ')
 			: 'Calm';
+		const isDefaultTheme = (document.documentElement.dataset.theme ?? 'default') === 'default';
+		const windText = !isDefaultTheme && this.data.WindGust > 0
+			? `${wind} - Gusts to ${this.data.WindGust}`
+			: wind;
 
 		const fill = {
 			temp: this.data.Temperature + String.fromCharCode(176),
 			condition,
-			wind,
+			wind: windText,
 			location: this.data.city.substr(0, 20),
 			humidity: `${this.data.Humidity}%`,
 			dewpoint: this.data.DewPoint + String.fromCharCode(176),
@@ -59,7 +63,7 @@ class CurrentWeather extends WeatherDisplay {
 			icon: { type: 'img', src: this.data.Icon },
 		};
 
-		if (this.data.WindGust > 0) fill['wind-gusts'] = `Gusts to ${this.data.WindGust}`;
+		if (isDefaultTheme && this.data.WindGust > 0) fill['wind-gusts'] = `Gusts to ${this.data.WindGust}`;
 
 		const area = this.elem.querySelector('.main');
 		area.innerHTML = '';

server/scripts/modules/utils/theme.mjs

@@ -57,6 +57,7 @@ const getThemeAssetUrl = (themeName, assetKey) => {
 const applyTheme = (themeName) => {
 	const selectedTheme = getAvailableThemes().includes(themeName) ? themeName : DEFAULT_THEME;
 	localStorage.setItem(THEME_STORAGE_KEY, selectedTheme);
+	document.documentElement.dataset.theme = selectedTheme;
 
 	document.documentElement.style.setProperty('--theme-background-1', `url('${getThemeAssetUrl(selectedTheme, 'background1')}')`);
 	document.documentElement.style.setProperty('--theme-background-1-chart', `url('${getThemeAssetUrl(selectedTheme, 'background1Chart')}')`);

server/styles/scss/_current-weather.scss

@@ -23,7 +23,7 @@
 			&.right {
 				right: 0px;
 				font-family: "Star4000 Large";
-				font-size: 20px;
+				font-size: 18px;
 				font-weight: bold;
 				line-height: 24px;
 
@@ -93,3 +93,34 @@
 		}
 	}
 }
+
+:root[data-theme]:not([data-theme='default']) {
+	.weather-display .main.current-weather {
+		&.main {
+			.col {
+				&.left {
+					margin-top: 35px;
+				}
+
+				&.right {
+					margin-top: 36px;
+					padding: 21px;
+				}
+			}
+
+			.wind-container {
+				display: block;
+
+				&>div {
+					width: 50%;
+				}
+
+				.wind {
+					text-align: right;
+					font-size: 22px;
+					display: contents;
+				}
+			}
+		}
+	}
+}

server/styles/scss/_local-forecast.scss

@@ -23,4 +23,8 @@
 		min-height: 280px;
 		line-height: 40px;
 	}
-}
+}
+
+:root[data-theme]:not([data-theme='default']) .weather-display .local-forecast .forecasts {
+	margin-top: 16px;
+}

server/styles/scss/_radar.scss

@@ -49,9 +49,10 @@
 
 				.box {
 					display: block;
-					border: 2px solid black;
+					border: 2.7px solid #000;
-					width: 100%;
+					width: 90%;
-					height: 22px;
+					height: 12px;
+					margin-top: 4px;
 					padding: 0;
 				}
 
@@ -97,7 +98,7 @@
 				top: -20px;
 				font-family: 'Star4000 Small';
 				font-size: 18pt;
-				left: 130px;
+				left: 132px;
 			}
 		}
 	}

views/partials/current-weather.ejs

@@ -39,4 +39,4 @@
       </div>
     </div>
   </div>
-</div>
+</div>

views/partials/radar.ejs

@@ -23,7 +23,7 @@
 					</div>
 					<div class="item">
 						<div class="box box-3"></div>
-						<div class="label">LT RN</div>
+						<div class="label">LTRN</div>
 					</div>
 					<div class="item">
 						<div class="box box-4"></div>