finish photo gallery

i18n/en.toml

@@ -9,3 +9,6 @@ sat = "Sa"
 
 [dates]
 far = "Further Events"
+
+[gallery]
+download = "lol"

i18n/pl.toml

@@ -8,4 +8,7 @@ fri = "Pi"
 sat = "S"
 
 [dates]
-far = "Further Events"
+far = "Dalsze wydarzenia"
+
+[gallery]
+download = "temp"

layouts/photos/list.html

@@ -1,22 +0,0 @@
-{{ partial "header.html" . }}
-		{{ partial "nav.html" . }}
-<div class="content">
-
-<h1>{{ .Title }}</h1>
-
-{{ .Content }}
-
-{{ range.Data.Pages }}
-<article class="post-snippet">
-  <h3>
-    <a href="{{ .RelPermalink }}">{{ .Title }}</a>
-  </h3>
-	<time datetime="{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}">
-		{{ .Date.Format "January 2, 2006" }}
-	</time>
-</article>
-{{ end }}
-
-</div>
-
-{{ partial "footer.html" . }}

layouts/photos/single.html

@@ -1,24 +1,37 @@
 {{ partial "header.html" . }}
-		{{ partial "nav.html" . }}
+{{ partial "nav.html" . }}
 <div class="content">
 
 <h1>{{ .Title }}</h1>
-
 {{ .Content }}
 
+		
 {{ $path := .Page.File.Path | strings.TrimSuffix (path.Ext .Page.File.Path) }}
-{{ $images := where (resources.Match "photos/test1/*" ) "ResourceType" "eq" "image" }}
+{{ $path := printf "%s/*" $path }}
+{{ $images := where (resources.Match $path ) "ResourceType" "eq" "image" }}
+	<div class="gallery">
+	{{ range $images }} 
+		<div class="gallery-item">
+			{{ $thumbnail := .Process "resize x600 q50 jpeg"  }}
+			{{ $public := .Process "jpeg q100" }}
+			<a href="{{ $public.RelPermalink }}" target="_blank"><img src="{{ $thumbnail.RelPermalink }}" /></a>
+    </div>
+	{{ end }}
+  </div>
+
+{{ $file:= .Page.Params.archive  }}
+{{ with $file }}
+
+{{ if not (resources.Get $file) }}
+  {{ errorf "Error: 'file' is a required parameter." }}
+{{ end }}
+
+	<p>{{ i18n "gallery.download" }}</p>
+	{{- with resources.Get $file -}}
+	<a class="button" href="{{ .RelPermalink }}" download>Download {{ path.Ext $file }}</a>
+	{{- end -}}
+{{ end }}
 
-<div class="gallery" >
-{{ range $images }} <div class="gallery-item"> <img src="{{ .RelPermalink }}" /> {{ end }}
 
 </div>
-
-</div>
-
-</div>
-
-<style>
-</style>
-
 {{ partial "footer.html" . }}

layouts/shortcodes/download.html

@@ -0,0 +1,12 @@
+{{ $file:= .Get "file" }}
+{{ if not (resources.Get $file) }}
+  {{ errorf "Error: 'file' is a required parameter." }}
+{{ end }}
+
+	{{- with .Get "message" -}}
+		<p>{{- . -}}</p>
+	{{- end -}}
+
+	{{- with resources.Get $file -}}
+		<a class="button" href="{{ .RelPermalink }}" download>Download {{ path.Ext $file }}</a>
+	{{- end -}}

layouts/shortcodes/maps.html

@@ -52,7 +52,7 @@
 			<div class="grid-item">
 				<div class="child-element"> 
 					{{ with $url }}
-					<a class="map-button" href="{{ $url }}" target="_blank">See on Google Maps</a>
+					<a class="button" href="{{ $url }}" target="_blank">See on Google Maps</a>
 					{{ end }}
 				</div>
 			</div>

static/css/style.css

@@ -8,10 +8,6 @@ html, body {
   padding: 0;
 }
 
-h1,h2,h3,h4,h5,h6 {
-	margin: 0;
-}
-
 body{
   /* font-size: 100%; */
   line-height: 1.5;
@@ -204,6 +200,7 @@ a.home-link { display: none; }
 	footer { 
 		width: calc(85% - 40px); 
 		margin-left: 15%;
+		padding-top: 0;
 	}
 
 	footer.fixed { left: 15%; }
@@ -233,16 +230,12 @@ blockquote {
   border-left-color: var(--alt-bg);
   border-left-width: 5px;
   border-left-style: solid;
-	margin: 0;
+	margin: 20px 0;
+  padding: 20px 0 20px 20px;
 }
 
 blockquote blockquote { margin-left: 20px }
 
-blockquote p {
-  padding: 20px;
-	margin-left: 5px;
-}
-
 /* Maps Shortcode */
 blockquote.location {
 	background-color: var(--alt-bg);
@@ -250,8 +243,12 @@ blockquote.location {
 	padding: 20px;
 }
 
+blockquote p { margin: 0; }
+
 blockquote.location p { padding: inherit; }
 
+.map-txt-grid .child-element a.button { margin: 0; }
+
 
 /* =========================================== Still Needs cleaning  */
 /* Maps shortcode styling */
@@ -266,12 +263,15 @@ blockquote.location p { padding: inherit; }
 	margin: 0;
 }
 	
-.map-button {
+.button {
 	color: var(--fg);
 	background-color: var(--acc-1);
 	padding: 5px;
 	border: solid 3px var(--acc-1);
 	border-radius: 8px;
+	margin-top: 10px;
+	margin-bottom: 10px;
+	display: inline-block;
 }
 
 .map {
@@ -318,7 +318,7 @@ blockquote.location p { padding: inherit; }
 		display: block;
 	}
 	
-	.map-button {
+	.button {
 		position: absolute;
 		bottom: 0;
 		right: 0;
@@ -598,3 +598,46 @@ blockquote.location p { padding: inherit; }
     font-size: 2vh;
     }
 }
+
+
+
+/* pics stuff */
+
+.gallery {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+	width: 100%;
+}
+
+.gallery-item {
+	flex-grow: 1;
+	flex: 1 1 auto;
+	height: 25vh;
+}
+
+.gallery-item img {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+  transition: 140ms;
+	border-radius: 8px;
+}
+
+
+.gallery-item img:hover {
+  transform: scale(1.2);
+  transition: 400ms;
+}
+
+@media screen and (max-width: 755px) {
+
+	.gallery-item {
+		width: 100%;
+		height: auto;
+	}
+
+	.gallery-item img:hover {
+  	transform: none;
+	}
+}