mirror of
https://github.com/netbymatt/ws4kp.git
synced 2026-04-22 11:39:30 -07:00
more html
This commit is contained in:
Matt Walsh
8
server/styles/scss/_colors.scss
Normal file
8
server/styles/scss/_colors.scss
Normal file
@@ -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;
|
||||
97
server/styles/scss/_current-weather.scss
Normal file
97
server/styles/scss/_current-weather.scss
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
95
server/styles/scss/_hourly.scss
Normal file
95
server/styles/scss/_hourly.scss
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
17
server/styles/scss/_utils.scss
Normal file
17
server/styles/scss/_utils.scss
Normal file
@@ -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;
|
||||
}
|
||||
103
server/styles/scss/_weatherdisplay.scss
Normal file
103
server/styles/scss/_weatherdisplay.scss
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
3
server/styles/scss/compiled.scss
Normal file
3
server/styles/scss/compiled.scss
Normal file
@@ -0,0 +1,3 @@
|
||||
@use '_weatherdisplay';
|
||||
@use '_hourly';
|
||||
@use '_current-weather';
|
||||
Reference in New Issue
Block a user