From 487f37bc5e70946c4b10019cd04844897537f58e Mon Sep 17 00:00:00 2001
From: Paul Mougin <paul.mougin@gmx.com>
Date: Wed, 12 Oct 2022 13:58:28 +0200
Subject: [PATCH] Change Gallery Design & Add Video into Gallery

---
 content/dates/2022-07-30-Gazafonds.md    |  8 ++++--
 content/dates/2022-10-11-MatinaleOzK.md  |  2 +-
 content/gallery/_index.md                | 26 +++++++++++++----
 content/repository/_index.md             |  6 ++--
 layouts/shortcodes/figure.html           |  2 +-
 layouts/shortcodes/gallery.html          |  4 +--
 static/css/hugo-easy-gallery.css         | 36 +++++++++++-------------
 static/css/leaflet.extra-markers.min.css |  8 ------
 static/css/ozk.css                       | 22 ++++++++++++++-
 themes/gokarna                           |  2 +-
 10 files changed, 70 insertions(+), 46 deletions(-)
 delete mode 100755 static/css/leaflet.extra-markers.min.css

diff --git a/content/dates/2022-07-30-Gazafonds.md b/content/dates/2022-07-30-Gazafonds.md
index 47fa27c..8877030 100644
--- a/content/dates/2022-07-30-Gazafonds.md
+++ b/content/dates/2022-07-30-Gazafonds.md
@@ -11,6 +11,8 @@ Festival Rock à Fond organisé par les Gazafond à Manziat (01570)
 {{<load-photoswipe>}}
 
 ### Photos
-{{<figure src="/images/2022-07-30/IMG_20220730_200333.jpg">}}
-{{<figure src="/images/2022-07-30/IMG_20220730_202412.jpg">}}
-{{<figure src="/images/2022-07-30/IMG_20220730_202417.jpg">}}
\ No newline at end of file
+{{<gallery>}}
+  {{<figure src="/images/2022-07-30/IMG_20220730_200333.jpg">}}
+  {{<figure src="/images/2022-07-30/IMG_20220730_202412.jpg">}}
+  {{<figure src="/images/2022-07-30/IMG_20220730_202417.jpg">}}
+{{</gallery>}}
\ No newline at end of file
diff --git a/content/dates/2022-10-11-MatinaleOzK.md b/content/dates/2022-10-11-MatinaleOzK.md
index e5fee09..e6c51ad 100644
--- a/content/dates/2022-10-11-MatinaleOzK.md
+++ b/content/dates/2022-10-11-MatinaleOzK.md
@@ -26,5 +26,5 @@ Matinale Musicale de 7:00 à 8:00 place Charles Hernu à Charpennes, sur une id
 {{< /gallery >}}
 
 ## Vidéo
-{{< peertube src="https://tube.pustule.org/videos/embed/7c3bd887-bf16-4acd-bc6b-baa581311b87?warningTitle=0&p2p=0" >}}
+{{< peertube class="marginHorizontal" src="https://tube.pustule.org/videos/embed/7c3bd887-bf16-4acd-bc6b-baa581311b87?warningTitle=0&p2p=0" >}}
 
diff --git a/content/gallery/_index.md b/content/gallery/_index.md
index d5ceb41..dbdc524 100644
--- a/content/gallery/_index.md
+++ b/content/gallery/_index.md
@@ -1,5 +1,5 @@
 ---
-title: "Nos Photos"
+title: "Nos Photos & Vidéos"
 metaTitle: "OzK - Nos Photos"
 type: page
 ---
@@ -7,20 +7,34 @@ type: page
 
 Vous avez des photos, vidéos ou enregistrements de nous qui traînent sur votre téléphone intelligent ? [Faites-les-nous parvenir par mail !](mailto:pot.punkuezrevo@overzeuknup.top?subject=Photos%20et%20Vidéos%20OzK)
 
+### Matinale OzK - 11 Octobre 2022
+
+{{<gallery class="galleryMarginHorizontal" >}}
+  {{<figure src="/images/2022-10-11/20221011_073144.jpg" boxClass="twoTilesBoxes">}}
+  {{<figure src="/images/2022-10-11/20221011_075140.jpg" boxClass="twoTilesBoxes">}}
+{{</gallery>}}
+{{< peertube class="marginHorizontal" src="https://tube.pustule.org/videos/embed/7d1fa334-04a4-4312-9e03-4f02b287196e?warningTitle=0&p2p=0" >}}
+
+
 ### Rock à Fond - Manzia - 30 juillet 2022
 
