website Changeset - 170aa38bb5c3 · Conservancy Kallithea

Changeset - 170aa38bb5c3

Parent rev.

Child rev.

[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:

www/conservancy/static/css/conservancy-bigscreen.css

www/conservancy/static/css/conservancy.css

www/conservancy/templates/blog/entry_partial.html

www/conservancy/templates/frontpage.html

0 comments (0 inline, 0 general)

www/conservancy/static/css/conservancy-bigscreen.css

➞

Show inline comments

@@ ... / @@ -30,12 +30,17 @@ @@
 #contractpatch-follow {
     float: left;
     width: 30em;
     margin-right: 1.5em;
     /* Below from .shaded, but we don't want the class on non-big screens. */
     padding: .75em;
     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

@@ ... / @@ -117,24 +117,27 @@ h3 { margin-top: .6em; margin-bottom: .4em; } @@
   background: linear-gradient(to bottom, #fff, #eaf1f1);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eaf1f1', GradientType=0);
   border-color: #ffffff;
+}
 #navbar li:hover a { background: #577632; color: #fff; }
 #navbar li.supporter:hover a { background: #577632; color: #CE1F1F; }
 #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 {
     background: rgb(206, 31, 31);
+}
 #siteprogressbar {
     margin: .5em 20% .5em 2%;
+}
@@ ... / @@ -173,25 +176,25 @@ h3 { margin-top: .6em; margin-bottom: .4em; } @@
 .content-with-donate-sidebar {
     align: left;
     width: 80%;
+}
 #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;
     background-color: #ccd4a3;
+}
 #container #sidebar li {
     text-align: center;
     list-style: none;

www/conservancy/templates/blog/entry_partial.html

➞

Show inline comments

@@ ... / @@ -7,25 +7,25 @@ This partial requires these parameters: @@
 This partial accepts these optional parameters:
 * `show`: How much of the BlogEntry to render.  Accepted values are
   "headline", "dateline", "summary", "summary+tags", and "body".
   Every value will render the parts listed before it, except "body"
   doesn't include "summary".  Default "body".
 * `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" }}
 </p>
 {% if show != "dateline" %}
 {% if show|default:"body" == "body" %}
 {{ entry.body|safe }}

www/conservancy/templates/frontpage.html

➞

Show inline comments

@@ ... / @@ -42,25 +42,25 @@ @@
 <p class="date">{{ press_releases.2.pub_date|date:"F j, Y" }}</p>
 <h3><a href="{{ press_releases.2.get_absolute_url }}">{{ press_releases.2.headline|safe }}</a></h3>
 {{ press_releases.2.summary|safe }}
 {% if press_releases.2.body %}<p><span class="continued"><a href="{{ press_releases.2.get_absolute_url }}">Read More...</a></span></p>{% endif %}
 {% endif %}
 <p><span class="continued"><a href="/news/">Conservancy News Archive&hellip;</a></span></p>
 </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>
 <div class="column">
 <h2>Support Conservancy</h2>
 <p>As a 501(c)(3) non-profit charity, Conservancy relies on
   charitable donations for its operations.
   Please join {{supporters_count|safe}} others and <a href="/supporter/"><strong>become a Conservancy Supporter

0 comments (0 inline, 0 general)