Skip to content

Fixes from porting latlonguas.com: gallery width, SlideBox scrim, usedOn #40

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ecropolis merged 2 commits into from
Oct 31, 2026
Merged

Fixes from porting latlonguas.com: gallery width, SlideBox scrim, usedOn #40

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
543649d
Fixes from porting latlonguas.com: gallery width, SlideBox scrim, usedOn
ecropolis Oct 31, 2026
a68af9b
Name the LatLong UAS rebuild by where it is, not where it is going
ecropolis Oct 31, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 30 additions & 8 deletions src/data/catalog.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -396,7 +396,10 @@ export const catalog: Element[] = [
<a class="button" href="/about/">Our story</a>
</ParallaxBand>
<!-- :root { --pb-overlay: var(--navy); --pb-fg: var(--white); } -->`,
usedOn: [{ site: 'stbeautybar', where: 'Home, the “Confidence” band (speed 0.15, position top); ecropolis/stbeautybar-astro#2' }],
usedOn: [
{ site: 'stbeautybar', where: 'Home, the “Confidence” band (speed 0.15, position top); ecropolis/stbeautybar-astro#2' },
{ site: 'LatLong UAS (rebuild at latlonguas.gohero.us, cutting over to latlonguas.com)', where: 'Its Band.astro wrapper: the photo bands on every page but /drone-selfie/, each with a measured scrim' },
],
file: 'src/library/parallax-band/ParallaxBand.astro',
added: '2026-09-23',
},
Expand Down Expand Up @@ -833,6 +836,7 @@ const faqs: AccordionItem[] = [
usedOn: [
{ site: 'jwalktours.com', where: '/faqs/ and the tour pages: its own FaqList.astro (<details>, FAQPage JSON-LD from the same array); moves to this element on its next FAQ request' },
{ site: 'stbeautybar.com', where: '/about-us/ FAQ: its own Faqs.astro (exclusive, first open, rotating icon, FAQPage JSON-LD); moves to this element on its next FAQ request' },
{ site: 'LatLong UAS (rebuild at latlonguas.gohero.us, cutting over to latlonguas.com)', where: '/dc-frz/, the FRZ questions (boxed, FAQPage JSON-LD)' },
],
reference: [
{ module: 'pp-advanced-accordion', url: 'https://latlonguas.com/dc-frz/', note: 'The FRZ questions at the foot of the page.' },
Expand Down Expand Up @@ -1823,7 +1827,7 @@ import { analytics } from '../data/site';
{ name: '--slb-fade', fallback: '200ms', note: 'The crossfade under reduced motion.' },
{ name: '--slb-focus', fallback: 'var(--slb-accent)', note: 'Focus ring round the card.' },
{ name: '--slb-image-fg', fallback: '#fff', note: 'variant="image": text over the photo and on its tinted back.' },
{ name: '--slb-scrim', fallback: 'linear-gradient(to top, rgb(20 24 40 / 0.85), rgb(20 24 40 / 0.55) 60%, transparent)', note: 'variant="image": behind the front’s title, for 4.5:1 over the photo.' },
{ name: '--slb-scrim', fallback: 'linear-gradient(to top, rgb(20 24 40 / 0.45), rgb(20 24 40 / 0.3) 60%, transparent)', note: 'variant="image": behind the front’s title, for 4.5:1 over the photo. Measure it per image and set it on each tile; the fallback is a starting point, not an answer (latlonguas.com’s four photos needed 0.19–0.33).' },
{ name: '--slb-image-back-bg', fallback: 'rgb(20 24 40 / 0.86)', note: 'variant="image": the tint that slides in over the photo.' },
{ name: '--slb-image-height', fallback: '16rem', note: 'variant="image": the card’s floor.' },
],
Expand All @@ -1848,7 +1852,10 @@ import { analytics } from '../data/site';
<!-- global.css: .slb { --slb-accent: var(--brand); --slb-radius: var(--radius); } -->`,
license:
'The icons in this demo are Font Awesome Free (CC BY 4.0), each carrying Font Awesome’s own attribution comment. The card takes any SVG you give it: your own icons, or a Font Awesome Pro one we have licensed for your site.',
usedOn: [{ site: 'superherotech.ai', where: '/elements/slide-box/ (demo)' }],
usedOn: [
{ site: 'superherotech.ai', where: '/elements/slide-box/ (demo)' },
{ site: 'LatLong UAS (rebuild at latlonguas.gohero.us, cutting over to latlonguas.com)', where: 'Home, the image tiles under “From the strictly functional…” (a measured --slb-scrim per tile); /dc-frz/, the circle that opens the waiver form' },
],
reference: [
{ module: 'interactive-banner-1', url: 'https://latlonguas.com/', note: 'Four photo banners (“Dazzling imagery”…) whose line rises on hover: variant="image".' },
{ module: 'ihover', url: 'https://latlonguas.com/dc-frz/', note: 'The round “FRZ Waiver Request Form” tile: variant="image" shape="circle".' },
Expand Down Expand Up @@ -1999,7 +2006,10 @@ import { analytics } from '../data/site';
<div slot="b">…</div>
</ContentToggle>
<!-- .ct { --ct-track: var(--brand); --ct-pressed-bg: var(--brand); } -->`,
usedOn: [{ site: 'superherotech.ai', where: '/elements/content-toggle/ (demo)' }],
usedOn: [
{ site: 'superherotech.ai', where: '/elements/content-toggle/ (demo)' },
{ site: 'LatLong UAS (rebuild at latlonguas.gohero.us, cutting over to latlonguas.com)', where: 'Its Portfolio.astro, “Our works”: Photography / Videography (home, /services/, /our-story/)' },
],
reference: [
{ module: 'uabb-content-toggle', url: 'https://latlonguas.com/', note: 'Home page; also /services/ and /our-story/.' },
],
Expand Down Expand Up @@ -2072,7 +2082,10 @@ import { analytics } from '../data/site';
.site { transition: translate 0.28s; }
html[data-ofc-push="left"] .site { translate: var(--ofc-push) 0; }
@media (prefers-reduced-motion: reduce) { .site { transition: none; } } -->`,
usedOn: [{ site: 'superherotech.ai', where: '/elements/off-canvas/ (demo)' }],
usedOn: [
{ site: 'superherotech.ai', where: '/elements/off-canvas/ (demo)' },
{ site: 'LatLong UAS (rebuild at latlonguas.gohero.us, cutting over to latlonguas.com)', where: '/dc-frz/, the FRZ waiver request form from the right' },
],
reference: [
{ module: 'uabb-off-canvas', url: 'https://latlonguas.com/', note: 'On /, /dc-frz/, /services/ and /our-story/.' },
],
Expand Down Expand Up @@ -3378,7 +3391,10 @@ const { product, currency } = Astro.props;
]}
/>
<!-- global.css: .cn { --cn-accent: var(--brand); } -->`,
usedOn: [{ site: 'superherotech.ai', where: '/elements/counter/ (demo)' }],
usedOn: [
{ site: 'superherotech.ai', where: '/elements/counter/ (demo)' },
{ site: 'LatLong UAS (rebuild at latlonguas.gohero.us, cutting over to latlonguas.com)', where: 'Its SafetyRecord.astro (home, /our-story/) and /dc-frz/ “Inside the FRZ, so far”, ring style' },
],
reference: [{ module: 'uabb-numbers', url: 'https://latlonguas.com/', note: 'Three circle counters (1,427 flights, 263 locations, 100); also /dc-frz/ and /our-story/.' }],
file: 'src/library/counter/Counter.astro',
added: '2026-10-30',
Expand Down Expand Up @@ -3444,7 +3460,10 @@ const { product, currency } = Astro.props;
{ src: '/logos/bluepeak.svg', alt: 'Bluepeak', width: 360, height: 120 },
]}
/>`,
usedOn: [{ site: 'superherotech.ai', where: '/elements/logo-grid/ (demo)' }],
usedOn: [
{ site: 'superherotech.ai', where: '/elements/logo-grid/ (demo)' },
{ site: 'LatLong UAS (rebuild at latlonguas.gohero.us, cutting over to latlonguas.com)', where: 'Its NotableClients.astro (home, /our-story/)' },
],
reference: [{ module: 'pp-logos-grid', url: 'https://latlonguas.com/', note: 'Client logos in its carousel layout; also /our-story/.' }],
file: 'src/library/logo-grid/LogoGrid.astro',
added: '2026-10-30',
Expand Down Expand Up @@ -3513,7 +3532,10 @@ const { product, currency } = Astro.props;
alt: 'Power lines crossing fields between three pylons', category: 'Power lines' },
]}
/>`,
usedOn: [{ site: 'superherotech.ai', where: '/elements/photo-gallery/ (demo)' }],
usedOn: [
{ site: 'superherotech.ai', where: '/elements/photo-gallery/ (demo)' },
{ site: 'LatLong UAS (rebuild at latlonguas.gohero.us, cutting over to latlonguas.com)', where: 'Its Portfolio.astro, the Photography panel (filtered, 3/2)' },
],
reference: [{ module: 'photo-gallery', url: 'https://latlonguas.com/', note: 'Filterable grid (Buildings, Structures / Mining, Power Lines, Scenic) with a lightbox; also /services/ and /our-story/.' }],
file: 'src/library/photo-gallery/PhotoGallery.astro',
added: '2026-10-30',
Expand Down
3 changes: 3 additions & 0 deletions src/library/photo-gallery/PhotoGallery.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -314,6 +314,9 @@ const uid = 'pg-' + Math.random().toString(36).slice(2, 8);
<style>
.pg {
display: grid;
/* An auto track grows to the filter row's max-content width and pushes
the page sideways on phones; pin it to the container. */
grid-template-columns: minmax(0, 1fr);
gap: 1rem;
}
.pg__filters {
Expand Down
6 changes: 5 additions & 1 deletion src/library/slide-box/SlideBox.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,10 @@
* (with JavaScript; without it the panels stack as rounded boxes): UABB's iHover. Keep a
* circle's back to about 20 words; it clips what does not fit.
*
* The image variant's scrim. Measure `--slb-scrim` for each photo and set it on that tile; never
* reuse one dark value. The fallback (0.45 at the foot) is only a starting point: on
* latlonguas.com four real photos needed 0.19–0.33, and 0.85 buried them.
*
* Sizing. Both panels share one grid cell, so the card is as tall as the taller panel and
* neither is cut off; there is no fixed height. The host's grid sets the width.
*
Expand Down Expand Up @@ -487,7 +491,7 @@ locals.__slideBoxScript = true;
.slb--image .slb__front .slb__body {
position: relative;
padding-top: 4rem;
background: var(--slb-scrim, linear-gradient(to top, rgb(20 24 40 / 0.85), rgb(20 24 40 / 0.55) 60%, transparent));
background: var(--slb-scrim, linear-gradient(to top, rgb(20 24 40 / 0.45), rgb(20 24 40 / 0.3) 60%, transparent));
}
.slb--image .slb__front .slb__hint {
color: var(--slb-image-fg, #fff);
Expand Down
Loading