Update page templating to centralize header and metatada, add 404 page

Axel helped me unfuck the HTML and CSS so the background gradient
scaling no longer depends on the size of the body element, which I was
previously locking to the size of the outer html element, and locking
THAT to 100% of the view port size (which is awful code and bad practice)

Axel refactored this so that the outer html element and body element
both naturally scale to the browser size, as expected, and the CSS
background was changed to be fixed at 100% height/width regardless of
viewport size, which results in much cleaner code (thanks Axel)

content/second.md

@@ -4,4 +4,11 @@ date = 2025-01-31
 updated = 2025-01-31
 +++
 
-This is my second blog post.
+This is my second blog post, I'm still testing Zola!!! I just really wanted to see how longer form content looks and how it grows within my page
+
+hopefully this will work well, it seems good, as long as I can get the content of the actual blog post to appear lol...
+
+who really knows:
+- Something is always broken
+- If it's not broken it will break eventually
+- [x] The thing I care about is currently breaking

static/main.css

@@ -1,36 +1,43 @@
 * {
   margin: 0rem;
+}
+
+html {
+  margin: 0rem;
   padding: 0rem;
 }
 
-html {
-  color: #000000;
-}
-
-/* Magic background CSS lives here */
 body {
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+  align-items: center;
   font-family: monospace;
-  color: #e4e4e4;
+  padding: 2rem;
   font-size: 18px;
-  margin: auto;
-  max-width: 57rem;
   line-height: 1.4;
-  -webkit-hyphens: auto;
+  /* Fancy background CSS styling lives here */
-  -ms-hyphens: auto;
+  background: linear-gradient(
-  hyphens: auto;
+    to bottom right,
-  text-align: center;
+    rgba(0, 0, 0, 1),
-  background: linear-gradient(to bottom right, rgba(0,0,0,1) 10%, rgba(65,14,105, 1) 40%, rgba(55,17,95, 1) 50%, rgba(32,14,84, 1) 60%, rgba(0,0,0,1) 90%);
+    rgba(65, 15, 75, 1) 40%,
-}
+    rgba(65, 15, 90, 1) 50%,
-
+    rgba(30, 15, 80, 1) 60%,
-ul {
+    rgba(0, 0, 0, 1)
-  margin-top: 4rem;
+  );
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  background-attachment: fixed;
 }
 
 li {
-  margin-top: 1rem;
   list-style-type: none;
 }
 
+ul {
+  padding: 0rem;
+}
+
 a {
   color: #4361ee;
   text-decoration: none;
@@ -46,11 +53,11 @@ a:hover {
 }
 
 #site-content {
-  margin: 5rem auto;
+  max-width: 55rem;
-  padding: 1rem;
+  color: #e4e4e4;
-  padding-bottom: 2rem;
+  padding: 2rem;
   border-radius: 1rem;
-  background: rgba(0,0,0, 0.7);
+  background: rgba(0,0,0, 0.78);
   box-shadow: 1rem 1rem 1rem 1rem rgba(0,0,0, 0.5);
 }
 
@@ -58,9 +65,8 @@ a:hover {
   font-size: 10px;
   color: #e4e4e4;
   text-decoration: none;
-  margin: 1rem;
+  padding: 1rem;
-  padding-bottom: 14px;
+  text-align: center;
-  border-bottom: #e4e4e4 8px dotted;
 }
 
 #ascii-header a {
@@ -74,12 +80,54 @@ a:hover {
 }
 
 #welcome-message {
-  margin: 1rem;
+  padding: 1rem;
-  padding-bottom: 14px;
   font-weight: bold;
+  text-align: center;
+}
+
+#blog-page-title {
+  padding-bottom: 0.5rem;
+  text-align: center;
+}
+
+#blog-post-content {
+  padding-top: 1.5rem;
+}
+
+#blog-post-content p {
+  padding: 1rem;
+}
+
+#blog-post-content ul {
+  padding: 1rem;
+  padding-top: 0rem;
+  /* Align the inner il elements correctly */
+  margin-left: 1rem;
+}
+
+#blog-post-content li {
+  list-style-type: disc;
+}
+
+.dotted-border {
   border-bottom: #e4e4e4 8px dotted;
+  width: 100%;
 }
 
 .title {
   letter-spacing: -2px;
+  text-align: center;
+}
+
+.blog-entry-container {
+  padding: 1rem;
+  padding-top: 2rem;
+}
+
+.blog-entry-title {
+  padding-top: 2rem;
+}
+
+.blog-post-date {
+  text-align: center;
 }

