j1-template 2020.0.3 → 2020.0.8

data/{lib/starter_web/assets → assets}/themes/j1/adapter/js/themer.js

@@ -116,7 +116,7 @@ j1.adapter['themer'] = (function (j1, window) {
   var logger;
   var logText;
 
-  var default_theme_css           = environment === 'production' ? '/assets/themes/j1/core/css/uno.min.css' : '/assets/themes/j1/core/css/uno.css';
+  var default_theme_css           = (environment == 'production') ? '/assets/themes/j1/core/css/uno.min.css' : '/assets/themes/j1/core/css/uno.css';
   var default_theme_extention_css = '{{themer_options.includeBootswatch}}';
   var default_theme_name          = 'Uno';
   var default_theme_author        = 'J1 Team';

data/{lib/starter_web/assets → assets}/themes/j1/adapter/js/toccer.js

@@ -1,5 +1,5 @@
 ---
-regenerate:                             false
+regenerate:                             true
 ---
 
 {% capture j1_cache %}
@@ -54,7 +54,6 @@ regenerate:                             false
 -------------------------------------------------------------------------------- {% endcomment %}
 {% assign toccer_options    = toccer_defaults | merge: toccer_settings %}
 
-
 /*
  # -----------------------------------------------------------------------------
  # ~/assets/themes/j1/adapter/js/toccer.js
@@ -127,10 +126,8 @@ j1.adapter['toccer'] = (function () {
         settings.collapseDepth = {{toccer_options.collapseDepth}};
       }
 
-      if (settings.headingsOffset === undefined) {
-        settings.scrollOffset = {{toccer_options.smoothScrollOffset}};
-      } else {
-        settings.scrollOffset = settings.headingsOffset
+      if (settings.scrollSmoothOffset === undefined) {
+        settings.scrollSmoothOffset = {{toccer_options.scrollSmoothOffset}};
       }
 
       if (settings.enabled === undefined) {
@@ -139,39 +136,16 @@ j1.adapter['toccer'] = (function () {
 
       if (isToc) {
         _this.initToccerCore(settings);
-        _this.setCss();
-
-        /* jadams, 2011-03-11: For now, no need to adjust the top sticky position */
-        /* leave the code in for future use if needed */
-        /* _this.setTop(); */
-
-        // if comments enabled
-        if (isToc && isComments) {
-          logText = 'connector for disqus successfully initialized';
-          logger.info(logText);
-
-          // NOTE: BS or Tocbot Affix is not used anymore.
-          // Replaced by CSS style "sticky"
-          // j1.adapter.toccer.initAffix();
-          // state = 'finished';
-          // logger.info('state: ' + state); // Set|Log status
-          // logger.info('module initialized successfully');
-
-        } else {
-          // if toc enabled only
-          if (isToc) {
-            // state = 'finished';
-            // logger.info('state: ' + state); // Set|Log status
-            // logger.info('module initialized successfully');
+        // set state finished if tocbot has created the toc
+        var dependencies_met_toccer_initialized = setInterval (function () {
+          if ($('ol.toc-list ').length) {
+            _this.setState('finished');
+            logger.info('state: ' + _this.getState());
+            logger.info('module initialized successfully');
+            clearInterval(dependencies_met_toccer_initialized);
           }
-        } // END if isComments (Disqus enabled)
-      } // END if isToc
-
-      _this.setState('finished');
-      logger.info('state: ' + _this.getState());
-      logger.info('module initialized successfully');
-
-      return true;
+        }, 25);
+      }
     }, // END init
 
     // -------------------------------------------------------------------------
