wip: 2025-02-18T14:37:23+0100 (1739885843)

2025-09-14 00:43:42 +02:00 · 2025-02-18 17:32:36 +01:00 · 2025-02-18 17:32:36 +01:00 · 94a3d873b6
commit 94a3d873b6
parent 0049218058
80 changed files with 244 additions and 338 deletions
--- a/elements/HTMLCodeDemoElement.php
+++ b/elements/HTMLCodeDemoElement.php
@ -57,7 +57,7 @@
 		<div class="body">
 			
 			<?php foreach ($HTMLCodeDemoElement->files as $file): ?>
-				<div data-file="<?= $HTMLCodeDemoElement::name($file) ?>">
+				<div class="tab" data-file="<?= $HTMLCodeDemoElement::name($file) ?>">
 					<?= VV::include($HTMLCodeDemoElement->file_path($file)) ?>
 				</div>
 			<?php endforeach; ?>
--- a/public/assets/css/snippets/docs/aside.css
+++ b/public/assets/css/snippets/docs/aside.css
@ -20,10 +20,10 @@ aside .spacer {

 vv-shell[vv-page="/docs"] aside a[href="/docs"] button,
 vv-shell[vv-page="/docs/PHP"] aside a[href="/docs/PHP"] button,
-vv-shell[vv-page="/docs/PHP/VV"] aside a[href="/docs/PHP/VV"] button,
-vv-shell[vv-page="/docs/PHP/VV/css"] aside a[href="/docs/PHP/VV/css"] button,
+vv-shell[vv-page="/docs/Reference/PHP/VV"] aside a[href="/docs/Reference/PHP/VV"] button,
+vv-shell[vv-page="/docs/Reference/PHP/VV/css"] aside a[href="/docs/Reference/PHP/VV/css"] button,
 vv-shell[vv-page="/docs/get-started"] aside a[href="/docs/get-started"] button,
-vv-shell[vv-page="/docs/PHP/VV/embed"] aside a[href="/docs/PHP/VV/embed"] button {
+vv-shell[vv-page="/docs/Reference/PHP/VV/embed"] aside a[href="/docs/Reference/PHP/VV/embed"] button {
 	font-weight: 900;
 	background: none;
 	pointer-events: none;
@ -32,9 +32,9 @@ vv-shell[vv-page="/docs/PHP/VV/embed"] aside a[href="/docs/PHP/VV/embed"] button

 vv-shell[vv-page="/docs"] aside a[href="/docs"] button svg,
 vv-shell[vv-page="/docs/PHP"] aside a[href="/docs/PHP"] button svg,
-vv-shell[vv-page="/docs/PHP/VV"] aside a[href="/docs/PHP/VV"] button svg,
-vv-shell[vv-page="/docs/PHP/VV/css"] aside a[href="/docs/PHP/VV/css"] button svg,
+vv-shell[vv-page="/docs/Reference/PHP/VV"] aside a[href="/docs/Reference/PHP/VV"] button svg,
+vv-shell[vv-page="/docs/Reference/PHP/VV/css"] aside a[href="/docs/Reference/PHP/VV/css"] button svg,
 vv-shell[vv-page="/docs/get-started"] aside a[href="/docs/get-started"] button svg,
-vv-shell[vv-page="/docs/PHP/VV/embed"] aside a[href="/docs/PHP/VV/embed"] button svg {
+vv-shell[vv-page="/docs/Reference/PHP/VV/embed"] aside a[href="/docs/Reference/PHP/VV/embed"] button svg {
 	display: none;
 }
--- a/public/assets/css/snippets/docs/header.css
+++ b/public/assets/css/snippets/docs/header.css
@ -22,7 +22,11 @@ section.header {
 	height: calc(var(--running-size) - var(--padding));
 	grid-template-rows: var(--running-size);
 	background-color: var(--color-accent);
-	box-shadow: 0 2px 0 0 white;
+	box-shadow: 
+		0 2px 0 0 white,
+		20svw 0 0 0 var(--color-accent),
+		-20svw 0 0 0 var(--color-accent)
+	;
 }

 /* ### Nav */
--- a/public/assets/css/snippets/docs/shell.css
+++ b/public/assets/css/snippets/docs/shell.css
--- a/public/assets/css/pages/index.css
+++ b/public/assets/css/pages/index.css
@ -1,15 +1,15 @@
-section {
-	min-height: 40svh;
-}
-
 /* # Components */

 /* ## Split */

 section.split {
 	display: grid;
-	justify-items: center;
 	grid-template-columns: repeat(2, 1fr);
+	margin: 10svh 0;
+}
+
+section.split.center {
+	justify-items: center;
 }

 section.split > div {
@ -50,17 +50,27 @@ section.split .buttons {
 /* ## Intro */

 section#intro {
-	min-height: 70svh;
+	min-height: min(50svh, 1000px);
+}
+
+section#intro .text h1 {
+	font-size: 50px;
+	line-height: 50px;
 }

 /* ### Compass */

+section#intro div.compass {
+	align-self: center;
+}
+
 section#intro div.compass svg {
 	--size: 50svh;

 	width: var(--size);
 	height: var(--size);
 	position: absolute;
+	z-index: -1;
 }

 section#intro div.compass svg.points {
@ -73,7 +83,7 @@ section#intro div.compass svg.points {
 }

 section#intro div.compass svg:nth-child(2) {
-	--size: calc(var(--size) - 30px);
+	--size: 60svh;

 	animation-duration: 15s;
 	animation-direction: alternate-reverse;
--- a/public/assets/css/shell.css
+++ b/public/assets/css/shell.css
@ -24,7 +24,7 @@
 body {
 	display: grid;
 	justify-items: center;
-	grid-template-rows: var(--running-size) 1fr;
+	grid-template-rows: var(--running-size) 1fr var(--running-size);
    overscroll-behavior: none;
 	background-color: white;
    color: black;
@ -68,6 +68,7 @@ a {
 vv-shell {
 	width: 100%;
 	display: flex;
+	max-width: 1500px;
 	position: relative;
 	flex-direction: column;
 }
@ -264,6 +265,57 @@ header button.search p {
 	display: none;
 }

+/* ## Footer */
+
+footer {
+	width: 100%;
+	display: grid;
+	color: white;
+	position: sticky;
+	overflow: hidden;
+	align-items: stretch;
+	height: var(--running-size);
+	grid-template-rows: var(--running-size);
+	background-color: var(--color-accent);
+	grid-template-columns: repeat(2, 1fr);
+}
+
+/* ### Nav */
+
+footer nav {
+	display: flex;
+	align-items: center;
+	padding: var(--padding);
+	justify-content: baseline;
+}
+
+footer nav:last-of-type {
+	justify-content: end;
+	gap: calc(var(--padding) / 2);
+}
+
+/* ### Spacer */
+
+footer nav > div {
+	width: 2px;
+	height: 80%;
+	margin: 0 var(--padding);
+	background-color: rgba(0, 0, 0, .07);
+}
+
+/* ### Buttons */
+
+footer button.inline:not(.solid):hover,
+footer button.inline {
+	fill: white;
+	color: white;
+}
+
+footer button.inline.solid {
+	color: var(--color-accent);
+	background-color: white;
+}
+
 /* # Feature queries */

@media (hover: hover) {
--- a/public/assets/css/snippets/footer.css
+++ b/public/assets/css/snippets/footer.css
@ -1,49 +0,0 @@
-footer {
-	width: 100%;
-	display: grid;
-	color: white;
-	position: sticky;
-	overflow: hidden;
-	grid-area: footer;
-	align-items: stretch;
-	height: var(--running-size);
-	grid-template-rows: var(--running-size);
-	background-color: var(--color-accent);
-	grid-template-columns: repeat(2, 1fr);
-}
-
-/* ### Nav */
-
-footer nav {
-	display: flex;
-	align-items: center;
-	padding: var(--padding);
-	justify-content: baseline;
-}
-
-footer nav:last-of-type {
-	justify-content: end;
-	gap: calc(var(--padding) / 2);
-}
-
-/* ### Spacer */
-
-footer nav > div {
-	width: 2px;
-	height: 80%;
-	margin: 0 var(--padding);
-	background-color: rgba(0, 0, 0, .07);
-}
-
-/* ### Buttons */
-
-footer button.inline:not(.solid):hover,
-footer button.inline {
-	fill: white;
-	color: white;
-}
-
-footer button.inline.solid {
-	color: var(--color-accent);
-	background-color: white;
-}
--- a/public/assets/js/shell.js
+++ b/public/assets/js/shell.js
--- a/public/docs/Reference/JavaScript/EVENTS.php
+++ b/public/docs/Reference/JavaScript/EVENTS.php
@ -4,4 +4,4 @@

 	require_once VV::root("src/Consts.php");
 ?>
-<?= VV::include(VERSION_LATEST . "JS/POSTITION"); ?>
+<?= VV::include(VERSION_LATEST . "Reference/JavaScript/EVENTS"); ?>
--- a/public/docs/Reference/JavaScript/MODE.php
+++ b/public/docs/Reference/JavaScript/MODE.php
@ -4,4 +4,4 @@

 	require_once VV::root("src/Consts.php");
 ?>
-<?= VV::include(VERSION_LATEST . "JS/MODE"); ?>
+<?= VV::include(VERSION_LATEST . "Reference/JavaScript/MODE"); ?>
--- a/public/docs/Reference/JavaScript/POSITION.php
+++ b/public/docs/Reference/JavaScript/POSITION.php
@ -0,0 +1,7 @@
+<?php
+
+	use const VVWebsite\VERSION_LATEST;
+
+	require_once VV::root("src/Consts.php");
+?>
+<?= VV::include(VERSION_LATEST . "Reference/JavaScript/POSTITION"); ?>
--- a/public/docs/Reference/JavaScript/TARGET.php
+++ b/public/docs/Reference/JavaScript/TARGET.php
@ -4,4 +4,4 @@

 	require_once VV::root("src/Consts.php");
 ?>
-<?= VV::include(VERSION_LATEST . "JS/TARGET"); ?>
+<?= VV::include(VERSION_LATEST . "Reference/JavaScript/TARGET"); ?>
--- a/public/docs/Reference/JavaScript/abort.php
+++ b/public/docs/Reference/JavaScript/abort.php
@ -4,4 +4,4 @@

 	require_once VV::root("src/Consts.php");
 ?>
-<?= VV::include(VERSION_LATEST . "JS/abort"); ?>
+<?= VV::include(VERSION_LATEST . "Reference/JavaScript/abort"); ?>
--- a/public/docs/Reference/JavaScript/bindElements.php
+++ b/public/docs/Reference/JavaScript/bindElements.php
@ -4,4 +4,4 @@

 	require_once VV::root("src/Consts.php");
 ?>
-<?= VV::include(VERSION_LATEST . "JS/bindElements"); ?>
+<?= VV::include(VERSION_LATEST . "Reference/JavaScript/bindElements"); ?>
--- a/public/docs/Reference/JavaScript/constructor.php
+++ b/public/docs/Reference/JavaScript/constructor.php
@ -4,4 +4,4 @@

 	require_once VV::root("src/Consts.php");
 ?>
-<?= VV::include(VERSION_LATEST . "JS/constructor"); ?>
+<?= VV::include(VERSION_LATEST . "Reference/JavaScript/constructor"); ?>
--- a/public/docs/Reference/JavaScript/index.php
+++ b/public/docs/Reference/JavaScript/index.php
@ -4,4 +4,4 @@

 	require_once VV::root("src/Consts.php");
 ?>
-<?= VV::include(VERSION_LATEST . "JS/EVENTS"); ?>
+<?= VV::include(VERSION_LATEST . "Reference/JavaScript/index"); ?>
--- a/public/docs/Reference/JavaScript/navigate.php
+++ b/public/docs/Reference/JavaScript/navigate.php
@ -4,4 +4,4 @@

 	require_once VV::root("src/Consts.php");
 ?>
-<?= VV::include(VERSION_LATEST . "JS/navigate"); ?>
+<?= VV::include(VERSION_LATEST . "Reference/JavaScript/navigate"); ?>
--- a/public/docs/Reference/JavaScript/options.php
+++ b/public/docs/Reference/JavaScript/options.php
@ -4,4 +4,4 @@

 	require_once VV::root("src/Consts.php");
 ?>
-<?= VV::include(VERSION_LATEST . "JS/options"); ?>
+<?= VV::include(VERSION_LATEST . "Reference/JavaScript/options"); ?>
--- a/public/docs/Reference/PHP/VV/css.php
+++ b/public/docs/Reference/PHP/VV/css.php
@ -4,4 +4,4 @@

 	require_once VV::root("src/Consts.php");
 ?>
-<?= VV::include(VERSION_LATEST . "PHP/VV/css"); ?>
+<?= VV::include(VERSION_LATEST . "Reference/PHP/VV/css"); ?>
--- a/public/docs/Reference/PHP/VV/embed.php
+++ b/public/docs/Reference/PHP/VV/embed.php
@ -4,4 +4,4 @@

 	require_once VV::root("src/Consts.php");
 ?>
-<?= VV::include(VERSION_LATEST . "PHP/VV/embed"); ?>
+<?= VV::include(VERSION_LATEST . "Reference/PHP/VV/embed"); ?>
--- a/public/docs/Reference/PHP/VV/include.php
+++ b/public/docs/Reference/PHP/VV/include.php
@ -4,4 +4,4 @@

 	require_once VV::root("src/Consts.php");
 ?>
-<?= VV::include(VERSION_LATEST . "PHP/VV/include"); ?>
+<?= VV::include(VERSION_LATEST . "Reference/PHP/VV/include"); ?>
--- a/public/docs/Reference/PHP/VV/init.php
+++ b/public/docs/Reference/PHP/VV/init.php
@ -4,4 +4,4 @@

 	require_once VV::root("src/Consts.php");
 ?>
-<?= VV::include(VERSION_LATEST . "PHP/VV/init"); ?>
+<?= VV::include(VERSION_LATEST . "Reference/PHP/VV/init"); ?>
--- a/public/docs/Reference/PHP/VV/js.php
+++ b/public/docs/Reference/PHP/VV/js.php
@ -4,4 +4,4 @@

 	require_once VV::root("src/Consts.php");
 ?>
-<?= VV::include(VERSION_LATEST . "PHP/VV/js"); ?>
+<?= VV::include(VERSION_LATEST . "Reference/PHP/VV/js"); ?>
--- a/public/docs/Reference/PHP/index.php
+++ b/public/docs/Reference/PHP/index.php
@ -4,4 +4,4 @@

 	require_once VV::root("src/Consts.php");
 ?>
-<?= VV::include(VERSION_LATEST . "PHP/index"); ?>
+<?= VV::include(VERSION_LATEST . "Reference/PHP/index"); ?>
--- a/public/docs/Reference/index.php
+++ b/public/docs/Reference/index.php
@ -4,4 +4,4 @@

 	require_once VV::root("src/Consts.php");
 ?>
-<?= VV::include(VERSION_LATEST . "JS/index"); ?>
+<?= VV::include(VERSION_LATEST . "Reference/index"); ?>
--- a/snippets/docs/v3.1.3/header.php
+++ b/snippets/docs/v3.1.3/header.php
@ -5,7 +5,7 @@
 	require_once VV::root("src/Consts.php");

 ?>
-<style><?= VV::css("public/assets/css/snippets/docs/header") ?></style>
+<style><?= VV::css("public/assets/css/pages/docs/header") ?></style>
 <section class="header">
 	<nav>
 		<a href="/docs"><button class="inline sly">
@ -16,11 +16,11 @@
 			<p>installation</p>
 			<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
 		</button></a>
-		<a href="/docs/PHP"><button class="inline sly">
+		<a href="/docs/Reference/PHP"><button class="inline sly">
 			<p>PHP</p>
 			<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
 		</button></a>
-		<a href="/docs/JS"><button class="inline sly">
+		<a href="/docs/Reference/JavaScript"><button class="inline sly">
 			<p>JavaScript</p>
 			<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
 		</button></a>
--- a/public/docs/v3.1.3/PHP/VV/index.php
+++ b/public/docs/v3.1.3/PHP/VV/index.php
@ -1,7 +0,0 @@
-<?= VV::include("snippets/docs/v3.1.3/shell") ?>
-<main>
-	<?= VV::include("snippets/docs/version-select"); ?>
-	<section>
-		<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.3/PHP/VV/description") ?>
-	</section>
-</main>
--- a/public/docs/v3.1.4/API/JS/Navigation/EVENTS.php
+++ b/public/docs/v3.1.4/API/JS/Navigation/EVENTS.php
--- a/public/docs/v3.1.4/API/JS/Navigation/MODE.php
+++ b/public/docs/v3.1.4/API/JS/Navigation/MODE.php
--- a/public/docs/v3.1.4/API/JS/Navigation/POSITION.php
+++ b/public/docs/v3.1.4/API/JS/Navigation/POSITION.php
--- a/public/docs/v3.1.4/API/JS/Navigation/TARGET.php
+++ b/public/docs/v3.1.4/API/JS/Navigation/TARGET.php
--- a/public/docs/v3.1.4/API/JS/Navigation/abort.php
+++ b/public/docs/v3.1.4/API/JS/Navigation/abort.php
--- a/public/docs/v3.1.4/API/JS/Navigation/bindElements.php
+++ b/public/docs/v3.1.4/API/JS/Navigation/bindElements.php
--- a/public/docs/v3.1.4/API/JS/Navigation/constructor.php
+++ b/public/docs/v3.1.4/API/JS/Navigation/constructor.php
--- a/public/docs/v3.1.4/API/JS/Navigation/index.php
+++ b/public/docs/v3.1.4/API/JS/Navigation/index.php
--- a/public/docs/v3.1.4/API/JS/Navigation/navigate.php
+++ b/public/docs/v3.1.4/API/JS/Navigation/navigate.php
--- a/public/docs/v3.1.4/API/JS/Navigation/options.php
+++ b/public/docs/v3.1.4/API/JS/Navigation/options.php
--- a/public/docs/v3.1.4/API/JS/index.php
+++ b/public/docs/v3.1.4/API/JS/index.php
--- a/public/docs/v3.1.4/API/PHP/VV/css.php
+++ b/public/docs/v3.1.4/API/PHP/VV/css.php
--- a/public/docs/v3.1.4/API/PHP/VV/embed.php
+++ b/public/docs/v3.1.4/API/PHP/VV/embed.php
--- a/public/docs/v3.1.4/API/PHP/VV/include.php
+++ b/public/docs/v3.1.4/API/PHP/VV/include.php
--- a/public/docs/v3.1.4/API/PHP/VV/index.php
+++ b/public/docs/v3.1.4/API/PHP/VV/index.php
--- a/public/docs/v3.1.4/API/PHP/VV/js.php
+++ b/public/docs/v3.1.4/API/PHP/VV/js.php
--- a/public/docs/v3.1.4/API/PHP/VV/root.php
+++ b/public/docs/v3.1.4/API/PHP/VV/root.php
--- a/public/docs/v3.1.4/API/PHP/VV/shell.php
+++ b/public/docs/v3.1.4/API/PHP/VV/shell.php
--- a/public/docs/v3.1.4/API/PHP/index.php
+++ b/public/docs/v3.1.4/API/PHP/index.php
--- a/public/docs/v3.1.4/API/index.php
+++ b/public/docs/v3.1.4/API/index.php
--- a/public/docs/v3.1.4/Reference/JavaScript/EVENTS.php
+++ b/public/docs/v3.1.4/Reference/JavaScript/EVENTS.php
@ -1,13 +1,12 @@
-<?= VV::include("snippets/docs/v3.1.3/shell") ?>
+<?= VV::include("public/docs/v3.1.4/Reference/layout") ?>
 <main>
-	<?= VV::include("snippets/docs/version-select"); ?>
 	<section>
 		<h1>VV::embed()</h1>
 		<p>Inline the contents of any file.</p>
 		<p>This can be very useful for bundling SVGs, plaintext files, HTML, and more for faster page loading.</p>
 	</section>
 	<section>
-		<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.3/PHP/VV/embed/description") ?>
+		<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/embed/description") ?>
 	</section>
 	<section>
 		<h1>Parameters</h1>
@ -48,6 +47,6 @@
 		<p>In this example we will be inlining an SVG icon from <code>/public/assets/icon.svg</code> directly into our page as if it were hardcoded.</p>
 	</section>
 	<section>
-		<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.3/PHP/VV/embed/example_import") ?>
+		<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/embed/example_import") ?>
 	</section>
 </main>
--- a/public/docs/v3.1.4/Reference/JavaScript/MODE.php
+++ b/public/docs/v3.1.4/Reference/JavaScript/MODE.php
@ -1,13 +1,12 @@
-<?= VV::include("snippets/docs/v3.1.3/shell") ?>
+<?= VV::include("public/docs/v3.1.4/Reference/layout") ?>
 <main>
-	<?= VV::include("snippets/docs/version-select"); ?>
 	<section>
 		<h1>VV::embed()</h1>
 		<p>Inline the contents of any file.</p>
 		<p>This can be very useful for bundling SVGs, plaintext files, HTML, and more for faster page loading.</p>
 	</section>
 	<section>
-		<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.3/PHP/VV/embed/description") ?>
+		<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/embed/description") ?>
 	</section>
 	<section>
 		<h1>Parameters</h1>
@ -48,6 +47,6 @@
 		<p>In this example we will be inlining an SVG icon from <code>/public/assets/icon.svg</code> directly into our page as if it were hardcoded.</p>
 	</section>
 	<section>
-		<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.3/PHP/VV/embed/example_import") ?>
+		<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/embed/example_import") ?>
 	</section>
 </main>
--- a/public/docs/v3.1.4/Reference/JavaScript/POSITION.php
+++ b/public/docs/v3.1.4/Reference/JavaScript/POSITION.php
@ -1,13 +1,12 @@
-<?= VV::include("snippets/docs/v3.1.3/shell") ?>
+<?= VV::include("public/docs/v3.1.4/Reference/layout") ?>
 <main>
-	<?= VV::include("snippets/docs/version-select"); ?>
 	<section>
 		<h1>VV::embed()</h1>
 		<p>Inline the contents of any file.</p>
 		<p>This can be very useful for bundling SVGs, plaintext files, HTML, and more for faster page loading.</p>
 	</section>
 	<section>
-		<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.3/PHP/VV/embed/description") ?>
+		<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/embed/description") ?>
 	</section>
 	<section>
 		<h1>Parameters</h1>
@ -48,6 +47,6 @@
 		<p>In this example we will be inlining an SVG icon from <code>/public/assets/icon.svg</code> directly into our page as if it were hardcoded.</p>
 	</section>
 	<section>
-		<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.3/PHP/VV/embed/example_import") ?>
+		<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/embed/example_import") ?>
 	</section>
 </main>
--- a/public/docs/v3.1.4/Reference/JavaScript/TARGET.php
+++ b/public/docs/v3.1.4/Reference/JavaScript/TARGET.php
@ -1,13 +1,12 @@
-<?= VV::include("snippets/docs/v3.1.3/shell") ?>
+<?= VV::include("public/docs/v3.1.4/Reference/layout") ?>
 <main>
-	<?= VV::include("snippets/docs/version-select"); ?>
 	<section>
 		<h1>VV::embed()</h1>
 		<p>Inline the contents of any file.</p>
 		<p>This can be very useful for bundling SVGs, plaintext files, HTML, and more for faster page loading.</p>
 	</section>
 	<section>
-		<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.3/PHP/VV/embed/description") ?>
+		<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/embed/description") ?>
 	</section>
 	<section>
 		<h1>Parameters</h1>
@ -48,6 +47,6 @@
 		<p>In this example we will be inlining an SVG icon from <code>/public/assets/icon.svg</code> directly into our page as if it were hardcoded.</p>
 	</section>
 	<section>
-		<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.3/PHP/VV/embed/example_import") ?>
+		<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/embed/example_import") ?>
 	</section>
 </main>
--- a/public/docs/v3.1.4/Reference/JavaScript/abort.php
+++ b/public/docs/v3.1.4/Reference/JavaScript/abort.php
@ -1,13 +1,12 @@
-<?= VV::include("snippets/docs/v3.1.3/shell") ?>
+<?= VV::include("public/docs/v3.1.4/Reference/layout") ?>
 <main>
-	<?= VV::include("snippets/docs/version-select"); ?>
 	<section>
 		<h1>.abort</h1>
 		<p>Abort a Vegvisir navigation in action.</p>
 		<p>This is an instance property of <code>vegvisir.Navigation</code>.</p>
 	</section>
 	<section>
-		<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.3/JS/abort/description") ?>
+		<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.4/JS/abort/description") ?>
 	</section>
 	<section>
 		<h1>Return value</h1>
@ -25,6 +24,6 @@
 		<p>In this example we will perform a simple programmatic Vegvsir navigation and abort it immediately.</p>
 	</section>
 	<section>
-		<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.3/JS/abort/example_abort") ?>
+		<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.4/JS/abort/example_abort") ?>
 	</section>
 </main>
--- a/public/docs/v3.1.4/Reference/JavaScript/bindElements.php
+++ b/public/docs/v3.1.4/Reference/JavaScript/bindElements.php
@ -1,13 +1,12 @@
-<?= VV::include("snippets/docs/v3.1.3/shell") ?>
+<?= VV::include("public/docs/v3.1.4/Reference/layout") ?>
 <main>
-	<?= VV::include("snippets/docs/version-select"); ?>
 	<section>
 		<h1>VV::embed()</h1>
 		<p>Inline the contents of any file.</p>
 		<p>This can be very useful for bundling SVGs, plaintext files, HTML, and more for faster page loading.</p>
 	</section>
 	<section>
-		<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.3/PHP/VV/embed/description") ?>
+		<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/embed/description") ?>
 	</section>
 	<section>
 		<h1>Parameters</h1>
@ -48,6 +47,6 @@
 		<p>In this example we will be inlining an SVG icon from <code>/public/assets/icon.svg</code> directly into our page as if it were hardcoded.</p>
 	</section>
 	<section>
-		<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.3/PHP/VV/embed/example_import") ?>
+		<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/embed/example_import") ?>
 	</section>
 </main>
--- a/public/docs/v3.1.4/Reference/JavaScript/constructor.php
+++ b/public/docs/v3.1.4/Reference/JavaScript/constructor.php
@ -1,13 +1,12 @@
-<?= VV::include("snippets/docs/v3.1.3/shell") ?>
+<?= VV::include("public/docs/v3.1.4/Reference/layout") ?>
 <main>
-	<?= VV::include("snippets/docs/version-select"); ?>
 	<section>
 		<h1>VV::embed()</h1>
 		<p>Inline the contents of any file.</p>
 		<p>This can be very useful for bundling SVGs, plaintext files, HTML, and more for faster page loading.</p>
 	</section>
 	<section>
-		<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.3/PHP/VV/embed/description") ?>
+		<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/embed/description") ?>
 	</section>
 	<section>
 		<h1>Parameters</h1>
@ -48,6 +47,6 @@
 		<p>In this example we will be inlining an SVG icon from <code>/public/assets/icon.svg</code> directly into our page as if it were hardcoded.</p>
 	</section>
 	<section>
-		<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.3/PHP/VV/embed/example_import") ?>
+		<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/embed/example_import") ?>
 	</section>
 </main>
--- a/public/docs/v3.1.4/Reference/JavaScript/index.php
+++ b/public/docs/v3.1.4/Reference/JavaScript/index.php
@ -1,4 +1,4 @@
-<?= VV::include("snippets/docs/v3.1.3/shell") ?>
+<?= VV::include("public/docs/v3.1.4/Reference/layout") ?>
 <main>
 	<section class="md">
 		<container>
--- a/public/docs/v3.1.4/Reference/JavaScript/navigate.php
+++ b/public/docs/v3.1.4/Reference/JavaScript/navigate.php
@ -1,13 +1,12 @@
-<?= VV::include("snippets/docs/v3.1.3/shell") ?>
+<?= VV::include("public/docs/v3.1.4/Reference/layout") ?>
 <main>
-	<?= VV::include("snippets/docs/version-select"); ?>
 	<section>
 		<h1>VV::embed()</h1>
 		<p>Inline the contents of any file.</p>
 		<p>This can be very useful for bundling SVGs, plaintext files, HTML, and more for faster page loading.</p>
 	</section>
 	<section>
-		<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.3/PHP/VV/embed/description") ?>
+		<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/embed/description") ?>
 	</section>
 	<section>
 		<h1>Parameters</h1>
@ -48,6 +47,6 @@
 		<p>In this example we will be inlining an SVG icon from <code>/public/assets/icon.svg</code> directly into our page as if it were hardcoded.</p>
 	</section>
 	<section>
-		<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.3/PHP/VV/embed/example_import") ?>
+		<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/embed/example_import") ?>
 	</section>
 </main>
--- a/public/docs/v3.1.4/Reference/JavaScript/options.php
+++ b/public/docs/v3.1.4/Reference/JavaScript/options.php
@ -1,13 +1,12 @@
-<?= VV::include("snippets/docs/v3.1.3/shell") ?>
+<?= VV::include("public/docs/v3.1.4/Reference/layout") ?>
 <main>
-	<?= VV::include("snippets/docs/version-select"); ?>
 	<section>
 		<h1>VV::embed()</h1>
 		<p>Inline the contents of any file.</p>
 		<p>This can be very useful for bundling SVGs, plaintext files, HTML, and more for faster page loading.</p>
 	</section>
 	<section>
-		<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.3/PHP/VV/embed/description") ?>
+		<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/embed/description") ?>
 	</section>
 	<section>
 		<h1>Parameters</h1>
@ -48,6 +47,6 @@
 		<p>In this example we will be inlining an SVG icon from <code>/public/assets/icon.svg</code> directly into our page as if it were hardcoded.</p>
 	</section>
 	<section>
-		<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.3/PHP/VV/embed/example_import") ?>
+		<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/embed/example_import") ?>
 	</section>
 </main>
--- a/public/docs/v3.1.4/Reference/PHP/VV/css.php
+++ b/public/docs/v3.1.4/Reference/PHP/VV/css.php
@ -1,12 +1,11 @@
-<?= VV::include("snippets/docs/v3.1.3/shell") ?>
+<?= VV::include("public/docs/v3.1.4/Reference/layout") ?>
 <main>
-	<?= VV::include("snippets/docs/version-select"); ?>
 	<section>
 		<h1>VV::css()</h1>
 		<p>Include a CSS file into a page which will be automatically minified and inlined.</p>
 	</section>
 	<section>
-		<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.3/PHP/VV/css/description") ?>
+		<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/css/description") ?>
 	</section>
 	<section>
 		<h1>Parameters</h1>
@ -48,6 +47,6 @@
 		<p>In this example we're importing a stylesheet from <code>/public/assets/css/style.css</code> relative from <a href=""><code>root_path</code></a>.</p>
 	</section>
 	<section>
-		<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.3/PHP/VV/css/example_import") ?>
+		<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/css/example_import") ?>
 	</section>
 </main>
--- a/public/docs/v3.1.4/Reference/PHP/VV/embed.php
+++ b/public/docs/v3.1.4/Reference/PHP/VV/embed.php
@ -1,13 +1,12 @@
-<?= VV::include("snippets/docs/v3.1.3/shell") ?>
+<?= VV::include("public/docs/v3.1.4/Reference/layout") ?>
 <main>
-	<?= VV::include("snippets/docs/version-select"); ?>
 	<section>
 		<h1>VV::embed()</h1>
 		<p>Inline the contents of any file.</p>
 		<p>This can be very useful for bundling SVGs, plaintext files, HTML, and more for faster page loading.</p>
 	</section>
 	<section>
-		<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.3/PHP/VV/embed/description") ?>
+		<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/embed/description") ?>
 	</section>
 	<section>
 		<h1>Parameters</h1>
@ -48,6 +47,6 @@
 		<p>In this example we will be inlining an SVG icon from <code>/public/assets/icon.svg</code> directly into our page as if it were hardcoded.</p>
 	</section>
 	<section>
-		<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.3/PHP/VV/embed/example_import") ?>
+		<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/embed/example_import") ?>
 	</section>
 </main>
--- a/public/docs/v3.1.4/Reference/PHP/VV/include.php
+++ b/public/docs/v3.1.4/Reference/PHP/VV/include.php
@ -1,12 +1,11 @@
-<?= VV::include("snippets/docs/v3.1.3/shell") ?>
+<?= VV::include("public/docs/v3.1.4/Reference/layout") ?>
 <main>
-	<?= VV::include("snippets/docs/version-select"); ?>
 	<section>
 		<h1>VV::include()</h1>
 		<p>Inject the compiled output of another Vegvisir page (or other PHP script).</p>
 	</section>
 	<section>
-		<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.3/PHP/VV/include/description") ?>
+		<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/include/description") ?>
 	</section>
 	<section>
 		<h1>Parameters</h1>
@ -47,6 +46,6 @@
 		<p>In this example we will be including a PHP file that contains reusable code (a banner) from <code>/snippets/banner.php</code> into a Vegvisir page <code>/public/index.php</code>.</p>
 	</section>
 	<section>
-		<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.3/PHP/VV/include/example_import") ?>
+		<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/include/example_import") ?>
 	</section>
 </main>
--- a/public/docs/v3.1.4/Reference/PHP/VV/index.php
+++ b/public/docs/v3.1.4/Reference/PHP/VV/index.php
@ -0,0 +1,6 @@
+<?= VV::include("public/docs/v3.1.4/Reference/layout") ?>
+<main>
+	<section>
+		<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/description") ?>
+	</section>
+</main>
--- a/public/docs/v3.1.4/Reference/PHP/VV/init.php
+++ b/public/docs/v3.1.4/Reference/PHP/VV/init.php
@ -1,13 +1,12 @@
-<?= VV::include("snippets/docs/v3.1.3/shell") ?>
+<?= VV::include("public/docs/v3.1.4/Reference/layout") ?>
 <main>
-	<?= VV::include("snippets/docs/version-select"); ?>
 	<section>
 		<h1>VV::init()</h1>
 		<p>Initialize the Vegvisir front-end.</p>
 		<p>Place this as close to the bottom of your <code>body</code> tag in your <code>shell_page</code> as possible.</p>
 	</section>
 	<section>
-		<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.3/PHP/VV/init/description") ?>
+		<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/init/description") ?>
 	</section>
 	<section>
 		<h1>Parameters</h1>
@ -31,6 +30,6 @@
 		<p>In this example we will initialize a single-page website with the two required files to run a bare-bones Vegvisir website: <code>/public/index.php</code> and <code>/public/shell.php</code>.</p>
 	</section>
 	<section>
-		<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.3/PHP/VV/init/example_init") ?>
+		<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/init/example_init") ?>
 	</section>
 </main>
--- a/public/docs/v3.1.4/Reference/PHP/VV/js.php
+++ b/public/docs/v3.1.4/Reference/PHP/VV/js.php
@ -1,12 +1,11 @@
-<?= VV::include("snippets/docs/v3.1.3/shell") ?>
+<?= VV::include("public/docs/v3.1.4/Reference/layout") ?>
 <main>
-	<?= VV::include("snippets/docs/version-select"); ?>
 	<section>
 		<h1>VV::js()</h1>
 		<p>Include a JavaScript source file into a page which will be automatically minified and inlined.</p>
 	</section>
 	<section>
-		<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.3/PHP/VV/js/description") ?>
+		<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/js/description") ?>
 	</section>
 	<section>
 		<h1>Parameters</h1>
@ -48,6 +47,6 @@
 		<p>In this example we're importing a JavaScript source file from <code>/public/assets/js/script.js</code> relative from <a href=""><code>root_path</code></a>.</p>
 	</section>
 	<section>
-		<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.3/PHP/VV/js/example_import") ?>
+		<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/js/example_import") ?>
 	</section>
 </main>
--- a/public/docs/v3.1.4/Reference/PHP/index.php
+++ b/public/docs/v3.1.4/Reference/PHP/index.php
@ -1,4 +1,4 @@
-<?= VV::include("snippets/docs/v3.1.3/shell") ?>
+<?= VV::include("public/docs/v3.1.4/Reference/layout") ?>
 <main>
 	<section class="md">
 		<container>
--- a/public/docs/v3.1.4/Reference/aside.php
+++ b/public/docs/v3.1.4/Reference/aside.php
@ -5,19 +5,8 @@
 	require_once VV::root("src/Consts.php");

 ?>
-<style><?= VV::css("public/assets/css/snippets/docs/aside") ?></style>
+<style><?= VV::css("public/assets/css/pages/docs/aside") ?></style>
 <aside>
-	<nav>
-		<a href="/docs"><button class="inline">
-			<p>introduction</p>
-			<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
-		</button></a>
-		<a href="/docs/get-started"><button class="inline solid">
-			<p>get started guide</p>
-			<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
-		</button></a>
-	</nav>
-	<div class="spacer"></div>
 	<nav>
 		<a href="/docs/PHP"><button class="inline">
 			<p>environment variables</p>
@ -26,70 +15,70 @@
 	</nav>
 	<div class="spacer"></div>
 	<nav>
-		<a href="/docs/PHP"><button class="inline">
+		<a href="/docs/Reference/PHP"><button class="inline">
 			<p>PHP</p>
 			<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
 		</button></a>
-		<a href="/docs/PHP/VV/css"><button class="inline sly">
+		<a href="/docs/Reference/PHP/VV/css"><button class="inline sly">
 			<p>VV::css()</p>
 			<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
 		</button></a>
-		<a href="/docs/PHP/VV/embed"><button class="inline sly">
+		<a href="/docs/Reference/PHP/VV/embed"><button class="inline sly">
 			<p>VV::embed()</p>
 			<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
 		</button></a>
-		<a href="/docs/PHP/VV/include"><button class="inline sly">
+		<a href="/docs/Reference/PHP/VV/include"><button class="inline sly">
 			<p>VV::include()</p>
 			<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
 		</button></a>
-		<a href="/docs/PHP/VV/init"><button class="inline sly">
+		<a href="/docs/Reference/PHP/VV/init"><button class="inline sly">
 			<p>VV::init()</p>
 			<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
 		</button></a>
-		<a href="/docs/PHP/VV/JS"><button class="inline sly">
+		<a href="/docs/Reference/PHP/VV/JS"><button class="inline sly">
 			<p>VV::js()</p>
 			<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
 		</button></a>
 	</nav>
 	<div class="spacer"></div>
 	<nav>
-		<a href="/docs/JS"><button class="inline">
+		<a href="/docs/Reference/JavaScript"><button class="inline">
 			<p>JavaScript</p>
 			<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
 		</button></a>
-		<a href="/docs/JS/constructor"><button class="inline sly">
+		<a href="/docs/Reference/JavaScript/constructor"><button class="inline sly">
 			<p>Navigation.constructor</p>
 			<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
 		</button></a>
-		<a href="/docs/JS/abort"><button class="inline sly">
+		<a href="/docs/Reference/JavaScript/abort"><button class="inline sly">
 			<p>.abort</p>
 			<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
 		</button></a>
-		<a href="/docs/JS/options"><button class="inline sly">
+		<a href="/docs/Reference/JavaScript/options"><button class="inline sly">
 			<p>.options</p>
 			<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
 		</button></a>
-		<a href="/docs/JS/navigate"><button class="inline sly">
+		<a href="/docs/Reference/JavaScript/navigate"><button class="inline sly">
 			<p>.navigate()</p>
 			<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
 		</button></a>
-		<a href="/docs/JS/MODE"><button class="inline sly">
+		<a href="/docs/Reference/JavaScript/MODE"><button class="inline sly">
 			<p>Navigation.MODE</p>
 			<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
 		</button></a>
-		<a href="/docs/JS/TARGET"><button class="inline sly">
+		<a href="/docs/Reference/JavaScript/TARGET"><button class="inline sly">
 			<p>Navigation.TARGET</p>
 			<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
 		</button></a>
-		<a href="/docs/JS/EVENTS"><button class="inline sly">
+		<a href="/docs/Reference/JavaScript/EVENTS"><button class="inline sly">
 			<p>Navigation.EVENTS</p>
 			<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
 		</button></a>
-		<a href="/docs/JS/POSITION"><button class="inline sly">
+		<a href="/docs/Reference/JavaScript/POSITION"><button class="inline sly">
 			<p>Navigation.POSITION</p>
 			<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
 		</button></a>
-		<a href="/docs/JS/bindElements"><button class="inline sly">
+		<a href="/docs/Reference/JavaScript/bindElements"><button class="inline sly">
 			<p>Navigation.bindElements()</p>
 			<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
 		</button></a>
--- a/public/docs/v3.1.4/Reference/index.php
+++ b/public/docs/v3.1.4/Reference/index.php
@ -0,0 +1 @@
+<?= VV::include("public/docs/v3.1.4/Reference/layout") ?>
--- a/public/docs/v3.1.4/Reference/layout.php
+++ b/public/docs/v3.1.4/Reference/layout.php
@ -0,0 +1,3 @@
+<style><?= VV::css("public/assets/css/pages/docs/shell") ?></style>
+<?= VV::include("public/docs/header") ?>
+<?= VV::include("public/docs/v3.1.4/Reference/aside") ?>
--- a/public/docs/v3.1.4/aside.php
+++ b/public/docs/v3.1.4/aside.php
@ -0,0 +1,27 @@
+<?php
+
+	use const VVWebsite\DEFAULT_BUTTON_ICON;
+
+	require_once VV::root("src/Consts.php");
+
+?>
+<style><?= VV::css("public/assets/css/pages/docs/aside") ?></style>
+<aside>
+	<nav>
+		<a href="/docs"><button class="inline">
+			<p>introduction</p>
+			<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
+		</button></a>
+		<a href="/docs/get-started"><button class="inline solid">
+			<p>get started guide</p>
+			<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
+		</button></a>
+	</nav>
+	<div class="spacer"></div>
+	<nav>
+		<a href="/docs/Reference"><button class="inline">
+			<p>References</p>
+			<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
+		</button></a>
+	</nav>
+</aside>
--- a/public/docs/v3.1.4/get-started.php
+++ b/public/docs/v3.1.4/get-started.php
@ -1,6 +1,5 @@
-<?= VV::include("snippets/docs/v3.1.3/shell") ?>
+<?= VV::include("public/docs/v3.1.4/layout") ?>
 <main>
-	<?= VV::include("snippets/docs/version-select"); ?>
 	<section class="md">
 		<container>
 			<h1>Introduction</h1>
--- a/public/docs/v3.1.4/index.php
+++ b/public/docs/v3.1.4/index.php
@ -1,6 +1,5 @@
-<?= VV::include("snippets/docs/v3.1.3/shell") ?>
+<?= VV::include("public/docs/v3.1.4/layout") ?>
 <main>
-	<?= VV::include("snippets/docs/version-select"); ?>
 	<section class="md">
 		<container>
 			<h1>Introduction</h1>
--- a/public/docs/v3.1.4/installation.php
+++ b/public/docs/v3.1.4/installation.php
--- a/public/docs/v3.1.4/layout.php
+++ b/public/docs/v3.1.4/layout.php
@ -0,0 +1,3 @@
+<style><?= VV::css("public/assets/css/pages/docs/shell") ?></style>
+<?= VV::include("public/docs/header") ?>
+<?= VV::include("public/docs/v3.1.4/aside") ?>
--- a/public/index.php
+++ b/public/index.php
@ -7,12 +7,10 @@
 ?>
 <style><?= VV::css("public/assets/css/pages/index.css") ?></style>
 <section id="intro" class="split">
-	<div>
-		<h1>Vegvisir</h1>
-		<h2>is a PHP and JavaScript web framework with</h2>
-		<h1>native soft-navigation and asset injection</h1>
-		<h2>that also gives you</h2>
-		<h1>automatic soft-navigation from an MPA-like file structure</h1>
+	<div class="text">
+		<h1>PHP Web framework</h1>
+		<h3>with automatic soft-navigation <a href="">and&nbsp;more!</a></h3>
+		<p>developed as a hobby project by <a href="https://vlw.se">Victor Westerlund</a></p>
 	</div>
 	<div class="compass">
 		<?= VV::embed(MEDIA_DIR . "compass-points.svg") ?>
@ -58,10 +56,10 @@
 		<?= VV::include("elements/HTMLCodeDemoElement?id=index_softnav") ?>
 	</div>
 </section>
-<section id="freedom" class="split">
+<section id="freedom" class="split center">
 	<div class="text">
 		<h1>Respects your freedom</h1>
-		<p>No tracking, no spying, fully available source that respects your freedom with GNU GPLv3.</p>
+		<p>No tracking, no telemetry, no spying, and a fully available source code licensed under GNU GPLv3. Vegvisir will always be free, libre software.</p>
 		<div class="buttons">
 			<a href="https://codeberg.org/vegvisir/vegvisir"><button class="inline">
 				<p>source code</p>
@ -73,5 +71,4 @@
 		<?= VV::embed(MEDIA_DIR . "gnu.svg") ?>
 	</div>
 </section>
-<?= VV::include("snippets/footer") ?>
 <script><?= VV::js("public/assets/js/pages/index.js") ?></script>
--- a/public/shell.php
+++ b/public/shell.php
@ -79,11 +79,11 @@
 			<a href="matrix:@vegvisir:vlw.se"><button class="inline">
 				<?= VV::embed(ICONS_DIR . "matrix.svg") ?>
 			</button></a>
-			<a href="https://codeberg.org/vegvisir/vegvisir"><button class="inline">
+			<a href="https://codeberg.org/vegvisir"><button class="inline">
 				<?= VV::embed(ICONS_DIR . "codeberg.svg") ?>
 			</button></a>
 			<a href="/docs/installation"><button class="inline solid">
-				<p>get vegvisir</p>
+				<p>get started</p>
 				<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
 			</button></a>
 		</nav>
@ -91,6 +91,30 @@

 	<vv-shell></vv-shell>

+	<footer>
+		<nav>
+			<p>Copyleft <?= date("Y") ?> - All rights reversed</p>
+		</nav>
+		<nav>
+			<a href="/"><button class="inline sly">
+				<p>vlw</p>
+				<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
+			</button></a>
+			<a href="/"><button class="inline sly">
+				<p>license</p>
+				<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
+			</button></a>
+			<a href="/"><button class="inline sly">
+				<p>website</p>
+				<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
+			</button></a>
+			<a href="/"><button class="inline solid sly">
+				<p>contribute ❤️</p>
+				<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
+			</button></a>
+		</nav>
+	</footer>
+
 	<?= VV::init() ?>
 	<script type="module"><?= VV::js("public/assets/js/shell") ?></script>
 </body>
--- a/shells/docs.php
+++ b/shells/docs.php
@ -1,24 +0,0 @@
-<style><?= VV::css("public/assets/css/shells/docs.css") ?></style>
-<section class="menu">
-	<container>
-		<?= VV::embed("public/assets/media/icons/menu.svg") ?>
-		<p>documentation menu</p>
-	</container>
-</section>
-<aside>
-	<ul>
-		<li><a href="/docs"><button><p>Introduction</p></button></a></li>
-		<li><a href="/docs/installation"><button><p>Installation</p></button></a></li>
-	</ul>
-	<hr>
-	
-	<a href="/docs/API/PHP" class="cc php"><button><p>PHP Cheat Sheet</p></button></a>
-	<?= VV::include("modules/docs/legend-php") ?>
-	<hr>
-	<a href="/docs/API/JS" class="cc js"><button><p>JavaScript Cheat Sheet</p></button></a>
-	<?= VV::include("modules/docs/legend-js") ?>
-
-</aside>
-<vv-shell></vv-shell>
-<?= VV::include("modules/docs/contribute") ?>
-<script type="module"><?= VV::js("public/assets/js/shells/docs.js") ?></script>
--- a/shells/document.php
+++ b/shells/document.php
@ -1,83 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
-	<script>
-		<!--//--><![CDATA[//><!--
-		/**
-		 * @licstart The following is the entire license notice for the JavaScript
-		 * code in this page.
-		 *
-		 * Copyright (C) 2020  Free Software Foundation.
-		 *
-		 * The JavaScript code in this page is free software: you can redistribute
-		 * it and/or modify it under the terms of the GNU General Public License
-		 * (GNU GPL) as published by the Free Software Foundation, either version 3
-		 * of the License, or (at your option) any later version.  The code is
-		 * distributed WITHOUT ANY WARRANTY; without even the implied warranty of
-		 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU GPL
-		 * for more details.
-		 *
-		 * As additional permission under GNU GPL version 3 section 7, you may
-		 * distribute non-source (e.g., minimized or compacted) forms of that code
-		 * without the copy of the GNU GPL normally required by section 4, provided
-		 * you include this license notice and a URL through which recipients can
-		 * access the Corresponding Source.
-		 *
-		 * @licend The above is the entire license notice for the JavaScript code
-		 * in this page.
-		 */
-
-		//--><!]]>
-	</script>
-
-	<style><?= VV::css("public/assets/css/document.css") ?></style>
-
-	<title>Vegvisir</title>
-	<link rel="icon" href="/assets/media/logo.svg">
-</head>
-<body>
-	<header>
-		<container>
-			<a href="/"><?= VV::embed("public/assets/media/logo.svg") ?></a>
-			<ul>
-				<li><a href="/"><button><p>Vegvisir</p></button></a></li>
-				<li><a href="/docs"><button><p>Documentation</p></button></a></li>
-				<li><a href="/demos"><button><p>Demos</p></button></a></li>
-			</ul>
-			<ul>
-				<li><a href="mailto:info@vlw.se"><button title="E-mail" class="shade"><?= VV::embed("public/assets/media/icons/email.svg") ?></button></a></li>
-				<li><a href="matrix:#vegvisir:vlw.se"><button title="Matrix" class="shade"><?= VV::embed("public/assets/media/icons/matrix.svg") ?></button></a></li>
-				<li><a href="https://codeberg.org/vegvisir/vegvisir"><button title="Codeberg" class="shade"><?= VV::embed("public/assets/media/icons/codeberg.svg") ?></button></a></li>
-				<li><a href="/docs/installation"><button class="solid"><p>Get Vegvisir</p></button></a></li>
-			</ul>
-			<button class="menuToggle solid">
-				<?= VV::embed("public/assets/media/icons/menu.svg") ?>
-			</button>
-		</container>
-	</header>
-	<vv-shell></vv-shell>
-	<footer>
-		<container>
-			<p>Copyleft 2024 - All rights reversed</p>
-			<ul>
-				<li><a href="https://vlw.se"><button><p>VLW</p></button></a></li>
-				<li><a href="https://codeberg.org/vegvisir/vegvisir/src/branch/master/LICENSE"><button><p>License</p></button></a></li>
-				<li><a href="https://codeberg.org/vegvisir/website"><button><p>Website</p></button></a></li>
-				<li><a href="/"><button class="shade"><p>Contribute ❤️</p></button></a></li>
-			</ul>
-		</container>
-	</footer>
-	<menu>
-		<ul>
-			<li><a href="/"><button class="shade"><p>Vegvisir</p></button></a></li>
-			<li><a href="/docs"><button class="shade"><p>Documentation</p></button></a></li>
-			<li><a href="/demos"><button class="shade"><p>Demos</p></button></a></li>
-		</ul>
-	</menu>
-	<?= VV::init(); ?>
-	<script><?= VV::js("public/assets/js/shells/document.js") ?></script>
-</body>
-</html>
--- a/snippets/docs/v3.1.3/shell.php
+++ b/snippets/docs/v3.1.3/shell.php
@ -1,4 +0,0 @@
-<style><?= VV::css("public/assets/css/snippets/docs/shell") ?></style>
-<?= VV::include("snippets/docs/v3.1.3/header") ?>
-<?= VV::include("snippets/docs/v3.1.3/aside") ?>
-<?= VV::include("snippets/footer") ?>
--- a/snippets/docs/version-select.php
+++ b/snippets/docs/version-select.php
@ -1,3 +0,0 @@
-<section>
-	<p>Version select</p>
-</section>
--- a/snippets/footer.php
+++ b/snippets/footer.php
@ -1,31 +0,0 @@
-<?php
-
-	use const VVWebsite\DEFAULT_BUTTON_ICON;
-
-	require_once VV::root("src/Consts.php");
-
-?>
-<style><?= VV::css("public/assets/css/snippets/footer") ?></style>
-<footer>
-	<nav>
-		<p>Copyleft <?= date("Y") ?> - All rights reversed</p>
-	</nav>
-	<nav>
-		<a href="/"><button class="inline sly">
-			<p>vlw</p>
-			<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
-		</button></a>
-		<a href="/"><button class="inline sly">
-			<p>license</p>
-			<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
-		</button></a>
-		<a href="/"><button class="inline sly">
-			<p>website</p>
-			<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
-		</button></a>
-		<a href="/"><button class="inline solid sly">
-			<p>contribute ❤️</p>
-			<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
-		</button></a>
-	</nav>
-</footer>
--- a/src/Consts.php
+++ b/src/Consts.php
@ -5,7 +5,7 @@
 	/**
 	 * # Docs
 	 */
-	const VERSION_LATEST = "/public/docs/v3.1.3/";
+	const VERSION_LATEST = "/public/docs/v3.1.4/";

 	/**
 	 * # Media
				`@ -0,0 +1 @@`
				`<?= VV::include("public/docs/v3.1.4/Reference/layout") ?>`