better background and wide screen for hazard displays

server/scripts/modules/currentweatherscroll.mjs

@@ -97,6 +97,12 @@ const drawScreen = async () => {
 		if (elem.parentElement.id === 'progress-html') return;
 		thisScreen?.classes?.forEach((cls) => elem.classList.add(cls));
 	});
+	// special case for red background on hazard scroll
+	const mainScrollBg = document.getElementById('scroll-bg');
+	mainScrollBg.className = '';
+	if (thisScreen?.classes?.includes('hazard')) {
+		mainScrollBg.classList.add('hazard');
+	}
 
 	if (typeof thisScreen === 'string') {
 		// only a string

server/styles/scss/_hazards.scss

@@ -1,12 +1,17 @@
 @use 'shared/_colors'as c;
 @use 'shared/_utils'as u;
 
+#hazards-html.weather-display {
+	background-image: url('../images/backgrounds/7.png');
+}
+
 .weather-display .main.hazards {
 	&.main {
 		overflow-y: hidden;
 		height: 480px;
 		background-color: rgb(112, 35, 35);
 
+
 		.hazard-lines {
 			min-height: 400px;
 			padding-top: 10px;
@@ -26,3 +31,7 @@
 		}
 	}
 }
+
+.wide.hazards #container {
+	background: url(../images/backgrounds/7-wide.png);
+}

server/styles/scss/_page.scss

@@ -161,6 +161,7 @@ body {
 #divTwcMain {
 	width: 640px;
 	height: 480px;
+	position: relative;
 
 	.wide & {
 		width: 854px;

server/styles/scss/_weather-display.scss

@@ -116,9 +116,11 @@
 	.scroll {
 		@include u.text-shadow(3px, 1.5px);
 		width: 640px;
-		height: 70px;
+		height: 77px;
 		overflow: hidden;
 		margin-top: 3px;
+		position: relative;
+		z-index: 1;
 
 		&.hazard {
 			background-color: rgb(112, 35, 35);
@@ -159,3 +161,18 @@
 
 	}
 }
+
+#scroll-bg {
+	position: absolute;
+	bottom: 0px;
+	height: 77px;
+	width: 640px;
+
+	&.hazard {
+		background-color: rgb(112, 35, 35);
+	}
+}
+
+.wide #scroll-bg {
+	width: 854px;
+}

views/index.ejs

@@ -134,6 +134,7 @@
           <%- include('partials/hazards.ejs') %>
         </div>
       </div>
+			<div id="scroll-bg"></div>
     </div>
     <div id="divTwcBottom">
       <div id="divTwcBottomLeft">