[SITE] finish nav for mobile and second level

assets/css/main.css

@@ -0,0 +1,241 @@
+/* STYLE for jannikbeyerstedt.de
+ * generic styles
+ */
+/* line 11, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
+body {
+  margin: 0;
+  font-family: 'Alegreya Sans', "Verdana", "Arial", sans-serif;
+  min-width: 300px; }
+
+/* line 16, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
+h1, h2, h3, h4 {
+  margin-bottom: 18px;
+  font-family: 'Crimson Text', serif; }
+
+/* line 20, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
+h5 {
+  margin-bottom: 8px; }
+
+/* line 23, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
+h6 {
+  margin-bottom: 5px; }
+
+/* line 26, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
+p {
+  margin-top: 0;
+  line-height: 1.5em; }
+
+/* line 34, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
+header {
+  margin-bottom: 20px; }
+  /* line 36, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
+  header img {
+    width: 75px;
+    height: 75px;
+    float: left; }
+
+/* line 49, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
+nav {
+  box-sizing: border-box; }
+  /* line 51, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
+  nav ul.nav {
+    margin: 0;
+    padding-left: 0; }
+    /* line 54, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
+    nav ul.nav a {
+      text-decoration: none;
+      background-color: inherit;
+      color: inherit; }
+    /* line 59, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
+    nav ul.nav li {
+      list-style-type: none; }
+    /* line 62, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
+    nav ul.nav a:hover, nav ul.nav a:focus {
+      text-decoration: none; }
+
+@media (min-width: 544px) {
+  /* line 68, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
+  nav {
+    float: right;
+    height: 75px; }
+    /* line 72, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
+    nav ul.nav a {
+      float: left;
+      text-align: center;
+      font-size: 16px;
+      padding: 45px 0 5px;
+      width: 109px; }
+    /* line 80, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
+    nav ul.nav a:hover, nav ul.nav a:focus, nav ul.nav a.active {
+      color: #fff;
+      background-color: #0060e3; }
+    /* line 85, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
+    nav ul.nav.home {
+      color: #fff; }
+      /* line 87, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
+      nav ul.nav.home a {
+        background-color: #1779ff;
+        border-right: 1px solid #0055ca; }
+      /* line 91, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
+      nav ul.nav.home a:last-child {
+        border-right: 0; }
+      /* line 95, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
+      nav ul.nav.home a.active {
+        color: #fff;
+        border-bottom: 4px solid #2da301;
+        padding-bottom: 1px; }
+    /* line 101, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
+    nav ul.nav.main, nav ul.nav.second {
+      height: 37.5px; }
+      /* line 103, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
+      nav ul.nav.main a, nav ul.nav.second a {
+        padding: 8px 0 5.5px; }
+    /* line 107, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
+    nav ul.nav.main {
+      color: #1779ff; }
+      /* line 109, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
+      nav ul.nav.main a.active {
+        color: #fff;
+        border-bottom: 4px solid #2da301;
+        padding-bottom: 1.5px; }
+    /* line 115, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
+    nav ul.nav.second {
+      color: #fff; }
+      /* line 117, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
+      nav ul.nav.second a {
+        background-color: #1779ff; }
+      /* line 120, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
+      nav ul.nav.second a.active {
+        border-bottom: 4px solid #2da301;
+        padding-bottom: 1.5px; } }
+
+@media (max-width: 543px) {
+  /* line 129, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
+  nav button.navbar-toggler {
+    float: right;
+    margin-top: 10px;
+    font-family: inherit;
+    font-weight: 300; }
+  /* line 136, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
+  nav ul.mobileNav a {
+    font-size: 18px;
+    font-weight: 300; }
+  /* line 140, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
+  nav ul.mobileNav a.active {
+    color: #4a96ff;
+    font-weight: 700; }
+  /* line 149, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
+  .navbar-toggler {
+    padding: 0.5rem 0.75rem;
+    font-size: 1.25rem;
+    line-height: 1;
+    background: none;
+    border: 1px solid transparent;
+    border-radius: 0.25rem; }
+    /* line 21, /Users/jannik/Sites/aquila-jannik4/assets/vendors/bootstrap/scss/mixins/_hover.scss */
+    .navbar-toggler:focus,
+    .navbar-toggler:hover {
+      text-decoration: none; } }
+
+/* line 165, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
+footer {
+  margin-top: 20px;
+  padding-top: 20px;
+  padding-bottom: 20px;
+  background-color: #bebebe; }
+  /* line 172, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
+  footer p {
+    margin-bottom: 0; }
+  @media (max-width: 543px) {
+    /* line 165, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
+    footer {
+      text-align: center; }
+      /* line 178, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
+      footer p {
+        margin-bottom: 10px; } }
+  /* line 183, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
+  footer i.fa {
+    color: #000;
+    font-size: 1.4rem;
+    padding-right: 0.2em; }
+  /* line 188, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
+  footer a > svg {
+    height: 1.4rem;
+    width: 1.4rem;
+    position: relative;
+    top: 0.18rem; }
+    /* line 192, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
+    footer a > svg image {
+      height: 1.4rem;
+      width: 1.4rem; }
+
+/* make footer sticky */
+/* line 203, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
+html {
+  position: relative;
+  min-height: 100%; }
+
+@media (min-width: 544px) {
+  /* line 208, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
+  body {
+    /* Margin bottom by footer height */
+    margin-bottom: 85px; }
+  /* line 212, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
+  footer {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: 85px; } }
+
+@media (max-width: 543px) {
+  /* line 220, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
+  body {
+    /* Margin bottom by footer height */
+    margin-bottom: 162px; }
+  /* line 224, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
+  footer {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: 162px; } }
+
+/*
+ * HELPERS
+ */
+/* line 237, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
+.right {
+  text-align: right; }
+
+/* line 240, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
+.center {
+  text-align: center; }
+
+@media (max-width: 543px) {
+  /* line 244, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
+  .col-xxs-12.right, .col-xxs-12.center {
+    text-align: inherit; } }
+
+/* to break down col-xs */
+/* line 250, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
+.visible-xxs {
+  display: none !important; }
+
+@media (max-width: 543px) {
+  /* line 254, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
+  .col-xxs-12 {
+    float: none;
+    width: 100%;
+    position: relative;
+    left: 0;
+    right: 0;
+    min-height: 1px;
+    padding-right: 15px;
+    padding-left: 15px; }
+  /* line 263, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
+  .hidden-xxs {
+    display: none !important; }
+  /* line 266, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
+  .visible-xxs {
+    display: block !important; } }
+
+/*# sourceMappingURL=main.css.map */

