Use normal buttons for pager

3 files changed, 38 insertions, 24 deletions

diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index d8a88c0..35dd017 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -65,34 +65,34 @@
       </div>
       {{ end }}
     </section>
-    <ul class="pager">
+    <div class="pager-container">
       {{ if .Next }}
-        <li class="previous">
+        <div class="btn btn-primary btn-older-posts">
           <a href="{{ .Next.Permalink }}">
             <span aria-hidden="true">&larr;</span> {{ i18n "olderPosts" }}
           </a>
-        </li>
+        </div>
       {{ else }}
-        <li class="previous disabled">
+        <div class="btn btn-primary btn-older-posts disabled">
           <a href="#">
             <span aria-hidden="true">&larr;</span> {{ i18n "olderPosts" }}
           </a>
-        </li>
+        </div>
       {{ end }}
       {{ if .Prev }}
-        <li class="next">
+        <div class="btn btn-primary btn-newer-posts">
           <a href="{{ .Prev.Permalink }}">
             {{ i18n "newerPosts" }} <span aria-hidden="true">&rarr;</span>
           </a>
-        </li>
+        </div>
       {{ else }}
-        <li class="next disabled">
+        <div class="btn btn-primary btn-newer-posts disabled">
           <a href="#">
             {{ i18n "newerPosts" }} <span aria-hidden="true">&rarr;</span>
           </a>
-        </li>
+        </div>
       {{ end }}
-    </ul>
+    </div>
   </footer>
 </article>
 
diff --git a/static/css/color-theme.css b/static/css/color-theme.css
index efb3ffd..4599a4c 100644
--- a/static/css/color-theme.css
+++ b/static/css/color-theme.css
@@ -6,6 +6,7 @@ From material design color palette:
 #33691e - Light Green 900
 
 #bdbdbd - Gray 400
+#616161 - Gray 700
 */
 
 .text-primary, a {
@@ -26,14 +27,7 @@ a:hover {
     color: #bdbdbd;
 }
 
-.pager li > a:hover,
-.pager li > span:hover {
-    border-color: #558b2f;
-    background-color: transparent;
-}
-
-.btn-primary,
-.pager li > a {
+.btn-primary {
     background-color: transparent;
     border-color: #ccc;
 }
@@ -44,6 +38,12 @@ a:hover {
     border-color: #558b2f;
 }
 
+.btn-primary.disabled, .btn-primary.disabled > a {
+    color: #616161;
+    background-color: #fff;
+    border-color: #bdbdbd;
+}
+
 .btn-default {
   color: #fff;
   background-color: transparent;
diff --git a/static/css/main.css b/static/css/main.css
index 9bbddd6..0d62441 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -118,7 +118,6 @@ a.btn-back {
 /* Footer */
 
 .global-footer {
-    margin-top: 10px;
     padding-top: 10px;
     max-width: 750px;
     height: 100px;
@@ -295,12 +294,27 @@ article section img {
       -ms-user-select: none;
 }
 
-.pager li > a, .pager li > span {
-    border-radius: 3px;
-}
-
-.btn:hover, .btn-primary:hover, .btn-default:hover, .pager li > a {
+.btn:hover, .btn-primary:hover, .btn-default:hover {
     -webkit-transition: background-color 0.1s linear;
     -ms-transition: background-color 0.1s linear;
     transition: background-color 0.1s linear;
 }
+
+.btn-older-posts {
+    float: left;
+}
+
+.btn-newer-posts {
+    float: right;
+}
+
+/*
+Paging at the bottom
+
+I don't use the default pager-class because I want to use the normal buttons with my style
+*/
+.pager-container {
+    padding-top: 20px;
+    padding-bottom: 20px;
+    overflow: auto;
+}