includes/nav.php

@@ -1,5 +1,5 @@
 <header id="top">
-    <img src="../site-resources/assets/header-cat.svg" width="80px" height="80px"> 
+    <img src="../site-resources/assets/header-cat.svg" height="32px" width="32px">
     <span>
         <p>This cat rocks!</p>
         <p>A homepage for my fine feline friend, Baxter</p>

loveletter.php

@@ -19,10 +19,10 @@
             Small showcases of the love that was to be ever present as you grew.
           </p>
           <div>
-              <img src="./img/baxter-kitten-one.jpg" alt="A young kitten era photo of Baxter. He is lodged between the window and the screen. The window is open on a warm summer day. Baxter is enjoying the sun.">
+              <img class="cards" src="img/card-one.webp" alt="A young kitten era photo of Baxter. Laying his head against the arm of the couch.">
-              <img src="./img/baxter-kitten-two.jpg" alt="A young kitten era photo of baxter. He is flipped upside down and rolled up slightly on a couch cushion.">
+              <img class="cards" src="./img/baxter-window.jpg" alt="A young kitten era photo of baxter. He is lodged between the window and the screen for the window while it is open on a summer day.">
-              <img src="./img/baxter-kitten-three.jpg" alt="A young kitten era photo of Baxter. He is sleeping and resting his head against the arm of the couch. The photo emphasizes his large paws.">
+              <img class="cards" src="img/card-two.webp" alt="A young kitten era photo of Baxter. Flopped upside down on the couch and semi curled up.">
-              <img src="./img/baxter-kitten-four.jpg" alt="A young kitten era photo of Baxter. He is curled up sleeping on the couch. Clear detail in his mackeral tabby fur patten is seen running down his back legs.">
+              <img class="cards" src="img/card-three.webp" alt="A young kitten era photo of Baxter. Partialy curled up sleeping on the couch.">
           </div>
       </section>
 
@@ -36,10 +36,10 @@
             you were the reason to keep going, to keep the fire lit.
           </p>
         <div> 
-            <img src="./img/baxter-midlife-one.jpg" alt="Baxter in his young adult years. He is laying on the floor and has a front paw stetched out towards the camera as he looks into the lens.">
+            <img class="cards" src="./img/baxter-floor-apartment.jpg" alt="My cat Baxter laying against a wall looking at the camera.">
-            <img src="./img/baxter-midlife-two.jpg" alt="Baxter in his young adults years. He is laying against the wall in my apartment. Most likely taking advantage of some sunlight that would peak through the window in that room.">
+            <img class="cards" src="img/card-six.webp" alt="My cat Baxter laying in bed tucked under a blanket sleeping.">
-            <img src="./img/baxter-midlife-three.jpg" alt="Baxter in his young adult years. He is sitting in a relaxed position on a hardward floor. He is not looking at anything in particular and appears to just be relaxing.">
+           <img class="cards" src="img/card-seven.webp" alt="My cat Baxter curled up in a box looking up at the camera.">
-            <img src="./img/baxter-midlife-four.jpg" alt="Baxter in his young adult years. He is flipped upside down on a hardwood floor. By exposing his stomach he is showing he feels safe in my apartment and is very relaxed and comfortable.">
+            <img class="cards" src="img/card-eight.webp" alt="My cat Baxter stretched out on the floor flipped upside down, exposing his stomach.">
         </div>
       </section>
 

style/style.css

@@ -2,7 +2,6 @@
 	--section-color: #fccce4bb;
 	--border-color: #f6da92;
 	--header-color: #fc94bcbb;
-	--text-color: #2A004E;
 }
 
 *, *::before, *::after {
@@ -21,7 +20,6 @@ body {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	color: var(--text-color);
 }
 
 main {
@@ -77,6 +75,11 @@ main {
 
 .favorite-baxter-photos {
 	display: grid;
+	grid-template-rows: 5rem 25rem 25rem;
+	grid-template-columns: 20rem 20rem;
+	gap: 1rem;
+	justify-items: center;
+	justify-content: center;
 }
 
 .favorite-baxter-photos h3 {
@@ -85,10 +88,17 @@ main {
 }
 
 .favorite-baxter-photos figure {
+	height: 22.5rem;
+	width: 22.5rem;
 	text-wrap: wrap;
 	text-align: center;
 }
 
+.growing-up figure, .young-adult-baxter figure {
+	height: 50vh;
+	width: auto;
+}
+
 .favorite-baxter-photos img, .growing-up img, .young-adult-baxter img {
 	max-width: 100%;
 	max-height: 100%;
@@ -101,9 +111,11 @@ main {
 }
 
 .growing-up div, .young-adult-baxter div {
+	padding-top: 2rem;
+	height: 100%;
+	width: auto;
 	display: grid;
-	grid-template-columns: 50vh 50vh;
+	grid-template-columns: 27vw 27vw;
-	justify-content: center;
 	align-items: stretch;
 	gap: 2rem;
 }
@@ -121,13 +133,12 @@ header {
 }
 
 header img {
-	max-height: 100%;
+	height: 72px;
-	max-width: 100%;
+	width: auto;
-	object-fit: fill;
 }
 
 header p {
-	font-size: 1.5rem;
+	font-size: 1.25rem;
 	font-weight: bold;
 }
 
@@ -150,7 +161,7 @@ section {
 	padding: 1.25rem;
 	border: 4px solid var(--border-color);
 	border-radius: 15px;
-	width: 65vw;
+	width: 60vw;
 }
 
 section img {