Skip to content

Commit

Permalink
Tweaking almanac css
Browse files Browse the repository at this point in the history 
Fixed up some alignment and spacing issues on all almanacs (Issue #42)
Partially fixed hardcoded dates in rain almanac (Issue #41)
  • Loading branch information
@lightmaster
lightmaster committed Jun 1, 2019
1 parent e13f076 commit 55c2ee8
Show file tree
Hide file tree
Showing 4 changed files with 1,252 additions and 653 deletions.
166 changes: 83 additions & 83 deletions barometeralmanac.php
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<?php
<?php
//original weather34 script original css/svg/php by weather34 2015-2019 clearly marked as original by weather34//
include('livedata.php');
?>
Expand All @@ -11,13 +11,13 @@
<style>
@font-face{font-family:weathertext2;src:url(css/fonts/verbatim-regular.woff) format("woff"),url(fonts/verbatim-regular.woff2) format("woff2"),url(fonts/verbatim-regular.ttf) format("truetype")}
html,body{font-size:13px;font-family: "weathertext2", Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
.grid {
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
grid-gap: 5px;
align-items: stretch;
color:#f5f7fc;-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;

}
.grid > article {
border: 1px solid #212428;
Expand All @@ -28,12 +28,12 @@
border-radius:4px;-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

.grid1 {
.grid1 {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
grid-gap: 5px;
color:#f5f7fc;

}

.grid1 > articlegraph {
Expand All @@ -44,10 +44,10 @@
-webkit-border-radius:4px;
border-radius:4px;
background:0;-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
height:220px
height:220px
}


.weather34chart-btn.close:after,.weather34chart-btn.close:before{color:#ccc;position:absolute;font-size:14px;font-family:Arial,Helvetica,sans-serif;font-weight:600}
.weather34browser-header{flex-basis:auto;height:35px;background:#ebebeb;background:0;border-bottom:0;display:flex;margin-top:-20px;width:99%;-webkit-border-top-left-radius:5px;-webkit-border-top-right-radius:5px;-moz-border-radius-topleft:5px;-moz-border-radius-topright:5px;border-top-left-radius:5px;border-top-right-radius:5px}.weather34browser-footer{flex-basis:auto;height:35px;background:#ebebeb;background:rgba(56,56,60,1);border-bottom:0;display:flex;bottom:-20px;width:95%;-webkit-border-bottom-right-radius:5px;-webkit-border-bottom-left-radius:5px;-moz-border-radius-bottomright:5px;-moz-border-radius-bottomleft:5px;border-bottom-right-radius:5px;border-bottom-left-radius:5px}.weather34chart-btns{position:absolute;height:35px;display:inline-block;padding:0 10px;line-height:38px;width:55px;flex-basis:auto;top:5px}.weather34chart-btn{width:14px;height:14px;border:1px solid rgba(0,0,0,.15);border-radius:6px;display:inline-block;margin:1px}.weather34chart-btn.close{background-color: rgba(255, 124, 57, 1.000)}.weather34chart-btn.close:before{content:"x";margin-top:-14px;margin-left:2px}.weather34chart-btn.close:after{content:"close window";margin-top:-13px;margin-left:15px;width:300px}a{color:#aaa;text-decoration:none}
.weather34darkbrowser{position:relative;background:0;width:100%;max-height:30px;margin:auto;margin-top:-15px;margin-left:0px;border-top-left-radius:5px;border-top-right-radius:5px;padding-top:45px;background-image:radial-gradient(circle,#EB7061 6px,transparent 8px),radial-gradient(circle,#F5D160 6px,transparent 8px),radial-gradient(circle,#81D982 6px,transparent 8px),radial-gradient(circle,rgba(97,106,114,1) 2px,transparent 2px),radial-gradient(circle,rgba(97,106,114,1) 2px,transparent 2px),radial-gradient(circle,rgba(97,106,114,1) 2px,transparent 2px),linear-gradient(to bottom,rgba(59,60,63,0.4) 40px,transparent 0);background-position:left top,left top,left top,right top,right top,right top,0 0;background-size:50px 45px,90px 45px,130px 45px,50px 30px,50px 45px,50px 60px,100%;background-repeat:no-repeat,no-repeat}.weather34darkbrowser[url]:after{content:attr(url);color:#aaa;font-size:10px;position:absolute;left:0;right:0;top:0;padding:4px 15px;margin:11px 50px 0 90px;border-radius:3px;background:rgba(97, 106, 114, 0.3);height:20px;box-sizing:border-box}
Expand All @@ -73,158 +73,158 @@

</style>
<div class="weather34darkbrowser" url="Barometer Almanac"></div>

<main class="grid">
<article>
<div class=actualt>&nbsp;Barometer Today </div>
<article>
<div class=actualt>&nbsp;Barometer Today </div>
<div class="temperaturecontainer1">

<?php
////pressure max today
if ($weather["thb0seapressmmax"]>=0) {
echo "<div class='temperaturetoday24'>",$weather["barometer_max"] . "</value>";}
echo "<div class='temperaturetoday24'>",$weather["barometer_max"] . "</value>";}
echo "<smalluvunit>".$weather["barometer_units"]."</smalluvunit>"
?> </div>
<div class="temperaturetrend">Max<br><?php echo $weather["thb0seapressmaxtime"];?></span></div>
</div>

<div class="temperaturetrend">Max<br><?php echo $weather["thb0seapressmaxtime"];?></span></div>
</div>
<div class="temperaturecontainer2">
<?php
//pressure min today
if ($weather["barometer_min"]>=0) {
echo "<div class='temperaturetoday0'>",$weather["barometer_min"] . "</value>";}
echo "<div class='temperaturetoday0'>",$weather["barometer_min"] . "</value>";}

echo "<smalluvunit>".$weather["barometer_units"]."</smalluvunit>"
?> </div>
<div class="temperaturetrend">Min<br><?php echo $weather["thb0seapressmintime"];?></span></div>
</article>
<div class="temperaturetrend">Min<br><?php echo $weather["thb0seapressmintime"];?></span></div>
</article>

<article>
<div class=actualt>&nbsp;Barometer Yesterday </div>
<article>
<div class=actualt>&nbsp;Barometer Yesterday </div>
<div class="temperaturecontainer1">

<?php
////pressure max yesterday
if ($weather["thb0seapressydmax"]>=0) {
echo "<div class='temperaturetoday24'>",$weather["thb0seapressydmax"] . "</value>";}
echo "<div class='temperaturetoday24'>",$weather["thb0seapressydmax"] . "</value>";}
echo "<smalluvunit>".$weather["barometer_units"]."</smalluvunit>"
?> </div>
<div class="temperaturetrend">Max<br> <?php echo $weather["thb0seapressydmaxtime"];?></span></div>
</div>

<div class="temperaturetrend">Max<br> <?php echo $weather["thb0seapressydmaxtime"];?></span></div>
</div>


<div class="temperaturecontainer2">
<?php
//pressure min yesterday
if ($weather["thb0seapressydmin"]>=0) {
echo "<div class='temperaturetoday0'>",$weather["thb0seapressydmin"] . "</value>";}
echo "<div class='temperaturetoday0'>",$weather["thb0seapressydmin"] . "</value>";}

echo "<smalluvunit>".$weather["barometer_units"]."</smalluvunit>"
?> </div>
<div class="temperaturetrend">Min<br> <?php echo $weather["thb0seapressydmintime"];?></span></div>
<div class="temperaturetrend">Min<br> <?php echo $weather["thb0seapressydmintime"];?></span></div>

</article>

</article>


<article>
<div class=actualt>&nbsp;Barometer <?php echo date('F Y')?> </div>
<div class="temperaturecontainer1">

<article>
<div class=actualt>&nbsp;Barometer <?php echo date('F Y')?> </div>
<div class="temperaturecontainer1">
<?php
////pressure max month
if ($weather["thb0seapressmmax"]>=0) {
echo "<div class='temperaturetoday24'>",$weather["thb0seapressmmax"] . "</value>";}
echo "<div class='temperaturetoday24'>",$weather["thb0seapressmmax"] . "</value>";}
echo "<smalluvunit>".$weather["barometer_units"]."</smalluvunit>"
?> </div>
?> </div>
<div class="temperaturetrend">Max<br> <?php echo $weather["thb0seapressmonthmaxtime"];?></span>
</div>
</div>
</div>
</div>
<div class="temperaturecontainer2">
<?php
//pressure min month
if ($weather["thb0seapressmmin"]>=0) {
echo "<div class='temperaturetoday0'>",$weather["thb0seapressmmin"] . "</value>";}
echo "<div class='temperaturetoday0'>",$weather["thb0seapressmmin"] . "</value>";}
echo "<smalluvunit>".$weather["barometer_units"]."</smalluvunit>"
?> </div>
<div class="temperaturetrend">Min<br> <?php echo $weather["thb0seapressmonthmintime"];?></span>
</div> </div>
</article>
<article>
<div class=actualt>&nbsp;Barometer <?php echo date('Y')?> </div>
</div> </div>
</article>


<article>
<div class=actualt>&nbsp;Barometer <?php echo date('Y')?> </div>
<div class="temperaturecontainer1">

<?php
////pressure max year
if ($weather["thb0seapressymax"]>=0) {
echo "<div class='temperaturetoday24'>",$weather["thb0seapressymax"] . "</value>";}
echo "<div class='temperaturetoday24'>",$weather["thb0seapressymax"] . "</value>";}
echo "<smalluvunit>".$weather["barometer_units"]."</smalluvunit>"
?> </div>
<div class="temperaturetrend1">Max<br> <?php echo $weather["thb0seapressyearmaxtime"];?></span></div>
</div>

<div class="temperaturetrend1">Max<br> <?php echo $weather["thb0seapressyearmaxtime"];?></span></div>
</div>


<div class="temperaturecontainer2">
<?php
//pressure min year
if ($weather["thb0seapressymin"]>=0) {
echo "<div class='temperaturetoday0'>",$weather["thb0seapressymin"] . "</value>";}
echo "<div class='temperaturetoday0'>",$weather["thb0seapressymin"] . "</value>";}

echo "<smalluvunit>".$weather["barometer_units"]."</smalluvunit>"
?> </div>
<div class="temperaturetrend1">Min<br> <?php echo $weather["thb0seapressyearmintime"];?></span></div>
<div class="temperaturetrend1">Min<br> <?php echo $weather["thb0seapressyearmintime"];?></span></div>

</article>
</article>


<article>
<div class=actualt>&nbsp;Barometer All-Time </div>
<article>
<div class=actualt>&nbsp;Barometer All-Time </div>
<div class="temperaturecontainer1">

<?php
////pressure max year
if ($weather["thb0seapressamax"]>=0) {
echo "<div class='temperaturetoday24'>",$weather["thb0seapressamax"] . "</value>";}
echo "<div class='temperaturetoday24'>",$weather["thb0seapressamax"] . "</value>";}
echo "<smalluvunit>".$weather["barometer_units"]."</smalluvunit>"
?> </div>
<div class="temperaturetrend1">Max<br><?php echo $weather["thb0seapressamaxtime"];?></span></div>
</div>

