j1-template 2020.0.18 → 2020.0.19

data/_layouts/blog_archive.html

@@ -54,7 +54,8 @@ layout:                                 default
   {% comment %} Collect the BODY-CONTENT region
   ------------------------------------------------------------------------------ {% endcomment %}
   <!-- [INFO   ] [j1.layout.blog_archive.html    ] [ call default_writer for region: 'body-content' ] -->
-  <div id="content" class="container-fluid">
+  <!-- [INFO   ] [j1.layout.blog_archive.html    ] [ padding-right set dynamically by core/js/ssm.js ] -->
+  <div id="content" class="container">
       {% include  {{content_writer}} region='body-main' items=lanes_collate %}
   </div>
   <!-- [INFO   ] [j1.layout.blog_archive.html    ] [ end processing default_writer for region: 'body-content' ] -->

data/_layouts/collection.html

@@ -62,7 +62,7 @@ debug:                                  false
   {% comment %} Collect the BODY-MAIN region
   ------------------------------------------------------------------------------ {% endcomment %}
   <!-- [INFO   ] [j1.layout.collection.html                ] [ call content_writer for region: 'body-main' ] -->
-  <div class="container-fluid">
+  <div id="content" class="container">
     {% include  {{content_writer}} region='body-main' items=lanes_collate %}
   </div>
   <!-- [INFO   ] [j1.layout.collection.html                ] [ end processing content_writer forvregion: 'body-main' ] -->

data/_layouts/page.html

@@ -62,7 +62,7 @@ debug:                                  false
   {% comment %} Collect the BODY-CONTENT region
   ------------------------------------------------------------------------------ {% endcomment %}
   <!-- [INFO   ] [j1.layout.page.html                    ] [ call content_writer for region: 'body-main' ] -->
-  <div id="content" class="container-fluid">
+  <div id="content" class="container mb-5">
     {% include  {{content_writer}} region='body-main' items=lanes_collate %}
   </div>
   <!-- [INFO   ] [j1.layout.page.html                    ] [ end content_writer processing for region: 'body-main' ] -->

data/_layouts/post.html

@@ -62,7 +62,7 @@ debug:                                  false
   {% comment %} Collect the BODY-MAIN region
   ------------------------------------------------------------------------------ {% endcomment %}
   <!-- [INFO   ] [j1.layout.post.html                ] [ call content_writer for region: 'body-main' ] -->
-  <div id="content" class="container-fluid">
+  <div id="content" class="container">
     {% include  {{content_writer}} region='body-main' items=lanes_collate %}
   </div>
   <!-- [INFO   ] [j1.layout.post.html                ] [ end content_writer processing for region: 'body-main' ] -->

data/apps/public/cc/cc.yml

@@ -1,5 +1,5 @@
 # ------------------------------------------------------------------------------
-# ~/admin/config/config.yml
+# ~/apps/public/cc/cc.yml
 # Netlify CMS configuration for J1 Template
 #
 # Product/Info:
@@ -9,54 +9,54 @@
 #
 # J1 Template is licensed under the MIT License.
 # See: https://github.com/jekyll-one-org/J1 Template/blob/master/LICENSE
-#
+# ------------------------------------------------------------------------------
+# NOTE: If 'localhost' is used, the base_url (external OAuth Client)
+#       in the backend settings could be set to an 'empty string'
 # ------------------------------------------------------------------------------
 
 # ==============================================================================
-# Global settings
+# global settings
 #
 
 # ------------------------------------------------------------------------------
-# Backend settings (Repo|OAuth Client)
+# backend settings (Repo)
 #
 # publish_mode:                         editorial_workflow
 #
 backend:
   # git-gateway
   name:                                 github
-  # path to your GitHub repository (w/o https://github.com/)
-  repo:                                 your-repo
+  # path to your 'GitHub' repository (w/o https://github.com/)
+  repo:                                 jekyll-one-org/J1 Template
   # e.g master | develop
-  branch:                               your-repo-branch
-  # url of 'external' oauth client (e.g. j1 utility server at: http://localhost:44444)
+  branch:                               master
+  # url of 'external' oauth client (e.g. j1 utility server at: http://localhost:44444)  
   # base_url:                           http://localhost:44444                  # web
   # base_url:                           http://localhost:5000                   # app
-  # base_url:                           http:/your.domain:port                  # app
-  # NOTE: for domain localhost, baseurl could be set to EMPTY
   base_url:
 
 # ------------------------------------------------------------------------------
-# Site (production) settings
+# site (production) settings
 #
