zepp
/
alternate.thiscat.rocks
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Final adjustment to grid for icons and window pane

This commit is contained in:
emma 2024-10-28 19:08:41 -04:00
parent dc688be139
commit 011fa22e29
2 changed files with 13 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
js/script.js
View File

@ -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";

13
style/style.css
View File

@ -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 {