<div class="temperaturetrend1">Max<br><?php echo $weather["thb0seapressamaxtime"];?></span></div>
</div>


<div class="temperaturecontainer2">
<?php
//pressure min year
if ($weather["thb0seapressamin"]>=0) {
echo "<div class='temperaturetoday0'>",$weather["thb0seapressamin"] . "</value>";}
echo "<div class='temperaturetoday0'>",$weather["thb0seapressamin"] . "</value>";}

echo "<smalluvunit>".$weather["barometer_units"]."</smalluvunit>"
?> </div>
<div class="temperaturetrend1">Min<br><?php echo $weather["thb0seapressamintime"];?></span></div>
<div class="temperaturetrend1">Min<br><?php echo $weather["thb0seapressamintime"];?></span></div>

</article>
</article>
</main>
<main class="grid1">
<articlegraph>
<div class=actualt><?php echo date('Y')?> Barometer Chart</div>
<articlegraph>
<div class=actualt><?php echo date('Y')?> Barometer Chart</div>
<iframe src="mbcharts/yearlybarometermedium.php" frameborder="0" scrolling="no" width="100%" height="205px"></iframe>
</articlegraph>
<articlegraph style="height:30px">

</articlegraph>

<articlegraph style="height:30px">
<div class="lotemp">
<?php echo $info?>
<?php echo $info?>
<a href="https://canvasjs.com" title="https://canvasjs.com" target="_blank" style="font-size:8px;"> Charts rendered and compiled using <?php echo $creditschart ;?> </a></span>
</div>
<div class="lotemp">
<?php echo $info?> <a href="https://weather34.com" title="weather34.com" target="_blank" style="font-size:8px;">CSS/SVG/PHP scripts were developed by weather34.com for use in the weather34 template &copy; 2015-<?php echo date('Y');?>
</a></div>
</articlegraph>

</articlegraph>

</main>

</main>
Loading

1 comment on commit 55c2ee8

@dwhitemv
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's a LOT of whitespace change in this commit, which complicates merging local changes. Was all the reformatting necessary? Is your editor trimming trailing spaces?

Please sign in to comment.