take comments into account

Gemfile

@@ -22,6 +22,7 @@ group :development do
   gem 'highline'
   gem 'terminal-notifier'
   gem 'terminal-notifier-guard'
+  gem 'nanoc-live'
 end
 
 group :production do

Gemfile.lock

@@ -11,6 +11,12 @@ GEM
       public_suffix (>= 2.0.2, < 5.0)
     adsf (1.4.5)
       rack (>= 1.0.0, < 3.0.0)
+    adsf-live (1.4.5)
+      adsf (~> 1.3)
+      em-websocket (~> 0.5)
+      eventmachine (~> 1.2)
+      listen (~> 3.0)
+      rack-livereload (~> 0.3)
     autoprefixer-rails (10.2.4.0)
       execjs
     builder (3.2.4)
@@ -24,6 +30,10 @@ GEM
     ddmetrics (1.0.1)
     ddplugin (1.0.3)
     diff-lcs (1.4.4)
+    em-websocket (0.5.2)
+      eventmachine (>= 0.12.9)
+      http_parser.rb (~> 0.6.0)
+    eventmachine (1.2.7)
     execjs (2.7.0)
     ffi (1.14.2)
     formatador (0.2.5)
@@ -46,6 +56,7 @@ GEM
       concurrent-ruby (~> 1.0)
     highline (2.0.3)
     htmlcompressor (0.4.0)
+    http_parser.rb (0.6.0)
     icalendar (2.7.0)
       ice_cube (~> 0.16)
     ice_cube (0.16.3)
@@ -95,6 +106,11 @@ GEM
       nanoc-checking (~> 1.0)
       nanoc-cli (~> 4.11, >= 4.11.15)
       nanoc-core (~> 4.11, >= 4.11.15)
+    nanoc-live (1.0.0)
+      adsf-live (~> 1.4)
+      listen (~> 3.0)
+      nanoc-cli (~> 4.11, >= 4.11.14)
+      nanoc-core (~> 4.11, >= 4.11.14)
     nenv (0.3.0)
     nio4r (2.5.5)
     nokogiri (1.11.1)
@@ -115,6 +131,8 @@ GEM
       nio4r (~> 2.0)
     racc (1.5.2)
     rack (2.2.3)
+    rack-livereload (0.3.17)
+      rack
     rainpress (1.0.1)
     rb-fsevent (0.10.4)
     rb-inotify (0.10.1)
@@ -160,6 +178,7 @@ DEPENDENCIES
   kramdown
   mini_racer
   nanoc
+  nanoc-live
   pandoc-ruby
   puma
   rainpress

content/assets/stylesheets/includes/general.scss

@@ -225,9 +225,9 @@ footer.footer {
 }
 
 .underline--magical {
-  background-image: -webkit-linear-gradient(to right, #F09819, #FF512F);  /* Chrome 10-25, Safari 5.1-6 */
+  background-image: -webkit-linear-gradient(to right,  $zeus-orange, #FFFFFF);  /* Chrome 10-25, Safari 5.1-6 */
-  background-image: linear-gradient(to right, #F09819, #FF512F); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+  background-image: linear-gradient(to right, $zeus-orange, #FFFFFF); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
   background-repeat: no-repeat;
-  background-size: 100% 0.2em;
+  background-size: 100% 0.15em;
-  background-position: 0 88%;
+  background-position: 0 99%;
 }

content/index.erb

@@ -18,50 +18,30 @@
       <%= render '/tiles/blokmap.*' %>
     <% end %>
     <!--next event -->
-    <% unless upcoming_events.empty? %>
     <div class="tile is-parent">
       <div class="tile is-child">
-          <div class="block">
+        <div class="block has-text-centered">
-            <span class="title is-1 underline--magical">Upcoming Events</span>
+          <span class="title is-2 underline--magical">Upcoming Events</span>
         </div>
+        <% unless upcoming_events.empty? %>
           <% upcoming_events.each do |event| %>
             <div class="block">
               <%= render '/partials/_events_tile.*', event: event %>
             </div>
           <% end %>
-        </div>
+        <% else %>
+          <div class="block content has-text-centered">
+            There are currently no upcoming events. If you have a suggestion, let us know on mattermost in <a href="https://mattermost.zeus.gent/zeus/channels/events">~events</a>!
+            <hr>
           </div>
         <% end %>
+      </div>
+    </div>
     <div class="tile">
       <div class="tile is-parent">
         <div class="tile is-child">
-          <div class="block">
+          <div class="block has-text-centered">
-            <span class="title is-1 underline--magical">Previous Events</span>
+            <span class="title is-2 underline--magical">Top Coders</span>
-          </div>
-          <% previous_events[0..3].each do |event| %>
-            <div class="block">
-              <%= render '/partials/_events_tile.*', event: event %>
-            </div>
-          <%end%>
-        </div>
-      </div>
-      <div class="tile is-parent">
-        <div class="tile is-child">
-          <div class="block">
-            <span class="title is-1 underline--magical">Blogposts</span>
-          </div>
-          <% sorted_articles[0..3].each do |post| %>
-            <%= render '/partials/_blog_preview.*', post: post %>
-          <%end%>
-        </div>
-      </div>
-    </div>
-    <div class="tile">
-      <!--top coders -->
-      <div class="tile is-parent">
-        <div class="tile is-child">
-          <div class="block">
-            <span class="title is-1 underline--magical">Top Coders</span>
           </div>
           <div class="box gamification-tile">
             <div class="content">
@@ -77,6 +57,43 @@
               </div>
             </div>
           </div>
+
+
+          <div class="block has-text-centered">
+            <span class="title is-2 underline--magical">Previous Events</span>
+          </div>
+          <% previous_events[0..3].each do |event| %>
+            <div class="block">
+              <%= render '/partials/_events_tile.*', event: event %>
+            </div>
+          <%end%>
+        </div>
+      </div>
+      <div class="tile is-parent">
+        <div class="tile is-child">
+          <div class='content has-text-centered box'>
+            <h2>About Zeus WPI</h2>
+            <p>
+            Zeus WPI is the student association for Computer Science at Ghent University. Our goal is to provide a stimulating environment for motivated students looking to expand their skills by engaging in interesting real-world projects.
+            </p>
+
+            <p>
+            We organize various tech related talks by experts (eg. professors, PhD's, Richard Stallman, Julia Reda, ...), hands-on coding events and introductory lectures for cool technologies. Together we build interesting applications for Ghent University students (Hydra), for FaculteitenKonvent and 12urenloop, and ofcourse for ourselves. 
+            </p>
+          </div>
+          <div class="block has-text-centered">
+            <span class="title is-2 underline--magical">Blogposts</span>
+          </div>
+          <% sorted_articles[0..3].each do |post| %>
+            <%= render '/partials/_blog_preview.*', post: post %>
+          <%end%>
+        </div>
+      </div>
+    </div>
+    <div class="tile">
+      <!--top coders -->
+      <div class="tile is-parent">
+        <div class="tile is-child">
         </div>
       </div>
     </div>