Merge pull request 'Style Overhaul' (#2) from dev into main

Reviewed-on: #2

pages/about.php

@@ -5,8 +5,6 @@
 
 		<div class="row">
 			<h1 class="col-12 title">Who Am I?</h1>
-		</div>
-		<div class="row">
 			<div class="col-12 header center" >
 				<img src="/files/media/icons/about.jpg">
 			</div>

pages/contact.php

@@ -5,17 +5,15 @@
 
 		<div class="row">
 			<h1 class="col-12 title">Contact</h1>
-		</div>
-		<div class="row">
 			<div class="col-12 header center" >
 				<img src="/files/media/icons/contact.jpg">
 			</div>
 		</div>
 		<div class="row">
-			<div class="col-12 title">
+			<div class="col-12 title center">
 				<p>
 					Timely responses are not guarenteed, as I spend a majority of
-					my time offline and enjoy traveling in signal-free zones.
+					my time offline and enjoy traveling in reception-free zones.
 				</p>
 			</div>
 		</div>

pages/donate.php

@@ -0,0 +1,7 @@
+#!/usr/bin/php
+<!--
+	Alias for the support page with a more common name.
+-->
+<?php
+	include "support.php";
+?>

pages/helpers/advisory.php

@@ -11,7 +11,7 @@
 				<div class="col-12 text">
 					<u class="orange">2024-03-07</u>
 					<br/>
-					Find my free new eBook, "Hyperling's Health Protocol",
+					Find my free eBook, "Hyperling's Health Protocol",
 					<u class="orange">here</u>!
 				</div>
 			</a>

pages/helpers/body_open.php

@@ -8,6 +8,9 @@
 <?php
 	include "banner.php";
 	include "menu.php";
+
+	/* 2025-01-29 Disable advisory now that Books is explicitly a menu item. * /
 	if (!isset($GLOBALS["ADVISORY"]) || $GLOBALS["ADVISORY"] !== false)
 		include "advisory.php";
+	/* */
 ?>

pages/helpers/dark.css

@@ -30,3 +30,7 @@
 			.text {
 				background-color: #333333;
 			}
+
+			.code {
+            background-color: #444444;
+			}

pages/helpers/footer.php

@@ -7,20 +7,20 @@
 		</div>
 
 		<div class="row" id="footer">
-			<div class="col-12 text center">
+			<div class="col-12 title center">
 				Have a Health or Freedom related project which could use my help?
 				<a href="mailto:me@hyperling.com">Please let me know</a>!
 			</div>
 		</div>
 		<div class="row">
-			<div class="col-3"></div>
+			<!--<div class="col-3"></div>-->
-			<h6 class="col-3 center">
+			<h6 class="col-6 center">
 				<a href="https://git.hyperling.com/me/nodejs-website/src/branch/main/LICENSE"
 					target="_blank" rel="noopener noreferrer"
 				>This website is free software! Click here to learn more.</a>
 			</h6>
-			<h6 class="col-3 center">
+			<h6 class="col-6 center">
 				<a href="/sitemap/">Full Site Map</a>
 			</h6>
-			<div class="col-3"></div>
+			<!--<div class="col-3"></div>-->
 		</div>

pages/helpers/main.css

@@ -1,7 +1,7 @@
 /*** 2022-09-14 CSS for the website. ***/
 			/* https://www.w3schools.com/Css/css_rwd_grid.asp */
 
-			/* Enable dynamic stuffs, maks the element think its entire size includes padding. */
+			/* Enable dynamic stuffs, makes the element think its entire size includes padding. */
 			* {
 				box-sizing: border-box;
 			}
@@ -24,7 +24,9 @@
 			[class*="col-"] {
 				float: left;
 				padding: 15px;
-				/*border: 1px solid green;*/ /* FORTESTING otherwise disable */
+
+				/* FORTESTING, otherwise disable */
+				/*border: 1px solid green;*/
 			}
 
 			/* Ensure columns are respected as if they always exist. */
@@ -34,7 +36,18 @@
 				display: table;
 			}
 
