css constants cleanup

This commit is contained in:
Matt Walsh
2026-04-06 00:06:01 -05:00
parent 9f6b90919c
commit b2a424a64f
6 changed files with 24 additions and 20 deletions

View File

@@ -1,5 +1,6 @@
@use 'shared/_colors'as c; @use 'shared/_colors'as c;
@use 'shared/_utils'as u; @use 'shared/_utils'as u;
@use 'shared/positions'as p;
#hazards-html.weather-display { #hazards-html.weather-display {
background-image: url('../images/backgrounds/7.png'); background-image: url('../images/backgrounds/7.png');
@@ -8,7 +9,7 @@
.weather-display .main.hazards { .weather-display .main.hazards {
&.main { &.main {
overflow-y: hidden; overflow-y: hidden;
height: 480px; height: p.$standard-height;
background-color: rgb(112, 35, 35); background-color: rgb(112, 35, 35);

View File

@@ -34,7 +34,7 @@ body {
} }
#divQuery { #divQuery {
max-width: 640px; max-width: p.$standard-width;
padding: 8px; padding: 8px;
.buttons { .buttons {
@@ -147,11 +147,11 @@ body {
background-color: #000000; background-color: #000000;
color: #ffffff; color: #ffffff;
width: 100%; width: 100%;
max-width: 640px; max-width: p.$standard-width;
margin: 0; // Ensure edge-to-edge display margin: 0; // Ensure edge-to-edge display
&.wide { &.wide {
max-width: 854px; max-width: p.$wide-width;
} }
} }
@@ -160,12 +160,12 @@ body {
} }
#divTwcMain { #divTwcMain {
width: 640px; width: p.$standard-width;
height: 480px; height: p.$standard-height;
position: relative; position: relative;
.wide & { .wide & {
width: 854px; width: p.$wide-width;
} }
} }
@@ -210,10 +210,10 @@ body {
background-color: #000000; background-color: #000000;
color: #ffffff; color: #ffffff;
width: 640px; width: p.$standard-width;
.wide & { .wide & {
width: 854px; width: p.$wide-width;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
@@ -275,7 +275,7 @@ body {
flex-direction: row; flex-direction: row;
background-color: #000000; background-color: #000000;
color: #ffffff; color: #ffffff;
max-width: 640px; max-width: p.$standard-width;
} }
#divTwcNav>div { #divTwcNav>div {
@@ -337,8 +337,8 @@ body {
#container { #container {
position: relative; position: relative;
width: 640px; width: p.$standard-width;
height: 480px; height: p.$standard-height;
// overflow: hidden; // overflow: hidden;
background-image: url(../images/backgrounds/1.png); background-image: url(../images/backgrounds/1.png);
transform-origin: 0 0; transform-origin: 0 0;
@@ -359,8 +359,8 @@ body {
} }
#loading { #loading {
width: 640px; width: p.$standard-width;
height: 480px; height: p.$standard-height;
max-width: 100%; max-width: 100%;
text-shadow: 4px 4px black; text-shadow: 4px 4px black;
display: flex; display: flex;

View File

@@ -17,7 +17,7 @@
top: 15px; top: 15px;
margin: 0px 10px; margin: 0px 10px;
box-sizing: border-box; box-sizing: border-box;
height: 310px; height: p.$standard-scroll-height;
overflow: hidden; overflow: hidden;
line-height: 28px; line-height: 28px;

View File

@@ -122,7 +122,7 @@
&.has-scroll { &.has-scroll {
width: p.$standard-width; width: p.$standard-width;
margin-top: 0; margin-top: 0;
height: 310px; height: p.$standard-scroll-height;
overflow: hidden; overflow: hidden;
&.no-header { &.no-header {
@@ -132,8 +132,8 @@
} }
&.has-box { &.has-box {
margin-left: 64px; margin-left: p.$blue-box-margin;
margin-right: 64px; margin-right: p.$blue-box-margin;
width: calc(100% - 128px); width: calc(100% - 128px);
} }
@@ -198,7 +198,7 @@
} }
.wide #container>.scroll { .wide #container>.scroll {
width: 854px; width: p.$wide-width;
margin-left: -1*p.$wide-margin; margin-left: -1*p.$wide-margin;
.scroll-container { .scroll-container {

View File

@@ -2,6 +2,9 @@
$standard-width: 640px; $standard-width: 640px;
$standard-height: 480px; $standard-height: 480px;
// height with scroll
$standard-scroll-height: 310px;
// blue box size // blue box size
$blue-box-margin: 64px; $blue-box-margin: 64px;

File diff suppressed because one or more lines are too long