new: Add Portraits page

_includes/navigation.html

@@ -11,16 +11,21 @@
           <i class="twa twa-triangular-ruler"></i> Projects
         </a>
       </li>
+      <li>
+        <a class="nav-item{% if active == 'portraits' %} active{% endif %}" href="/portraits">
+          <i class="twa twa-camera"></i> Portraits
+        </a>
+      </li>
       <li>
         <a class="nav-item{% if active == 'blog' %} active{% endif %}" href="/blog">
           <i class="twa twa-pencil"></i> Blog
         </a>
       </li>
-      <li>
+      <!-- <li>
         <a class="nav-item{% if active == 'newsletter' %} active{% endif %}" href="/newsletter">
           <i class="twa twa-love-letter"></i> Newsletter
         </a>
-      </li>
+      </li> -->
       <li>
         <a class="nav-item{% if active == 'about' %} active{% endif %}" href="/about">
           <i class="twa twa-man-raising-hand-light-skin-tone"></i> About

_sass/_emoji.scss

@@ -108,3 +108,6 @@ licensed under MIT: https://ellekasai.mit-license.org/
 .twa-moon {
   background-image: url("/assets/images/icons/moon.svg");
 }
+.twa-camera {
+  background-image: url("/assets/images/icons/camera.svg");
+}

_sass/_gallery.scss

@@ -192,17 +192,6 @@ section.gallery {
   }
 }
 
-@media (min-width: 481px) and (max-width: 1025px) {
-  .projects-grid {
-    grid-template-columns: 1fr 1fr;
-  }
-}
-@media (max-width: 480px) {
-  .projects-grid {
-    grid-template-columns: 1fr;
-  }
-}
-
 .double-column {
   width: 100%;
   max-width: 100%;
@@ -227,3 +216,32 @@ section.gallery {
     grid-template-columns: 1fr;
   }
 }
+
+.gallery-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-column-gap: 2rem;
+  grid-row-gap: 2rem;
+
+  figure {
+    display: block;
+    margin: 0px;
+  }
+}
+
+@media (min-width: 1500px) {
+  .gallery-grid {
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+  }
+}
+
+@media (min-width: 481px) and (max-width: 1025px) {
+  .projects-grid, .gallery-grid {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+@media (max-width: 480px) {
+  .projects-grid, .gallery-grid {
+    grid-template-columns: 1fr;
+  }
+}

portraits.html

@@ -0,0 +1,56 @@
+---
+layout: base
+active: portraits
+title: Portraits
+---
+
+<header>
+  <h1>Portrait commissions</h1>
+</header>
+
+<section>
+  <p>
+    Photographing people is one of my favourite things to do. I’m available for both formal and informal portrait sessions, in studio or on location.
+  </p>
+  <p>
+    Please email me at <a href="mailto:[email protected]?subject=Portrait sesssion">[email protected]</a> for bookings.
+  </p>
+</section>
+
+<hr/>
+
+<!-- Closing the "content" div to let the gallery take up the whole page width -->
+</div>
+
+<section class="gallery-grid">
+  <figure>
+    <img src="/assets/images/portraits/portrait-01.jpg">
+  </figure>
+  <figure>
+    <img src="/assets/images/portraits/portrait-02.jpg">
+  </figure>
+  <figure>
+    <img src="/assets/images/portraits/portrait-03.jpg">
+  </figure>
+  <figure>
+    <img src="/assets/images/portraits/portrait-04.jpg">
+  </figure>
+  <figure>
+    <img src="/assets/images/portraits/portrait-05.jpg">
+  </figure>
+  <figure>
+    <img src="/assets/images/portraits/portrait-06.jpg">
+  </figure>
+  <figure>
+    <img src="/assets/images/portraits/portrait-07.jpg">
+  </figure>
+  <figure>
+    <img src="/assets/images/portraits/portrait-08.jpg">
+  </figure>
+  <figure>
+    <img src="/assets/images/portraits/portrait-09.jpg">
+  </figure>
+</section>
+
+<!-- Reopening the "content" div again for the followup (footer, etc) -->
+<div class="content">