add photo gallery

css/default.scss

@@ -122,7 +122,7 @@ article .header {
 
 @media (min-width: 640px) {
   body {
-    width: 66%;
+    width: 90%;
     margin: 0 auto;
     padding: 0;
   }
@@ -169,3 +169,20 @@ code {
     font-family: "PressStart";
     padding: .1rem .3rem .2rem;
 }
+
+.gallery {
+    display:flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    gap: 5px;
+}
+
+.photo {
+    flex-basis: 33%;
+}
+.photo > img {
+    width: 100%;
+    height: auto;
+}

gallery.html

@@ -0,0 +1,6 @@
+---
+title: Photo Gallery
+---
+<p>
+These are some of my favorite photos I've taken over the course of several years. They were all taken on film, and with the exception of a few, they were completely developed by myself. I develop a negative and then scan it using an Epson scanner and then store them in my digital archive. I use an old Canon Rebel EOS, shooting entirely on manual mode. The color photos were mostly taken on cheap FUJI reels, while the black and white are ILFORD reels. 
+</p>

site.hs

@@ -4,6 +4,7 @@
 import Data.Monoid (mappend)
 import Hakyll
 import Hakyll.Web.Sass (sassCompiler)
+
 --------------------------------------------------------------------------------
 config :: Configuration
 config =
@@ -15,7 +16,7 @@ main :: IO ()
 main = hakyllWith config $ do
   -- Static directories
 
-  match ("fonts/*" .||. "images/*" .||. "files/*") $ do
+  match ("fonts/*" .||. "images/*" .||. "files/*" .||. "film/*") $ do
     route idRoute
     compile copyFileCompiler
 
@@ -51,6 +52,23 @@ main = hakyllWith config $ do
         >>= loadAndApplyTemplate "templates/default.html" indexCtx
         >>= relativizeUrls
 
+  match "gallery.html" $ do
+    route idRoute
+    compile $ do
+      film <- loadAll "film/*"
+      filmH <- loadBody "templates/photo.html"
+
+      let imgCtx :: Context CopyFile
+          imgCtx = urlField "url" <> missingField
+
+      art <- applyTemplateList filmH imgCtx film
+      let galleryCtx = constField "art" art <> defaultContext
+
+      getResourceBody
+        >>= loadAndApplyTemplate "templates/gallery.html" galleryCtx
+        >>= loadAndApplyTemplate "templates/default.html" galleryCtx
+        >>= relativizeUrls
+
   match "templates/*" $ compile templateBodyCompiler
 
 --------------------------------------------------------------------------------

templates/default.html

@@ -14,6 +14,7 @@
             </div>
             <nav>
                 <a href="/">Home</a>
+                <a href="/gallery.html">Photos</a>
             </nav>
         </header>
 

templates/gallery.html

@@ -0,0 +1,4 @@
+$body$
+<div class="gallery">
+    $art$
+</div>

templates/photo.html

@@ -0,0 +1,3 @@
+<div class="photo">
+  <img src="$url$"/>
+</div>