-# logo_url:                             your-logo-url
-# site_url:                             your-site-url
-# display_url:                          your-display-url
+# logo_url:                             http://localhost:5000/assets/images/icons/j1/scalable/j1.svg
+# site_url:                             http://localhost:5000/
+# display_url:                          http://localhost:5000/
 #
 show_preview_links:                     false
 
 # ------------------------------------------------------------------------------
-# Media (asset) settings
+# media (asset) settings
 #
 # media_library:
 #   name: uploadcare
 #   config:
 #     publicKey: demopublickey
 #
-media_folder:                           /assets/images/public
-public_folder:                          /assets/uploads/
+media_folder:                           packages/300_template_src/assets/images/public
+public_folder:                          packages/300_template_src/assets/uploads/
 
 # ------------------------------------------------------------------------------
-# File (name) settings
+# file (name) settings
 #
 # The slug option allows you to change how filenames for entries are
 # created and sanitized. For modifying the actual data in a slug, see
@@ -68,29 +68,28 @@ slug:
   sanitize_replacement:                 "_"
 
 
-
 # ==============================================================================
-# Collection (files and folders) settings
+# collection (files and folders) settings
 #
 collections:
 
   # ----------------------------------------------------------------------------
-  # Site Configuration
+  # site configuration
   #
   - label: Site Configuration
-    name:  site_config
+    name:  site_config                                                          # Used in routes, e.g., /admin/collections/blog
     files:
 
       # ------------------------------------------------------------------------
-      # Global Site Configuration
+      # global site configuration
       #
       - label: Global Settings
         name:  global_site_config
-        file:  _cc_test_data/_config.yml
+        file:  packages/400_template_site/_cc_test_data/_config.yml
         fields:
 
           # --------------------------------------------------------------------
-          # About this configuration (used for J1 CC only)
+          # about (used for J1 CC only)
           #
           - label:  about
             name:   about_config
@@ -527,7 +526,7 @@ collections:
       #
       - label: Resource Settings
         name:  site_resource_settings
-        file:  _cc_test_data/_data/resources.yml
+        file:  packages/400_template_site/_cc_test_data/_data/resources.yml
         fields:
 
           # --------------------------------------------------------------------
@@ -614,7 +613,7 @@ collections:
       #
       - label: Banner Settings
         name:  banner_settings
-        file:  _cc_test_data/_data/blocks/banner.yml
+        file:  packages/400_template_site/_cc_test_data/_data/blocks/banner.yml
         fields:
 
           # --------------------------------------------------------------------
@@ -818,7 +817,7 @@ collections:
       #
       - label: Panel Settings
         name:  panel_settings
-        file:  _cc_test_data/_data/blocks/panel.yml
+        file:  packages/400_template_site/_cc_test_data/_data/blocks/panel.yml
         fields:
 
           # --------------------------------------------------------------------
@@ -1016,7 +1015,7 @@ collections:
       #
       - label: Footer Settings
         name:  footer_settings
-        file:  _cc_test_data/_data/blocks/footer.yml
+        file:  packages/400_template_site/_cc_test_data/_data/blocks/footer.yml
         fields:
 
           # --------------------------------------------------------------------
@@ -1197,7 +1196,7 @@ collections:
       #
       - label:      J1 Cookie Consent
         name:       config_cookie_consent
-        file:       _cc_test_data/_data/modules/cookie_consent.yml
+        file:       packages/400_template_site/_cc_test_data/_data/modules/cookie_consent.yml
         fields:
 
           # --------------------------------------------------------------------
@@ -1262,7 +1261,7 @@ collections:
       #
       - label:      J1 Jekyll Search
         name:       config_jekyll_search
-        file:       _cc_test_data/_data/modules/jekyll_search.yml
+        file:       packages/400_template_site/_cc_test_data/_data/modules/jekyll_search.yml
         fields:
 
           # --------------------------------------------------------------------
@@ -1302,7 +1301,7 @@ collections:
       #
       - label:      J1 Navigation
         name:       config_navigation
-        file:       _cc_test_data/_data/modules/navigator.yml
+        file:       packages/400_template_site/_cc_test_data/_data/modules/navigator.yml
         fields:
 
           # --------------------------------------------------------------------
@@ -1490,7 +1489,7 @@ collections:
       #
       - label:      J1 Back2Top
         name:       config_back2top
-        file:       _cc_test_data/_data/modules/back2top.yml
+        file:       packages/400_template_site/_cc_test_data/_data/modules/back2top.yml
         fields:
 
           # --------------------------------------------------------------------
