updated blog body styling

Author: hitblast

static/css/styles.css

@@ -136,11 +136,23 @@ article {
 /* Blog display-specific styling */
 .blog-display {
     width: 80%;
+    text-align: left;
+}
+.blog-display-go-back {
+    opacity: 0.5;
 }
 
-.blog-display h2 {
-    font-family: "Playwrite DE Grund", sans-serif;
+.blog-display-title {
+    text-align: center;
     margin-top: 1rem;
+    border: 1px solid var(--pico-primary);
+    padding: 2rem;
+    padding-bottom: 0;
+    box-shadow: 15px 20px 0 rgba(0, 0, 0, 0.331);
+}
+.blog-display-footer {
+    font-size: 0.8rem;
+    opacity: 0.5;
 }
 
 .blog-display-content {

templates/blog-display.html

@@ -1,7 +1,19 @@
 {% extends "base.html" %} {% block content %}
 <center>
     <div class="blog-display" }>
-        <h2 class="center">{{ page.title }}</h2>
+        <a class="blog-display-go-back" href="/blogs"><<< Go Back</a>
+        <div class="blog-display-title">
+            <h2>{{ page.title }}</h2>
+            <p>{{ page.description }}</p>
+            <p class="blog-display-footer">
+                <i class="fa-solid fa-hourglass-half"></i>
+                Published: {{ page.date | date(format="%b %d, %Y") }} |
+                <i class="fa-solid fa-user"></i> Author:
+                <a href="https://github.com/{{ page.authors[0] }}"
+                    >{{ page.authors[0] }}</a
+                >
+            </p>
+        </div>
         <hr />
         <div class="blog-display-content pico-color-pumpkin-500">
             {{ page.content | safe }}

templates/blogs.html

@@ -26,12 +26,12 @@ <h1>
 
     {% endfor %} {% endif %}
 
+    <br /><br />
+
     {% if paginator.previous %}
-        <a href="{{ paginator.previous }}">&laquo; Previous</a> |
-    {% endif %}
-    Page {{ paginator.current_index }} of {{ paginator.number_pagers }}
-    {% if paginator.next %}
-        | <a href="{{ paginator.next }}">Next &raquo;</a>
+    <a href="{{ paginator.previous }}">&laquo; Previous</a> | {% endif %} Page
+    {{ paginator.current_index }} of {{ paginator.number_pagers }} {% if
+    paginator.next %} | <a href="{{ paginator.next }}">Next &raquo;</a>
     {% endif %}
 </center>