Tentative gallery design

content/_index.md

@@ -0,0 +1,36 @@
+---
+title: "Georges"
+date: 2022-02-02T12:52:22+01:00
+draft: false
+
+georgespics:
+  - name: Autour de la Pra, Alpes
+    osm: https://www.openstreetmap.org/#map=14/45.1612/5.9444
+    date: 2021-06-27
+    pics:
+    - path: img/georges/2021-06-27-pra1.jpg
+    - path: img/georges/2021-06-27-pra2.jpg
+    - path: img/georges/2021-06-27-pra3.jpg
+    - path: img/georges/2021-06-27-pra4.jpg
+    - path: img/georges/2021-06-27-pra5.jpg
+  - name: Pen-Bé, Bretagne
+    osm: https://www.openstreetmap.org/#map=14/47.4205/-2.4575
+    date: 2021-07-05
+    pics:
+    - path: img/georges/2021-07-05-bretagne.jpg
+  - name: Mourèze, Hérault
+    osm: https://www.openstreetmap.org/#map=15/43.6191/3.3517
+    date: 2021-07-27
+    pics:
+    - path: img/georges/2021-07-27-moureze1.jpg
+    - path: img/georges/2021-07-27-moureze2.jpg
+    - path: img/georges/2021-07-27-moureze3.jpg
+  - name: Dent de Crolles, Alpes
+    osm: https://www.openstreetmap.org/#map=15/45.3105/5.8559
+    date: 2021-11-13
+    pics:
+    - path: img/georges/2021-11-13-crolles1.jpg
+    - path: img/georges/2021-11-13-crolles2.jpg
+    - path: img/georges/2021-11-13-crolles3.jpg
+    - path: img/georges/2021-11-13-crolles4.jpg
+---

content/index.md

