mobile (WIP)

src/Template/Layout/frontend.ctp

@@ -40,6 +40,14 @@ $GLOBALS["self"] = $this;
     <div class="header-notify">
       <?= $this->element('navi_notify'); ?>
     </div>
+    <div>
+      <i id="nav-action-mobile" class="material-icons-outlined nav-main-button mobile">menu</i>
+    </div>
+    <picture class="logo mobile">
+      <source srcset="/img/logo_half.webp" type="image/webp">
+      <source srcset="/img/logo_half.png" type="image/png">
+      <img src="/img/logo_half.png" class="logo" alt="Logo">
+    </picture>
     <div class="sidebar1 nav-menu initial">
     <!-- TODO save last sidebar state so that it remains unchanged, on reload! -->
       <a href="/">
@@ -55,7 +63,7 @@ $GLOBALS["self"] = $this;
         </picture>
       </a>
       <div>
-        <i class="material-icons-outlined nav-main-button">menu</i>
+        <i id="nav-action" class="material-icons-outlined nav-main-button">menu</i>
       </div>
       <div class="nav-vertical">
         <ul>

webroot/css/grd_styles.css

@@ -16,11 +16,22 @@
 .layout {
   display: grid;
   grid-template-rows: [top] 6vh [line2] 86vh [footer1] 3vh [footer2] 5vh [end];
-  grid-template-columns: [left1] 1fr [left2] 1fr [left3] 8fr [right3] 1fr [right2] 1fr [right1];
+  grid-template-columns: [left1] 1fr [left2] 1fr [left3] 12fr [right3] 1fr [right2] 1fr [right1];
   grid-template-areas: "header header header header header" "left . center . ." "footer footer footer footer footer" "bottom bottom bottom bottom bottom";
   margin: 0;
   padding: 0;
 }
+@media (max-width:767px) {
+  .layout {
+    position: relative;
+    display: grid;
+    grid-template-rows: [top] 12vh [line2] 86vh [footer1] 3vh [footer2] 8vh [end];
+    grid-template-columns: [left1] 100vw [right1];
+    grid-template-areas: "header" "center" "footer" "bottom";
+    margin: 0;
+    padding: 0;
+  }
+}
 .header-notify {
   grid-area: header;
   grid-column-start: right3;
@@ -31,6 +42,15 @@
   grid-row-start: top;
   grid-row-end: end;
 }
+@media (max-width:767px) {
+  .sidebar1 {
+    position: relative;
+    grid-area: header;
+    z-index: 2;
+    top: -300px;
+    right: 0px;
+  }
+}
 .content {
   grid-area: center;
   grid-row-start: line2;
@@ -203,7 +223,7 @@
     right: 0;
     color: grey;
     font-size: smaller;
-    line-height: 1.125em;
+    line-height: 0.125em;
     padding-right: 0.25em;
     text-align: right;
   }
@@ -252,6 +272,20 @@
     color: grey;
   }
 }
+@media screen and (max-width:767px) {
+  .bottomright {
+    font-size: 0.7em;
+    font-weight: 300;
+    line-height: 1em;
+    width: 100px;
+  }
+  .bottomright p {
+    margin-block-start: 0;
+    margin-block-end: 2px;
+    margin-inline-start: 0;
+    margin-inline-end: 0;
+  }
+}
 /* Ende @media screen */
 /*
 To change this license header, choose License Headers in Project Properties.
@@ -340,6 +374,9 @@ and open the template in the editor.
   .logo.small.visible {
     display: block !important;
   }
+  .logo.mobile {
+    display: none;
+  }
   .logo.small.visible {
     padding-left: 118px;
   }
@@ -376,6 +413,10 @@ and open the template in the editor.
     color: grey;
     margin: 0.3em;
   }
+  /* Hide mobile menu button! */
+  .nav-main-button.mobile {
+    display: none;
+  }
   .nav-menu {
     width: 280px;
     height: 100%;
@@ -446,6 +487,10 @@ and open the template in the editor.
       transform: translateX(0);
     }
   }
+  /*
+    NAVI MOBILE
+  */
+  /* END navi mobile base */
   .selected {
     color: #047006;
   }
