Implemented the grid formatting. Dark theme came along nicely. Got the home page laid out and still trying to determine which subcontent to put on which page.

pages/helpers/dark.css

@@ -0,0 +1,30 @@
+/*** MyStuff ***/
+/** Dark Theme **/
+body {
+  background-color: #444444;
+}
+
+* {
+  color: #CCCCCC;
+}
+
+a {
+  color: #FF9900
+}
+
+h1,h2,h3,h4,h5,h6 {
+  color: #6633FF;
+}
+
+.header {
+  /*background-color: #113311;*/
+  background-color: #222222;
+}
+
+.title {
+  background-color: #111111;
+}
+
+.text {
+  background-color: #333333;
+}

pages/helpers/footer.php

@@ -1,6 +1,11 @@
 #!/usr/bin/php
-		<h6>
-			<a href="https://github.com/Hyperling/www/blob/main/LICENSE" target="_blank">
-				Copyright <?php echo date("Y"); ?> 
+<?php
+	include "menu.php"
+?>
+		<h6 class="center">
+			<a href="https://github.com/Hyperling/www/blob/main/LICENSE" 
+				target="_blank" rel="noopener noreferrer"
+			>
+				This website is free software! Click to learn more.
 			</a>
 		</h6>

pages/helpers/header.php

@@ -13,4 +13,7 @@
 		<style>
 			<?php include "main.css"; ?>
 		</style>
+		<style>
+			<?php include "dark.css"; ?>
+		</style>
 	</head>

pages/helpers/main.css

@@ -1,21 +1,13 @@
 /* 2022-09-14 CSS for the website. */
 /* https://www.w3schools.com/Css/css_rwd_grid.asp */
 
-/* Enable dynamic stuffs */
+/* Enable dynamic stuffs, maks the element think its entire size includes padding. */
 * {
   box-sizing: border-box;
 }
 
-/* Page Sections */
-.menu {
-  width: 25%;
-  float: left;
-}
-.main {
-  width: 75%;
-  float: left;
-}
-
+/*** Page Sections ***/
+/** Page with 12 columns **/
 .col-1 {width: 8.33%;}
 .col-2 {width: 16.66%;}
 .col-3 {width: 25%;}
@@ -32,26 +24,27 @@
 [class*="col-"] {
   float: left;
   padding: 15px;
-  border: 1px solid red;
+  /*border: 1px solid green;*/ /* FORTESTING otherwise disable */
 }
 
+/* Ensure columns are respected as if they always exist. */
 .row::after {
   content: "";
   clear: both;
   display: table;
 }
 
-/* MyStuff ***/
-/** Dark Theme **/
-body {
-  background-color: #333333;
+/** Make the menu items centered and layout horizontal. **/
+.menu-list {
+  text-align: center;
+  list-style-type: none;
+  padding-left: 0px;
 }
-* {
-  color: #CCCCCC;
+
+.menu_item {
+  display: inline-block;
 }
-a {
-  color: #FF9900
-}
-h1,h2,h3,h4,h5,h6 {
-  color: #6633FF
+
+.center {
+  text-align: center;
 }

pages/helpers/menu.php

@@ -1,6 +1,11 @@
 #!/usr/bin/php
-		<ul>
-			<li><a href="/home/">Home</a></li>
-			<li><a href="/about/">About</a></li>
-			<li><a href="/support/">Support</a></li>
-		</ul>
+		<div class="row header">
+			<ul class="menu-list">
+				<li class="col-2"></li>
+				<li class="col-2 menu-item"><a href="/home/">Home</a></li>
+				<li class="col-2 menu-item"><a href="/videos/">Videos</a></li>
+				<li class="col-2 menu-item"><a href="/about/">About</a></li>
+				<li class="col-2 menu-item"><a href="/support/">Support</a></li>
+				<li class="col-2"></li>
+			</ul>
+		</div>