j1_template_mde 2018.4.17 → 2018.4.18

data/lib/starter_web/_data/modules/j1_toccer.yml

@@ -143,7 +143,7 @@ defaults:
   headingsOffset:                   500
   ignoreSelector:                   .notoc
   contentSelector:                  .js-toc-content
-  activeLinkColor:                  "#E91E63"
+  activeLinkColor:                  "#3F51B5"
   collapseDepth:                    2
   throttleTimeout:                  50
   includeHtml:                      false

data/lib/starter_web/assets/data/banner.html

@@ -91,11 +91,17 @@ regenerate:                             false
     <div id="{{id}}">
     {% case type %}
 
+      {% comment %} Collect DIVIDER banner
+      -------------------------------------------------------------------------- {% endcomment %}
+      {% when 'divider_banner' %}
+      <div class="row banner-divider"></div>
+
+
       {% comment %} Collect TEASER banner
       -------------------------------------------------------------------------- {% endcomment %}
       {% when 'teaser_banner' %}
 
-      <div class="banner-teaser">
+      <div class="banner-teaser {{id}}-background">
         <div class="{{container_class}} j1-banner-block">
 
             {% assign box_items = boxes | size %}
@@ -147,7 +153,7 @@ regenerate:                             false
               {% endif %}
 
               {% assign patreon_enabled     = true %}
-              {% assign patreon_home        = 'https://www.patreon.com' %}              
+              {% assign patreon_home        = 'https://www.patreon.com' %}
               {% assign pledge_url          = 'join' %}
               {% assign vanity              = 'jekyll_one' %}
               {% assign pledge_button_text  = 'Become a Patron' %}
@@ -161,14 +167,14 @@ regenerate:                             false
                     <h3 class="title">{{box_title}}</h3>
                     <p class="description">{{box_description}}</p>
                     <p class="tagline mt-4">{{box_tagline}}</p>
-                  </div>
-                </div>
-                <div class="row btn-row mt-4">
-                  <div class="col-md-{{box_width_md}} col-md-offset-1 col-sm-{{box_width_md}} col-sm-offset-1 col-xs-{{box_width_md | plus:2}}">
-                    {% for button_hash in box_buttons %}
-                      {% include {{create_bs_button}} button_data=button_hash button_type="link" %}
-                      {{bs_button_html}}
-                    {% endfor %}
+                    <div class="row btn-row mt-4">
+                      <div class="col-md-{{box_width_md}} col-md-offset-1 col-sm-{{box_width_md}} col-sm-offset-1 col-xs-{{box_width_md | plus:2}}">
+                        {% for button_hash in box_buttons %}
+                          {% include {{create_bs_button}} button_data=button_hash button_type="link" %}
+                          {{bs_button_html}}
+                        {% endfor %}
+                      </div>
+                    </div>
                   </div>
                 </div>
               {% endif %}
@@ -199,6 +205,72 @@ regenerate:                             false
       {% comment %} END TEASER banner
       -------------------------------------------------------------------------- {% endcomment %}
 
+      {% comment %} Collect IMAGE banner
+      -------------------------------------------------------------------------- {% endcomment %}
+      {% when 'image_banner' %}
+
+        {% for box in boxes %}
+
+          {% for items in box %}
+            {% for item in items[1] %}
+              {% assign key   = item[0] %}
+              {% assign value = item[1] %}
+              {% if key == 'enabled' %}               {% assign enabled           = value %}                   {% endif %}
+              {% if key == 'gridify' %}               {% assign gridify           = value %}                   {% endif %}
+              {% if key == 'gridifier' %}             {% assign gridifier         = value %}                   {% endif %}
+              {% if key == 'darken' %}                {% assign darken            = value %}                   {% endif %}
+              {% if key == 'size_y' %}                {% assign size_y            = value %}                   {% endif %}
+              {% if key == 'background_image' %}      {% assign background_image  = value %}                   {% endif %}
+            {% endfor %}
+          {% endfor %}
+
+          {% if enabled %}
+
+            {% capture darken %}0.{{darken}}{% endcapture %}
+
+            {% comment %} Set STYLE tags
+            -------------------------------------------------------------------- {% endcomment %}
+            $('head').append(
+              "<style>
+                .{{id}}-image{background:url("{{background_image}}"); min-height: {{size_y}}px; background-position: center;  background-repeat: no-repeat; background-size: cover; }
+                /* .{{id}}-image:before{top:0;left:0;width:100%;height:100%;content:" ";position:absolute;{% if gridify == true %}background: url("{{gridifier}}") repeat;{% endif %}} */
+                /* .{{id}}-image:after{top:0;left:0;width:100%;height:100%;content:" ";position:absolute;background:rgba(0,0,0,{{darken}})} */
+              </style>"
+            );
+
+            <div class="panel-fluid">
+              <div class="row no-gutters {{id}}-image"></div>
+            </div>
+
+          {% endif %}
+        {% endfor %}
+        {% comment %} END boxes
+        ------------------------------------------------------------------------ {% endcomment %}
+
+        {% comment %} Reset element variables
+        ------------------------------------------------------------------------ {% endcomment %}
+        {% assign box_enabled                = nil %}
+        {% assign box_width                  = nil %}
+        {% assign box_type                   = nil %}
+        {% assign box_icon                   = nil %}
+        {% assign box_icon_color             = nil %}
+        {% assign box_icon_size              = nil %}
+        {% assign box_image_path             = nil %}
+        {% assign box_animate                = nil %}
+        {% assign box_title                  = nil %}
+        {% assign box_tagline                = nil %}
+        {% assign box_text                   = nil %}
+        {% assign box_buttons                = nil %}
+        {% assign box_width_md               = nil %}
+        {% assign box_cite                   = nil %}
+        {% assign box_gridifye               = nil %}
+        {% assign box_darken                 = nil %}
+        {% assign box_background_size        = nil %}
+        {% assign box_background_image       = nil %}
+
+        {% comment %} END IMAGE banner
+        ------------------------------------------------------------------------ {% endcomment %}
+
 
       {% comment %} Collect PARALLAX banner
       -------------------------------------------------------------------------- {% endcomment %}
