Html improvements:

- Use partial instead of inline
- Correct background colour if event has none
- Don't use <i> tag, use <em>
- Use UTF8 ™ character

layouts/events.erb

@@ -57,33 +57,22 @@
       <div class="content has-text-centered">
         <h1>Sorry.</h1>
         <h2>No events planned yet this year.</h2>
-        <h4 class="has-text-grey"><i>Soon TM.<i></h4>
+        <h4 class="has-text-grey"><em>Soon™.</em></h4>
       </div>
     <% end %>
   </div>
 
-  <% unless soon_events().empty? %>
+  <% unless soon_events.empty? %>
     <div class="column is-3 is-narrow">
       <div class="menu">
         <div class="content">
           <h1>
-            Soon TM.
+            Soon™
           </h1>
         </div>
-        <% soon_events().each do |event| %>
+        <% soon_events.each do |event| %>
-            <div class="tile box highlighted"
+          <%= render '/partials/_soon_tile.*', event: event %>
-              <% if event[:color] %>
+        <% end %>
-    style="background-image: linear-gradient(to top right,rgba(255,255,255,0),rgba(0,0,0,.60)); background-color:<%= event[:color] %>;"
-              <% else %>
-    style="background-image: linear-gradient(to top right,rgba(255,255,255,0),rgba(0,0,0,.60)); background-color:'light-grey';"
-              <% end %>
-            >
-              <div class="content event-content has-text-centered">
-                <h3 style="color: white;"><%= event[:title] %></h3>
-                <p><%= event[:description] %></p>
-              </div>
-            </div>
-          <% end %>
       </div>
     </div>
   <% end %>

layouts/partials/_soon_tile.erb

@@ -1,33 +1,17 @@
-<% if @event[:banner] %>
+<div class="tile box highlighted"
-  <a href="<%= @event.path %>" class="tile event-tile is-child box backgroundimg highlighted"
+     <% if event[:color] %>
-    style="background-image:linear-gradient(rgba(0,0,0,0.2), rgba(0, 0, 0, 0.65)), url('<%= @event[:banner] %>');">
+     style="background-image: linear-gradient(to top right,rgba(255,255,255,0),rgba(0,0,0,.60)); background-color:<%= event[:color] %>;"
-<% elsif @event[:color] %>
+     <% else %>
-  <a href="<%= @event.path %>" class="tile event-tile is-child box backgroundimg highlighted"
+     style="background-image: linear-gradient(to top right,rgba(255,255,255,0),rgba(0,0,0,.60)); background-color: lightgrey;"
-    style="background-image: linear-gradient(to top right,rgba(255,255,255,0),rgba(0,0,0,.60)); background-color:<%= @event[:color] %>;">
+     <% end %>
-<% else %>
+     >
-  <a href="<%= @event.path %>" class="tile event-tile is-child box backgroundimg">
-<% end %>
   <div class="content event-content">
-  <% if nil && @event[:image] %>
+  <% if @event[:image] %>
   <img class="event-tile-image" src="<%= @event[:image] %>" alt="">
   <% end %>
-    <div class="event-text">
+    <div class="has-text-centered">
-      <h1 class="has-text-centered">
+      <h3><%= @event[:title] %></h3>
-        <%= @event[:title] %>
+      <p><%= @event[:description] %></p>
-      </h1>
-
-      <div class="description has-text-centered">
-        <%= @event[:description] %>
-      </div>
-
-      <div class="is-divider"></div>
-
-      <div class="event-time-loc">
-        <%= fa :'clock-o' , fw: true %><%= @event[:time].strftime('%A %d %B, %H:%M') %>
-        <br>
-        <%= fa :'map-marker', fw: true %><%= @event[:location] %>
-      </div>
     </div>
-
   </div>
-</a>
+</div>