templates and styling for upcoming events and event details

_layouts/post.html

@@ -1,16 +1,64 @@
 ---
 layout: default
 ---
-<article class="post" itemscope itemtype="http://schema.org/BlogPosting">
+<article class="post">
 
-  <div class="post-content" itemprop="articleBody">
+  <div class="post-content">
     <div class="content-wrapper">
-      <div class="content">
-        <header class="post-header">
-          <h1 class="post-title" itemprop="name headline">{{ page.title }}</h1>
-          <p> {{page.workshop_dates}}</p>
-        </header>
-        {{ content }}
+      <div class="content content-0">
+        <div class="content-1">
+          <div class="content-inner">
+            <h1 class="post-title">ClojureBridge {{ page.city }}</h1>
+            <p class="location">{{ page.city }}, {{ page.country }}</p>
+            <p class="dates"><i class="fa fa-calendar"></i> {{ page.workshop_dates }}</p>
+            {{ content }}
+          </div>
+        </div>
+        <div class="content-2">
+          <div class="content-inner">
+            <img alt="{{ page.city }} map" src="https://maps.googleapis.com/maps/api/staticmap?size=450x300&amp;zoom=16&amp;markers={{ page.latitude }}%2C{{ page.longitude }}&amp;key=AIzaSyBHlZkrV89gVAL1z9Wy95LkBiS27UsAv3g">
+            <h3>Location</h3>
+            <p>{{ page.street }}, {{ page.city }}, {{ page.country }}</p>
+            <div class="organizers">
+              <h3>Organizer{% if page.organizers.names.size > 1 %}s{% endif %}</h3>
+              <p>
+                We are grateful for the involvement of
+                {{ page.organizers.names | join: ' and ' }},
+                who will host this workshop, and will answer any
+                questions you might have before or during the workshop.
+              </p>
+              <p class="social-media">
+                Find {{ page.organizers.names | join: ' and ' }}
+                on social media:
+              </p>
+              <ul>
+              {% for account in page.accounts %}
+                {% if account.service == 'github' %}
+                <li>
+                  <i class="fa fa-github"></i>
+                  <a href="https://github.com/{{ account.username }}">{{ account.username }}</a>
+                </li>
+                {% elsif account.service == 'twitter' %}
+                <li>
+                  <i class="fa fa-twitter"></i>
+                  <a href="https://twitter.com/{{ account.username }}">{{ account.username }}</a>
+                </li>
+                {% endif %}
+              {% endfor %}
+              </ul>
+            </div>
+            <div class="sponsors">
+              <p>A huge thank you to our sponsors:</p>
+              <ul>
+              {% for sponsor in page.sponsors %}
+                <li>
+                  <a href="{{ sponsor.url }}"><img alt="{{ sponsor.name }}" src="{{ sponsor.image }}"></a>
+                </li>
+              {% endfor %}
+              </ul>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </div>

_plugins/md5.rb

@@ -0,0 +1,9 @@
+require 'digest/md5'
+
+module MD5
+  def md5 input
+    Digest::MD5.hexdigest input
+  end
+end
+
+Liquid::Template.register_filter MD5

_posts/2017-05-05-Stockholm.md

@@ -0,0 +1,87 @@
+---
+layout:         post
+country:        Sweden
+city:           Stockholm
+street:         Klarna AB Sveavägen 46
+latitude:       59.3371711
+longitude:      18.0623905
+date:           2018-05-05 18:00:00 +0200
+workshop_dates: 5–6 May 2018
+city_image_url: https://upload.wikimedia.org/wikipedia/commons/8/88/Stockholm_Port.jpg
+organizers:
+  email:        [email protected]
+  names:        ["Mariana Bocoi", "Josh Glover"]
+accounts:
+- service:      github
+  username:     ClojureBridgeSE
+- service:      twitter
+  username:     ClojureBridgeSE
+- service:      unrecognized
+  username:     ClojureBridgeSE
+sponsors:
+- name:         Klarna AB
+  image:        http://s3.amazonaws.com/clojurebridge/thumb/197/klarna-blue-black.png?1488765101
+  url:          https://lifeatklarna.com/
+- name:         PurelyFunctional.tv
+  image:        http://s3.amazonaws.com/clojurebridge/thumb/198/95571868-0513-11e7-80b1-f62efc8b6793.png?1489095657
+  url:          https://purelyfunctional.tv/
+---
+
+### Description
+
+ClojureBridge is a free 1-day workshop aimed at increasing the participation
+of women in the Clojure community. It will be held in Stockholm, on Saturday
+May 6th, 2017 with an install fest on Friday May 5th, 2017 in the evening.
+The workshop is intended both for those new to programming, as well as those
+with some programming experience who would like to explore programming using
+Clojure, a modern functional programming language. If you have a lot of
+programming experience, you may find the pace a bit slow; consider joining
+us as a coach! :)
+
+The workshop will introduce you to fundamental programming concepts and
+approaches. Participants will fill out a quick survey to help us create groups
+based on prior knowledge and understanding. Although participants can install
+the required software for the workshop on their own, it is recommended everyone
+attend on Friday to set up her programming environment. Saturday will be spent
+learning and practising Clojure programming. You will be working in small
+groups of around 3 attendees each. Each participant needs to bring a laptop
+computer with a fairly recent operating system (Mac, Linux or Windows). If you
+have questions about your hardware or you don’t have a laptop, please don’t
+hesitate to send an email to the organisers before the event.
+
+The workshop will be held in English, but we will have a few Swedish speakers
+on hand, as well.
+
+### Contact us
+
+We're on Twitter at [ClojureBridgeSE](https://twitter.com/ClojureBridgeSE).
+
+### Who can attend?
+
+The workshop is open to all women, trans*, and gender nonconforming people.
+
+### Code of Conduct
+
+The workshop provides a safe and welcoming environment for everyone,
+so we will be asking all learners and event volunteers to respect our
+[Code of Conduct](http://bridgefoundry.org/code-of-conduct/), which will be
+strictly enforced. Our aim is that ClojureBridge Stockholm will introduce
+learners to new possibilities in programming and grow the tech community
+into a more diverse and interesting group.
+
+### Schedule
+
+#### Friday
+
+-  6:00 PM Installfest
+
+#### Saturday
+
+-  9:00 AM Doors open
+-  9:30 AM Welcome and introductions
+- 10:00 AM Group workshops
+- 12:30 PM Lunch
+-  1:30 PM Lightning talk
+-  2:00 PM Group workshop
+-  5:30 PM Demo
+-  6:30 PM After party

css/main.css

@@ -1,6 +1,7 @@
 body {
   margin: 0;
   font: 16px/1.4 "freight-sans-pro", "Helvetica", "Arial", sans-serif;
+  color: #222;
 }
 
 .content h1 {
@@ -109,15 +110,21 @@ body {
 #events-list {
   padding: 0;
   list-style: none;
+  overflow: hidden;
 }
 
 #events-list li {
+  float: left;
   width: 247px;
   padding: 0 0 2em;
   background: #e9e9e9;
   text-align: center;
 }
 
+#events-list li + li {
+  margin-left: 30px;
+}
+
 #events-list h3 {
   margin-top: 0.2em;
   font-weight: normal;