+			.row {
+            border: 1px solid #131313;
+            border-radius: 4px;
+			}
+
 			/** Make the menu items centered and layout horizontal. **/
+			/*
+			.menu {
+				padding-top: 10px;
+				padding-bottom: 10px;
+			}
+			*/
 			.menu-list {
 				text-align: center;
 				list-style-type: none;
@@ -42,6 +55,8 @@
 			}
 			.menu_item {
 				display: inline-block;
+				padding: 0px;
+				white-space: nowrap;
 			}
 
 			/** Be able to position anything easily. **/
@@ -60,14 +75,21 @@
 				list-style-type: none;
 			}
 
-			/** Objects which need borders **/
+			/** Extra objects which need borders **/
 			.border {
-				border: 1px solid #33CC33;
+            border: 1px solid #131313;
+            border-radius: 4px;
 			}
 
-			/* Also have this apply to a table's cells. */
+			/** Explicitly remove border from some objects. **/
-			.border * th,td {
+			.no-border {
-				border: 1px solid #33CC33;
+				border: 0px;
+			}
+
+			/** When a field needs more background color above and below. **/
+			.spacing {
+				padding-top: 5px;
+				padding-bottom: 5px;
 			}
 
 			/** Format tables and allow contents to be broken up. **/
@@ -88,6 +110,27 @@
 				max-height: 500px;
 			}
 
