generator now adds classes for past & current events, current events are double width

themes/varia/static/css/main.css

@@ -159,9 +159,7 @@ pre{
 .summary p{
 	display: inline;
 }
-.long-read .hentry{
+
-	width:calc(400px + 2em);
-}
 .hentry{
 	display: inline-block;
 	width: 200px;
@@ -170,6 +168,9 @@ pre{
 	margin:0 2em 2em 0;
 	padding:0;
 	vertical-align: top;
+}
+.current{
+	width:calc(400px + 2em);
 }
 	.hentry .article-info{
 		width: 200px;
@@ -200,11 +201,11 @@ pre{
 	}
 	/* featured image */
 	.hentry .article-info .featured-image img{
-		width:200px;
+		width:100%;
 		max-height: 100%;
 	}
 	/* double-blocks for super important categories */
-	.hentry.longread, .hentry.longread .article-info, .hentry.longread .featured-image img{
+	.hentry.current, .hentry.current .article-info, .hentry.current .featured-image img{
 		width: calc(400px + 2em);
 	}
 
@@ -230,7 +231,7 @@ pre{
 		width: calc(100% - 275px);
 	}
 	.article-info .featured-image img{
-		max-width: 200px;
+		max-width: 100%;
 		max-height: 300px;
 	}
 	.post-info{
@@ -313,6 +314,6 @@ pre{
 /* add a monochrome filter over past events */
 .featured-image.past-event img{
 	/*filter:opacity(0.25);*/
-	/*filter: url("/images/filter.svg#monochrome");
+/*	filter: url("/images/filter.svg#monochrome");
 	-webkit-filter: url("/images/filter.svg#monochrome");*/
 }

themes/varia/templates/index.html

@@ -16,25 +16,30 @@
 <div id="post-list">
 {% for article in articles_page.object_list %}
 	{% if article.category %}
-	<article class="hentry {{article.category}}">
-	{% endif %}
-		<div class="article-info">
-			<span class="entry-title"><a href="{{ article.url }}" rel="bookmark" title="Permalink to {{ article.title|striptags }}">{{ article.title }}</a></span>
-			<div class="event-details">
         {% if article.event_start %}
-					{{ article.event_start }}
+            {% set event_status = '' %}
-					{% set past = '' %}
             {% if article.event_start < article.date.now() %}
-						{% set past = ' past-event' %}
+                {% set event_status = ' past' %}
             {% endif %}
-
+            {% if article.event_start >= article.date.now() %}
+                {% set event_status = ' current' %}
             {% endif %}
-			</div>
+        {% endif %}
-			<div class="featured-image {{past}}">
+	<article class="hentry {{article.category}}{{event_status}}">
+	{% endif %}
+		<div class="article-info">
+			<span class="entry-title"><a href="{{ article.url }}" rel="bookmark" title="Permalink to {{ article.title|striptags }}">{{ article.title }}</a></span>
+			<div class="featured-image {{event_status}}">
 				{% if article.featured_image %}
 					<img src="{{ article.featured_image }}">
 				{% endif %}
 			</div>
+            {% if article.event_start %}
+                <div class="event-details">
+                    {{ article.event_start }}
+                    {% set past = '' %}
+                </div>
+            {% endif %}
 		</div>
 		<div class="summary">{{ article.summary }}
 			<span>