more html

server/styles/compiled.css

@@ -0,0 +1,237 @@
+.weather-display {
+  width: 640px;
+  height: 480px;
+  overflow: hidden;
+  position: relative;
+  background-image: url(../images/BackGround1_1.png);
+  display: none;
+}
+.weather-display.show {
+  display: block;
+}
+.weather-display .template {
+  display: none;
+}
+.weather-display .header {
+  width: 640px;
+  height: 60px;
+  padding-top: 30px;
+}
+.weather-display .header .title {
+  color: yellow;
+  /* eventually, when chrome supports paint-order for html elements */
+  /* -webkit-text-stroke: 2px black; */
+  /* paint-order: stroke fill; */
+  text-shadow: 3px 3px 0 black, -1.5px -1.5px 0 black, 0 -1.5px 0 black, 1.5px -1.5px 0 black, 1.5px 0 0 black, 1.5px 1.5px 0 black, 0 1.5px 0 black, -1.5px 1.5px 0 black, -1.5px 0 0 black;
+  font-family: "Star4000";
+  font-size: 24pt;
+  position: absolute;
+}
+.weather-display .header .title.single {
+  left: 170px;
+  top: 25px;
+}
+.weather-display .header .title.dual {
+  left: 170px;
+}
+.weather-display .header .title.dual > div {
+  position: absolute;
+}
+.weather-display .header .title.dual .top {
+  top: -3px;
+}
+.weather-display .header .title.dual .bottom {
+  top: 26px;
+}
+.weather-display .header .logo {
+  top: 30px;
+  left: 50px;
+  position: absolute;
+  z-index: 10;
+}
+.weather-display .header .noaa-logo {
+  position: absolute;
+  top: 39px;
+  left: 356px;
+}
+.weather-display .header .title.single {
+  top: 40px;
+}
+.weather-display .header .date-time {
+  white-space: pre;
+  color: white;
+  font-family: "Star4000 Small";
+  font-size: 24pt;
+  /* eventually, when chrome supports paint-order for html elements */
+  /* -webkit-text-stroke: 2px black; */
+  /* paint-order: stroke fill; */
+  text-shadow: 3px 3px 0 black, -1.5px -1.5px 0 black, 0 -1.5px 0 black, 1.5px -1.5px 0 black, 1.5px 0 0 black, 1.5px 1.5px 0 black, 0 1.5px 0 black, -1.5px 1.5px 0 black, -1.5px 0 0 black;
+  left: 415px;
+  width: 170px;
+  text-align: right;
+  position: absolute;
+}
+.weather-display .header .date-time.date {
+  padding-top: 22px;
+}
+.weather-display .main.has-scroll {
+  width: 640px;
+  height: 310px;
+  overflow: hidden;
+}
+.weather-display .scroll {
+  width: 640px;
+  height: 80px;
+  overflow: hidden;
+  margin-top: 10px;
+}
+
+#hourly-html.weather-display .main {
+  overflow-y: hidden;
+}
+#hourly-html.weather-display .main .column-headers {
+  background-color: rgb(32, 0, 87);
+  height: 20px;
+  position: absolute;
+  width: 100%;
+}
+#hourly-html.weather-display .main .column-headers {
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0px;
+  z-index: 5;
+}
+#hourly-html.weather-display .main .column-headers div {
+  display: inline-block;
+  font-family: "Star4000 Small";
+  font-size: 24pt;
+  color: yellow;
+  position: absolute;
+  top: -14px;
+  z-index: 5;
+  /* eventually, when chrome supports paint-order for html elements */
+  /* -webkit-text-stroke: 2px black; */
+  /* paint-order: stroke fill; */
+  text-shadow: 3px 3px 0 black, -1.5px -1.5px 0 black, 0 -1.5px 0 black, 1.5px -1.5px 0 black, 1.5px 0 0 black, 1.5px 1.5px 0 black, 0 1.5px 0 black, -1.5px 1.5px 0 black, -1.5px 0 0 black;
+}
+#hourly-html.weather-display .main .column-headers .temp {
+  left: 370px;
+}
+#hourly-html.weather-display .main .column-headers .like {
+  left: 450px;
+}
+#hourly-html.weather-display .main .column-headers .wind {
+  left: 560px;
+}
+#hourly-html.weather-display .main .hourly-lines {
+  min-height: 338px;
+  padding-top: 10px;
+  background: repeating-linear-gradient(0deg, #001040 0px, #102080 136px, #102080 202px, #001040 338px);
+}
+#hourly-html.weather-display .main .hourly-lines .hourly-row {
+  font-family: "Star4000 Large";
+  font-size: 24pt;
+  height: 72px;
+  color: yellow;
+  /* eventually, when chrome supports paint-order for html elements */
+  /* -webkit-text-stroke: 2px black; */
+  /* paint-order: stroke fill; */
+  text-shadow: 3px 3px 0 black, -1.5px -1.5px 0 black, 0 -1.5px 0 black, 1.5px -1.5px 0 black, 1.5px 0 0 black, 1.5px 1.5px 0 black, 0 1.5px 0 black, -1.5px 1.5px 0 black, -1.5px 0 0 black;
+  position: relative;
+}
+#hourly-html.weather-display .main .hourly-lines .hourly-row > div {
+  position: absolute;
+  white-space: pre;
+  top: 8px;
+}
+#hourly-html.weather-display .main .hourly-lines .hourly-row .hour {
+  left: 50px;
+}
+#hourly-html.weather-display .main .hourly-lines .hourly-row .icon {
+  left: 280px;
+  width: 70px;
+  text-align: center;
+  top: unset;
+}
+#hourly-html.weather-display .main .hourly-lines .hourly-row .temp {
+  left: 370px;
+}
+#hourly-html.weather-display .main .hourly-lines .hourly-row .like {
+  left: 450px;
+}
+#hourly-html.weather-display .main .hourly-lines .hourly-row .wind {
+  left: 530px;
+  width: 100px;
+  text-align: right;
+}
+
+#current-weather-html.weather-display .main .col {
+  height: 50px;
+  width: 255px;
+  display: inline-block;
+  margin-top: 10px;
+  position: absolute;
+  /* eventually, when chrome supports paint-order for html elements */
+  /* -webkit-text-stroke: 2px black; */
+  /* paint-order: stroke fill; */
+  text-shadow: 3px 3px 0 black, -1.5px -1.5px 0 black, 0 -1.5px 0 black, 1.5px -1.5px 0 black, 1.5px 0 0 black, 1.5px 1.5px 0 black, 0 1.5px 0 black, -1.5px 1.5px 0 black, -1.5px 0 0 black;
+}
+#current-weather-html.weather-display .main .col.left {
+  left: 65px;
+  font-family: "Star4000 Extended";
+  font-size: 24pt;
+}
+#current-weather-html.weather-display .main .col.right {
+  right: 65px;
+  font-family: "Star4000 Large";
+  font-size: 20px;
+  font-weight: bold;
+}
+#current-weather-html.weather-display .main .col.right .row {
+  margin-bottom: 8px;
+}
+#current-weather-html.weather-display .main .col.right .row .label,
+#current-weather-html.weather-display .main .col.right .row .value {
+  display: inline-block;
+}
+#current-weather-html.weather-display .main .col.right .row .label {
+  margin-left: 20px;
+}
+#current-weather-html.weather-display .main .col.right .row .value {
+  float: right;
+  margin-right: 10px;
+}
+#current-weather-html.weather-display .main .center {
+  text-align: center;
+}
+#current-weather-html.weather-display .main .temp {
+  font-family: "Star4000 Large";
+  font-size: 24pt;
+}
+#current-weather-html.weather-display .main .icon {
+  height: 100px;
+}
+#current-weather-html.weather-display .main .icon img {
+  max-width: 126px;
+}
+#current-weather-html.weather-display .main .wind-container {
+  margin-bottom: 10px;
+}
+#current-weather-html.weather-display .main .wind-container > div {
+  width: 45%;
+  display: inline-block;
+  margin: 0px;
+}
+#current-weather-html.weather-display .main .wind-container .wind-label {
+  margin-left: 5px;
+}
+#current-weather-html.weather-display .main .wind-container .wind {
+  text-align: right;
+}
+#current-weather-html.weather-display .main .wind-gusts {
+  margin-left: 5px;
+}
+#current-weather-html.weather-display .main .location {
+  color: yellow;
+  margin-bottom: 10px;
+}/*# sourceMappingURL=compiled.css.map */

