Add masonry

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>

assets/sass/content.scss

@@ -4,6 +4,10 @@
   padding: 2rem;
 }
 
+.content.wide {
+  max-width: $width-wide;
+}
+
 @media (max-width: $width-mobile) {
   .content {
     padding: 1rem;

assets/sass/gallery.scss

@@ -0,0 +1,45 @@
+.gallery {
+  margin: -0.75rem;
+
+  .grid-sizer {
+    width: calc(25% - 1.5rem);
+    margin: 0 0.75rem;
+  }
+
+  .grid-item {
+    width: calc(25% - 1.5rem);
+    margin: 0.75rem;
+  }
+}
+
+@media (max-width: $width-content) {
+  .gallery {
+    margin: -0.5rem;
+
+    .grid-sizer {
+      width: calc(33% - 1rem);
+      margin: 0 0.5rem;
+    }
+
+    .grid-item {
+      width: calc(33% - 1rem);
+      margin: 0.5rem;
+    }
+  }
+}
+
+@media (max-width: $width-mobile) {
+  .gallery {
+    margin: -0.375rem;
+
+    .grid-sizer {
+      width: calc(50% - 0.75rem);
+      margin: 0 0.375rem;
+    }
+
+    .grid-item {
+      width: calc(50% - 0.75rem);
+      margin: 0.375rem;
+    }
+  }
+}

assets/sass/header.scss

@@ -59,10 +59,11 @@
 
     .header-container {
       .site-title {
-        z-index: 1;
+        z-index: 2;
       }
 
       .nav {
+        z-index: 1;
         position: fixed;
         inset: 0;
 
@@ -88,7 +89,7 @@
       }
 
       .nav-toggle-label {
-        z-index: 1;
+        z-index: 2;
 
         display: flex;
         flex-direction: column;

assets/sass/hero.scss

@@ -19,7 +19,7 @@
     }
   }
 
-  .image {
+  .captioned-image {
     padding-top: 1.5rem;
   }
 }

assets/sass/image.scss

@@ -1,13 +1,13 @@
-.image {
+img {
+  width: 100%;
+  height: auto;
+  display: block;
+}
+
+.captioned-image {
   width: 100%;
   padding: 1rem 0;
 
-  img {
-    width: 100%;
-    height: auto;
-    display: block;
-  }
-
   figcaption {
     text-align: center;
     padding-top: 0.5rem;

assets/sass/list.scss

@@ -52,7 +52,7 @@ main.with-meta {
   }
 }
 
-.posts-list {
+.list {
   .post {
     display: block;
     color: inherit;
@@ -86,7 +86,7 @@ main.with-meta {
 }
 
 @media (max-width: $width-mobile) {
-  .posts-list {
+  .list {
     .post {
       &:not(:first-child) {
         margin-top: 2rem;

assets/sass/main.scss

@@ -10,6 +10,7 @@ $width-wide: 75rem;
 @import "image";
 
 @import "list";
+@import "gallery";
 
 @import "header";
 @import "content";

assets/sass/photoswipe.scss

@@ -1,3 +1,5 @@
+@import "photoswipe/dist/photoswipe";
+
 .pswp {
   --pswp-bg: var(--background);
   --pswp-icon-color: var(--text);