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 {