@@ -219,9 +291,8 @@ regenerate:                             false
               {% if key == 'gridify' %}               {% assign box_gridify               = value %}                   {% endif %}
               {% if key == 'gridifier' %}             {% assign box_gridifier             = value %}                   {% endif %}
               {% if key == 'darken' %}                {% assign box_darken                = value %}                   {% endif %}
+              {% if key == 'size_y' %}                {% assign box_background_size       = value %}                   {% endif %}
               {% if key == 'background_image' %}      {% assign box_background_image      = value %}                   {% endif %}
-              {% if key == 'background_position_x' %} {% assign box_background_position_x = value %}                   {% endif %}
-              {% if key == 'background_position_y' %} {% assign box_background_position_y = value %}                   {% endif %}
             {% endfor %}
           {% endfor %}
 
@@ -231,8 +302,6 @@ regenerate:                             false
             -------------------------------------------------------------------- {% endcomment %}
             {% assign parallax_defaults     = site.data.modules.j1_parallax.parallax_quote %}
             {% assign background_image      = parallax_defaults.background %}
-            {% assign background_pos_x      = parallax_defaults.background_pos_x %}
-            {% assign background_pos_y      = parallax_defaults.background_pos_y %}
             {% assign gridify               = parallax_defaults.gridify %}
             {% assign gridifier             = parallax_defaults.gridifier %}
             {% assign text_color            = parallax_defaults.text_color %}
@@ -246,9 +315,8 @@ regenerate:                             false
             {% if box_darken %}                {% assign darken            = box_darken %}                {% endif %}
             {% if box_text_color %}            {% assign text_color        = box_text_color %}            {% endif %}
             {% if box_cite_color %}            {% assign cite_color        = box_cite_color %}            {% endif %}
+            {% if box_background_size %}       {% assign size_y            = box_background_size %}       {% endif %}
             {% if box_background_image %}      {% assign background_image  = box_background_image %}      {% endif %}
-            {% if box_background_position_x %} {% assign background_pos_x  = box_background_position_x %} {% endif %}
-            {% if box_background_position_y %} {% assign background_pos_y  = box_background_position_y %} {% endif %}
 
             {% capture darken %}0.{{darken}}{% endcapture %}
 
@@ -262,31 +330,33 @@ regenerate:                             false
             ----------------------------------------------------- {% endcomment %}
             $('head').append(
               "<style>
-                .{{id}}-parallaxBg{background:url({{background_image}}) 50% 0 repeat fixed}
+                .{{id}}-parallaxBg{background:url("{{background_image}}"); min-height: {{size_y}}px; background-attachment: fixed; background-position: center;  background-repeat: no-repeat; background-size: cover; }
                 .{{id}}-parallax-quote{color:#fff;padding:100px 0;position:relative;text-align:center}
-                .{{id}}-parallax-quote:before{top:0;left:0;width:100%;height:100%;content:" ";position:absolute;{% if gridify %}background:url({{gridifier}}) repeat;{% endif %}}
+                .{{id}}-parallax-quote:before{top:0;left:0;width:100%;height:100%;content:" ";position:absolute;{% if gridify == true %}background: url("{{gridifier}}") repeat;{% endif %}}
                 .{{id}}-parallax-quote:after{top:0;left:0;width:100%;height:100%;content:" ";position:absolute;background:rgba(0,0,0,{{darken}})}
-                .{{id}}-parallax-quote-in{z-index:1;position:relative}
+                .{{id}}-parallax-quote-in{z-index: 2;position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; padding: 20px; text-align: center; }
                 .{{id}}-parallax-quote-in p{color:{{text_color}};font-size:200%;text-transform:uppercase;}
+                {% if box_text %}
                 .{{id}}-parallax-quote-in p:after,.{{id}}-parallax-quote-in p:before{content:' " ';}
+                {% endif %}
                 .{{id}}-parallax-quote-in small{color:{{cite_color}};font-size:100%;font-weight:600;}
                 .{{id}}-parallax-quote:after{background: rgba(0,0,0,{{darken}})}
-                .{{id}}-parallaxBg{background: url({{background_image}} {{background_pos_x}} {{background_pos_y}} repeat fixed}
               </style>"
             );
 
-            <div class="{{container_class}} j1-banner-block">
+            <!-- div class="{{container_class}} j1-banner-block" -->
+              <div class="panel-fluid">
               <div class="row no-gutters {{id}}-parallax-quote {{id}}-parallaxBg">
                 <div class="col-md-12 col-xs-12 {{id}}-parallax-quote-in">
-                  <p>{{box_text}}</p>
-                  <i>{{box_cite}}</i>
+                  {% if box_text %} <p>{{box_text}}</p>{% endif %}
+                  {% if box_text %}<i>{{box_cite}}</i>{% endif %}
                 </div>
               </div>
             </div>
 
           {% endif %}
         {% endfor %}
-        {% comment %} END boxes 
+        {% comment %} END boxes
         ------------------------------------------------------------------------ {% endcomment %}
 
         {% comment %} Reset element variables
@@ -307,9 +377,8 @@ regenerate:                             false
         {% assign box_cite                   = nil %}
         {% assign box_gridifye               = nil %}
         {% assign box_darken                 = nil %}
+        {% assign box_background_size        = nil %}
         {% assign box_background_image       = nil %}
-        {% assign box_background-position-x  = nil %}
-        {% assign box_background-position-y  = nil %}
 
         {% comment %} END PARALLAX banner
         ------------------------------------------------------------------------ {% endcomment %}

data/lib/starter_web/assets/data/menu.html

@@ -175,9 +175,9 @@ regenerate:                             true
       <!-- [INFO   ] [j1.modules.navigator.menu.html  ] [submenu level 1 detected] -->
       <li class="dropdown nav-item">
         {% if menu.icon == null %}
-          <a href="javascript:void(0)" class="nav-link dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">{{ menu.item }}</a>
+          <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">{{ menu.item }}</a>
         {% else %}
-          <a href="javascript:void(0)" class="nav-link dropdown-toggle" data-toggle="dropdown" data-hover="dropdown"> <i class="{{nav_menu_icon_style}} {{nav_menu_icon_family}}-{{menu.icon}} {{nav_menu_icon_size}} mr-2" style="color:{{nav_menu_icon_color}}"></i>{{ menu.item }}</a>
+          <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" data-hover="dropdown"> <i class="{{nav_menu_icon_style}} {{nav_menu_icon_family}}-{{menu.icon}} {{nav_menu_icon_size}} mr-2" style="color:{{nav_menu_icon_color}}"></i>{{ menu.item }}</a>
         {% endif %}
 
         <!-- jadams, 2017-11-24: (3) ul class="dropdown-menu {{nav_menu_position}} raised-z{{raised_level}}" style="opacity: 1; display: none;" -->
@@ -203,9 +203,9 @@ regenerate:                             true
             <!-- [INFO   ] [j1.modules.navigator.menu.html  ] [submenu level 2 (dropdown) detected] -->
             <li class="dropdown nav-item nav-sub-item">
               {% if level_1.icon == null %}
-                <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">{{ level_1.title }}</a>
+                <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{ level_1.title }}</a>
               {% else %}
-                <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown"><i class="{{nav_menu_icon_style}} {{nav_menu_icon_family}}-{{level_1.icon}} {{nav_menu_icon_size}} mr-2" style="color:{{nav_menu_icon_color}}"></i> {{ level_1.title }}</a>
+                <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="{{nav_menu_icon_style}} {{nav_menu_icon_family}}-{{level_1.icon}} {{nav_menu_icon_size}} mr-2" style="color:{{nav_menu_icon_color}}"></i> {{ level_1.title }}</a>
               {% endif %}
               <!-- jadams, 2017-11-24: (4) ul class="dropdown-menu {{nav_menu_position}} raised-z{{raised_level}}" style="opacity: 1;" -->
               <ul class="dropdown-menu {{nav_menu_position}} raised-z{{raised_level}}">
@@ -230,9 +230,9 @@ regenerate:                             true
                     <!-- [INFO   ] [j1.modules.navigator.menu.html  ] [submenu level 3 detected (last level supported)] -->
                     <li class="dropdown nav-item nav-sub-item">
                       {% if level_2.icon == null %}
-                        <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">{{ level_2.title }}</a>
+                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{ level_2.title }}</a>
                       {% else %}
