add hourly graph

server/styles/scss/_hourly-graph.scss

@@ -0,0 +1,150 @@
+@use 'shared/_colors'as c;
+@use 'shared/_utils'as u;
+
+#hourly-graph-html {
+	background-image: url(../images/BackGround1_1_Chart.png);
+
+	.header {
+		.right {
+			position: absolute;
+			top: 35px;
+			right: 60px;
+			width: 360px;
+			font-family: 'Star4000 Small';
+			font-size: 32px;
+			@include u.text-shadow();
+			text-align: right;
+
+			div {
+				margin-top: -18px;
+			}
+
+			.temperature {
+				color: red;
+			}
+
+			.cloud {
+				color: lightgrey;
+			}
+
+			.rain {
+				color: aqua;
+			}
+		}
+	}
+}
+
+.weather-display .main.hourly-graph {
+
+	&.main {
+		>div {
+			position: absolute;
+		}
+
+		.label {
+			font-family: 'Star4000 Small';
+			font-size: 24pt;
+			color: c.$column-header-text;
+			@include u.text-shadow();
+			margin-top: -15px;
+			position: absolute;
+		}
+
+		.x-axis {
+			bottom: 0px;
+			left: 0px;
+			width: 640px;
+			height: 20px;
+
+			.label {
+				text-align: center;
+				width: 50px;
+
+				&.l-1 {
+					left: 25px;
+				}
+
+				&.l-2 {
+					left: 158px;
+				}
+
+				&.l-3 {
+					left: 291px;
+				}
+
+				&.l-4 {
+					left: 424px;
+				}
+
+				&.l-5 {
+					left: 557px;
+				}
+			}
+
+
+
+		}
+
+		.chart {
+			top: 0px;
+			left: 50px;
+
+			canvas {
+				width: 532px;
+				height: 285px;
+			}
+		}
+
+		.y-axis {
+			top: 0px;
+			left: 0px;
+			width: 50px;
+			height: 285px;
+
+			.label {
+				text-align: right;
+				right: 0px;
+
+				&.l-1 {
+					top: 0px;
+				}
+
+				&.l-2 {
+					top: 140px;
+				}
+
+				&.l-3 {
+					bottom: 0px;
+				}
+			}
+		}
+
+		.column-headers {
+			background-color: c.$column-header;
+			height: 20px;
+			position: absolute;
+			width: 100%;
+		}
+
+		.column-headers {
+			position: sticky;
+			top: 0px;
+			z-index: 5;
+
+
+			.temp {
+				left: 355px;
+			}
+
+			.like {
+				left: 435px;
+			}
+
+			.wind {
+				left: 535px;
+			}
+		}
+
+
+	}
+}

server/styles/scss/_page.scss

@@ -269,12 +269,6 @@ jsgif {
 	font-size: 18pt;
 }
 
-#container canvas {
-	/* position: absolute; */
-	width: 100%;
-	/* max-width: 640px; */
-}
-
 .heading {
 	font-weight: bold;
 	margin-top: 15px;

server/styles/scss/main.scss

@@ -3,6 +3,7 @@
 @import 'current-weather';
 @import 'extended-forecast';
 @import 'hourly';
+@import 'hourly-graph';
 @import 'travel';
 @import 'latest-observations';
 @import 'local-forecast';