[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/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%);