Merge pull request #13 from sstream17/development

Update Photo Layout
sstream17 · Nov 4, 2023 · a28bff9 · a28bff9
2 parents c94589b + 5e8b9a5
commit a28bff9
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 76 deletions.
diff --git a/.gitignore b/.gitignore
@@ -4,3 +4,4 @@
 yarn-error.log
 /.svelte-kit/
 /.vscode
+/build/
diff --git a/src/routes/wedding/photos/+page.svelte b/src/routes/wedding/photos/+page.svelte
@@ -8,15 +8,17 @@
 
 <h2>Wedding</h2>
 
-<div class="grid">
-    <div class="zoom img-4">
+<div class="flex-row flex-wrap photo-grid">
+    <div class="zoom">
         <img src="/photos/katie+spencer4.jpg" alt="Katie and Spencer" />
     </div>
-    <div class="zoom img-5">
-        <img src="/photos/wedding_party1.jpg" alt="The wedding party" />
-    </div>
-    <div class="zoom img-6">
-        <img src="/photos/katie+spencer5.jpg" alt="Katie and Spencer" />
+    <div class="flex-col photo-stack">
+        <div class="zoom">
+            <img src="/photos/wedding_party1.jpg" alt="The wedding party" />
+        </div>
+        <div class="zoom">
+            <img src="/photos/katie+spencer5.jpg" alt="Katie and Spencer" />
+        </div>
     </div>
 </div>
 
@@ -29,14 +31,16 @@
 
 <h2>Engagement</h2>
 
-<div class="grid">
-    <div class="zoom img-1">
-        <img src="/photos/katie+spencer1.jpg" alt="Katie and Spencer" />
-    </div>
-    <div class="zoom img-2">
-        <img src="/photos/katie+spencer2.jpg" alt="Katie and Spencer" />
+<div class="flex-row flex-wrap photo-grid">
+    <div class="flex-col photo-stack">
+        <div class="zoom">
+            <img src="/photos/katie+spencer1.jpg" alt="Katie and Spencer" />
+        </div>
+        <div class="zoom">
+            <img src="/photos/katie+spencer2.jpg" alt="Katie and Spencer" />
+        </div>
     </div>
-    <div class="zoom img-3">
+    <div class="zoom">
         <img src="/photos/katie+spencer3.jpg" alt="Katie and Spencer" />
     </div>
 </div>
@@ -49,82 +53,44 @@
 </p>
 
 <style>
-    .zoom {
-        position: relative;
-        overflow: hidden;
-        padding: 50%;
-    }
-
-    img {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        will-change: transform;
-        object-fit: cover;
-        transition: transform 1s;
+    * {
+        --image-size: 400px;
     }
 
-    img:hover {
-        transform: scale(1.1);
-    }
-
-    .grid {
-        display: grid;
-        grid-template-columns: repeat(8, 1fr);
-        grid-template-rows: repeat(6, 1fr);
+    .photo-grid {
         gap: 1em;
+        min-height: 70vh;
     }
 
-    .img-1 {
-        grid-column: 1 / span 4;
-        grid-row: 1 / span 3;
-    }
-
-    .img-2 {
-        grid-column: 5 / span 4;
-        grid-row: 1 / span 6;
+    .photo-grid > * {
+        flex-basis: var(--image-size);
+        min-height: var(--image-size);
+        flex-grow: 1;
+        flex-shrink: 1;
     }
 
-    .img-3 {
-        grid-column: 1 / span 4;
-        grid-row: 4 / span 3;
+    .photo-stack {
+        gap: 1em;
     }
 
-    .img-4 {
-        grid-column: 1 / span 4;
-        grid-row: 1 / span 6;
+    .photo-stack > * {
+        flex-basis: var(--image-size);
     }
 
-    .img-5 {
-        grid-column: 5 / span 4;
-        grid-row: 1 / span 3;
+    .zoom {
+        position: relative;
+        overflow: hidden;
     }
 
-    .img-6 {
-        grid-column: 5 / span 4;
-        grid-row: 4 / span 3;
+    img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        will-change: transform;
+        transition: transform 1s;
     }
 
-    @media screen and (max-width: 768px) {
-        .grid {
-            grid-template-columns: 1fr;
-        }
-
-        .img-1 {
-            grid-column: 1 / span 4;
-            grid-row: 1 / span 3;
-        }
-
-        .img-2 {
-            grid-column: 1 / span 4;
-            grid-row: 4 / span 6;
-        }
-
-        .img-3 {
-            grid-column: 1 / span 4;
-            grid-row: 10 / span 3;
-        }
+    img:hover {
+        transform: scale(1.1);
     }
 </style>