-                        <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown"><i class="{{nav_menu_icon_style}} {{nav_menu_icon_family}}-{{level_2.icon}} {{nav_menu_icon_size}} mr-2" style="color:{{nav_menu_icon_color}}"></i> {{ level_2.title }}</a>
+                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="{{nav_menu_icon_style}} {{nav_menu_icon_family}}-{{level_2.icon}} {{nav_menu_icon_size}} mr-2" style="color:{{nav_menu_icon_color}}"></i> {{ level_2.title }}</a>
                       {% endif %}
                       <!-- jadams, 2017-11-24: (5) ul class="dropdown-menu {{nav_menu_position}} raised-z{{raised_level}}" style="opacity: 1;" -->
                       <ul class="dropdown-menu {{nav_menu_position}} raised-z{{raised_level}}">
@@ -276,7 +276,7 @@ regenerate:                             true
       <!-- [INFO   ] [j1.modules.navigator.menu.html  ] [Calculated size of mm_columns: {{ columns_width_md }}] -->
 
       <li class="dropdown nav-item megamenu-fw">
-        <a href="javascript:void(0)" class="nav-link dropdown-toggle" data-toggle="dropdown">{{menu.item}} </a>
+        <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">{{menu.item}} </a>
         <ul class="dropdown-menu megamenu-content raised-z{{raised_level}}" style="max-height: {{nav_menu_options.max_height}}px; overflow-x: hidden; overflow-y: auto;" role="menu">
           <li>
             <div class="row">
@@ -345,7 +345,7 @@ regenerate:                             true
         {% when 'auth_client' %}
           <!-- [INFO   ] [j1.modules.navigator.menu.html  ] [found menu-type: auth_client] -->
           <li id="menuBarSignInOut" class="dropdown nav-item">
-            <a href="javascript:void(0)" class="nav-link dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">{{menu.item}} </a>
+            <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">{{menu.item}} </a>
 
             {% if nav_menu_animation %}
             <!-- jadams, 2017-11-24: (1) ul class="dropdown-menu {{nav_menu_position}} raised-z{{raised_level}}" style="opacity: 1; display: none;" -->
@@ -362,7 +362,7 @@ regenerate:                             true
                 <!-- [INFO   ] [j1.modules.navigator.menu.html  ] [START: check signin] -->
                 {% if item.mode == 'signin' %}
                   <li class="dropdown-item">
-                    <a href="javascript:void(0)" data-toggle="modal" data-target="#modalOmniSignIn"><i class="{{nav_menu_icon_style}} {{nav_menu_icon_family}}-{{item.icon}} {{nav_menu_icon_size}}" style="color:{{nav_menu_icon_color}}"></i>{{item.title}}</a>
+                    <a href="#" data-toggle="modal" data-target="#modalOmniSignIn"><i class="{{nav_menu_icon_style}} {{nav_menu_icon_family}}-{{item.icon}} {{nav_menu_icon_size}}" style="color:{{nav_menu_icon_color}}"></i>{{item.title}}</a>
                   </li>
                   {% assign item_found = 'true' %}
                 {% endif %}
@@ -371,7 +371,7 @@ regenerate:                             true
                 <!-- [INFO   ] [j1.modules.navigator.menu.html  ] [START: check signout] -->
                 {% if item.mode == 'signout' %}
                   <li class="dropdown-item">
-                    <a href="javascript:void(0)" data-toggle="modal" data-target="#modalOmniSignOut"><i class="{{nav_menu_icon_style}} {{nav_menu_icon_family}}-{{item.icon}} {{nav_menu_icon_size}}" style="color:{{nav_menu_icon_color}}"></i>{{item.title}}</a>
+                    <a href="#" data-toggle="modal" data-target="#modalOmniSignOut"><i class="{{nav_menu_icon_style}} {{nav_menu_icon_family}}-{{item.icon}} {{nav_menu_icon_size}}" style="color:{{nav_menu_icon_color}}"></i>{{item.title}}</a>
                   </li>
                   {% assign item_found = 'true' %}
                 {% endif %}
