From bfe46a15c172e10660c641484155ac51ee5b61b1 Mon Sep 17 00:00:00 2001
From: zepp <zepp@zepps.cafe>
Date: Sun, 27 Oct 2024 22:10:16 -0400
Subject: [PATCH] Playing around with thumbnail layout, wire up js Testing grid
 layout with thumbnails for images. Beginning of writing JS for enlaring
 images to their own window.

---
 index.html      | 61 +++++++++++++++++++++++++++++++++++++++++++++++++
 js/script.js    |  0
 style/style.css |  8 ++++++-
 3 files changed, 68 insertions(+), 1 deletion(-)
 create mode 100644 js/script.js

diff --git a/index.html b/index.html
index 59db81c..4da17ab 100644
--- a/index.html
+++ b/index.html
@@ -18,6 +18,65 @@
             <div class="separator"></div>
             
             <div class="window-pane">
+                <figure>
+                    <img src="img/thumbnails/noisycat_thumb.jpg" alt="A thumbnail of an image of baxter looking at the camera.">
+                    <figcaption>noisycat.jpg</figcaption>
+                </figure>
+
+                <figure>
+                    <img src="img/thumbnails/noisycat_thumb.jpg" alt="A thumbnail of an image of baxter looking at the camera.">
+                    <figcaption>noisycat.jpg</figcaption>
+                </figure>
+
+                <figure>
+                    <img src="img/thumbnails/noisycat_thumb.jpg" alt="A thumbnail of an image of baxter looking at the camera.">
+                    <figcaption>noisycat.jpg</figcaption>
+                </figure>
+
+                <figure>
+                    <img src="img/thumbnails/noisycat_thumb.jpg" alt="A thumbnail of an image of baxter looking at the camera.">
+                    <figcaption>noisycat.jpg</figcaption>
+                </figure>
+
+                <figure>
+                    <img src="img/thumbnails/noisycat_thumb.jpg" alt="A thumbnail of an image of baxter looking at the camera.">
+                    <figcaption>noisycat.jpg</figcaption>
+                </figure>
+
+                <figure>
+                    <img src="img/thumbnails/noisycat_thumb.jpg" alt="A thumbnail of an image of baxter looking at the camera.">
+                    <figcaption>noisycat.jpg</figcaption>
+                </figure>
+
+                <figure>
+                    <img src="img/thumbnails/noisycat_thumb.jpg" alt="A thumbnail of an image of baxter looking at the camera.">
+                    <figcaption>noisycat.jpg</figcaption>
+                </figure>
+
+                <figure>
+                    <img src="img/thumbnails/noisycat_thumb.jpg" alt="A thumbnail of an image of baxter looking at the camera.">
+                    <figcaption>noisycat.jpg</figcaption>
+                </figure>
+
+                <figure>
+                    <img src="img/thumbnails/noisycat_thumb.jpg" alt="A thumbnail of an image of baxter looking at the camera.">
+                    <figcaption>noisycat.jpg</figcaption>
+                </figure>
+
+                <figure>
+                    <img src="img/thumbnails/noisycat_thumb.jpg" alt="A thumbnail of an image of baxter looking at the camera.">
+                    <figcaption>noisycat.jpg</figcaption>
+                </figure>
+
+                <figure>
+                    <img src="img/thumbnails/noisycat_thumb.jpg" alt="A thumbnail of an image of baxter looking at the camera.">
+                    <figcaption>noisycat.jpg</figcaption>
+                </figure>
+
+                <figure>
+                    <img src="img/thumbnails/noisycat_thumb.jpg" alt="A thumbnail of an image of baxter looking at the camera.">
+                    <figcaption>noisycat.jpg</figcaption>
+                </figure>
             </div>
         </div>
 
@@ -28,5 +87,7 @@
             <p class="dialog-text">In the "Baxter Images" dialog, you can single-click on a photo to view it with a small description.</p>
             <p class="dialog-text">I hope you enjoy this little nostalgia trip featuring my cat, you can go back to his normal homepage <a href="https://thiscat.rocks/">here</a>.</p>
         </div>
+
+        <script src="js/script.js"></script>
     </body>
 </html>
\ No newline at end of file
diff --git a/js/script.js b/js/script.js
new file mode 100644
index 0000000..e69de29
diff --git a/style/style.css b/style/style.css
index ecfbfeb..a11214c 100644
--- a/style/style.css
+++ b/style/style.css
@@ -34,4 +34,10 @@ p {
     line-height: 1.5rem;
     margin-bottom: 1rem;
     margin-left: 1rem;
-}
\ No newline at end of file
+}
+
+.window-pane {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    justify-items: center;
+}