added better blog page

Author: hitblast

Diff for: content/blogs/testblog.md renamed to content/blogs/testblog 1.md

@@ -1,5 +1,5 @@
 +++
-title = "Test Blog"
+title = "Example blog post with a very huge title that is very long and will be truncated in the index page."
 date = 2024-11-08
 description = "A simple test blog."
 [taxonomies]

Diff for: content/blogs/testblog copy.md renamed to content/blogs/testblog 2.md

@@ -1,5 +1,5 @@
 +++
-title = "Test Blog"
+title = "Example blog post"
 date = 2024-11-08
 description = "A simple test blog."
 [taxonomies]

Diff for: static/css/styles.css

@@ -102,6 +102,37 @@ article {
     width: 100%;
 }
 
+/* Blog-specific styling */
+.blog-post {
+    padding: 2rem;
+    width: 60%;
+    text-align: left;
+}
+
+.blog-post-left {
+    display: inline-block;
+    font-size: 1.25rem;
+}
+.blog-post-left:hover {
+    color: #fff;
+}
+.blog-post-left p {
+    margin-top: 1rem;
+    font-size: 1.1rem;
+    opacity: 0.85rem;
+}
+
+.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;
+}
+
 /* Media queries */
 @media (min-width: 1025px) {
     .container {

Diff for: templates/blogs.html

@@ -1,12 +1,22 @@
 {% extends "base.html" %} {% block content %}
 
 <center>
-    <h1>Latest Blogs</h1>
+    <h1><i class="fa-solid fa-mug-hot"></i> Latest <u>Blogs</u></h1>
+    <hr />
+
     {% 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/ #} -->
+    <div class="blog-post">
+        <div class="blog-post-left pico-color-sand-500">
+            <a href="{{ page.permalink | safe }}"> {{ page.title }} </a>
+            <p>{{ page.description }}</p>
+        </div>
+        <div class="blog-post-right">
+            <i class="fa-solid fa-hourglass-half"></i> {{ page.date |
+            date(format="%b %d, %Y") }}
+        </div>
+    </div>
+
     {% endfor %} {% endif %} {% endblock content %}
 </center>