picture gallery

2 files changed, 27 insertions, 2 deletions

diff --git a/html.rb b/html.rb
index 1018a31..8ad6c07 100755
--- a/html.rb
+++ b/html.rb
@@ -78,13 +78,27 @@ def music_html
          end
     html += "<p>Bandcamp: <a href='#{bc}'>#{bc}</a>"
     html += '</div>'
-    # html += '<hr>'
   end
   html += '<p>&copy; pdp8 <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>'
   html += File.read(File.join(SNIPPETS, 'tail.html'))
   print_html 'music', html
 end
 
+def picture_html
+  html = File.read(File.join(SNIPPETS, 'head.html'))
+  html += nav 'pictures'
+  html += '<div class="gallery">'
+  Dir[File.join(MEDIA_DIR, 'pictures', '*.jpeg')].sort.reverse.each do |img|
+    thumb = File.join(MEDIA_URL, 'pictures', 'thumb', File.basename(img).sub(/jpeg$/, 'webp'))
+    html += "<a href='#{File.join(MEDIA_URL, 'pictures',
+                                  File.basename(img))}'><img class='thumb' loading='lazy' width='150' height='100' src='#{thumb}'></a>"
+  end
+  html += '</div>'
+  html += '<p>&copy; pdp8 <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>'
+  html += File.read(File.join(SNIPPETS, 'tail.html'))
+  print_html 'pictures', html
+end
+
 def video_html
   videos = Dir[File.join(MEDIA_DIR, 'videos', '*')].sort.reverse
   html = File.read(File.join(SNIPPETS, 'head.html'))
@@ -146,10 +160,11 @@ def climbing_html
 end
 
 music_html
+picture_html
 video_html
 climbing_html
 
-%w[about code pictures contact].each do |basename|
+%w[about code contact].each do |basename|
   file_html basename
 end
 
diff --git a/html/style.css b/html/style.css
index 05e4964..1d5bfab 100644
--- a/html/style.css
+++ b/html/style.css
@@ -71,6 +71,16 @@ video {
   margin-right: auto;
 }
 
+.gallery {
+  margin: 1em;
+  flex-wrap: wrap;
+  display: flex
+}
+
+.thumb {
+  margin: 2px 3px;
+}
+
 .cover {
   max-height: min(50vh, 90vw);
   max-width: min(50vh, 90vw);