me/nodejs-website
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Get the banner images to play MUCH better thanks to midnight epiphany of using background. :)

Browse Source
This commit is contained in:
Hyperling
2025-10-14 06:00:26 -07:00
parent 3273fb62c8
commit e0ae65304d
2 changed files with 29 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
pages/helpers/banner.css
View File

@@ -4,7 +4,7 @@
.banner-top, .banner-middle, .banner-bottom { .banner-top, .banner-middle, .banner-bottom {
color: white; color: white;
width: 100%; width: 100%;
/* height: 69px; TBD/TODO: Still testing this removal. */ height: 69px;
font-size: 50px; font-size: 50px;
text-align: center; text-align: center;
} }
@@ -21,3 +21,15 @@
.banner-bottom { .banner-bottom {
background-color: #33CC33; background-color: #33CC33;
} }
.banner-image {
background-position: center, center;
background-repeat: no-repeat;
height: 237px; /* 69*3[banner] + 15*2[padding] */
}
.banner-image01 {
background-image: url("/files/media/icons/home.jpg");
}
.banner-image02 {
background-image: url("/files/media/icons/contact.jpg");
}

25
pages/helpers/banner.php
View File

@@ -6,25 +6,32 @@
} }
$show_pics = $GLOBALS["SHOW_BANNER_PICS"]; $show_pics = $GLOBALS["SHOW_BANNER_PICS"];
$banner_width = $show_pics ? 6 : 12; $banner_width = $show_pics ? 6 : 12;
// TBD / TODO:
// Check if user has vertical screen?
// Is that possible in this environment?
//$image_width = $vertical_screen ? 6 : 3;
?> ?>
<a href='/about/'> <a href='/about/'>
<div class="row">
<?php if ($show_pics) echo ' <?php if ($show_pics) echo '
<div class="row col-3 header center"> <div class="col-3 header center banner-image banner-image01">
<img src="/files/media/icons/home.jpg" <!-<img src="/files/media/icons/home.jpg"
alt="<<banner01.jpg>>" style="width:100%" alt="<<banner01.jpg>>"
> >-->
</div> </div>
';?> ';?>
<div class="row col-<?php echo "$banner_width"; ?> header"> <div class="col-<?php echo "$banner_width"; ?> header">
<div class="banner-top">Peace</div> <div class="banner-top">Peace</div>
<div class="banner-middle">Love</div> <div class="banner-middle">Love</div>
<div class="banner-bottom">Happiness</div> <div class="banner-bottom">Happiness</div>
</div> </div>
<?php if ($show_pics) echo ' <?php if ($show_pics) echo '
<div class="row col-3 header center"> <div class="col-3 header center banner-image banner-image02">
<img src="/files/media/icons/contact.jpg" <!--<img src="/files/media/icons/contact.jpg"
alt="<<banner02.jpg>>" style="width:100%" alt="<<banner02.jpg>>"
> >-->
</div> </div>
';?> ';?>
</div>
</a> </a>