@@ -557,12 +602,103 @@ and open the template in the editor.
     text-decoration: none;
   }
 }
-@media screen and (max-width:480px) {
+@media screen and (max-width:767px) {
-  .logo.big {
+  .logo.big,
+  .logo.small {
     display: none;
   }
-  .logo.small {
+  .logo.visible {
+    padding: 0 !important;
+  }
+  .logo,
+  .logo.mobile,
+  .logo.mobile.visible {
     display: block;
+    position: fixed;
+    top: 12px;
+    left: 12px;
+  }
+  .logo.big,
+  .logo.big.visible {
+    display: none !important;
+  }
+  .nav-main-button {
+    display: none;
+  }
+  .nav-main-button.mobile {
+    display: block;
+    position: fixed;
+    top: 2px;
+    right: 0px;
+    z-index: 3;
+  }
+  .nav-menu {
+    width: 280px;
+    height: 300px;
+  }
+  .nav-menu-minimized .link-title {
+    display: inherit;
+  }
+  .nav-menu-minimized .nav-icon,
+  .nav-menu-minimized .nav-main-button {
+    padding-left: 0;
+  }
+  .nav-menu-maximized {
+    -webkit-animation: slide-down 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+    animation: slide-down 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+  }
+  .nav-menu-minimized {
+    -webkit-animation: slide-up 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+    animation: slide-up 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+  }
+  @-webkit-keyframes slide-down {
+    0% {
+      -webkit-transform: translateY(0);
+      transform: translateY(0);
+      opacity: 0;
+    }
+    100% {
+      -webkit-transform: translateY(300px);
+      transform: translateX(300px);
+      opacity: 1;
+    }
+  }
+  @keyframes slide-down {
+    0% {
+      -webkit-transform: translateY(0);
+      transform: translateY(0);
+      opacity: 0;
+    }
+    100% {
+      -webkit-transform: translateY(300px);
+      transform: translateY(300px);
+      opacity: 1;
+    }
+  }
+  @-webkit-keyframes slide-up {
+    0% {
+      -webkit-transform: translateY(0);
+      transform: translateY(0);
+    }
+    100% {
+      -webkit-transform: translateY(-300px);
+      transform: translateY(-300px);
+    }
+  }
+  @keyframes slide-up {
+    0% {
+      -webkit-transform: translateY(0);
+      transform: translateY(0);
+    }
+    100% {
+      -webkit-transform: translateY(-300px);
+      transform: translateY(-300px);
+    }
+  }
+}
+@media screen and (max-width:767px) {
+  .nav-vertical {
+    margin-top: 55px;
   }
 }
 /* ============================================================
@@ -834,9 +970,34 @@ and open the template in the editor.
     vertical-align: middle;
   }
 }
-@media screen and (max-width:480px) {
+@media screen and (max-width:767px) {
-  .content {
+  .nav-content-list {
+    display: flex;
+    font-size: small;
+    margin-bottom: 0;
+    justify-content: center;
+  }
+}
+@media screen and (max-width:767px) {
+  .info-container {
+    max-width: 90%;
+  }
+}
+@media screen and (max-width:767px) {
+  .main-container {
+    max-width: 100%;
+  }
+}
+@media screen and (max-width:767px) {
+  .content-collection {
     flex-direction: column;
+    align-items: center;
+  }
+  .content-item {
+    margin: 0.5em 0;
+    margin-right: 0;
+    width: 160px;
+    padding: 1em 2em;
   }
 }
 /* Ende @media screen */
@@ -966,7 +1127,7 @@ and open the template in the editor.
     vertical-align: middle;
   }
   /* =====================================
-        FORM TOP CONTENT (checkTransaction)
+    FORM TOP CONTENT (checkTransaction)
        =====================================*/
   .form-content {
     padding: 35px;
@@ -1001,6 +1162,31 @@ and open the template in the editor.
     font-size: 1.25em;
   }
 }
+@media screen and (max-width:767px) {
+  .row {
+    flex-direction: column;
+  }
+}
+@media screen and (max-width:767px) {
+  .cell {
+    padding: 0.25em 1.5em;
+  }
+  .c1 {
+    flex-basis: auto;
+  }
+  .c2 {
+    flex-basis: auto;
+  }
+  .c3 {
+    flex-basis: auto;
+  }
+  .c4 {
+    flex-basis: auto;
+  }
+  .c5 {
+    flex-basis: auto;
+  }
+}
 /*
 To change this license header, choose License Headers in Project Properties.
 To change this template file, choose Tools | Templates

webroot/js/basic.js

@@ -1,102 +1,116 @@
 // cross browser dom is ready module from:
 // https://www.competa.com/blog/cross-browser-document-ready-with-vanilla-javascript/
 var domIsReady = (function(domIsReady) {
-   var isBrowserIeOrNot = function() {
+    var isBrowserIeOrNot = function() {
-      return (!document.attachEvent || typeof document.attachEvent === "undefined" ? 'not-ie' : 'ie');
+        return (!document.attachEvent || typeof document.attachEvent === "undefined" ? 'not-ie' : 'ie');
-   }
+    }
 
-   domIsReady = function(callback) {
+    domIsReady = function(callback) {
-      if(callback && typeof callback === 'function'){
+        if (callback && typeof callback === 'function') {
-         if(isBrowserIeOrNot() !== 'ie') {
+            if (isBrowserIeOrNot() !== 'ie') {
-            document.addEventListener("DOMContentLoaded", function() {
+                document.addEventListener("DOMContentLoaded", function() {
-               return callback();
+                    return callback();
-            });
+                });
-         } else {
+            } else {
-            document.attachEvent("onreadystatechange", function() {
+                document.attachEvent("onreadystatechange", function() {
-               if(document.readyState === "complete") {
+                    if (document.readyState === "complete") {
-                  return callback();
+                        return callback();
-               }
+                    }
-            });
+                });
-         }
+            }
-      } else {
+        } else {
-         console.error('The callback is not a function!');
+            console.error('The callback is not a function!');
-      }
+        }
-   }
+    }
 
-   return domIsReady;
+    return domIsReady;
 })(domIsReady || {});
 
 
 // vanilla ajax request, json get
 function getJson(basisUrl, method, successFunction, errorFunction, timeoutFunction) {
-  var xhr = new XMLHttpRequest();
+    var xhr = new XMLHttpRequest();
 
-  xhr.onload = function(e) {
+    xhr.onload = function(e) {
-    var xhr = e.target;
+        var xhr = e.target;
-    //console.log(xhr);
+        //console.log(xhr);
-    var jsonReturn = [];
+        var jsonReturn = [];
-    if (xhr.responseType === 'json') {
+        if (xhr.responseType === 'json') {
-        jsonReturn = xhr.response;
+            jsonReturn = xhr.response;
-    } else {
+        } else {
-        jsonReturn = JSON.parse(xhr.responseText);
+            jsonReturn = JSON.parse(xhr.responseText);
+        }
+        successFunction(jsonReturn);
+    }
+    xhr.onerror = function(e) {
+        errorFunction(e);
+    }
+    xhr.ontimeout = function(e) {
+        timeoutFunction(e);
     }
-    successFunction(jsonReturn);
-  }
-  xhr.onerror = function(e) {
-    errorFunction(e);
-  }
-  xhr.ontimeout = function(e) {
-    timeoutFunction(e);
-  }
 
-  var bustCache =  '&' + new Date().getTime();
+    var bustCache = '&' + new Date().getTime();
-  //oReq.open('GET', e.target.dataset.url + bustCache, true);
+    //oReq.open('GET', e.target.dataset.url + bustCache, true);
-  xhr.open('GET', basisUrl + '?method='+method + bustCache, true);
+    xhr.open('GET', basisUrl + '?method=' + method + bustCache, true);
-  xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
+    xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
-  xhr.responseType = 'json';
+    xhr.responseType = 'json';
-  xhr.send();
+    xhr.send();
 }
 
 // cross browser dom is ready
 (function(document, window, domIsReady, undefined) {
-   domIsReady(function() {
+    domIsReady(function() {
-      var DesktopToggler = document.querySelector('.nav-main-button');
+        var DesktopToggler = document.querySelector('#nav-action');
-      var MobileToggler = document.querySelector('.t-header-mobile-toggler');
+        var MobileToggler = document.querySelector('#nav-action-mobile');
-      var HeaderToggle = document.querySelector('.t-header-toggler');
+        var HeaderToggle = document.querySelector('.t-header-toggler');
 
-      // SIDEBAR TOGGLE FUNCTION FOR LARGE SCREENS (SCREEN "LG" AND UP)
+        // SIDEBAR TOGGLE FUNCTION FOR LARGE SCREENS (SCREEN "LG" AND UP)
-      if(DesktopToggler) {
+        if (DesktopToggler) {
-        DesktopToggler.addEventListener('click', function ()
+            DesktopToggler.addEventListener('click', function() {
-        {
+                console.log('toggler clicked / Desktop');
-          console.log('toggler clicked / Desktop');
+                if (document.querySelector('.nav-menu').classList.contains('initial')) {
-          if(document.querySelector('.nav-menu').classList.contains('initial')){
+                    document.querySelector('.nav-menu').classList.remove('initial');
-            document.querySelector('.nav-menu').classList.remove('initial');
+                    document.querySelector('.nav-menu').classList.add('nav-menu-minimized');
-            document.querySelector('.nav-menu').classList.add('nav-menu-minimized');
+                } else {
-          } else {
+                    document.querySelector('.nav-menu').classList.toggle('nav-menu-minimized');
-            document.querySelector('.nav-menu').classList.toggle('nav-menu-minimized');
+                    document.querySelector('.nav-menu').classList.toggle('nav-menu-maximized');
-            document.querySelector('.nav-menu').classList.toggle('nav-menu-maximized');
+                }
-          }
+                let big = document.querySelectorAll('.logo.big');
-          let big = document.querySelectorAll('.logo.big');
+                big.forEach(function(el) {
-          big.forEach(function(el) {
+                    el.classList.toggle('visible');
-            el.classList.toggle('visible');
+                });
-          });
+                let small = document.querySelectorAll('.logo.small');
-          let small = document.querySelectorAll('.logo.small');
+                small.forEach(function(el) {
-          small.forEach(function(el) {
+                    el.classList.toggle('visible');
-            el.classList.toggle('visible');
+                });
-          });
+            });
-        });
+        }
-      }
 
-      // SIDEBAR TOGGLE FUNCTION FOR MOBILE (SCREEN "MD" AND DOWN)
+        // SIDEBAR TOGGLE FUNCTION FOR MOBILE (SCREEN "MD" AND DOWN)
-      if(MobileToggler) {
+        if (MobileToggler) {
-        MobileToggler.addEventListener('click', function () {
+            MobileToggler.addEventListener('click', function() {
-          document.querySelector('.page-body').classList.toggle('sidebar-collpased');
+                console.log('toggler clicked / Desktop');
-        });
+                if (document.querySelector('.nav-menu').classList.contains('initial')) {
-      }
+                    document.querySelector('.nav-menu').classList.remove('initial');
-      if(HeaderToggle) {
+                    document.querySelector('.nav-menu').classList.toggle('nav-menu-maximized');
-        HeaderToggle.addEventListener('click', function () {
+                } else {
-          HeaderToggle.classList.toggle('arrow');
+                    document.querySelector('.nav-menu').classList.toggle('nav-menu-minimized');
-        });
+                    document.querySelector('.nav-menu').classList.toggle('nav-menu-maximized');
-      }
+                }
-   });
+                let big = document.querySelectorAll('.logo.big');
+                big.forEach(function(el) {
+                    el.classList.toggle('visible');
+                });
+                let small = document.querySelectorAll('.logo.small');
+                small.forEach(function(el) {
+                    el.classList.toggle('visible');
+                });
+            });
+        }
+        if (HeaderToggle) {
+            HeaderToggle.addEventListener('click', function() {
+                HeaderToggle.classList.toggle('arrow');
+            });
+        }
+    });
 })(document, window, domIsReady);

websrc/src/less-files.css

@@ -16,11 +16,22 @@
 .layout {
   display: grid;
   grid-template-rows: [top] 6vh [line2] 86vh [footer1] 3vh [footer2] 5vh [end];
-  grid-template-columns: [left1] 1fr [left2] 1fr [left3] 8fr [right3] 1fr [right2] 1fr [right1];
+  grid-template-columns: [left1] 1fr [left2] 1fr [left3] 12fr [right3] 1fr [right2] 1fr [right1];
   grid-template-areas: "header header header header header" "left . center . ." "footer footer footer footer footer" "bottom bottom bottom bottom bottom";
   margin: 0;
   padding: 0;
 }
+@media (max-width:767px) {
+  .layout {
+    position: relative;
+    display: grid;
+    grid-template-rows: [top] 12vh [line2] 86vh [footer1] 3vh [footer2] 8vh [end];
+    grid-template-columns: [left1] 100vw [right1];
+    grid-template-areas: "header" "center" "footer" "bottom";
+    margin: 0;
+    padding: 0;
+  }
+}
 .header-notify {
   grid-area: header;
   grid-column-start: right3;
@@ -31,6 +42,15 @@
   grid-row-start: top;
   grid-row-end: end;
 }
+@media (max-width:767px) {
+  .sidebar1 {
+    position: relative;
+    grid-area: header;
+    z-index: 2;
+    top: -300px;
+    right: 0px;
+  }
+}
 .content {
   grid-area: center;
   grid-row-start: line2;
@@ -203,7 +223,7 @@
     right: 0;
     color: grey;
     font-size: smaller;
-    line-height: 1.125em;
+    line-height: 0.125em;
     padding-right: 0.25em;
     text-align: right;
   }
@@ -252,6 +272,20 @@
     color: grey;
   }
 }
+@media screen and (max-width:767px) {
+  .bottomright {
+    font-size: 0.7em;
+    font-weight: 300;
+    line-height: 1em;
+    width: 100px;
+  }
+  .bottomright p {
+    margin-block-start: 0;
+    margin-block-end: 2px;
+    margin-inline-start: 0;
+    margin-inline-end: 0;
+  }
+}
 /* Ende @media screen */
 /*
 To change this license header, choose License Headers in Project Properties.
@@ -340,6 +374,9 @@ and open the template in the editor.
   .logo.small.visible {
     display: block !important;
   }
+  .logo.mobile {
+    display: none;
+  }
   .logo.small.visible {
     padding-left: 118px;
   }
@@ -376,6 +413,10 @@ and open the template in the editor.
     color: grey;
     margin: 0.3em;
   }
+  /* Hide mobile menu button! */
+  .nav-main-button.mobile {
+    display: none;
+  }
   .nav-menu {
     width: 280px;
     height: 100%;
@@ -446,6 +487,10 @@ and open the template in the editor.
       transform: translateX(0);
     }
   }
