fixed footer layout

_includes/header.html

@@ -1,4 +1,4 @@
-  <header class="mdl-layout__header">
+  <header class="mdl-layout__header mdl-layout__header--waterfall">
 
     <div class="mdl-layout__header-row">
       <!-- Title -->

_layouts/default.html

@@ -7,17 +7,15 @@
 
     <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
       {% include header.html %}
+
+      <main class="mdl-layout__content">
+        <div class="page-content">
+          {{ content }}
+        </div>
+        {% include footer.html %}
+      </main>
+
     </div>
-
-    <main class="mdl-layout__content">
-      <div class="page-content">
-        {{ content }}
-      </div>
-    </main>
-
-
-    {% include footer.html %}
-
     <!-- Material Design Lite js Library -->
     <script type="text/javascript" src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script>
 

index.html

@@ -5,12 +5,15 @@ layout: default
 <div class="mdl-grid">
   {% for post in site.posts %}
   <div class="mdl-card mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-cell--4-col-desktop mdl-cell--4-col-tablet  mdl-cell--12-col-phone">
-    <div class="mdl-card__title" {{ post.url | prepend: site.baseurl }}>
+    <div class="mdl-card__title">
       <h2 class="mdl-card__title-text">{{ post.title }}</h2>
     </div>
     <div class="mdl-card__supporting-text">
       {{ post.excerpt }}
     </div>
+    <button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored" onclick="location.href='{{ post.url | prepend: site.baseurl }}'">
+      <i class="material-icons">keyboard_arrow_right</i>
+    </button>
     <div class="mdl-card__actions mdl-card--border">
       <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
         {{ post.date | date: "%b %-d, %Y" }}