From 2e18e46df0df417fe9bfa91aaf20a5789a7f8be3 Mon Sep 17 00:00:00 2001
From: Lorin Werthen <Lorin.WerthenBrabants@UGent.be>
Date: Tue, 5 Jul 2016 22:38:59 +0200
Subject: [PATCH] hover!

---
 content/index.coffee    | 11 -----------
 content/index.erb       | 26 +++++++++++++-------------
 content/stylesheet.scss | 28 +++++++++++++++++++---------
 3 files changed, 32 insertions(+), 33 deletions(-)

diff --git a/content/index.coffee b/content/index.coffee
index a081956..7faf4b8 100644
--- a/content/index.coffee
+++ b/content/index.coffee
@@ -1,13 +1,2 @@
 $.getJSON 'https://zeus.ugent.be/game/top4/show.json', (data) ->
   $('#top-coder-name').text(data[0].github_name)
-
-$.get 'https://api.github.com/orgs/ZeusWPI/events', (data) ->
-  for e in data
-    $('#github-feed ul').append(
-      $('<li />').append(
-        $('<img />',
-          style: 'width: 50px;',
-          src: e.actor.avatar_url
-        )
-      ).append e.type
-    )
diff --git a/content/index.erb b/content/index.erb
index cbd58c1..d59e7bd 100644
--- a/content/index.erb
+++ b/content/index.erb
@@ -20,68 +20,68 @@
     </header>
     <main>
       <div class="main-event">
-        Main event
+        <img class="pure-img" src="https://zeus.ugent.be/wp-content/uploads/2016/02/battlebots_small.jpg" alt="" />
       </div>
       <div id="all-events">
         <div class="pure-g">
           <div class="pure-u-1-3">
             <div class="event">
-              Lorem ipsum dolor sit amet.
+              <img class="pure-img" src="https://zeus.ugent.be/wp-content/uploads/2016/02/battlebots_small.jpg" alt="" />
             </div>
           </div>
           <div class="pure-u-1-3">
             <div class="event">
-              Lorem ipsum dolor sit amet.
+              <img class="pure-img" src="https://zeus.ugent.be/wp-content/uploads/2016/01/VPW2016.png" alt="" />
             </div>
           </div>
           <div class="pure-u-1-3">
             <div class="event">
-              Lorem ipsum dolor sit amet.
+              <img class="pure-img" src="https://zeus.ugent.be/wp-content/uploads/2016/01/fosdem-2016.jpg" alt="" />
             </div>
           </div>
           <div class="pure-u-1-3">
             <div class="event">
-              Lorem ipsum dolor sit amet.
+              <img class="pure-img" src="https://zeus.ugent.be/wp-content/uploads/2016/01/fosdem-2016.jpg" alt="" />
             </div>
           </div>
           <div class="pure-u-1-3">
             <div class="event">
-              Lorem ipsum dolor sit amet.
+              <img class="pure-img" src="https://zeus.ugent.be/wp-content/uploads/2015/11/eyed_notextinfo.jpg" alt="" />
             </div>
           </div>
           <div class="pure-u-1-3">
             <div class="event">
-              Lorem ipsum dolor sit amet.
+              <img class="pure-img" src="https://zeus.ugent.be/wp-content/uploads/2016/02/battlebots_small.jpg" alt="" />
             </div>
           </div>
           <div class="pure-u-1-3">
             <div class="event">
-              Lorem ipsum dolor sit amet.
+              <img class="pure-img" src="https://zeus.ugent.be/wp-content/uploads/2016/02/battlebots_small.jpg" alt="" />
             </div>
           </div>
           <div class="pure-u-1-3">
             <div class="event">
-              Lorem ipsum dolor sit amet.
+              <img class="pure-img" src="https://zeus.ugent.be/wp-content/uploads/2016/01/VPW2016.png" alt="" />
             </div>
           </div>
           <div class="pure-u-1-3">
             <div class="event">
-              Lorem ipsum dolor sit amet.
+              <img class="pure-img" src="https://zeus.ugent.be/wp-content/uploads/2016/01/fosdem-2016.jpg" alt="" />
             </div>
           </div>
           <div class="pure-u-1-3">
             <div class="event">
-              Lorem ipsum dolor sit amet.
+              <img class="pure-img" src="https://zeus.ugent.be/wp-content/uploads/2016/01/fosdem-2016.jpg" alt="" />
             </div>
           </div>
           <div class="pure-u-1-3">
             <div class="event">
-              Lorem ipsum dolor sit amet.
+              <img class="pure-img" src="https://zeus.ugent.be/wp-content/uploads/2015/11/eyed_notextinfo.jpg" alt="" />
             </div>
           </div>
           <div class="pure-u-1-3">
             <div class="event">
-              Lorem ipsum dolor sit amet.
+              <img class="pure-img" src="https://zeus.ugent.be/wp-content/uploads/2016/02/battlebots_small.jpg" alt="" />
             </div>
           </div>
         </div>
diff --git a/content/stylesheet.scss b/content/stylesheet.scss
index 397abc3..95bda67 100644
--- a/content/stylesheet.scss
+++ b/content/stylesheet.scss
@@ -50,13 +50,9 @@ $navbar-border-color: #CCC;
 }
 
 .main-event {
-  background: #8e9eab; /* fallback for old browsers */
-  background: -webkit-linear-gradient(to left, #8e9eab , #eef2f3); /* Chrome 10-25, Safari 5.1-6 */
-  background: linear-gradient(to left, #8e9eab , #eef2f3); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
-
   height: 250px;
-  padding: 10px;
   margin-bottom: $event-padding;
+  overflow: hidden;
 }
 
 #all-events {
@@ -64,13 +60,27 @@ $navbar-border-color: #CCC;
   margin-right: -10px;
 
   .event {
-    background: #8e9eab; /* fallback for old browsers */
-    background: -webkit-linear-gradient(to left, #8e9eab , #eef2f3); /* Chrome 10-25, Safari 5.1-6 */
-    background: linear-gradient(to left, #8e9eab , #eef2f3); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+    border: 2px solid #DDD;
+    position: relative;
 
-    padding: 10px;
+    overflow: hidden;
 
     height: 200px;
     margin: $event-padding;
+
   }
 }
+
+.event:after {
+  content: '\A';
+  position: absolute;
+  width: 100%; height:100%;
+  top:0; left:0;
+  background:rgba(0,0,0,0.6);
+  opacity: 0;
+  transition: all 0.5s;
+  -webkit-transition: all 0.5s;
+}
+.event:hover:after {
+  opacity: 1;
+}