add hazards

server/styles/scss/_hazards.scss

@@ -0,0 +1,27 @@
+@use 'shared/_colors'as c;
+@use 'shared/_utils'as u;
+
+.weather-display .main.hazards {
+	&.main {
+		overflow-y: hidden;
+
+		.hazard-lines {
+			min-height: 400px;
+			padding-top: 10px;
+
+			background-color: rgb(112, 35, 35);
+
+			.hazard {
+				font-family: 'Star4000';
+				font-size: 24pt;
+				color: white;
+				@include u.text-shadow(0px);
+				position: relative;
+				text-transform: uppercase;
+				margin-top: 110px;
+				margin-left: 80px;
+				margin-right: 80px;
+			}
+		}
+	}
+}

server/styles/scss/_page.scss

@@ -326,6 +326,14 @@ button {
 		display: block;
 		max-width: 300px;
 
+		.alert {
+			display: none;
+
+			&.show {
+				display: inline;
+				color: red;
+			}
+		}
 	}
 }
 

server/styles/scss/_weather-display.scss

@@ -96,6 +96,10 @@
 			width: 640px;
 			height: 310px;
 			overflow: hidden;
+
+			&.no-header {
+				height: 400px;
+			}
 		}
 
 		&.has-box {

server/styles/scss/main.scss

@@ -10,4 +10,5 @@
 @import 'progress';
 @import 'radar';
 @import 'regional-forecast';
-@import 'almanac';
+@import 'almanac';
+@import 'hazards';