@@ -381,9 +381,9 @@ regenerate:                             true
                 <!-- [FATAL  ] [j1.modules.navigator.menu.html  ] [no valid menu item config found] -->
                   <li class="dropdown-item">
                     {% if item.title %}
-                      <a href="javascript:void(0)" >Invalid: {{item.title}}</a>
+                      <a href="#" >Invalid: {{item.title}}</a>
                     {% else %}
-                      <a href="javascript:void(0)" >Item invalid</a>
+                      <a href="#" >Item invalid</a>
                     {% endif %}
                   </li>
                 {% endif %}
@@ -400,7 +400,7 @@ regenerate:                             true
           {% when 'theme_select' %}
             <!-- [INFO   ] [j1.modules.navigator.menu.html  ] [found menu-type: theme_select] -->
             <li class="dropdown nav-item">
-              <a href="javascript:void(0)" class="nav-link dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">{{menu.item}} </a>
+              <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">{{menu.item}} </a>
               {% if nav_menu_animation %}
               <ul class="dropdown-menu raised-z{{raised_level}}">
               <!-- ul class="dropdown-menu data-in="{{nav_menu_animation}}" data-out="{{nav_menu_animation}}" -->
@@ -412,7 +412,7 @@ regenerate:                             true
                   <!-- check for J1 Theme selector -->
                   {% if item.local_themes and item.local_themes == 'enabled' %}
                     <li class="dropdown nav-item nav-sub-item">
-                      <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown"><i class="dropdown {{nav_menu_icon_family}} {{nav_menu_icon_family}}-{{item.icon}} {{nav_menu_icon_size}} mr-2" style="color:{{nav_menu_icon_color}}"></i> {{item.title}}</a>
+                      <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown"><i class="dropdown {{nav_menu_icon_family}} {{nav_menu_icon_family}}-{{item.icon}} {{nav_menu_icon_size}} mr-2" style="color:{{nav_menu_icon_color}}"></i> {{item.title}}</a>
                       <ul class="dropdown-menu raised-z{{raised_level}}" id="ThemeSelect"> </ul>
                     </li>
                     {% assign item_found = 'true' %}
@@ -420,7 +420,7 @@ regenerate:                             true
                   <!-- check for BootSwatch theme selector -->
                   {% if item.bootswatch_themes and item.bootswatch_themes == 'enabled' %}
                     <li class="dropdown nav-item nav-sub-item">
-                      <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown"><i class="dropdown {{nav_menu_icon_family}} {{nav_menu_icon_family}}-{{item.icon}} {{nav_menu_icon_size}} mr-2" style="color:{{nav_menu_icon_color}}"></i> {{item.title}}</a>
+                      <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown"><i class="dropdown {{nav_menu_icon_family}} {{nav_menu_icon_family}}-{{item.icon}} {{nav_menu_icon_size}} mr-2" style="color:{{nav_menu_icon_color}}"></i> {{item.title}}</a>
                       <ul class="dropdown-menu raised-z{{raised_level}}" id="ThemeList"> </ul>
                     </li>
                     {% assign item_found = 'true' %}
@@ -435,9 +435,9 @@ regenerate:                             true
                     {% if item_found == 'false' %}
                     <li>
                       {% if item.title %}
-                        <a href="javascript:void(0)" >Invalid: {{item.title}}</a>
+                        <a href="#" >Invalid: {{item.title}}</a>
                       {% else %}
-                        <a href="javascript:void(0)" >Item invalid</a>
+                        <a href="#" >Item invalid</a>
                       {% endif %}
                     </li>
                   {% endif %} <!-- end fallback -->

data/lib/starter_web/assets/data/panel.html

@@ -46,16 +46,18 @@ regenerate:                             true
         {% for item in panel %}
           {% assign key = item[0] %}
           {% assign value = item[1] %}
-          {% if key == 'id' %}          {% assign id          = value %}            {% endif %}
-          {% if key == 'enabled' %}     {% assign enabled     = value %}            {% endif %}
-          {% if key == 'type' %}        {% assign type        = value %}            {% endif %}
-          {% if key == 'icon_family' %} {% assign icon_family = value | downcase %} {% endif %}
-          {% if key == 'style' %}       {% assign style       = value %}            {% endif %}
-          {% if key == 'raised' %}      {% assign raised      = value %}            {% endif %}
-          {% if key == 'lane_span' %}   {% assign lane_span   = value %}            {% endif %}
-          {% if key == 'buttons' %}     {% assign buttons     = value %}            {% endif %}
-          {% if key == 'cards' %}       {% assign cards       = value %}            {% endif %}
-          {% if key == 'boxes' %}       {% assign boxes       = value %}            {% endif %}
+          {% if key == 'id' %}              {% assign id              = value %}                {% endif %}
+          {% if key == 'enabled' %}         {% assign enabled         = value %}                {% endif %}
+          {% if key == 'type' %}            {% assign type            = value %}                {% endif %}
+          {% if key == 'icon_family' %}     {% assign icon_family     = value|downcase %}       {% endif %}
+          {% if key == 'style' %}           {% assign style           = value %}                {% endif %}
+          {% if key == 'raised' %}          {% assign raised          = value %}                {% endif %}
+          {% if key == 'lane_span' %}       {% assign lane_span       = value %}                {% endif %}
+          {% if key == 'title' %}           {% assign title           = value|strip_newlines %} {% endif %}
+          {% if key == 'tagline' %}         {% assign tagline         = value|strip_newlines %} {% endif %}
+          {% if key == 'buttons' %}         {% assign buttons         = value %}                {% endif %}
+          {% if key == 'cards' %}           {% assign cards           = value %}                {% endif %}
+          {% if key == 'boxes' %}           {% assign boxes           = value %}                {% endif %}
         {% endfor %}
     {% endfor %}
 
