New 404 page and clean up

config/global/elements/footer.html

@@ -1,6 +1,6 @@
 <footer>
-	Mutant Remix is not affiliated with <a href="https://adduce.vale.rocks">mutant.tech</a>. This is a transformation of
-	the original Mutant Standard emoji
-	pack, which is licensed under the Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.
+	Mutant Remix is not affiliated with <a href="https://adduce.vale.rocks">mutant.tech</a>.
+	This is a transformation of the original Mutant Standard emoji pack, which is licensed under the Creative Commons
+	Attribution-NonCommercial-ShareAlike 4.0 International License.
 	Site built with <a href="https://adduce.vale.rocks">Adduce</a>.
 </footer>

config/global/elements/navbar.html

@@ -1,14 +1,11 @@
-<div id="nav">
-	<div>
-		<li><a href="/"><img style="height: 2.5rem; width: auto; display: inline;"
-					src="assets/Mutant_Remix_Wordmark.svg" alt="Mutant Remix"></a>
-		</li>
-	</div>
-	<div>
+<nav>
+	<a href="/"><img style="height: 2.5rem; width: auto; display: inline;" src="assets/Mutant_Remix_Wordmark.svg"
+			alt="Mutant Remix"></a>
+	<ul>
 		<li><a href="https://github.com/mutant-remix/mutant-remix/blob/master/CONTRIBUTING.md">contributing</a></li>
 		<li><a href="/demo">demo</a></li>
 		<li><a href="https://github.com/mutant-remix/mutant-remix/releases">download</a></li>
-	</div>
-</div>
+	</ul>
+</nav>
 
 <div id="content">

config/global/style/navbar.css

@@ -1,20 +1,22 @@
-#nav {
-	font-size: 1.3rem;
+nav {
 	padding: 1rem 0;
 	display: flex;
     align-items: center;
 	justify-content: space-between;
-	background-color: var(--background);
 }
 
-#nav li {
-	display: inline;
-	padding-left: 1rem;
+nav ul {
 	all: unset;
+}
+
+nav li {
+	font-size: 1.3rem;
 	font-weight: 900;
+	display: inline;
+	margin-left: 0.5rem;
 }
 
-#nav a, #nav a:link, #nav a:visited, #nav a:focus, #nav a:hover, #nav a:active {
+nav a, nav a:link, nav a:visited, nav a:focus, nav a:hover, nav a:active {
 	all: unset;
 	cursor: pointer;
 }

config/global/style/standard.css

@@ -35,35 +35,8 @@ body {
 	min-height: 100%;
 }
 
-#blogposts {
-	display: flex;
-	flex-direction: column;
-}
-
-#blogposts div{
-	border-bottom: 2px solid var(--bright_grey);
-	width: 100%;
- 	box-sizing: border-box;
-	padding: 20px 0;
-	overflow: hidden;
-}
-
-#blogposts h3 {
-	display: -webkit-box;
-	-webkit-line-clamp: 2;
-	-webkit-box-orient: vertical;
-	word-wrap: break-word;
-	text-overflow: ellipsis;
-	overflow: hidden;
-}
-
-#blogposts p {
-	margin: 0;
-}
-
 @media (max-width: 700px) {
 body {
     margin: 0 10px;
 }
-
 }

config/global/style/style.css

@@ -3,7 +3,6 @@
 @import "style/links.css";
 @import "style/footer.css";
 @import "style/images.css";
-@import "style/input.css";
 @import "style/navbar.css";
 @import "style/standard.css";
 @import "style/type.css";

config/global/style/type.css

@@ -6,20 +6,10 @@ html {
 	color: var(--white);
 }
 
-section, h1, h2, h3, h4, h5, h6 {
+h1, h2, h3, h4, h5, h6 {
 	font-weight: 900;
 }
 
-section {
-	font-size: 5.5rem;
-	writing-mode: vertical-rl;
-	transform: scale(-1);
-	margin: 15vh 0 0 -6.5rem;
-	position: fixed;
-	user-select: none;
-	line-height: 0;
-}
-
 h1 {
 	font-size: 3rem;
 }
@@ -51,8 +41,14 @@ p {
 	margin-bottom: 1rem;
 }
 
+pre {
+	overflow-x: scroll;
+}
+
 code {
 	font-family: 'Fira Code', monospace;
+	overflow: inherit;
+	display: inline-block;
 }
 
 blockquote {
@@ -67,15 +63,3 @@ li {
 	list-style-position: inside;
 	align-items: center;
 }
-
-@media (max-width: 700px) {
-	section {
-		font-size: inherit;
-		writing-mode: inherit;
-		transform: inherit;
-		margin: inherit;
-		position: inherit;
-		user-select: inherit;
-		line-height: inherit;
-	}
-}

config/pages/404/404.md

@@ -2,20 +2,28 @@
 	<title>Page Not Found</title>
 </head>
 
-<h1>
-    <section>
-    	Error
-    </section>
-</h1>
+<style>
+    body {
+        text-align: center;
+    }
 
-## Page Not Found
+    img {
+        margin-left: auto;
+        margin-right: auto;
+        max-height: 30vh;
+    }
+</style>
 
-This page doesn't exist. Why not make it yourself?
+<img src="assets/raised_eyebrow.svg"/>
 
-<style contenteditable style="display: block; white-space: pre-line; overflow: auto; background: var(--dark_grey); font-family: monospace; border-radius: 5px; padding: 0.5rem;">
-/* Shift + Enter for a new line */
-p {
-font-size: 1rem;
-}
+<h1>Page Not Found</h1>
 
-</style>
+<p>We're not sure how you got here considering this page doesn't exist...</p>
+
+<button class="pushable" onclick="location.href='/'">
+    <span class="edge" style="background: var(--dark_orange)">
+    </span>
+	    <span class="front" style="background: var(--orange);">
+	    Return to the home page
+    	</span>
+</button>

config/pages/demo/conf.toml

@@ -8,8 +8,8 @@ from_str = "config/global/elements/navbar.html"
 style = "html"
 
 [[main.block]]
-from_str = "config/pages/demo/demo.md"
-style = "md"
+from_str = "config/pages/demo/demo.html"
+style = "html"
 
 [[main.block]]
 from_str = "config/global/elements/footer.html"

config/pages/demo/demo.md → config/pages/demo/demo.html

@@ -1,6 +1,6 @@
-# Demo
+<h1>Demo</h1>
 
-Try before you buy - or rather use. These blobby guys are free after all.
+<p>The demo isn't here just yet...</p>
 
 <table>
   <tbody id="data">
@@ -49,4 +49,3 @@
   })
     .catch(error => console.error(error));
 </script>
-

config/pages/index/conf.toml

@@ -8,8 +8,8 @@ from_str = "config/global/elements/navbar.html"
 style = "html"
 
 [[main.block]]
-from_str = "config/pages/index/index.md"
-style = "md"
+from_str = "config/pages/index/index.html"
+style = "html"
 
 [[main.block]]
 from_str = "config/global/elements/footer.html"