worked on the primary blog display more

content/blogs/testblog 1.md

@@ -1,7 +1,8 @@
 +++
-title = "Example blog post with a very huge title that is very long and will be truncated in the index page."
+title = "Explaining Flutter Riverpod in under 10 minutes"
 date = 2024-11-08
-description = "A simple test blog."
+description = "Learn the basics of riverpod and how to use it inside your Flutter app in this comprehensive guide, specially by us!"
+authors = ["hitblast"]
 [taxonomies]
 tags = ["test"]
 +++

content/blogs/testblog 2.md

@@ -1,7 +1,8 @@
 +++
-title = "Example blog post"
-date = 2024-11-08
-description = "A simple test blog."
+title = "[test] How I made a Monzu interpreter"
+date = 2024-11-09
+description = "A deep-dive into this bizarre yet funny, compiled low-level programming language, especially by the organization's founder."
+authors = ["furtidev"]
 [taxonomies]
 tags = ["test"]
 +++

static/css/styles.css

@@ -66,8 +66,8 @@ svg {
 article {
     --pico-card-background-color: var(--pico-background-color);
     box-shadow: none;
-    margin-top: 50px;
-    padding: 100px 100px;
+    margin-top: 30px;
+    padding: 100px 80px;
 }
 
 /* Utility classes */
@@ -102,10 +102,10 @@ article {
     width: 100%;
 }
 
-/* Blog-specific styling */
+/* Blog post-specific styling */
 .blog-post {
     padding: 2rem;
-    width: 60%;
+    width: 80%;
     text-align: left;
 }
 
@@ -124,13 +124,27 @@ article {
 
 .blog-post-right {
     opacity: 0.5;
-    padding-top: 1rem;
     float: right;
     font-size: 0.85rem;
 }
 .blog-post-right i,
 .blog-post-left i {
     margin-right: 5px;
+    margin-left: 5px;
+}
+
+/* Blog display-specific styling */
+.blog-display {
+    width: 80%;
+}
+
+.blog-display h2 {
+    font-family: "Playwrite DE Grund", sans-serif;
+    margin-top: 1rem;
+}
+
+.blog-display-content {
+    text-align: left;
 }
 
 /* Media queries */

templates/blog-display.html

@@ -1,6 +1,11 @@
-{% extends "base.html" %}
-
-{% block content %}
-Viewing: {{page.title}} <br><br>
-{{ page.content | safe }} <br><br>
-{% endblock content %}
+{% extends "base.html" %} {% block content %}
+<center>
+    <div class="blog-display" }>
+        <h2 class="center">{{ page.title }}</h2>
+        <hr />
+        <div class="blog-display-content pico-color-pumpkin-500">
+            {{ page.content | safe }}
+        </div>
+    </div>
+</center>
+{% endblock content %}

templates/blogs.html

@@ -14,7 +14,8 @@ <h1><i class="fa-solid fa-mug-hot"></i> Latest <u>Blogs</u></h1>
         </div>
         <div class="blog-post-right">
             <i class="fa-solid fa-hourglass-half"></i> {{ page.date |
-            date(format="%b %d, %Y") }}
+            date(format="%b %d, %Y") }} <i class="fa-solid fa-user"></i> {{
+            page.authors[0] }}
         </div>
     </div>