From 2604d93350867ccf6f434d93d51793c7f7acee69 Mon Sep 17 00:00:00 2001
From: farthen <monkey@farthen.de>
Date: Thu, 5 Sep 2013 00:11:44 +0200
Subject: blog.html: Make entry titles wrap correctly at small display sizes

---
 blog.html           |  6 ++++--
 static/css/main.css | 23 ++++++++++++++++++++---
 2 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/blog.html b/blog.html
index 9b67839..c5e83e9 100644
--- a/blog.html
+++ b/blog.html
@@ -9,11 +9,13 @@
     <div class="blog-year">
       <h3>{{ year }}</h3>
       {% for post in entries %}
-        <p>
+        <p class="blog-entry">
           <div class="entry-date">
             {{ post.date.strftime('%B %d') }}
           </div>
-          <a href="{{ post.get_url() }}">{{ post.title }}</a>
+          <div class="entry-title">
+            <a href="{{ post.get_url() }}">{{ post.title }}</a>
+          </div>
         </p>
       {% endfor %}
     </div>
diff --git a/static/css/main.css b/static/css/main.css
index b68a0ac..cb2ec41 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -110,17 +110,34 @@ nav a:hover {
 }
 
 #blog-index .blog-year {
-  margin-bottom: 2%;
+  padding-bottom: 2%;
+  clear: both;
+  overflow: auto;
+}
+
+.blog-entry {
+  width: 100%;
+  clear: both;
 }
 
 .entry-date {
-  float: left;
   width: 40%;
   text-align: right;
 }
 
+.entry-title {
+  float: left;
+  text-align: left;
+  width: 50%;
+  margin-left: 2%;
+}
+
+.entry-date, .entry-title {
+  float: left;
+}
+
 .blog-year a {
-  padding-left: 2%;
+  padding-left: 0%;
 }
 
 #blog-show small {
-- 
cgit v1.2.3-1-g7c22