attempting styling fix

Author: hitblast

.gitignore

@@ -1 +1,2 @@
-.DS_Store
+public
+.DS_Store

content/blogs/testblog copy.md

@@ -0,0 +1,8 @@
++++
+title = "Test Blog"
+date = 2024-11-08
+description = "A simple test blog."
+[taxonomies]
+tags = ["test"]
++++
+Hello! This is the blog body.

content/blogs/testblog.md

@@ -0,0 +1,8 @@
++++
+title = "Test Blog"
+date = 2024-11-08
+description = "A simple test blog."
+[taxonomies]
+tags = ["test"]
++++
+Hello! This is the blog body.

static/css/styles.css

@@ -1,6 +1,7 @@
 @import url("https://fonts.googleapis.com/css2?family=Borel&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Playwrite+DE+Grund:[email protected]&display=swap");
 
+/* Root modifiers (for Pico CSS especially) */
 :root {
     --pico-color: #c0bfc0;
     --pico-primary: rgb(203, 198, 182);
@@ -12,16 +13,19 @@
     --pico-text-underline-offset: 0.5rem;
     --pico-typography-spacing-vertical: 1.5rem;
     --pico-form-element-spacing-vertical: 1rem;
+    --pico-spacing: 1.5rem;
     --pico-form-element-spacing-horizontal: 1.25rem;
     --pico-box-shadow: 0 20px 2rem rgba(0, 0, 0, 0.331);
 }
 
+/* Element styling */
 html {
     scroll-behavior: smooth;
 }
 
 * {
     box-sizing: border-box;
+    transition: 0.1s ease-in-out;
 }
 
 body {
@@ -64,9 +68,9 @@ article {
     box-shadow: none;
     margin-top: 50px;
     padding: 100px 100px;
-    transition: 0.1s ease-in-out;
 }
 
+/* Utility classes */
 .visible-article {
     --pico-card-background-color: rgb(27, 21, 19);
 }
@@ -98,6 +102,7 @@ article {
     width: 100%;
 }
 
+/* Media queries */
 @media (min-width: 1025px) {
     .container {
         width: 1024px;

templates/blogs.html

@@ -1,12 +1,12 @@
-{% extends "base.html" %}
+{% extends "base.html" %} {% block content %}
 
-{% block content %}
-{% if paginator.pages|length == 0 %}
-	<center>no blogs!</center>
-{%else%}
-	{% for page in paginator.pages %}
-		<a href="{{ page.permalink | safe }}">{{ page.title }}</a> on {{ page.date | date(format="%b %d, %Y") }} <br/>
-		<!-- {# COMMENT: find all attributes from https://www.getzola.org/documentation/content/page/ #} -->
-	{% endfor %}
-{% endif %}
-{% endblock content %}
+<center>
+    <h1>Latest Blogs</h1>
+    {% if paginator.pages|length == 0 %} no blogs! {%else%} {% for page in
+    paginator.pages %}
+
+    <a href="{{ page.permalink | safe }}">{{ page.title }}</a> on {{ page.date |
+    date(format="%b %d, %Y") }} <br />
+    <!-- {# COMMENT: find all attributes from https://www.getzola.org/documentation/content/page/ #} -->
+    {% endfor %} {% endif %} {% endblock content %}
+</center>