more show, less tell

content/assets/stylesheets/includes/general.scss

@@ -224,3 +224,11 @@ footer.footer {
     font-size: $size-small;
   }
 }
+
+.has-all-small-caps {
+  font-variant: all-small-caps;
+}
+
+.has-small-caps {
+  font-variant: small-caps;
+}

content/assets/stylesheets/includes/tiles.scss

@@ -69,6 +69,7 @@ $top_coder_size: 80px;
 }
 
 #gamification-coders {
+  font-variant: all-small-caps;
   display: flex;
 
   justify-content: center;
@@ -150,3 +151,23 @@ $top_coder_size: 80px;
 .backgroundimg{
   background-position: center;
 }
+
+.gamification-tile {
+  overflow: hidden;
+  padding: 0;
+
+  .tile-header {
+    background-color: $primary;
+    padding: 20px;
+    h1 {
+      margin: 0;
+    }
+    a, a:visited {
+      color: white;
+    }
+  }
+
+  #gamification-coders {
+    padding: 20px;
+  }
+}

content/index.erb

@@ -14,13 +14,15 @@
       <div class="tile">
         <!--top coders -->
         <div class="tile is-parent is-4">
-          <div class="tile is-child box ">
+          <div class="tile is-child box gamification-tile">
             <div class="content">
-              <h1 class="has-text-centered">
+              <div class="tile-header">
-                <a href="https://zeus.ugent.be/game">
+                <h1 class="has-text-centered">
-                  Top coders this week
+                  <a href="https://zeus.ugent.be/game">
-                </a>
+                    <i class="fa fa-trophy" aria-hidden="true"></i>
-              </h1>
+                  </a>
+                </h1>
+              </div>
               <div id="gamification-coders" >
                 <!-- EMPTY -->
               </div>