@@ -1,125 +0,0 @@
----
-title: "Georges"
-date: 2022-02-02T12:52:22+01:00
-draft: false
----
-
-
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur convallis
-malesuada leo. Donec tincidunt gravida ullamcorper. Aenean magna quam, pretium
-at ipsum vel, vulputate viverra nibh. In bibendum nulla id augue feugiat
-consequat. In sed viverra sem, et maximus nunc. Phasellus ut purus at lorem
-rutrum bibendum at vel nisl. Etiam vestibulum dui ligula, at eleifend elit
-mollis eu. Donec lorem urna, lacinia vitae justo quis, pellentesque molestie
-lacus. Donec dapibus pretium diam nec gravida. Quisque cursus sem eu erat
-dictum, et accumsan nunc consequat.
-
-Nam tincidunt, purus ac sagittis blandit, mauris nulla malesuada tortor, eget
-vehicula velit risus at dolor. Nam et imperdiet odio, et congue lorem. Etiam
-volutpat volutpat erat sed scelerisque. Donec tortor dui, laoreet nec suscipit
-et, tristique quis dui. Aenean vulputate ut nisl nec fermentum. Aliquam eget
-ante vitae eros tempor maximus. Sed consequat tempor risus, eu consectetur
-justo placerat faucibus. Donec nisl dolor, dapibus nec ex vel, eleifend
-interdum eros. Sed vel suscipit elit. Phasellus tincidunt porta mi, id tempor
-nunc fringilla in.
-
-Proin tristique enim et fringilla fermentum. Suspendisse potenti. Sed
-malesuada, eros lobortis pellentesque tempus, est turpis eleifend ante, vitae
-cursus tellus elit vel mi. Maecenas vitae risus et orci efficitur eleifend a id
-enim. Cras aliquam sapien nisi. Duis risus tortor, placerat a mauris vitae,
-suscipit interdum lorem. Nulla ultricies ultrices convallis. Curabitur ligula
-nulla, ultrices nec dapibus eget, mattis quis sem. Vivamus consectetur commodo
-elit, accumsan vulputate nisl rutrum sed. Etiam ullamcorper enim ut ligula
-cursus blandit. Quisque iaculis sit amet nunc id blandit. Nunc nec lorem
-libero. Quisque nec hendrerit felis. Sed maximus dapibus metus, et faucibus
-diam. Suspendisse dolor urna, feugiat vitae consectetur a, tempus at ante.
-Aliquam dignissim nibh in purus elementum molestie.
-
-In convallis dapibus dignissim. Duis dignissim tortor bibendum, sollicitudin
-mauris eget, iaculis lacus. In vel consectetur augue. Mauris maximus, urna non
-bibendum iaculis, massa velit consectetur augue, id blandit purus velit sed ex.
-Suspendisse semper quam sed hendrerit porttitor. Aenean aliquam, diam eu
-vestibulum tristique, velit nunc pulvinar ligula, sed feugiat nisl sapien non
-mauris. Pellentesque efficitur ut nunc sit amet elementum. Aenean laoreet
-placerat erat quis fermentum. Integer ultricies iaculis magna, vitae posuere
-erat aliquet et.
-
-Donec scelerisque ultrices libero quis imperdiet. Pellentesque id orci quam.
-Aliquam vel pretium felis, a tempor metus. Nullam bibendum, eros sit amet
-sollicitudin aliquet, neque nisl tempus quam, a malesuada lacus nisl a lacus.
-Mauris volutpat ornare lacus, sit amet pretium eros dapibus eu. Proin ut ante
-scelerisque velit eleifend varius. Maecenas vehicula hendrerit lectus quis
-feugiat.
-
-Proin finibus quam non faucibus vehicula. Nullam vel leo nunc. Nullam sed
-turpis vel erat gravida efficitur ac sed augue. Sed maximus mi ut augue ornare
-tincidunt. Duis id fermentum lacus. Integer vehicula nulla mauris, non blandit
-sem euismod eu. Donec faucibus malesuada placerat. Cras non est scelerisque
-nulla elementum euismod. Nam efficitur quam quis nisi sagittis dapibus. Aliquam
-placerat ipsum ac nunc placerat imperdiet. Fusce mattis tincidunt odio, ut
-faucibus nunc laoreet a. Morbi sodales sodales massa sed tempor. Donec aliquet
-suscipit quam eget malesuada. Quisque commodo nisi sit amet tincidunt
-imperdiet.
-
-Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent placerat
-lectus consequat, iaculis ante vitae, lobortis velit. Integer sed nibh quis sem
-condimentum luctus. Nunc ut luctus nibh. Suspendisse pellentesque tortor id
-ligula luctus tincidunt. Donec turpis mi, auctor non ligula quis, gravida
-euismod est. Proin ullamcorper velit lacus, vitae porta tortor ultrices sit
-amet. Nunc augue tellus, consectetur eu urna vel, auctor porta nunc. Duis
-vestibulum at urna et aliquet. Quisque scelerisque, tellus id interdum dapibus,
-libero arcu pretium lorem, non ultricies turpis urna id ante. Cras et arcu
-egestas, luctus dolor eget, cursus orci. In condimentum tempus pharetra.
-Pellentesque auctor metus nec augue condimentum, et posuere felis fermentum.
-Nullam at sagittis mauris.
-
-Donec tincidunt leo a nisl commodo finibus. Mauris tincidunt nibh enim, eget
-interdum dui imperdiet quis. Donec aliquet augue vel ex euismod, id iaculis
-elit blandit. Donec sit amet venenatis turpis, vel mollis dolor. Integer purus
-sem, malesuada vitae varius vitae, auctor eget dolor. Aliquam ullamcorper nisl
-id sem iaculis vehicula. Mauris imperdiet, quam sodales blandit vestibulum,
-nisi dui rhoncus felis, sit amet commodo dolor lorem quis elit. Sed consequat
-et ipsum eget hendrerit. Duis feugiat odio arcu, vitae aliquam arcu bibendum
-congue.
-
-Vestibulum commodo sed mauris a facilisis. Quisque vitae turpis volutpat,
-pharetra tortor eget, cursus urna. Cras lorem quam, ornare at pellentesque ut,
-rhoncus sed dolor. Ut quis felis urna. Vivamus quis risus fringilla, elementum
-velit at, elementum diam. Curabitur viverra urna vitae rhoncus elementum.
-Curabitur et vestibulum mauris. Aliquam molestie neque purus, porta ultrices ex
-mollis vel. Sed malesuada quam tortor.
-
-Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur
-interdum rhoncus rhoncus. Phasellus vestibulum erat ut laoreet tristique.
-Maecenas dignissim ultricies mauris eget feugiat. Sed sem odio, pulvinar ac
-mauris ut, volutpat rhoncus mauris. Nulla facilisi. Nulla lacus sem, pharetra
-et lacus pharetra, sodales convallis nulla. Integer id odio luctus, venenatis
-nulla a, cursus diam. Nulla nibh mauris, accumsan vel ullamcorper eu, molestie
-et mauris. Morbi at purus purus. Sed non metus mattis purus mattis sodales. Ut
-aliquam, ex a mattis aliquet, dolor eros tempus sem, a convallis quam odio at
-diam. In suscipit erat at nunc scelerisque consectetur. Cras facilisis quis
-turpis ac posuere. Sed ut euismod lectus. Suspendisse sit amet lacinia magna.
-
-Donec placerat nisi sit amet elit interdum interdum. In congue nunc eu lorem
-lobortis blandit. Nam lobortis lobortis lacus consequat tincidunt. Integer
-sapien nisl, scelerisque in neque ut, euismod fringilla mi. Vestibulum sed nisl
-quis libero laoreet tempor ut vitae ante. Phasellus id quam vel felis convallis
-semper eget sed dolor. Nullam nec commodo diam, id dignissim velit. Phasellus
-semper tortor ipsum. Praesent scelerisque orci vitae quam vestibulum, sed
-dictum quam tempus. Aenean porttitor ut nunc ut tempor. Nulla facilisi. Nullam
-at sem id quam fringilla sagittis et eget diam. Vivamus fermentum laoreet elit,
-ut convallis odio facilisis eu.
-
-Mauris ut vulputate diam. Donec in consectetur justo. Vivamus feugiat, ligula
-quis suscipit congue, massa purus luctus lorem, luctus pellentesque dolor magna
-sed odio. Curabitur tempus dolor justo, vitae feugiat risus placerat sit amet.
-Sed pellentesque aliquet velit vitae auctor. Aliquam porttitor, est in dictum
-vestibulum, elit ligula varius metus, vitae sollicitudin orci lacus at arcu.
-Cras nisl justo, aliquam ut diam quis, blandit interdum justo. Donec fringilla,
-velit non mattis mollis, lacus sapien cursus dolor, sed interdum tortor nibh id
-diam. Vestibulum rutrum sodales ipsum, quis aliquam odio pharetra at. Nullam
-interdum nibh augue, vitae accumsan tortor elementum at. Integer in enim
-porttitor est vulputate sollicitudin. Duis non pretium ipsum. Donec vitae purus
-sit amet sem placerat viverra vel sed ligula. Integer fermentum finibus augue,
-sit amet blandit lacus sagittis non. 

