more html

server/styles/scss/_hourly.scss

@@ -0,0 +1,95 @@
+@use 'colors'as c;
+@use 'utils'as u;
+
+#hourly-html.weather-display {
+	.main {
+		overflow-y: hidden;
+
+		.column-headers {
+			background-color: c.$column-header;
+			height: 20px;
+			position: absolute;
+			width: 100%;
+		}
+
+		.column-headers {
+			position: sticky;
+			top: 0px;
+			z-index: 5;
+
+			div {
+				display: inline-block;
+				font-family: 'Star4000 Small';
+				font-size: 24pt;
+				color: c.$column-header-text;
+				position: absolute;
+				top: -14px;
+				z-index: 5;
+				@include u.text-shadow();
+			}
+
+			.temp {
+				left: 370px;
+			}
+
+			.like {
+				left: 450px;
+			}
+
+			.wind {
+				left: 560px;
+			}
+		}
+
+		.hourly-lines {
+			min-height: 338px;
+			padding-top: 10px;
+
+			background: repeating-linear-gradient(0deg, c.$gradient-main-background-2 0px,
+					c.$gradient-main-background-1 136px,
+					c.$gradient-main-background-1 202px,
+					c.$gradient-main-background-2 338px,
+				);
+
+			.hourly-row {
+				font-family: 'Star4000 Large';
+				font-size: 24pt;
+				height: 72px;
+				color: c.$title-color;
+				@include u.text-shadow();
+				position: relative;
+
+				>div {
+					position: absolute;
+					white-space: pre;
+					top: 8px;
+				}
+
+				.hour {
+					left: 50px;
+				}
+
+				.icon {
+					left: 280px;
+					width: 70px;
+					text-align: center;
+					top: unset;
+				}
+
+				.temp {
+					left: 370px;
+				}
+
+				.like {
+					left: 450px;
+				}
+
+				.wind {
+					left: 530px;
+					width: 100px;
+					text-align: right;
+				}
+			}
+		}
+	}
+}