@@ -1540,7 +1539,7 @@ collections:
       #
       - label:      J1 WebHook
         name:       config_webhook
-        file:       _cc_test_data/_data/modules/webhook.yml
+        file:       packages/400_template_site/_cc_test_data/_data/modules/webhook.yml
         fields:
 
           # --------------------------------------------------------------------
@@ -1644,5 +1643,7 @@ collections:
                       - { label: response success,  name: response_success, widget: string, hint: Response send if built script finishes successfully }
                       - { label: response failed,   name: response_failed, widget: string, hint: Response send if Built script failed }
 
+
+
 # ------------------------------------------------------------------------------
 # END config

data/assets/data/authclient.html

@@ -144,7 +144,7 @@ regenerate: true
     role="dialog"
     tabindex="-1"
     aria-labelledby="modalOmniSignIn" aria-hidden="true">
-  <div class="modal-dialog modal-frame modal-top modal-notify modal-info" role="document">
+  <div class="modal-dialog modal-frame modal-top modal-notify modal-primary" role="document">
 
     <!-- Content -->
     <div class="modal-content">
@@ -252,7 +252,7 @@ regenerate: true
 
       <!-- Footer -->
       <div class="modal-footer justify-content-center">
-        <a type="button" id="signInButton" class="btn btn btn-raised btn-flex btn-md btn-info mr-3" data-dismiss="modal">
+        <a type="button" id="signInButton" class="btn btn btn-raised btn-flex btn-md btn-primary mr-3" data-dismiss="modal">
           <i class="mdi mdi-18px mdi-login mr-1"></i>
           Yes, please
         </a>
@@ -355,7 +355,7 @@ regenerate: true
       </div>
       <!-- Footer -->
       <div class="modal-footer justify-content-center">
-        <a type="button" class="btn btn btn-raised btn-flex btn-md btn-info" data-dismiss="modal">OK</a>
+        <a type="button" class="btn btn btn-raised btn-flex btn-md btn-primary" data-dismiss="modal">OK</a>
       </div>
     </div>
     <!-- END Content -->
@@ -367,14 +367,14 @@ regenerate: true
 --------------------------------------------------------------------------------
 <!-- [INFO   ] [j1.authclient.html                    ] [START: Modal TOP INFO signed in] -->
 <div class="modal fade top" id="modalTopInfoSignedIn" tabindex="-1" role="dialog" aria-labelledby="modalTopInfoSignedIn" aria-hidden="true" data-backdrop="false">
-  <div class="modal-dialog modal-frame modal-top modal-notify modal-info" role="document">
+  <div class="modal-dialog modal-frame modal-top modal-notify modal-primary" role="document">
     <!-- Content -->
     <div class="modal-content">
       <!-- Body -->
       <div class="modal-body">
         <div class="row px-4">
           <p class="pt-1 pr-2">You're already signed in</p>
-          <a type="button" class="btn btn btn-raised btn-flex btn-md btn-info" data-dismiss="modal"OK</a>
+          <a type="button" class="btn btn btn-raised btn-flex btn-md btn-primary" data-dismiss="modal"OK</a>
         </div>
       </div>
     </div>

data/assets/data/banner.html

@@ -201,14 +201,14 @@ regenerate: true
 
             <!-- Card -->
             <div class="row {{animate}}">
-              <p class="">{{card_description}}</p>
-              <div class="row btn-row mt-4">
-                <div class="col-md-{{card_width_md}} col-md-offset-1 col-sm-{{card_width_md}} col-sm-offset-1 col-xs-{{card_width_md | plus:2}}">
-                  {% for button_hash in card_buttons %}
-                    {% include {{create_bs_button}} button_data=button_hash button_type="link" %}
-                    {{bs_button_html}}
-                  {% endfor %}
-                </div>
+              <div>{{card_description}}</div>
+            </div>
+            <div class="row mt-2" style="margin-left:-30px">
+              <div class="col-md-{{card_width_md}} col-sm-{{card_width_md}} col-xs-{{card_width_md}}">
+                {% for button_hash in card_buttons %}
+                  {% include {{create_bs_button}} button_data=button_hash button_type="link" %}
+                  {{bs_button_html}}
+                {% endfor %}
               </div>
             </div>
             <!-- End Card -->

data/assets/data/cookiebar.html

@@ -64,7 +64,7 @@ regenerate: true
   data-backdrop="false"
   aria-labelledby="myModalLabel"
   aria-hidden="true">
-  <div class="modal-dialog modal-frame modal-top modal-notify modal-info" role="document">
+  <div class="modal-dialog modal-frame modal-top modal-notify modal-primary" role="document">
 
     <!-- Content -->
     <div class="modal-content">
