make life easier when a light background is used in events

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;
+}

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

layouts/eventpost.erb

@@ -23,7 +23,8 @@
   <div class="hero-body">
     <div class="container">
       <div class="columns">
-        <div class="column">
+        <div class="column has-vertical-center">
+          <div class="header-text <%= item[:header_text_background] ? 'light-background' : '' %>">
             <p class="title is-1">
               <b>
                 <%= item[:title] %>
@@ -49,6 +50,7 @@
               </ul>
             </p>
           </div>
+        </div>
 
         <div class="is-narrow column banner-image">
           <img src="<%= item[:image] %>"  >