44 lines
2.1 KiB
Twig
44 lines
2.1 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 %}">
|
|
<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">
|
|
{% block content %}{% endblock %}
|
|
</main>
|
|
{{ assets.js('bottom')|raw }}
|
|
<script>
|
|
(function () {
|
|
document.querySelectorAll('.journal-photo-strip').forEach(function (strip) {
|
|
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 });
|
|
});
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|