@@ -88,21 +88,21 @@ regenerate: true
         {% if cookie_options.buttons.policy_button %}
         <a id="policyButton" type="button"
            class="btn btn-raised btn-flex btn-secondary mr-3">
-           <i class="mdi mdi-18px mdi-dark mdi-read mr-2"></i>
+           <i class="mdi mdi-18px mdi-white mdi-read mr-2"></i>
            {{cookie_options.buttons.policy_button_text}}
         </a>
         {% endif %}
         <a id="acceptButton" type="button"
-           class="btn btn-raised btn-flex btn-info mr-3"
+           class="btn btn-raised btn-flex btn-primary mr-3"
            data-dismiss="modal">
-           <i class="mdi mdi-18px mdi-dark mdi-check mr-2"></i>
+           <i class="mdi mdi-18px mdi-white mdi-check mr-2"></i>
            {{cookie_options.buttons.accept_button_text}}
         </a>
         {% if cookie_options.buttons.decline_button %}
         <a id="declineButton" type="button"
            class="btn btn-raised btn-flex btn-secondary"
            data-dismiss="modal">
-           <i class="mdi mdi-18px mdi-dark mdi-close mr-2"></i>
+           <i class="mdi mdi-18px mdi-white mdi-close mr-2"></i>
            {{cookie_options.buttons.decline_button_text}}
         </a>
         {% endif %}

data/assets/data/gallery_customizer.html

@@ -54,7 +54,7 @@ regenerate: true
   <nav class="nav bmd-layout-container bmd-drawer-f-l">
 
     <header class="bmd-layout-header">
-      <div class="navbar navbar-dark uno-bg-primary raised-z2 mb-2">
+      <div class="navbar navbar-dark bg-primary raised-z2 mb-2">
         <button class="bmd-drawer drawer-toggler animated fadeIn" type="button" data-toggle="drawer" data-target="#drw_customizer">
           <span class="mdi mdi-menu mdi-2x"></span>
         </button>

data/assets/data/menu.html

@@ -414,19 +414,19 @@ regenerate: true
               {% endif %}
                 {% assign item_found = 'false' %}
                 {% for item in menu.theme_select %}
-                  <!-- check for J1 Theme selector -->
+                  <!-- check for locally loaded J1 Themes -->
                   {% if item.local_themes and item.local_themes == 'enabled' %}
                     <li class="dropdown nav-item nav-sub-item">
                       <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>
+                      <ul id="local_themes" class="dropdown-menu raised-z{{raised_level}}"></ul>
                     </li>
                     {% assign item_found = 'true' %}
                   {% endif %} <!-- end J1 theme selector -->
-                  <!-- check for BootSwatch theme selector -->
+                  <!-- check for remotely loaded (BootSwatch) Themes -->
                   {% if item.bootswatch_themes and item.bootswatch_themes == 'enabled' %}
                     <li class="dropdown nav-item nav-sub-item">
                       <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>
+                      <ul id="remote_themes" class="dropdown-menu raised-z{{raised_level}}"></ul>
                     </li>
                     {% assign item_found = 'true' %}
                   {% endif %} <!-- end BootSwatch theme selector -->

data/assets/data/mmenu.html

@@ -344,19 +344,19 @@ regenerate: true
               {% endif %}
                 {% assign item_found = 'false' %}
                 {% for item in menu.theme_select %}
-                  <!-- check for J1 Theme selector -->
+                  <!-- check for locally loaded J1 Themes -->
                   {% if item.local_themes and item.local_themes == 'enabled' %}
                     <li>
                       <a href="#"><i class="{{icon_family}} {{icon_family}}-{{item.icon}} {{icon_size}} {{icon_color}} mr-2"></i> {{item.title}}</a>
-                      <ul id="ThemeSelect_MMenu"> </ul>
+                      <ul id="local_themes_mmenu"></ul>
                     </li>
                     {% assign item_found = 'true' %}
                   {% endif %} <!-- end J1 theme selector -->
-                  <!-- check for BootSwatch theme selector -->
+                  <!-- check for remotely loaded (BootSwatch) Themes -->
                   {% if item.bootswatch_themes and item.bootswatch_themes == 'enabled' %}
                     <li>
                       <a href="#"><i class="{{icon_family}} {{icon_family}}-{{item.icon}} {{icon_size}} {{icon_color}} mr-2"></i> {{item.title}}</a>
