From 5c34a0faa238c08ad8d311051943b90714f1b7c3 Mon Sep 17 00:00:00 2001
From: Nicholas Orlowsky <nickorlow@nickorlow.com>
Date: Thu, 16 May 2024 20:08:41 +0200
Subject: [PATCH] make blog nicer

---
 assets/style.css    |  2 +-
 templates/blog.html | 32 +++++++++++++++++++-------------
 2 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/assets/style.css b/assets/style.css
index b9c5270..2ee0cc6 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -18,7 +18,7 @@ body {
   background-color: #d2e0ec;
   margin: 20px auto;
   max-width: 750px;
-  width: 80%;
+  width: 90%;
 }
 
 a {
diff --git a/templates/blog.html b/templates/blog.html
index c507d93..1eb35ab 100644
--- a/templates/blog.html
+++ b/templates/blog.html
@@ -1,18 +1,24 @@
 <h1>Blog</h1>
 
 {% for blog in blogs %}
-<div style="display:flex;justify-content:space-around; padding-bottom: 5px;"> 
-    <p style="margin-bottom: 0px; padding-right: 8px;">
-    <a 
-       {% if blog.url.contains("https://") %}
-        href="{{ blog.url }}"
-        {% else %}
-        href="/blogs/{{ blog.url }}"
-        {% endif %}
-        >
-        [ {{ blog.title }} ]
-    </a></p>
-    <div style="flex-grow: 1; border-bottom: 1px dotted black;"></div>
-    <p style="margin-bottom: 0px; padding-left: 8px;"><i>{{ blog.date }}</i></p>
+<div style="display:flex;justify-content:flex-start; padding-bottom: 5px; flex-wrap: wrap;"> 
+    <div style="display:flex;flex-grow:1;">
+        <p style="margin-bottom: 0px; padding-right: 8px; white-space: nowrap; text-align: left;">
+            <a 
+               {% if blog.url.contains("https://") %}
+                href="{{ blog.url }}"
+                {% else %}
+                href="/blogs/{{ blog.url }}"
+                {% endif %}
+                >
+                [ {{ blog.title }} ]
+            </a>
+        </p>
+        <div style="flex-grow: 1; border-bottom: 1px dotted black;min-width:0px;"></div>
+    </div>
+    <div style="display: flex;flex-grow:1;">
+        <div style="flex-grow: 1; border-bottom: 1px dotted black;"></div>
+        <p style="margin-bottom: 0px; padding-left: 8px;text-align: right;"><i>{{ blog.date }}</i></p>
+    </div>
 </div>
 {% endfor %}