summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorpdp8 <pdp8@pdp8.info>2024-02-02 21:52:23 +0100
committerpdp8 <pdp8@pdp8.info>2024-02-02 21:52:23 +0100
commit5df93a11a4447f31f275801c333bb2865a779377 (patch)
treef25e421d20e775b0a78ac18b4b2a6188d0881025
parent9bc8be6e2660c9225420089ff00a1215c4928ef7 (diff)
picture gallery
-rwxr-xr-xhtml.rb19
-rw-r--r--html/style.css10
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);