-                      <ul id="ThemeList_MMenu"> </ul>
+                      <ul id="remote_themes_mmenu"></ul>
                     </li>
                     {% assign item_found = 'true' %}
                   {% endif %} <!-- end BootSwatch theme selector -->

data/assets/data/panel.html

@@ -96,14 +96,14 @@ regenerate: true
       {% endfor %}
 
       {% if lane_span == 'fixed' %}
-        {% assign container_class = 'container j1-panel-block' %}
+        {% assign container_class = 'container' %}
       {% elsif lane_span == 'fluid' %}
-        {% assign container_class = 'container-fluid j1-panel-block' %}
+        {% assign container_class = 'container-fluid' %}
       {% else %}
-        {% assign container_class = 'container j1-panel-block' %}
+        {% assign container_class = 'container' %}
       {% endif %}
 
-      {% assign row_class = 'row j1-panel-block' %}
+      {% assign row_class = 'row' %}
 
       {% if style == 'flat' %}
         {% assign card_style = 'card-flat' %}
@@ -141,22 +141,23 @@ regenerate: true
         {% if debug %}<!-- panel_options:  {{panel_options}} -->{% endif %}
         <!-- Panel {{panel_settings.id}} -->
         <section id="{{panel_settings.id}}">
+          <!-- Main Container -->
           <div class="container">
 
             <!-- Heading -->
-            <div class="row mb-4">
+            <div class="row">
               <div class="{{panel_settings.animate}}">
                 <h1 class="g-font-weight-500 mb-0">{{panel_settings.title}}</h1>
                 <p class="tagline mb-0"><b>{{panel_settings.tagline}}</b></p>
-                <div class="d-inline-block g-width-50 g-height-2 uno-bg-primary mb-2"></div>
+                <div class="d-inline-block g-width-50 g-height-2 bg-primary mb-2"></div>
               </div>
-              <p class="{{helper_classes}}">{{panel_settings.description}}</p>
+              <div class="{{helper_classes}}">{{panel_settings.description}}</div>
             </div>
             <!-- End Heading -->
 
             <!-- Cards -->
-            <div class="row mb-5">
-            {% assign card_items = cards | size %}
+            <div class="row">
+            {% assign card_items = cards|size %}
             {% for card in cards %}
 
               {% for items in card %}
@@ -174,10 +175,10 @@ regenerate: true
                   {% 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 %}
+                {% if card_enabled == false %} {% assign card_items = card_items|minus:1 %} {% endif %}
               {% endfor %}
 
-              {% assign card_width_md = 12 | divided_by: card_items %}
+              {% assign card_width_md = 12|divided_by: card_items %}
 
               {% include {{select_icon_size}} family=icon_family size=icon_size %}
               {% assign icon_size = size %}
@@ -186,7 +187,7 @@ regenerate: true
                 {% assign card_enabled = true %}
                 {% assign card_width_md = card_width %}
               {% else %}
-                {% assign card_width_md = 12 | divided_by: card_items %}
+                {% assign card_width_md = 12|divided_by: card_items %}
               {% endif %}
 
               {% if card_animate %}
@@ -196,7 +197,7 @@ regenerate: true
               {% endif %}
 
               {% comment %} extract link for card icon
-              -------------------------------------------------------------- {% endcomment %}
+              ------------------------------------------------------------------ {% endcomment %}
               {% for items in card_buttons %} {% for item in items %}
                 {% if item[0] == 'button' %}
                   {% for elm in item[1] %}
@@ -208,59 +209,61 @@ regenerate: true
               {% endfor %} {% endfor %}
 
               {% comment %} TODO: Style should be configurable
-              -------------------------------------------------------------- {% endcomment %}
+              ------------------------------------------------------------------ {% endcomment %}
               {% assign card_style  = 'flat' %}
 
               {% if card_type == 'text' and card_enabled and card_style == 'flat' %}
-              {% assign card_raised = 'raised-z0' %}
+              {% assign card_raised = 'raised-z5' %}
 
               <!-- Card Block -->