@@ -188,122 +162,41 @@ j1.adapter['toccer'] = (function () {
       _this.setState('running');
       logger.info('state: ' + _this.getState());
 
-
-      var bg_primary = j1.getStyleValue('bg-primary', 'background-color');
-
-      tocbot.init({
-        log:                    {{ toccer_options.log | json }},
-        activeLinkColor:        {{ toccer_options.activeLinkColor | json }},
-        tocSelector:            {{ toccer_options.tocSelector | json }},
-        headingSelector:        {{ toccer_options.headingSelector | json }},
-        ignoreSelector:         {{ toccer_options.ignoreSelector | json }},
-        contentSelector:        {{ toccer_options.contentSelector | json }},
-        collapseDepth:          settings.collapseDepth,
-        throttleTimeout:        {{ toccer_options.throttleTimeout | json }},
-        includeHtml:            false,
-        linkClass:              'toc-link',
-        extraLinkClasses:       '',
-        activeLinkClass:        'is-active-link',
-        listClass:              'toc-list',
-        extraListClasses:       '',
-        isCollapsedClass:       'is-collapsed',
-        collapsibleClass:       'is-collapsible',
-        listItemClass:          'toc-list-item',
-        positionFixedSelector:  '',
-        positionFixedClass:     'is-position-fixed',
-        fixedSidebarOffset:     'auto',
-        smoothScroll:           {{ toccer_options.smoothScrollEnabled | json }},
-        smoothScrollOffset:     {{ toccer_options.smoothScrollOffset | json }},
-        smoothScrollDuration:   {{ toccer_options.smoothScrollDuration | json }},
-        headingsOffset:         {{ toccer_options.headingsOffset | json }},
-        throttleTimeout:        {{ toccer_options.throttleTimeout | json }}
-      });
-
-      if (tocbot.options.log == true) {
-        // Writes all of the current option settings to JS console
-        console.log(tocbot.options);
-      }
-
-      return true;
+      // tocbot get fired if HTML portion is loaded (AJAX load finished)
+      var dependencies_met_ajax_load_finished = setInterval (function () {
+        if ($('#toc_mmenu').length) {
+          tocbot.init({
+            log:                    {{ toccer_options.log | json }},
+            activeLinkColor:        {{ toccer_options.activeLinkColor | json }},
+            tocSelector:            {{ toccer_options.tocSelector | json }},
+            headingSelector:        {{ toccer_options.headingSelector | json }},
+            ignoreSelector:         {{ toccer_options.ignoreSelector | json }},
+            contentSelector:        {{ toccer_options.contentSelector | json }},
+            collapseDepth:          settings.collapseDepth,
+            throttleTimeout:        {{ toccer_options.throttleTimeout | json }},
+            includeHtml:            false,
+            linkClass:              'toc-link',
+            extraLinkClasses:       '',
+            activeLinkClass:        'is-active-link',
+            listClass:              'toc-list',
+            extraListClasses:       '',
+            isCollapsedClass:       'is-collapsed',
+            collapsibleClass:       'is-collapsible',
+            listItemClass:          'toc-list-item',
+            positionFixedSelector:  '',
+            positionFixedClass:     'is-position-fixed',
+            fixedSidebarOffset:     'auto',
+            scrollSmooth:           {{ toccer_options.scrollSmooth | json }},
+            scrollSmoothDuration:   {{ toccer_options.scrollSmoothDuration | json }},
+            scrollSmoothOffset:     {{ toccer_options.scrollSmoothOffset | json }},
+            headingsOffset:         {{ toccer_options.headingsOffset | json }},
+            throttleTimeout:        {{ toccer_options.throttleTimeout | json }}
+          });
+          clearInterval(dependencies_met_ajax_load_finished);
+        } // END AJAX load finished
+      }, 25); // END dependencies_met_ajax_load_finished
     }, // END initToccerCore
 
-    // -------------------------------------------------------------------------
-    // Calculate|Set Affix offset Top|Bottom of the Toccer menu
-    // depending on the size of the page header (attic)
-    // -------------------------------------------------------------------------
-    initAffix: function () {
-      var nav_bar         = $('nav.navbar');
-      var side_bar        = $('#j1-sidebar');
-      var header          = $('.attic');
-//    var disqus_id       = $('#disqus');
-      var disqus_id       = $('.bmd-layout-content');
-      var disqus_thread   = $('#disqus_thread');
-      var adblock         = $('#adblock');
-      var footer          = '#' + '{{footer_id}}';
-      var footer_id       = $(footer);
-      var footer_offset   = 100;
-
-      $(side_bar).affix({
-        offset: {
-          top: function() {
-            var c = $(side_bar).offset().top;
-            var a = adblock.length ? adblock.outerHeight() : 0;
-            var e = $(nav_bar).height();
-            var h = $(header).height();
-            var z = c - e;
-            return _this.top = z - a;
-          },
-          bottom: function () {
-            /*  space below the affixed element */
-            if (disqus_id.length) {
-              return (_this.bottom = $(disqus_id).outerHeight(true) + $(footer_id).outerHeight(true) + footer_offset)
-            } else {
-              return (_this.bottom = $(footer_id).outerHeight(true) + footer_offset);
-            }
-          }
-        }
-      });
-
-      return true;
-    }, // END initAffix
-
-    // -------------------------------------------------------------------------
-    // Calculate|Set Top position of the Toccer menu
-    // depending on the size of the page header (attic)
-    // -------------------------------------------------------------------------
-    setTop: function (options) {
-      $(window).scroll(function(event){
-        var navbar    = $('nav.navbar.navigator');
-        var adblock   = $('#adblock');
-        var pagehead  = $('.attic');
-        var offset    = 0;
-        var m         = parseInt(pagehead.css('margin-bottom'), 10);
-        var n         = navbar.outerHeight();
-        var a         = adblock.length ? adblock.outerHeight() : 0;
-        // var o         = n + m + a + offset;
-        var o         = n + m + offset;
-
-        if(navbar.hasClass('navbar-fixed')){
-          $('#j1-sidebar.affix').css('top', o);
-        } else {
-          $('#j1-sidebar.affix').css('top', m);
-        }
-      });
-
-      return true;
-    }, // END setTop
-
-    // -------------------------------------------------------------------------
-    // Set dynamic styles
-    // -------------------------------------------------------------------------
-    setCss: function () {
-
-      var bg_primary  = j1.getStyleValue('bg-primary', 'background-color');
-      $('head').append('<style>.is-active-link::before { background-color: ' +bg_primary+ ' !important; }</style>');
-
-      return true;
-    }, // END setCss
-
     // -------------------------------------------------------------------------
     // messageHandler: MessageHandler for J1 NAV module
     // Manage messages (paylods) send from other J1 modules
@@ -350,4 +243,4 @@ j1.adapter['toccer'] = (function () {
 
 {% endcapture %}
 {{ j1_cache | strip_empty_lines }}
-{% assign j1_cache = nil %}
+{% assign j1_cache = nil %}

data/assets/themes/j1/core/css/globals.css

@@ -4153,7 +4153,7 @@
  # -----------------------------------------------------------------------------
 */
 /* Margin Spaces (xs)
-------------------------------------*/
+-------------------------------------------------------------------------------- */
 @media (min-width: 0) {
   .g-ma-0 {
     margin: 0 !important; }

data/assets/themes/j1/core/css/theme_extensions.css

@@ -258,43 +258,6 @@ img.emoji {
 .hide-scrollbar::-webkit-scrollbar {
   width: 0px; }
 
-/*
- # -----------------------------------------------------------------------------
- #  ~/theme_uno/helpers/sticky.scss
- #  Provides additional body styles
- #
- #  Product/Info:
- #  https://jekyll.one
- #  https://github.com/wilddeer/stickyfill
- #
- #  Copyright (C) 2020 Juergen Adams
- #  Copyright (C) 2017 Oleg Korsunsky
- #
- #  J1 Template is licensed under the MIT License.
- #  See: https://github.com/jekyll-one-org/J1 Template/blob/master/LICENSE
- #  Stickyfill is licensed under the MIT License.
- #  See: https://github.com/wilddeer/stickyfill/blob/master/LICENSE
- #
- # -----------------------------------------------------------------------------
- # TODO:
- # For style sticky, the top offset (top:) should be set by JS dynamically
- #
- # -----------------------------------------------------------------------------
-*/
-/* https://oxygen.wpdemos.net/tocbot/ */
-/* https://github.com/wilddeer/stickyfill */
-@media only screen and (min-width: 993px) {
-  .sticky {
-    position: -webkit-sticky;
-    position: sticky;
-    top: 100px;
-    align-self: flex-start; }
-  /* Clearfix */
-  .sticky:before,
-  .sticky:after {
-    content: '';
-    display: table; } }
-
 /*
  # -----------------------------------------------------------------------------
  #  ~/theme_uno/_components.scss
@@ -9375,7 +9338,7 @@ a.bg-pink:focus, a.bg-pink:hover {
   position: absolute;
   top: .6rem;
   right: .5rem;
-  z-index: 99;
+  z-index: 3;
   display: block;
   padding: .25rem .5rem;
   font-size: .75rem;
@@ -10007,6 +9970,501 @@ html.lb-disable-scrolling {
   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
   opacity: 1; }
 
+/*
+ # -----------------------------------------------------------------------------
+ #  ~/theme_uno/modules/_mmenu-light.scss (v3.0.5)
+ #  Provides base styles for mobile menu light
+ #
+ #  Product/Info:
+ #  https://jekyll.one
+ #  https://github.com/FrDH/mmenu-light
+ #
+ #  Copyright (C) 2020 Fred Heusschen
+ #  Copyright (C) 2020 Juergen Adams
+ #
+ #  J1 Template is licensed under MIT License.
+ #  See: https://github.com/jekyll-one-org/J1 Template/blob/master/LICENSE
+ #  MMenu is licensed under CC-BY-4.0 License.
+ #  See: http://creativecommons.org/licenses/by/4.0/
+ #
+ # -----------------------------------------------------------------------------
+*/
+:root {
+  --mm-ocd-width: 80%;
+  --mm-ocd-min-width: 200px;
+  --mm-ocd-max-width: 440px
+; }
+
+body.mm-ocd-opened {
+  overflow-y: hidden;
+  -ms-scroll-chaining: none;
+  overscroll-behavior: none; }
+
+/*
+  jadams, 2020-06-20: CSS/Offset to the NAV bar should be calculted
+  at runtime as a dyn style
+*/
+.mm-ocd {
+  position: fixed;
+  top: 80px;
+  /* jadams, 2020-06-20: offset to the NAV bar */
+  right: 0;
+  bottom: 100%;
+  left: 0;
+  z-index: 9999;
+  overflow: hidden;
+  -ms-scroll-chaining: none;
+  overscroll-behavior: contain;
+  background: rgba(0, 0, 0, 0);
+  -webkit-transition-property: bottom, background-color;
+  -o-transition-property: bottom, background-color;
+  transition-property: bottom, background-color;
+  -webkit-transition-duration: 0s, .3s;
+  -o-transition-duration: 0s, .3s;
+  transition-duration: 0s, .3s;
+  -webkit-transition-timing-function: ease;
+  -o-transition-timing-function: ease;
+  transition-timing-function: ease;
+  -webkit-transition-delay: .45s, .15s;
+  -o-transition-delay: .45s, .15s;
+  transition-delay: .45s, .15s; }
+
+.mm-ocd--open {
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.25);
+  -webkit-transition-delay: 0s;
+  -o-transition-delay: 0s;
+  transition-delay: 0s; }
+
+.mm-ocd__content {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 2;
+  width: 80%;
+  width: var(--mm-ocd-width);
+  min-width: 200px;
+  min-width: var(--mm-ocd-min-width);
+  max-width: 440px;
+  max-width: var(--mm-ocd-max-width);
+  background: #fff;
+  -webkit-transition-property: -webkit-transform;
+  transition-property: -webkit-transform;
+  -o-transition-property: transform;
+  transition-property: transform;
+  transition-property: transform, -webkit-transform;
+  -webkit-transition-duration: .3s;
+  -o-transition-duration: .3s;
+  transition-duration: .3s;
+  -webkit-transition-timing-function: ease;
+  -o-transition-timing-function: ease;
+  transition-timing-function: ease; }
+
+.mm-ocd--left .mm-ocd__content {
+  left: 0;
+  -webkit-transform: translate3d(-100%, 0, 0);
+  transform: translate3d(-100%, 0, 0); }
+
+.mm-ocd--right .mm-ocd__content {
+  right: 0;
+  -webkit-transform: translate3d(100%, 0, 0);
+  transform: translate3d(100%, 0, 0); }
+
+.mm-ocd--open .mm-ocd__content {
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0); }
+
+.mm-ocd__backdrop {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 3;
+  width: calc(100% - 80%);
+  width: calc(100% - var(--mm-ocd-width));
+  min-width: calc(100% - 440px);
+  min-width: calc(100% - var(--mm-ocd-max-width));
+  max-width: calc(100% - 200px);
+  max-width: calc(100% - var(--mm-ocd-min-width));
+  background: rgba(3, 2, 1, 0); }
+
+.mm-ocd--left .mm-ocd__backdrop {
+  right: 0; }
+
+.mm-ocd--right .mm-ocd__backdrop {
+  left: 0; }
+
+.mm-spn,
+.mm-spn a,
+.mm-spn li,
+.mm-spn span,
+.mm-spn ul {
+  display: block;
+  padding: 0;
+  margin: 0;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box; }
+
+:root {
+  --mm-spn-item-height: 50px;
+  --mm-spn-item-indent: 20px;
+  --mm-spn-line-height: 24px
+; }
+
+.mm-spn {
+  width: 100%;
+  height: 100%;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-overflow-scrolling: touch;
+  overflow: hidden;
+  -webkit-clip-path: inset(0 0 0 0);
+  clip-path: inset(0 0 0 0);
+  -webkit-transform: translateX(0);
+  -ms-transform: translateX(0);
+  transform: translateX(0); }
+
+.mm-spn ul {
+  -webkit-overflow-scrolling: touch;
+  position: fixed;
+  top: 0;
+  left: 100%;
+  bottom: 0;
+  z-index: 2;
+  width: 130%;
+  padding-right: 30%;
+  line-height: 24px;
+  line-height: var(--mm-spn-line-height);
+  overflow: visible;
+  overflow-y: auto;
+  background: inherit;
+  -webkit-transition: left .3s ease 0s;
+  -o-transition: left .3s ease 0s;
+  transition: left .3s ease 0s;
+  cursor: default; }
+
+.mm-spn ul:after {
+  content: '';
+  display: block;
+  height: 50px;
+  height: var(--mm-spn-item-height); }
+
+.mm-spn > ul {
+  left: 0; }
+
+.mm-spn ul.mm-spn--open {
+  left: 0; }
+
+.mm-spn ul.mm-spn--parent {
+  left: -30%;
+  overflow-y: hidden; }
+
+.mm-spn li {
+  position: relative;
+  background: inherit;
+  cursor: pointer; }
+
+.mm-spn li:before {
+  content: '';
+  display: block;
+  position: absolute;
+  top: 25px;
+  top: calc(var(--mm-spn-item-height)/ 2);
+  right: 25px;
+  right: calc(var(--mm-spn-item-height)/ 2);
+  z-index: 0;
+  width: 10px;
+  height: 10px;
+  border-top: 2px solid;
+  border-right: 2px solid;
+  -webkit-transform: rotate(45deg) translate(0, -50%);
+  -ms-transform: rotate(45deg) translate(0, -50%);
+  transform: rotate(45deg) translate(0, -50%);
+  opacity: .4; }
+
+.mm-spn li:after {
+  content: '';
+  display: block;
+  margin-left: 20px;
+  margin-left: var(--mm-spn-item-indent);
+  border-top: 1px solid;
+  opacity: .15; }
+
+.mm-spn a,
+.mm-spn span {
+  position: relative;
+  z-index: 1;
+  padding: 13px 20px;
+  padding: calc((var(--mm-spn-item-height) - var(--mm-spn-line-height))/ 2) var(--mm-spn-item-indent); }
+
+.mm-spn a {
+  background: inherit;
+  color: inherit;
+  text-decoration: none; }
+
+.mm-spn a:not(:last-child) {
+  width: calc(100% - 50px);
+  width: calc(100% - var(--mm-spn-item-height)); }
+
+.mm-spn a:not(:last-child):after {
+  content: '';
+  display: block;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  border-right: 1px solid;
+  opacity: .15; }
+
+.mm-spn span {
+  background: 0 0; }
+
+.mm-spn.mm-spn--navbar {
+  cursor: pointer; }
+
+.mm-spn.mm-spn--navbar:before {
+  content: '';
+  display: block;
+  position: absolute;
+  top: 25px;
+  top: calc(var(--mm-spn-item-height)/ 2);
+  left: 20px;
+  left: var(--mm-spn-item-indent);
+  width: 10px;
+  height: 10px;
+  margin-top: 2px;
+  border-top: 2px solid;
+  border-left: 2px solid;
+  -webkit-transform: rotate(-45deg) translate(50%, -50%);
+  -ms-transform: rotate(-45deg) translate(50%, -50%);
+  transform: rotate(-45deg) translate(50%, -50%);
+  opacity: .4; }
+
+.mm-spn.mm-spn--navbar.mm-spn--main {
+  cursor: default; }
+
+.mm-spn.mm-spn--navbar.mm-spn--main:before {
+  content: none;
+  display: none; }
+
+.mm-spn.mm-spn--navbar:after {
+  content: attr(data-mm-spn-title);
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 50px;
+  height: var(--mm-spn-item-height);
+  padding: 0 40px;
+  padding: 0 calc(var(--mm-spn-item-indent) * 2);
+  line-height: 50px;
+  line-height: var(--mm-spn-item-height);
+  opacity: .4;
+  text-align: left;
+  /* jadams, 2020-06-20: set menu title to the left */
+  overflow: hidden;
+  white-space: nowrap;
+  -o-text-overflow: ellipsis;
+  text-overflow: ellipsis;
+  font-size: x-large;
+  /* jadams, 2020-06-20: increase size of the menu title */ }
+
+.mm-spn.mm-spn--navbar.mm-spn--main:after {
+  padding-left: 20px;
+  padding-left: var(--mm-spn-item-indent); }
+
+.mm-spn.mm-spn--navbar ul {
+  top: 51px;
+  top: calc(var(--mm-spn-item-height) + 1px); }
+
+.mm-spn.mm-spn--navbar ul:before {
+  content: '';
+  display: block;
+  position: fixed;
+  top: inherit;
+  z-index: 2;
+  width: 100%;
+  border-top: 1px solid currentColor;
+  opacity: .15; }
+
+.mm-spn.mm-spn--light {
+  color: #444;
+  background: #f3f3f3; }
+
+/* jadams, 2020-06-20: set j1 template colors (dark theme) */
+.mm-spn.mm-spn--dark {
+  color: #e3e3e3;
+  background: #191919; }
+
+.mm-spn.mm-spn--vertical {
+  overflow-y: auto; }
+
+.mm-spn.mm-spn--vertical ul {
+  width: 100%;
+  padding-right: 0;
+  position: static; }
+
+.mm-spn.mm-spn--vertical ul ul {
+  display: none;
+  padding-left: 20px;
+  padding-left: var(--mm-spn-item-indent); }
+
+.mm-spn.mm-spn--vertical ul ul:after {
+  height: 25px;
+  height: calc(var(--mm-spn-item-height)/ 2); }
+
+.mm-spn.mm-spn--vertical ul.mm-spn--open {
+  display: block; }
+
+.mm-spn.mm-spn--vertical li.mm-spn--open:before {
+  -webkit-transform: rotate(135deg) translate(-50%, 0);
+  -ms-transform: rotate(135deg) translate(-50%, 0);
+  transform: rotate(135deg) translate(-50%, 0); }
+
+.mm-spn.mm-spn--vertical ul ul li:last-child:after {
+  content: none;
+  display: none; }
+
+/*
+ # -----------------------------------------------------------------------------
+ #  ~/theme_uno/modules/_mmenu-theme-uno.scss
+ #  Provides theme styles (Uno) for mobile menu
+ #
+ #  Product/Info:
+ #  https://jekyll.one
+ #
+ #  Copyright (C) 2020 Juergen Adams
+ #
+ #  J1 Template is licensed under MIT License.
+ #  See: https://github.com/jekyll-one-org/J1 Template/blob/master/LICENSE
+ # -----------------------------------------------------------------------------
+*/
+/*
+  jadams, 2020-06-20: CSS/Offset to the NAV bar should be calculated
+  at runtime as a dyn style
+*/
+/* CSS overwrites
+   ----------------------------------------------------------------------------- */
+/* Drawer */
+.mm-ocd--left .mm-ocd__content {
+  background-color: #212121; }
+
+.mm-ocd--right .mm-ocd__content {
+  background-color: #212121; }
+
+/* Responsive */
+/* jadams, 2020-07-02: media query for MMenu
+--------------------------------------------------------------------------------
+NOTE: For unknown reason, style "mm-ocd--left" is NOT applied correctly
+      like "mm-ocd--right" what cause the wrong background-color
+      As a workaround, the background-color is added to the media
+      queries as well (but MUST be removed if fixed!!!)
+-------------------------------------------------------------------------------- */
+/* Large desktop */
+@media only screen and (min-width: 1200px) {
+  .mm-ocd {
+    top: 80px;
+    /* drawer top offset to NAV bar */ }
+  .mm-ocd__content {
+    background-color: #212121; } }
+
+/* Desktop */
+@media only screen and (min-width: 992px) {
+  .mm-ocd {
+    top: 80px;
+    /* drawer top offset to NAV bar */ }
+  .mm-ocd__content {
+    background-color: #212121; } }
+
+/* Desktop 2 (intermediate|responsive size) */
+@media only screen and (min-width: 768px) and (max-width: 992px) {
+  .mm-ocd {
+    top: 68px;
+    /* drawer top offset to NAV bar */ }
+  .mm-ocd__content {
+    background-color: #212121; } }
+
+/* Landscape iPad, 768px */
+@media only screen and (min-width: 576px) and (max-width: 768px) {
+  .mm-ocd {
+    top: 68px;
+    /* drawer top offset to NAV bar */ }
+  .mm-ocd__content {
+    background-color: #212121; } }
+
+/* Small devices (landscape phones, up to 576px) */
+@media only screen and (max-width: 576px) {
+  .mm-ocd {
+    top: 68px;
+    /* drawer top offset to NAV bar */ }
+  .mm-ocd__content {
+    background-color: #212121; } }
+
+/* Navigator */
+.mm-spn.mm-spn--navbar:after {
+  text-align: left;
+  /* jadams, 2020-06-20: set menu title to the left */
+  font-size: x-large;
+  /* jadams, 2020-06-20: increase size of the menu title */ }
+
+/* Themes */
+/* jadams, 2020-06-20: set j1 template colors (dark theme) */
+.mm-spn.mm-spn--dark {
+  color: #e3e3e3;
+  background: #191919; }
+
+/* Sidebar (Drawer)
+   ----------------------------------------------------------------------------- */
+.mm-side {
+  margin: 1.5rem; }
+
+.mm-side .widget {
+  position: relative;
+  z-index: 1;
+  margin-bottom: 25px; }
+
+.mm-side .widget .title {
+  color: #fff;
+  margin-bottom: 15px;
+  border-left: 3px solid #204a87;
+  padding-left: 5px; }
+
+.mm-side .widget .heading {
+  text-align: left;
+  color: #eee;
+  font-size: 18px;
+  text-transform: uppercase;
+  position: relative;
+  margin-bottom: 10px;
+  padding-bottom: 10px; }
+
+.mm-side .widget ul.link {
+  font-family: Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;
+  font-size: 14px;
+  padding: 0;
+  margin: 0;
+  list-style: none; }
+
+.mm-side .widget ul.link li a {
+  color: #aaa; }
+
+.mm-side .widget ul.link li a:focus, .mm-side .widget ul.link li a:hover {
+  color: #fafafa;
+  text-decoration: none;
+  font-weight: 700; }
+
+/* Navigation (Menu)
+   ----------------------------------------------------------------------------- */
+.mm-spn a:hover {
+  color: #fafafa;
+  text-decoration: none;
+  font-weight: 700; }
+
+/* jadams, 2020-07-03: added hover to global style */
+a.toc-link:hover {
+  color: #fafafa;
+  text-decoration: none;
+  font-weight: 700; }
+
 /*
  # -----------------------------------------------------------------------------
  #  ~/theme_uno/modules/_navigator.scss
@@ -10129,7 +10587,7 @@ nav.navigator.navbar-full {
     left: 0;
     padding: 0;
     display: none !important;
-    z-index: 9; }
+    z-index: 99; }
     nav.navigator.navbar-full .navbar-collapse.in {
       display: block !important; }
     nav.navigator.navbar-full .navbar-collapse .nav-full {
@@ -10438,9 +10896,6 @@ nav.navbar.navigator {
     transition: all 1s ease-in-out;
     background-color: transparent;
     border-bottom: 0; }
-  nav.navbar.navigator.navbar-transparent .attr-nav {
-    padding-left: 15px;
-    margin-left: 30px; }
   nav.navbar.navigator.navbar-transparent.light {
     background-color: rgba(255, 255, 255, 0.3);
     border-bottom: solid 3px #fafafa; }
@@ -10490,12 +10945,12 @@ nav.navbar.navbar-inverse.navigator.navbar-transparent.dark {
   border-left: solid 1px #555; }
 
 .attr-nav {
-  margin-left: 13px;
+  margin-left: 0;
   margin-right: -20px;
   float: right;
   position: relative;
   display: inline-block;
-  margin-right: 20px; }
+  margin-right: 3.5rem; }
   .attr-nav > ul {
     list-style: none;
     overflow: hidden; }
@@ -10725,7 +11180,7 @@ body {
     nav.navigator.navbar-full ul.nav > li > a {
       border: none; }
   nav.navbar.navigator {
-    background-color: #3f51b5;
+    background-color: #607d8b;
     /*			.dropdown-menu .dropdown-item {
 				padding: .5rem;
 				max-width: unset;
@@ -10750,8 +11205,7 @@ body {
         nav.navbar.navigator .navbar-collapse.collapse.in {
           display: block !important; }
         nav.navbar.navigator .navbar-collapse.collapse.show {
-          display: block !important;
-          background-color: #3f51b5; }
+          display: block !important; }
     nav.navbar.navigator .navbar-nav {
       float: none !important;
       padding-left: 30px;
@@ -10874,11 +11328,15 @@ body {
     nav.navbar.navigator.navbar-fixed .logo-display {
       display: none !important; }
     nav.navbar.navigator .navbar-toggler {
-      color: rgba(255, 255, 255, 0.5) !important;
-      padding: 1rem 1.75rem;
+      color: rgba(255, 255, 255, 0.5);
+      padding: 1rem 0.5rem 1rem 0.5rem;
       border: 0;
       border-color: transparent;
       border-radius: 0; }
+      nav.navbar.navigator .navbar-toggler:hover {
+        color: rgba(255, 255, 255, 0.9); }
+      nav.navbar.navigator .navbar-toggler:focus {
+        color: rgba(255, 255, 255, 0.9); }
     nav.navbar.navigator .dropdown-item:focus {
       background-color: rgba(0, 0, 0, 0.5) !important; }
     nav.navbar.navigator .dropdown-item:hover {
@@ -10930,11 +11388,11 @@ body {
       nav.navbar.navigator .navbar-default .navbar-nav > li > a:hover {
         color: #2196f3 !important; }
     nav.navbar.navigator.navbar-transparent.light {
-      background-color: #3f51b5;
+      background-color: rgba(0, 0, 0, 0.4) !important;
       border-bottom: 0; }
   .attr-nav {
     position: absolute;
-    right: 80px;
+    right: 2.5rem;
     margin-right: 0;
     overflow: hidden; }
     .attr-nav > ul {
@@ -10996,7 +11454,7 @@ body {
     line-height: 24px !important;
     padding: 5px 10px !important; }
   .attr-nav {
-    right: 5rem; }
+    right: 2.5rem; }
     .attr-nav > ul {
       margin-right: -10px; }
       .attr-nav > ul > li > a {
@@ -11452,7 +11910,145 @@ h4.result-item > a:hover {
 
 /*
  # -----------------------------------------------------------------------------
- #  ~/theme_uno/modules/_toccer.scss
+ #  ~/theme_uno/modules/_ssm.scss
+ #  Styles for J1 Sticky Side Menu
+ #
+ #  Product/Info:
+ #  https://jekyll.one
+ #
+ #  Copyright (C) 2020 Juergen Adams
+ #
+ #  J1 Template is licensed under the MIT License.
+ #  See: https://github.com/jekyll-one-org/J1 Template/blob/master/LICENSE
+ #
+ # -----------------------------------------------------------------------------
+*/
+#ssm-container {
+  position: fixed;
+  top: 0;
+  z-index: 4;
+  display: none; }
+
+.ssm-btns-right {
+  right: 0; }
+
+.ssm-btns-left {
+  left: 0; }
+
+/* jadams, 2020-06-16: */
+.ssm-btn {
+  background: #212121; }
+
+.ssm-share-btn {
+  background: #212121; }
+
+.ssm-sub-menu {
+  background: #212121; }
+
+#ssm-container ul {
+  padding: 0;
+  margin: 0; }
+
+#ssm-container ul li {
+  list-style: none;
+  line-height: 45px;
+  margin: 0; }
+
+#ssm-container ul li a {
+  color: #9e9e9e;
+  padding: 0 15px 0 0;
+  display: inline-flex;
+  line-height: 45px;
+  text-align: left;
+  white-space: nowrap;
+  text-decoration: none; }
+
+#ssm-container.ssm-btns-left ul li a {
+  text-align: right;
+  padding: 0 0 0 15px; }
+
+#ssm-container ul li:hover {
+  text-decoration: none;
+  background: #d2d4dc; }
+
+#ssm-container .ssm-share-btn {
+  position: relative; }
+
+#ssm-container .ssm-share-btn a {
+  padding: 0; }
+
+#ssm-container.ssm-btns-left .ssm-share-btn i.ssm-share-icon {
+  float: right !important; }
+
+#ssm-container ul li.ssm-share-btn:hover .ssm-sub-menu {
+  display: block; }
+
+.ssm-sub-menu {
+  position: absolute;
+  top: 100%;
+  left: 100%;
+  margin: 0 0 0 -50px;
+  width: 155px;
+  display: none; }
+
+#ssm-container.ssm-btns-right .ssm-sub-menu {
+  right: -100%;
+  margin: 0 0 0 -110px;
+  left: 0; }
+
+#ssm-container .ssm-sub-menu a {
+  padding: 0 !important;
+  text-align: left !important; }
+
+/* Old icon font styles */
+/*
+#ssm-container ul li span {
+    line-height: 45px;
+    width: 50px;
+    text-align: center;
+    display: inline-block;
+}
+
+#ssm-container.ssm-btns-left ul li span {
+    float: right;
+}
+
+#ssm-container .ssm-share-btn span,
+#ssm-container.ssm-btns-left .ssm-share-btn span {
+    float: none;
+}
+*/
+/*
+#ssm-container.ssm-anim-icons ul li {
+    transition: transform 100ms;
+}
+
+#ssm-container.ssm-anim-icons.ssm-btns-right ul li:hover {
+    transform: translate(-15px, 0);
+}
+
+#ssm-container.ssm-anim-icons.ssm-btns-left ul li:hover {
+    transform: translate(15px, 0);
+}
+*/
+/* Responsive */
+/* jadams, 2020-06-29: media query for SSM
+-------------------------------------------------------------------------------- */
+/* Landscape iPad, 768px */
+@media only screen and (min-width: 576px) and (max-width: 768px) {
+  .container, .container-fluid {
+    padding-right: 30px !important;
+    /* space for ssm */ } }
+
+/* Small devices (landscape phones, up to 576px) */
+@media only screen and (max-width: 576px) {
+  .container, .container-fluid {
+    padding-right: 30px !important;
+    /* space for ssm */ } }
+
+/*
+ # -----------------------------------------------------------------------------
+ #  ~/theme_uno/modules/_toccer.scss (v4.11.2)
  #  Provides base styles for the toc navigation based on Tim Scanlin's Tocbot
  #
  #  Product/Info:
@@ -11462,34 +12058,36 @@ h4.result-item > a:hover {
  #  Copyright (C) 2016 Tim Scanlin
  #  Copyright (C) 2020 Juergen Adams
  #
- #  J1 Template is licensed under the MIT License.
+ #  J1 Template is licensed under MIT License.
  #  See: https://github.com/jekyll-one-org/J1 Template/blob/master/LICENSE
- #  Tocbot: Licensed under Open Source Iniative MIT.
- #  See: http://opensource.org/licenses/MIT
+ #  Tocbot is licensed under MIT License.
+ #  See: https://github.com/tscanlin/tocbot/blob/master/LICENSE
  #
  # -----------------------------------------------------------------------------
 */
 .toc {
   overflow-y: auto; }
-  .toc ul {
-    overflow: hidden;
-    position: relative;
-    list-style: none;
-    list-style-type: none !important; }
+
+.toc > .toc-list {
+  overflow: hidden;
+  position: relative; }
+
+.toc > .toc-list li {
+  list-style: none; }
 
 .toc-list {
   margin: 0;
   padding-left: 10px; }
 
-.toc-link::before {
-  background-color: #E0E0E0;
-  content: ' ';
-  display: inline-block;
-  height: inherit;
-  left: 0;
-  margin-top: -1px;
-  position: absolute;
-  width: 2px; }
+a.toc-link {
+  color: #757575;
+  height: 100%;
+  font-size: 1rem; }
+
+a.toc-link:hover {
+  color: #fafafa;
+  text-decoration: none;
+  font-weight: 700; }
 
 .is-collapsible {
   max-height: 1000px;
@@ -11503,52 +12101,18 @@ h4.result-item > a:hover {
   position: fixed !important;
   top: 0; }
 
-.j1-sidebar.affix {
-  position: fixed !important; }
+.is-active-link {
+  font-weight: 700; }
 
-a.toc-link {
-  color: #757575;
-  height: 100%;
-  font-size: 1rem;
-  text-decoration: none !important; }
+.toc-link::before {
+  background-color: #E0E0E0;
+  content: ' ';
+  display: inline-block;
+  height: inherit;
+  left: 0;
+  margin-top: -1px;
+  position: absolute;
+  width: 2px; }
 
-/*
- # -----------------------------------------------------------------------------
- # ~/theme_uno/modules/_totop.scss
- # Provides CSS styles for J1 Back2Top
- #
- #  Product/Info:
- #  https://jekyll.one
- #
- #  Copyright (C) 2020 Juergen Adams
- #
- #  J1 Template is licensed under the MIT License.
- #  See: https://github.com/jekyll-one-org/J1 Template/blob/master/LICENSE
- #
- # -----------------------------------------------------------------------------
- # NOTE: Styles
- #
- #	topcontrol.position,
- #	topcontrol.background,
- #	topcontrol.content:after,
- #	topcontrol.font-family:after
- #	topcontrol.background:hover
- #
- #  set dynamically via adapter back2top.js
- # -----------------------------------------------------------------------------
-*/
-#topcontrol {
-  color: white;
-  z-index: 99;
-  width: 30px;
-  height: 30px;
-  font-size: 20px;
-  border-radius: 3px !important; }
-  #topcontrol:after {
-    top: 0;
-    left: 5px;
-    position: absolute;
-    text-align: center; }
-  #topcontrol:hover {
-    color: white;
-    transition: all 0.3s ease-in-out; }
+.is-active-link::before {
+  background-color: #757575; }