@@ -85,6 +87,11 @@ regenerate:                             true
 
     {% assign row_class = 'row j1-panel-block' %}
 
+    {% if style == 'flat' %}
+      {% assign card_style = 'card-flat' %}
+    {% else %}
+      {% assign card_style = '' %}
+    {% endif %}
 
     <!-- PANEL {{id}} -->
     <!-- +++++++++++++++++++++++++ -->
@@ -157,6 +164,86 @@ regenerate:                             true
       </div>
     </div>
 
+    {% assign title           = nil %}
+    {% assign tagline         = nil %}
+    {% assign card_enabled    = nil %}
+    {% assign card_type       = nil %}
+    {% assign card_icon       = nil %}
+    {% assign icon_family     = nil %}
+    {% assign card_text       = nil %}
+    {% assign card_buttons    = nil %}
+    {% assign card_width_md   = nil %}
+
+    {% comment %} END INTRO panel
+    ---------------------------------------------------------------------------- {% endcomment %}
+
+
+    {% comment %} Collect INTRO panel - flat
+    ---------------------------------------------------------------------------- {% endcomment %}
+    {% when 'intro_panel_flat' %}
+
+    <div class="panel-intro">
+      <div class="{{container_class}}">
+        <div class="{{row_class}}">
+
+        {% assign card_items = cards | size %}
+
+        {% for card in cards %}
+
+          {% for items in card %}
+            {% for item in items[1] %}
+              {% assign key   = item[0] %}
+              {% assign value = item[1] %}
+              {% if key == 'enabled' %}    {% assign card_enabled    = value %}                  {% endif %}
+              {% if key == 'type' %}       {% assign card_type       = value %}                  {% endif %}
+              {% if key == 'icon' %}       {% assign card_icon       = value %}                  {% endif %}
+              {% if key == 'icon_size' %}  {% assign card_icon_size  = value %}                  {% endif %}
+              {% if key == 'icon_color' %} {% assign card_icon_color = value %}                  {% endif %}
+              {% if key == 'text' %}       {% assign card_text       = value | strip_newlines %} {% endif %}
+              {% if key == 'buttons' %}    {% assign card_buttons    = value %}                  {% endif %}
+            {% endfor %}
+            {% if card_enabled == false %} {% assign card_items = card_items | minus:1 %}  {% endif %}
+          {% endfor %}
+
+          {% assign card_width_md = 12 | divided_by: card_items %}
+
+          {% if card_type == 'text' and card_enabled %}
+            <div class="col-md-{{card_width_md}} col-sm-{{card_width_md}} col-xs-12">
+              <div class="card card-flat card-profile mb-4 raised-z0">
+
+                <div class="card-icon">
+                  <a href="javascript:void(0)">
+                    <i class="card-icon-rectangle raised-z0 {{icon_family}} {{icon_family}}-{{card_icon}} {{icon_family}}-{{card_icon_size}} {{icon_family}}-{{card_icon_color}} card-icon-background-no-color card-icon-{{icon_family}}"></i>
+                  </a>
+                </div>
+
+                <div class="content">
+                  {% if card_title %}
+                  <h6 class="notoc category text-gray">{{card_title}}</h6>
+                  {% endif %}
+                  <h4 class="notoc card-title">{{card_tagline}}</h4>
+                  <p class="card-description">{{card_text}}</p>
+                  <div class="card-footer">
+                    {% for button_hash in card_buttons %}
+                    {% include {{create_bs_button}} button_data=button_hash button_type="link" %}
+                    {{bs_button_html}}
+                    {% endfor %}
+                  </div>
+                </div>
+
+              </div>
+            </div>
+          {% endif %}
+
+        {% endfor %}
+        {% comment %} END cards {% endcomment %}
+
+        </div>
+      </div>
+    </div>
+
+    {% assign title           = nil %}
+    {% assign tagline         = nil %}
     {% assign card_enabled    = nil %}
     {% assign card_type       = nil %}
     {% assign card_icon       = nil %}
@@ -168,11 +255,10 @@ regenerate:                             true
     {% assign card_width_md   = nil %}
 
     {% comment %} END INTRO panel
-    ----------------------------------------------------------- {% endcomment %}
-
+    ---------------------------------------------------------------------------- {% endcomment %}
 
     {% comment %} Collect SERVICE panel
-    ----------------------------------------------------------- {% endcomment %}
+    ---------------------------------------------------------------------------- {% endcomment %}
     {% when 'service_panel' %}
 
       <div class="panel-service">
@@ -196,8 +282,6 @@ regenerate:                             true
                 {% if key == 'icon_family' %} {% assign icon_family     = value %}                  {% endif %}
                 {% if key == 'icon_size' %}   {% assign icon_size       = value %}                  {% endif %}
                 {% if key == 'icon_color' %}  {% assign icon_color      = value %}                  {% endif %}
-                {% if key == 'title' %}       {% assign card_title      = value | strip_newlines%}  {% endif %}
-                {% if key == 'tagline' %}     {% assign card_tagline    = value | strip_newlines%}  {% endif %}
                 {% if key == 'text' %}        {% assign card_text       = value | strip_newlines %} {% endif %}
                 {% if key == 'services' %}    {% assign services        = value %}                  {% endif %}
               {% endfor %}
@@ -218,17 +302,20 @@ regenerate:                             true
 
             {% if card_type == "service" and card_enabled %}
               <div class="col-md-{{card_width_md}} col-sm-{{card_width_md}} col-xs-12">
-                <div class="card card-profile {{card_raised}}">
+                <div class="card card-flat card-profile mb-4 raised-z0">
 
                   <div class="card-icon">
