me/nodejs-website
me/nodejs-website
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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.

Browse Source
This commit is contained in:
Hyperling 2025-05-19 09:09:53 -07:00
parent 00660cef98
commit 72b1afdedd
2 changed files with 39 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
pages/helpers/main.css
View File

@ -137,3 +137,8 @@
margin-right: auto; margin-right: auto;
padding: 5px; padding: 5px;
} }
.app-icon {
width: 25%;
height: 25%;
}

34
pages/subpages/home/apps.php
View File

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