+  /*
+    NAVI MOBILE
+  */
+  /* END navi mobile base */
   .selected {
     color: #047006;
   }
@@ -557,12 +602,103 @@ and open the template in the editor.
     text-decoration: none;
   }
 }
-@media screen and (max-width:480px) {
+@media screen and (max-width:767px) {
-  .logo.big {
+  .logo.big,
+  .logo.small {
     display: none;
   }
-  .logo.small {
+  .logo.visible {
+    padding: 0 !important;
+  }
+  .logo,
+  .logo.mobile,
+  .logo.mobile.visible {
     display: block;
+    position: fixed;
+    top: 12px;
+    left: 12px;
+  }
+  .logo.big,
+  .logo.big.visible {
+    display: none !important;
+  }
+  .nav-main-button {
+    display: none;
+  }
+  .nav-main-button.mobile {
+    display: block;
+    position: fixed;
+    top: 2px;
+    right: 0px;
+    z-index: 3;
+  }
+  .nav-menu {
+    width: 280px;
+    height: 300px;
+  }
+  .nav-menu-minimized .link-title {
+    display: inherit;
+  }
+  .nav-menu-minimized .nav-icon,
+  .nav-menu-minimized .nav-main-button {
+    padding-left: 0;
+  }
+  .nav-menu-maximized {
+    -webkit-animation: slide-down 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+    animation: slide-down 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+  }
+  .nav-menu-minimized {
+    -webkit-animation: slide-up 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+    animation: slide-up 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+  }
+  @-webkit-keyframes slide-down {
+    0% {
+      -webkit-transform: translateY(0);
+      transform: translateY(0);
+      opacity: 0;
+    }
+    100% {
+      -webkit-transform: translateY(300px);
+      transform: translateX(300px);
+      opacity: 1;
+    }
+  }
+  @keyframes slide-down {
+    0% {
+      -webkit-transform: translateY(0);
+      transform: translateY(0);
+      opacity: 0;
+    }
+    100% {
+      -webkit-transform: translateY(300px);
+      transform: translateY(300px);
+      opacity: 1;
+    }
+  }
+  @-webkit-keyframes slide-up {
+    0% {
+      -webkit-transform: translateY(0);
+      transform: translateY(0);
+    }
+    100% {
+      -webkit-transform: translateY(-300px);
+      transform: translateY(-300px);
+    }
+  }
+  @keyframes slide-up {
+    0% {
+      -webkit-transform: translateY(0);
+      transform: translateY(0);
+    }
+    100% {
+      -webkit-transform: translateY(-300px);
+      transform: translateY(-300px);
+    }
+  }
+}
+@media screen and (max-width:767px) {
+  .nav-vertical {
+    margin-top: 55px;
   }
 }
 /* ============================================================
@@ -834,9 +970,34 @@ and open the template in the editor.
     vertical-align: middle;
   }
 }
-@media screen and (max-width:480px) {
+@media screen and (max-width:767px) {
-  .content {
+  .nav-content-list {
+    display: flex;
+    font-size: small;
+    margin-bottom: 0;
+    justify-content: center;
+  }
+}
+@media screen and (max-width:767px) {
+  .info-container {
+    max-width: 90%;
+  }
+}
+@media screen and (max-width:767px) {
+  .main-container {
+    max-width: 100%;
+  }
+}
+@media screen and (max-width:767px) {
+  .content-collection {
     flex-direction: column;
+    align-items: center;
+  }
+  .content-item {
+    margin: 0.5em 0;
+    margin-right: 0;
+    width: 160px;
+    padding: 1em 2em;
   }
 }
 /* Ende @media screen */
@@ -966,7 +1127,7 @@ and open the template in the editor.
     vertical-align: middle;
   }
   /* =====================================
-        FORM TOP CONTENT (checkTransaction)
+    FORM TOP CONTENT (checkTransaction)
        =====================================*/
   .form-content {
     padding: 35px;
@@ -1001,6 +1162,31 @@ and open the template in the editor.
     font-size: 1.25em;
   }
 }
+@media screen and (max-width:767px) {
+  .row {
+    flex-direction: column;
+  }
+}
+@media screen and (max-width:767px) {
+  .cell {
+    padding: 0.25em 1.5em;
+  }
+  .c1 {
+    flex-basis: auto;
+  }
+  .c2 {
+    flex-basis: auto;
+  }
+  .c3 {
+    flex-basis: auto;
+  }
+  .c4 {
+    flex-basis: auto;
+  }
+  .c5 {
+    flex-basis: auto;
+  }
+}
 /*
 To change this license header, choose License Headers in Project Properties.
 To change this template file, choose Tools | Templates

websrc/src/less/01-layout.less

@@ -24,7 +24,7 @@
 .layout {
   display: grid;
   grid-template-rows: [top] 6vh [line2] 86vh [footer1] 3vh [footer2] 5vh [end];
-  grid-template-columns: [left1] 1fr [left2] 1fr [left3] 8fr [right3] 1fr [right2] 1fr [right1];
+  grid-template-columns: [left1] 1fr [left2] 1fr [left3] 12fr [right3] 1fr [right2] 1fr [right1];
   grid-template-areas: "header header header header header"
   "left . center . ."
   "footer footer footer footer footer"
@@ -33,6 +33,22 @@
   padding: 0;
 }
 
+@media @tablet-down {
+  .layout {
+    position: relative;
+    display: grid;
+    grid-template-rows: [top] 12vh [line2] 86vh [footer1] 3vh [footer2] 8vh [end];
+    grid-template-columns: [left1] 100vw [right1];
+    grid-template-areas: "header"
+    "center"
+    "footer"
+    "bottom";
+    margin: 0;
+    padding: 0;
+  }
+
+}
+
 .header-notify {
   grid-area: header;
   grid-column-start: right3;
@@ -45,6 +61,17 @@
   grid-row-end: end;
 }
 
+@media @tablet-down {
+  .sidebar1 {
+    position: relative;
+    grid-area: header;
+    z-index: 2;
+    top: -300px;
+    right: 0px;
+  }
+
+}
+
 .content {
   grid-area: center;
   grid-row-start: line2;

websrc/src/less/03-typography.less

@@ -23,6 +23,7 @@
 @sidebar1-lh: 2.5em;
 @link-title-lh: normal;
 @devinfo-fs: smaller;
+@devinfo-fs-mobile: .7em;
 
 .small-font {
     font-size: .75em;

websrc/src/less/05-screen.less

@@ -81,11 +81,28 @@
         right: 0;
         color: @unobtrusive;
         font-size: @devinfo-fs;
-        line-height: 1.125em;
+        line-height: .125em;
-        padding-right: 0.25em;
+        padding-right: .25em;
         text-align: right;
     }
 
+    @media @tablet-down {
+        .bottomright {
+            font-size: @devinfo-fs-mobile;
+            font-weight: 300;
+            line-height: 1em;
+            width: 100px;
+        }
+
+        .bottomright p {
+            margin-block-start: 0;
+            margin-block-end: 2px;
+            margin-inline-start: 0;
+            margin-inline-end: 0;
+        }
+
+    }
+
     .bottomleft {
         position: fixed;
         bottom: 0;

websrc/src/less/08-navi.less

@@ -21,19 +21,12 @@
     display: block !important;
   }
 
-  .logo.small.visible {
+  .logo.mobile {
-    padding-left: 118px;
+    display: none;
   }
 
-  @media @phone-down {
+  .logo.small.visible {
-    .logo.big {
+    padding-left: 118px;
-      display: none;
-    }
-
-    .logo.small {
-      display: block;
-    }
-
   }
 
   /*
@@ -74,6 +67,11 @@
     margin: .3em;
   }
 
+  /* Hide mobile menu button! */
+  .nav-main-button.mobile {
+    display: none;
+  }
+
   .nav-menu {
     width: 280px;
     height: 100%;
@@ -162,6 +160,137 @@
 
   }
 
+  /*
+    NAVI MOBILE
+  */
+  @media @tablet-down {
+    .logo.big,
+    .logo.small {
+      display: none;
+    }
+
+    .logo.visible {
+      padding: 0 !important;
+    }
+
+    .logo,
+    .logo.mobile,
+    .logo.mobile.visible {
+      display: block;
+      position: fixed;
+      top: 12px;
+      left: 12px;
+    }
+
+    .logo.big,
+    .logo.big.visible {
+      display: none !important;
+    }
+
+    .nav-main-button {
+      display: none;
+    }
+
+    .nav-main-button.mobile {
+      display: block;
+      position: fixed;
+      top: 2px;
+      right: 0px;
+      z-index: 3;
+    }
+
+    .nav-menu {
+      width: 280px;
+      height: 300px;
+    }
+
+    .nav-menu-minimized .link-title {
+      display: inherit;
+    }
+
+    .nav-menu-minimized .nav-icon,
+    .nav-menu-minimized .nav-main-button {
+      padding-left: 0;
+    }
+
+    /* Here we "revert' maximized / minimized and change the animation */
+    .nav-menu-maximized {
+      -webkit-animation: slide-down 0.1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+      animation: slide-down 0.1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+    }
+
+    .nav-menu-minimized {
+      -webkit-animation: slide-up 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+      animation: slide-up 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+    }
+
+    /**
+     * ----------------------------------------
+     * animations  slide-down / slide-up
+     * ----------------------------------------
+     */
+
+    /* slide-down */
+    @-webkit-keyframes slide-down {
+      0% {
+        -webkit-transform: translateY(0);
+        transform: translateY(0);
+        opacity: 0;
+      }
+
+      100% {
+        -webkit-transform: translateY(300px);
+        transform: translateX(300px);
+        opacity: 1;
+      }
+
+    }
+
+    @keyframes slide-down {
+      0% {
+        -webkit-transform: translateY(0);
+        transform: translateY(0);
+        opacity: 0;
+      }
+
+      100% {
+        -webkit-transform: translateY(300px);
+        transform: translateY(300px);
+        opacity: 1;
+      }
+
+    }
+
+    /* slide-up */
+    @-webkit-keyframes slide-up {
+      0% {
+        -webkit-transform: translateY(0);
+        transform: translateY(0);
+      }
+
+      100% {
+        -webkit-transform: translateY(-300px);
+        transform: translateY(-300px);
+      }
+
+    }
+
+    @keyframes slide-up {
+      0% {
+        -webkit-transform: translateY(0);
+        transform: translateY(0);
+      }
+
+      100% {
+        -webkit-transform: translateY(-300px);
+        transform: translateY(-300px);
+      }
+
+    }
+
+  }
+
+  /* END navi mobile base */
   .selected {
     color: @menu-link-selected;
   }
@@ -238,6 +367,13 @@
     padding-right: 2em;
   }
 
