layout upper tiles

content/assets/stylesheets/includes/tiles.erb.scss

@@ -0,0 +1,105 @@
+a.box {
+  &:hover {
+    box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px $blue
+  }
+}
+
+#homepage {
+  .box {
+    border-radius: 0;
+
+    img {
+      width: 100%;
+    }
+  }
+}
+
+.centering {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.highlighted{
+  background: $tile-orange;
+  .content {
+    color: white;
+
+    h1, h2 {
+      color: inherit;
+    }
+    a, a:visited {
+      color:inherit;
+    }
+  }
+}
+#quote{
+  font-style: italic;
+}
+
+.icon a{
+  color:$tile-orange;
+}
+#gamification-coders {
+  display: flex;
+  justify-content: center;
+  ol{
+    list-style-type: decimal-leading-zero;
+    counter-reset:li;
+    > li{
+      float:left;
+      padding:5px;
+      margin:20px;
+      margin-bottom:3px;
+      margin-top:3px;
+      display:inline;
+      &:before{
+        content:counter(li); /* Use the counter as content */
+        counter-increment:li;
+        color:$tile-orange;
+        font: bold 18pt helvetica, arial, sans-serif;
+        background-color:whitesmoke;
+        height:30px;
+        width:30px;
+        display:inline-block;
+        margin-right:10px;
+        border-radius:50px;
+        text-align: center;
+        line-height: 30px;
+      }
+    }
+  }
+}
+
+#blokmap-tile {
+  position: relative;
+
+  height: 200px;
+  //background-image: url("https://i.imgur.com/PMaIG7X.jpg");
+  background-image: url("https://cldup.com/-FmSDFbd07.jpg");
+
+  background-position: center;
+
+  .overlay {
+    left: 0;
+    top: 0;
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    background-color: rgba(0, 0, 0, 0.2);
+  }
+
+  .content {
+    position: relative;
+
+    h1, h2 {
+      color: white;
+    }
+
+    h2 {
+      margin-top: 0;
+    }
+  }
+}
+
+.eventtile{
+}

content/assets/stylesheets/includes/tiles.scss

@@ -100,3 +100,11 @@ a.box {
     }
   }
 }
+
+.teaser{
+  font-style: italic;
+}
+
+.description{
+  font-weight: bold;
+}

content/assets/stylesheets/main.scss

@@ -24,7 +24,7 @@ body.site {
 
 @import "includes/cammie";
 @import "includes/events";
-@import "includes/tiles";
+@import "includes/tileS";
 @import "includes/blogpost";
 @import "includes/general";
 @import "includes/eventpage";

content/index.erb

@@ -58,7 +58,9 @@
       <div class="tile">
         <div class="tile is-vertical">
           <div class="tile is-parent">
-            <%= render '/partials/_tile.*', article: upcoming_events[1] || all_events[-2], small_text: if upcoming_events[1] then "Upcoming event" else "Past event" end %>
+            <%= render '/partials/_tile.*',
+              article: upcoming_events[1] || all_events[-2],
+              small_text: if upcoming_events[1] then "Upcoming event" else "Past event" end %>
           </div>
         </div>
       </div>

layouts/partials/_tile.erb

@@ -1,4 +1,5 @@
-<a href="<%= relative_path_to(@article) %>" class="tile is-child box <%= @htmlclass %>">
+<a href="<%= relative_path_to(@article) %>" class="tile is-child box <%= @htmlclass %>"
+  style="background-image:url('<%=@article[:banner]%>');">
   <div class="content" >
     <div class="columns">
       <div class="column">
@@ -12,6 +13,11 @@
         </small>
       </div>
     </div>
+    <div class="description">
     <%= @article[:description] %>
     </div>
+    <div class="teaser">
+      <%=  get_teaser(@article) %>
+    </div>
+  </div>
 </a>

lib/helpers/tile_helper.rb

@@ -0,0 +1,14 @@
+
+module TileHelper
+  def get_teaser(post)
+    content = strip_html(post.compiled_content)
+    return truncate(content, 300)
+  end
+
+  def truncate(s, max=70, elided = ' ...')
+    s.match( /(.{1,#{max}})(?:\s|\z)/ )[1].tap do |res|
+      res << elided unless res.length == s.length
+    end
+  end
+
+end

lib/helpers_.rb

@@ -17,3 +17,4 @@ include SearchHelper
 include BlogHelper
 include PreprocessHelper
 include TimeHelper
+include TileHelper