templates/404.html

@@ -0,0 +1,11 @@
+{% extends "base.html" %}
+
+{% block content %}
+<main id="main-content">
+  <div id="welcome-message">
+    <h2 id="blog-page-title">|| 404 Not Found ||</h2>
+    <h6 class="blog-post-date">These are not the frogs you're looking for 👋 🐸</h6>
+  </div>
+  <div class="dotted-border"></div>
+</main>
+{% endblock content %}

templates/base.html

@@ -16,21 +16,8 @@
 ██         ██    ██   ██ ██      ██   ██ ██      ██   ██ ██    ██ ██    ██    ██  ██  ██ ██      
  ██████    ██    ██████  ███████ ██   ██ ██      ██   ██  ██████   ██████  ██ ██      ██ ███████ 
   </pre></a></div>
-    <main id="main-content">
+  <div class="dotted-border"></div>
-      <div id="welcome-message">
+    {% block content %} {% endblock content %}
-        <h1 class="title">
-          Welcome
-        </h1>
-        <p>
-        This blog is made with 💜 and <a target="_blank" href="https://www.getzola.org">Zola!</a>
-        </br>
-        It's currently running on <a target="_blank" href="https://www.vultr.com">Vultr</a> for free with 500MB of RAM and <a target="_blank" href="https://www.openbsd.org">OpenBSD</a>
-        </p>
-      </div>
-      <div class="blog-posts">
-        {% block content %} {% endblock %}
-      </div>
-    </main>
   </div>
 </body>
 

templates/index.html

@@ -1,11 +1,23 @@
 {% extends "base.html" %}
 
 {% block content %}
+<main id="main-content">
+  <div id="welcome-message">
+    <h1 class="title">Welcome</h1>
+    <p>This blog is made with 💜 and <a target="_blank" href="https://www.getzola.org">Zola!</a></p>
+    <p>It's currently running on <a target="_blank" href="https://www.vultr.com">Vultr</a> and <a target="_blank" href="https://www.openbsd.org">OpenBSD</a>
+    </p>
+  </div>
+  <div class="dotted-border"></div>
+  <div class="blog-entry-container">
+    <h3 class="title">View the latest posts</h3>
       <ul>
       <!-- If you are using pagination, section.pages will be empty.
            You need to use the paginator object -->  
         {% for page in section.pages %}
-  <li><a href="{{ page.permalink | safe }}">{{ page.title }}</a></li>
+        <li class="blog-entry-title">{{ page.date }} // <a href="{{ page.permalink | safe }}">{{ page.title }}</a></li>
         {% endfor %}
       </ul>
+  </div>
+</main>
 {% endblock content %}

templates/page.html

@@ -1,20 +1,14 @@
-<!DOCTYPE html>
+{% extends "base.html" %}
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <link rel="stylesheet" href=/main.css>
-  <title>🐸 CyberFrog</title>
-</head>
 
-<body>
+{% block content %}
-  <h1 class="title">Cyberfrog blog</h1>
 <main id="main-content">
-    <h2 class="blog-title">{{ page.title }}</h2>
+  <div id="welcome-message">
-    <h4 class="blog-post-date">Published: {{ page.date }} || Last updated: {{ page.updated }}</h4>
+    <h2 id="blog-page-title">{{ page.title }}</h2>
-    <div class="blog-posts">
+    <h6 class="blog-post-date">// Published: {{ page.date }} // Modified: {{ page.updated }} //</h6>
-      {% block content %} {% endblock %}
+  </div>
+  <div class="dotted-border"></div>
+  <div id="blog-post-content">
+    {{ page.content | safe }}
   </div>
 </main>
-</body>
+{% endblock content %}
-
-</html>