From 942f2a960c76032ec35a129bcc12b185905853fb Mon Sep 17 00:00:00 2001
From: Lorin Werthen <werthenlorin@gmail.com>
Date: Fri, 27 Jan 2017 19:07:59 +0100
Subject: [PATCH] make life easier when a light background is used in events

---
 .../stylesheets/includes/eventpage.scss       | 14 +++++
 content/events/16-17/hashcode.md              |  1 +
 layouts/eventpost.erb                         | 52 ++++++++++---------
 3 files changed, 42 insertions(+), 25 deletions(-)

diff --git a/content/assets/stylesheets/includes/eventpage.scss b/content/assets/stylesheets/includes/eventpage.scss
index 4e6cb80..e8657a4 100644
--- a/content/assets/stylesheets/includes/eventpage.scss
+++ b/content/assets/stylesheets/includes/eventpage.scss
@@ -33,3 +33,17 @@
     vertical-align: baseline;
   }
 }
+
+.header-text {
+  float: left;
+  padding: 20px;
+
+  &.light-background {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+}
+
+.has-vertical-center {
+  display: flex;
+  align-items: center;
+}
diff --git a/content/events/16-17/hashcode.md b/content/events/16-17/hashcode.md
index 5f47785..b298f7e 100644
--- a/content/events/16-17/hashcode.md
+++ b/content/events/16-17/hashcode.md
@@ -8,6 +8,7 @@ locationlink: Sterre,Ghent Belgium
 banner: https://hashcode.withgoogle.com/resources/images/hero_6.jpg
 image: https://zeus.ugent.be/zeuswpi/I9GAh7iy.png
 facebook: https://www.facebook.com/events/179465822503595/
+header_text_background: true
 ---
 
 # Google Hashcode
diff --git a/layouts/eventpost.erb b/layouts/eventpost.erb
index 2fb5b4b..bdcf33a 100644
--- a/layouts/eventpost.erb
+++ b/layouts/eventpost.erb
@@ -23,31 +23,33 @@
   <div class="hero-body">
     <div class="container">
       <div class="columns">
-        <div class="column">
-          <p class="title is-1">
-            <b>
-              <%= item[:title] %>
-            </b>
-            <span class="event-social-icons">
-              <% if item[:facebook] %>
-              <a href="<%= item[:facebook] %>">
-                <%= fa :facebook %>
-              </a>
-              <% end %>
-              <a href="<%= item.path rep: :ical %>">
-                <%= fa :calendar %>
-              </a>
-            </span>
-          </p>
-          <p class="subtitle is-3">
-            <%= item[:description] %>
-          </p>
-          <p class="subtitle is-3">
-            <ul class="fa-ul event-attributes">
-              <li><%= fa 'clock-o', li: true %><%= item[:time].strftime '%A %d %B %Y %H:%M' %></li>
-              <li><%= fa 'map-marker', li: true %><%= item[:location] %></li>
-            </ul>
-          </p>
+        <div class="column has-vertical-center">
+          <div class="header-text <%= item[:header_text_background] ? 'light-background' : '' %>">
+            <p class="title is-1">
+              <b>
+                <%= item[:title] %>
+              </b>
+              <span class="event-social-icons">
+                <% if item[:facebook] %>
+                <a href="<%= item[:facebook] %>">
+                  <%= fa :facebook %>
+                </a>
+                <% end %>
+                <a href="<%= item.path rep: :ical %>">
+                  <%= fa :calendar %>
+                </a>
+              </span>
+            </p>
+            <p class="subtitle is-3">
+              <%= item[:description] %>
+            </p>
+            <p class="subtitle is-3">
+              <ul class="fa-ul event-attributes">
+                <li><%= fa 'clock-o', li: true %><%= item[:time].strftime '%A %d %B %Y %H:%M' %></li>
+                <li><%= fa 'map-marker', li: true %><%= item[:location] %></li>
+              </ul>
+            </p>
+          </div>
         </div>
 
         <div class="is-narrow column banner-image">