add dates to portfolio, add some content, add lightbox for portfolio images

content/layouts/base.njk

@@ -14,6 +14,7 @@
 		<link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&display=swap" rel="stylesheet">
 		<link rel="stylesheet" type="text/css" href="/style.css" />
 		<link href="https://unpkg.com/prism-themes@1.9.0/themes/prism-nord.css" rel="stylesheet" />
+		<link rel="stylesheet" href="https://unpkg.com/simplelightbox@2.14.3/dist/simple-lightbox.min.css" />
 
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -67,6 +68,13 @@
 			integrity="sha384-jnZyxPjiipYXnSU0ygqeac2q7CVYMbh84q0uHVRRxEtvFPiQYbXWUorga2aqZJ0z"></script>
 		<script data-goatcounter="https://goatcounter.riksolo.com/count" async
 			src="//goatcounter.riksolo.com/count.js"></script>
+		<script src="//unpkg.com/simplelightbox@2.14.3/dist/simple-lightbox.min.js"></script>
+		<script>
+			new SimpleLightbox('.gallery a', {
+				widthRatio: 0.9,
+				heightRatio: 0.95,
+			});
+		</script>
 	</body>
 
 </html>

content/layouts/portfolio.njk

@@ -10,9 +10,9 @@ layout: base.njk
 			{{content | safe}}
 		</span>
 	</div>
-	<div class="portfolio-detail-images">
+	<div class="portfolio-detail-images gallery">
 		{% for image in data.images %}
-		<img src="{{image}}" alt="" loading="lazy" />
+		<a href="{% imageUrl image %}"><img src="{{image}}" alt="" loading="lazy" /></a>
 		{% endfor %}
 	</div>