add defer attribute to script tag, add enlarge class to images, styling

life/photography.php

@@ -26,18 +26,18 @@
 
 				<h3 class="photo-gallery-header">photo gallery</h3>
 				<figure class="photography-gallery">
-					<img src="../img/life/photography/flower.jpg" alt="a pink rose captured on a digital slr. the color is vibrant, the flower is the star of the portrait" height="300" width="500">
+					<img class="enlarge" src="../img/life/photography/flower.jpg" alt="a pink rose captured on a digital slr. the color is vibrant, the flower is the star of the portrait" height="300" width="500">
 
-					<img src="../img/life/photography/flower-two.jpg" alt="a beautiful white flower is the center of the photograph. it shows of beautiful parts of itself that are essential for polinators such as bees and butterflies" height="300" width="500">
+					<img class="enlarge" src="../img/life/photography/flower-two.jpg" alt="a beautiful white flower is the center of the photograph. it shows of beautiful parts of itself that are essential for polinators such as bees and butterflies" height="300" width="500">
 			
-					<img src="../img/life/photography/pink-flower.jpg" alt="a vibrant mix of deep and bright pink make up this photo of multiple small flowers. special attention has been made to focus on them by blurring their background, making them front and center for this
+					<img class="enlarge" src="../img/life/photography/pink-flower.jpg" alt="a vibrant mix of deep and bright pink make up this photo of multiple small flowers. special attention has been made to focus on them by blurring their background, making them front and center for this
 					picture" height="300" width="500">
 
-					<img src="../img/life/photography/orange-flower.jpg" alt="a flower orange like a warm sunset is captured on a 35mm film print. the flower has a deep inner center with pedals extending up and outwards. in the deep center part, stems extend that help polinators do their job and collect pollen" height="300" width="500">
+					<img class="enlarge" src="../img/life/photography/orange-flower.jpg" alt="a flower orange like a warm sunset is captured on a 35mm film print. the flower has a deep inner center with pedals extending up and outwards. in the deep center part, stems extend that help polinators do their job and collect pollen" height="300" width="500">
 
-					<img src="../img/life/photography/parakeet-bw.jpg" alt="a photo of a yellow parakeet caputre on black and white film. the bird is in an enclosure, and the crooked tilt of the head and beak suggest she may be curious about the camera that is taking a picture of her" height="300" width="500">
+					<img class="enlarge" src="../img/life/photography/parakeet-bw.jpg" alt="a photo of a yellow parakeet caputre on black and white film. the bird is in an enclosure, and the crooked tilt of the head and beak suggest she may be curious about the camera that is taking a picture of her" height="300" width="500">
 
-					<img src="../img/life/photography/whiskers-bw-three.jpg" alt="a photo of a white dwarf rabbit captured on black and white film. the rabbit is sitting under a chair, and surveys his surroundings, as he is outside and is taking in much about the world around him" height="300" width="500">
+					<img class="enlarge" src="../img/life/photography/whiskers-bw-three.jpg" alt="a photo of a white dwarf rabbit captured on black and white film. the rabbit is sitting under a chair, and surveys his surroundings, as he is outside and is taking in much about the world around him" height="300" width="500">
 
 					<figcaption>
 						various photos captured on digital and 35mm film. the photos captured on 35mm film no longer have their negative with them and are photos of the print. this leaves an odd effect on the photos as the camera captures the glossieness of the print. i like it enough that i will put these here for you to enjoy. i will look into properly scanning the prints in the future
@@ -50,6 +50,7 @@
 				</p>
 			</section>
 		</main>
+		<script src="../script/image-enlarger.js" defer></script>
 		<?php include "../includes/footer.php" ?>
 	</body>
 </html>

life/picrew.php

@@ -22,32 +22,32 @@
 				<h2 class="picrew-gallery-header">gallery</h2>
 				<div class="picrew-gallery">
 					<figure>
-						<img src="../img/life/picrews/self-one.jpg" alt="an image of emma created in picrew. the image is fem presenting and represent characteristics that emma sees of herself when she can be fem presenting in her physical space" height="300" width="300">
+						<img class="enlarge" src="../img/life/picrews/self-one.jpg" alt="an image of emma created in picrew. the image is fem presenting and represent characteristics that emma sees of herself when she can be fem presenting in her physical space" height="300" width="300">
 						<figcaption>
 							<a href="https://picrew.me/en/image_maker/94097">picrew image maker</a> by sangled
 						</figcaption>
 					</figure>
 					<figure>
