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;
padding: 5px;
}
.app-icon {
width: 25%;
height: 25%;
}

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

@ -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.