144 lines
5.3 KiB
Plaintext
144 lines
5.3 KiB
Plaintext
---
|
|
import { Picture } from 'astro:assets';
|
|
import fiveG from '../../assets/images/sector-5g.jpg';
|
|
import substation from '../../assets/images/sector-substation.jpg';
|
|
import datacentre from '../../assets/images/sector-datacentre.jpg';
|
|
import { t, type Lang } from '../../i18n/ui';
|
|
interface Props { lang: Lang }
|
|
const { lang } = Astro.props;
|
|
const ui = t(lang);
|
|
const images = [fiveG, substation, datacentre];
|
|
const items = ui.sectors.items.map((item, i) => ({ ...item, image: images[i], id: `sector-${i + 1}` }));
|
|
---
|
|
<section class="section sectors" id="sectors" aria-labelledby="sectors-title">
|
|
<div class="container sectors__grid" data-sectors>
|
|
<div class="sectors__text">
|
|
<h2 id="sectors-title" class="h2">{ui.sectors.title}</h2>
|
|
<div class="sectors__tabs" role="tablist" aria-orientation="vertical" aria-labelledby="sectors-title">
|
|
{items.map((item, i) => (
|
|
<div class="sectors__tab" data-tab>
|
|
<h3 class="sectors__heading">
|
|
<button
|
|
class="sectors__button"
|
|
type="button"
|
|
role="tab"
|
|
id={`${item.id}-tab`}
|
|
aria-controls={`${item.id}-panel`}
|
|
aria-selected={i === 0 ? 'true' : 'false'}
|
|
tabindex={i === 0 ? undefined : -1}
|
|
>{item.title}</button>
|
|
</h3>
|
|
<div class="sectors__panel" role="tabpanel" id={`${item.id}-panel`} aria-labelledby={`${item.id}-tab`} tabindex="0" data-open={i === 0 ? '' : undefined}>
|
|
<div class="sectors__panel-inner">
|
|
<p class="muted">{item.body}</p>
|
|
<Picture
|
|
src={item.image}
|
|
alt={item.imageAlt}
|
|
formats={['avif']}
|
|
fallbackFormat="webp"
|
|
widths={[480, 768, 1024, 1440]}
|
|
sizes="(min-width: 64rem) 50vw, 100vw"
|
|
loading="lazy"
|
|
decoding="async"
|
|
class="sectors__img img-doc"
|
|
pictureAttributes={{ class: 'sectors__picture' }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div class="sectors__media" aria-hidden="true">
|
|
{items.map((item, i) => (
|
|
<Picture
|
|
src={item.image}
|
|
alt=""
|
|
formats={['avif']}
|
|
fallbackFormat="webp"
|
|
widths={[480, 768, 1024, 1440]}
|
|
sizes="(min-width: 64rem) 50vw, 100vw"
|
|
loading="lazy"
|
|
decoding="async"
|
|
class="sectors__img img-doc"
|
|
pictureAttributes={{ class: 'sectors__picture sectors__picture--stage', 'data-stage-item': '', 'data-active': i === 0 ? '' : undefined }}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<style>
|
|
.sectors__grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(12, minmax(0, 1fr));
|
|
column-gap: var(--gap);
|
|
row-gap: var(--space-7);
|
|
}
|
|
.sectors__text {
|
|
grid-column: 1 / -1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-8);
|
|
}
|
|
.sectors__tabs { margin-top: auto; }
|
|
.sectors__tab + .sectors__tab { margin-top: var(--space-5); }
|
|
.sectors__heading { font-size: inherit; font-weight: inherit; }
|
|
.sectors__button {
|
|
display: block;
|
|
text-align: left;
|
|
font-size: var(--step-h3);
|
|
line-height: var(--leading-h3);
|
|
letter-spacing: var(--track-h3);
|
|
font-weight: var(--weight-medium);
|
|
color: var(--ink);
|
|
transition: color var(--dur-fast) var(--ease);
|
|
}
|
|
.sectors__button[aria-selected='false'] { color: var(--ink-muted); }
|
|
.sectors__button[aria-selected='false']:hover { color: var(--ink); }
|
|
.sectors__panel-inner { display: grid; gap: var(--space-5); padding-top: var(--space-3); }
|
|
.sectors__panel p { max-width: 28em; }
|
|
:global(.sectors__picture) { display: block; width: 100%; }
|
|
.sectors__img, :global(.sectors__img) { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
|
|
|
|
/* The stage image on the right exists for wide screens. On narrow screens each panel carries its own image. */
|
|
.sectors__media { display: none; }
|
|
|
|
/* With scripting, one panel at a time; without, everything is readable. The first panel is
|
|
open in the markup, so nothing expands on load and the page below it does not move. */
|
|
:global(html.js) .sectors__panel {
|
|
display: grid;
|
|
grid-template-rows: 0fr;
|
|
overflow: hidden;
|
|
transition: grid-template-rows var(--dur-slow) var(--ease);
|
|
}
|
|
:global(html.js) .sectors__panel-inner { min-height: 0; }
|
|
:global(html.js) .sectors__panel[data-open] { grid-template-rows: 1fr; }
|
|
|
|
@media (min-width: 64rem) {
|
|
.sectors__text { grid-column: 1 / span 5; }
|
|
.sectors__media {
|
|
grid-column: 7 / span 6;
|
|
display: grid;
|
|
}
|
|
.sectors__media :global(.sectors__picture--stage) {
|
|
grid-area: 1 / 1;
|
|
opacity: 0;
|
|
transition: opacity var(--dur-slow) var(--ease);
|
|
}
|
|
.sectors__media :global(.sectors__picture--stage[data-active]) { opacity: 1; }
|
|
/* Inside the panels the image is redundant on wide screens. */
|
|
.sectors__panel :global(.sectors__picture) { display: none; }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.sectors__panel, .sectors__media :global(.sectors__picture--stage) { transition: none; }
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
import { initTabs } from '../../scripts/tabs';
|
|
const root = document.querySelector<HTMLElement>('[data-sectors]');
|
|
if (root) initTabs(root);
|
|
</script>
|