-{{<figure src="/images/2022-07-30/IMG_20220730_202417.jpg">}}
+{{<gallery class="galleryMarginHorizontal" >}}
+  {{<figure src="/images/2022-07-30/IMG_20220730_200333.jpg" boxClass="twoTilesBoxes">}}
+  {{<figure src="/images/2022-07-30/IMG_20220730_202417.jpg" boxClass="twoTilesBoxes">}}
+{{</gallery>}}
 
 ### Pont de l'Université - 15 avril 2022
 
-{{<figure src="/images/2022-04-15/Ds11mXklAMXQbNWnSH6V.jpg">}}
+{{<figure class="marginHorizontal" src="/images/2022-04-15/Ds11mXklAMXQbNWnSH6V.jpg">}}
 
 ### Passerelle du Palais de Justice - 12 décembre 2021
 
-{{<figure src="/images/2021-12-12/IMG_20211212_133505.jpg">}}
-{{<figure src="/images/2021-12-12/IMG_20211212_133511.jpg">}}
+{{<gallery class="galleryMarginHorizontal" >}}
+  {{<figure src="/images/2021-12-12/IMG_20211212_133505.jpg" boxClass="twoTilesBoxes">}}
+  {{<figure src="/images/2021-12-12/IMG_20211212_133511.jpg" boxClass="twoTilesBoxes">}}
+{{</gallery>}}
 
 ### Autres
 
-{{<figure src="/images/2020-01-01%20Nouvel%20An.jpg">}}
+{{<figure class="marginHorizontal" src="/images/2020-01-01%20Nouvel%20An.jpg">}}
 
diff --git a/content/repository/_index.md b/content/repository/_index.md
index 9d61c88..71ee562 100644
--- a/content/repository/_index.md
+++ b/content/repository/_index.md
@@ -9,15 +9,15 @@ type: page
 
 **La St Funny du Nouveau Knup**  
 
-{{<audio src="/audio/StFunny.mp3" caption="Symphonie du Nouveau Monde de Dvořák, dérangée par OzK - 2022 OzK">}}
+{{<audio class="marginHorizontal" src="/audio/StFunny.mp3" caption="Symphonie du Nouveau Monde de Dvořák, dérangée par OzK - 2022 OzK">}}
 
 **Hashi de T&Tea Fumé**  
 
-{{<audio src="/audio/TNT.mp3" caption="TNT de ACDC feat Smoke on the Water de Deep Purple, dérangés par Debs - 2022 OzK">}}
+{{<audio class="marginHorizontal" src="/audio/TNT.mp3" caption="TNT de ACDC feat Smoke on the Water de Deep Purple, dérangés par Debs - 2022 OzK">}}
 
 **Deudeuche Land**  
 
-{{<audio src="/audio/DeudeucheLand.mp3" caption="Deutschland de Rammstein, dérangé par PVR - 2022 OzK">}}
+{{<audio class="marginHorizontal" src="/audio/DeudeucheLand.mp3" caption="Deutschland de Rammstein, dérangé par PVR - 2022 OzK">}}
 
 # Nos Partitions
 
diff --git a/layouts/shortcodes/figure.html b/layouts/shortcodes/figure.html
index 3676c68..e58ac03 100644
--- a/layouts/shortcodes/figure.html
+++ b/layouts/shortcodes/figure.html
@@ -8,7 +8,7 @@ Documentation and licence at https://github.com/liwenyip/hugo-easy-gallery/
 {{- $.Page.Scratch.Add "figurecount" 1 -}}
 <!-- use either src or link-thumb for thumbnail image -->
 {{- $thumb := .Get "src" | default (printf "%s." (.Get "thumb") | replace (.Get "link") ".") }}
-<div class="box{{ with .Get "caption-position" }} fancy-figure caption-position-{{.}}{{end}}{{ with .Get "caption-effect" }} caption-effect-{{.}}{{end}}" {{ with .Get "width" }}style="max-width:{{.}}"{{end}}>
+<div class="{{ with .Get "boxClass" | default "threeTilesBoxes" }}{{.}}{{end}} {{ with .Get "caption-position" }} fancy-figure caption-position-{{.}}{{end}}{{ with .Get "caption-effect" }} caption-effect-{{.}}{{end}}" {{ with .Get "width" }}style="max-width:{{.}}"{{end}}>
   <figure {{ with .Get "class" }}class="{{.}}"{{ end }} itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
     <div class="img"{{ if .Parent }} style="background-image: url('{{ $thumb | relURL }}');"{{ end }}{{ with .Get "size" }} data-size="{{.}}"{{ end }}>
       <img itemprop="thumbnail" src="{{ $thumb | relURL }}" {{ with .Get "alt" | default (.Get "caption") }}alt="{{.}}"{{ end }}/><!-- <img> hidden if in .gallery -->
