prettier index

content/assets/stylesheets/includes/tiles.scss

@@ -1,11 +1,18 @@
-.notification.is-info,
-.notification.is-success,
-.notification.is-primary {
-  .content {
-    color: white;
-    h1 {
-      color: white;
-      font-weight: bold;
+a.box {
+  color: #000;
+}
+
+.box {
+  background-color: $box-colour;
+
+  &.highlighted {
+    background-color: $highlighted-box-colour;
+    color: $highlighted-text-colour;
+
+    .content {
+      h1 {
+        color: white;
+      }
     }
   }
 }

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;

content/assets/stylesheets/main.scss

@@ -1,8 +1,5 @@
-$zeus-orange: #FF7F00;
 
-$orange: $zeus-orange;
-$primary: $orange;
-$link-visited: $orange;
+@import "includes/variables";
 
 @import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);
 $family-sans-serif: 'Open Sans', sans-serif;
@@ -14,7 +11,6 @@ $family-sans-serif: 'Open Sans', sans-serif;
   flex: none;
 }
 
-@import "includes/variables";
 @import "includes/cammie";
 @import "includes/events";
 @import "includes/tiles";

content/index.erb

@@ -1,40 +1,36 @@
 <div class="tile is-vertical is-ancestor">
   <div class="tile is-parent is-12">
-    <div class="tile is-child notification is-primary">
-      <%= render '/partials/_tile.*', article: all_events[0] %>
-    </div>
+    <%= render '/partials/_tile.*', article: all_events[0] %>
   </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>
+      <%= render '/partials/_tile.*', article: all_events[1], htmlclass: "highlighted" %>
     </div>
     <div class="tile is-parent is-4">
-      <div class="tile is-child notification is-danger">
+      <div class="tile is-child box highlighted">
         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">
+        <div class="tile is-child box has-text-centered">
           <%= fa 'wikipedia-w' %>
         </div>
       </div>
       <div class="tile is-parent">
-        <div class="tile is-child notification is-warning has-text-centered">
+        <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 notification is-warning has-text-centered">
+        <div class="tile is-child box has-text-centered">
           <%= fa 'github' %>
         </div>
       </div>
       <div class="tile is-parent">
-        <div class="tile is-child notification is-warning has-text-centered">
+        <div class="tile is-child box has-text-centered">
           <%= fa 'facebook-official' %>
         </div>
       </div>
@@ -42,7 +38,7 @@
   </div>
   <div class="tile">
     <div class="tile is-4 is-parent">
-      <div class="tile is-child notification is-success">
+      <div class="tile is-child box">
         <div class="content">
           <h1><%= sorted_articles.first[:title] %></h1>
           <%= sorted_articles.first[:description] %>
@@ -51,7 +47,7 @@
     </div>
     <div class="tile is-vertical">
       <div class="tile is-parent">
-        <div class="tile is-child notification is-primary">
+        <div class="tile is-child box">
           <p>
             Numero uno: @werthen
           </p>
@@ -68,12 +64,12 @@
       </div>
       <div class="tile">
         <div class="tile is-6 is-parent">
-          <div class="tile is-child notification">
+          <div class="tile is-child box">
             GITHUB
           </div>
         </div>
         <div class="tile is-6 is-parent">
-          <div class="tile is-child notification is-info">
+          <div class="tile is-child box">
             GITHUB
           </div>
         </div>

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">