server/styles/compiled.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["scss/_weatherdisplay.scss","compiled.css","scss/_colors.scss","scss/_utils.scss","scss/_hourly.scss","scss/_current-weather.scss"],"names":[],"mappings":"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","file":"compiled.css"}

server/styles/scss/_colors.scss

@@ -0,0 +1,8 @@
+$title-color: yellow;
+$date-time: white;
+$text-shadow: black;
+$column-header-text: yellow;
+$column-header: rgb(32, 0, 87);
+
+$gradient-main-background-1: #102080;
+$gradient-main-background-2: #001040;

server/styles/scss/_current-weather.scss

@@ -0,0 +1,97 @@
+@use 'colors'as c;
+@use 'utils'as u;
+
+#current-weather-html.weather-display {
+	.main {
+
+		.col {
+			height: 50px;
+			width: 255px;
+			display: inline-block;
+			margin-top: 10px;
+			position: absolute;
+
+			@include u.text-shadow();
+
+			&.left {
+				left: 65px;
+				font-family: 'Star4000 Extended';
+				font-size: 24pt;
+
+			}
+
+			&.right {
+				right: 65px;
+				font-family: 'Star4000 Large';
+				font-size: 20px;
+				font-weight: bold;
+
+				.row {
+					margin-bottom: 8px;
+
+					.label,
+					.value {
+						display: inline-block;
+					}
+
+					.label {
+						margin-left: 20px;
+					}
+
+					.value {
+						float: right;
+						margin-right: 10px;
+					}
+
+				}
+
+			}
+		}
+
+		.center {
+			text-align: center;
+		}
+
+		.temp {
+			font-family: 'Star4000 Large';
+			font-size: 24pt;
+		}
+
+		.condition {}
+
+		.icon {
+			height: 100px;
+
+			img {
+				max-width: 126px;
+			}
+		}
+
+		.wind-container {
+			margin-bottom: 10px;
+
+			&>div {
+				width: 45%;
+				display: inline-block;
+				margin: 0px;
+			}
+
+			.wind-label {
+				margin-left: 5px;
+			}
+
+			.wind {
+				text-align: right;
+			}
+		}
+
+		.wind-gusts {
+			margin-left: 5px;
+		}
+
+		.location {
+			color: c.$title-color;
+			margin-bottom: 10px;
+		}
+	}
+}

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;
+				}
+			}
+		}
+	}
+}

