aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorclarkzjw <[email protected]>2023-03-01 19:14:59 -0800
committerclarkzjw <[email protected]>2023-03-01 20:21:47 -0800
commit375c0d2544b20124a8cf497819006e01cd217225 (patch)
tree8984bf464561722f33dd15f60a7872ff1aa71912 /site/index.html
parentf87fef5388ca419f79c4750810e302cedfc310f5 (diff)
downloadphoto-375c0d2544b20124a8cf497819006e01cd217225.tar.gz
host photos.json on cloudflare r2
Diffstat (limited to 'site/index.html')
-rw-r--r--site/index.html73
1 files changed, 73 insertions, 0 deletions
diff --git a/site/index.html b/site/index.html
new file mode 100644
index 0000000..8071de9
--- /dev/null
+++ b/site/index.html
@@ -0,0 +1,73 @@
1---
2layout: default
3title: Photos
4---
5
6<input type="radio" name="layout" value="y-scroll" id="y-scroll" checked>
7<label for="y-scroll">
8 <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>
9</label>
10<input type="radio" name="layout" value="x-scroll" id="x-scroll">
11<label for="x-scroll">
12 <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>
13</label>
14<input type="radio" name="layout" value="grid2fr" id="grid2fr">
15<label for="grid2fr">
16 <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>
17</label>
18<input type="radio" name="layout" value="grid3fr" id="grid3fr">
19<label for="grid3fr">
20 <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>
21</label>
22
23<div class="photos-wrapper" id="photos">
24
25{% assign photos = site.data.photos %}
26{% for photo in photos %}
27<figure id="P{{ photo.guid }}">
28 <a href="{{ photo.path }}" class="image-link">
29 <img
30 src="{{ photo.path }}"
31 height="{{ photo.height }}"
32 style="aspect-ratio: {{ photo.ratio }}"
33 alt="{{ photo.alt }}"
34 title="{{ photo.alt }}"
35 class="{{ photo.orientation }}"
36 loading="lazy">
37 </a>
38 <figcaption>
39 {{ photo.caption | strip | markdownify }}
40 <span class="desc photo-metadata">
41 {{ photo.createdAt | date: "%Y/%m/%d (%a)" }}
42 </span>
43 </figcaption>
44</figure>
45{% endfor %}
46
47</div>
48
49<script>
50 const photos = document.querySelector('#photos')
51 const xScroll = document.querySelector('#x-scroll')
52
53 // move scroll area into viewport and user focus
54 document.addEventListener('change', function(event) {
55 if (xScroll.checked) {
56 photos.scrollIntoView()
57 photos.setAttribute('tabindex', '-1')
58 photos.focus()
59
60 photos.addEventListener('blur', function() {
61 photos.blur()
62 }, {once: true})
63 }
64 })
65
66 // return focus
67 document.addEventListener('keydown', function(event) {
68 if (event.key === 'Escape' && xScroll.checked && photos.contains(event.target)) {
69 xScroll.focus()
70 window.scrollTo(0, 0)
71 }
72 })
73</script>
Powered by cgit v1.2.3 (git 2.41.0)