Polished blog cards design, remove ribbon on grid layout

yswery · Feb 17, 2017 · b1d75a6 · b1d75a6
1 parent d4de6a8
commit b1d75a6
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 6 deletions.
diff --git 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
@@ -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">