server/styles/scss/_utils.scss

@@ -0,0 +1,17 @@
+@use 'colors'as c;
+
+@mixin text-shadow($offset: 3px, $outline: 1.5px) {
+	/* eventually, when chrome supports paint-order for html elements */
+	/* -webkit-text-stroke: 2px black; */
+	/* paint-order: stroke fill; */
+	text-shadow:
+		$offset $offset 0 c.$text-shadow,
+		(-$outline) (-$outline) 0 c.$text-shadow,
+		0 (-$outline) 0 c.$text-shadow,
+		$outline (-$outline) 0 c.$text-shadow,
+		$outline 0 0 c.$text-shadow,
+		$outline $outline 0 c.$text-shadow,
+		0 $outline 0 c.$text-shadow,
+		(-$outline) $outline 0 c.$text-shadow,
+		(-$outline) 0 0 c.$text-shadow;
+}

server/styles/scss/_weatherdisplay.scss

@@ -0,0 +1,103 @@
+@use 'colors'as c;
+@use 'utils'as u;
+
+.weather-display {
+	width: 640px;
+	height: 480px;
+	overflow: hidden;
+	position: relative;
+	background-image: url(../images/BackGround1_1.png);
+	display: none;
+
+	&.show {
+		display: block;
+	}
+
+	.template {
+		display: none;
+	}
+
+	.header {
+		width: 640px;
+		height: 60px;
+		padding-top: 30px;
+
+		.title {
+			color: c.$title-color;
+			@include u.text-shadow(3px, 1.5px);
+			font-family: 'Star4000';
+			font-size: 24pt;
+			position: absolute;
+
+			&.single {
+				left: 170px;
+				top: 25px;
+			}
+
+			&.dual {
+				left: 170px;
+
+				&>div {
+					position: absolute;
+				}
+
+				.top {
+					top: -3px;
+				}
+
+				.bottom {
+					top: 26px;
+				}
+			}
+
+		}
+		
+		.logo {
+			top: 30px;
+			left: 50px;
+			position: absolute;
+			z-index: 10;
+		}
+		.noaa-logo {
+			position: absolute;
+			top: 39px;
+			left: 356px;
+		}
+
+		.title.single {
+			top: 40px;
+		}
+
+		.date-time {
+			white-space: pre;
+			color: c.$date-time;
+			font-family: 'Star4000 Small';
+			font-size: 24pt;
+			@include u.text-shadow(3px, 1.5px);
+			left: 415px;
+			width: 170px;
+			text-align: right;
+			position: absolute;
+
+			&.date {
+				padding-top: 22px;
+			}
+		}
+	}
+
+	.main {
+		&.has-scroll {
+			width: 640px;
+			height: 310px;
+			overflow: hidden;
+		}
+	}
+
+
+	.scroll {
+		width: 640px;
+		height: 80px;
+		overflow: hidden;
+		margin-top: 10px;
+	}
+}

server/styles/scss/compiled.scss

@@ -0,0 +1,3 @@
+@use '_weatherdisplay';
+@use '_hourly';
+@use '_current-weather';

server/styles/weatherdisplay.css

@@ -1,61 +0,0 @@
-.weather-display {
-	width: 640px;
-	height: 480px;
-	overflow: hidden;
-	position: relative;
-	background-image: url(../images/BackGround1_1.png);
-	/* background-attachment: fixed; */
-}
-
-.weather-display .header {
-	width: 640px;
-	height: 70px;
-	padding-top: 30px;
-}
-
-.weather-display .header .title {
-	color: yellow;
-	text-shadow: 3px 3px black;
-	font-family: 'Star4000';
-	font-size: 24pt;
-	position: absolute;
-	left: 170px;
-	top: 25px;
-}
-
-.weather-display .header .logo {
-	top: 30px;
-	left: 50px;
-	position: absolute; 
-}
-
-.weather-display .header .title.single {
-	top: 40px;
-}
-
-.weather-display .header .date-time {
-	white-space: pre;
-	color: white;
-	font-family: 'Star4000 Small';
-	font-size: 24pt;
-	text-shadow: 2px 2px black;
-	left: 430px;
-	position: absolute;
-}
-.weather-display .header .date-time#date {
-	padding-top: 22px;
-}
-
-
-.weather-display .main-has-scroll {
-	width: 640px;
-	height: 310px;
-	overflow: hidden;
-}
-
-.weather-display .scroll {
-	width: 640px;
-	height: 80px;
-	overflow: hidden;
-}
-