-						<img src="../img/life/picrews/self-two.jpg" alt="an image of emma created in picrew. the image is fem presenting and explores charactersitcs such as hair styles and clothing that emma sees herself wearing and expressing" height="300" width="300">
+						<img class="enlarge" src="../img/life/picrews/self-two.jpg" alt="an image of emma created in picrew. the image is fem presenting and explores charactersitcs such as hair styles and clothing that emma sees herself wearing and expressing" height="300" width="300">
 						<figcaption>
 							<a href="https://picrew.me/en/image_maker/2446448"> picrew image maker</a> by seyimOn
 						</figcaption>
 					</figure>
 					<figure>
-						<img src="../img/life/picrews/self-three.jpg" alt="an image of emma created in picrew. the image is fem presenting and explores characteristics such as hair styles, jewlery, transitioning, and features of emma like freckles" height="300" width="300">
+						<img class="enlarge" src="../img/life/picrews/self-three.jpg" alt="an image of emma created in picrew. the image is fem presenting and explores characteristics such as hair styles, jewlery, transitioning, and features of emma like freckles" height="300" width="300">
 						<figcaption>
 							<a href="https://picrew.me/en/image_maker/644129">picrew image maker</a> by makowka
 						</figcaption>
 					</figure>
 					<figure>
-						<img src="../img/life/picrews/self-four.jpg" alt="an image of emma created in picrew. the image is fem presenting and explores characteristics such as shorter, lighter hair and makeup as well as feature of emma such as her current style of glasses and freckles" height="300" width="300">
+						<img class="enlarge" src="../img/life/picrews/self-four.jpg" alt="an image of emma created in picrew. the image is fem presenting and explores characteristics such as shorter, lighter hair and makeup as well as feature of emma such as her current style of glasses and freckles" height="300" width="300">
 						<figcaption>
 							<a href="https://picrew.me/en/image_maker/426722"> picrew image maker</a> by grgikau
 						</figcaption>
 					</figure>
 				</div>
 			</section>
-			<script src="../script/image-enlarger.js"></script>
+			<script src="../script/image-enlarger.js" defer></script>
 		</main>
 		<?php include "../includes/footer.php" ?>
 	</body>

life/technology.php

@@ -34,7 +34,7 @@
 				
 				<figure> 
 					<div class="gallery">
-						<img src="../img/life/technology/powerbook.jpg" alt="an early example of an apple powerbook. the model is a 165c. it features a color screen, and had an operating system that supported color. the powerbook sits atop a desk with a floppy disk icon on the screen. a question mark appears and disappears within this floppy disk, suggesting no operating system can be found to boot from" height="300" width="300">
+						<img class="enlarge" src="../img/life/technology/powerbook.jpg" alt="an early example of an apple powerbook. the model is a 165c. it features a color screen, and had an operating system that supported color. the powerbook sits atop a desk with a floppy disk icon on the screen. a question mark appears and disappears within this floppy disk, suggesting no operating system can be found to boot from" height="300" width="300">
 					</div>
 					<figcaption class="gallery-text-left">
 						a powerbook 165c that i hung onto after purchasing on a whim off of eBay. i'm not particularly interest in retro computing, but the relatively untouched nature of this laptop combined with the price made me curious enough to purchase it. it will need a copy of mac os 7.1 installed. but all components function as they should
@@ -46,7 +46,7 @@
 				</p>
 			</section>
 		</main>
-		<script src="../script/image-enlarger.js"></script>
+		<script src="../script/image-enlarger.js" defer></script>
 		<?php include "../includes/footer.php" ?>
 	</body>
 </html>

site/about.php

@@ -48,7 +48,7 @@
 				</p>
 
 				<p>
-					i think that's enough about me, i hope you've taken a look at those links sprinkled throughout or maybe saved them for later. if you wouldn't mind, i'd like to know more about you! if you're up for it, you can sign the guest book or send me an email, both located <a href="../site/contact.php" target="_blank">here</a>.
+					i think that's enough about me, i hope you've taken a look at those links sprinkled throughout or maybe saved them for later. if you wouldn't mind, i'd like to know more about you! if you're up for it, you can sign the guest book or send me an email, both located <a href="../guestbook/index.php" target="_blank">here</a>.
 				</p>
 			</section>
 		</main>

style/style.css

@@ -38,7 +38,7 @@ body {
 	overflow: hidden;
 }
 
-h1, h2, h3, h4, h5, h6, p, ul, figcaption, details, {
+h1, h2, h3, h4, h5, h6, p, ul, figcaption, details {
 	margin: 0.5rem;
 }