-              <div class="col-md-{{card_width_md}} col-sm-{{card_width_md}} col-xs-12">
-                <div class="media mb-2 {{card_raised}}">
-
-                  <div class="d-flex mr-4">
-                    {% if card_icon_family == 'iconify' %}
-                      {% if card_icon_color == 'bg-primary' %}
-                        <span class="{{card_icon_family}} {{card_icon_family}}-{{card_icon_size}} iconify-md-bg-primary" data-icon="{{card_icon}}" data-inline="false"></span>
-                      {% else %}
-                        <span class="{{card_icon_family}} {{card_icon_family}}-{{card_icon_size}} {{card_icon_family}}-{{card_icon_color}}" data-icon="{{card_icon}}" data-inline="false"></span>
-                      {% endif %}
-                    {% else %}
-                      <span>
-                        {% if card_icon_color == 'bg-primary' %}
-                          <i class="{{card_icon_family}} {{card_icon_family}}-{{card_icon}} {{card_icon_family}}-{{card_icon_size}} mdi-md-blue-900"></i>
+              <div class="col-md-{{card_width_md}} col-sm-{{card_width_md}} col-xs-12 pl-0 pr-2">
+                <article class="card raised-z5 mb-5">
+                  <div class="card-header bg-primary pt-2 pb-2">
+                    <div class="d-flex flex-row align-items-center">
+                      <div class="mr-3">
+                        {% if card_icon_family == 'iconify' %}
+                          {% if card_icon_color == 'bg-primary' %}
+                            <span class="{{card_icon_family}} {{card_icon_family}}-{{card_icon_size}} iconify-md-bg-primary" data-icon="{{card_icon}}" data-inline="false"></span>
+                          {% else %}
+                            <span class="{{card_icon_family}} {{card_icon_family}}-{{card_icon_size}} {{card_icon_family}}-{{card_icon_color}}" data-icon="{{card_icon}}" data-inline="false"></span>
+                          {% endif %}
                         {% else %}
-                          <i class="{{card_icon_family}} {{card_icon_family}}-{{card_icon}} {{card_icon_family}}-{{card_icon_size}} {{card_icon_family}}-{{card_icon_color}}"></i>
+                          <span>
+                            {% if card_icon_color == 'bg-primary' %}
+                              <i class="{{card_icon_family}} {{card_icon_family}}-{{card_icon}} {{card_icon_family}}-{{card_icon_size}} mdi-md-white"></i>
+                            {% else %}
+                              <i class="{{card_icon_family}} {{card_icon_family}}-{{card_icon}} {{card_icon_family}}-{{card_icon_size}} {{card_icon_family}}-{{card_icon_color}}"></i>
+                            {% endif %}
+                          </span>
                         {% endif %}
-                      </span>
-                    {% endif %}
+                      </div>
+                      <h3 class="m-0 md-white">{{card_title}}</h3>
+                    </div>
                   </div>
 
-                  <div class="media-body">
-                    <h4 class="post-headline mt-2 mb-2">{{card_title}}</h4>
-                    <p class="g-line-height-1_4 text-muted">{{card_text}}</p>
-
-                    {% for data in card_buttons %} {% for item in data %} {% for button in item[1] %}
-                      {% assign key   = button[0] %}
-                      {% assign value = button[1] %}
-                      {% if key == 'text' %}        {% assign button_text         = value %} {% endif %}
-                      {% if key == 'class' %}       {% assign button_class        = value %} {% endif %}
-                      {% if key == 'icon' %}        {% assign button_icon         = value %} {% endif %}
-                      {% if key == 'icon_family' %} {% assign button_icon_family  = value %} {% endif %}
-                      {% if key == 'icon_color' %}  {% assign button_icon_color   = value %} {% endif %}
-                      {% if key == 'icon_size' %}   {% assign button_icon_size    = value %} {% endif %}
-                      {% if key == 'href' %}        {% assign button_href         = value %} {% endif %}
-                      {% if key == 'target' %}      {% assign button_target       = value %} {% endif %}
-                    {% endfor %} {% endfor %}{% endfor %}
-
-                    {% if button_target == null %}
-                      <a class="md-blue-900 g-font-weight-600 g-font-size-12 text-uppercase" href="{{button_href}}">{{button_text}}</a>
-                    {% else %}
-                      <a class="md-blue-900 g-font-weight-600 g-font-size-12 text-uppercase" href="{{button_href}}" target="{{button_target}}">{{button_text}}</a>
-                    {% endif %}
+                  <div class="card-body g-min-height-200 r-text-300">{{card_text}}</div>
+                  <div class="card-footer r-text-200">
+                  {% for data in card_buttons %} {% for item in data %} {% for button in item[1] %}
+                    {% assign key   = button[0] %}
+                    {% assign value = button[1] %}
+                    {% if key == 'text' %}        {% assign button_text         = value %} {% endif %}
+                    {% if key == 'class' %}       {% assign button_class        = value %} {% endif %}
+                    {% if key == 'icon' %}        {% assign button_icon         = value %} {% endif %}
+                    {% if key == 'icon_family' %} {% assign button_icon_family  = value %} {% endif %}
+                    {% if key == 'icon_color' %}  {% assign button_icon_color   = value %} {% endif %}
+                    {% if key == 'icon_size' %}   {% assign button_icon_size    = value %} {% endif %}
+                    {% if key == 'href' %}        {% assign button_href         = value %} {% endif %}
+                    {% if key == 'target' %}      {% assign button_target       = value %} {% endif %}
+                  {% endfor %} {% endfor %}{% endfor %}
+
+                  {% if button_target == null %}
+                    <a class="card-link md-blue font-weight-bold g-font-size-12 text-uppercase" href="{{button_href}}">{{button_text}}</a>
+                  {% else %}
+                    <a class="card-link  md-blue font-weight-bold g-font-size-12 text-uppercase" href="{{button_href}}" target="{{button_target}}">{{button_text}}</a>
+                  {% endif %}
                   </div>
 
