andre/fitme3070.pt
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(site): restore CSS lost in 6c14e64; gallery click-and-drag; no link underline + colour/glow hover; brand-colour CrossFit pill; lighter trial link; no gloss on team photos

Browse Source 
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
andreandClaude Sonnet 5.5 committed 2026-10-13 18:49:53 +01:00
1 parent 6c14e644b1
commit 3d2a696162
3 files changed
+871 -69
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

site/includes/gallery.php
+12 -13
View File
@@ -1,11 +1,11 @@
<?php
// Gallery partial — an endless horizontal strip that scrolls by itself (home
// "instalações" and the CrossFit page). Pure CSS: full-height photos alternate
// with 2x2 grids of four; the strip is repeated so the loop is seamless and it
// pauses on hover / focus. With "reduce motion" it becomes a plain swipeable
// row. Clicking a tile opens it full size in a <dialog> lightbox with prev /
// next, arrow keys, Esc and swipe (main.js); the repeated copies are hidden
// from assistive tech and open the same photo.
// Gallery partial — an endless horizontal strip (home "instalações" and the
// CrossFit page): full-height photos alternate with 2x2 grids of four. main.js
// scrolls it by itself, lets you click-and-drag (mouse) or swipe (touch), pauses
// while you interact and loops seamlessly over the repeated copies. Clicking a
// tile (without dragging) opens it full size in a <dialog> lightbox with prev /
// next, arrow keys, Esc and swipe; the repeated copies are hidden from assistive
// tech and open the same photo.
$files = glob(rtrim($gallery_path, '/') . '/*.jpg');
if (!$files || !is_array($files)) $files = [];
// Column span per tile, cycled: w = two columns, s = one.
@@ -31,13 +31,12 @@ $gal_label = $gallery_h2 ?? 'Instalações';
$units[] = ['grid' => $grid, 'idx' => range($i, $i + $take - 1)];
$i += $take; $k++;
}
// The strip is rendered several times so the endless scroll has no gap: two
// copies is enough for a normal gallery, a short one needs four.
$copies = $n >= 8 ? 2 : 4;
$dur = max(30, $n * 5); // seconds for one pass over the originals
// The strip is rendered four times: main.js keeps the scroll position inside
// the middle copies and jumps by exactly one copy, so it loops without a seam.
$copies = 4;
?>
<div class="gal-wrap">
<div class="gal-marquee" style="--gal-copies: <?= $copies ?>; --gal-dur: <?= $dur * $copies ?>s">
<div class="gal-marquee">
<div class="gal-track">
<?php for ($c = 0; $c < $copies; $c++): $dup = $c > 0; ?>
<div class="gal-set"<?= $dup ? ' aria-hidden="true"' : '' ?>>
@@ -53,7 +52,7 @@ $gal_label = $gallery_h2 ?? 'Instalações';
<a href="<?= htmlspecialchars($src) ?>" class="gal-link" data-index="<?= $gi ?>"<?= $dup ? ' data-dup="1" tabindex="-1"' : '' ?> aria-label="Ampliar: <?= htmlspecialchars($alt) ?>">
<img src="<?= htmlspecialchars($src) ?>" alt="<?= $dup ? '' : htmlspecialchars($alt) ?>"
<?= $dim[0] ? 'width="' . (int) $dim[0] . '" height="' . (int) $dim[1] . '"' : '' ?>
<?= $gi > 2 || $dup ? 'loading="lazy"' : '' ?> decoding="async">
<?= $gi > 2 || $dup ? 'loading="lazy"' : '' ?> decoding="async" draggable="false">
</a>
</div>
<?php endforeach; ?>