a few style adjustments

layouts/partials/pagination.html

@@ -3,15 +3,11 @@
 
 <ul class="pagination">
   <li class="pagination__item pagination__item--previous">
-  {{ if $paginator.HasPrev }}<a href="{{ $paginator.Prev.URL }}" class="pagination__link pagination__link--previous">{{end}}
-      OLDER
-      {{ if $paginator.HasPrev }}</a>{{end}}
+  {{ if $paginator.HasPrev }}<a href="{{ $paginator.Prev.URL }}" class="pagination__link pagination__link--previous">{{end}}OLDER{{ if $paginator.HasPrev }}</a>{{end}}
   </li>
-  <li>Page {{ $paginator.PageNumber }} of {{ $paginator.TotalPages }}</li>
+  <li>{{ $paginator.PageNumber }} of {{ $paginator.TotalPages }}</li>
 <li class="pagination__item pagination__item--next">
-{{ if $paginator.HasNext }}<a href="{{ $paginator.Next.URL }}" class="pagination__link pagination__link--next">{{end}}
-  NEWER
-{{ if $paginator.HasNext }}</a>{{end}}
+{{ if $paginator.HasNext }}<a href="{{ $paginator.Next.URL }}" class="pagination__link pagination__link--next">{{end}}NEWER{{ if $paginator.HasNext }}</a>{{end}}
 </li>
 </ul>
 {{ end }}

themes/nipponalba/static/css/style.css

@@ -175,6 +175,7 @@ main {
   width: 800px;
   margin: 0 auto;
   background: var(--bg-colour);
+  padding-bottom: 100px;
 }
 
 .about, .archive, .bookmarks {
@@ -311,7 +312,7 @@ main {
   object-position:top;
 }
 .h-entry{
-  width: 98%;
+  width: calc(100% - 22px);
   box-shadow: 0 2px 3px var(--shadow-colour);
   border: 1px solid var(--border-colour);
   border-radius: 15px;
@@ -557,28 +558,48 @@ img.thumb{
   object-fit:cover;
   object-position:top;
   margin: 0 auto;
-
   border: 1px solid var(--text-colour);
 }
 hr{
   border-top:1px dotted var(--text-colour);
   border-bottom:0;
 }
-.pagination {
+#pagination-top{
+  display:block;
+  margin:0;
+  padding:0;
+}
+ul.pagination {
    list-style:none;
    margin: 0 auto;
+   text-align: center;
+   vertical-align: middle;
    border:0px;
+   padding:0;
    padding-top:20px;
-   display:flex;
-   max-width: 340px;
-   width:100%;
+   display:grid;
+   grid-template-columns: 33% 34% 33%;
+   min-width:100%;
+   text-align: center;
 }
 .pagination li{
-  padding:10px 20px;
   font-weight:normal;
+  display:inline;
+  padding: 0;
+  margin: 0;
+}
+
+.pagination > li:nth-child(1){
+  text-align:left;
+  grid-column: 1;
+}
+.pagination > li:nth-child(2){
+  text-align:center;
+  grid-column: 2;
 }
-.pagination-bottom{
-  padding-bottom:100px;
+.pagination > li:nth-child(3){
+  text-align:right;
+  grid-column: 3;
 }
 .pagination a {
   color: var(--text-colour);
@@ -707,9 +728,4 @@ nav #Blogs{
 nav label{
   display:none;
 }
-
-.pagination{
-  height: 30px;
-  max-width: 460px;
-}
 }