Improve appearance of option bars on mobile

public/style.css

@@ -7724,16 +7724,24 @@ header #login-popup {
   flex-direction: column;
   justify-content: space-between;
   text-align: center;
+  align-items: center;
   border-style: dashed;
   border-width: 0px;
-  border-bottom-width: 1px; }
+  border-bottom-width: 1px;
+  padding-bottom: 0.5rem; }
   @media screen and (min-width: 30em) {
     .optionbar {
       flex-direction: row;
-      text-align: left; } }
+      text-align: left;
+      padding-bottom: 0; } }
   .optionbar.bottom {
     border-bottom-width: 0px;
-    border-top-width: 1px; }
+    border-top-width: 1px;
+    padding-bottom: 0;
+    padding-top: 0.5rem; }
+    @media screen and (min-width: 30em) {
+      .optionbar.bottom {
+        padding-top: 0; } }
   .optionbar.center {
     text-align: center; }
   .optionbar .options {
@@ -7748,6 +7756,8 @@ header #login-popup {
     .optionbar .options input[type=button],
     .optionbar .options input[type=submit] {
       display: inline-flex;
+      align-items: center;
+      justify-content: center;
       border: none;
       background: none;
       font-weight: normal;
@@ -8432,6 +8442,8 @@ input[type=submit] {
   input[type=button].lite,
   input[type=submit].lite {
     display: inline-flex;
+    align-items: center;
+    justify-content: center;
     border: none;
     background: none;
     font-weight: normal;

src/rawdata/scss/_core.scss

@@ -639,18 +639,27 @@ footer {
   flex-direction: column;
   justify-content: space-between;
   text-align: center;
+  align-items: center;
   border-style: dashed;
   border-width: 0px;
   border-bottom-width: 1px;
+  padding-bottom: $spacing-small;
 
   @media #{$breakpoint-not-small} {
     flex-direction: row;
     text-align: left;
+    padding-bottom: 0;
   }
 
   &.bottom {
     border-bottom-width: 0px;
     border-top-width: 1px;
+    padding-bottom: 0;
+    padding-top: $spacing-small;
+
+    @media #{$breakpoint-not-small} {
+      padding-top: 0;
+    }
   }
 
   &.center {

src/rawdata/scss/_globals.scss

@@ -46,6 +46,8 @@ will throw an error.
 
 @mixin lite-button {
   display: inline-flex;
+  align-items: center;
+  justify-content: center;
   border: none;
   background: none;
   font-weight: normal;

src/templates/src/include/pagination.html

@@ -1,9 +1,9 @@
 {{- /*gotype: git.handmade.network/hmn/hmn/src/templates.Pagination*/ -}}
+{{ if gt .Total 1 }}
     <div class="pagination flex">
         {{ if gt .Current 1 }}
             <a class="button" href="{{ .PreviousUrl }}">Prev</a>
         {{ end }}
-    {{ if gt .Total 1 }}
         {{ if gt .Current 1 }}
             {{ if gt .Current 2 }}
                 <a class="page button" href="{{ .FirstUrl }}">1</a>
@@ -23,10 +23,8 @@
                 <a class="page button" href="{{ .LastUrl }}">{{ .Total }}</a>
             {{ end }}
         {{ end }}
-    {{ else }}
-        &nbsp;
-    {{ end }}
         {{ if lt .Current .Total }}
             <a class="button" href="{{ .NextUrl }}">Next</a>
         {{ end }}
     </div>
+{{ end }}