From 011fa22e2974d865792018a8e7ebcb5f475ae144 Mon Sep 17 00:00:00 2001
From: zepp <zepp@zepps.cafe>
Date: Mon, 28 Oct 2024 19:08:41 -0400
Subject: [PATCH] Final adjustment to grid for icons and window pane

---
 js/script.js    |  9 ++++++++-
 style/style.css | 13 +++++--------
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/js/script.js b/js/script.js
index 7ec17a1..e37679d 100644
--- a/js/script.js
+++ b/js/script.js
@@ -2,6 +2,13 @@ let icon = document.querySelectorAll(".clickable-image");
 
 let descriptions = {
     "baxter-stare.png": "Baxter lovingly staring at the camera on a sunny day in the apartment. One of my favorite photos of him. He would have been 6 or 7 around this time.",
+    "baxter-box.png": "Baxter loves his boxes, and can often be found relaxing or sleeping in one. We had quite a few at one point!",
+    "baxter-flop.png": "Baxter shows ultimate comfiness by flopping upside down. A sign that he is very happy and very cozy.",
+    "baxter-grumpy.png": "Baxter rarely gives this look and this photo was awhile ago. I'm not sure what he might've been upset about",
+    "baxter-kitten.png": "Baxter as a kitten was a lot of fun and work. I do really get a kick out of how big his paws were though!",
+    "baxter-looking.png": "Baxter is quite good at noticing the camera. Sometimes that means I miss good pictures, but sometimes you get great ones!",
+    "baxter-sitting.png": "This is just overall a good photo. Seems like Baxter might be making a run for office with this one!",
+    "baxter-wall.png": "In the apartment he often liked to stretch against this wall. I think he liked the sunlight on his stomach. Typical cat!",
 };
 
 icon.forEach((item) => {
@@ -42,7 +49,7 @@ icon.forEach((item) => {
         let figure = document.createElement("figure");
         let image = document.createElement("img");
         image.src = `img/${item.querySelector("figcaption").textContent}`;
-        image.style.height = "550px";
+        image.style.height = "500px";
         image.style.width = "auto";
         figure.style.marginTop = "0.75rem";
         figure.style.display = "flex";
diff --git a/style/style.css b/style/style.css
index d30d29f..cde9656 100644
--- a/style/style.css
+++ b/style/style.css
@@ -35,10 +35,9 @@ p {
 }
 
 .window-pane {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-evenly;
-    align-content: flex-start;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    grid-template-rows: 12.5rem 12.5rem 12.5rem;
     align-items: baseline;
     gap: 1rem;
 }
@@ -48,10 +47,8 @@ p {
 }
 
 figure {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 1rem;
+    display: grid;
+    justify-items: center;
 }
 
 .clickable-image:hover {