-                </div>
+                </article>
               {% endif %}
               </div>
               <!-- End Card Block -->
@@ -268,11 +271,11 @@ regenerate: true
               {% comment %} END cards
               ------------------------------------------------------------------ {% endcomment %}
             </div>
-            <!-- End Cards -->
-
+            <!-- END Cards -->
           </div>
+          <!-- END Main Container -->
         </section>
-        <!-- End Panel {{panel_settings.id}} -->
+        <!-- END Panel {{panel_settings.id}} -->
 
         {% comment %} Reset element variables (already processed)
         ------------------------------------------------------------------------ {% endcomment %}
@@ -286,20 +289,25 @@ regenerate: true
         {% if debug %}<!-- panel_settings:  {{panel_settings}} -->{% endif %}
         {% assign panel_options = panel_config_defaults.service | merge: panel_settings %}
         {% if debug %}<!-- panel_options:  {{panel_options}} -->{% endif %}
-        <div id="{{panel_settings.id}}">
+        <!-- Panel {{panel_settings.id}} -->
+        <section id="{{panel_settings.id}}">
+          <!-- Main Container -->
           <div class="{{container_class}}">
             <div class="row">
-
-            {% if panel_settings.header.enabled %}
-              <!-- service header -->
-              <!-- div class="col-md-10 col-md-offset-1 col-sm-10 col-sm-offset-1 col-xs-10 col-xs-offset-1 mb-3" -->
-              <div class="col-md-12 col-sm-12 col-xs-12 mb-3">
-                <h2 class="title text-center">{{panel_settings.header.title}}</h2>
-                <div class="tagline text-justify"> <p>{{panel_settings.header.description}}</p> </div>
+              <!-- Heading -->
+              {% if panel_settings.header.enabled %}
+              <div>
+                <h1 class="g-font-weight-500 mb-0">{{panel_settings.header.title}}</h1>
+                <p class="tagline mb-0"><b>{{panel_settings.header.tagline}}</b></p>
+                <div class="d-inline-block g-width-50 g-height-2 bg-primary mb-2"></div>
+                <p>{{panel_settings.header.description}}</p>
               </div>
-              <!-- end service header -->
-            {% endif %}
+              {% endif %}
+              <!-- END Heading -->
+            </div>
 
+            <!-- Card Block -->
+            <div class="row">
             {% assign card_items = cards | size %}
 
             {% for card in cards %}
@@ -327,7 +335,7 @@ 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-flat card-profile mb-0 raised-z0">
+                  <div class="card raised-z5 card-profile mb-0">
 
                     <div class="card-icon">
                       <a href="{{card_href}}">
@@ -356,10 +364,13 @@ regenerate: true
 
             {% endfor %}
             {% comment %} END cards
-            ---------------------------------------------------------------------- {% endcomment %}
+            -------------------------------------------------------------------- {% endcomment %}
             </div>
+            <!-- End Card Block -->
           </div>
-        </div>
+          <!-- End Main Container -->
+        </section>
+        <!-- END Panel {{panel_settings.id}} -->
 
         {% comment %} Reset element variables (already processed)
         ------------------------------------------------------------------------ {% endcomment %}
@@ -373,18 +384,18 @@ regenerate: true
         ------------------------------------------------------------------------ {% endcomment %}
         {% when 'news' %}
 
-        {% assign panel_options = panel_config_defaults.news | merge: panel_settings %}
+        {% assign panel_options = panel_config_defaults.news|merge: panel_settings %}
         {% if debug %}<!-- panel_options:  {{panel_options}} -->{% endif %}
         <section id="{{panel_settings.id}}">
           <div class="container">
 
             {% if panel_options.title %}
             <!-- Heading -->
