announcements, small refactor and add the video for F-Droid.

pages/apps.php

@@ -108,7 +108,7 @@
 						>[fdroid.Hyperling.com]</a>
 						or
 						<a href="https://fdroid.link/#https://fdroid.hyperling.com/fdroid/repo">
-						[open directly with F-Droid]</a>
+						[open with F-Droid]</a>
 					</li>
 				</ul>
 				<p>
@@ -125,7 +125,7 @@
 
 		<div class="row center text">
 
-			<div class="col-12 text border" id="sunset">
+			<div class="col-4 text border" id="sunset">
 				<a href="https://git.hyperling.com/me/flutter-sunset-alarm/releases"
 						target="_blank" rel="noopener noreferrer">
 					<figure>
@@ -141,7 +141,6 @@
 					Set an alarm to go off X minutes before sunset. (Linux & Android)
 				</p>
 				<p>
-					<!--[<s><a>F-Droid</a></s>]-->
 					[<a href="https://git.hyperling.com/me/flutter-sunset-alarm/releases/download/latest/sunset_alarm-arm64-v8a-release.apk/"
 						target="_blank" rel="noopener noreferrer">APK</a>]
 					[<a href="https://git.hyperling.com/me/flutter-sunset-alarm/"
@@ -151,7 +150,7 @@
 				</p>
 			</div>
 
-			<div class="col-12 text border" id="expense">
+			<div class="col-4 text border" id="expense">
 				<a href="https://git.hyperling.com/me/flutter-expense-tracker/releases"
 						target="_blank" rel="noopener noreferrer">
 					<figure>
@@ -169,7 +168,6 @@
 					(Linux & Android)
 				</p>
 				<p>
-					<!--[<s><a>F-Droid</a></s>]-->
 					[<a href="https://git.hyperling.com/me/flutter-expense-tracker/"
 						target="_blank" rel="noopener noreferrer">Source Code</a>]
 					[<a href="https://git.hyperling.com/me/flutter-expense-tracker/releases"
@@ -177,7 +175,7 @@
 				</p>
 			</div>
 
-			<div class="col-12 text border" id="timer">
+			<div class="col-4 text border" id="timer">
 				<a href="https://git.hyperling.com/me/android-infinite-timer/releases"
 					target="_blank" rel="noopener noreferrer"
 				>
@@ -196,19 +194,20 @@
 				<p>
 					<!--[<a href="https://play.google.com/store/apps/details?id=com.hyperling.apps.infinitetimer"
 						target="_blank" rel="noopener noreferrer">Play Store</a>]-->
+					[<a href="https://git.hyperling.com/me/android-infinite-timer/releases/download/latest/InfiniteTimer.apk"
+						target="_blank" rel="noopener noreferrer">APK</a>]
 					[<a href="https://git.hyperling.com/me/android-infinite-timer/"
 						target="_blank" rel="noopener noreferrer">Source Code</a>]
 					[<a href="https://git.hyperling.com/me/android-infinite-timer/releases"
-						target="_blank" rel="noopener noreferrer">APKs / Obtainium URL</a>]
+						target="_blank" rel="noopener noreferrer">Obtainium URL</a>]
 				</p>
-				<!--<p>
-					<s>
-						[<a target="_blank" rel="noopener noreferrer">F-Droid</a>]
-					</s>
-				</p>-->
 			</div>
 
-			<div class="col-12 text border" id="ctfu">
+		</div>
+
+		<div class="row center text">
+
+			<div class="col-3 text border" id="ctfu">
 				<a href="https://git.hyperling.com/me/android-carb-up/releases"
 					target="_blank" rel="noopener noreferrer">
 					<figure>
@@ -216,7 +215,7 @@
 							src="https://git.hyperling.com/me/android-carb-up/raw/branch/main/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png"
 						>
 						<figcaption>
-							Carb Up! BETA
+							Carb Up!
 						</figcaption>
 					</figure>
 				</a>
@@ -231,14 +230,9 @@
 					[<a href="https://git.hyperling.com/me/android-carb-up/releases"
 						target="_blank" rel="noopener noreferrer">Obtainium URL</a>]
 				</p>
-				<!--<p>
-					<s>
-						[<a target="_blank" rel="noopener noreferrer">F-Droid</a>]
-					</s>
-				</p>-->
 			</div>
 
-			<div class="col-12 text border" id="sleep">
+			<div class="col-3 text border" id="sleep">
 				<a href="https://git.hyperling.com/me/android-45-minute-rule/releases"
 					target="_blank" rel="noopener noreferrer">
 					<figure>
@@ -261,14 +255,9 @@
 					[<a href="https://git.hyperling.com/me/android-45-minute-rule/releases"
 						target="_blank" rel="noopener noreferrer">APKs / Obtainium URL</a>]
 				</p>
-				<!--<p>
-					<s>
-						[<a target="_blank" rel="noopener noreferrer">F-Droid</a>]
-					</s>
-				</p>-->
 			</div>
 
-			<div class="col-12 text border" id="tictactoe">
+			<div class="col-3 text border" id="tictactoe">
 				<a href="https://git.hyperling.com/me/android-tictactoe/releases"
 						target="_blank" rel="noopener noreferrer">
 					<figure>
@@ -285,7 +274,6 @@
 					Written to practice Kotlin/Compose.
 				</p>
 				<p>
-					<!--[<s><a>F-Droid</a></s>]-->
 					[<a href="https://git.hyperling.com/me/android-tictactoe/"
 						target="_blank" rel="noopener noreferrer">Source Code</a>]
 					[<a href="https://git.hyperling.com/me/android-tictactoe/releases"
@@ -293,7 +281,7 @@
 				</p>
 			</div>
 
-			<div class="col-12 text border" id="games">
+			<div class="col-3 text border" id="games">
 				<a href="https://git.hyperling.com/me/android-hypergames/releases"
 					target="_blank" rel="noopener noreferrer"
 				>
@@ -318,14 +306,8 @@
 					[<a href="https://git.hyperling.com/me/android-hypergames/releases"
 						target="_blank" rel="noopener noreferrer">APKs / Obtainium URL</a>]
 				</p>
-				<!--
-				<p>
-					<s>
-						[<a target="_blank" rel="noopener noreferrer">F-Droid</a>]
-					</s>
-				</p>
-				-->
 			</div>
+
 		</div>
 
 		<div class="row" id="other">

pages/helpers/banner.php

@@ -5,14 +5,15 @@
 		$GLOBALS["SHOW_BANNER_PICS"] = true;
 	}
 	$show_pics = $GLOBALS["SHOW_BANNER_PICS"];
-	$banner_width = $show_pics ? 6 : 12;
+	$banner_width_desktop = $show_pics ? 6 : 12;
+	$banner_width_mobile = $show_pics ? 8 : 12;
 ?>
-		<a href='/about/'>
+		<a href='/'>
-			<div class="row">
+			<div class="row banner-desktop">
 				<?php if ($show_pics) echo '
 				<div class="col-3 header center banner-image banner-image01"></div>
 				';?>
-				<div class="col-<?php echo "$banner_width"; ?> header">
+				<div class="col-<?php echo "$banner_width_desktop"; ?> header">
 					<div class="banner-top">Peace</div>
 					<div class="banner-middle">Love</div>
 					<div class="banner-bottom">Happiness</div>
@@ -21,4 +22,18 @@
 				<div class="col-3 header center banner-image banner-image02"></div>
 				';?>
 			</div>
+
+			<div class="row banner-mobile">
+				<?php if ($show_pics) echo '
+				<div class="col-2 header center banner-image banner-image01"></div>
+				';?>
+				<div class="col-<?php echo "$banner_width_mobile"; ?> header">
+					<div class="banner-top">Peace</div>
+					<div class="banner-middle">Love</div>
+					<div class="banner-bottom">Happiness</div>
+				</div>
+				<?php if ($show_pics) echo '
+				<div class="col-2 header center banner-image banner-image02"></div>
+				';?>
+			</div>
 		</a>

pages/helpers/font.css

@@ -35,11 +35,12 @@
 
 			html {
 				font-size: 16px;
-				/* Prevent Firefox Reader Inconsistency */
+				/* Attempt to prevent Firefox sizing inconsistencies. * /
 				-webkit-text-size-adjust: 100%;
 				-moz-text-size-adjust: 100%;
 				-ms-text-size-adjust: 100%;
 				text-size-adjust: 100%;
+				/* */
 			}
 
 			code, pre { font-size: 0.8rem; }

pages/helpers/main.css

@@ -21,24 +21,57 @@
 			.col-11 {width: 91.66%;}
 			.col-12 {width: 100%;}
 
+			.row {
+				border: 1px solid #131313;
+				border-radius: 4px;
+				display: flex;
+				flex-wrap: wrap;
+				align-items: stretch;
+			}
+
 			[class*="col-"] {
-				float: left;
 				padding: 15px;
 
 				/* FORTESTING, otherwise disable */
 				/*border: 1px solid green;*/
 			}
 
-			/* Ensure columns are respected as if they always exist. */
+			/* Handle mobile devices a bit better, making columns break out as rows. */
-			.row::after {
+
-				content: "";
+			.banner-desktop { display: flex; }
-				clear: both;
+			.banner-mobile { display: none; }
-				display: table;
+
+			/* Phones */
+			@media (max-width: 767px) {
+				[class*="col-"] {
+					width: 100%;
+				}
 			}
 
-			.row {
+			/* Tablets */
-            border: 1px solid #131313;
+			@media (min-width: 768px) and (max-width: 1023px) {
-            border-radius: 4px;
+				.col-1, .col-2, .col-3, .col-4, .col-5, .col-6 {
+					width: 50%;
+				}
+				.col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
+					width: 100%;
+				}
+			}
+
+			/* Both Mobiles */
+			@media (max-width: 1023px) {
+				[class*="col-"] {
+					float: none;
+					display: block;
+				}
+				.banner-image {display: none; }
+				.banner-desktop { display: none; }
+				.banner-mobile { display: flex; }
+			}
+
+				/* Desktop */
+			@media (min-width: 1024px) {
+
 			}
 
 			/** Make the menu items centered and layout horizontal. **/
@@ -51,12 +84,12 @@
 			.menu-list {
 				text-align: center;
 				list-style-type: none;
-				padding-left: 0px;
 			}
-			.menu_item {
+			.menu-item {
 				display: inline-block;
-				padding: 0px;
 				white-space: nowrap;
+				margin: 0.1rem;
+				padding: 0.1rem;
 			}
 
 			/** Be able to position anything easily. **/
@@ -77,8 +110,8 @@
 
 			/** Extra objects which need borders **/
 			.border {
-            border: 1px solid #131313;
+				border: 1px solid #131313;
-            border-radius: 4px;
+				border-radius: 4px;
 			}
 
 			/** Explicitly remove border from some objects. **/
@@ -125,10 +158,10 @@
 				overflow-x: scroll;
 				overflow-y: hidden;
 
-            padding: 10px;
+				padding: 10px;
-            border: 2px solid #131313;
+				border: 2px solid #131313;
-            border-radius: 8px;
+				border-radius: 8px;
-            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+				box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 			}
 
 			body {

pages/helpers/menu.php

@@ -1,6 +1,6 @@
 #!/usr/bin/php
+		<!--
 		<div class="row header menu">
-			<!--
 			<ul class="menu-list">
 				<li class="col-3 menu-item"><a href="/">Home</a></li>
 				<li class="col-3 menu-item"><a href="/about/">About</a></li>
@@ -33,29 +33,48 @@
 				</li>
 				<li class="col-3 menu-item"></li>
 			</ul>
-			-->
+		</div>
+		-->
 
-			<p class="menu-list">
+		<div class="menu row header center">
-				Main:
+			<div class="menu-list col-12">
-				<a href="/apps/">Apps</a>
+				<strong>Main:</strong>
-				<a href="/about/">About</a>
+				<a class="menu-item" href="/apps/">Apps</a>
-				<a href="/contact/">Contact</a>
+				<a class="menu-item" href="/about/">About</a>
-				<a href="/support/">Support</a>
+				<a class="menu-item" href="/contact/">Contact</a>
-				| Media:
+				<a class="menu-item" href="/support/">Support</a>
-				<a href="https://git.hyperling.com/me/"
+				<strong>Media:</strong>
-					target="_blank" rel="noopener noreferrer">Code</a>
+				<a class="menu-item"
-				<a href="https://works.hyperling.com/categories/books/"
+					href="https://git.hyperling.com/me/"
-					target="_blank" rel="noopener noreferrer">Books</a>
+					target="_blank" rel="noopener noreferrer"
-				<a href="https://works.hyperling.com/videos/"
+				>Code</a>
-					target="_blank" rel="noopener noreferrer">Videos</a>
+				<a class="menu-item"
-				<a href="/photos/">Photos</a>
+					href="https://works.hyperling.com/categories/books/"
-				| Blog:
+					target="_blank" rel="noopener noreferrer"
-				<a href="https://blog.hyperling.com/categories/articles/"
+				>Books</a>
-					target="_blank" rel="noopener noreferrer">Articles</a>
+				<a class="menu-item"
-				<a href="https://recipes.hyperling.com/categories/recipes/"
+					href="https://works.hyperling.com/videos/"
-					target="_blank" rel="noopener noreferrer">Recipes</a>
+					target="_blank" rel="noopener noreferrer"
-				<a href="https://blog.hyperling.com/categories/musings/"
+				>Videos</a>
-					target="_blank" rel="noopener noreferrer">Poetry</a>
+				<a class="menu-item"
-				<a href="https://recipes.hyperling.com/categories/guides/"
+					href="/photos/"
-					target="_blank" rel="noopener noreferrer">Guides</a>
+				>Photos</a>
+				<strong>Blog:</strong>
+				<a class="menu-item"
+					href="https://blog.hyperling.com/categories/articles/"
+					target="_blank" rel="noopener noreferrer"
+				>Articles</a>
+				<a class="menu-item"
+					href="https://recipes.hyperling.com/categories/recipes/"
+					target="_blank" rel="noopener noreferrer"
+				>Recipes</a>
+				<a class="menu-item"
+					href="https://blog.hyperling.com/categories/musings/"
+					target="_blank" rel="noopener noreferrer"
+				>Poetry</a>
+				<a class="menu-item"
+					href="https://recipes.hyperling.com/categories/guides/"
+					target="_blank" rel="noopener noreferrer"
+				>Guides</a>
+			</div>
 		</div>

pages/subpages/home/announcements.php

@@ -25,6 +25,12 @@
 						target="_blank" rel="noopener noreferrer"
 					>Find it here</a>!
 				</p>
+				<p>
+					Watch the announcement:
+					<a href="https://odysee.com/@HyperVegan:2/20260707-HyperVegan-FDroidRepo:a"
+						target="_blank" rel="noopener noreferrer"
+					>HyperVegan: "F-Droid Repository"</a>
+				</p>
 			</div>
 		</div>
 
@@ -46,9 +52,10 @@
 				</p>
 				";?>
 				<p>
+					Watch the announcement:
 					<a href="https://odysee.com/@HyperVegan:2/20251003-Announcements:0"
 						target="_blank" rel="noopener noreferrer"
-					>Watch the announcement here | (HyperVegan: "Announcements: Skipped Midfest, Voluntary Sovereignty eBook, CheapRVLiving Interview")</a>
+					>HyperVegan: "Announcements: Skipped Midfest, Voluntary Sovereignty eBook, CheapRVLiving Interview"</a>
 				</p>
 			</div>
 		</div>
@@ -71,9 +78,10 @@
 				</p>
 				";?>
 				<p>
+					Watch the announcement:
 					<a href="https://odysee.com/@HyperVegan:2/20250402-HyperVegan-ExpenseTrackerApp:4"
 						target="_blank" rel="noopener noreferrer"
-					>Watch the announcement here | (HyperVegan: "Expense Tracker App")</a>
+					>HyperVegan: "Expense Tracker App"</a>
 				</p>
 			</div>
 		</div>
@@ -98,9 +106,10 @@
 				</p>
 				";?>
 				<p>
+					Watch the announcement:
 					<a href="https://odysee.com/@HyperVegan:2/20240306_MyHealthProtocol-Book:9"
 						target="_blank" rel="noopener noreferrer"
-					>Watch the announcement here | (HyperVegan: "My Health Protocol | eBook")</a>
+					>HyperVegan: "My Health Protocol | eBook"</a>
 				</p>
 			</div>
 		</div>
@@ -122,9 +131,10 @@
 				</p>
 				";?>
 				<p>
+					Watch the announcement:
 					<a href="https://odysee.com/@HyperVegan:2/20240401_NewYearNewApp:1"
 						target="_blank" rel="noopener noreferrer"
-					>Watch the announcement here | (HyperVegan: "New Year, New App")</a>
+					>HyperVegan: "New Year, New App"</a>
 				</p>
 			</div>
 		</div>