RandomHuman
/
Weatherscan
mirror of https://github.com/buffbears/Weatherscan.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Some bulletin and introslide design fixes

This commit is contained in:
BuildTools 2022-03-05 08:27:23 -05:00
parent e438ab25ca
commit 557680146b
3 changed files with 62 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
webroot/css/weatherscan.css
View File

@ -3470,26 +3470,30 @@ flex-direction: row;
transform: translate(0,0); transform: translate(0,0);
} }
.bulletin .frost-pane { .bulletin .frost-pane {
background: linear-gradient(to right, rgba(252, 85, 18, 1) 0, rgba(252, 85, 18, .45) 100%); background: linear-gradient(to right, rgba(224, 97, 47, .85) 0, rgba(252, 97, 47, .45) 100%);
z-index: 1; z-index: 1;
margin-top: 60px; margin-top: 60px;
} }
.bulletin .cityname { .bulletin .cityname {
font-family: Frutiger; font-family: Frutiger;
color: #d8c422; color: #d8c422;
font-size: 35px; font-size: 36px;
position: absolute; position: absolute;
left: 45px; left: 50px;
top: 15px; top: 16px;
transform: scale(105%,100%);
transform-origin: left;
} }
.bulletin .warnings { .bulletin .warnings {
font-family: 'Frutiger Bold Cn' font-family: 'Frutiger 57 condensed';
transform: scale(112.5%,100%);
transform-origin: left;
color: #fff; color: #fff;
font-size: 38px; font-size: 40px;
position: absolute; position: absolute;
left: 45px; left: 50px;
top: 66.5px; top: 62.5px;
line-height: 125%; line-height: 125%;
padding-right: 10px; padding-right: 10px;
font-stretch: condensed; font-stretch: condensed;
@ -3502,7 +3506,8 @@ a, body, div, h1, html, p {
padding: 0; padding: 0;
font-family: Frutiger; font-family: Frutiger;
font-weight: 400; font-weight: 400;
font-style: normal font-style: normal;
-webkit-font-smoothing: subpixel-antialiased;
} }
html * { html * {
@ -3973,6 +3978,8 @@ label{
text-shadow: 2px 2px 5px #000; text-shadow: 2px 2px 5px #000;
position: absolute; position: absolute;
min-width: 20%; min-width: 20%;
transform: scale(102.5%,100%);
transform-origin: left;
} }
.info-slide .info-subheader span { .info-slide .info-subheader span {
@ -4326,19 +4333,6 @@ label{
right: 98px; right: 98px;
font-stretch: semi-expanded; font-stretch: semi-expanded;
} }
.bulletin #subhead-noaa {
font-size: 21.5px;
font-weight: 700;
right: 98px;
font-stretch: semi-expanded;
font-style: italic;
color: #f6a67a;
font-family: Frutiger;
text-shadow: 0px 0px 0px #000;
line-height: 35px;
}
.info-slide-content { .info-slide-content {
height: 100%; height: 100%;
min-height: 100%; min-height: 100%;
@ -4710,12 +4704,14 @@ label{
.city-slide-intro .segment { .city-slide-intro .segment {
color: #fff; color: #fff;
font-family: Frutiger; font-family: Frutiger;
font-size: 52px; font-size: 57.5px;
text-shadow: #000 0px 0px 0px; text-shadow: #000 0px 0px 0px;
position: absolute; position: absolute;
text-align: left; text-align: left;
left: 130px; left: 140px;
bottom: 40px bottom: 38px;
transform: scale(106.5%,100%);
transform-origin: left;
} }
@keyframes citymarqueeweatherscan { @keyframes citymarqueeweatherscan {
0% {transform: translate(0, 0);} 0% {transform: translate(0, 0);}
@ -4725,11 +4721,11 @@ label{
.city-slide-intro .cityweatherscanmarquee { .city-slide-intro .cityweatherscanmarquee {
color: #fff; color: #fff;
font-family: Frutiger; font-family: Frutiger;
font-size: 24px; font-size: 25px;
opacity: .5; opacity: .5;
position: absolute; position: absolute;
text-align: right; text-align: right;
bottom: 15px; bottom: 12.5px;
right: 0px; right: 0px;
display: inline-block; display: inline-block;
width: auto; width: auto;
@ -4738,6 +4734,10 @@ label{
word-spacing: 15px; word-spacing: 15px;
animation: citymarqueeweatherscan 10.5s linear normal forwards; animation: citymarqueeweatherscan 10.5s linear normal forwards;
} }
.city-slide-intro .cityweatherscanmarquee span {
display: block;
transform: scale(106%,100%);
}
.city-slide-intro { .city-slide-intro {
position: relative; position: relative;
background: transparent url(/images/city1.jpg) no-repeat bottom; background: transparent url(/images/city1.jpg) no-repeat bottom;
@ -4753,12 +4753,19 @@ label{
width: 100%; width: 100%;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0;
display: flex; display: flex;
align-items: center; align-items: center;
padding-left: 12.5px; padding-left: 11px;
line-height: 2.5px; padding-top: 10px;
line-height: 110%;
z-index: 101 z-index: 101
} }
.city-slide-intro .weatherscancopyright span{
display: block;
transform: scale(107%,100%);
transform-origin: left;
}
@keyframes cityaccentmovei { @keyframes cityaccentmovei {
35% {transform: translate(-.75%, -4.5%) scaleY(1.03);} 35% {transform: translate(-.75%, -4.5%) scaleY(1.03);}
100% {transform: translate(-8.75%, -12%) scale(1.15, 1.2);} 100% {transform: translate(-8.75%, -12%) scale(1.15, 1.2);}
@ -6180,29 +6187,33 @@ label{
} }
.bulletin .blue.left { .bulletin .blue.left {
background-image: url(/images/red-curve-dark.svg); -webkit-mask-image: url(/images/red-curve-dark.svg);
background-size: 200% 100%; -webkit-mask-size: 200% 100%;
background-image: url(/images/warning.png);
background-size: 470% 60.4%;
background-position: -8.8% 7.7%;
width: 22%; width: 22%;
height: 150%; height: 150%;
top: 6%; top: 6%;
left: -8%; left: -8%;
opacity: .7; opacity: 1;
z-index: 2; z-index: 2;
} }
.bulletin .blue.bottom { .bulletin .blue.bottom {
background: transparent url(/images/warning.png) no-repeat; background-image: url(/images/warning.png);
background-position: -6.1% -30%; background-size: 470% 60.4%;
background-position: -10.5% 80%;
width: 22%; width: 22%;
height: 150%; height: 150%;
top: -37.5%; top: -37.5%;
left: -9.25%; left: -9.25%;
opacity: 1; opacity: 1;
z-index: 2; z-index: 2;
-webkit-mask-image: url(/images/red-curve-dark.svg); /*-webkit-mask-image: url(/images/red-curve-dark.svg);
mask-image: url(/images/red-curve-dark.svg); mask-image: url(/images/red-curve-dark.svg);
-webkit-mask-size: 200% 100%; -webkit-mask-size: 200% 100%;*/
} }
@ -6235,8 +6246,8 @@ label{
.bulletin { .bulletin {
position: relative; position: relative;
background: transparent url(/images/warning.png) no-repeat; background: transparent url(/images/warning.png) no-repeat;
background-position: 70% 100%; background-position: 70% 105%;
background-size: 101%; background-size: 101% 90%;
} }
@ -6292,15 +6303,17 @@ label{
.bulletin #subhead-noaa { .bulletin #subhead-noaa {
font-size: 21.5px; font-size: 22.5px;
font-weight: 700; font-weight: 700;
right: 98px; right: 105px;
font-stretch: semi-expanded; font-stretch: semi-expanded;
font-style: italic; font-style: italic;
color: #f6a67a; color: #f6a67a;
font-family: Frutiger; font-family: Frutiger;
text-shadow: 0px 0px 0px #000; text-shadow: 0px 0px 0px #000;
line-height: 35px; line-height: 35px;
transform: scale(101%,100%) translateY(-42.5%);
transform-origin: right;
} }
#marqueeSevere { #marqueeSevere {

13
webroot/index.html
View File

@ -511,12 +511,15 @@
<div class='yellow curve right'></div> <div class='yellow curve right'></div>
<div class='white curve right'></div> <div class='white curve right'></div>
<div class='white curve bottom'></div> <div class='white curve bottom'></div>
<div class='frost-pane' style="display:"> <div class='frost-pane' style="display:None">
<div class='cityname'>Gainesville Area</div> <div class='cityname'>Frankfort Area</div>
<div id="warningbulletin" class='warnings'>Severe Thunderstorm Watch 720 in effect until 4:30 PM EST Tuesday. <div id="warningbulletin" class='warnings'>Flash Flood Watch in effect until 4:30 PM EST Tuesday.
Monday morning.
</br> </br>
</br> </br>
Severe Thunderstorm Watch 720 in effect until 4:30 PM EST Tuesday. Severe Thunderstorm Watch 720 in effect until 4:30 PM EST Tuesday.
Monday
Monday morning.
</div> </div>
</div> </div>
@ -957,7 +960,7 @@
<!-- Intros --> <!-- Intros -->
<div class="info-slide city-slide-intro" style="display:none"> <div class="info-slide city-slide-intro" style="display:none">
<div class="weatherscancopyright" style="display:none"> <span class="copyrighttext"> Weatherscan is brought to you by The Weather Channel® and MIDCO </span></div> <div class="weatherscancopyright" style="display:none"> <span class="copyrighttext"> Weatherscan is brought to you by The Weather Channel®<br> and MIDCO </span></div>
<div class='cityaccent viii curve' style="display:none"></div> <div class='cityaccent viii curve' style="display:none"></div>
<div class='cityaccent ii curve' style="display:none"></div> <div class='cityaccent ii curve' style="display:none"></div>
<div class='cityaccent i curve' style="display:none"></div> <div class='cityaccent i curve' style="display:none"></div>
@ -967,7 +970,7 @@
<div class='cityaccentviishadow curve'></div> <div class='cityaccentviishadow curve'></div>
<div class='cityaccentvii curve'></div> <div class='cityaccentvii curve'></div>
<div class='cityaccent ix curve' style="display:none"></div> <div class='cityaccent ix curve' style="display:none"></div>
<div class='cityweatherscanmarquee' style="display:none">weatherscan weatherscan weatherscan weatherscan weatherscan weatherscan weatherscan weatherscan weatherscan weatherscan weatherscan weatherscan weatherscan weatherscan weatherscan weatherscan weatherscan weatherscan weatherscan weatherscan</div> <div class='cityweatherscanmarquee' style="display:none"><span>weatherscan weatherscan weatherscan weatherscan weatherscan weatherscan weatherscan weatherscan weatherscan weatherscan weatherscan weatherscan weatherscan weatherscan weatherscan weatherscan weatherscan weatherscan weatherscan weatherscan</span></div>
<div class='segment' style="display:none">Airport Conditions</div> <div class='segment' style="display:none">Airport Conditions</div>
</div> </div>
<div class="info-slide airport-slide-intro" style="display:none"> <div class="info-slide airport-slide-intro" style="display:none">

2
webroot/js/slides-loop.js
View File

@ -1216,7 +1216,7 @@ var mainMap
}, 1000); }, 1000);
setTimeout(function() { setTimeout(function() {
$('.city-slide-intro .weatherscancopyright .copyrighttext').fadeOut(500, function(){ $('.city-slide-intro .weatherscancopyright .copyrighttext').fadeOut(500, function(){
$('.city-slide-intro .weatherscancopyright .copyrighttext').css('font-size','10px') $('.city-slide-intro .weatherscancopyright .copyrighttext').css('font-size','15px')
$('.city-slide-intro .weatherscancopyright .copyrighttext').text("© 2021 Weather Group Television LLC All Rights Reserved") $('.city-slide-intro .weatherscancopyright .copyrighttext').text("© 2021 Weather Group Television LLC All Rights Reserved")
}); });
$('.city-slide-intro .weatherscancopyright .copyrighttext').fadeIn(500); $('.city-slide-intro .weatherscancopyright .copyrighttext').fadeIn(500);