scss and talk to gamification api

.gitignore

@@ -11,3 +11,5 @@ tmp/
 crash.log
 
 .idea/
+
+.sass-cache/

Gemfile

@@ -7,6 +7,7 @@ ruby '2.3.1'
 gem 'nanoc'
 gem 'kramdown'
 gem 'coffee-script'
+gem 'sass'
 
 group :development do
   gem 'adsf'

Gemfile.lock

@@ -50,6 +50,7 @@ GEM
     rb-inotify (0.9.7)
       ffi (>= 0.5.0)
     ruby_dep (1.3.1)
+    sass (3.4.22)
     shellany (0.0.1)
     slop (3.6.0)
     thor (0.19.1)
@@ -63,6 +64,7 @@ DEPENDENCIES
   guard-nanoc
   kramdown
   nanoc
+  sass
 
 RUBY VERSION
    ruby 2.3.1p112

Rules

@@ -15,6 +15,11 @@ compile '/**/*.coffee' do
   write "#{item.identifier.without_ext}.js"
 end
 
+compile '/**/*.scss' do
+  filter :sass, syntax: :scss
+  write "#{item.identifier.without_ext}.css"
+end
+
 # Markdown
 compile '/**/*.md' do
   filter :kramdown

content/index.coffee

@@ -1,6 +1,8 @@
+$.getJSON 'http://cors.io/?u=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
-    console.log e
     $('#github-feed ul').append(
       $('<li />').append(
         $('<img />',

content/index.erb

@@ -2,8 +2,8 @@
   <img id="logo" src="http://i.imgur.com/W5d4B8E.png" alt="" />
   <div class="pure-u-3-4">
   </div>
-  <div class="pure-u-1-4">
+  <div id="top-coder" class="pure-u-1-4">
-    #1 CODER ON GAMIFICATION
+    <span id="top-coder-name"></span> is awesome!
   </div>
 </header>
 

content/stylesheet.scss

@@ -1,10 +1,12 @@
+$zeus_orange: rgb(255, 109, 0);
+
 header {
     position: absolute;
     top: 0;
     height: 75px;
     line-height: 75px;
 
-    background-color: rgb(255, 109, 0);
+    background-color: $zeus_orange;
     color: white;
 
     width: 100%;