From 5a6838cb1326da3c7b1f5707b42381be2c11783c Mon Sep 17 00:00:00 2001
From: Joseph Hutchinson <hutch7995@gmail.com>
Date: Wed, 18 Apr 2018 16:47:11 -0400
Subject: [PATCH] Button styling and added border on click for all
 buttons/cards

---
 layouts/_default/list.html |  3 ++-
 static/css/style.css       | 18 +++++++++++-------
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index 06e4c85..ab49c2f 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -13,8 +13,9 @@
     </main>
     <div class="pagination-nav side-gutter">
       <a href="#" class="pagination-prev button">Newer Posts</a>
+      {{ if .Paginator.HasPrev }}<a href="{{ .Paginator.Prev.URL }}" class="pagination-prev button">Newer Posts</a>{{ end }}
       <p class="pagination-pagenum muted-text">Page {{ .Paginator.PageNumber }} of {{ .Paginator.TotalPages }}</p>
-      <a href="#" class="pagination-next button">Older Posts</a>
+      {{ if .Paginator.HasNext }}<a href="{{ .Paginator.Next.URL }}" class="pagination-next button">Older Posts</a>{{ end }}
     </div>
     {{ partial "scripts.html" . }}
   </body>
diff --git a/static/css/style.css b/static/css/style.css
index 96c3c5e..8127136 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -107,9 +107,13 @@ strong {
     border-radius: 0.2em;
     text-decoration: none;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
+    transition: transform 0.3s cubic-bezier(.25,.8,.25,1), box-shadow 0.3s cubic-bezier(.25,.8,.25,1);
     box-shadow: 0 0.4em 0.8em 0 rgba(0,0,0,0.16), 0 0.3em 0.3em -0.1em rgba(0,0,0,0.23);
 }
+.card:active {
+    border: 0.06em solid #7A7B7C;
+    margin: -0.06em;
+}
 .card-active {
     transform: scale(0.95);
     box-shadow: 0 0.15em 0.3em 0 rgba(0, 0, 0, 0.16), 0 0.15em 0.3em -0.04em rgba(0, 0, 0, 0.23);
@@ -163,14 +167,14 @@ strong {
     padding: 0.5em 0.6em;
     background-color: #FFF;
     border-radius: 0.2em;
-    box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
-                0px 2px 2px 0px rgba(0, 0, 0, 0.14),
-                0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+    box-shadow: 0 0.04em 0.12em rgba(0,0,0,0.12), 0 0.04em 0.08em rgba(0,0,0,0.24);
+}
+.button:hover {
+    transform: scale(0.97);
 }
 .button:active {
-    box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
-                0px 2px 2px 0px rgba(0, 0, 0, 0.14),
-                0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+    border: 0.06em solid #7A7B7C;
+    padding: 0.44em 0.6em 0.5em 0.54em;
 }
 .side-gutter {
     padding-left: 0.7em !important;