From 72b1afdedd71aa5043f8a7a50fb9071b51868526 Mon Sep 17 00:00:00 2001
From: Hyperling <me@hyperling.com>
Date: Mon, 19 May 2025 09:09:53 -0700
Subject: [PATCH] Create a CSS class for the size of app images, rather than
 giving the img attributes a percentage. Move the figures to be completely
 inside the anchors.

---
 pages/helpers/main.css       |  5 +++
 pages/subpages/home/apps.php | 68 ++++++++++++++++++------------------
 2 files changed, 39 insertions(+), 34 deletions(-)

diff --git a/pages/helpers/main.css b/pages/helpers/main.css
index 5a7dbcf..2080a0d 100644
--- a/pages/helpers/main.css
+++ b/pages/helpers/main.css
@@ -137,3 +137,8 @@
 				margin-right: auto;
 				padding: 5px;
 			}
+
+			.app-icon {
+				width: 25%;
+				height: 25%;
+			}
diff --git a/pages/subpages/home/apps.php b/pages/subpages/home/apps.php
index b03b762..41b3d36 100755
--- a/pages/subpages/home/apps.php
+++ b/pages/subpages/home/apps.php
@@ -33,16 +33,16 @@
 		<div class="row center text">
 
 			<div class="col-12 text border" id="expense">
-				<figure>
-					<a href="https://git.hyperling.com/me/flutter-expense-tracker/releases">
-						<img loading="lazy" width="25%" height="25%" alt="expense_image"
+				<a href="https://git.hyperling.com/me/flutter-expense-tracker/releases">
+					<figure>
+						<img class="app-icon" loading="lazy" alt="expense_image"
 							src="/files/media/icons/expense.png"
 						/>
 						<figcaption>
 							Recurring Expense Tracker
 						</figcaption>
-					</a>
-				</figure>
+					</figure>
+				</a>
 				<p>
 					Keep track of repeating expenses and
 					view projections of their effect on your finances.
@@ -58,16 +58,16 @@
 			</div>
 
 			<div class="col-12 text border" id="tictactoe">
-				<figure>
-					<a href="https://git.hyperling.com/me/android-tictactoe/releases">
-						<img loading="lazy" width="25%" height="25%" alt="tictactoe_image"
+				<a href="https://git.hyperling.com/me/android-tictactoe/releases">
+					<figure>
+						<img class="app-icon" loading="lazy" alt="tictactoe_image"
 							src="/files/media/icons/tictactoe.png"
 						/>
 						<figcaption>
 							Tic-Tac-Toe
 						</figcaption>
-					</a>
-				</figure>
+					</figure>
+				</a>
 				<p>
 					Play against a friend or a range of AIs.
 					Written to practice Kotlin/Compose.
@@ -82,17 +82,17 @@
 			</div>
 
 			<div class="col-12 text border" id="ctfu">
-				<figure>
-					<a href="https://git.hyperling.com/me/android-carb-up/releases"
-						target="_blank" rel="noopener noreferrer">
-						<img loading="lazy" width="25%" height="25%" alt="ctfu_image"
+				<a href="https://git.hyperling.com/me/android-carb-up/releases"
+					target="_blank" rel="noopener noreferrer">
+					<figure>
+						<img class="app-icon" loading="lazy" alt="ctfu_image"
 							src="/files/media/icons/ctfu.png"
 						/>
 						<figcaption>
 							Carb Up! BETA
 						</figcaption>
-					</a>
-				</figure>
+					</figure>
+				</a>
 				<p>
 					Calculate cost-effective foods on a High Carb Low Fat lifestyle.
 				</p>
@@ -112,18 +112,18 @@
 			</div>
 
 			<div class="col-12 text border" id="timer">
-				<figure>
-					<a href="https://git.hyperling.com/me/android-infinite-timer/releases"
-						target="_blank" rel="noopener noreferrer"
-					>
-						<img loading="lazy" width="25%" height="25%" alt="infinitetimer_image"
+				<a href="https://git.hyperling.com/me/android-infinite-timer/releases"
+					target="_blank" rel="noopener noreferrer"
+				>
+					<figure>
+						<img class="app-icon" loading="lazy" alt="infinitetimer_image"
 							src="/files/media/icons/infinitetimer.png"
 						/>
 						<figcaption>
 							Infinite Timer
 						</figcaption>
-					</a>
-				</figure>
+					</figure>
+				</a>
 				<p>
 					Play a notification at your chosen interval.
 				</p>
@@ -143,10 +143,10 @@
 			</div>
 
 			<div class="col-12 text border" id="sleep">
-				<figure>
-					<a href="https://git.hyperling.com/me/android-45-minute-rule/releases"
-						target="_blank" rel="noopener noreferrer">
-						<img loading="lazy" width="25%" height="25%" alt="45minuterule"
+				<a href="https://git.hyperling.com/me/android-45-minute-rule/releases"
+					target="_blank" rel="noopener noreferrer">
+					<figure>
+						<img class="app-icon" loading="lazy" alt="45minuterule"
 							src="/files/media/icons/t45mr.png"
 						/>
 						<figcaption>
@@ -173,18 +173,18 @@
 			</div>
 
 			<div class="col-12 text border" id="games">
-				<figure>
-					<a href="https://git.hyperling.com/me/android-hypergames/releases"
-						target="_blank" rel="noopener noreferrer"
-					>
-						<img loading="lazy" width="25%" height="25%" alt="hypergames_image"
+				<a href="https://git.hyperling.com/me/android-hypergames/releases"
+					target="_blank" rel="noopener noreferrer"
+				>
+					<figure>
+						<img class="app-icon" loading="lazy" alt="hypergames_image"
 							src="/files/media/icons/hypergames.png"
 						/>
 						<figcaption>
 								HyperGames
 						</figcaption>
-					</a>
-				</figure>
+					</figure>
+				</a>
 				<p>
 					Started as a fun project for learning.
 					Playable but unfinished.