First draft of gallerie

assets/css/main.css

@@ -507,28 +507,48 @@ footer {
     }
 }
 
-.galerie-table {    
+.galerie-table {
-  align-items: center;
+    columns: 3 300px;
-  display:inline-block;    
+    column-gap: 1.5rem;
-  margin-right: auto;    
+    width: 90%;
-  margin-left: auto;  
+    margin: 10px auto;
-   line-height: 0;       
+    line-height: 0;
-    -webkit-column-count: 5;    
-    -webkit-column-gap: 0px;    
-    -moz-column-count: 5;
-    -moz-column-gap: 0px;
-     column-count: 5;    
-     column-gap: 0px;    
-}  
-
-.galerie-entry {
-  padding: 8px;
 }
 
-.galerie-image {    
+.galerie-entry {
-  width: 100%;
+    cursor: pointer;
-  border-radius: 8px;
+    display: inline-block;
-  box-shadow: 0 0 16px #333;
+    width: 100%;
-   width: 100% !important;    
+    overflow: hidden;
-   height: auto !important;  
+    height: 100%;
-}  
+    margin: 10px 0;
+    border-radius: 8px;
+    box-shadow: 0 0 16px #333;
+}
+
+.galerie-image {
+    width: 100%;
+    display: inline-block;
+    border: 0;
+    position: relative;
+    -webkit-transition: all 200ms ease-in;
+    -webkit-transform: scale(1);
+    -ms-transition: all 200ms ease-in;
+    -ms-transform: scale(1);
+    -moz-transition: all 200ms ease-in;
+    -moz-transform: scale(1);
+    transition: all 200ms ease-in;
+    transform: scale(1);
+}
+
+.galerie-image:hover {
+    z-index: 2;
+    -webkit-transition: all 200ms ease-in;
+    -webkit-transform: scale(1.1);
+    -ms-transition: all 200ms ease-in;
+    -ms-transform: scale(1.1);
+    -moz-transition: all 200ms ease-in;
+    -moz-transform: scale(1.1);
+    transition: all 200ms ease-in;
+    transform: scale(1.1);
+}

content/galerie/index.md

@@ -7,8 +7,11 @@ type: "galerie"
 
 |   |   |  |
 | - | - | - |
-| Test 2 | volcan4.jpeg |
+| v | volcanv1.jpeg |
-| Test 1 | volcan1.jpeg | 
+| h | volcanh1.jpeg |
-| Test 2 | volcan3.jpeg | 
+| h | volcanv2.jpeg |
-| Test 2 | volcan2.jpeg | 
+| h | volcanh2.jpeg |
-| Test 2 | volcan5.jpeg |
+| h | volcanv3.jpeg |
+| h | volcanh3.jpeg |
+| h | volcanv4.jpeg |
+| h | volcanh4.jpeg |

layouts/galerie/_markup/render-table.html

@@ -1,13 +1,16 @@
 <div class="galerie-table">
-  {{ range .TBody }}
+    {{ range .TBody }}
-    {{ $name := ((index . 0).Text | safeHTML ) }}
+        {{ $name := ((index . 0).Text | safeHTML ) }}
-    {{ $link := ((index . 1).Text | safeURL ) }}
+        {{ $link := ((index . 1).Text | safeURL ) }}
-
+        <div class="galerie-entry">
-
+            {{ if ne $link "" }}
-    <div class="galerie-entry">
+                <a href="{{ $link }}"
-      {{ if ne $link "" }}
+                    ><img
-        <img class="galerie-image" src="{{ $link }}" alt="{{ $name }}" />
+                        class="galerie-image"
-      {{ end }}
+                        src="{{ $link }}"
-    </div>
+                        alt="{{ $name }}"
-  {{ end }}
+                /></a>
+            {{ end }}
+        </div>
+    {{ end }}
 </div>