levineuwirth.org/templates/photography-map.html

35 lines
1.8 KiB
HTML

<div id="content">
<main id="markdownBody" data-pagefind-body>
<header class="photography-header">
<h1 class="page-title">Photography</h1>
<div class="photography-controls" role="toolbar" aria-label="Browsing mode">
<div class="photography-mode-toggle" role="tablist" aria-label="Photography view mode">
<a class="mode-btn" role="tab" data-mode="masonry" href="/photography/" aria-pressed="false">Masonry</a>
<a class="mode-btn" role="tab" data-mode="grid" href="/photography/" aria-pressed="false">Grid</a>
<a class="mode-btn" role="tab" data-mode="chronological" href="/photography/" aria-pressed="false">Chronological</a>
<a class="mode-btn is-active" role="tab" aria-current="page" data-mode="map" href="/photography/map/" aria-pressed="true">Map</a>
</div>
</div>
</header>
<div id="photography-map" class="photography-map" aria-label="Map of geo-tagged photographs">
<noscript>
<p class="photography-map-fallback">
The map view requires JavaScript. Browse the
<a href="/photography/">photography portfolio</a>
or jump to a specific photo from the
<a href="/photography/">grid view</a>.
</p>
</noscript>
</div>
<p class="photography-map-note">
Pin coordinates are rounded to the precision each photograph's
<code>geo-precision</code> field declares — typically the
nearest ten kilometres. Photos with no <code>geo:</code>
frontmatter (or with <code>geo-precision: hidden</code>) are
omitted from this map by design.
</p>
</main>
</div>