---
layout: default
title: Photos
---

<input type="radio" name="layout" value="y-scroll" id="y-scroll" checked>
<label for="y-scroll">
  <svg width="15" height="15" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg"><title>vertical scroll</title><path d="M55 0a5 5 0 0 1 5 5v31a5 5 0 0 1-5 5H5a5 5 0 0 1-5-5V5a5 5 0 0 1 5-5h50ZM55 47a5 5 0 0 1 5 5v8H0v-8a5 5 0 0 1 5-5h50Z" fill="#D9D9D9"/></svg>
</label>
<input type="radio" name="layout" value="x-scroll" id="x-scroll">
<label for="x-scroll">
  <svg width="15" height="15" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg"><title>horizontal scroll</title><path d="M0 5a5 5 0 0 1 5-5h30a5 5 0 0 1 5 5v50a5 5 0 0 1-5 5H5a5 5 0 0 1-5-5V5ZM47 5a5 5 0 0 1 5-5h8v60h-8a5 5 0 0 1-5-5V5Z" fill="#D9D9D9"/></svg>
</label>
<input type="radio" name="layout" value="grid2fr" id="grid2fr">
<label for="grid2fr">
  <svg width="15" height="15" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg"><title>grid 2 columns</title><path d="M0 37c0-2 2-4 4-4h19c2 0 4 2 4 4v19c0 2-2 4-4 4H4c-2 0-4-2-4-4V37zM0 4c0-2 2-4 4-4h19c2 0 4 2 4 4v19c0 2-2 4-4 4H4c-2 0-4-2-4-4V4zM33 37c0-2 2-4 4-4h19c2 0 4 2 4 4v19c0 2-2 4-4 4H37c-2 0-4-2-4-4V37zM33 4c0-2 2-4 4-4h19c2 0 4 2 4 4v19c0 2-2 4-4 4H37c-2 0-4-2-4-4V4z" fill="#D9D9D9"/></svg>
</label>
<input type="radio" name="layout" value="grid3fr" id="grid3fr">
<label for="grid3fr">
  <svg width="15" height="15" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg"><title>grid 3 columns</title><path d="M22 4c0-2 2-4 4-4h8c2 0 4 2 4 4v8c0 2-2 4-4 4h-8c-2 0-4-2-4-4V4zM0 26c0-2 2-4 4-4h8c2 0 4 2 4 4v8c0 2-2 4-4 4H4c-2 0-4-2-4-4v-8zM22 26c0-2 2-4 4-4h8c2 0 4 2 4 4v8c0 2-2 4-4 4h-8c-2 0-4-2-4-4v-8zM0 48c0-2 2-4 4-4h8c2 0 4 2 4 4v8c0 2-2 4-4 4H4c-2 0-4-2-4-4v-8zM44 26c0-2 2-4 4-4h8c2 0 4 2 4 4v8c0 2-2 4-4 4h-8c-2 0-4-2-4-4v-8zM22 48c0-2 2-4 4-4h8c2 0 4 2 4 4v8c0 2-2 4-4 4h-8c-2 0-4-2-4-4v-8zM44 48c0-2 2-4 4-4h8c2 0 4 2 4 4v8c0 2-2 4-4 4h-8c-2 0-4-2-4-4v-8zM0 4c0-2 2-4 4-4h8c2 0 4 2 4 4v8c0 2-2 4-4 4H4c-2 0-4-2-4-4V4zM44 4c0-2 2-4 4-4h8c2 0 4 2 4 4v8c0 2-2 4-4 4h-8c-2 0-4-2-4-4V4z" fill="#D9D9D9"/></svg>
</label>

<div class="photos-wrapper" id="photos">

{% assign photos = site.data.photos %}
{% for photo in photos %}
<figure id="P{{ photo.guid }}">
  <a href="{{ photo.path }}" class="image-link">
    <img 
      src="{{ photo.path }}"
      height="{{ photo.height }}"
      style="aspect-ratio: {{ photo.ratio }}"
      alt="{{ photo.alt }}"
      title="{{ photo.alt }}"
      class="{{ photo.orientation }}"
      loading="lazy">
  </a>
  <figcaption>
    {{ photo.caption | strip | markdownify }}
    <span class="desc photo-exif" style="font-size:9.0pt" >
      {{ photo.model | strip }}
    </span>
    <br>
    <span class="desc photo-metadata">
      {{ photo.createdAt | date: "%Y/%m/%d (%a)" }}
    </span>
  </figcaption>
</figure>
{% endfor %}

</div>

<script>
  const photos = document.querySelector('#photos')
  const xScroll = document.querySelector('#x-scroll')

  // move scroll area into viewport and user focus
  document.addEventListener('change', function(event) {
    if (xScroll.checked) {
      photos.scrollIntoView()
      photos.setAttribute('tabindex', '-1')
      photos.focus()

      photos.addEventListener('blur', function() {
        photos.blur()
      }, {once: true})
    }
  })

  // return focus
  document.addEventListener('keydown', function(event) {
    if (event.key === 'Escape' && xScroll.checked && photos.contains(event.target)) {
      xScroll.focus()
      window.scrollTo(0, 0)
    }
  })
</script>