+  @media @tablet-down {
+    .nav-vertical {
+      margin-top: 55px;
+    }
+
+  }
+
   .nav-bottom {
     display: flex;
     flex-direction: column;
@@ -252,9 +388,6 @@
     margin: 0;
   }
 
-  @media @phone-down {
-  }
-
   nav {
     &.grd-left-bar {
       position: fixed;

websrc/src/less/10-center.less

@@ -35,10 +35,11 @@
   }
 
   @media @phone-down {
-    .content {
-      flex-direction: column;
-    }
 
+    /*    .content {
+        flex-direction: column;
+      }
+    */
   }
 
   /* Center Navigation Top */
@@ -59,6 +60,16 @@
     margin: 0 1em;
   }
 
+  @media @tablet-down {
+    .nav-content-list {
+      display: flex;
+      font-size: small;
+      margin-bottom: 0;
+      justify-content: center;
+    }
+
+  }
+
   /* Center Content Container */
   .content-container {
     background-color: @container-background;
@@ -81,11 +92,25 @@
     padding: .5em 25px;
   }
 
+  @media @tablet-down {
+    .info-container {
+      max-width: 90%;
+    }
+
+  }
+
   /* Main Container */
   .main-container {
     width: 100%;
   }
 
+  @media @tablet-down {
+    .main-container {
+      max-width: 100%;
+    }
+
+  }
+
   .default-container {
     width: 90%;
     margin: auto;
@@ -147,6 +172,21 @@
     border-left: 2px solid @info-item-border;
   }
 
