rework

app/bootstrap.php

@@ -8,11 +8,11 @@
 */
 
 ini_set('display_errors', 'On');
-error_reporting(E_ALL | E_STRICT);
+error_reporting(E_ALL);
 
 session_start();
 
-require_once('../app/library.php');
+require_once '../app/library.php';
 
 // ---------------------------------------------------------------------------- //
 // ---------------------------------------------------------------------------- //
@@ -26,6 +26,7 @@ const MAP = [
     'Show'           => 'models/Show.php',
     'User'           => 'models/User.php',
 
+    'Router'          => 'router.php',
     'Database'        => 'modules/Database.php',
     'CommunityModule' => 'modules/CommunityModule.php',
     'DisplayModule'   => 'modules/DisplayModule.php',

app/modules/DisplayModule.php

@@ -40,27 +40,18 @@
 
 		/* --- Module Functions - the meat and purpose of the module. --- */
 		public function Articles($limit) {
+			$articles = Database::select('articles', 'id', '', 'articleDate DESC', $limit)->fetchAll();
 
-			$db = new DatabaseModule();
+			if(count($articles)) {
-
-			$articles = $db->getData('ms_articles', 'id', '', 'LIMIT ' . $limit, 'ORDER BY articleDate DESC');
-
-			if($db->countRows('ms_articles', '') > 0) {
-
 				foreach($articles as $articleID) {
-
 					$article = new Article($articleID['id']);
 					$author  = new User($article->Author);
 
-					echo ParseTemplate($this->ListedArticle, array('t' => magicClean($article->Title), 'l' => "blog.php?do=read&article=" . $article->ID, 'd' => BBCode(magicClean($article->Description)), 'co' => $this->BlogCovers . $article->Cover, 'u' => $author->Username, 'pd' => $article->PostDate, 'c' => $article->Comments));
+					echo render('articles/listedarticle', ['t' => magicClean($article->Title), 'l' => "blog.php?do=read&article=" . $article->ID, 'd' => BBCode(magicClean($article->Description)), 'co' => $this->BlogCovers . $article->Cover, 'u' => $author->Username, 'pd' => $article->PostDate, 'c' => $article->Comments]);
-
 				}
-
 			} else {
-
 				echo '<span style="font-size: 26px;">Hmm. Strangely enough, we don\'t have any articles!</span>';
 			}
-
 		}
 
 /* ------------------------------------------------------------------------------------------------------- */
@@ -68,7 +59,7 @@
 
 		/* Display Articles - display a slider-like list of projects. */
 		public function Projects($type) {
-
+/*
 			$db = new DatabaseModule();
 
 			$projects = $db->getData('ms_projects', 'id', 'WHERE type="' . $type . '"', '', 'ORDER BY id DESC');
@@ -91,7 +82,7 @@
 				echo "<h3>It seems we have no " . strtolower($type)  . "s.</h3>";
 
 			}
-
+*/
 		}
 
 /* ------------------------------------------------------------------------------------------------------- */
@@ -99,6 +90,7 @@
 
 		/* Display Featured - display an assorted set of featured content in the sidebar. */
 		public function sideFeatured($what) {
+			/*
 			$db = new DatabaseModule;
 
 			// prepare SQL statements
@@ -116,6 +108,7 @@
 					// display the article
 					echo ParseTemplate($this->FeaturedArticle, array('id' => $featured->ID, 'c' => $this->BlogCovers . $featured->Cover, 't' => $featured->Title));
 			}
+					*/
 		}
 
 /* ------------------------------------------------------------------------------------------------------- */
@@ -123,6 +116,7 @@
 
 		/* Display Front Page Articles - specially formatted for the front page */
 		public function frontPageArticles() {
+			/*
 			$db = new DatabaseModule();
 
 			$getArticles = $db->Handle->prepare('SELECT id FROM ms_articles ORDER BY articleDate DESC LIMIT 5');
@@ -168,6 +162,7 @@ FIRST;
 ARTICLE;
 				}
 			}
+				*/
 		}
 
 /* ------------------------------------------------------------------------------------------------------- */
@@ -175,15 +170,15 @@ ARTICLE;
 
 		/* Display an article for reading - when a user wants to read an article, we give it to them in this format. */
 		public function articleForReading($id) {
-
+			/*
 			$article = new Article($id);
 			$author  = new User($article->Author);
 
 			echo ParseTemplate($this->Article4Reading, array('title' => $article->Title, 'date' => $article->PostDate, 'author' => $author->Username, 'cover' => $this->BlogCovers . $article->Cover, 'content' => BBCode(magicClean($article->Content))));
-
+			*/
 			/* ----------------------------------- */
 			/* -------- Article Comments --------- */
-
+			/*
 			echo "<a id=\"comments\">&nbsp;</a>";
 
 			if($article->Comments == 1) { $oneOrMore = $article->Comments . " Comment"; } else { $oneOrMore = $article->Comments . " Comments"; }
@@ -218,7 +213,7 @@ ARTICLE;
 			if(!empty($_COOKIE['UserCookie'])) { echo ParseTemplate($this->CommentForm, array('aid' => $_GET['article'])); }
 
 			echo '</section>';
-
+			*/
 		}
 
 /* ------------------------------------------------------------------------------------------------------- */

app/router.php

@@ -0,0 +1,183 @@
+<?php
+
+class Router
+{
+	/**
+	 * List of valid HTTP verbs.
+	 */
+	private const VALID_METHODS = ['GET', 'POST', 'PUT', 'DELETE', 'PATCH', 'HEAD', 'OPTIONS'];
+
+	/**
+	 * The tree of currently registered routes.
+	 */
+	private array $routes = [];
+
+	/**
+	 * Store the last inserted node so we can register middleware and attributes to it.
+	 */
+	private array $last_inserted_node;
+
+	/**
+	 * Add a route to the route tree. The route must be a URI path, and contain dynamic segments
+	 * using a colon prefix. (:id, :slug, etc)
+	 *
+	 * Example:
+	 * `$r->add($routes, 'GET', '/posts/:id', function($id) { echo "Viewing post $id"; });`
+	 */
+	public function add(string $method, string $route, callable $handler): Router
+	{
+		$this->validateMethod($method);
+		$this->validateRoute($route);
+
+		$segments = $route === '/' ? [''] : explode('/', trim($route, '/'));
+
+		$node = &$this->routes;
+		foreach ($segments as $segment) {
+			$segment = str_starts_with($segment, ':') ? ':x' : $segment;
+			if ($segment === '') continue;
+			$node = &$node[$segment];
+		}
+
+		$node[$method] = [
+			'handler' => $handler,
+			'middleware' => []
+		];
+
+		$this->last_inserted_node = &$node[$method];
+
+		return $this;
+	}
+
+	/**
+	 * Perform a lookup in the route tree for a given method and URI. Returns an array with a result code,
+	 * a handler if found, and any dynamic parameters. Codes are 200 for success, 404 for not found, and
+	 * 405 for method not allowed.
+	 *
+	 * @return array ['code', 'handler', 'params']
+	 */
+	public function lookup(string $method, string $uri): array|int
+	{
+		$node = $this->routes;
+		$params = [];
+
+		if ($uri === '/') return $node[$method] ?? 405;
+
+		foreach (explode('/', trim($uri, '/')) as $segment) {
+			if (isset($node[$segment])) {
+				$node = $node[$segment];
+				continue;
+			}
+
+			if (isset($node[':x'])) {
+				$params[] = $segment;
+				$node = $node[':x'];
+				continue;
+			}
+
+			return 404;
+		}
+
+		$node[$method]['params'] = $params;
+		return $node[$method] ?? 405;
+	}
+
+	/**
+	 * Add a middleware function to the last inserted node's stack.
+	 */
+	public function middleware(callable $middleware): Router
+	{
+		$this->last_inserted_node['middleware'][] = $middleware;
+		return $this;
+	}
+
+	/**
+	 * Shorthand to register a GET route.
+	 */
+	public function get(string $route, callable $handler): Router
+	{
+		return $this->add('GET', $route, $handler);
+	}
+
+	/**
+	 * Shorthand to register a POST route.
+	 */
+	public function post(string $route, callable $handler): Router
+	{
+		return $this->add('POST', $route, $handler);
+	}
+
+	/**
+	 * Shorthand to register a PUT route.
+	 */
+	public function put(string $route, callable $handler): Router
+	{
+		return $this->add('PUT', $route, $handler);
+	}
+
+	/**
+	 * Shorthand to register a DELETE route.
+	 */
+	public function delete(string $route, callable $handler): Router
+	{
+		return $this->add('DELETE', $route, $handler);
+	}
+
+	/**
+	 * Shorthand to register a PATCH route.
+	 */
+	public function patch(string $route, callable $handler): Router
+	{
+		return $this->add('PATCH', $route, $handler);
+	}
+
+	/**
+	 * Register multiple verbs to the same route.
+	 */
+	public function many(array $methods, string $route, callable $handler): Router
+	{
+		foreach ($methods as $method) $this->add($method, $route, $handler);
+		return $this;
+	}
+
+	/**
+	 * Register all verbs to the same route.
+	 */
+	public function any(string $route, callable $handler): Router
+	{
+		foreach (SELF::VALID_METHODS as $method) $this->add($method, $route, $handler);
+		return $this;
+	}
+
+	/**
+	 * Some pages function entirely as forms; thus we can shorthand a GET/POST route.
+	 */
+	public function form(string $route, callable $handler): Router
+	{
+		return $this->many(['GET', 'POST'], $route, $handler);
+	}
+
+	/**
+	 * Validate the given method against valid HTTP verbs.
+	 */
+	private function validateMethod(string $method): void
+    {
+        if (!in_array($method, self::VALID_METHODS)) {
+            throw new InvalidArgumentException("Invalid HTTP method: $method");
+        }
+    }
+
+	/**
+	 * Validate that a new route follows expected formatting.
+	 */
+	private function validateRoute(string $route): void
+	{
+		if ($route === '') {
+			throw new InvalidArgumentException("Route cannot be empty");
+		}
+
+		// Ensure route starts with a slash
+		if (!str_starts_with($route, '/')) {
+			throw new InvalidArgumentException("Route must start with a '/'");
+		}
+	}
+}

app/templates/blog/list.php

@@ -5,9 +5,7 @@
 		<h1>Mad Splash Blog</h1>
 		
 		<ul class="articleList">
-			<?php
+			<?= $display->Articles(30); ?>
-				$display->Articles(30);
-			?>
 		</ul>
 	</section>
 	

app/templates/blog/read.php

@@ -6,12 +6,6 @@
 		
 		
 		<?php
-			if(!empty($_GET['article'])) {
-				$id = $_GET['article'];
-			} else {
-				$id = 1;
-			}
-			
 			$display->articleForReading($id);
 		?>
 	</section>

app/templates/footer.php

@@ -1,12 +1,9 @@
-		<footer>
+<footer>
-			<div class="box">
+	<section>
-				<div style="padding-top: 8px;">
+		<img class="logo" src="/assets/images/Logos/LogoV7B.png" style="width: 160px;">
-					<section class="splash">
+		<p class="copy">
-						<img src="/assets/images/Logos/LogoV7B.png" style="width: 90%; display: block; margin: 0px auto; margin-bottom: -12px;" />
+			Copyright &copy; 2025, madsplash.net <br>
-						<a href="index.php?page=privacy">Privacy</a> | <a href="index.php?page=tandc">The T&amp;C</a> <br />
+			All trademarked stuff is the property of its respective owner(s).
-						<p style="width: 200px; margin: 0px auto;">
-							Copyright &copy; 2014, Mad Splash. <br />
-							All trademarked stuff is the property of it's respective owner(s).
 		</p>
 	</section>
 
@@ -15,6 +12,8 @@
 		<ul>
 			<li><a href="#">Our staff</a></li>
 			<li><a href="#">Jobs here</a></li>
+			<li><a href="index.php?page=privacy">Privacy</a></li>
+			<li><a href="index.php?page=tandc">The T&amp;C</a></li>
 		</ul>
 	</section>
 
@@ -25,8 +24,7 @@
 			<li><a href="index.php?page=projects&project=therpg">The RPG</a></li>
 		</ul>
 	</section>
-				</div>
+</footer>
-			</div>
+</div>
-		</footer>
+</body>
-	</body>
 </html>

app/templates/header.php

@@ -11,10 +11,11 @@
     <script src="/assets/scripts/latestTweet.js"></script>
 </head>
 
-<body id="index" class="home">
+<body>
-    <?= render('supernav') ?>
+<div class="container">
+<?= render('supernav') ?>
 
-    <header>
+<header>
     <img class="Logo" src="/assets/images/Logos/LogoV7.png" alt="Mad Splash" title="Mad Splash!" />
 
     <nav>
@@ -38,4 +39,4 @@
             </li>
         </ul>
     </nav>
-    </header>
+</header>

app/templates/supernav.php

@@ -1,16 +1,16 @@
 <section id="SuperNav">
-    <?php if(!empty($_COOKIE['MadSplashUser'])): ?>
+    <?php if (!empty($_COOKIE['MadSplashUser'])) { ?>
-        <div class="left" style="padding-left: 12px;">
+        <div>
             Heyas, <a href="#">{$user[1]}</a>! You can go to your <a href="#">User CP</a> or <a href="http://localhost:8888/Resources/Scripts/PHP/Hubs/CommunityHub.php?user={$user[0]}&action=logout">logout</a>.
         </div>
-    <?php else: ?>
+    <?php } else { ?>
-        <div class="left" style="padding-left: 12px;">
+        <div>
             Hey there, Guest. You can <a href="http://localhost:8888/community/index.php?page=login">login</a>
             or <a href="http://localhost:8888/community/index.php?page=register">register</a> here.
         </div>
-    <?php endif; ?>
+    <?php } ?>
 
-    <div class="right">
+    <div class="socials">
         <a class="YouTube" href="http://youtube.com/User/MadSplashTV" target="_blank">&nbsp;</a>
         <a class="Twitter" href="http://twitter.com/MadSplashStudio" target="_blank">&nbsp;</a>
 
@@ -20,25 +20,14 @@
             <ul>
                 <a href="http://therpg.madsplash.net/" target="_blank">
                     <li class="RPG">
-                        <img src="/assets/images/Logos/TheRPG.png" style="width: 38px; float: left; margin-right: 4px; margin-top: 4px;" />
+                        <img src="/assets/images/Logos/TheRPG.jpg" style="width: 38px;">
 
-                        <a class="RPGLink">The RPG</a> <br />
+                        <p>
+                            <a class="RPGLink">The RPG</a> <br>
                             Our up-and-coming web-and-text-based RPG. Play!
+                        </p>
                     </li>
                 </a>
-
-                <li class="footer">
-                    <div style="padding: 4px 8px;">
-                        Follow us here, too: <br />
-
-                        <div class="right">
-                            <a class="YouTube" href="http://youtube.com/User/MadSplashTV" target="_blank">&nbsp;</a>
-                            <a class="Twitter" href="http://twitter.com/MadSplashStudio" target="_blank">&nbsp;</a>
-                        </div>
-
-                        <div class="clear"> </div>
-                    </div>
-                </li>
             </ul>
         </div>
     </div>

public/assets/css/CustomFonts.css

@@ -1,56 +1,56 @@
 @font-face {
     font-family: 'Bebas';
-    src: url('/assets/fonts/BebasNeue-webfont.eot');
+    src: url('../fonts/BebasNeue-webfont.eot');
-    src: url('/assets/fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
+    src: url('../fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
-         url('/assets/fonts/BebasNeue-webfont.woff') format('woff'),
+         url('../fonts/BebasNeue-webfont.woff') format('woff'),
-         url('/assets/fonts/BebasNeue-webfont.ttf') format('truetype'),
+         url('../fonts/BebasNeue-webfont.ttf') format('truetype'),
-         url('/assets/fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
+         url('../fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
     font-weight: normal;
     font-style: normal;
 }
 
 @font-face {
 	font-family: "Minecraft";
-	src: url("/assets/fonts/Minecraft_font.eot?") format("eot"),
+	src: url("../fonts/Minecraft_font.eot?") format("eot"),
-		 url("/assets/fonts/Minecraft_font.woff") format("woff"),
+		 url("../fonts/Minecraft_font.woff") format("woff"),
-		 url("/assets/fonts/Minecraft_font.ttf") format("truetype"),
+		 url("../fonts/Minecraft_font.ttf") format("truetype"),
-		 url("/assets/fonts/Minecraft_font.svg#Minecraft") format("svg");
+		 url("../fonts/Minecraft_font.svg#Minecraft") format("svg");
 	font-weight:normal;
 	font-style:normal;
 }
 
 @font-face {
     font-family: 'Candara';
-    src: url('/assets/fonts/candara-webfont.eot');
+    src: url('../fonts/candara-webfont.eot');
-    src: url('/assets/fonts/candara-webfont.eot?#iefix') format('embedded-opentype'),
+    src: url('../fonts/candara-webfont.eot?#iefix') format('embedded-opentype'),
-         url('/assets/fonts/candara-webfont.woff') format('woff'),
+         url('../fonts/candara-webfont.woff') format('woff'),
-         url('/assets/fonts/candara-webfont.ttf') format('truetype'),
+         url('../fonts/candara-webfont.ttf') format('truetype'),
-         url('/assets/fonts/candara-webfont.svg#CandaraRegular') format('svg');
+         url('../fonts/candara-webfont.svg#CandaraRegular') format('svg');
 }
 
 @font-face {
     font-family: 'CandaraB';
-    src: url('/assets/fonts/candarab-webfont.eot');
+    src: url('../fonts/candarab-webfont.eot');
-    src: url('/assets/fonts/candarab-webfont.eot?#iefix') format('embedded-opentype'),
+    src: url('../fonts/candarab-webfont.eot?#iefix') format('embedded-opentype'),
-         url('/assets/fonts/candarab-webfont.woff') format('woff'),
+         url('../fonts/candarab-webfont.woff') format('woff'),
-         url('/assets/fonts/candarab-webfont.ttf') format('truetype'),
+         url('../fonts/candarab-webfont.ttf') format('truetype'),
-         url('/assets/fonts/candarab-webfont.svg#CandaraBold') format('svg');
+         url('../fonts/candarab-webfont.svg#CandaraBold') format('svg');
 }
 
 @font-face {
     font-family: 'Handwriting';
-    src: url('/assets/fonts/SF_Arch_Rival-webfont.eot');
+    src: url('../fonts/SF_Arch_Rival-webfont.eot');
-    src: url('/assets/fonts/SF_Arch_Rival-webfont.eot?#iefix') format('embedded-opentype'),
+    src: url('../fonts/SF_Arch_Rival-webfont.eot?#iefix') format('embedded-opentype'),
-         url('/assets/fonts/SF_Arch_Rival-webfont.woff') format('woff'),
+         url('../fonts/SF_Arch_Rival-webfont.woff') format('woff'),
-         url('/assets/fonts/SF_Arch_Rival-webfont.ttf') format('truetype'),
+         url('../fonts/SF_Arch_Rival-webfont.ttf') format('truetype'),
-         url('/assets/fonts/SF_Arch_Rival-webfont.svg#sf_arch_rivalregular') format('svg');
+         url('../fonts/SF_Arch_Rival-webfont.svg#sf_arch_rivalregular') format('svg');
 }
 
 @font-face {
     font-family: 'ZeroNero';
-    src: url('/assets/fonts/zeronero-webfont.eot');
+    src: url('../fonts/zeronero-webfont.eot');
-    src: url('/assets/fonts/zeronero-webfont.eot?#iefix') format('embedded-opentype'),
+    src: url('../fonts/zeronero-webfont.eot?#iefix') format('embedded-opentype'),
-         url('/assets/fonts/zeronero-webfont.woff') format('woff'),
+         url('../fonts/zeronero-webfont.woff') format('woff'),
-         url('/assets/fonts/zeronero-webfont.ttf') format('truetype'),
+         url('../fonts/zeronero-webfont.ttf') format('truetype'),
-         url('/assets/fonts/zeronero-webfont.svg#zeroneroblack') format('svg');
+         url('../fonts/zeronero-webfont.svg#zeroneroblack') format('svg');
 }

public/assets/css/MadSplash_v3.css

@@ -1,11 +1,19 @@
+:root {
+	--std-box-shadow: rgba(0, 0, 0, 0.1);
+}
+
 /* @group High level */
-* { margin: 0; padding: 0; border: none; }
+* { margin: 0; padding: 0; border: none; box-sizing: border-box; }
 *:focus { outline: none !important; }
 
-html { background: #cacbca url(/assets/images/Backgrounds/NewOceanWave.jpg) fixed;
+html { background: #cacbca url(/assets/images/Backgrounds/oceanwave.jpg) fixed;
 		-webkit-background-size: cover; -o-background-size: cover; background-size: cover; }
 
-body { font: 14px Arial, Helvetica, Geneva, sans-serif; margin: 0px 0px 0px 0px; color: #444; line-height: 18px; }
+body {
+	color: #333;
+	font-size: 16px;
+	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}
 
 a, a:visited { text-decoration: none; color: #4aa1ef; }
 a:hover { text-decoration: none; color: #008be8; cursor: pointer; }
@@ -16,31 +24,52 @@ img.Emote { position: relative; top: 3px; }
 /* ------------------------------------------------------------------------------------------------------- */
 /* ------------------------------------------------------------------------------------------------------- */
 
+/* @group Container */
+.container {
+	width: 100%;
+	padding: 0 calc(var(--grid-gutter) / 2);
+	margin: 0 auto;
+}
+
+@media (min-width: 576px) { .container { max-width: 540px; } }
+@media (min-width: 768px) { .container { max-width: 720px; } }
+@media (min-width: 992px) { .container { max-width: 960px; } }
+@media (min-width: 1200px) { .container { max-width: 1170px; } }
+
+.container-fluid {
+	width: 100%;
+	padding: 0 calc(var(--grid-gutter) / 2);
+	margin: 0 auto;
+}
+
+/* @end */
+
+/* ------------------------------------------------------------------------------------------------------- */
+/* ------------------------------------------------------------------------------------------------------- */
+
 /* @group Header */
 header {
-	width: 960px;
+	width: 100%;
-	z-index: 100;
 	height: 100px;
-	margin: 0px auto;
+	z-index: 1;
 	position: relative;
-	border-top: 4px solid #4aa1ef;
+	margin-top: 2rem;
+	border-radius: 4px;
 
-	background: #fffffe url('../Images/Backgrounds/Wave3.png') no-repeat right top;
+	background: #fffffe url('/assets/images/Backgrounds/Wave3.png') no-repeat center top;
+	background-size: cover;
 
-	box-shadow: 0px 2px 5px rgba(100, 100, 100, 0.5);
+	box-shadow: 0px 2px 5px var(--std-box-shadow);
 }
 
 img.Logo {
 	right: 24px;
 	float: left;
 	bottom: 10px;
-	z-index: 5000;
 	height: 130px;
 	position: relative;
 	margin-right: 24px;
 	transform: rotate(-2deg);
-	-ms-transform: rotate(-2deg); /* IE 9 */
-	-webkit-transform: rotate(-2deg); /* Safari and Chrome */
 }
 /* @end */
 
@@ -102,14 +131,14 @@ div.drop a:after { content: none !important; }
 /* @group Slider */
 section#slider {
 	width: 100%;
-	bottom: 48px;
 	height: 424px;
-	z-index: 1;
+	width: 100%;
-	min-width: 960px;
 	position: relative;
-	margin-bottom: -86px;
 	background-color: #666;
-	border-bottom: 2px solid #fffffe;
+	margin-top: 2rem;
+	border-radius: 4px;
+	overflow: hidden;
+	box-shadow: 0px 2px 5px var(--std-box-shadow);
 }
 
 section#slider div.slide {
@@ -137,14 +166,15 @@ section#slider div.slide a.slideLink:hover {
 /* ------------------------------------------------------------------------------------------------------- */
 
 section#body {
-	width: 960px;
+	width: 100%;
-	z-index: 100;
+	z-index: 1;
 	min-height: 240px;
-	margin: 0px auto;
+	margin-top: 2rem;
+	border-radius: 4px;
 	overflow: hidden;
 	position: relative;
 	background-color: #fffffe;
-	border-top: 3px solid #4aa1ef;
+	box-shadow: 0px 2px 5px var(--std-box-shadow), inset 0 1px 1px rgba(0, 0, 0, 0.05);
 }
 
 section#leftColumn { width: 600px; float: left; padding: 2px 8px 8px 8px; }
@@ -454,89 +484,98 @@ a.projectThumb:hover { cursor: pointer; }
 /* ------------------------------------------------------------------------------------------------------- */
 
 footer {
+	margin: 2rem 0;
+	border-radius: 4px;
 	width: 100%;
-	height: 200px;
+	z-index: 2;
-	overflow: hidden;
+	display: flex;
-	background-color: #666;
+	justify-content: space-around;
+	padding: 2rem;
+	color: white;
+	background-color: #1b1b1b;
+	background-image: linear-gradient(to bottom, #222222, #111111);
+	box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
 }
-footer div.box {
+
-	width: 960px;
+footer ul {
-	height: 180px;
+	list-style: none;
+}
+
+footer .logo {
+	display: block;
 	margin: 0px auto;
-	max-height: 180px;
-	background-color: #008be8;
 }
-footer div section { color: #666; display: inline-block; margin-right: 34px; margin-top: 16px; }
+
-footer a { color: #333 !important; }
+footer .copy {
-footer a:hover { color: #fffffe !important; }
+	margin-top: 1rem;
-footer h2 { color: #fffffe; font: bold 28px 'Bebas', Arial, Geneva, sans-serif; }
+	max-width: 300px;
-footer div section ul { list-style: none; }
+	text-align: center;
-footer div section.splash { width: 240px; float: left; text-align: center; color: #fffffe; font-size: 12px;
+}
-							margin-right: 8px; margin-top: 4px; }
+
-footer div section.splash a { border: none; color: #fffffe; padding-left: 0; font-size: 14px; font-weight: bold; }
+footer h2 {
-footer div section.splash a:hover { border: none; color: orange; }
+	color: white;
+	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
+}
 
 /* ------------------------------------------------------------------------------------------------------- */
 /* ------------------------------------------------------------------------------------------------------- */
 
 section#SuperNav {
-	width: 960px;
+	display: flex;
-	color: #bbb;
+	align-items: center;
-	height: 34px;
+	justify-content: space-between;
-	z-index: 4000;
+	width: 100%;
-	font-size: 12px;
+	height: 40px;
-	background: #666;
+	padding: 0 1rem;
-	margin: 0px auto;
+	color: #999;
-	line-height: 32px;
+	background-color: #1b1b1b;
-	font-weight: bold;
+	background-image: linear-gradient(to bottom, #222222, #111111);
-	position: relative;
+	box-shadow: 0px 2px 5px var(--std-box-shadow);
+	border-bottom-left-radius: 4px;
+	border-bottom-right-radius: 4px;
+}
+
+section#SuperNav .socials {
+	display: flex;
+	align-items: center;
 }
 
 div.CrossNav {
+	height: 100%;
+	display: flex;
+	align-items: center;
 	color: #bbb;
-	margin: 3px;
-	width: 41px;
-	height: 28px;
-	float: right;
-	z-index: 1000;
-	font-size: 11px;
-	line-height: 11px;
-	padding: 0px 12px;
-	padding-left: 12px;
 	position: relative;
-	border-left: 1px solid #888;
+	padding-left: 0.75rem;
+	margin-left: 1rem;
+	border-left: 1px solid rgba(255, 255, 255, 0.2);
 }
-div.CrossNav:after { content: ' »'; color: #bbb; position: relative; bottom: 10px; left: 1px; font: bold 16px sans-serif; }
-div.CrossNav:hover { cursor: pointer; }
 
 div.CrossNav ul {
 	top: 28px;
-	padding: 0;
+	padding: 1rem;
-	opacity: 0;
+	right: -1rem;
-	right: -3px;
 	z-index: 999;
-	width: 240px;
+	min-width: 160px;
 	display: none;
 	position: absolute;
-	visibility: hidden;
+	color: #999;
-	background-color: #666;
+	background-color: #1b1b1b;
+	background-image: linear-gradient(to bottom, #222222, #111111);
+	border-radius: 4px;
+	box-shadow: 0px 2px 5px rgba(100, 100, 100, 0.5);
 }
 div.CrossNav ul:hover { cursor: default; }
 div.CrossNav ul li {
-	width: 232px;
+	display: flex;
-	display: block;
+	
-	margin: 0px auto;
+	&:not(:last-child) {
-	padding: 6px 6px;
+		margin-bottom: 1rem;
-}
+	}
-div.CrossNav ul li.footer {
+
-	margin: 0;
+	p {
-	padding: 0;
+		min-width: 200px;
-	color: #fff;
+	}
-	width: 240px;
-	font-size: 12px;
-	line-height: 12px;
-	font-weight: normal;
-	background-color: #888;
 }
 div.CrossNav:hover ul {
 	display: block;
@@ -544,20 +583,19 @@ div.CrossNav:hover ul {
 	visibility: visible;
 }
 
-div.CrossNav ul li.RPG { padding-bottom: 8px; cursor: pointer; }
+div.CrossNav ul li.RPG { cursor: pointer; }
+div.CrossNav ul li.RPG img { margin-right: 1rem; }
 div.CrossNav ul li.RPG:hover { color: white; }
 div.CrossNav ul li.RPG a.RPGLink { color: #ff7e00; font-weight: bold; text-shadow: 0 1px 1px rgba(60, 60, 60, 0.3);
 									font-size: 14px; line-height: 16px; margin-bottom: 4px; }
 div.CrossNav ul li.RPG:hover a.RPGLink { color: inherit; }
 
-a.Twitter { height: 32px; width: 32px; display: inline-block;
+a.Twitter { height: 28px; width: 28px; display: inline-block;
-			background-image: url('../Images/Icons/Social/Twitter.png');  }
+			background-image: url('../images/Icons/Social/Twitter.png'); background-size: cover;  }
-a.Twitter:hover { width: 32px; height: 32px;
+a.Twitter:hover { background-image: url('../images/Icons/Social/TwitterHOV.png'); }
-				background-image: url('../Images/Icons/Social/TwitterHOV.png'); }
+a.YouTube { height: 28px; width: 28px; display: inline-block; margin-right: 0.5rem;
-a.YouTube { height: 32px; width: 32px; display: inline-block;
+			background-image: url('../images/Icons/Social/YouTube.png'); background-size: cover; }
-			background-image: url('../Images/Icons/Social/YouTube.png'); }
+a.YouTube:hover { background-image: url('../images/Icons/Social/YouTubeHOV.png');}
-a.YouTube:hover { width: 32px; height: 32px;
-				background-image: url('../Images/Icons/Social/YouTubeHOV.png');}
 
 /* ------------------------------------------------------------------------------------------------------- */
 /* ------------------------------------------------------------------------------------------------------- */

public/blog/index.php

@@ -1,13 +0,0 @@
-<?php
-
-require '../app/bootstrap.php';
-
-const PAGES = ['list', 'read'];
-
-echo render('header');
-
-$do = !empty($_GET['do']) && in_array($_GET['do'], PAGES) ? $_GET['do'] : 'list';
-
-echo render("blog/$do");
-
-echo render('footer');

public/community/index.php

@@ -1,6 +1,7 @@
 <?php
 
-require '../app/bootstrap.php';
+define('SCRIPT_PATH', '../..');
+require '../../app/bootstrap.php';
 
 const PAGES = ['login', 'verify', 'register'];
 

public/index.php

@@ -1,19 +1,44 @@
 <?php
 
-require '../app/bootstrap.php';
+require_once '../app/bootstrap.php';
+
+$r = new Router();
 
 $DM = new DisplayModule();
 
-const PAGES = ['home', 'tandc', 'privacy', 'tictactoe'];
+$r->get('/', function() {
-
+    echo render('header');
-echo render('header');
-
-$page = !empty($_GET['page']) && in_array($_GET['page'], PAGES) ? $_GET['page'] : 'home';
-
-if($page == "home") {
     echo render('slider');
-}
+    echo render('home');
+    echo render('footer');
+});
 
-echo render($page);
+$r->get('/privacy', function() {
+    echo render('header');
+    echo render('privacy');
+    echo render('footer');
+});
 
-echo render('footer');
+$r->get('/tandc', function() {
+    echo render('header');
+    echo render('tandc');
+    echo render('footer');
+});
+
+$r->get('/blog', function() {
+    echo render('header');
+    $dm = new DisplayModule();
+    echo render('blog/list', ['display' => $dm]);
+    echo render('footer');
+});
+
+$r->get('/blog/:id', function($id) {
+    echo render('header');
+    $dm = new DisplayModule();
+    echo render('blog/read', ['id' => $id, 'display' => $dm]);
+    echo render('footer');
+});
+
+$res = $r->lookup($_SERVER['REQUEST_METHOD'], $_SERVER['REQUEST_URI']);
+if (is_int($res)) exit("Error: $res");
+$res['handler']();

public/projects/index.php

@@ -1,5 +1,6 @@
 <?php
-    require '../app/bootstrap.php';
+define('SCRIPT_PATH', '../..');
+    require '../../app/bootstrap.php';
 
     echo render('header');