@@ -132,11 +139,9 @@ body {
 #events-list .city {
   width: 247px;
   height: 247px;
-  background-position: center;
-  background-size: cover;
 }
 
-#events-list img.organizer {
+#events-list .organizer {
   margin: -40px auto 0;
   display: block;
   width: 57px;
@@ -162,13 +167,21 @@ a {
 }
 
 h1, h2, h3, h4, h5, h6 {
-  margin: 0;
+  margin: 0.2em 0 0.5em;
+  color: #33343e;
 }
 
 img {
   max-width: 100%;
 }
 
+.background-image {
+  background-position: 50%;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  background-size: cover;
+}
+
 .fa span {
   display: none;
 }
@@ -194,6 +207,94 @@ img {
   margin-bottom: 1.0em;
 }
 
+.content-0:after {
+  display: block;
+  clear: both;
+  content: "";
+}
+
+.content-1 {
+  float: left;
+  width: 50%;
+}
+
+.content-1 .content-inner {
+  padding: 0 0.9375em 0 0;
+}
+
+.content-2 {
+  float: right;
+  width: 50%;
+}
+
+.content-2 .content-inner {
+  padding: 0 0 0 0.9375em;
+}
+
+.location {
+  margin: -0.55em 0 0.5em;
+  font-size: 1.5em;
+  color: #33343e;
+}
+
+.dates {
+  background: #e9e9e9;
+  padding: 0.25em 0.5em;
+  font-size: 90%;
+  color: #33343e;
+}
+
+h3 {
+  margin-bottom: 0.375em;
+  border-bottom: 2px solid #999a9f;
+  padding-bottom: 0.375em;
+  font-size: 1.125em;
+}
+
+.organizers {
+  background: #e9e9e9;
+  padding: 0.5em 1em;
+}
+
+.organizers .social-media {
+  margin-bottom: 0;
+  font-weight: bold;
+  font-size: 90%;
+  color: #707178;
+  text-transform: uppercase;
+}
+
+.organizers ul {
+  margin: 0.5em 0;
+  padding: 0;
+  list-style: none;
+}
+
+.sponsors p {
+  margin: 1.5em 0 0.5em;
+  font-weight: 100;
+  font-size: 1.5em;
+}
+
+.sponsors ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.sponsors li {
+  margin-bottom: 4px;
+}
+
+.sponsors img {
+  border: 1px solid #e9e9e9;
+  padding: 5px;
+}
+
+.sponsors a:hover img {
+  border-color: #33343e;
+}
+
 @media screen and (min-width: 640px) {
   #paypal-button {
     text-align: right;

index.html

@@ -20,24 +20,21 @@ <h2>
         Upcoming Events
       </h2>
 
+    {% assign upcoming_events = site.posts | where_exp: 'post', 'post.date >= site.time' %}
+    {% if upcoming_events.size == 0 %}
+      <p>There are no upcoming workshops.</p>
+    {% else %}
       <ul id="events-list">
-
-        {% assign curDate = site.time | date: '%s' %}
-        {% for post in site.posts %}
-            {% assign postStartDate = post.date | date: '%s' %}
-            {% if postStartDate >= curDate %}
-              <li>
-                <div class="city" style="background-image: url(http://www.telegraph.co.uk/content/dam/Travel/leadAssets/24/49/david-bowie_2449256a-large.jpg)"></div>
-                <img src="https://avatars1.githubusercontent.com/u/5123681?v=3&s=460" class="organizer">
-                <h3>
-                  <a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
-                </h3>
-                <p>{{ post.workshop_dates }}</li>
-              </li>
-            {% endif %}
-        {% endfor %}
-
+      {% for post in upcoming_events reversed %}
+        <li>
+          <div class="background-image city" style="background-image: url({{ post.city_image_url }})"></div>
+          <div class="background-image organizer" style="background-image: url(https://www.gravatar.com/avatar/{{ post.organizers.email | strip | downcase | md5 }}?s=200)"></div>
+          <h3><a class="post-link" href="{{ post.url }}">{{ post.city }}</a></h3>
+          <p>{{ post.workshop_dates }}</li>
+        </li>
+      {% endfor %}
       </ul>
+    {% endif %}
 
     </div>
   </div>