+			/* FORTESTING, otherwise disable */
+			/*
+			div {
+				border: 1px solid red;
+			}
+			*/
+
+			.code {
+				max-width: 90%;
+				margin-left: 5%;
+
+				overflow: auto;
+				overflow-x: scroll;
+				overflow-y: hidden;
+
+            padding: 10px;
+            border: 2px solid #131313;
+            border-radius: 8px;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+			}
+
 			body {
 				max-width: 1300px;
 				margin-left: auto;

pages/helpers/menu.php

@@ -1,12 +1,12 @@
 #!/usr/bin/php
-		<div class="row header">
+		<div class="row header menu">
 			<ul class="menu-list">
 				<li class="col-1"></li>
-				<li class="col-2 menu-item"><a href="/home/">Apps</a></li>
+				<li class="col-2 menu-item"><a href="/home/">Android Apps</a></li>
-				<li class="col-2 menu-item"><a href="/media/">Media</a></li>
+				<li class="col-2 menu-item"><a href="/media/">Books / Socials</a></li>
-				<li class="col-2 menu-item"><a href="/about/">About</a></li>
+				<li class="col-2 menu-item"><a href="/about/">About Me</a></li>
-				<li class="col-2 menu-item"><a href="/contact/">Contact</a></li>
+				<li class="col-2 menu-item"><a href="/contact/">Contact Details</a></li>
-				<li class="col-2 menu-item"><a href="/support/">Support</a></li>
+				<li class="col-2 menu-item"><a href="/support/">Support / Donate</a></li>
 				<li class="col-1"></li>
 			</ul>
 		</div>

pages/home.php

@@ -8,14 +8,12 @@
 
 		<div class="row">
 			<h1 class="col-12 title">Welcome!</h1>
-		</div>
-		<div class="row">
 			<div class="col-12 header center" >
 				<img src="/files/media/icons/home.jpg">
 			</div>
 		</div>
 		<div class="row">
-			<div class="col-12 text">
+			<div class="col-12 text center">
 				<p>
 					Thank you for visiting my site! My goal is to make the world a
 					better place. Hopefully you find content here which helps empower

pages/lists.php

@@ -1,6 +1,6 @@
 #!/usr/bin/php
 <!--
-	Page to provide ways people can support me.
+	Lists of items which I'd like to share such as gear and frequently used apps.
 -->
 <?php
 	include "helpers/body_open.php";

pages/media.php

@@ -7,13 +7,38 @@
 ?>
 
 		<div class="row">
-			<h1 class="col-12 title">Videos</h1>
+			<h1 class="col-12 title">Media</h1>
-		</div>
-		<div class="row">
 			<div class="col-12 header center" >
 				<img src="/files/media/icons/videos.jpg">
 			</div>
 		</div>
+		<div class="row">
+			<div class="col-12 text center">
+				<p>
+					My written works, social platforms, and photos can be found here.
+				</p>
+			</div>
+		</div>
+
+		<div class="row">
+			<h2 class="col-12 header">Books</h2>
+		</div>
+
+		<div class="row">
+			<div class="col-12 text">
+				<p>
+					I enjoy writing! Find my free eBooks below.
+				</p>
+				<ul class="indent"><li>
+					<a href="/health/">My Health Protocol</a>
+				</li></ul>
+			</div>
+		</div>
+
+		<div class="row" id="donate">
+			<h2 class="col-12 header">Videos</h2>
+		</div>
+
 		<div class="row">
 			<div class="col-12 text">
 				<p>
@@ -47,20 +72,6 @@
 			</div>
 		</div>
 
-		<div class="row">
-			<h1 class="col-12 title">Books</h1>
-		</div>
-		<div class="row">
-			<div class="col-12 text">
-				<p>
-					I enjoy writing! Find my free eBooks below.
-				</p>
-				<ul class="indent"><li>
-					<a href="/health/">My Health Protocol</a>
-				</li></ul>
-			</div>
-		</div>
-
 <!-- WIP
 		<div class="row">
 			<h1 class="col-12 title">Art / Poetry</h1>
@@ -78,7 +89,7 @@
 -->
 
 		<div class="row">
-			<h1 class="col-12 title">Personal Media</h1>
+			<h2 class="col-12 header">Photography</h2>
 		</div>
 		<div class="row">
 			<div class="col-12 text">

pages/resume.php

@@ -8,17 +8,15 @@
 
 		<div class="row">
 			<h1 class="col-12 title">Resume</h1>
-		</div>
-		<div class="row">
 			<div class="col-12 header center" >
 				<img src="/files/media/icons/home.jpg"> <!-- TBD use a new photo -->
 			</div>
+			<h2 class="col-12 title center">Current Status : Traveling Full Time</h2>
 		</div>
 		<div class="row">
-			<h2 class="col-12 header">Current Status : Full Time Contractor</h2>
+			<div class="col-12 text center">
-			<div class="col-12 text">
 				<p>
-					Interested in hiring me? Please find my resume below!
+					Interested in hiring me? View my resume below!
 				</p>
 				<ul class="indent"><li>
 					<a href="https://hyperling.com/files/media/documents/Resume.pdf"

pages/subpages/home/apps.php

@@ -5,16 +5,11 @@
 		<div class="row">
 			<div class="col-12 text">
 				<p>
-					I'm a self-taught, college graduated, and professional software
+					I'm a professional software engineer who's been playing with
-					developer with nearly a decade of experience in the corporate
+					Linux system administration from a young age. Much of my career
-					world. I have been playing with Linux from a young age and have
+					has focused on back-end / database systems and optimizing
-					always enjoyed doing system administration type activities.
+					workflows. In my free time I enjoy learning new languages and
-				<p>
+					writing apps for Android.
-				</p>
-					Much of my career has focused on back-end type systems such as
-					databases as well as optimizing workflows. I've learned many
-					languages over the years and hope to learn many more. In my free
-					time I have also enjoyed writing user-facing apps for Android.
 				</p>
 				<!--<p><a href="/resume/">My resume can be found here</a>.</p>-->
 			</div>
@@ -34,11 +29,12 @@
 		<div class="row" id="android">
 			<h3 class="col-12 header">Android Apps</h3>
 		</div>
-		<div class="row center">
+
-			<div class="col-12 text" id="tictactoe">
+		<div class="row center text">
+			<div class="col-12 text border" id="tictactoe">
 				<figure>
 					<a href="https://git.hyperling.com/me/android-tictactoe/releases">
-						<img width="50%" height="50%" alt="tictactoe_image"
+						<img loading="lazy" width="25%" height="25%" alt="tictactoe_image"
 							src="/files/media/icons/tictactoe.png"
 						/>
 						<figcaption>
@@ -60,11 +56,11 @@
 			</div>
 
 		<div class="row center">
-			<div class="col-6 text" id="ctfu">
+			<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 width="100%" height="100%" alt="ctfu_image"
+						<img loading="lazy" width="25%" height="25%" alt="ctfu_image"
 							src="/files/media/icons/ctfu.png"
 						/>
 						<figcaption>
@@ -90,12 +86,12 @@
 				</figure>
 			</div>
 
-			<div class="col-6 text" id="timer">
+			<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="100%" height="100%" alt="infinitetimer_image"
+						<img loading="lazy" width="25%" height="25%" alt="infinitetimer_image"
 							src="/files/media/icons/infinitetimer.png"
 						/>
 						<figcaption>
@@ -120,14 +116,12 @@
 					</figcaption>
 				</figure>
 			</div>
-		</div>
 
-		<div class="row center">
+			<div class="col-12 text border" id="sleep">
-			<div class="col-6 text" id="sleep">
 				<figure>
 					<a href="https://git.hyperling.com/me/android-45-minute-rule/releases"
 						target="_blank" rel="noopener noreferrer">
-						<img loading="lazy" width="100%" height="100%" alt="45minuterule"
+						<img loading="lazy" width="25%" height="25%" alt="45minuterule"
 							src="/files/media/icons/t45mr.png"
 						/>
 						<figcaption>
@@ -153,12 +147,12 @@
 				</figure>
 			</div>
 
-			<div class="col-6 text" id="games">
+			<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="100%" height="100%" alt="hypergames_image"
+						<img loading="lazy" width="25%" height="25%" alt="hypergames_image"
 							src="/files/media/icons/hypergames.png"
 						/>
 						<figcaption>

pages/subpages/support/donate.php

@@ -3,66 +3,70 @@
 		<div class="row" id="donate">
 			<h2 class="col-12 header">Donate</h2>
 		</div>
-		<div class="row">
-			<div class="col-12 text">
-				<p>
-					Donations can be provided directly to my crypto addresses.
-				</p>
-				<!--<ul class="indent"><li>
-					<table class="border">
-						<thead>
-							<tr>
-								<th class="center"><strong>Description</strong></th>
-								<th class="center"><strong>Ticker#</strong></th>
-								<th class="left"><strong>Address</strong></th>
-							</tr>
-						</thead>
-						<tbody>
-							<tr>
-								<td class="center">Monero</td>
-								<td class="center">XMR</td>
-								<td class="left">4ATk6owoMki46CuVfyAHS57FB5deqVFudTsaifQC1cfmcaQemgPEftcjZcW9DmcyfrfdRjxHQ9m4JAVSorYTgm6h8JnT7ao</td>
-							</tr>
-							<tr>
-								<td class="center">LBRY/Odysee Credit</td>
-								<td class="center">LBC</td>
-								<td class="left">bDWP6qZajtm9Q9EkryKTorRwKFd5eDbPJj</td>
-							</tr>
-						</tbody>
-					</table>
-				</li></ul>-->
-			</div>
 
-			<div class="col-12 header">
+		<div class="row text">
-				<p>
-					<strong><code>XMR | Monero</code></strong>
-					<ul class="indent"><li>
-						<kbd>4ATk6owoMki46CuVfyAHS57FB5deqVFudTsaifQC1cfmcaQemgPEftcjZcW9DmcyfrfdRjxHQ9m4JAVSorYTgm6h8JnT7ao</kbd>
-					</li></ul>
 
-					<strong><code>BTC | Bitcoin</code></strong>
+			<div class="col-4 center border">
-					<ul class="indent"><li>
+				<h3 class="title spacing">Preference 1 - Private Crypto</h3>
-						<kbd>bc1qsfe8dkvry3d34kztz449gkq67wq8fu2nkgfkh0</kbd>
+				<p>Send me any type of coin.</p>
-					</li></ul>
+				<div class="header">
-
-					<strong><code>LTC | Litecoin</code></strong>
-					<ul class="indent"><li>
-						<kbd>ltc1qavmpu5d6ljntxsd6jj548m4yys83zwscl0dzkx</kbd>
-					</li></ul>
-
-					<strong><code>LBC | LBRY/Odysee Credit</code></strong>
-					<ul class="indent"><li>
-						<kbd>bDWP6qZajtm9Q9EkryKTorRwKFd5eDbPJj</kbd>
-					</li></ul>
-				<p>
-			</div>
-
-			<div class="col-12 text">
-				<p>Or use the widget below to send me any coin you'd like!</p>
-			</div>
-
-			<div class="col-12 center header">
 					<!-- https://trocador.app/en/anonpayurlgenerator -->
 					<iframe src="https://trocador.app/anonpay/?ticker_to=xmr&network_to=Mainnet&address=4ATk6owoMki46CuVfyAHS57FB5deqVFudTsaifQC1cfmcaQemgPEftcjZcW9DmcyfrfdRjxHQ9m4JAVSorYTgm6h8JnT7ao&donation=True&amount=1337.0&name=Chad&description=Support+Chad+%40+Hyperling&email=me@hyperling,com&ticker_from=doge&network_from=Mainnet&buttonbgcolor=663399&textcolor=cccccc&bgcolor=" width="310" height="350" style="border:0" scrolling="no"></iframe>
 				</div>
 			</div>
+
+			<div class="col-4 center border">
+				<h3 class="title spacing">Preference 2 - Public Crypto</h3>
+				<p>Donate directly to my addresses.</p>
+				<div class="header">
+					<br/>
+
+					<strong><code>XMR | Monero</code></strong>
+					<div class="code"><code>4ATk6owoMki46CuVfyAHS57FB5deqVFudTsaifQC1cfmcaQemgPEftcjZcW9DmcyfrfdRjxHQ9m4JAVSorYTgm6h8JnT7ao</code></div>
+					<br/>
+
+					<strong><code>BTC | Bitcoin</code></strong>
+					<div class="code"><kbd>bc1qsfe8dkvry3d34kztz449gkq67wq8fu2nkgfkh0</kbd></div>
+					<br/>
+
+					<strong><code>LTC | Litecoin</code></strong>
+					<div class="code"><code>ltc1qavmpu5d6ljntxsd6jj548m4yys83zwscl0dzkx</code></div>
+					<br/>
+
+					<strong><code>LBC | Odysee's Coin</code></strong>
+					<div class="code"><code>bDWP6qZajtm9Q9EkryKTorRwKFd5eDbPJj</code></div>
+					<br/>
+				</div>
+			</div>
+
+			<div class="col-4 center border">
+				<h3 class="title spacing">Preference 3 - Public USD</h3>
+				<p>Send USD to a fiat-based account.</p>
+				<div class="header">
+					<br/>
+
+					<strong><code>Zelle</code></strong>
+					<div class="code">
+						<kbd>me@hyperling.com</kbd>
+						<br/>
+						<br/>
+						<img src="/files/media/icons/zelle.png">
+					</div>
+					<br/>
+
+					<strong><code>Venmo</code></strong>
+					<div class="code">
+						<kbd>
+							@HyperVegan
+							<br/>
+							<br/>
+							<kbd>[<a href="https://account.venmo.com/u/HyperVegan"
+								target="_blank" rel="noopener noreferrer"
+							>Account Page</a>]
+						</kbd>
+					</div>
+					<br/>
+				</div>
+			</div>
+
+		</div>

pages/support.php

@@ -8,15 +8,12 @@
 
 		<div class="row">
 			<h1 class="col-12 title">Support</h1>
-		</div>
-		<div class="row">
 			<div class="col-12 header center" >
 				<img src="/files/media/icons/support.jpg">
 			</div>
-			<div class="col-12 text">
+			<div class="col-12 text center">
 				<p>
-					Your contributions are completely optional and very much
+					Anything is very much appreciated!! Thank you for considering me!
-					appreciated. Thank you for considering me and my work!
 				</p>
 			</div>
 		</div>