[SITE] new mobile menu (plain CSS) & removed animation assets of bootstrap

assets/css/foundation.css

@@ -1656,31 +1656,6 @@ input[type="reset"].btn-block,
 input[type="button"].btn-block {
   width: 100%; }
 
-.fade {
-  opacity: 0;
-  transition: opacity 0.15s linear; }
-  .fade.active {
-    opacity: 1; }
-
-.collapse {
-  display: none; }
-  .collapse.active {
-    display: block; }
-
-tr.collapse.active {
-  display: table-row; }
-
-tbody.collapse.active {
-  display: table-row-group; }
-
-.collapsing {
-  position: relative;
-  height: 0;
-  overflow: hidden;
-  transition-timing-function: ease;
-  transition-duration: .35s;
-  transition-property: height; }
-
 .align-baseline {
   vertical-align: baseline !important; }
 

assets/css/main.css

@@ -8,7 +8,11 @@
 body {
   margin: 0;
   font-family: 'Alegreya Sans', "Verdana", "Arial", sans-serif;
-  min-width: 300px; }
+  min-width: 300px;
+  overflow-x: hidden; }
+
+div.site-wrap {
+  background-color: #fff; }
 
 h1, h2, h3, h4 {
   margin-bottom: 18px;
@@ -85,6 +89,9 @@ header img {
   margin: 4px 0;
   float: left; }
 
+.nav-trigger {
+  display: none; }
+
 nav {
   box-sizing: border-box; }
   nav ul.nav {
@@ -116,26 +123,58 @@ nav {
   nav ul.nav a {
     margin: 30px 9px 1px; } }
 
+nav.mobile {
+  width: 200px;
+  height: 100%;
+  position: fixed;
+  right: -200px;
+  z-index: 0; }
+
+.site-wrap {
+  position: relative;
+  left: 0;
+  z-index: 1; }
+
 @media (max-width: 575px) {
-  nav button.navbar-toggler {
+  label[for="nav-trigger"] {
-    float: right;
+    position: absolute;
-    margin-top: 24px;
+    right: 15px;
-    font-family: inherit;
+    top: 24px;
-    font-weight: 300; }
+    z-index: 2;
-  nav ul.mobileNav {
-    color: #fff;
-    background-color: #424242;
-    padding: 1rem 1rem; }
-    nav ul.mobileNav a {
-      font-size: 20px;
-      font-weight: 300; }
-    nav ul.mobileNav a.active {
-      color: #2dac01;
-      font-weight: 700; }
-  .navbar-toggler {
     padding: 0.5rem 0.75rem;
     font-size: 1.25rem;
-    line-height: 1; } }
+    line-height: 1;
+    font-family: inherit;
+    font-weight: 300;
+    color: #373a3c;
+    background-color: #fff; }
+  nav.mobile {
+    background-color: #424242; }
+    nav.mobile ul.mobileNav {
+      color: #fff;
+      padding: 1rem 1rem;
+      padding-top: 28px; }
+      nav.mobile ul.mobileNav li {
+        margin-bottom: 0.4em; }
+        nav.mobile ul.mobileNav li a {
+          font-size: 20px;
+          font-weight: 300; }
+        nav.mobile ul.mobileNav li a.active {
+          color: #2dac01;
+          font-weight: 700; }
+      nav.mobile ul.mobileNav ul > li {
+        margin-bottom: 0.2em; }
+  .nav-trigger:checked + label {
+    right: 215px; }
+  .nav-trigger:checked ~ .site-wrap {
+    left: -200px;
+    box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.5); }
+  .nav-trigger:checked ~ nav.mobile {
+    right: 0; }
+  .nav-trigger + label, nav.mobile {
+    transition: right 0.2s; }
+  .site-wrap {
+    transition: left 0.2s; } }
 
 footer {
   margin-top: 25px;

assets/css/templates/home.css

@@ -27,6 +27,6 @@ main {
 
 @media (max-width: 575px) {
   main {
-    padding-top: 16vh; } }
+    padding-top: 10vh; } }
 
 /*# sourceMappingURL=home.css.map */

assets/css/templates/photo.css

@@ -2,9 +2,11 @@
  * for specific template
  */
 body {
-  background-color: #424242;
   color: #fff; }
 
+div.site-wrap {
+  background-color: #424242; }
+
 a {
   color: #34c501; }
   a:active, a:hover {
@@ -20,8 +22,9 @@ main p a:visited {
       border: none; } }
 
 @media (max-width: 575px) {
-  .navbar-toggler {
+  label[for="nav-trigger"] {
-    color: #fff; } }
+    color: #fff;
+    background-color: #424242; } }
 
 footer {
   background-color: #303030;

assets/scss/foundation.scss

@@ -22,7 +22,7 @@
 @import "buttons";
 
 // Components
-@import "animation";
+//@import "animation";
 //@import "dropdown";
 //@import "button-group";
 //@import "input-group";

assets/scss/main.scss

@@ -15,6 +15,10 @@ body {
   margin: 0;
   font-family: 'Alegreya Sans', "Verdana", "Arial", sans-serif;
   min-width: 300px;
+  overflow-x: hidden;
+}
+div.site-wrap {
+  background-color: $color_bg;
 }
 h1, h2, h3, h4 {
   margin-bottom: 18px;
@@ -105,6 +109,9 @@ header {
 }
 
 
+.nav-trigger {
+  display: none;
+}
 nav {
   box-sizing: border-box;
   ul.nav {
@@ -147,47 +154,81 @@ nav {
     margin: 30px 9px 1px;
   }
 }
-@include media-breakpoint-down(xs) {
-  nav {
-    button.navbar-toggler {
-      float: right;
-      margin-top: 24px;
-      font-family: inherit;
-      font-weight: 300;
-    }
-    ul.mobileNav {
-      color: $color_font_inv;
-      background-color: $color_bg_inv;
-      padding: 1rem 1rem;
-      a {
-        font-size: 20px;
-        font-weight: 300;
-      }
-      a.active {
-        color: $color_accent;
-        font-weight: 700;
-      }
-    }
-  }
 
-  // ---- from boostrap ----
+$mobileNav_width: 200px;
-  // @requires animation.scss and collapse.js, util.js
+$mobileNav_button_right: 15px;
-  .navbar-toggler {
+nav.mobile {
+  width: $mobileNav_width;
+  height: 100%;
+  position: fixed;
+  right: -$mobileNav_width;
+  z-index: 0;
+}
+.site-wrap {
+  position: relative;
+  left: 0;
+  z-index: 1;
+}
+@include media-breakpoint-down(xs) {
+  label[for="nav-trigger"] {
+    position: absolute;
+    right: $mobileNav_button_right;
+    top: 24px;
+    z-index: 2;
+    
     padding: .5rem .75rem;
     font-size: $font-size-lg;
     line-height: 1;
-//    background: none;
+    font-family: inherit;
-    //border: $border-width solid grey;
+    font-weight: 300;
-    //@include border-radius($btn-border-radius);
     
-//    @include hover-focus {
+    // button-color
-//      text-decoration: none;
+    color: #373a3c;
-//      outline: none;
+    background-color: #fff;
-//    }
+  }
+  
+  nav.mobile {
+    background-color: $color_bg_inv;  
+    ul.mobileNav {
+      color: $color_font_inv;
+      padding: 1rem 1rem;
+      padding-top: 28px;
+      li {
+        margin-bottom: 0.4em;
+        a {
+          font-size: 20px;
+          font-weight: 300;
+        }
+        a.active {
+          color: $color_accent;
+          font-weight: 700;
+        }
+      }
+      ul>li {
+        margin-bottom: 0.2em;
+      }
+    }
+  }
+  .nav-trigger:checked + label {
+    right: ($mobileNav_width + $mobileNav_button_right);
+  }
+  .nav-trigger:checked ~ .site-wrap {
+    left: -$mobileNav_width;
+    box-shadow: 0 0 5px 5px rgba(0,0,0,0.5);
+  }
+  .nav-trigger:checked ~ nav.mobile {
+    right: 0;
+  }
+  .nav-trigger + label, nav.mobile {
+    transition: right 0.2s;
+  }
+  .site-wrap {
+    transition: left 0.2s;
   }
 }
 
 
+
 $footer_logoHeight: 1.4rem;
 $footer_margin:     25px;
 $footer_height:     70px;

assets/scss/templates/home.scss

@@ -47,6 +47,6 @@ main {
 
 @include media-breakpoint-down(xs) {
   main {
-    padding-top: 16vh;
+    padding-top: 10vh;
   }
 }

assets/scss/templates/photo.scss

@@ -9,9 +9,11 @@
 
 // change main.scss behavior - inverted color style
 body {
-  background-color: $color_bg_inv;
   color: $color_font_inv;
 }
+div.site-wrap {
+  background-color: $color_bg_inv;
+}
 a {
   color: $link_color_inv;
   &:active, &:hover {
@@ -34,8 +36,10 @@ main p {
   }
 }
 @include media-breakpoint-down(xs) {
-  .navbar-toggler {
+  label[for="nav-trigger"] {
-      color: $nav_fgColor;
+    // button color inverted
+    color: $nav_fgColor;
+    background-color: $color_bg_inv;
   }
 }
 footer {

site/snippets/base/cont-footer.php

@@ -28,3 +28,5 @@
     </div>
   </div>
 </footer>
+
+</div><!--end div.site-wrap-->

site/snippets/base/cont-header.php

@@ -20,24 +20,27 @@ if ($page->depth() == 1) {
 }
 ?>
 
-<div class="collapse hidden-sm-up" id="exCollapsingNavbar">
+<input type="checkbox" id="nav-trigger" class="nav-trigger" />
-  <nav>
+<label class="hidden-sm-up" for="nav-trigger">Menü</label>
-    <ul class="nav mobileNav">
+
-      <li><a href="<?php echo $site->url()?>">Home</a></li>
+<nav class="mobile">
-    <?php foreach ($site->children()->visible() as $p) : ?>
+  <ul class="nav mobileNav">
-      <li><a href="<?php echo $p->url()?>" <?php echo ($page == $p)?'class="active"':'' ?>><?php echo $p->title() ?></a></li>
+    <li><a href="<?php echo $site->url()?>">Home</a></li>
-      <?php if ($p->hasVisibleChildren() && $p->template() != 'blog') : ?>
+  <?php foreach ($site->children()->visible() as $p) : ?>
-      <ul class="">
+    <li><a href="<?php echo $p->url()?>" <?php echo ($page == $p)?'class="active"':'' ?>><?php echo $p->title() ?></a></li>
-      <?php foreach ($p->children()->visible() as $c) : ?>
+    <?php if ($p->hasVisibleChildren() && $p->template() != 'blog') : ?>
-        <li><a href="<?php echo $c->url()?>" <?php echo ($page == $c)?'class="active"':'' ?>><?php echo $c->title() ?></a></li>
+    <ul class="">
-      <?php endforeach; ?>
+    <?php foreach ($p->children()->visible() as $c) : ?>
-      </ul>
+      <li><a href="<?php echo $c->url()?>" <?php echo ($page == $c)?'class="active"':'' ?>><?php echo $c->title() ?></a></li>
-      <?php endif; ?>
     <?php endforeach; ?>
     </ul>
-  </nav>
+    <?php endif; ?>
-</div>
+  <?php endforeach; ?>
+  </ul>
+</nav>
 
+
+<div class="site-wrap">
 <header class="section">
   <div class="container">
     <?php if ($img = $site->images()->find($site->title_image())) : ?>
@@ -47,10 +50,6 @@ if ($page->depth() == 1) {
     <?php endif; ?>
 
     <nav aria-hidden="true">
-      <button class="btn btn-lg btn-secondary navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar">
-        Menü
-      </button>
-
       <ul class="nav hidden-xs-down">
 <?php if(!$subnav) : ?>
       <?php foreach ($site->children()->visible() as $p) : ?>

site/snippets/base/html-end.php

@@ -9,7 +9,7 @@
 // -------------------------------------------
 
 // available switches:
-$switches = array("bs_util", "bs_collapse", "bs_carousel", "plg_masonry");
+$switches = array("bs_util", "bs_carousel", "plg_masonry");
 $jquery = false;
 
 foreach ($switches as $switch) {
@@ -31,9 +31,6 @@ foreach ($switches as $switch) {
 if($bs_util) {
 echo js('assets/vendors/bootstrap/js/dist/util.js');
 }
-if($bs_collapse) {
-echo js('assets/vendors/bootstrap/js/dist/collapse.js');
-}
 if($bs_carousel) {
 echo js('assets/vendors/bootstrap/js/dist/carousel.js');
 }

site/templates/blog.php

@@ -79,5 +79,4 @@ snippet('base/cont-header');
 </main>
 
 <?php snippet('base/cont-footer') ?>
-<?php snippet('base/html-end', ["bs_util"=>1,
+<?php snippet('base/html-end', []) ?>
-                                "bs_collapse"=>1]) ?>

site/templates/blogarticle.php

@@ -61,5 +61,4 @@ snippet('base/cont-header');
 </main>
 
 <?php snippet('base/cont-footer') ?>
-<?php snippet('base/html-end', ["bs_util"=>1,
+<?php snippet('base/html-end', []) ?>
-                                "bs_collapse"=>1]) ?>

site/templates/default.php

@@ -21,5 +21,4 @@ snippet('base/cont-header');
 </main>
 
 <?php snippet('base/cont-footer') ?>
-<?php snippet('base/html-end', ["bs_util"=>1,
+<?php snippet('base/html-end', []) ?>
-                                "bs_collapse"=>1]) ?>

site/templates/photo.php

@@ -28,6 +28,5 @@ snippet('base/cont-header');
 
 <?php snippet('base/cont-footer') ?>
 <?php snippet('base/html-end', ["bs_util"=>1,
-                                "bs_collapse"=>1,
                                 "bs_carousel"=>1,
                                 "plg_masonry"=>1]) ?>

site/templates/project.php

@@ -25,6 +25,5 @@ snippet('base/cont-header');
 
 <?php snippet('base/cont-footer') ?>
 <?php snippet('base/html-end', ["bs_util"=>1,
-                                "bs_collapse"=>1,
                                 "bs_carousel"=>0,
                                 "plg_masonry"=>1]) ?>

site/templates/projects.php

@@ -41,5 +41,4 @@ snippet('base/cont-header');
 </main>
 
 <?php snippet('base/cont-footer') ?>
-<?php snippet('base/html-end', ["bs_util"=>1,
+<?php snippet('base/html-end', []) ?>
-                                "bs_collapse"=>1]) ?>

site/templates/webdesign.php

@@ -33,5 +33,4 @@ snippet('base/cont-header');
 </main>
 
 <?php snippet('base/cont-footer') ?>
-<?php snippet('base/html-end', ["bs_util"=>1,
+<?php snippet('base/html-end', []) ?>
-                                "bs_collapse"=>1]) ?>