separate upcoming from past activities mendicant#19

_includes/upcoming_post.html

@@ -0,0 +1,6 @@
+<li class="upcoming">
+  <a href="{{post.url}}">
+    {{ post.title }}
+    <span class="date">{{post.date | date: "%Y %B %d"}}</span>
+  </a>
+</li>

_sass/screen.sass

@@ -92,6 +92,8 @@ ul.posts
       margin-bottom: 0.5em
       span.date
         float: right
+  li.upcoming
+    background-color: #F7F9D0
 
 .date-time
   display: inline-block

activities.markdown

@@ -9,6 +9,10 @@ header:
 
 <ul class="posts">
 {% for post in site.categories.activities %}
-  {% include post.html %}
+  {% if site.time < post.date %}
+    {% include upcoming_post.html %}
+  {% else %}
+    {% include post.html %}
+  {% endif %}
 {% endfor %}
 </ul>

stylesheets/screen.css

@@ -342,6 +342,9 @@ ul.posts li a {
 ul.posts li a span.date {
   float: right;
 }
+ul.posts li.upcoming {
+  background-color: #f7f9d0;
+}
 
 .date-time {
   display: inline-block;