[SITE CSS] fix some spacing issue at mobile layout

- bigger margin on the bottom of the footer
- invert font color of mobile menu button at photos pages
- swap li and a tags in mobile menu. bigger width menu not changed, because big click target is needed
- bigger margin in top of the headings h1 to h4

assets/scss/main.scss

@@ -14,6 +14,7 @@ body {
 }
 h1, h2, h3, h4 {
   margin-bottom: 18px;
+  margin-top: 1em;
   font-family: 'Crimson Text', serif;
 }
 h5 {
@@ -247,7 +248,7 @@ footer {
 
 /* make footer sticky */
 $footer_height:    85px;
-$footer_height_xs: 162px;
+$footer_height_xs: 175px;
 $footer_margin:    30px;
 html {
   position: relative;

assets/scss/templates/photo.scss

@@ -25,6 +25,11 @@ a {
     }
   }
 }
+@include media-breakpoint-down(xs) {
+  .navbar-toggler {
+      color: $nav_fgColor;
+  }
+}
 footer {
   background-color: darken($color_bg_inv, 7%);
   color: darken($color_font_inv, 10%);