some fresh stylez

content/assets/stylesheets/includes/blogpost.scss

@@ -55,6 +55,13 @@ $sel: '';
 
     .subtitle {
       position: absolute;
+
+      @include mobile {
+        text-align: center;
+        margin-top: 0;
+        position: relative;
+        margin-bottom: .2em;
+      }
     }
 
     .details {
@@ -63,6 +70,12 @@ $sel: '';
       margin-top: -1.1rem;
       line-height: 1;
       text-align: right;
+
+      @include mobile {
+        text-align: center;
+        margin-top: 0;
+        position: relative;
+      }
     }
   }
 

content/assets/stylesheets/includes/general.scss

@@ -6,7 +6,17 @@
 // Override box styling without round corners
 .box {
   margin-bottom:10px;
-  border-radius: 0 !important;
+
+  transition: all .15s ease;
+
+  box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08);
+
+}
+
+a.box:hover {
+  color: $blue;
+  transform: translateY(-1px);
+  box-shadow: 0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08);
 }
 
 // Add some hero attributes to make backgrounds prettier

content/assets/stylesheets/includes/tiles.scss

@@ -1,15 +1,7 @@
 $top_coder_size: 80px;
 
-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%;
     }
@@ -37,7 +29,7 @@ a.box {
       font-size: 1.1em;
       margin-left: 10px;
       margin-right: 10px;
-      
+
       .event-time-loc {
         margin-left: 10px;
         margin-right: 10px;
@@ -119,10 +111,10 @@ a.box {
 }
 
 #blokmap-tile {
+
   position: relative;
   height: 200px;
-  //background-image: url("https://i.imgur.com/PMaIG7X.jpg");
+  background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, .2)), url("https://cldup.com/-FmSDFbd07.jpg");
-  background-image: url("https://cldup.com/-FmSDFbd07.jpg");
   background-position: center;
 
   .overlay {

layouts/partials/_blog_preview.erb

@@ -1,18 +1,16 @@
-<a href="<%= relative_path_to(post) %>">
+<a class="box blog-preview" href="<%= relative_path_to(post) %>">
-  <article class="box blog-preview">
+  <div class="content">
-    <div class="content">
+    <h3 class="has-text-centered"><%= post[:title] %></h3>
-      <h3 class="has-text-centered"><%= post[:title] %></h3>
+    <p class="has-text-centered">
-      <p class="has-text-centered">
       <%= post[:description] %>
-      </p>
+    </p>
-      <h5 class="has-text-centered">
+    <h5 class="has-text-centered">
-        <% if post[:author] %>
+      <% if post[:author] %>
-        door <%= post[:author] %>
+      door <%= post[:author] %>
-        <% end %>
+      <% end %>
-      </h5>
+    </h5>
-      <small><%= post[:created_at] %></small>
+    <small><%= post[:created_at] %></small>
-      <br>
+    <br>
-      <%= excerptize(post.reps[:text].compiled_content, length: 200).tr("\n", ' ')%>
+    <%= excerptize(post.reps[:text].compiled_content, length: 200).tr("\n", ' ')%>
-    </div>
+  </div>
-  </article>
 </a>

layouts/tiles/blokmap.erb

@@ -1,7 +1,5 @@
 <div class="tile is-parent is-12">
-  <div id="blokmap-tile" class="tile is-child box has-content-centered">
+  <a href="http://blok.ugent.be" id="blokmap-tile" class="tile is-child box has-content-centered">
-    <a href="http://blok.ugent.be">
-      <div class="overlay"><!-- EMPTY --></div>
       <div class="content is-large has-text-centered">
         <h1>
           <b>Zoek de beste plek om te blokken!</b>
@@ -11,5 +9,4 @@
         </h2>
       </div>
     </a>
-  </div>
 </div>