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.
This commit is contained in:
Brett Smith 2016-12-30 22:13:50 -05:00
parent e7c1171b6e
commit 170aa38bb5
4 changed files with 11 additions and 3 deletions

View file

@ -39,3 +39,8 @@
#contractpatch-follow h2 { #contractpatch-follow h2 {
font-size: large; font-size: large;
} }
#contractpatch-blog h3:first-child {
/* Don't let the first blog headline clear below #contractpatch-follow. */
clear: right;
}

View file

@ -126,6 +126,9 @@ h3 { margin-top: .6em; margin-bottom: .4em; }
margin-left: 50px; margin-left: 50px;
margin-right: 50px; margin-right: 50px;
} }
#sidebar + #mainContent {
float: left;
}
#progressbar { #progressbar {
height: 1.8em; height: 1.8em;
@ -182,7 +185,7 @@ h3 { margin-top: .6em; margin-bottom: .4em; }
} }
#container #mainContent { #container #mainContent {
background: #ffffff; background: #ffffff;
margin-left: 225px; margin-left: 25px;
margin-right: 50px; margin-right: 50px;
max-width: 1000px; max-width: 1000px;
} }

View file

@ -16,7 +16,7 @@ This partial accepts these optional parameters:
<div class="blog-entry"> <div class="blog-entry">
<{{ htag|default:"h3" }} <{{ htag|default:"h3" }} class="clear"
>{% if show|default:"body" != "body" %}<a href="{{ entry.get_absolute_url }}" >{% 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" }}> >{% endif %}{{ entry.headline|safe }}{% if show|default:"body" != "body" %}</a>{% endif %}</{{ htag|default:"h3" }}>

View file

@ -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> <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" %} {% for entry in blog|slice:":5" %}
{% if forloop.first or entry.pub_date|date_within_past_days:30 %} {% 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 %} {% include "blog/entry_partial.html" with entry=entry show="summary" only %}
{% endif %} {% endif %}
{% endfor %} {% endfor %}