Changeset - 170aa38bb5c3
[Not reviewed]
0 4 0
Brett Smith (brett) - 7 years ago 2016-12-31 04:12:09
brett@sfconservancy.org
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.
4 files changed with 11 insertions and 3 deletions:
0 comments (0 inline, 0 general)
www/conservancy/static/css/conservancy-bigscreen.css
Show inline comments
...
 
@@ -36,6 +36,11 @@
 
    background: #F0FFB8;
 
}
 

	
 
#contractpatch-follow h2 {
 
    font-size: large;
 
}
 

	
 
#contractpatch-blog h3:first-child {
 
    /* Don't let the first blog headline clear below #contractpatch-follow. */
 
    clear: right;
 
}
www/conservancy/static/css/conservancy.css
Show inline comments
...
 
@@ -123,12 +123,15 @@ h3 { margin-top: .6em; margin-bottom: .4em; }
 
#navbar li { float: left; display: inline; margin-bottom: 3px; }
 

	
 
#mainContent {
 
    margin-left: 50px;
 
    margin-right: 50px;
 
}
 
#sidebar + #mainContent {
 
    float: left;
 
}
 

	
 
#progressbar {
 
    height: 1.8em;
 
}
 

	
 
#progressbar .ui-widget-header {
...
 
@@ -179,13 +182,13 @@ h3 { margin-top: .6em; margin-bottom: .4em; }
 
#container {
 
    width: 100%;
 
    overflow: hidden;
 
}
 
#container #mainContent {
 
    background: #ffffff;
 
    margin-left: 225px;
 
    margin-left: 25px;
 
    margin-right: 50px;
 
    max-width: 1000px;
 
}
 
#container #sidebar {
 
    width: 200px;
 
    float: left;
www/conservancy/templates/blog/entry_partial.html
Show inline comments
...
 
@@ -13,13 +13,13 @@ This partial accepts these optional parameters:
 
* `htag`: Name of the HTML tag to render the entry headline.  Default "h3".
 

	
 
{% endcomment %}
 

	
 
<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" }}>
 

	
 
{% if show != "headline" %}
 
<p class="date">by <span class="author">{{ entry.author.formal_name }}</span>
 
  on {{ entry.pub_date|date:"F j, Y" }}
www/conservancy/templates/frontpage.html
Show inline comments
...
 
@@ -48,13 +48,13 @@
 
</div>
 

	
 
<div class="column">
 
<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 %}
 

	
 
<p><span class="continued"><a href="/blog/">Conservancy Blog Archive&hellip;</a></span></p>
 
</div>
0 comments (0 inline, 0 general)