Add gallery list

content/galerie/_index.md

@@ -1,4 +1,7 @@
 +++
 template = "gallery-list.html"
 page_template = "gallery.html"
+sort_by = "date"
 +++
+
+Výběr těch nejlepších fotek k zavzpomínání.

sass/_gallery.scss

@@ -2,16 +2,63 @@
 	h1 {
 		margin-bottom: 0;
 	}
+
 	.subtitle {
 		font-weight: bold;
 		font-size: 1.2em;
 		margin-bottom: 1em;
 	}
-}
 
-.gallery.grid {
 	img {
 		display: block;
 		border-radius: .5em;
+		box-shadow: 0 0 10px rgba(0,0,0,0.3);
+	}
+}
+
+.gallery-list {
+	a {
+		display: block;
+		border-radius: 1rem;
+		overflow: hidden;
+		position: relative;
+		box-shadow: 0 0 10px rgba(0,0,0,0.3);
+	}
+
+	img {
+		display: block;
+		width: 100%;
+	}
+
+	div {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		padding: .5em;
+		color: $col-fg-0-dark;
+
+		background: rgba(0 ,0, 0, .5);
+		transition: background .2s ease-out;
+
+		&:hover {
+			background: rgba(0, 0, 0, 0);
+		}
+
+		.title {
+			font-weight: bold;
+			font-size: 1.5em;
+			line-height: 1.5;
+			text-align: center;
+		}
+
+		.title, .year {
+			filter: drop-shadow(0 0 3px #000);
+		}
 	}
 }

templates/gallery-list.html

@@ -1,7 +1,31 @@
 {% extends "base.html" %}
 
 {% block content %}
-	{% for gallery in section.pages %}
+	<section class="wrap narrow centering">
-		<a href="{{ gallery.permalink }}">{{ gallery.title }}</a>
+		<h1>Galerie</h1>
-	{% endfor %}
+		{{ section.content | safe }}
+	</section>
+	<section class="gallery-list wrap grid grid-4 grid-mobile-2">
+		{% for gallery in section.pages %}
+			<a href="{{ gallery.permalink }}">
+				{% if gallery.extra.thumbnail %}
+					{% set_global img = "." ~ gallery.path ~ gallery.extra.thumbnail %}
+				{% else %}
+					{% set_global img = "/static/img/placeholder.jpg" %}
+					{% for asset in gallery.assets %}
+						{% if asset is matching("[.](jpg|png)$") %}
+							{% set_global img = asset %}
+							{% break %}
+						{% endif %}
+					{% endfor %}
+				{% endif %}
+				{% set image = resize_image(path=img, width=300, height=200, op="fill") %}
+				<img src="{{ image.url }}" alt="{{ gallery.title }}">
+				<div>
+					<span class="title">{{ gallery.title }}</span>
+					<span class="year">{{ gallery.date | date(format="%Y") }}
+				</div>
+			</a>
+		{% endfor %}
+	</section>
 {% endblock %}