[mod] pagination and list design

layouts/partials/pagination.html

-{{ if or (.Paginator.HasPrev) (.Paginator.HasNext) }}
-<link rel="stylesheet" href="{{ $.Site.BaseURL }}css/nav.css">
-<nav>
-  <ul class="link justify-content-center">
-    {{ if .Paginator.HasPrev }}
-    <p><a class="page-link" href="{{ .Paginator.Prev.URL }}">&laquo; Prev</a></p>
-    {{ end }}
-    {{ if .Paginator.HasNext }}
-    <p><a class="page-link" href="{{ .Paginator.Next.URL }}">&raquo; Next</a></p>
-    {{ end }}
-  </ul>
-</nav>
-{{ end }}
+<link rel="stylesheet" href="{{ .Site.BaseURL }}css/pagination.css">
+<div class="pagination-class">
+    {{ template "_internal/pagination.html" . }}
+</div>

static/css/list.css

 .year {
   width: 100%;
-  margin: auto;
-  text-align: center;
+  margin-left: 45px;
+  text-align: left;
 }
 
+/*
 .year h1 {
   position: relative;
   display: inline-block;
-  padding: 0 55px;
+  padding: 0 21px;
+}
+*/
+.year h1 {
+  position: relative;
+  padding-left: 25px;
+}
+
+.year h1:before {
+  position: absolute;
+  content: '';
+  bottom: -3px;
+  left: 0;
+  width: 0;
+  height: 0;
+  border: none;
+  border-left: solid 15px transparent;
+  border-bottom: solid 15px rgb(47, 79,79);
+}
+.year h1:after {
+  position: absolute;
+  content: '';
+  bottom: -3px;
+  left: 10px;
+  width: 70%;
+  border-bottom: solid 3px rgb(47, 79,79);
 }
 
+/*
 .year h1:before, .year h1:after {
   content: '';
   position: absolute;
@@ -26,3 +53,4 @@
 .year h1:after {
   right: 0;
 }
+*/

static/css/nav.css

-.page-link {
-  margin-top: 20px;
-  width: auto;
-  font-size: 20px;
-  font-weight: bold;
-  /*padding: 0.25em 0.25em; */
-  padding: 1px 7px 1px 7px;
-  border-radius: 4px;
-  transition: .4s;
-  text-decoration: none;
-  border: solid 1px black;
-  color: black;
-}
-
-.page-link:hover {
-  background: black;
-  color: white;
-}

static/css/pagination.css

+.pagination-class {
+    padding: 0px;
+    text-align:  center;
+    height: 50px;
+}
+
+.pagination {
+  display: inline-block;
+  padding-left: 0;
+  margin: 20px 0;
+  border-radius: 4px;
+}
+.pagination > li {
+  display: inline;
+}
+.pagination > li > a,
+.pagination > li > span {
+  position: relative;
+  float: left;
+  padding: 6px 12px;
+  margin-left: -1px;
+  line-height: 1.42857143;
+  color: #337ab7;
+  text-decoration: none;
+  background-color: #fff;
+  border: 1px solid #ddd;
+}
+.pagination > li:first-child > a,
+.pagination > li:first-child > span {
+  margin-left: 0;
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
+.pagination > li:last-child > a,
+.pagination > li:last-child > span {
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+.pagination > li > a:hover,
+.pagination > li > span:hover,
+.pagination > li > a:focus,
+.pagination > li > span:focus {
+  z-index: 2;
+  color: #23527c;
+  background-color: #eee;
+  border-color: #ddd;
+}
+.pagination > .active > a,
+.pagination > .active > span,
+.pagination > .active > a:hover,
+.pagination > .active > span:hover,
+.agination > .active > a:focus,
+.pagination > .active > span:focus {
+  z-index: 3;
+  color: #fff;
+  cursor: default;
+  background-color: #337ab7;
+  border-color: #337ab7;
+}
+.pagination > .disabled > span,
+.pagination > .disabled > span:hover,
+.pagination > .disabled > span:focus,
+.pagination > .disabled > a,
+.pagination > .disabled > a:hover,
+.pagination > .disabled > a:focus {
+  color: #777;
+  cursor: not-allowed;
+  background-color: #fff;
+  border-color: #ddd;
+}
+