Theme Update

assets/css/main.css

@@ -1,8 +1,5 @@
-/* BASE */
-
 html {
   scroll-behavior: smooth;
-  padding: 0;
 }
 
 body {
@@ -14,6 +11,8 @@ body {
   max-width: var(--main-width);
   padding-left: var(--main-padding);
   padding-right: var(--main-padding);
+  color: var(--content);
+  background: var(--background);
 }
 
 .content {
@@ -101,7 +100,6 @@ hr {
   margin-bottom: 2rem;
 }
 
-
 /* Header */
 
 .header {
@@ -283,11 +281,29 @@ footer a {
   content: counter(h2-counter) "." counter(h3-counter) "." counter(h4-counter) "\00a0\00a0";
 }
 
-/* Dark mode */
+/* light and dark images */
+
 .dark .img-light {
   display: none !important;
 }
 
 .light .img-dark {
   display: none !important;
+}
+
+/* 404 */
+
+.not-found {
+  display: flex;
+  align: center;
+  align-items: center;
+  justify-content: center;
+}
+
+.not-found div {
+  text-align: center;
+}
+
+.not-found div h1 {
+  font-size: 6rem;
 }

assets/css/vars.css

@@ -39,7 +39,14 @@
     /* Content */
     --content-height: calc(100vh - var(--footer-height));
 
+    /* Theme */
     --content: rgb(30, 30, 30);
+    --background: rgb(255, 255, 255);
+}
+
+.dark {
+    --content: rgb(218, 218, 218);
+    --background: rgb(30, 30, 30);
 }
 
 @media screen and (max-width: 1024px) {

assets/js/main.js

@@ -1,14 +0,0 @@
-const images = document.querySelectorAll('img');
-
-images.forEach(img => {
-
-    if (img.src.endsWith('#dark-mode')) {
-
-        console.log('found');
-
-        img.onload = function () {
-            console.log(`Image loaded: ${img.src}`);
-        };
-
-    }
-});

layouts/404.html

@@ -0,0 +1,12 @@
+{{ define "main" }}
+
+<div class="not-found">
+
+    <div>
+        <h1> 404 </h1>
+        <p> You shouldn't be here, click on the header to return to home </p>
+    </div>
+</div>
+
+
+{{ end }}