m038
ee107eebdf
- demo dailies.md: add content.items collection config (required for page.collection()) - base.html.twig: add tabindex="0" to journal-photo-strip for WCAG scrollable-region-focusable Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Vgmzx8VTTTmCskSpQtsLTr
75 lines
3.3 KiB
Twig
75 lines
3.3 KiB
Twig
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>{% if page.title %}{{ page.title }} | {% endif %}{{ site.title }}</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&family=DM+Serif+Display:ital@0;1&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="{{ url('theme://css/tokens.css') }}">
|
||
<link rel="stylesheet" href="{{ url('theme://css/style.css') }}">
|
||
{{ assets.css()|raw }}
|
||
{{ assets.js()|raw }}
|
||
</head>
|
||
<body class="{% if page.template == 'map' %}map-page{% endif %}{% if page.template == 'home' or page.template == 'trip' %} home-page{% endif %}{% if page.template == 'story' %} template-story{% endif %}">
|
||
<a class="skip-link" href="#main-content">Skip to main content</a>
|
||
<header class="site-header">
|
||
<a class="site-title" href="{{ base_url_absolute }}">into the east</a>
|
||
{% block nav %}
|
||
<nav class="site-nav" aria-label="Main navigation">
|
||
<a href="{{ base_url_absolute }}"{% if page.template == 'home' %} aria-current="page"{% endif %}>Home</a>
|
||
<a href="{{ base_url_absolute }}/trips"{% if page.template == 'trips' %} aria-current="page"{% endif %}>Past Trips</a>
|
||
</nav>
|
||
{% endblock %}
|
||
</header>
|
||
<main class="site-main" id="main-content">
|
||
{% block content %}{% endblock %}
|
||
</main>
|
||
{{ assets.js('bottom')|raw }}
|
||
<script>
|
||
(function () {
|
||
document.querySelectorAll('.journal-photo-strip').forEach(function (strip) {
|
||
strip.setAttribute('role', 'region');
|
||
strip.setAttribute('aria-label', 'Photo strip');
|
||
strip.setAttribute('tabindex', '0');
|
||
|
||
var slideCount = parseInt(strip.dataset.slides, 10) || 1;
|
||
var dots = strip.nextElementSibling;
|
||
if (!dots || !dots.classList.contains('journal-photo-dots')) return;
|
||
var dotEls = Array.from(dots.querySelectorAll('.journal-photo-dot'));
|
||
|
||
strip.addEventListener('scroll', function () {
|
||
var idx = Math.round(strip.scrollLeft / strip.offsetWidth);
|
||
dotEls.forEach(function (d, i) { d.classList.toggle('is-active', i === idx); });
|
||
}, { passive: true });
|
||
|
||
if (slideCount < 2) return;
|
||
|
||
var prev = document.createElement('button');
|
||
prev.className = 'strip-prev';
|
||
prev.setAttribute('aria-label', 'Previous photo');
|
||
prev.textContent = '‹';
|
||
prev.addEventListener('click', function () {
|
||
strip.scrollBy({ left: -strip.offsetWidth, behavior: 'smooth' });
|
||
});
|
||
|
||
var next = document.createElement('button');
|
||
next.className = 'strip-next';
|
||
next.setAttribute('aria-label', 'Next photo');
|
||
next.textContent = '›';
|
||
next.addEventListener('click', function () {
|
||
strip.scrollBy({ left: strip.offsetWidth, behavior: 'smooth' });
|
||
});
|
||
|
||
var controls = document.createElement('div');
|
||
controls.className = 'strip-controls';
|
||
controls.appendChild(prev);
|
||
controls.appendChild(next);
|
||
dots.insertAdjacentElement('afterend', controls);
|
||
});
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|