diff --git a/layouts/shortcodes/gallery.html b/layouts/shortcodes/gallery.html
index 6c644b9..1a361f8 100644
--- a/layouts/shortcodes/gallery.html
+++ b/layouts/shortcodes/gallery.html
@@ -6,7 +6,7 @@ Documentation and licence at https://github.com/liwenyip/hugo-easy-gallery/
 {{- if not ($.Page.Scratch.Get "figurecount") }}<link rel="stylesheet" href={{ "css/hugo-easy-gallery.css" | relURL }} />{{ end }}
 {{- $.Page.Scratch.Add "figurecount" 1 }}
 {{ $baseURL := .Site.BaseURL }}
-<div class="gallery caption-position-{{ with .Get "caption-position" | default "bottom" }}{{.}}{{end}} caption-effect-{{ with .Get "caption-effect" | default "slide" }}{{.}}{{end}} hover-effect-{{ with .Get "hover-effect" | default "zoom" }}{{.}}{{end}} {{ if ne (.Get "hover-transition") "none" }}hover-transition{{end}}" itemscope itemtype="http://schema.org/ImageGallery">
+<div class="gallery {{ with .Get "class"}}{{.}}{{end}}  caption-position-{{ with .Get "caption-position" | default "bottom" }}{{.}}{{end}} caption-effect-{{ with .Get "caption-effect" | default "slide" }}{{.}}{{end}} hover-effect-{{ with .Get "hover-effect" | default "zoom" }}{{.}}{{end}} {{ if ne (.Get "hover-transition") "none" }}hover-transition{{end}}" itemscope itemtype="http://schema.org/ImageGallery">
 	{{- with (.Get "dir") -}}
 		<!-- If a directory was specified, generate figures for all of the images in the directory -->
 		{{- $files := readDir (print "/static/" .) }}
@@ -21,7 +21,7 @@ Documentation and licence at https://github.com/liwenyip/hugo-easy-gallery/
 				{{- $thumb := .Name | replaceRE "(\\.)" ($thumbext | printf "%s.") }}<!-- filename of thumbnail image -->
 				{{- $thumbexists := where $files "Name" $thumb }}<!-- does a thumbnail image exist? --> 
 				{{- $thumbURL := print $baseURL ($.Get "dir") "/" $thumb | absURL }}<!-- absolute URL to thumbnail image -->
-				<div class="box">
+				<div class="{{ with .Get "boxClass" | default "threeTilesBoxes" }}{{.}}{{end}}">
 				  <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
 				    <div class="img" style="background-image: url('{{ if $thumbexists }}{{ $thumbURL }}{{ else }}{{ $linkURL }}{{ end }}');" >
 				      <img itemprop="thumbnail" src="{{ if $thumbexists }}{{ $thumbURL }}{{ else }}{{ $linkURL }}{{ end }}" alt="{{ $caption }}" /><!-- <img> hidden if in .gallery -->
diff --git a/static/css/hugo-easy-gallery.css b/static/css/hugo-easy-gallery.css
index bc66ebf..64bc314 100644
--- a/static/css/hugo-easy-gallery.css
+++ b/static/css/hugo-easy-gallery.css
@@ -9,8 +9,6 @@ Grid Layout Styles
 */
 .gallery {
     overflow: hidden;
-    margin: 10px;
-    max-width: 768px;
 }
 .gallery .box {
     float: left;
@@ -19,26 +17,24 @@ Grid Layout Styles
     width: 100%;
     padding-bottom: 100%; 
 }