+  @media @tablet-down {
+    .content-collection {
+      flex-direction: column;
+      align-items: center;
+    }
+
+    .content-item {
+      margin: .5em 0;
+      margin-right: 0;
+      width: 160px;
+      padding: 1em 2em;
+    }
+
+  }
+
   /* OTHER */
   .info-item i,
   .info-item-link,

websrc/src/less/20-list.less

@@ -43,6 +43,13 @@
         transition-duration: .5s;
     }
 
+    @media @tablet-down {
+        .row {
+            flex-direction: column;
+        }
+
+    }
+
     .row:hover {
         background-color: #f6f7f9;
     }
@@ -91,6 +98,33 @@
         flex: 0 0 320px;
     }
 
+    @media @tablet-down {
+        .cell {
+            padding: .25em 1.5em;
+        }
+
+        .c1 {
+            flex-basis: auto;
+        }
+
+        .c2 {
+            flex-basis: auto;
+        }
+
+        .c3 {
+            flex-basis: auto;
+        }
+
+        .c4 {
+            flex-basis: auto;
+        }
+
+        .c5 {
+            flex-basis: auto;
+        }
+
+    }
+
     .header-cell {
         border-top: 1px solid @content-table-header-border;
         background-color: @content-table-header-bg;
@@ -151,7 +185,7 @@
     }
 
     /* =====================================
-        FORM TOP CONTENT (checkTransaction)
+    FORM TOP CONTENT (checkTransaction)
        =====================================*/
     .form-content {
         padding: 35px;