From 170aa38bb5c3972293846aa4d86540b4967effab Mon Sep 17 00:00:00 2001
From: Brett Smith <brett@sfconservancy.org>
Date: Fri, 30 Dec 2016 22:13:50 -0500
Subject: [PATCH] blog: Headlines clear floats.

This avoids a situation where multiple summaries have floats that stack on
top of each other vertically, which end up getting far away from the actual
text.

In order to make this work, we had to change the styling of #mainContent on
blog pages (and others with a sidebar).  Otherwise, headlines with
class="clear" would clear the sidebar as well.
---
 www/conservancy/static/css/conservancy-bigscreen.css | 5 +++++
 www/conservancy/static/css/conservancy.css           | 5 ++++-
 www/conservancy/templates/blog/entry_partial.html    | 2 +-
 www/conservancy/templates/frontpage.html             | 2 +-
 4 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/www/conservancy/static/css/conservancy-bigscreen.css b/www/conservancy/static/css/conservancy-bigscreen.css
index 9f03b564..635b4f52 100644
--- a/www/conservancy/static/css/conservancy-bigscreen.css
+++ b/www/conservancy/static/css/conservancy-bigscreen.css
@@ -39,3 +39,8 @@
 #contractpatch-follow h2 {
     font-size: large;
 }
+
+#contractpatch-blog h3:first-child {
+    /* Don't let the first blog headline clear below #contractpatch-follow. */
+    clear: right;
+}
diff --git a/www/conservancy/static/css/conservancy.css b/www/conservancy/static/css/conservancy.css
index 10162b39..7613e847 100644
--- a/www/conservancy/static/css/conservancy.css
+++ b/www/conservancy/static/css/conservancy.css
@@ -126,6 +126,9 @@ h3 { margin-top: .6em; margin-bottom: .4em; }
     margin-left: 50px;
     margin-right: 50px;
 }
+#sidebar + #mainContent {
+    float: left;
+}
 
 #progressbar {
     height: 1.8em;
@@ -182,7 +185,7 @@ h3 { margin-top: .6em; margin-bottom: .4em; }
 }
 #container #mainContent {
     background: #ffffff;
-    margin-left: 225px;
+    margin-left: 25px;
     margin-right: 50px;
     max-width: 1000px;
 }
diff --git a/www/conservancy/templates/blog/entry_partial.html b/www/conservancy/templates/blog/entry_partial.html
index 9511f757..d6932799 100644
--- a/www/conservancy/templates/blog/entry_partial.html
+++ b/www/conservancy/templates/blog/entry_partial.html
@@ -16,7 +16,7 @@ This partial accepts these optional parameters:
 
 <div class="blog-entry">
 
-<{{ htag|default:"h3" }}
+<{{ htag|default:"h3" }} class="clear"
   >{% if show|default:"body" != "body" %}<a href="{{ entry.get_absolute_url }}"
   >{% endif %}{{ entry.headline|safe }}{% if show|default:"body" != "body" %}</a>{% endif %}</{{ htag|default:"h3" }}>
 
diff --git a/www/conservancy/templates/frontpage.html b/www/conservancy/templates/frontpage.html
index c00a70f9..7f5cbde3 100644
--- a/www/conservancy/templates/frontpage.html
+++ b/www/conservancy/templates/frontpage.html
@@ -51,7 +51,7 @@
 <h2><a href="/feeds/blog/" class="feedlink"><img src="/img/feed-icon-14x14.png" alt="[RSS]"/></a> <a href="/blog/">Conservancy Blog</a></h2>
 {% for entry in blog|slice:":5" %}
   {% if forloop.first or entry.pub_date|date_within_past_days:30 %}
-    {% if not forloop.first %}<hr>{% endif %}
+    {% if not forloop.first %}<hr class="clear">{% endif %}
     {% include "blog/entry_partial.html" with entry=entry show="summary" only %}
   {% endif %}
 {% endfor %}