-                    <a href="{{site.url}}{{card_href}}">
-                      <i class="card-icon-circle raised {{icon_family}} {{icon_family}}-{{card_icon}} {{icon_size}} {{icon_color}} card-icon-background-color-theme card-icon-{{icon_family}}"></i>
+                    <!-- a href="{{site.url}}{{card_href}}" -->
+                    <a href="{{card_href}}">
+                      <!-- i class="card-icon-rectangle raised-z0 {{icon_family}} {{icon_family}}-{{card_icon}} {{icon_size}} {{icon_color}} card-icon-background-color-theme card-icon-{{icon_family}}"></i -->
+                      <i class="card-icon-rectangle raised-z0 {{icon_family}} {{icon_family}}-{{card_icon}} {{icon_family}}-{{card_icon_size}} {{icon_family}}-{{card_icon_color}} card-icon-background-no-color card-icon-{{icon_family}}"></i>
                     </a>
                   </div>
 
                   <div class="content">
                     <h6 class="notoc category text-gray">{{card_title}}</h6>
-                    <a href="{{site.url}}{{card_href}}">
+                    <!-- a href="{{site.url}}{{card_href}}" -->
+                    <a href="{{card_href}}">
                       <h4 class="notoc card-title">{{card_tagline}}</h4>
                     </a>
                     <p class="card-description">{{card_text}}</p>
@@ -236,7 +323,8 @@ regenerate:                             true
                     <div class="card-footer">
                       <ul class="service-list list-unstyled">
                         {% for list in services %}
-                          <li><a href="{{site.url}}{{list.service.href}}">{{list.service.title}}</a></li>
+                          <!-- li><a href="{{site.url}}{{list.service.href}}">{{list.service.title}}</a></li -->
+                          <li><a href="{{list.service.href}}">{{list.service.title}}</a></li>
                         {% endfor %}
                       </ul>
                     </div>
@@ -248,223 +336,203 @@ regenerate:                             true
 
         {% endfor %}
         {% comment %} END cards
-        ------------------------------------------------------- {% endcomment %}
+        ------------------------------------------------------------------------ {% endcomment %}
           </div>
         </div>
       </div>
 
+      {% assign title           = nil %}
+      {% assign tagline         = nil %}
       {% assign card_enabled    = nil %}
       {% assign card_type       = nil %}
       {% assign card_icon       = nil %}
       {% assign icon_family     = nil %}
-      {% assign card_title      = nil %}
-      {% assign card_tagline    = nil %}
       {% assign card_text       = nil %}
       {% assign services        = nil %}
       {% assign card_width_md   = nil %}
 
     {% comment %} END SERVICES panel
-    ----------------------------------------------------------- {% endcomment %}
-
-
+    ---------------------------------------------------------------------------- {% endcomment %}
 
     {% comment %} Collect NEWS panel
-    ----------------------------------------------------------- {% endcomment %}
+    ---------------------------------------------------------------------------- {% endcomment %}
     {% when 'news_panel' %}
 
       <div class="panel-news">
         <div class="{{container_class}} j1-panel-block">
-
-          {% if box_title %} {% assign box_title_id = "news_panel" %} {% endif %}
-          {% if box_title %} <h2 id="{{box_title_id}}" class="title ml-4">{{box_title}}</h2>{% endif %}
-          {% if box_tagline %}<div class="tagline"> <p>{{ box_tagline }}</p> </div>{% endif %}
-
+        {% if title %}
+        <div class="panel-headline">
+          {% if title %} {% assign title_id = "news_panel" %} {% endif %}
+          {% if title %} <h2 id="{{title_id}}" class="title">{{title}}</h2>{% endif %}
+          {% if tagline %}<div class="tagline"> <p>{{ tagline }}</p> </div>{% endif %}
+        </div>
+        {% endif %}
+          <!-- panel content -->
           <div class="row">
-            <!-- panel content -->
-                  {% assign header_available = false %}
-                  {% assign box_items = boxes | size %}
-
-                  {% for box in boxes %}
-                    {% for items in box %}
-                      {% for item in items[1] %}
-                        {% assign key   = item[0] %}
-                        {% assign value = item[1] %}
-                        {% if key == 'enabled' %}     {% assign box_enabled    = value %}                  {% endif %}
-                        {% if key == 'type' %}        {% assign box_type       = value %}                  {% endif %}
-                        {% if key == 'style' %}       {% assign box_style      = value %}                  {% endif %}
-                        {% if key == 'raised' %}      {% assign box_raised     = value %}                  {% endif %}
-                        {% if key == 'title' %}       {% assign box_title      = value | strip_newlines%}  {% endif %}
-                        {% if key == 'tagline' %}     {% assign box_tagline    = value | strip_newlines%}  {% endif %}
-                        {% if key == 'category' %}    {% assign post_category  = value %}                  {% endif %}
-                        {% if key == 'max_posts' %}   {% assign posts_max      = value | strip_newlines %} {% endif %}
-                        {% if key == 'buttons' %}     {% assign box_buttons    = value %}                  {% endif %}
-                      {% endfor %}
-                      {% if box_enabled == false %}
-                        {% assign box_items = box_items | minus:1 %}
-                      {% endif %}
-                    {% endfor %}
-
-                    {% if box_type == "header" and box_enabled %}
-
-                      {% comment %} correct # items if header available {% endcomment %}
-                      {% assign box_items = box_items | minus:1 %}
-                      {% assign box_width_md = 12 | divided_by: box_items %}
 
-                      {% endif %}
+            {% assign header_available = false %}
+            {% assign box_items = boxes | size %}
+
+            {% for box in boxes %}
+              {% for items in box %}
+                {% for item in items[1] %}
+                  {% assign key   = item[0] %}
+                  {% assign value = item[1] %}
+                  {% if key == 'enabled' %}     {% assign box_enabled    = value %} {% endif %}
+                  {% if key == 'type' %}        {% assign box_type       = value %} {% endif %}
+                  {% if key == 'style' %}       {% assign box_style      = value %} {% endif %}
+                  {% if key == 'raised' %}      {% assign box_raised     = value %} {% endif %}
+                  {% if key == 'category' %}    {% assign post_category  = value %} {% endif %}
+                  {% if key == 'max_posts' %}   {% assign posts_max      = value %} {% endif %}
+                  {% if key == 'buttons' %}     {% assign box_buttons    = value %} {% endif %}
+                {% endfor %}
+                {% if box_enabled == false %}
+                  {% assign box_items = box_items | minus:1 %}
+                {% endif %}
+              {% endfor %}
 
