eric/WeatherStar4000
1
0
Fork 0
mirror of https://github.com/netbymatt/ws4kp.git synced 2026-04-22 11:39:30 -07:00
Code Issues Packages Projects Releases Wiki Activity

hourly enhanced #188 #195 #196 #193 #194

Browse Source
This commit is contained in:
Matt Walsh
2026-04-05 23:58:50 -05:00
parent 778b7f4456
commit 9f6b90919c
16 changed files with 211 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
server/styles/scss/_current-weather.scss
View File

@@ -1,8 +1,10 @@
@use 'shared/_colors' as c;
@use 'shared/_utils' as u;
@use 'shared/_colors'as c;
@use 'shared/_utils'as u;
@use 'shared/positions'as p;
.weather-display .main.current-weather {
&.main {
width: calc(p.$standard-width - (2 * p.$blue-box-margin));
.col {
height: 50px;
@@ -17,7 +19,6 @@
&.left {
font-family: 'Star4000 Extended';
font-size: 24pt;
}
&.right {
@@ -92,4 +93,4 @@
text-wrap: nowrap;
}
}
}
}

83
server/styles/scss/_hourly-graph.scss
View File

@@ -4,6 +4,12 @@
#hourly-graph-html {
background-image: url(../images/backgrounds/1-chart.png);
// change background for wide-enhanced
.wide.enhanced & {
background-image: url(../images/backgrounds/1-chart-wide.png);
background-position-x: 0px;
}
.header {
.right {
position: absolute;
@@ -84,10 +90,51 @@
&.l-5 {
left: calc(532px / 4 * 4);
}
// adjust when enhanced
.wide.enhanced & {
&.l-1 {
left: 0px;
}
&.l-2 {
left: calc(726px / 6 * 1);
}
&.l-3 {
left: calc(726px / 6 * 2);
}
&.l-4 {
left: calc(726px / 6 * 3);
}
&.l-5 {
left: calc(726px / 6 * 4);
}
&.l-6 {
left: calc(726px / 6 * 5);
}
&.l-7 {
left: calc(726px / 6 * 6);
}
}
// only in wide + enhanced
&.l-6,
&.l-7 {
display: none;
.wide.enhanced & {
display: block;
}
}
}
}
.chart {
@@ -97,6 +144,11 @@
img {
width: 532px;
height: 285px;
// wide and enhanced
.wide.enhanced & {
width: 746px;
}
}
}
@@ -128,32 +180,5 @@
}
}
.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;
}
}
}
}

7
server/styles/scss/_local-forecast.scss
View File

@@ -1,7 +1,14 @@
@use 'shared/_colors'as c;
@use 'shared/_utils'as u;
@use 'shared/positions'as p;
.weather-display .local-forecast {
// clamp width to standard
&.main {
width: calc(p.$standard-width - (2 * p.$blue-box-margin));
}
.container {
position: relative;
top: 15px;

8
server/styles/scss/_page.scss
View File

@@ -1,5 +1,6 @@
@use 'shared/_utils'as u;
@use 'shared/_colors'as c;
@use 'shared/positions'as p;
@font-face {
font-family: "Star4000";
@@ -345,8 +346,7 @@ body {
}
.wide #container {
padding-left: 107px;
padding-right: 107px;
width: p.$wide-width;
background: url(../images/backgrounds/1-wide.png);
background-repeat: no-repeat;
}
@@ -368,6 +368,10 @@ body {
text-align: center;
justify-content: center;
.wide & {
margin-left: p.$wide-margin;
}
.title {
font-family: Star4000 Large;
font-size: 36px;

12
server/styles/scss/_progress.scss
View File

@@ -1,11 +1,17 @@
@use 'shared/_colors' as c;
@use 'shared/_utils' as u;
@use 'shared/_colors'as c;
@use 'shared/_utils'as u;
@use 'shared/positions'as p;
.weather-display .progress {
@include u.text-shadow();
font-family: 'Star4000 Extended';
font-size: 19pt;
// clamp width to standard
&.main {
width: calc(p.$standard-width - (2 * p.$blue-box-margin));
}
.container {
position: relative;
top: 15px;
@@ -118,4 +124,4 @@
transition: width 1s steps(6);
}
}
}
}

1
server/styles/scss/_spc-outlook.scss
View File

@@ -1,5 +1,6 @@
@use 'shared/_colors'as c;
@use 'shared/_utils'as u;
@use 'shared/positions'as p;
#spc-outlook-html.weather-display {
background-image: url('../images/backgrounds/6.png');

54
server/styles/scss/_weather-display.scss
View File

@@ -1,29 +1,43 @@
@use 'shared/_colors'as c;
@use 'shared/_utils'as u;
@use 'shared/positions'as p;
.weather-display {
width: 640px;
height: 480px;
width: p.$standard-width;
height: p.$standard-height;
overflow: hidden;
position: relative;
background-image: url(../images/backgrounds/1.png);
// adjust for wide
.wide & {
width: p.$wide-width;
background-position-x: p.$wide-margin;
background-repeat: no-repeat;
}
/* this method is required to hide blocks so they can be measured while off screen */
height: 0px;
&.show {
height: 480px;
height: p.$standard-height;
}
.template {
display: none;
}
.header {
width: 640px;
>.header {
width: p.$standard-width;
height: 60px;
position: relative;
padding-top: 30px;
// adjust for wide
.wide & {
left: p.$wide-margin;
}
.title {
color: c.$title-color;
@include u.text-shadow(3px, 1.5px);
@@ -92,8 +106,21 @@
.main {
position: relative;
// adjust for wide
.wide & {
left: p.$wide-margin;
}
// adjust for enhanced when possible
.wide.enhanced & {
&.can-enhance {
left: 0px;
width: p.$wide-width;
}
}
&.has-scroll {
width: 640px;
width: p.$standard-width;
margin-top: 0;
height: 310px;
overflow: hidden;
@@ -117,7 +144,7 @@
#container>.scroll {
display: none;
@include u.text-shadow(3px, 1.5px);
width: 640px;
width: p.$standard-width;
height: 77px;
overflow: hidden;
margin-top: 3px;
@@ -125,12 +152,17 @@
bottom: 0px;
z-index: 1;
// adjust for wide
.wide & {
left: p.$wide-margin;
}
&.hazard {
background-color: rgb(112, 35, 35);
}
.scroll-container {
width: 640px;
width: p.$standard-width;
.fixed,
.scroll-header {
@@ -156,7 +188,7 @@
position: relative;
// the following added by js code as it is dependent on the content of the element
// transition: left (x)s;
// left: calc((elem width) - 640px);
// left: calc((elem width) - p.$standard-width);
}
}
}
@@ -167,9 +199,9 @@
.wide #container>.scroll {
width: 854px;
margin-left: -107px;
margin-left: -1*p.$wide-margin;
.scroll-container {
margin-left: 107px;
margin-left: p.$wide-margin;
}
}

11
server/styles/scss/shared/_positions.scss Normal file
View File

@@ -0,0 +1,11 @@
// standard positioning
$standard-width: 640px;
$standard-height: 480px;
// blue box size
$blue-box-margin: 64px;
// wide screen positioning
$wide-padding: 107px;
$wide-margin: 107px;
$wide-width: 854px;