assets/scss/foundation.scss

@@ -19,10 +19,10 @@
 @import "grid";
 //@import "tables";
 //@import "forms";
-//@import "buttons";
+@import "buttons";
 
 // Components
-//@import "animation";
+@import "animation";
 //@import "dropdown";
 //@import "button-group";
 //@import "input-group";
@@ -48,4 +48,4 @@
 //@import "carousel";
 
 // Utility classes
-//@import "utilities";
+@import "utilities";

assets/scss/main.scss

@@ -11,6 +11,7 @@ $col_xxs_bp: 543px;
 body {
   margin: 0;
   font-family: 'Alegreya Sans', "Verdana", "Arial", sans-serif;
+  min-width: 300px;
 }
 h1, h2, h3, h4 {
   margin-bottom: 18px;
@@ -28,67 +29,133 @@ p {
 }
 
 
-$header_logoHeight: 75px;
+$header_logoSize: 75px;
 
 header {
+  margin-bottom: 20px;
   img {
-    width: $header_logoHeight;
+    width: $header_logoSize;
-    height: $header_logoHeight;
+    height: $header_logoSize;
 
     float: left;
   }
 }
 
 $nav_bgColor: #1779ff;
-$nav_textMinWidth: 80px;
+$nav_borderColor: darken($nav_bgColor, 15%);
+$nav_fgColor: #fff;
+$nav_textXsWidth: 80px;
+$nav_textSmWidth: 109px;
 nav {
-  height: $header_logoHeight;
   box-sizing: border-box;
-  ul {
+  ul.nav {
     margin: 0; // reset
     padding-left: 0; // reset
-    background-color: $nav_bgColor;
-    color: #fff;
     a {
-      li {
-        list-style-type: none; // reset
-      }
       text-decoration: none;
+      background-color: inherit;
       color: inherit;
     }
+    li {
+      list-style-type: none; // reset
+    }
+    a:hover, a:focus {
+      text-decoration: none; // reset
+    }
   }
 }
 @include media-breakpoint-up(sm) {
   nav {
-    ul {
+    float: right;
-      float: right;
+    height: $header_logoSize;
+    ul.nav {
       a {
-        text-align: center;
         float: left;
-        padding-top: 45px;
+        text-align: center;
         font-size: 16px;
-        height: 75px;
+        padding: 45px 0 5px;
-        width: 109px;
+        width: $nav_textSmWidth;
-        border-right: 1px solid #124fa2;
+      }
+
+      a:hover, a:focus, a.active {
+        color: $nav_fgColor;
+        background-color: darken($nav_bgColor, 10%);
+      }
+    }
+    ul.nav.home {
+      color: $nav_fgColor;
+      a {
+        background-color: $nav_bgColor;
+        border-right: 1px solid $nav_borderColor;
       }
       a:last-child {
         border-right: 0;
       }
+
+      a.active {
+        color: $nav_fgColor;
+        border-bottom: 4px solid #2da301;
+        padding-bottom: 1px;
+      }
+    }
+    ul.nav.main, ul.nav.second {
+      height: $header_logoSize/2;
+      a {
+        padding: 8px 0 5.5px;
+      }
+    }
+    ul.nav.main {
+      color: $nav_bgColor;
+      a.active {
+        color: $nav_fgColor;
+        border-bottom: 4px solid #2da301;
+        padding-bottom: 1.5px;
+      }
+    }
+    ul.nav.second {
+      color: $nav_fgColor;
+      a {
+        background-color: $nav_bgColor;
+      }
+      a.active {
+        border-bottom: 4px solid #2da301;
+        padding-bottom: 1.5px;
+      }
     }
   }
 }
 @include media-breakpoint-down(xs) {
   nav {
-    min-width: 2*$nav_textMinWidth + $header_logoHeight + 40px;
+    button.navbar-toggler {
-    background-color: $nav_bgColor;
+      float: right;
-    ul {
+      margin-top: 10px;
+      font-family: inherit;
+      font-weight: 300;
+    }
+    ul.mobileNav {
       a {
-        text-align: left;
+        font-size: 18px;
-        float: left;
+        font-weight: 300;
-        margin: 10px 10px 0px;
-        font-size: 16px;
-        width: $nav_textMinWidth;
       }
+      a.active {
+        color: lighten($nav_bgColor, 10%);
+        font-weight: 700;
+      }
+    }
+  }
+
+  // from boostrap
+  // @requires animation.scss and collapse.js, util.js
+  .navbar-toggler {
+    padding: .5rem .75rem;
+    font-size: $font-size-lg;
+    line-height: 1;
+    background: none;
+    border: $border-width solid transparent;
+    @include border-radius($btn-border-radius);
+
+    @include hover-focus {
+      text-decoration: none;
     }
   }
 }

site/config/config.php

@@ -1,5 +1,5 @@
 <?php
-header("Content-Security-Policy: default-src 'self'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; frame-src https://*.youtube-nocookie.com; script-src 'self' 'unsafe-inline' https://jannikb.aquila.uberspace.de/piwik/; img-src 'self' https://jannikb.aquila.uberspace.de/piwik/");
+header("Content-Security-Policy: default-src 'self'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; frame-src https://*.youtube-nocookie.com; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://jannikb.aquila.uberspace.de/piwik/; img-src 'self' https://jannikb.aquila.uberspace.de/piwik/");
 //header("X-Content-Type-Options: nosniff");  // enabled at server-side
 //header("X-Frame-Options: deny");            // enabled at server-side
 //header("X-Xss-Protection: 1; mode=block");  // enabled at server-side

site/snippets/base/cont-header.php

@@ -5,7 +5,40 @@
 // copyright: Jannik Beyerstedt | https://jannikbeyerstedt.de
 // license: http://www.gnu.org/licenses/gpl-3.0.txt GPLv3 License
 // -------------------------------------------
+
+$subnav = false;
+if ($page->depth() == 1) {
+  $baseSec = $page;
+  if ( $page->isVisible() && $baseSec->hasVisibleChildren() ) {
+    $subnav = true;
+  }
+}else if ($page->depth() == 2) {
+  $baseSec = $page->parent();
+  if ( $page->isVisible() && $baseSec->hasVisibleChildren() ) {
+    $subnav = true;
+  }
+}
 ?>
+
+<div class="collapse hidden-sm-up" id="exCollapsingNavbar">
+  <div class="bg-inverse p-a-1">
+    <nav>
+      <ul class="nav mobileNav">
+      <?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>
+        <?php if ($p->hasVisibleChildren()) : ?>
+        <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>
+        <?php endforeach; ?>
+        </ul>
+        <?php endif; ?>
+      <?php endforeach; ?>
+      </ul>
+    </nav>
+  </div>
+</div>
+
 <header class="section">
   <div class="container">
     <a class="logo" href="<?php echo url() ?>">
@@ -13,11 +46,23 @@
     </a>
 
     <nav>
-      <ul>
+      <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar">
+        Menü <i class="fa fa-bars"></i>
+      </button>
+
+      <ul class="nav hidden-xs-down <?php echo ($subnav)?'main':'home' ?>">
       <?php foreach ($site->children()->visible() as $p) : ?>
-        <a href="<?php echo $p->url()?>"><li><?php echo $p->title() ?></li></a>
+        <a href="<?php echo $p->url()?>" <?php echo ($page == $p || $page->parent() == $p)?'class="active"':'' ?>><li><?php echo $p->title() ?></li></a>
       <?php endforeach; ?>
       </ul>
+
+<?php if($subnav) : ?>
+      <ul class="nav hidden-xs-down second">
+      <?php foreach ($baseSec->children()->visible() as $p) : ?>
+        <a href="<?php echo $p->url()?>" <?php echo ($page == $p)?'class="active"':'' ?>><li><?php echo $p->title() ?></li></a>
+      <?php endforeach; ?>
+      </ul>
+<?php endif; ?>
     </nav>
   </div>
 </header>

site/snippets/base/html-end.php

@@ -9,7 +9,10 @@
 
 <!-- Bootstrap core JavaScript-->
 <?php echo js('assets/vendors/jquery-2.2.2.min.js') ?>
-<?php //echo js('assets/vendors/bootstrap/js/bootstrap.min.js') ?>
+<?php
+echo js('assets/vendors/bootstrap/js/dist/util.js');
+echo js('assets/vendors/bootstrap/js/dist/collapse.js');
+?>
 
 <?php if (c::get('navbar-affix')) : ?>
   <script>