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%;
     }
@@ -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,5 +1,4 @@
-<a href="<%= relative_path_to(post) %>">
+<a class="box blog-preview" href="<%= relative_path_to(post) %>">
-  <article class="box blog-preview">
   <div class="content">
     <h3 class="has-text-centered"><%= post[:title] %></h3>
     <p class="has-text-centered">
@@ -14,5 +13,4 @@
     <br>
     <%= excerptize(post.reps[:text].compiled_content, length: 200).tr("\n", ' ')%>
   </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>
@@ -12,4 +10,3 @@
       </div>
     </a>
 </div>
-</div>