-            <div class="row mb-4">
+            <div class="row">
               <div class="{{panel_settings.animate}}">
                 <h1 class="g-font-weight-500 mb-0">{{panel_options.title}}</h1>
                 <p class="tagline mb-0"><b>{{panel_options.tagline}}</b></p>
-                <div class="d-inline-block g-width-50 g-height-2 uno-bg-primary mb-2"></div>
+                <div class="d-inline-block g-width-50 g-height-2 bg-primary mb-2"></div>
               </div>
               <p class="{{helper_classes}}">{{panel_options.description}}</p>
             </div>
@@ -392,7 +403,7 @@ regenerate: true
             {% endif %}
 
             {% assign header_available  = false %}
-            {% assign card_items        = panel_options.cards | size %}
+            {% assign card_items        = panel_options.cards|size %}
 
             {% for card in panel_options.cards %}
               {% for items in card %}
@@ -410,13 +421,13 @@ regenerate: true
                   {% if key == 'buttons' %}       {% assign card_buttons  = value %} {% endif %}
                 {% endfor %}
                 {% if card_enabled == false %}
-                  {% assign card_items = card_items | minus:1 %}
+                  {% assign card_items = card_items|minus:1 %}
                 {% endif %}
               {% endfor %}
 
               {% assign posts_written     = 0 %}
               {% assign last_post_written = false %}
-              {% assign card_width = 12 | divided_by: posts_max %}
+              {% assign card_width        = 12|divided_by: posts_max %}
 
               <!-- Recent posts -->
               <div class="row">
@@ -424,29 +435,38 @@ regenerate: true
                 {% if posts_written == posts_max %} {% assign last_post_written = true %} {% break %}{% endif %}
 
                 {% if category == post_category and last_post_written != true %}
-                  {% assign posts_written = posts_written | plus:'1' %}
+                  {% assign posts_written = posts_written|plus:1 %}
                   <!-- Post -->
-                  <div class="col-md-{{card_width}} col-sm-{{card_width}} col-xs-12">
-                    <article>
+                  {% if posts_written != posts_max %}
+                  <div class="col-md-{{card_width}} col-sm-{{card_width}} col-xs-12 pr-2 pl-0">
+                  {% else %}
+                  <div class="col-md-{{card_width}} col-sm-{{card_width}} col-xs-12 pr-0 pl-0">
+                  {% endif %}
+                    <article class="card raised-z5 mb-5">
                       {% if post.image %}
-                        <img class="img-fluid w-100" src="{{post.image}}" alt="{{post.title}}">
+                        <img class="img-fluid g-height-200" src="{{post.image}}" alt="{{post.title}}">
                         {% assign post_width = '80x' %}
                       {% else %}
                         <img class="mt-2" src="" alt="">
                         {% assign post_width = '100x' %}
                       {% endif %}
-                      <div class="mx-auto">
-                        <h4 class="post-headline mt-2 mb-2">{{post.title}}</h4>
+                      <div>
+                        <h3 class="card-header bg-primary notoc">{{post.title}}</h3>
                         <!-- Excerpt -->
-                        <p class="g-line-height-1_4 mb-1">
-                          {{post.excerpt|truncatewords:30|replace:'...',' ...'|remove:'<div class="paragraph">'|remove:'</div>'|remove:'<p>'|remove:'</p>'}}
-                        </p>
+                        <div class="card-body r-text-300">
+                          {{post.excerpt|truncatewords:50|replace:'...',' ...'|remove:'<div class="paragraph">'|remove:'</div>'|remove:'<p>'|remove:'</p>'}}
+                        </div>
                         <!-- End Excerpt -->
-                        <span class="d-block text-muted text-uppercase g-font-weight-600 g-font-size-12 mb-3">
-                          <i class="mdi mdi-calendar-blank"></i>
+                        <div class="card-body text-muted r-text-200">
+                          <i class="mdi mdi-calendar-blank mr-1"></i>
                           {{post.date|date:"%Y %B, %e"}}
-                        </span>
-                        <a class="md-blue-900 g-font-weight-600 g-font-size-12 text-uppercase" href="{{post.url}}"><b>{{readmore_text}} · {{post.tagline}}</b></a>
+                        </div>
+                        <div class="card-footer r-text-200">
+                          <a class="card-link md-blue font-weight-bold g-font-size-12 text-uppercase"
+                             href="{{post.url}}">
+                             {{readmore_text}} · {{post.tagline}}
+                          </a>
+                        </div>
                       </div>
                     </article>
                    </div>