frontpage: Reorganize.

* Put news and blogs up front.
* Use 30 days as the cutoff for everything, consistently.
* Allow columns to collapse.  Hopefully this is the start of a nicer
  view on mobile.
* Reduce shading.
This commit is contained in:
Brett Smith 2016-11-17 10:40:22 -05:00
parent 88474ec876
commit b331d52331
2 changed files with 98 additions and 120 deletions

View file

@ -254,21 +254,8 @@ h3 { margin-top: .6em; margin-bottom: .4em; }
.shaded { background: #F0FFB8; padding: .1em .5em; margin-bottom: .5em; }
.columns {
width: 100%;
overflow: hidden;
}
.column-small {
width: 31%;
}
.column-large {
margin-left: 35%;
margin-right: 50px;
}
.column-left { float: left; }
.column-right { float: right; }
.column h2 { font-size: 1.25em; }
.column h3 { font-size: 1.1em; }
.column hr { width: 50%; align: center; }
@ -276,6 +263,17 @@ h3 { margin-top: .6em; margin-bottom: .4em; }
.column h2 a { text-decoration: none; color: #000000; }
.column h2 a:hover { text-decoration: underline; }
@media all and (min-width: 60em) {
.column {
float: left;
}
.column:nth-child(odd) {
clear: both;
width: 47%;
margin-right: 3em;
}
}
#conservancyfooter {
margin-top: 1em;
border-top: 1px solid #ccc;

View file

@ -24,7 +24,93 @@
<div class="columns">
<div class="column column-small column-left">
<div class="column">
<h2><a href="/feeds/news/" class="feedlink"><img src="/img/feed-icon-14x14.png" alt="[RSS]"/></a> <a href="/news/">Recent News</a></h2>
<p class="date">{{ press_releases.0.pub_date|date:"F j, Y" }}</p>
<h3><a href="{{ press_releases.0.get_absolute_url }}">{{ press_releases.0.headline|safe }}</a></h3>
{{ press_releases.0.summary|safe }}
{% if press_releases.0.body %}<p><span class="continued"><a href="{{ press_releases.0.get_absolute_url }}">Read More...</a></span></p>{% endif %}
{% if press_releases.1 and press_releases.1.pub_date|date_within_past_days:30 %}
<hr/>
<p class="date">{{ press_releases.1.pub_date|date:"F j, Y" }}</p>
<h3><a href="{{ press_releases.1.get_absolute_url }}">{{ press_releases.1.headline|safe }}</a></h3>
{{ press_releases.1.summary|safe }}
{% if press_releases.1.body %}<p><span class="continued"><a href="{{ press_releases.1.get_absolute_url }}">Read More...</a></span></p>{% endif %}
{% endif %}
{% if press_releases.2 and press_releases.2.pub_date|date_within_past_days:30 %}
<hr/>
<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>
<h3><a href="{{ blog.0.get_absolute_url }}">{{ blog.0.headline|safe }}</a></h3>
<p class="date">Posted by {{ blog.0.author.formal_name }} on {{ blog.0.pub_date|date:"F j, Y" }}</p>
{{ blog.0.summary|safe }}
<p><span class="continued"><a href="{{ blog.0.get_absolute_url }}">Read More from {{ blog.0.author.casual_name }} on this&hellip;</a></span></p>
{% if blog.1 and blog.1.pub_date|date_within_past_days:30 %}
<hr/>
<h3><a href="{{ blog.1.get_absolute_url }}">{{ blog.1.headline|safe }}</a></h3>
<p class="date">Posted by {{ blog.1.author.formal_name }} on {{ blog.1.pub_date|date:"F j, Y" }}</p>
{{ blog.1.summary|safe }}
<p><span class="continued"><a href="{{ blog.1.get_absolute_url }}">Read More from {{ blog.1.author.casual_name }} on this&hellip;</a></span></p>
{% endif %}
{% if blog.2 and blog.2.pub_date|date_within_past_days:30 %}
<hr/>
<h3><a href="{{ blog.2.get_absolute_url }}">{{ blog.2.headline|safe }}</a></h3>
<p class="date">Posted by {{ blog.2.author.formal_name }} on {{ blog.2.pub_date|date:"F j, Y" }}</p>
{{ blog.2.summary|safe }}
<p><span class="continued"><a href="{{ blog.2.get_absolute_url }}">Read More from {{ blog.2.author.casual_name }} on this&hellip;</a></span></p>
{% endif %}
{% if blog.3 and blog.3.pub_date|date_within_past_days:30 %}
<hr/>
<h3><a href="{{ blog.3.get_absolute_url }}">{{ blog.3.headline|safe }}</a></h3>
<p class="date">Posted by {{ blog.3.author.formal_name }} on {{ blog.3.pub_date|date:"F j, Y" }}</p>
{{ blog.3.summary|safe }}
<p><span class="continued"><a href="{{ blog.3.get_absolute_url }}">Read More from {{ blog.3.author.casual_name }} on this&hellip;</a></span></p>
{% endif %}
{% if blog.4 and blog.4.pub_date|date_within_past_days:30 %}
<hr/>
<h3><a href="{{ blog.4.get_absolute_url }}">{{ blog.4.headline|safe }}</a></h3>
<p class="date">Posted by {{ blog.4.author.formal_name }} on {{ blog.4.pub_date|date:"F j, Y" }}</p>
{{ blog.4.summary|safe }}
<p><span class="continued"><a href="{{ blog.4.get_absolute_url }}">Read More from {{ blog.4.author.casual_name }} on this&hellip;</a></span></p>
{% endif %}
<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
today</strong></a> and/or <a href="/donate/">donate generously</a> to help our work!
</p>
</div>
<div class="column">
<h2>Follow Conservancy News &amp; Blogs</h2>
<p>There is a <a href="/feeds/omnibus/">full site feed available</a> (as
well as separate feeds for the <a href="/feeds/news/">news items</a> and
<a href="/feeds/blog/">blog posts</a>). You can follow Conservancy
on <a href="https://identi.ca/conservancy">pump.io</a>,
<a href="https://twitter.com/conservancy">Twitter</a>, <a href="https://www.youtube.com/channel/UCUEeuNvX2UyTTyTYXR9dm_A">Youtube</a>, <a href="https://plus.google.com/104268783278405704634/">Google+</a>,
and other social networks, too. Look
for us everywhere and follow/like us!</p>
<p>You can also subscribe to <a href="http://lists.sfconservancy.org/pipermail/announce/">Conservancy's low-traffic news list</a>.</p>
<h2>Learn More about Conservancy</h2>
<p>
<span class="continued"><a href="/about/">An Overview of Conservancy&hellip;</a></span>
@ -33,113 +119,7 @@
<span class="continued"><a href="/copyleft-compliance/">Conservancy's unique work defending and upholding copyleft licenses (e.g., the GPL) &hellip;</a></span>
<span class="continued"><a href="/npoacct/">Conservancy's Non-Profit Accounting Project &hellip;</a></span>
</p>
<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
today</strong></a> and/or <a href="/donate/">donate generously</a> to help our work!
</p>
<h2>Follow Conservancy News &amp; Blogs</h2>
<p>There is a <a href="/feeds/omnibus/">full site feed available</a> (as
well as separate feeds for the <a href="/feeds/news/">news items</a> and
<a href="/feeds/blog/">blog posts</a>). You can follow Conservancy
on <a href="https://identi.ca/conservancy">pump.io</a>,
<a href="https://twitter.com/conservancy">Twitter</a>, <a href="https://www.youtube.com/channel/UCUEeuNvX2UyTTyTYXR9dm_A">Youtube</a>, <a href="https://plus.google.com/104268783278405704634/">Google+</a>,
and other social networks, too. Look
for us everywhere and follow/like us!</p>
<p>You can also subscribe to <a href="http://lists.sfconservancy.org/pipermail/announce/">Conservancy's low-traffic news list</a>.</p>
</div>
<div class="column column-large">
{% if press_releases.0 %}
{% if press_releases.0.pub_date|date_within_past_days:60 %}
<div class="shaded">
<h2><a href="/feeds/news/" class="feedlink"><img src="/img/feed-icon-14x14.png" alt="[RSS]"/></a> <a href="/news/">Recent News</a></h2>
<p class="date">{{ press_releases.0.pub_date|date:"F j, Y" }}</p>
<h3><a href="{{ press_releases.0.get_absolute_url }}">{{ press_releases.0.headline|safe }}</a></h3>
{{ press_releases.0.summary|safe }}
{% if press_releases.0.body %}<p><span class="continued"><a href="{{ press_releases.0.get_absolute_url }}">Read More...</a></span></p>{% endif %}
{% if press_releases.1 %}
{% if press_releases.1.pub_date|date_within_past_days:30 %}
<hr/>
<p class="date">{{ press_releases.1.pub_date|date:"F j, Y" }}</p>
<h3><a href="{{ press_releases.1.get_absolute_url }}">{{ press_releases.1.headline|safe }}</a></h3>
{{ press_releases.1.summary|safe }}
{% if press_releases.1.body %}<p><span class="continued"><a href="{{ press_releases.1.get_absolute_url }}">Read More...</a></span></p>{% endif %}
{% endif %}
{% endif %}
{% if press_releases.2 %}
{% if press_releases.2.pub_date|date_within_past_days:25 %}
<hr/>
<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 %}
{% endif %}
</div>
{% endif %}
{% endif %}
<p><span class="continued"><a href="/news/">Conservancy News Archive&hellip;</a></span></p>
{% if blog.0.is_recent %}
<div class="shaded">
<h2><a href="/feeds/blog/" class="feedlink"><img src="/img/feed-icon-14x14.png" alt="[RSS]"/></a> <a href="/blog/">Conservancy Blog</a></h2>
<h3><a href="{{ blog.0.get_absolute_url }}">{{ blog.0.headline|safe }}</a></h3>
<p class="date">Posted by {{ blog.0.author.formal_name }} on {{ blog.0.pub_date|date:"F j, Y" }}</p>
{{ blog.0.summary|safe }}
<p><span class="continued"><a href="{{ blog.0.get_absolute_url }}">Read More from {{ blog.0.author.casual_name }} on this&hellip;</a></span></p>
{% if blog.1.is_recent %}
<hr/>
<h3><a href="{{ blog.1.get_absolute_url }}">{{ blog.1.headline|safe }}</a></h3>
<p class="date">Posted by {{ blog.1.author.formal_name }} on {{ blog.1.pub_date|date:"F j, Y" }}</p>
{{ blog.1.summary|safe }}
<p><span class="continued"><a href="{{ blog.1.get_absolute_url }}">Read More from {{ blog.1.author.casual_name }} on this&hellip;</a></span></p>
{% endif %}
{% if blog.2.is_recent %}
{% if blog.2.pub_date|date_within_past_days:20 %}
<hr/>
<h3><a href="{{ blog.2.get_absolute_url }}">{{ blog.2.headline|safe }}</a></h3>
<p class="date">Posted by {{ blog.2.author.formal_name }} on {{ blog.2.pub_date|date:"F j, Y" }}</p>
{{ blog.2.summary|safe }}
<p><span class="continued"><a href="{{ blog.2.get_absolute_url }}">Read More from {{ blog.2.author.casual_name }} on this&hellip;</a></span></p>
{% endif %}
{% endif %}
{% if blog.3.is_recent %}
{% if blog.3.pub_date|date_within_past_days:15 %}
<hr/>
<h3><a href="{{ blog.3.get_absolute_url }}">{{ blog.3.headline|safe }}</a></h3>
<p class="date">Posted by {{ blog.3.author.formal_name }} on {{ blog.3.pub_date|date:"F j, Y" }}</p>
{{ blog.3.summary|safe }}
<p><span class="continued"><a href="{{ blog.3.get_absolute_url }}">Read More from {{ blog.3.author.casual_name }} on this&hellip;</a></span></p>
{% endif %}
{% endif %}
{% if blog.4.is_recent %}
{% if blog.4.pub_date|date_within_past_days:10 %}
<hr/>
<h3><a href="{{ blog.4.get_absolute_url }}">{{ blog.4.headline|safe }}</a></h3>
<p class="date">Posted by {{ blog.4.author.formal_name }} on {{ blog.4.pub_date|date:"F j, Y" }}</p>
{{ blog.4.summary|safe }}
<p><span class="continued"><a href="{{ blog.4.get_absolute_url }}">Read More from {{ blog.4.author.casual_name }} on this&hellip;</a></span></p>
{% endif %}
{% endif %}
{% if blog.5.is_recent %}
{% if blog.5.pub_date|date_within_past_days:7 %}
<hr/>
<h3><a href="{{ blog.5.get_absolute_url }}">{{ blog.5.headline|safe }}</a></h3>
<p class="date">Posted by {{ blog.5.author.formal_name }} on {{ blog.5.pub_date|date:"F j, Y" }}</p>
{{ blog.5.summary|safe }}
<p><span class="continued"><a href="{{ blog.5.get_absolute_url }}">Read More from {{ blog.5.author.casual_name }} on this&hellip;</a></span></p>
{% endif %}
{% endif %}
</div>
{% endif %}
<p><span class="continued"><a href="/blog/">Conservancy Blog Archive&hellip;</a></span></p>
</div>
</div>
{% endblock %}