better handling of css on "blue box" screens

This commit is contained in:
Matt Walsh 2022-08-03 16:32:13 -05:00
parent 1ee15f38ee
commit 332f8f8d2f
6 changed files with 25 additions and 10 deletions

View file

@ -74,11 +74,19 @@
.weather-display .header .date-time.date {
padding-top: 22px;
}
.weather-display .main {
position: relative;
}
.weather-display .main.has-scroll {
width: 640px;
height: 310px;
overflow: hidden;
}
.weather-display .main.has-box {
margin-left: 64px;
margin-right: 64px;
width: calc(100% - 128px);
}
.weather-display .scroll {
width: 640px;
height: 80px;
@ -177,18 +185,17 @@
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;
right: 0px;
font-family: "Star4000 Large";
font-size: 20px;
font-weight: bold;
}
#current-weather-html.weather-display .main .col.right .row {
margin-bottom: 16px;
margin-bottom: 12px;
}
#current-weather-html.weather-display .main .col.right .row .label,
#current-weather-html.weather-display .main .col.right .row .value {

View file

@ -1 +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"}
{"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"}

View file

@ -14,20 +14,19 @@
@include u.text-shadow();
&.left {
left: 65px;
font-family: 'Star4000 Extended';
font-size: 24pt;
}
&.right {
right: 65px;
right: 0px;
font-family: 'Star4000 Large';
font-size: 20px;
font-weight: bold;
.row {
margin-bottom: 16px;
margin-bottom: 12px;
.label,
.value {

View file

@ -51,13 +51,14 @@
}
}
.logo {
top: 30px;
left: 50px;
position: absolute;
z-index: 10;
}
.noaa-logo {
position: absolute;
top: 39px;
@ -86,11 +87,19 @@
}
.main {
position: relative;
&.has-scroll {
width: 640px;
height: 310px;
overflow: hidden;
}
&.has-box {
margin-left: 64px;
margin-right: 64px;
width: calc(100% - 128px);
}
}

View file

@ -100,7 +100,7 @@
<div id="hourly-html" class="weather-display">
<%- include('partials/hourly.ejs') %>
</div>
<div id="current-weather-html" class="weather-display show">
<div id="current-weather-html" class="weather-display">
<%- include('partials/current-weather.ejs') %>
</div>
</div>

View file

@ -1,5 +1,5 @@
<%- include('header.ejs', {titleDual:{ top: 'Current' , bottom: 'Conditions' }, noaaLogo: true}) %>
<div class="main has-scroll current-weather">
<div class="main has-scroll has-box current-weather">
<div class="weather template">
<div class="left col">
<div class="temp center"></div>