-@media only screen and (min-width : 365px) {
-    /* Tablet view: 2 tiles */
-    .gallery .box {
-        width: 50%;
-        padding-bottom: 50%;
-    }
+
+.gallery .twoTilesBoxes {
+    float: left;
+    position: relative;
+    width: 50%;
+    padding-bottom: 50%;
 }
-@media only screen and (min-width : 480px) {
-    /* Small desktop / ipad view: 3 tiles */
-    .gallery .box {
-        width: 33.3%;
-        padding-bottom: 33.3%; /*  */
-    }
+
+.gallery .threeTilesBoxes {
+    float: left;
+    position: relative;
+    width: 33.3%;
+    padding-bottom: 33.3%; /*  */
 }
-@media only screen and (min-width : 9999px) {
-   /* Medium desktop: 4 tiles */
-   .box {
-      width: 25%;
-      padding-bottom: 25%;
-   }
+
+.gallery .fourTilesBoxes {
+    width: 25%;
+    padding-bottom: 25%;
 }
 
 /*
diff --git a/static/css/leaflet.extra-markers.min.css b/static/css/leaflet.extra-markers.min.css
deleted file mode 100755
index 2638d59..0000000
--- a/static/css/leaflet.extra-markers.min.css
+++ /dev/null
@@ -1,8 +0,0 @@
-/*!
- * leaflet-extra-markers
- * Custom Markers for Leaflet JS based on Awesome Markers
- * Leaflet ExtraMarkers
- * https://github.com/coryasilva/Leaflet.ExtraMarkers/
- * @author coryasilva <https://github.com/coryasilva>
- * @version 1.2.1
- */.extra-marker{background:url("../img/markers_default.png") no-repeat 0 0;width:35px;height:46px;position:absolute;left:0;top:0;display:block;text-align:center}  .extra-marker-shadow{background:url("../img/markers_shadow.png") no-repeat 0 0;width:36px;height:16px}@media (min--moz-device-pixel-ratio:1.5),(-webkit-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5),(min-resolution:1.5dppx){.extra-marker{background-image:url("../img/markers_default@2x.png");background-size:540px 184px}  .extra-marker-shadow{background-image:url("../img/markers_shadow@2x.png");background-size:35px 16px}}  .extra-marker.extra-marker-svg{background:none}  .extra-marker.extra-marker-svg .svg-inline--fa,.extra-marker.extra-marker-svg i{position:absolute;left:0;width:35px}  .extra-marker .svg-inline--fa,.extra-marker i{color:#fff;margin-top:7px;display:inline-block;font-size:14px}  .extra-marker .svg-inline--fa{margin-top:10px;background:none}  .extra-marker .svg-inline--fa,.extra-marker i.fa,.extra-marker i.fab,.extra-marker i.fas,.extra-marker i.far,.extra-marker i.fal{margin-top:10px}  .extra-marker .svg-inline--fa.fa-2x,.extra-marker i.fa.fa-2x,.extra-marker i.fab.fa-2x,.extra-marker i.fas.fa-2x,.extra-marker i.far.fa-2x,.extra-marker i.fal.fa-2x{font-size:16px;margin-top:9px}  .extra-marker .svg-inline--fa.fa-3x,.extra-marker i.fa.fa-3x,.extra-marker i.fab.fa-3x,.extra-marker i.fas.fa-3x,.extra-marker i.far.fa-3x,.extra-marker i.fal.fa-3x{font-size:18px;margin-top:9px}  .extra-marker .svg-inline--fa.fa-4x,.extra-marker i.fa.fa-4x,.extra-marker i.fab.fa-4x,.extra-marker i.fas.fa-4x,.extra-marker i.far.fa-4x,.extra-marker i.fal.fa-4x{font-size:20px;margin-top:8px}  .extra-marker .svg-inline--fa.fa-5x,.extra-marker i.fa.fa-5x,.extra-marker i.fab.fa-5x,.extra-marker i.fas.fa-5x,.extra-marker i.far.fa-5x,.extra-marker i.fal.fa-5x{font-size:24px;margin-top:6px}  .extra-marker .fa-number:before{content:attr(number)}  .extra-marker i.glyphicon{margin-top:10px}  .extra-marker i.icon{margin-right:0;opacity:1}  .extra-marker-circle-red{background-position:0 0}  .extra-marker-circle-orange-dark{background-position:-36px 0}  .extra-marker-circle-orange{background-position:-72px 0}  .extra-marker-circle-yellow{background-position:-108px 0}  .extra-marker-circle-blue-dark{background-position:-144px 0}  .extra-marker-circle-blue{background-position:-180px 0}  .extra-marker-circle-cyan{background-position:-216px 0}  .extra-marker-circle-purple{background-position:-252px 0}  .extra-marker-circle-violet{background-position:-288px 0}  .extra-marker-circle-pink{background-position:-324px 0}  .extra-marker-circle-green-dark{background-position:-360px 0}  .extra-marker-circle-green{background-position:-396px 0}  .extra-marker-circle-green-light{background-position:-432px 0}  .extra-marker-circle-black{background-position:-468px 0}  .extra-marker-circle-white{background-position:-504px 0}  .extra-marker-square-red{background-position:0 -46px}  .extra-marker-square-orange-dark{background-position:-36px -46px}  .extra-marker-square-orange{background-position:-72px -46px}  .extra-marker-square-yellow{background-position:-108px -46px}  .extra-marker-square-blue-dark{background-position:-144px -46px}  .extra-marker-square-blue{background-position:-180px -46px}  .extra-marker-square-cyan{background-position:-216px -46px}  .extra-marker-square-purple{background-position:-252px -46px}  .extra-marker-square-violet{background-position:-288px -46px}  .extra-marker-square-pink{background-position:-324px -46px}  .extra-marker-square-green-dark{background-position:-360px -46px}  .extra-marker-square-green{background-position:-396px -46px}  .extra-marker-square-green-light{background-position:-432px -46px}  .extra-marker-square-black{background-position:-468px -46px}  .extra-marker-square-white{background-position:-504px -46px}  .extra-marker-star-red{background-position:0 -92px}  .extra-marker-star-orange-dark{background-position:-36px -92px}  .extra-marker-star-orange{background-position:-72px -92px}  .extra-marker-star-yellow{background-position:-108px -92px}  .extra-marker-star-blue-dark{background-position:-144px -92px}  .extra-marker-star-blue{background-position:-180px -92px}  .extra-marker-star-cyan{background-position:-216px -92px}  .extra-marker-star-purple{background-position:-252px -92px}  .extra-marker-star-violet{background-position:-288px -92px}  .extra-marker-star-pink{background-position:-324px -92px}  .extra-marker-star-green-dark{background-position:-360px -92px}  .extra-marker-star-green{background-position:-396px -92px}  .extra-marker-star-green-light{background-position:-432px -92px}  .extra-marker-star-black{background-position:-468px -92px}  .extra-marker-star-white{background-position:-504px -92px}  .extra-marker-penta-red{background-position:0 -138px}  .extra-marker-penta-orange-dark{background-position:-36px -138px}  .extra-marker-penta-orange{background-position:-72px -138px}  .extra-marker-penta-yellow{background-position:-108px -138px}  .extra-marker-penta-blue-dark{background-position:-144px -138px}  .extra-marker-penta-blue{background-position:-180px -138px}  .extra-marker-penta-cyan{background-position:-216px -138px}  .extra-marker-penta-purple{background-position:-252px -138px}  .extra-marker-penta-violet{background-position:-288px -138px}  .extra-marker-penta-pink{background-position:-324px -138px}  .extra-marker-penta-green-dark{background-position:-360px -138px}  .extra-marker-penta-green{background-position:-396px -138px}  .extra-marker-penta-green-light{background-position:-432px -138px}  .extra-marker-penta-black{background-position:-468px -138px}  .extra-marker-penta-white{background-position:-504px -138px}
diff --git a/static/css/ozk.css b/static/css/ozk.css
index 1ac7200..430d7a4 100644
--- a/static/css/ozk.css
+++ b/static/css/ozk.css
@@ -30,10 +30,30 @@ img[alt=LogoAbout] {
   padding-bottom: 56.25%; /* 16:9, for an aspect ratio of 1:1 change to this value to 100% */ 
 }
   
-iframe{
+iframe {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
+}
+
+figure { 
+  margin: 0px;
+}
+
+.marginHorizontal {
+  margin-left: 20px;
+  margin-right: 20px;
+}
+
+.galleryMarginHorizontal {
+  margin-left: 15px;
+  margin-right: 15px;
+  margin-bottom: 5px;
+}
+
+.leaflet-map {
+  margin-left: 20px;
+  margin-right: 20px;
 }
\ No newline at end of file
diff --git a/themes/gokarna b/themes/gokarna
index c9ee674..0bc5925 160000
--- a/themes/gokarna
+++ b/themes/gokarna
@@ -1 +1 @@
-Subproject commit c9ee674b2d9edbf62dc21ab2a0bf23c1e4b7f299
+Subproject commit 0bc592530bb99af88d49adf4e54f1e130a4ccfa8