layouts/_default/baseof.html

@@ -26,5 +26,7 @@
     {{ block "footer" . }}
       {{ partial "site-footer.html" . }}
     {{ end }}
+    {{ block "extrajs" . }}
+    {{ end }}
   </body>
 </html>

layouts/index.html

@@ -1,3 +1,86 @@
+{{ define "pagename" -}}
+<!-- -->
+{{- end }}
+
 {{ define "main" }}
   {{ .Content }}
+  <div
+      id="blueimp-gallery"
+      class="blueimp-gallery blueimp-gallery-controls"
+      aria-label="image gallery"
+      aria-modal="true"
+      role="dialog"
+      >
+      <div class="slides" aria-live="polite"></div>
+      <h3 class="title"></h3>
+      <a
+          class="prev"
+          aria-controls="blueimp-gallery"
+          aria-label="previous slide"
+          aria-keyshortcuts="ArrowLeft"
+          ></a>
+      <a
+          class="next"
+          aria-controls="blueimp-gallery"
+          aria-label="next slide"
+          aria-keyshortcuts="ArrowRight"
+          ></a>
+      <a
+          class="close"
+          aria-controls="blueimp-gallery"
+          aria-label="close"
+          aria-keyshortcuts="Escape"
+          ></a>
+      <a
+          class="play-pause"
+          aria-controls="blueimp-gallery"
+          aria-label="play slideshow"
+          aria-keyshortcuts="Space"
+          aria-pressed="false"
+          role="button"
+          ></a>
+      <ol class="indicator"></ol>
+  </div>
+
+  {{ range .Params.georgespics }}
+  <div class="galleryblock">
+    <div class="blockhead">
+      <h2>
+        {{- .name }}
+        {{ with .osm -}}
+          <a class="osmlink" href="{{ . }}"><i class="fa fa-map-marker" aria-hidden="true"></i>
+          </a>
+        {{- end -}}
+      </h2>
+      <div class="gallerydate">
+        {{ time.Format "January 2006" .date }}
+      </div>
+    </div>
+
+    <div class="gallery">
+      {{ range .pics }}
+      <a href="{{ .path }}">
+        <img src="{{ .path }}" />
+      </a>
+      {{ end }}
+    </div>
+  </div>
+  {{ end }}
+{{ end }}
+
+{{ define "extrajs" }}
+<script src="blueimp/js/blueimp-gallery.min.js"></script>
+<script>
+    var galleries = document.getElementsByClassName('gallery');
+    for(gallery of galleries) {
+      gallery.onclick = function (event) {
+        event = event || window.event
+        var target = event.target || event.srcElement
+        var link = target.src ? target.parentNode : target
+        var options = { index: link, event: event }
+        var links = this.getElementsByTagName('a')
+        blueimp.Gallery(links, options)
+      }
+    }
+</script>
 {{ end }}

