blog.html: Make entry titles wrap correctly at small display sizes

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 {