first iteration event preview

content/assets/stylesheets/includes/events.scss

@@ -1,3 +1,63 @@
-.subevent {
+.box.event-preview {
+  border-radius: 0px;
+  display: flex;
+  align-items: center;
+  box-shadow : none;
+  margin-bottom: 0px;
+
+  border-top: 1px solid lighten(gray, 15%);
+
+  .image-holder {
+    border-radius: 50%;
+    padding: 10px;
+    border: 1px solid lighten(gray, 30%);
+    width: 15%;
+    height: 15%;
+  }
+
+  .image {
+    border-radius: 50%;
+    vertical-align: middle;
+    border: 1px solid gray;
+  }
+
+  .info {
+    margin: 1.5em;
+    box-shadow : none;
+
+    .title {
+      font-size: 1.7em;
+      font-weight: 500;
+      margin-bottom: 0;
+      a {
+        color: darken(gray, 20%);
+      }
+      a:hover {
+        border-bottom: none;
+        color: #FF7F00;
+      }
+    }
+
+    .location  {
+      font-size: .9em;
+      a {
+        color: lighten(gray, 10%);
+      }
+    }
+
+    .description {
+      font-size: 1.7em;
+      font-weight: 200;
+      color: #FF7F00;
+    }
+
+    .time {
+      font-size: 1.6em;
+      font-weight: 400;
+    }
+
+    .subevent {
       margin-left: 20px;
+    }
+  }
 }

content/events.erb

@@ -9,10 +9,31 @@ title: Events
   </div>
 
   <% all_events.each do |event| %>
-  <div class="box">
+    <div class="box event-preview">
+      <div class="image-holder">
+        <img src="http://placehold.it/150x150" alt="" class="image" />
+      </div>
+
+      <div class="box info">
+        <div class="title">
           <a href="<%= relative_path_to(event) %>">
             <%= event[:title] %>
           </a>
+        </div>
+        <div class="location">
+          <a href="#">
+            <%= event[:location] %>
+          </a>
+        </div>
+
+        <div class="description">
+          <%= event[:description] %>
+        </div>
+
+        <div class="time">
+          <%= event[:time] %>
+        </div>
+
         <% sub_events(event).each do |sub_event| %>
           <div class="subevent">
             <a href="<%= relative_path_to(sub_event) %>">
@@ -21,5 +42,6 @@ title: Events
           </div>
         <% end %>
       </div>
+    </div>
   <% end %>
 </div>

content/events/15-16/awk.md

@@ -4,6 +4,7 @@ banner: https://zeus.ugent.be/wp-content/uploads/2016/02/awkles-768x1007.jpg
 created_at: 01-02-2016
 time: 23-02-2016
 location: Auditorium A1, Campus Sterre, Gebouw S9
+description: Dit is een description van het awk event!
 ---
 
 Op **dinsdag 23 februari 18:00** (na de les Scriptingtalen) in **Auditorium A1** organiseren we een **AWK-les** gegeven door **professor Peter Dawyndt**.