Merge branch 'master' into wemadeitboyz

2016-09-27 19:13:54 +02:00 · 2016-09-27 19:13:54 +02:00 · c7221bc543
parent 72229dc833 fe9a867932
commit c7221bc543
31 changed files with 539 additions and 300 deletions
--- a/.bundle/config
+++ b/.bundle/config
@ -0,0 +1,2 @@
+---
+BUNDLE_WITHOUT: "production"
--- a/3
+++ b/3
@ -1,7 +1,8 @@
 #!/usr/bin/env ruby
 # frozen_string_literal: true

-deploy_check :elinks
+# Re-enable this when cammie doesn't fuck up so much
+# deploy_check :elinks
 # The w3c validators go offline often, not great for our build CI
 # deploy_check :html
 deploy_check :ilinks
--- a/README.md
+++ b/README.md
@ -28,6 +28,10 @@ For manual deployment, run
 bundle exec nanoc deploy --target public
 ```

+## Posts
+
+Posts should be written in [kramdown](http://kramdown.gettalong.org/index.html), a markdown superset which has a very complete [syntax guide](http://kramdown.gettalong.org/syntax.html).
+
 ## Events

 Example structure:
--- a/18
+++ b/18
@ -45,16 +45,6 @@ compile '/feed.xml' do
  write '/feed.xml'
 end

-#
-# CAMMIE
-#
-compile '/cammie.*' do
-  layout '/default.*'
-  filter :erb
-
-  filter :relativize_paths, type: :html
-end
-
 #
 # ARCHIVES
 #
@ -142,7 +132,7 @@ compile '/assets/stylesheets/**/*.scss' do
  filter :sass, syntax: :scss
 end

-passthrough '/assets/images/*.{png}'
+passthrough '/assets/images/*.{png,svg}'

 #
 #
@ -167,7 +157,11 @@ route '/events/**/*', rep: :ical do
 end

 route '/**/*.{erb,html,md}' do
-  "#{item.identifier.without_ext}.html"
+  if item.identifier.without_ext.to_s =~ %r{/index$}
+    "#{item.identifier.without_ext}.html"
+  else
+    "#{item.identifier.without_ext}/index.html"
+  end
 end

 route '/**/*' do
--- a/content/404.erb
+++ b/content/404.erb
@ -2,7 +2,7 @@
 title: 404 - Page not found
 ---

-<img src="assets/images/404.png" alt="" class="img-center"/>
+<img src="/assets/images/404.png" alt="" class="img-center"/>

 <p class="has-text-centered">
  - Page not found -
--- a/content/assets/scripts/cammie.coffee
+++ b/content/assets/scripts/cammie.coffee
@ -0,0 +1,32 @@
+# Reworked version of the underscorejs debounce
+debounce = (func, wait, initial = () -> ) ->
+  timeout  = false
+  () ->
+    context = this
+    args = arguments
+    later = () ->
+      timeout = null
+      func.apply context, args
+    callNow = !timeout
+    clearTimeout timeout
+    timeout = setTimeout later, wait
+    initial.apply context, args if callNow
+
+# Display controls when moving mouse
+$ "#cammie-ctrls"
+  .mousemove debounce () ->
+      $ this
+        .removeClass 'display'
+    , 3000, () ->
+      $ this
+        .addClass 'display'
+
+# Cammie controls
+$ '.ctrl'
+  .click ->
+    $context = $ this
+    $.ajax "//kelder.zeus.ugent.be/webcam/cgi/ptdc.cgi",
+      data:
+        command: $context.data 'command'
+        posX: $context.data 'x'
+        posY: $context.data 'y'
--- a/content/assets/stylesheets/includes/cammie.scss
+++ b/content/assets/stylesheets/includes/cammie.scss
@ -1,68 +1,52 @@
-#cammie-container {
-  display: flex;
-  justify-content: center;
-
+#cammie-body {
  position: relative;

-  width: 100%;
-}
-
-.fullpage {
-  min-width: 100%;
-  min-height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  background-color: black;
-}
-
-#cammie-section {
-  position: relative;
-  height: 100%;
-  #cammie-body {
-    position: relative;
-    height: 100%;
-  }
-
-  .ctrl {
-    background-color: $cammie-controls-color;
-    color: white;
-    z-index: 100;
-    position: absolute;
-
-    // Chevron centering
+  #cammie-ctrls {
    display: flex;
-    justify-content: center;
-    align-items: center;
+    justify-content: space-between;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;

-    &:hover {
-      background-color: $zeus_orange;
-      z-index: 200;
-      cursor: pointer;
+    transition: opacity 1s ease-in-out;
+    z-index: 5;
+    opacity: 0;
+
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    .columns {
+      margin: 0;
+    }
+
+    .center {
+      flex: 1;
+    }
+
+    &.display {
+      transition: opacity .5s ease-in-out;
+      opacity: 1;
+    }
+
+    .ctrl {
+      height: 100%;
+
+      // Center arrows
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      background-color: $cammie-controls-color;
+      color: white;
+      &:hover {
+        background-color: $zeus_orange;
+        cursor: pointer;
+      }
+
+      &.diag i {
+        transform: rotate(45deg);
+      }
    }
  }
-
-  .left {
-    height: 100%;
-    width: 50px;
-    left: 0;
-  }
-
-  .right {
-    height: 100%;
-    width: 100px;
-    right: 0;
-  }
-
-  .up {
-    height: 100px;
-    width: 100%;
-    top: 0;
-  }
-
-  .down {
-    height: 100px;
-    width: 100%;
-    bottom: 0;
-  }
 }
--- a/content/assets/stylesheets/includes/eventpage.scss
+++ b/content/assets/stylesheets/includes/eventpage.scss
@ -0,0 +1,21 @@
+.google-maps {
+  position: relative;
+  height: 400px;
+  overflow: hidden;
+
+  iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100% !important;
+    height: 400px;
+  }
+}
+
+.banner-image{
+  justify-content: center;
+  display: flex;
+  img{
+    height: 256px;
+  }
+}
--- a/content/assets/stylesheets/includes/events.scss
+++ b/content/assets/stylesheets/includes/events.scss
@ -1,3 +1,86 @@
-.subevent {
-  margin-left: 20px;
+.divider {
+  align-items:flex-start;
+  border: 1px solid lighten(gray, 45%);
+  width: 67%;
+  margin: 0 30% 0 3%;
+}
+
+.box.event-preview {
+  border-radius: 0px;
+  display: flex;
+  box-shadow : none;
+  margin: 0px;
+  padding:20px;
+  padding-top:0px;
+
+  // border-top: 1px solid lighten(gray, 40%);
+
+  .image-holder {
+    //border-radius: 50%;
+    padding: 10px;
+    border: 1px solid lighten(gray, 30%);
+    width: 15%;
+    height: 15%;
+  }
+
+  .image {
+    //border-radius: 50%;
+    vertical-align: baseline;
+    border: 1px solid gray;
+  }
+
+  .info {
+  padding:20px;
+  padding-top:0px;
+    box-shadow : none;
+    width: 60%;
+
+    .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;
+    }
+  }
+
+  .main-event {
+    border-left: 1px solid gray;
+    border-radius: 0px;
+    box-shadow: none;
+    height: 8em;
+    // display: flex;
+    // align-items: center;
+
+    ul {
+      padding-left: .7em;
+    }
+
+    .active {
+      color: #FF7F00;
+    }
+  }
 }
--- a/content/assets/stylesheets/includes/general.scss
+++ b/content/assets/stylesheets/includes/general.scss
@ -1,7 +1,3 @@
-html, body {
-  height: 100%;
-  width: 100%;
-}
 .fa-ul {
  list-style: none !important;

@ -10,12 +6,21 @@ html, body {
  }
 }

+.has-text-justified {
+  text-align: justify;
+}
+

 #navbar {
  align-items: flex-end;

+  #inline-logo {
+    min-width: 38.703px;
+  }
  #logo-link {
    #logo {
+      padding-top: 10px;
+      padding-left: 10px;
      width: 100px;
    }
  }
@ -26,7 +31,7 @@ html, body {
      transition: 0.2s;

      font-variant: small-caps;
-      font-size: 1.25em;
+      font-size: 1.15em;

      &:hover {
        transition: 0.2s;
@ -35,7 +40,8 @@ html, body {
  }
 }

-footer {
+footer.footer {
+  padding-bottom: 40px;
  .fa {
    font-size: inherit;
    text-align: inherit;
--- a/content/assets/stylesheets/includes/tiles.scss
+++ b/content/assets/stylesheets/includes/tiles.scss
@ -1,11 +1,20 @@
-.notification.is-info,
-.notification.is-success,
-.notification.is-primary {
-  .content {
-    color: white;
-    h1 {
-      color: white;
-      font-weight: bold;
+a.box {
+  color: #000;
+}
+
+#homepage {
+  .box {
+    background-color: $box-colour;
+
+    &.highlighted {
+      background-color: $highlighted-box-colour;
+      color: $highlighted-text-colour;
+
+      .content {
+        h1 {
+          color: white;
+        }
+      }
    }
  }
 }
--- a/content/assets/stylesheets/includes/variables.scss
+++ b/content/assets/stylesheets/includes/variables.scss
@ -1,6 +1,17 @@
-$zeus_orange: #FF7F00;
-$event-padding: 10px;
+// Colours
+$zeus-orange: #FF7F00;
 $navbar-border-color: #CCC;
 $event-border-color: #DDD;
+$orange: $zeus-orange;
+$primary: $orange;
+
+$link-visited: inherit;
+
+$box-colour: #EEE;
+$highlighted-box-colour: $zeus-orange;
+$highlighted-text-colour: white;
+$highlighted-link-colour: #222324;

 $cammie-controls-color: rgba(0, 0, 0, 0.60);
+
+$event-padding: 10px;
--- a/content/assets/stylesheets/main.scss
+++ b/content/assets/stylesheets/main.scss
@ -1,12 +1,8 @@
-$zeus-orange: #FF7F00;

-$orange: $zeus-orange;
-$primary: $orange;
-$link-visited: $orange;
-
-@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);
-$family-sans-serif: 'Open Sans', sans-serif;
+@import "includes/variables";

+@import 'https://fonts.googleapis.com/css?family=Lato:300,400';
+$family-sans-serif: 'Lato', sans-serif;

@import "../../../node_modules/bulma/bulma";

@ -14,11 +10,23 @@ $family-sans-serif: 'Open Sans', sans-serif;
  flex: none;
 }

-@import "includes/variables";
+// Sticky footer
+body.site {
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+
+  .wrapper {
+    flex: 1;
+  }
+}
+
+
@import "includes/cammie";
@import "includes/events";
@import "includes/tiles";
@import "includes/blogpost";
@import "includes/general";
+@import "includes/eventpage";
@import "includes/404";
@import "includes/projects";
--- a/content/cammie.erb
+++ b/content/cammie.erb
@ -2,74 +2,60 @@
 navigable: true
 title: Cammie
 ---
-
-<section id="cammie-section" class="hero is-fullheight">
-  <!-- Hero header: will stick at the top -->
-  <div class="hero-head">
-    <%= render '/partials/_navbar.*' %>
-  </div>
-
-  <!--
+<section id="cammie-section">
  <div id="cammie-body">
-    <div id="left" class="ctrl">
-      <%= fa 'chevron-left', size: '2x' %>
-    </div>
-
-    <div id="right" class="ctrl">
-      <%= fa 'chevron-right', size: '2x' %>
-    </div>
-
-    <div id="up" class="ctrl">
-      <%= fa 'chevron-up', size: '2x' %>
-    </div>
-
-    <div id="down" class="ctrl">
-      <%= fa 'chevron-down', size: '2x' %>
-    </div>
-  </div>
-  -->
-
-  <div id="cammie-body">
-    <div class="columns">
-      <div class="column">
-        <div class="ctrl left">
-          diag up left
+    <img id="cammie-feed" src="https://kelder.zeus.ugent.be/webcam/video/mjpg.cgi?profileid=2">
+    <div id="cammie-ctrls">
+      <div class="columns">
+        <div class="column is-1 ctrl diag left" data-command="set_relative_pos" data-x="-10" data-y="10">
+          <%= fa 'chevron-circle-left' %>
+        </div>
+        <div class="column ctrl center" data-command="set_relative_pos" data-x="0" data-y="10">
+          <%= fa 'chevron-circle-up' %>
+        </div>
+        <div class="column is-1 ctrl diag right" data-command="set_relative_pos" data-x="10" data-y="10">
+          <%= fa 'chevron-circle-up' %>
        </div>
      </div>
-      <div class="column">
-        <div class="ctrl up">
-          up
+
+      <div class="columns center">
+        <div class="column is-1 ctrl left" data-command="set_relative_pos" data-x="-10" data-y="0">
+          <%= fa 'chevron-circle-left' %>
+        </div>
+        <div class="column">
+        <!-- blank space -->
+        </div>
+        <div class="column is-1 ctrl right" data-command="set_relative_pos" data-x="10" data-y="0">
+          <%= fa 'chevron-circle-right' %>
        </div>
      </div>
-      <div class="column">
-        <div class="ctrl right">
-          diag up right
+
+      <div class="columns">
+        <div class="column is-1 ctrl diag left" data-command="set_relative_pos" data-x="-10" data-y="-10">
+          <%= fa 'chevron-circle-down' %>
+        </div>
+        <div class="column ctrl center" data-command="set_relative_pos" data-x="0" data-y="-10">
+          <%= fa 'chevron-circle-down' %>
+        </div>
+        <div class="column is-1 ctrl diag right" data-command="set_relative_pos" data-x="10" data-y="-10">
+          <%= fa 'chevron-circle-right' %>
        </div>
      </div>
    </div>
-    <div class="columns cammie-ctrls">
-      <div class="column ctrl left">left</div>
-      <div class="column ctrl center">home?</div>
-      <div class="column ctrl right">right</div>
-    </div>
-    <div class="columns cammie-ctrls">
-      <div class="column ctrl left">diag down left</div>
-      <div class="column ctrl center">down</div>
-      <div class="column ctrl right">diag down right</div>
-    </div>
-  </div>
-  <!-- Hero footer: will stick at the bottom -->
-  <div class="hero-foot">
-    <nav class="tabs is-boxed is-fullwidth">
-      <div class="container">
-        <ul>
-          <li><a>Kleine Tafel</a></li>
-          <li><a>Grote Tafel</a></li>
-          <li><a>Zetel</a></li>
-        </ul>
-      </div>
-    </nav>
  </div>
+  <nav class="nav">
+    <div class="nav-center">
+      <button class="button ctrl" href="#" data-command="set_pos" data-x="0" data-y="12">
+        Kleine tafel
+      </button>
+      <button class="button ctrl" href="#" data-command="set_pos" data-x="50" data-y="10">
+        Grote tafel
+      </button>
+      <button class="ctrl button" href="#" data-command="set_pos" data-x="50" data-y="22">
+        Zetel
+      </button>
+    </div>
+  </nav>
 </section>


--- a/content/events.erb
+++ b/content/events.erb
@ -9,17 +9,13 @@ title: Events
  </div>

  <% all_events.each do |event| %>
-  <div class="box">
-    <a href="<%= relative_path_to(event) %>">
-      <%= event[:title] %>
-    </a>
-    <% sub_events(event).each do |sub_event| %>
-    <div class="subevent">
-      <a href="<%= relative_path_to(sub_event) %>">
-        <%= sub_event[:title] %>
-      </a>
-    </div>
+    <!-- <hr class="divider"> -->
+    <% if (sub_events(event)).empty? %>
+      <%= render '/partials/_event_preview.*', event: event %>
+    <% else %>
+      <% sub_events(event).each do |sub_event| %>
+        <%= render '/partials/_event_preview.*', event: sub_event, main_event: event %>
+      <% end %>
    <% end %>
-  </div>
  <% end %>
 </div>
--- a/content/events/15-16/awk.md
+++ b/content/events/15-16/awk.md
@ -5,6 +5,8 @@ description: Een AWK-les voor AWK gerelateerde dingen
 created_at: 01-02-2016
 time: 23-02-2016
 location: Auditorium A1, Campus Sterre, Gebouw S9
+locationlink: Zeus WPI,Ghent Belgium
+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**.
--- a/content/events/15-16/bottlebats/intro.md
+++ b/content/events/15-16/bottlebats/intro.md
@ -2,4 +2,5 @@
 title: Bottle Bats Introductie
 time: 12-3-16
 location: Grace Hopper
+description: Dit is een description!
 ---
--- a/content/events/15-16/bottlebats/test.md
+++ b/content/events/15-16/bottlebats/test.md
@ -0,0 +1,6 @@
+---
+title: test
+time: 12-3-16
+location: Grace Hopper
+description: Dit is een description!
+---
--- a/content/events/16-17/LAN.md
+++ b/content/events/16-17/LAN.md
@ -0,0 +1,15 @@
+---
+title: Geeks, Attack! V
+banner: https://scontent.xx.fbcdn.net/v/t1.0-9/13903431_1277596932251344_3927837466166230371_n.jpg?oh=bdda0d18a635c49893a097fba6aa99b9&oe=587C7886
+description: Zeus' vijfde LAN-Party
+created_at: 13-09-2016
+time: 4-11-2016
+location: Therminal, Hoveniersberg 24 9000 Gent
+locationlink: Therminal,Ghent Belgium
+description: Zeus' vijfde LAN-Party
+---
+
+De vijfde editie van Zeus WPI's LAN-Party komt eraan!
+Hou alvast de datum vrij!
+
+Wij houden jullie op de hoogte!
--- a/content/index.erb
+++ b/content/index.erb
@ -1,80 +1,84 @@
-<div class="tile is-vertical is-ancestor">
-  <div class="tile is-parent is-12">
-    <div class="tile is-child notification is-primary">
+<% content_for :head do %>
+<META NAME="Title" CONTENT="Zeus WPI: Werkgroep informatica van de Universiteit Gent">
+<META NAME="Keywords" CONTENT="zeus wpi, informatica, universiteit gent">
+<META NAME="Description" CONTENT="Studentenvereniging van de informatica aan de Universiteit Gent. Informatie over o.a. Linux (downloads en lessen), programmeren, en internetbeveiliging.">
+<% end %>
+
+<div id="homepage">
+  <div class="tile is-vertical is-ancestor">
+    <div class="tile is-parent is-12">
      <%= render '/partials/_tile.*', article: all_events[0] %>
    </div>
-  </div>
-  <div class="tile">
-    <div class="tile is-parent is-4">
-      <div class="tile is-child notification is-info">
-        <%= render '/partials/_tile.*', article: all_events[1] %>
+    <div class="tile">
+      <div class="tile is-parent is-4">
+        <%= render '/partials/_tile.*', article: all_events[1], htmlclass: "highlighted" %>
      </div>
-    </div>
-    <div class="tile is-parent is-4">
-      <div class="tile is-child notification is-danger">
-        IDK LOL
-      </div>
-    </div>
-    <div class="tile is-vertical is-2">
-      <div class="tile is-parent">
-        <div class="tile is-child notification is-warning has-text-centered">
-          <%= fa 'wikipedia-w' %>
+      <div class="tile is-parent is-4">
+        <div class="tile is-child box highlighted">
+          IDK LOL
        </div>
      </div>
-      <div class="tile is-parent">
-        <div class="tile is-child notification is-warning has-text-centered">
-          <%= fa 'video-camera' %>
-        </div>
-      </div>
-    </div>
-    <div class="tile is-vertical is-2">
-      <div class="tile is-parent">
-        <div class="tile is-child notification is-warning has-text-centered">
-          <%= fa 'github' %>
-        </div>
-      </div>
-      <div class="tile is-parent">
-        <div class="tile is-child notification is-warning has-text-centered">
-          <%= fa 'facebook-official' %>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="tile">
-    <div class="tile is-4 is-parent">
-      <div class="tile is-child notification is-success">
-        <div class="content">
-          <h1><%= sorted_articles.first[:title] %></h1>
-          <%= sorted_articles.first[:description] %>
-        </div>
-      </div>
-    </div>
-    <div class="tile is-vertical">
-      <div class="tile is-parent">
-        <div class="tile is-child notification is-primary">
-          <p>
-            Numero uno: @werthen
-          </p>
-          <p>
-            Numero dos: @myncke
-          </p>
-          <p>
-            Numero tres: @iepoev
-          </p>
-          <p>
-            Numero quatro: @becousae
-          </p>
-        </div>
-      </div>
-      <div class="tile">
-        <div class="tile is-6 is-parent">
-          <div class="tile is-child notification">
-            GITHUB
+      <div class="tile is-vertical is-2">
+        <div class="tile is-parent">
+          <div class="tile is-child box has-text-centered">
+            <%= fa 'wikipedia-w' %>
          </div>
        </div>
-        <div class="tile is-6 is-parent">
-          <div class="tile is-child notification is-info">
-            GITHUB
+        <div class="tile is-parent">
+          <div class="tile is-child box has-text-centered">
+            <%= fa 'video-camera' %>
+          </div>
+        </div>
+      </div>
+      <div class="tile is-vertical is-2">
+        <div class="tile is-parent">
+          <div class="tile is-child box has-text-centered">
+            <%= fa 'github' %>
+          </div>
+        </div>
+        <div class="tile is-parent">
+          <div class="tile is-child box has-text-centered">
+            <%= fa 'facebook-official' %>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="tile">
+      <div class="tile is-4 is-parent">
+        <div class="tile is-child box">
+          <div class="content">
+            <h1><%= sorted_articles.first[:title] %></h1>
+            <%= sorted_articles.first[:description] %>
+          </div>
+        </div>
+      </div>
+      <div class="tile is-vertical">
+        <div class="tile is-parent">
+          <div class="tile is-child box">
+            <p>
+              Numero uno: @werthen
+            </p>
+            <p>
+              Numero dos: @myncke
+            </p>
+            <p>
+              Numero tres: @iepoev
+            </p>
+            <p>
+              Numero quatro: @becousae
+            </p>
+          </div>
+        </div>
+        <div class="tile">
+          <div class="tile is-6 is-parent">
+            <div class="tile is-child box">
+              GITHUB
+            </div>
+          </div>
+          <div class="tile is-6 is-parent">
+            <div class="tile is-child box">
+              GITHUB
+            </div>
          </div>
        </div>
      </div>
--- a/content/posts/15-16/bestuur2016.md
+++ b/content/posts/15-16/bestuur2016.md
@ -0,0 +1,17 @@
+---
+title: Bestuur 2016-2017
+created_at: 01-04-2016
+description: Het nieuwe bestuur is verkozen!
+---
+
+Zoals reeds bekend gemaakt op onze [Facebook-pagina](https://www.facebook.com/zeus.wpi/) is het nieuwe bestuur voor academiejaar 2016-2017 verkozen!
+
+| Voorzitter           | Wout Schellaert              |
+| Vicevoorzitter       | Isaura Claeys                |
+| Penningmeester       | Jeroen De Clerck             |
+| Event Manager        | Eloïse Piret                 |
+| Systeemadministrator | Rien Maertens, Lorin Werthen |
+| Project Manager      | Feliciaan De Palmenaer       |
+{: .table }
+
+**We wensen ze veel succes!**
--- a/content/posts/15-16/xtext.md
+++ b/content/posts/15-16/xtext.md
@ -1,16 +0,0 @@
---
-title: Xtext Workshop
-created_at: 01-04-2016
-description: Xtext is een ding, en heeft een workshop
---
-
-Op **26 april om 18:00 in Auditorium A2, Campus Sterre, Gebouw S9** organiseren we een workshop over [Xtext](https://eclipse.org/Xtext/). **Xtext** is een framework om nieuwe domein-specifieke computertalen (**DSLs**) mee te ontwerpen. Een **DSL** kan een nieuwe programmeertaal zijn, maar is meestal erg specifiek: bijvoorbeeld voor het besturen van robots, voor controle van wasmachines of voor sturing van de on-board computer in auto’s. Mensen die deze machines maken zijn vaak geen programmeurs, en zij kunnen veel vlotter werken met een DSL dan met een algemene programmeertaal.
-
-Met **Xtext** maak je **je eigen taal, de compiler en de ontwikkelomgeving in één keer.**
-
-In deze workshop geven wij in samenwerking met [**Sigasi**](http://www.sigasi.com/) eerst een overzicht over waarom je een DSL wil gebruiken en hoe Xtext werkt. Vervolgens demonstreren we Xtext met een eenvoudig voorbeeld.
-
-Daarna kan je zelf een Eclipse plugin ontwikkelen met behulp van Xtext voor je eigen DSL. Wij zijn er om jullie te helpen.
-
-_Over Sigasi:
-Sigasi is een Gentse Startup die Xtext gebruikt voor de ontwikkeling van Eclipse plugins voor VHDL en Verilog. Dit zijn talen die gebruikt worden voor het ontwerpen en testen van chips._
--- a/layouts/default.erb
+++ b/layouts/default.erb
@ -7,8 +7,14 @@
    <title>
      Zeus WPI | <%= item[:title] || 'Werkgroep Informatica van de Universiteit Gent' %>
    </title>
+
+    <!-- Font Awesome -->
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">

+    <!-- Fira Sans -->
+    <link rel="stylesheet" href="https://code.cdn.mozilla.net/fonts/fira.css">
+
+
    <%= asset :css, :main %>

    <link rel="icon" href="/assets/images/favicon32.png" type="image/x-icon" />
@ -32,7 +38,10 @@

    <%= content_for(@item, :head) %>
  </head>
-  <body>
-    <%= yield %>
+  <body class="site">
+    <div class="wrapper">
+      <%= yield %>
+    </div>
+    <%= render '/partials/_footer.*' %>
  </body>
 </html>
--- a/layouts/eventpost.erb
+++ b/layouts/eventpost.erb
@ -5,42 +5,55 @@
 <meta property="og:url" content="<%= url_for(item) %>" />
 <% end %>

-<section class="hero is-medium is-info">
+<section class="hero is-medium is-info is-bold">
  <div class="hero-head">
-    <%= render '/partials/_navbar.*' %>
+    <%= render '/partials/_navbar.*', zeus_logo_color: :white %>
  </div>
-  <div class="hero-body">
+  <div class="hero-body ">
+
    <div class="container">
-      <h1 class="title">
-        <%= item[:title] %>
-      </h1>
-      <h2 class="subtitle">
-        <ul class="fa-ul">
-          <li><%= fa 'clock-o', li: true %><%= item[:time] %></li>
-          <li><%= fa 'globe', li: true %><%= item[:location] %></li>
-        </ul>
-      </h2>
+      <div class="columns">
+
+        <div class="column">
+          <p class="title is-1">
+          <b>
+            <%= item[:title] %>
+          </b>
+          </p>
+          <p class="subtitle is-3">
+          <%= item[:description] %>
+          </p>
+          <p class="subtitle is-3">
+          <ul class="fa-ul">
+            <li><%= fa 'clock-o', li: true %><%= item[:time] %></li>
+            <li><%= fa 'globe', li: true %><%= item[:location] %></li>
+          </ul>
+          </p>
+        </div>
+
+        <div class="is-narrow column banner-image">
+          <img src=<%= item[:banner] %>  >
+        </div>
+
+      </div>
    </div>
  </div>
 </section>

 <section class="section">
  <div class="columns">
-    <!--
-    <div id="event-info" class="column">
-      <div class="box">
-        <ul class="fa-ul">
-          <li><%= fa 'clock-o', li: true %><%= item[:time] %></li>
-          <li><%= fa 'globe', li: true %><%= item[:location] %></li>
-        </ul>
-      </div>
-    </div>
-    -->
    <div class="column is-8 is-offset-2">
-
-      <div class="content">
+      <div class="content has-text-justified">
        <%= yield %>
      </div>
    </div>
  </div>
+  <div class="columns">
+    <div class="google-maps column is-8 is-offset-2">
+      <iframe
+        frameborder="0" style="border:0"
+        src="<%= locationlink item[:locationlink] %>" allowfullscreen>
+      </iframe>
+    </div>
+  </div>
 </section>
--- a/layouts/generic.erb
+++ b/layouts/generic.erb
@ -6,18 +6,3 @@
    <%= yield %>
  </main>
 </div>
-<footer class="footer">
-  <div class="container">
-    <div class="content has-text-centered">
-      <p>
-        Made with <%= fa :heart, inline: true %> by Zeus WPI
-      </p>
-      <p>
-        <a href="https://github.com/ZeusWPI/zeus.ugent.be">
-          <span class="hidden-xs"> View on GitHub </span>
-          <%= fa :github %>
-        </a>
-      </p>
-    </div>
-  </div>
-</footer>
--- a/layouts/partials/_event_preview.erb
+++ b/layouts/partials/_event_preview.erb
@ -0,0 +1,39 @@
+<div class="box event-preview">
+  <div class="image-holder">
+    <img src="<%= event[:banner]%>" 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>
+  </div>
+
+  <% if @main_event %>
+    <div class="box main-event">
+      <p>
+        <%= main_event[:title] %>
+      </p>
+      <ul>
+        <% sub_events(main_event).each do |sub_event| %>
+          <li class="<%= "active" if sub_event[:title] == (event[:title])%>" >
+            <%= sub_event[:title] %>
+          </li>
+        <% end %>
+      </ul>
+    </div>
+  <% end %>
+</div>
--- a/layouts/partials/_footer.erb
+++ b/layouts/partials/_footer.erb
@ -0,0 +1,15 @@
+<footer class="footer">
+  <div class="container">
+    <div class="content has-text-centered">
+      <p>
+        Made with <%= fa :heart, inline: true %> by Zeus WPI
+      </p>
+      <p>
+        <a href="https://github.com/ZeusWPI/zeus.ugent.be">
+          <span class="hidden-xs"> View on GitHub </span>
+          <%= fa :github %>
+        </a>
+      </p>
+    </div>
+  </div>
+</footer>
--- a/layouts/partials/_navbar.erb
+++ b/layouts/partials/_navbar.erb
@ -2,12 +2,15 @@
  <div class="columns">
    <div class="column is-narrow is-hidden-mobile">
      <a id="logo-link" href="/">
-        <img id="logo" src="https://zeus.ugent.be/wp-content/uploads/2009/05/logo-new.png" alt="" />
+        <img id="logo" src="<%= zeus_logo_url color: @zeus_logo_color %>" alt="" />
      </a>
    </div>
    <div class="column">
      <nav class="nav">
          <div class="nav-left">
+            <a class="is-hidden-tablet nav-item" href="/">
+              <img id="inline-logo" src="<%= zeus_logo_url color: @zeus_logo_color %>" alt="" />
+            </a>
            <% nav_items do |item, active| %>
            <a class="nav-item is-tab <%= 'is-active' if active %>" href="<%= relative_path_to(item) %>">
              <%= item[:title] %>
--- a/layouts/partials/_tile.erb
+++ b/layouts/partials/_tile.erb
@ -1,4 +1,4 @@
-<a href="<%= relative_path_to(@article) %>">
+<a href="<%= relative_path_to(@article) %>" class="tile is-child box <%= @htmlclass %>">
  <div class="main-tile">
    <div class="content">
      <div class="columns">
--- a/lib/helpers/assets.rb
+++ b/lib/helpers/assets.rb
@ -6,4 +6,8 @@ module AssetHelper
      css: "<link rel='stylesheet' type='text/css' href='/assets/stylesheets/#{identifier}.css'>"
    }[type]
  end
+
+  def zeus_logo_url(color: :black)
+    "https://werthen.com/zinc/zeuslogo.svg?color=#{color}"
+  end
 end
--- a/lib/helpers/events.rb
+++ b/lib/helpers/events.rb
@ -1,3 +1,4 @@
+require 'uri'
 module EventsHelper
  def all_events
    @items.find_all('/events/*/*') + grouped_events
@ -17,4 +18,8 @@ module EventsHelper
      []
    end
  end
+
+  def locationlink(location)
+    "https://www.google.com/maps/embed/v1/place?key=AIzaSyBDTmw7LtDG28o9QjCnNucAJv2zTZpLjJU&q=#{URI.escape(location)}" if location
+  end
 end