From b1d75a6077848e7ac258f881626f6ba727e938aa Mon Sep 17 00:00:00 2001
From: Pierre Jacquier <pierrejacquier39@gmail.com>
Date: Fri, 17 Feb 2017 10:28:38 +0100
Subject: [PATCH] Polished blog cards design, remove ribbon on grid layout

---
 _layouts/centered.html |  6 +++++-
 blog.html              | 27 ++++++++++++++++++++++-----
 2 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/_layouts/centered.html b/_layouts/centered.html
index 387408d..e8a6feb 100644
--- a/_layouts/centered.html
+++ b/_layouts/centered.html
@@ -3,6 +3,10 @@
 ---
 
 <style>
+  .transparent {
+    background-color: transparent;
+  }
+
   .liri-layout-transparent {
     /*background: url('https://getmdl.io/assets/demos/transparent.jpg') center / cover;*/
       background: url('{{ site.baseurl }}/images/parallax/bg2.png') center / cover;
@@ -59,7 +63,7 @@
   </header>
   <!-- Mobile navigation -->
   {% include mobile-nav.html %}
-  <div class="liri-ribbon mdl-color--primary"></div>
+  <div class="liri-ribbon transparent"></div>
   <main class="liri-main mdl-layout__content">
     <div class="mdl-layout__container">
       <div class="liri-blog__posts mdl-grid">
diff --git a/blog.html b/blog.html
index 2982dbb..4a44d6f 100644
--- a/blog.html
+++ b/blog.html
@@ -24,22 +24,39 @@
   .right {
     text-align: right;
   }
+
+  .no-padding-top {
+    padding-top: 0;
+  }
+
+  .no-padding-bottom {
+    padding-bottom: 0;
+  }
+
+  .primary-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+
+  .secondary-text {
+    color: rgba(0, 0, 0, 0.54);
+  }
 </style>
 
 {% for post in site.posts %}
   {% assign author = site.data.authors[post.author] %}
   <div class=" mdl-card mdl-shadow--2dp mdl-cell mdl-cell--6-col">
-    <div class="mdl-card__title">
+    <div class="mdl-card__title no-padding-bottom">
       <h2 class="mdl-card__title-text">{{ post.title }}</h2>
     </div>
-    <div class="mdl-card__supporting-text mdl-card--expand">
+    <div class="mdl-card__supporting-text mdl-card--expand no-padding-top no-padding-bottom primary-text">
+      <p class="secondary-text">{{ post.date | date_to_string }} • {{ author.name }}</p>
       <p>{{ post.excerpt }}</p>
     </div>
     <div class="mdl-card__actions mdl-card--border">
       <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" href="{{ site.baseurl }}{{ post.url }}">Read More</a>
-      <span class="right">
-        <span>{{ post.date | date_to_string }} • {{ author.name }}</span>
-      </span>
+      <!--<span class="right">-->
+        <!--<span>{{ post.date | date_to_string }} • {{ author.name }}</span>-->
+      <!--</span>-->
     </div>
     <div class="mdl-card__menu">
       <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">