-                    {% if box_type == "preview" and box_enabled %}
-
-                      <div class="col-md-{{box_width_md}} col-sm-{{box_width_md}} col-xs-12 mb-2">
-
-                        {% if box_title %}<h4 class="notoc box-title mt-2">{{box_title}}</h4>{% endif %}
-                        <div class="content">
-
-                          <!-- Last current post -->
-                          {% assign last_post_written = false %}
-                          {% for post in site.posts %}
-
-                            {% for category in post.categories %}
-                              {% if category == post_category and last_post_written != true %}
-
-                                <div class="tmlabel">
-                                  <div class="panel-news-headline">
-                                     <a href="{{post.url}}#readmore">
-                                       <h4 id="{{ 100000 | rand }}">{{ post.title }}</h4>
-                                     </a>
-                                  </div>
-
-                                    <!-- Collect image data from frontmatter -->
-                                    {% if post.image %}
-                                      {% assign image_name = post.image.name %}
-                                      {% assign image_path = post.image.path %}
-                                      {% if post.image.random %}
-                                        {% assign max_random  = image_name | regex_replace: '[a-zA-Z_-]*' %}
-                                        {% assign max_random  = max_random | regex_replace: '\.' %}
-                                        {% assign random      = max_random | rand %}
-                                        {% assign image_name  = image_name | regex_replace: '\d+', random %}
-                                      {% endif %}
-                                      {% capture image %}{{image_path}}/{{image_name}}{% endcapture %}
-                                    {% else %}
-                                      {% assign image = 'false' %}
-                                    {% endif %}
-
-                                    <!-- Collect icon data from post frontmatter -->
-                                    <!-- Set the default icon|family -->
-                                    {% assign icon        = 'comment-alt' %}
-                                    {% assign icon_family = 'zmdi' %}
-                                    {% assign icon_color  = '#3F51B5' %}
-                                    {% assign icon_size   = 'large' %}
-
-                                    {% if post.icon %}
-
-                                      {% assign icon         = post.icon.name | downcase %}
-                                      {% assign icon_family  = post.icon.family %}
-                                      {% assign icon_color   = post.icon.color %}
-                                      {% assign icon_size    = post.icon.size %}
-
-                                      {% if icon_family == "FontAwesome" %}
-                                        {% assign icon_family = "fa" %}
-                                      {% elsif icon_family == "Glyphicon" %}
-                                        {% assign icon_family = "glyphicon" %}
-                                      {% elsif icon_family == "MDI" %}
-                                        {% assign icon_family = "mdi" %}
-                                      {% elsif icon_family == "ZMDI" %}
-                                        {% assign icon_family = "zmdi" %}
-                                      {% endif %}
-
-                                    {% endif %}
-
-                                    {% include {{select_icon_size}} family=icon_family size="xxxlarge" %}
-                                    {% assign icon_size = size %}
-
-                                    {% include {{select_color}} color=icon_color fallback="#000"%}
-                                    {% assign icon_color = color %}
-
-                                    {% if icon != 'false' and image == 'false' %}
-                                    <div class="col-md-12">
-                                      <i class="service-icon {{icon_family}} {{icon_family}}-{{icon}} {{icon_size}}" style="color: {{icon_color}};"></i>
-                                      <p>{{ post.excerpt }}</p>
-                                    </div>
-                                    {% endif %}
-
-                                    {% if icon == 'false' and image == 'false' %}
-                                    <div class="col-md-12">
-                                      <p>{{ post.excerpt }}</p>
-                                    </div>
-                                    {% endif %}
-
-                                    {% if image != 'false' %}
-                                    <div class="col-md-12">
-                                      <img class="img-fluid mb-2" src="{{ image }}" alt="">
-                                    </div>
-                                    <div class="col-md-12">
-                                      <p>{{ post.excerpt }}</p>
-                                    </div>
-                                    {% endif %}
-
-                                    <!-- Collect comment provider details -->
-                                    {% for sharing in panel_config %}
-                                      {% assign provider      = sharing.provider %}
-                                      {% assign likes_count   = sharing.likes_count %}
-                                      {% assign comment_count = sharing.comment_count %}
-                                    {% endfor %}
-
-                                    {% assign last_post_written = true %}
-                                    {% assign last_post_title = post.title %}
-                                    {% break%}
-
-                              {% endif %}
-                            {% endfor %}
-                          {% endfor %}
-
-                          </div> <!-- end tmlabel -->
-                        </div> <!-- end content -->
-                      </div> <!-- end preview box -->
-                    {% endif %}
+              {% comment %} calculate columns
+              ------------------------------------------------------------------ {% endcomment %}
+              {% assign box_width = 12 | divided_by: box_items %}
 
-                    {% if box_type == "recent_news" and box_enabled %}
+              <!-- Collect last current post -->
+              {% if box_type == "last_current" and box_enabled %}
+              <div class="col-md-{{box_width}} col-sm-{{box_width}} col-xs-12">
+                <div class="content">
 
-                      <div class="col-md-{{box_width_md}} col-sm-{{box_width_md}} col-xs-12 mt-5">
-                        <div class="recent-news">
+                <!-- Last current post -->
+                {% assign last_post_written = false %}
+                {% for post in site.posts %}
+
+                  {% for category in post.categories %}
+                    {% if category == post_category and last_post_written != true %}
+
+                      <!-- Collect image data from frontmatter -->
+                      {% if post.image %}
+                        {% assign image_name = post.image.name %}
+                        {% assign image_path = post.image.path %}
+                        {% if post.image.random %}
+                          {% assign max_random  = image_name | regex_replace: '[a-zA-Z_-]*' %}
+                          {% assign max_random  = max_random | regex_replace: '\.' %}
+                          {% assign random      = max_random | rand %}
+                          {% assign image_name  = image_name | regex_replace: '\d+', random %}
+                        {% endif %}
+                        {% capture image %}{{image_path}}/{{image_name}}{% endcapture %}
+                      {% else %}
+                        {% assign image = 'false' %}
+                      {% endif %}
 
