[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/css/main.css

@@ -8,6 +8,7 @@ body {
 
 h1, h2, h3, h4 {
   margin-bottom: 18px;
+  margin-top: 1em;
   font-family: 'Crimson Text', serif; }
 
 h5 {
@@ -198,12 +199,12 @@ html {
 @media (max-width: 543px) {
   body {
     /* Margin bottom by footer height */
-    margin-bottom: 192px; }
+    margin-bottom: 205px; }
   footer {
     position: absolute;
     bottom: 0;
     width: 100%;
-    height: 162px; } }
+    height: 175px; } }
 
 /*
  * HELPERS

assets/css/templates/photo.css

@@ -14,6 +14,10 @@ a {
   nav ul.nav.main {
     color: #fff; } }
 
+@media (max-width: 543px) {
+  .navbar-toggler {
+    color: #fff; } }
+
 footer {
   background-color: #303030;
   color: #e6e6e6; }

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

site/snippets/base/cont-header.php

@@ -24,12 +24,13 @@ if ($page->depth() == 1) {
   <div class="bg-inverse p-a-1">
     <nav>
       <ul class="nav mobileNav">
+        <li><a href="<?php echo $site->url()?>">Home</a></li>
       <?php foreach ($site->children()->visible() as $p) : ?>
-        <a href="<?php echo $p->url()?>" <?php echo ($page == $p)?'class="active"':'' ?>><li><?php echo $p->title() ?></li></a>
+        <li><a href="<?php echo $p->url()?>" <?php echo ($page == $p)?'class="active"':'' ?>><?php echo $p->title() ?></a></li>
         <?php if ($p->hasVisibleChildren() && $p->template() != 'blog') : ?>
         <ul class="">
         <?php foreach ($p->children()->visible() as $c) : ?>
-          <a href="<?php echo $c->url()?>" <?php echo ($page == $c)?'class="active"':'' ?>><li><?php echo $c->title() ?></li></a>
+          <li><a href="<?php echo $c->url()?>" <?php echo ($page == $c)?'class="active"':'' ?>><?php echo $c->title() ?></a></li>
         <?php endforeach; ?>
         </ul>
         <?php endif; ?>
@@ -49,7 +50,7 @@ if ($page->depth() == 1) {
 
     <nav aria-hidden="true">
       <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar">
-        Menü <i class="fa fa-bars"></i>
+        Menü
       </button>
 
       <ul class="nav hidden-xs-down <?php echo ($subnav)?'main':'home' ?>">