Small styling changes for firefox

Styling and JS adjusted for additonal images being
added to the image selection window.

.gitignore

@@ -1,3 +1,2 @@
 img/
 system-css/
-style.css

README.md

@@ -0,0 +1,17 @@
+# alternate.thiscat.rocks
+
+This is a second homepage for Baxter that aims to celebrate him through a little bit of a nostalgia lens
+
+It makes use of a css library called [system.css](https://github.com/sakofchit/system.css) to acheive an aesthetic look of an early System 6 era macintosh
+
+The photos are downscaled and have photo noise added to give the look of a low quality 90s camera
+
+They are in black and white because system 6 was largely on monochrome Apple computers
+
+I created a small photo gallery, and you can click on each image to view it at a larger size along with a small description provided with the image. You can use the standard close winow button at the top left to go back to the images to keep browsing
+
+I may add more photos in the future, but for now I am happy with the selection
+
+## Visit the site
+
+You can visit the site and look at the images here [alternate.thiscat.rocks](https://alternate.thiscat.rocks/)

index.html

@@ -5,10 +5,11 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <!-- system.css -->
         <link rel="stylesheet" href="system-css/system.css">
-        <!-- additional styling defined by myself -->
-        <link rel="stylesheet" href="style/additional-style.css">
         <!-- CDN link if needed -->
         <!-- <link rel="stylesheet" href="https://unpkg.com/@sakun/system.css"> -->
+        <!-- additional styling defined by myself -->
+        <link rel="stylesheet" href="style/style.css">
+        
         <title>Baxter's Desktop</title>
     </head>
 
@@ -23,9 +24,54 @@
             
             <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>
+
+                <figure class="clickable-image">
+                    <img class="img-icon" src="img/thumbnails/baxter-hiding-thumbnail.jpg" alt="A thumbnail of an image of baxter looking out from behind a computer monitor.">
+                    <figcaption>baxter-hiding.png</figcaption>
+                </figure>
+
+                <figure class="clickable-image">
+                    <img class="img-icon" src="img/thumbnails/baxter-thinking-thumbnail.jpg" alt="A thumbnail of an image of baxter laying on a wooden chair with a thinking or curious look towards the camera.">
+                    <figcaption>baxter-thinking.png</figcaption>
+                </figure>
             </div>
         </div>
 
@@ -33,7 +79,7 @@
             <h1 class="dialog-text">Baxter's desktop</h1>
             <p class="dialog-text">Welcome to Baxter's desktop, a time trip to before Baxter himself!</p>
             <p class="dialog-text">This site makes use of JavaScript, so you may want to turn that on if things aren't working as intended.</p>
-            <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">In the "Baxter Images" window, you can single-click on a photo to view it along 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>
 

js/script.js

@@ -1,11 +1,20 @@
-let icon = document.querySelectorAll(".clickable-image");
-
-let descriptions = {
+const 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!",
+    "baxter-hiding.png": "Baxter often likes to pretend people can't see him, and will try to get a look at what they are doing from very obvious places.",
+    "baxter-thinking.png": "When I look at this photo I often wonder what is on Baxter's mind. It was a cool afternoon after a storm, he seems relaxed but with something on his mind.",
 };
 
-icon.forEach((item) => {
-    item.addEventListener("click", () => {
+let icons = document.querySelectorAll(".clickable-image");
+
+icons.forEach((icon) => {
+    icon.addEventListener("click", () => {
         
         let desktop = document.querySelector("body");
         
@@ -25,7 +34,7 @@ icon.forEach((item) => {
 
         let windowTilte = document.createElement("h2");
         windowTilte.classList.add("title");
-        windowTilte.textContent = item.querySelector("figcaption").textContent;
+        windowTilte.textContent = icon.querySelector("figcaption").textContent;
         titleBar.appendChild(windowTilte);
 
         let separator = document.createElement("div");
@@ -41,8 +50,9 @@ icon.forEach((item) => {
 
         let figure = document.createElement("figure");
         let image = document.createElement("img");
-        image.src = `img/${item.querySelector("figcaption").textContent}`;
-        image.height = "700";
+        image.src = `img/${icon.querySelector("figcaption").textContent}`;
+        image.style.height = "500px";
+        image.style.width = "auto";
         figure.style.marginTop = "0.75rem";
         figure.style.display = "flex";
         figure.style.flexDirection = "column";
@@ -50,7 +60,7 @@ icon.forEach((item) => {
         figure.appendChild(image);
 
         let figureCaption = document.createElement("figcaption");
-        figureCaption.textContent = `${descriptions[item.querySelector("figcaption").textContent]}`;
+        figureCaption.textContent = `${descriptions[icon.querySelector("figcaption").textContent]}`;
         figureCaption.style.textAlign = "center";
         figureCaption.style.marginTop = "1rem";
         figure.appendChild(figureCaption);

style/style.css

@@ -13,18 +13,19 @@ body {
 }
 
 .site-info {
-    height: 20rem;
+    height: 25rem;
     width: auto;
     margin: 3rem 2rem 0 0;
 }
 
 h1 {
     margin: 1rem;
+    font-size: 1.25em;
 }
 
 h2 {
     margin: 1rem;
-    font-size: 1.5rem;
+    font-size: 1.5em;
     font-family: Chicago_12;
 }
 
@@ -32,20 +33,24 @@ p {
     line-height: 1.5rem;
     margin-bottom: 1rem;
     margin-left: 1rem;
+    font-size: 1.1em;
 }
 
 .window-pane {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr 1fr;
-    justify-items: center;
+    grid-template-rows: 12.5rem 12.5rem 12.5rem;
+    align-items: baseline;
+    gap: 1rem;
 }
 
 .window {
     margin: 1rem 0 1rem 2rem;
 }
 
-.img-icon {
-    padding-left: 1.25rem;
+figure {
+    display: grid;
+    justify-items: center;
 }
 
 .clickable-image:hover {