-                          <h4 class="notoc box-title">{{box_title}}</h4>
+                      <!-- Collect icon data from post frontmatter -->
+                      <!-- Set the default icon|family -->
+                      {% assign icon        = 'comment-alt' %}
+                      {% assign icon_family = 'zmdi' %}
+                      {% assign icon_color  = '#3F51B5' %}
+                      {% assign icon_size   = 'large' %}
+
+                      {% if post.icon %}
+
+                        {% assign icon         = post.icon.name | downcase %}
+                        {% assign icon_family  = post.icon.family %}
+                        {% assign icon_color   = post.icon.color %}
+                        {% assign icon_size    = post.icon.size %}
+
+                        {% if icon_family == "FontAwesome" %}
+                          {% assign icon_family = "fa" %}
+                        {% elsif icon_family == "Glyphicon" %}
+                          {% assign icon_family = "glyphicon" %}
+                        {% elsif icon_family == "MDI" %}
+                          {% assign icon_family = "mdi" %}
+                        {% elsif icon_family == "ZMDI" %}
+                          {% assign icon_family = "zmdi" %}
+                        {% endif %}
 
-                          <!-- Recent News (NewsBox) -->
+                      {% endif %}
 
-                          <!-- post loop counter correction -->
-                          {% assign max_posts         = posts_max | minus:'1' %}
-                          {% assign posts_written     = 0 %}
-                          {% assign last_post_written = false %}
+                      {% include {{select_icon_size}} family=icon_family size="xxxlarge" %}
+                      {% assign icon_size = size %}
 
-                          <ul class="list-unstyled link-news">
-                          {% for post in site.posts %}
+                      {% include {{select_color}} color=icon_color fallback="#000"%}
+                      {% assign icon_color = color %}
 
-                            {% for category in post.categories %}
-                              {% if box_type == "recent_news" and box_enabled %}
+                      {% if icon != 'false' and image == 'false' %}
+                        <!-- icon != 'false' and image == 'false' -->
+                      {% endif %}
 
-                                {% if category == post_category and last_post_written != true %}
-                                  {% if post.title == last_post_title %} {% continue %} {% endif %}
-                                  {% assign posts_written = posts_written | plus:'1' %}
-                                  {% if posts_written == posts_max %} {% assign last_post_written = true %} {% break %}{% endif %}
-                                  <li>
-                                    <a href="{{post.url}}">{{post.title}}</a>
-                                    <small>{{ post.date | date: "%e %B %Y"}}</small>
-                                  </li>
-                                {% endif %}
-                              {% endif %}
+                      {% if icon == 'false' and image == 'false' %}
+                        <!-- icon == 'false' and image == 'false' -->
+                      {% endif %}
 
-                            {% endfor %}
-                          {% endfor %}
-                          </ul>
+                      {% if image != 'false' %}
+                        <!-- image != 'false' -->
+                        <div class="card {{card_style}}">
+                          <div class="card-image">
+                            <img class="img" src="{{ post.image }}" alt="{{ post.title }}">
+                          </div>
+                          <div class="card-body">
+                            <span class="post-meta">Nov 13, 2018</span>
+                            <h2 id="{{ 100000 | rand }}" class="card-title">{{ post.title }}</h2>
+                            <h6 class="card-subtitle text-muted mb-2">{{ post.tagline }}</h6>
+                            <div class="card-text"><p>{{ post.excerpt }}</p></div>
+                            <div class="card-footer">
+                              <a class="card-link" href="{{post.url}}#readmore" target="blank">Read more ..</a>
+                            </div>
+                          </div>
+                        </div>
+                      {% endif %}
 
-                        </div> <!-- end content -->
-                      </div> <!-- end recent news box -->
+                      {% assign last_post_written = true %}
+                      {% assign last_post_title = post.title %}
+                      {% break%}
 
                     {% endif %}
+                  {% endfor %}
+                {% endfor %}
+                </div> <!-- end box current item -->
+              </div> <!-- end content current item -->
+              {% endif %}
+
+              <!-- Collect recent posts -->
+              {% if box_type == "recent" and box_enabled %}
+              <div class="col-md-{{box_width}} col-sm-{{box_width}} col-xs-12">
+                <!-- Recent News (NewsBox) -->
+                <div class="recent-news">
+                  <!-- loop counter correction -->
+                  {% assign max_posts         = posts_max | minus:'1' %}
+                  {% assign posts_written     = 0 %}
+                  {% assign last_post_written = false %}
+
+                  {% for post in site.posts %}
+                    {% for category in post.categories %}
+                      {% if category == post_category and last_post_written != true %}
+                      <div class="card-list-element">
+                        {% if post.title == last_post_title %} {% continue %} {% endif %}
+                        {% assign posts_written = posts_written | plus:'1' %}
+                        {% if posts_written == posts_max %} {% assign last_post_written = true %} {% break %}{% endif %}
+                        <div class="card {{card_style}} mb-2">
+                          <div class="card-body">
+                            <span class="post-meta">Nov 13, 2018</span>
+                            <h2 id="{{ 100000 | rand }}" class="card-title">{{ post.title }}</h2>
+                            <h6 class="card-subtitle text-muted mb-2">{{ post.tagline }}</h6>
+                              <div class="card-text"><p>{{ post.excerpt | truncatewords: 20 }}</p></div>
+                            <div class="card-footer">
+                              <a class="card-link" href="{{post.url}}#readmore" target="blank">Read more ..</a>
+                            </div>
+                          </div>
+                        </div>
+                      </div> <!-- end list-element -->
+                      {% endif %}
 
+                    {% endfor %}
                   {% endfor %}
-                  {% comment %} END boxes
-                  --------------------------------------------- {% endcomment %}
+
+                </div> <!-- end recent news -->
+              </div> <!-- end recent news box -->
+              {% endif %}
+
+            {% endfor %}
+          </div> <!-- end NEWS panel -->
+          {% comment %} END boxes
+          ---------------------------------------------------------------------- {% endcomment %}
 
 
           </div> <!-- end row -->