scss/_params.scss

@@ -9,6 +9,12 @@ $width_xlarge: 1250px;
 $width_large: 1000px;
 $width_med: 650px;
 
+$gallery_2col: 400px;
+$gallery_3col: 700px;
+$gallery_autocol: 1000px;
+$gallery_autocol_minwidth: 200px;
+$gallery_autocol_maxwidth: 350px;
+
 $font_size_small: 10pt;
 $font_size_med: 11pt;
 $font_size_large: 12pt;

scss/style.scss

@@ -1,6 +1,7 @@
 // vim: tabstop=2 shiftwidth=2 expandtab
 
 @import url('fonts.css');
+@import url('../blueimp/css/blueimp-gallery.min.css');
 @import 'params';
 
 html {
@@ -75,6 +76,13 @@ body {
   }
 }
 
+#content {
+  margin: 30px 10px;
+
+  @media (min-width: $width_med) {
+    margin: 30px 20px;
+  }
+}
 
 footer {
   font-size: 0.7em;
@@ -98,6 +106,64 @@ footer {
   }
 }
 
+.galleryblock {
+  .blockhead {
+    display: flex;
+    flex-direction: column;
+
+    h2 {
+      margin: 0;
+    }
+    .gallerydate {
+      align-self: flex-end;
+    }
+    margin: 15px 0;
+    gap: 5px;
+    margin-top: 35px;
+
+    @media (min-width: $width_med) {
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+
+      .gallerydate {
+        align-self: auto;
+      }
+    }
+  }
+  .gallery {
+    display: flex;
+    align-items: stretch;
+    flex-direction: column;
+    gap: 15px;
+    @media (min-width: $gallery_2col) {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+    }
+    @media (min-width: $gallery_3col) {
+      grid-template-columns: repeat(3, 1fr);
+    }
+    @media (min-width: $gallery_autocol) {
+      grid-template-columns: repeat(
+        auto-fill,
+        minmax($gallery_autocol_minwidth, 1fr)
+      );
+    }
+    a {
+      @media (min-width: $gallery_autocol) {
+        max-width: $gallery_autocol_maxwidth;
+      }
+    }
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      border-radius: 10px;
+      aspect-ratio: 1/1;
+    }
+  }
+}
+
 a, a:visited {
   color: $link_color;
 }

static/css/style.css

@@ -1,4 +1,5 @@
 @import url("fonts.css");
+@import url("../blueimp/css/blueimp-gallery.min.css");
 html {
   box-sizing: border-box; }
 
@@ -57,6 +58,11 @@ body {
     transition: none .224s ease-in-out;
     transition-property: background-color, font-size, height; }
 
+#content {
+  margin: 30px 10px; }
+  @media (min-width: 650px) {
+    #content {
+      margin: 30px 20px; } }
 footer {
   font-size: 0.7em;
   display: flex;
@@ -73,5 +79,47 @@ footer {
     @media (min-width: 650px) {
       footer > div {
         margin: 0 15px; } }
+.galleryblock .blockhead {
+  display: flex;
+  flex-direction: column;
+  margin: 15px 0;
+  gap: 5px;
+  margin-top: 35px; }
+  .galleryblock .blockhead h2 {
+    margin: 0; }
+  .galleryblock .blockhead .gallerydate {
+    align-self: flex-end; }
+  @media (min-width: 650px) {
+    .galleryblock .blockhead {
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center; }
+      .galleryblock .blockhead .gallerydate {
+        align-self: auto; } }
+.galleryblock .gallery {
+  display: flex;
+  align-items: stretch;
+  flex-direction: column;
+  gap: 15px; }
+  @media (min-width: 400px) {
+    .galleryblock .gallery {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr); } }
+  @media (min-width: 700px) {
+    .galleryblock .gallery {
+      grid-template-columns: repeat(3, 1fr); } }
+  @media (min-width: 1000px) {
+    .galleryblock .gallery {
+      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } }
+  @media (min-width: 1000px) {
+    .galleryblock .gallery a {
+      max-width: 350px; } }
+  .galleryblock .gallery img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 10px;
+    aspect-ratio: 1/1; }
+
 a, a:visited {
   color: #07a; }