From 91feafd5a0ee437b4f319a4f39c5d9dcee6ca754 Mon Sep 17 00:00:00 2001
From: zepp <zepp@zepps.cafe>
Date: Mon, 28 Oct 2024 18:40:39 -0400
Subject: [PATCH] Additonal images added. Styling adjusted Styling and JS
 adjusted for additonal images being added to the image selection window.

---
 index.html      | 37 ++++++++++++++++++++++++++++++++++++-
 js/script.js    |  3 ++-
 style/style.css |  4 +++-
 3 files changed, 41 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index dd9508c..800a77b 100644
--- a/index.html
+++ b/index.html
@@ -24,9 +24,44 @@
             
             <div class="window-pane">
                 <figure class="clickable-image">
-                    <img class="img-icon" src="img/thumbnails/baxter-stare-thumb.jpg" alt="A thumbnail of an image of baxter looking at the camera.">
+                    <img class="img-icon" src="img/thumbnails/baxter-stare-thumbnail.jpg" alt="A thumbnail of an image of baxter looking at the camera.">
                     <figcaption>baxter-stare.png</figcaption>
                 </figure>
+
+                <figure class="clickable-image">
+                    <img class="img-icon" src="img/thumbnails/baxter-box-thumbnail.jpg" alt="A thumbnail of an image of baxter sitting in a cardboard box.">
+                    <figcaption>baxter-box.png</figcaption>
+                </figure>
+
+                <figure class="clickable-image">
+                    <img class="img-icon" src="img/thumbnails/baxter-flop-thumbnail.jpg" alt="A thumbnail of an image of baxter laying upside down exposing his stomach.">
+                    <figcaption>baxter-flop.png</figcaption>
+                </figure>
+
+                <figure class="clickable-image">
+                    <img class="img-icon" src="img/thumbnails/baxter-grumpy-thumbnail.jpg" alt="A thumbnail of an image of baxter looking at the camera as if he were upset or grumpy.">
+                    <figcaption>baxter-grumpy.png</figcaption>
+                </figure>
+
+                <figure class="clickable-image">
+                    <img class="img-icon" src="img/thumbnails/baxter-kitten-thumbnail.jpg" alt="A thumbnail of an image of baxter when he was a kitten sleeping on a couch.">
+                    <figcaption>baxter-kitten.png</figcaption>
+                </figure>
+
+                <figure class="clickable-image">
+                    <img class="img-icon" src="img/thumbnails/baxter-looking-thumbnail.jpg" alt="A thumbnail of an image of baxter looking at the camera as it is pointing down at him.">
+                    <figcaption>baxter-looking.png</figcaption>
+                </figure>
+
+                <figure class="clickable-image">
+                    <img class="img-icon" src="img/thumbnails/baxter-sitting-thumbnail.jpg" alt="A thumbnail of an image of baxter laying on a blanket looking at the camera.">
+                    <figcaption>baxter-sitting.png</figcaption>
+                </figure>
+
+                <figure class="clickable-image">
+                    <img class="img-icon" src="img/thumbnails/baxter-wall-thumbnail.jpg" alt="A thumbnail of an image of baxter laying against a wall. Sunlight reflects off of his stomach.">
+                    <figcaption>baxter-wall.png</figcaption>
+                </figure>
             </div>
         </div>
 
diff --git a/js/script.js b/js/script.js
index d5d1a66..7ec17a1 100644
--- a/js/script.js
+++ b/js/script.js
@@ -42,7 +42,8 @@ icon.forEach((item) => {
         let figure = document.createElement("figure");
         let image = document.createElement("img");
         image.src = `img/${item.querySelector("figcaption").textContent}`;
-        image.height = "700";
+        image.style.height = "550px";
+        image.style.width = "auto";
         figure.style.marginTop = "0.75rem";
         figure.style.display = "flex";
         figure.style.flexDirection = "column";
diff --git a/style/style.css b/style/style.css
index bf3f410..d7d3c0c 100644
--- a/style/style.css
+++ b/style/style.css
@@ -37,8 +37,10 @@ p {
 .window-pane {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr 1fr;
-    grid-template-rows: 1fr 1fr 1fr;
+    grid-template-rows: 12.5rem 12.5rem 12.5rem;
     justify-items: center;
+    align-items: baseline;
+    gap: 12px;
 }
 
 .window {