[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

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' ?>">