lastest observations in html

server/styles/scss/_latest-observations.scss

@@ -0,0 +1,72 @@
+@use 'colors'as c;
+@use 'utils'as u;
+
+.weather-display .latest-observations {
+
+	&.main {
+		overflow-y: hidden;
+
+		.column-headers {
+			height: 20px;
+			position: absolute;
+			width: 100%;
+		}
+
+		.column-headers {
+			top: 0px;
+
+			div {
+				display: inline-block;
+				font-family: 'Star4000 Small';
+				font-size: 24pt;
+				position: absolute;
+				top: -14px;
+				@include u.text-shadow();
+			}
+
+			.temp {
+				// hidden initially for english/metric switching
+				display: none;
+
+				&.show {
+					display: inline-block;
+				}
+			}
+		}
+
+		.temp {
+			left: 230px;
+		}
+
+		.weather {
+			left: 280px;
+		}
+
+		.wind {
+			left: 430px;
+		}
+
+		.observation-lines {
+			min-height: 338px;
+			padding-top: 10px;
+
+			.observation-row {
+				font-family: 'Star4000';
+				font-size: 24pt;
+				@include u.text-shadow();
+				position: relative;
+				height: 40px;
+
+				>div {
+					position: absolute;
+					top: 8px;
+				}
+
+				.wind {
+					white-space: pre;
+					text-align: right;
+				}
+			}
+		}
+	}
+}

server/styles/scss/_weatherdisplay.scss

@@ -24,8 +24,6 @@
 		height: 60px;
 		padding-top: 30px;
 
-
-
 		.title {
 			color: c.$title-color;
 			@include u.text-shadow(3px, 1.5px);
@@ -104,6 +102,7 @@
 			margin-right: 64px;
 			width: calc(100% - 128px);
 		}
+
 	}
 
 

server/styles/scss/compiled.scss

@@ -1,4 +1,5 @@
 @use '_weatherdisplay';
 @use '_hourly';
 @use '_current-weather';
-@use '_local-forecast';
+@use '_local-forecast';
+@use '_latest-observations';