j1_template 2019.4.8 → 2019.4.10

data/lib/starter_web/assets/_data/authclient.html

@@ -0,0 +1,365 @@
+---
+regenerate:                             true 
+---
+{% capture cache %}
+
+{% comment %}
+ # -----------------------------------------------------------------------------
+ # ~/assets/data/authclient.html
+ # Liquid PROCEDURE to generate the HTML (data) portion of all modals used
+ # by J1AuthClient
+ #
+ # Product/Info:
+ # https://jekyll.one
+ #
+ # Copyright (C) 2019 Juergen Adams
+ #
+ # J1 Template is licensed under the MIT License.
+ # See: https://github.com/jekyll-one-org/j1_template/blob/master/LICENSE
+ #
+ # -----------------------------------------------------------------------------
+ # Test data:
+ #   liquid_var: {{ liquid_var | debug }}
+ #   authclient_options: {{ authclient_options | debug }}
+ # -----------------------------------------------------------------------------
+{% endcomment %}
+
+{% comment %} Liquid procedures
+-------------------------------------------------------------------------------- {% endcomment %}
+{% capture select_color     %}themes/{{site.template.name}}/procedures/global/select_color.proc{% endcapture %}
+{% capture select_icon_size %}themes/{{site.template.name}}/procedures/global/select_icon_size.proc{% endcapture %}
+
+{% comment %} Set config files
+-------------------------------------------------------------------------------- {% endcomment %}
+{% assign navigator_defaults          = site.data.modules.defaults.navigator.defaults %}
+{% assign navigator_settings          = site.data.modules.navigator.settings %}
+
+{% comment %} Set config data
+-------------------------------------------------------------------------------- {% endcomment %}
+{% assign nav_authclient_default      = navigator_defaults.nav_authclient %}
+{% assign nav_authclient_settings     = navigator_settings.nav_authclient %}
+
+{% comment %} Set config options
+-------------------------------------------------------------------------------- {% endcomment %}
+{% assign authclient_options          = nav_authclient_default | merge: nav_authclient_settings %}
+{% assign providers                   = site.j1_auth.providers.activated %}
+{% assign active_provider             = site.j1_auth.providers.activated[0] %}
+
+
+{% comment %} Liquid var initialization
+-------------------------------------------------------------------------------- {% endcomment %}
+
+{% comment %} Set auth_client properties 
+-------------------------------------------------------------------------------- {% endcomment %}
+{% assign icon_family                 = authclient_options.icon_family | downcase %}
+{% assign signin_icon                 = authclient_options.signin_icon %}
+{% assign signout_icon                = authclient_options.signout_icon %}
+
+{% assign signin_modal_title          = authclient_options.auth_signin_modal.title %}
+{% assign signin_modal_body_text      = authclient_options.auth_signin_modal.body_text %}
+{% assign signout_modal_title         = authclient_options.auth_signout_modal.title %}
+{% assign signout_modal_body_text     = authclient_options.auth_signout_modal.body_text %}
+
+{% if providers contains 'disqus' %}
+  {% assign auth_disqus_enabled       = true %}
+  {% assign auth_disqus_id            = authclient_options.auth_disqus.id %}
+  {% assign auth_disqus_title         = authclient_options.auth_disqus.title | downcase %}
+  {% assign auth_disqus_text          = authclient_options.auth_disqus.text %}
+{% else %}
+  {% assign auth_disqus_enabled       = false %}
+{% endif %}
+
+{% if providers contains 'github' %}
+  {% assign auth_github_enabled       = true %}
+  {% assign auth_github_id            = authclient_options.auth_github.id %}
+  {% assign auth_github_title         = authclient_options.auth_github.title | downcase %}
+  {% assign auth_github_text          = authclient_options.auth_github.text %}
+{% else %}
+  {% assign auth_github_enabled       = false %}
+{% endif %}
+
+{% if providers contains 'facebook' %}
+  {% assign auth_facebook_enabled     = true %}
+  {% assign auth_facebook_id          = authclient_options.auth_facebook.id %}
+  {% assign auth_facebook_title       = authclient_options.auth_facebook.title | downcase %}
+  {% assign auth_facebook_text        = authclient_options.auth_facebook.text %}
+{% else %}
+  {% assign auth_facebook_enabled     = false %}
+{% endif %}
+
+{% if providers contains 'twitter' %}
+  {% assign auth_twitter_enabled      = true %}
+  {% assign auth_twitter_id           = authclient_options.auth_twitter.id %}
+  {% assign auth_twitter_title        = authclient_options.auth_twitter.title | downcase %}
+  {% assign auth_twitter_text         = authclient_options.auth_twitter.text %}
+{% else %}
+  {% assign auth_twitter_enabled      = false %}
+{% endif %}
+
+{% if providers contains 'patreon' %} 
+  {% assign auth_patreon_enabled      = true %}
+  {% assign auth_patreon_id           = authclient_options.auth_patreon.id %}
+  {% assign auth_patreon_title        = authclient_options.auth_patreon.title | downcase %}
+  {% assign auth_patreon_text         = authclient_options.auth_patreon.text %}
+{% else %}
+  {% assign auth_patreon_enabled      = false %}
+{% endif %}
+
+{% if authclient_options.icon_family == 'FontAwesome' or authclient_options.icon_family == 'FontAwesome4' or authclient_options.icon_family == 'FontAwesome5' %}
+  {% assign icon_family = 'fa' %}
+{% elsif authclient_options.icon_family == 'MDI' or authclient_options.icon_family == 'Material Design Icons'%}
+  {% assign icon_family = 'mdi' %}
+{% else %}
+  {% assign icon_family = 'mdi' %}
+{% endif %}
+
+{% include {{select_color}} color=authclient_options.icon_color fallback="#9E9E9E" %}
+{% capture icon_color %}style="color:{{color}}"{% endcapture %}
+
+{% include {{select_icon_size}} family=authclient_options.icon_family size=authclient_options.icon_size %}
+{% assign icon_size = size %}
+
+{% comment %} Main
+-------------------------------------------------------------------------------- {% endcomment %}
+
+{% comment %} Modal SignIn
+-------------------------------------------------------------------------------- {% endcomment %}
+<!-- [INFO   ] [j1.authclient.html                    ] [START: Modal signin|signup] -->
+<div class="modal fade" id="modalOmniSignIn" tabindex="-1" role="dialog" aria-labelledby="modalOmniSignIn" aria-hidden="true">
+  <div class="modal-dialog modal-lg modal-notify modal-info" role="document">
+    
+    <!-- Content -->
+    <div class="modal-content">
+
+      <!--Header-->
+      <div class="modal-header">
+        <p class="lead">
+          <i class="mdi mdi-2x mdi-account mdi-dark"></i>
+          {{signin_modal_title}}
+        </p>
+      </div>
+
+      <!-- Body -->
+      <div class="modal-body mr-5 ml-5 mb-0">
+        <p style="text-align: justify;">{{signin_modal_body_text | asciidocify}}</p>
+        <h5 class="mt-1 mb-3 notoc">Available options</h5>
+
+        <!-- Modal nav pills -->
+        <div class="row ml-2 mr-2">
+          <ul class="nav nav-pills nav-pills-icons mt-2" role="tablist">
+
+          {% comment %} Array used to order the (provider) tabs
+          ---------------------------------------------------------------------- {% endcomment %}
+          {% for provider in providers %}
+
+            {% if provider == active_provider %}
+              {% assign active_flag = " active" %}
+            {% else %}
+              {% assign active_flag = "" %}
+            {% endif %}
+
+            {% if provider == 'disqus' and auth_disqus_enabled %}
+            <li class="nav-item">
+              <a class="nav-link{{active_flag}}" href="#h-tabs-{{ auth_disqus_id }}" role="tab" data-toggle="tab" aria-expanded="false" aria-selected="false">
+                <i class="mdi mdi-disqus mt-1 mb-2"></i> {{ auth_disqus_title }}
+              </a>
+            </li>
+            {% endif %}
+
+            {% if provider == 'github' and auth_github_enabled %}
+            <li class="nav-item">
+              <a class="nav-link{{active_flag}}" href="#h-tabs-{{ auth_github_id }}" role="tab" data-toggle="tab" aria-expanded="false" aria-selected="true">
+                <i class="mdi mdi-github-circle mt-1 mb-2"></i> {{ auth_github_title }}
+              </a>
+            </li>
+            {% endif %}
+
+            {% if provider == 'facebook' and auth_facebook_enabled %}
+            <li class="nav-item">
+              <a class="nav-link{{active_flag}}" href="#h-tabs-{{ auth_facebook_id }}" role="tab" data-toggle="tab" aria-expanded="false" aria-selected="false">
+                <i class="mdi mdi-facebook mt-1 mb-2"></i> {{ auth_facebook_title }}
+              </a>
+            </li>
+            {% endif %}
+
+            {% if provider == 'twitter' and auth_twitter_enabled %}
+            <li class="nav-item">
+              <a class="nav-link{{active_flag}}" href="#h-tabs-{{ auth_twitter_id }}" role="tab" data-toggle="tab" aria-expanded="false" aria-selected="false">
+                <i class="mdi mdi-twitter mt-1 mb-2"></i> {{ auth_twitter_title }}
+              </a>
+            </li>
+            {% endif %}
+
+            {% if provider == 'patreon' and auth_patreon_enabled %}
+            <li class="nav-item">
+              <a class="nav-link{{active_flag}}" href="#h-tabs-{{ auth_patreon_id }}" role="tab" data-toggle="tab" aria-expanded="true" aria-selected="false">
+                <i class="mdi mdi-patreon mt-1 mb-2"></i>
+                {{ auth_patreon_title }}
+              </a>
+            </li>
+            {% endif %}
+
+          {% endfor %}
+          </ul>
+          
+          <div class="tab-content tab-space">
+          {% for provider in providers %}
+
+            {% if provider == active_provider %}
+              {% assign active_flag = " active" %}
+            {% else %}
+              {% assign active_flag = "" %}
+            {% endif %}
+
+            {% if provider == 'disqus' and auth_disqus_enabled %}
+              <div class="tab-pane{{active_flag}}" id="h-tabs-{{ auth_disqus_id }}">{{ auth_disqus_text | asciidocify }}</div>
+            {% endif %}
+            {% if provider == 'github' and auth_github_enabled %}
+              <div class="tab-pane{{active_flag}}" id="h-tabs-{{ auth_github_id }}">{{ auth_github_text | asciidocify }}</div>
+            {% endif %}
+            {% if provider == 'facebook' and auth_facebook_enabled %}
+              <div class="tab-pane{{active_flag}}" id="h-tabs-{{ auth_facebook_id }}">{{ auth_facebook_text | asciidocify }}</div>
+            {% endif %}
+            {% if provider == 'patreon' and auth_patreon_enabled %}
+              <div class="tab-pane{{active_flag}}" id="h-tabs-{{ auth_patreon_id }}">{{ auth_patreon_text | asciidocify }}</div>
+            {% endif %}
+            {% if provider == 'twitter' and auth_twitter_enabled %}
+              <div class="tab-pane{{active_flag}}" id="h-tabs-{{ auth_twitter_id }}">{{ auth_twitter_text | asciidocify }}</div>
+            {% endif %}
+          {% endfor %}
+          </div>
+
+        </div>
+      </div>
+
+      <!-- Footer -->
+      <div class="modal-footer justify-content-center">
+        <a type="button" id="signInButton" class="btn btn-primary-modal mr-2" data-dismiss="modal">
+          <i class="mdi mdi-18px mdi-dark mdi-login"></i>
+          Yes, please
+        </a>
+        <a type="button" id="exitButton" class="btn btn-outline-modal" data-dismiss="modal">
+          <i class="mdi mdi-18px mdi-dark mdi-close"></i>
+          No, thanks
+        </a>
+      </div>
+    </div>
+    <!-- END Content -->
+
+  </div>
+</div> <!-- Modal SignIn -->
+<!-- [INFO   ] [j1.authclient.html                    ] [END: Modal signin] -->
+
+{% comment %} Modal SignOut
+-------------------------------------------------------------------------------- {% endcomment %}
+<!-- [INFO   ] [j1.authclient.html                    ] [START: Modal signout] -->
+<div class="modal fade top" id="modalOmniSignOut" tabindex="-1" role="dialog" aria-labelledby="modalOmniSignOut" aria-hidden="true" data-backdrop="false">
+  <div class="modal-dialog modal-lg modal-notify modal-warning" role="document">
+    <!-- Content -->
+    <div class="modal-content">
+      
+      <!--Header-->
+      <div class="modal-header">
+        <p class="lead">
+          <i class="mdi mdi-2x mdi-dark mdi-account"></i>
+          {{signout_modal_title}}
+        </p>
+      </div>
+
+      <!-- Body -->
+      <div class="modal-body mr-5 ml-5 mb-0">
+        <!-- User info placed dynamically -->
+        <div id="user_state_info" class="text-left mb-3">
+          <h4 class="user-info">You are signed in to provider: </h4>
+        </div>
+
+        <p style="text-align: justify;">{{signout_modal_body_text | asciidocify}}</p>
+
+        <h5 class="mt-1 mb-3 notoc">Available options</h5>
+        <form id="authclient-form" class="form-horizontal">
+          <div class="mdc-list-group">
+            <div class="ml-5 mt-0 mr-0 mb-5">
+
+              <div class="switch">
+                <label>
+                  <input id="providerSignOut" name="providerSignOut" type="checkbox">
+                  <span class="bmd-switch-track"></span>
+                  SignOut completely (Provider)
+                </label>
+              </div>
+
+            </div>
+          </div>
+        </form>
+
+      </div>
+
+      <!-- Footer -->
+      <div class="modal-footer">
+        <a type="button" id="signOutButton" class="btn btn-primary-modal mr-2" data-dismiss="modal">
+          <i class="mdi mdi-18px mdi-dark mdi-logout"></i>
+          Yes, please
+        </a>
+        <a type="button" id="exitButton" class="btn btn-outline-modal" data-dismiss="modal">
+          <i class="mdi mdi-18px mdi-dark mdi-close"></i>
+          No, thanks
+        </a>
+      </div>
+
+    </div> <!-- END Content -->    
+  </div>
+</div> <!-- Modal SignOut -->
+
+{% comment %} Modal UserStateInfo
+-------------------------------------------------------------------------------- {% endcomment %}
+<!-- [INFO   ] [j1.authclient.html                    ] [START: Modal SIDE INFO signed in] -->
+<div class="modal fade right" id="sideModalAlreadySigneIn" tabindex="-1" role="dialog" aria-labelledby="sideModalAlreadySigneIn" aria-hidden="true" data-backdrop="false">
+  <div class="modal-dialog modal-side modal-top-right modal-notify modal-success" role="document">
+    <!-- Content -->
+    <div class="modal-content">
+      <!--Header-->
+      <div class="modal-header">
+        <i class="mdi mdi-2x mdi-account mdi-dark"></i>
+        <p class="lead">Info</p>
+      </div>
+      <!-- Body -->
+      <div class="modal-body">
+        <div class="text-center">
+          <p>You're already signed in</p>
+        </div>
+      </div>
+      <!-- Footer -->
+      <div class="modal-footer justify-content-center">
+        <a type="button" class="btn btn-outline-modal" data-dismiss="modal">OK</a>
+      </div>
+    </div>
+    <!-- END Content -->
+  </div>
+</div> <!-- END Modal UserStateInfo -->
+<!-- [INFO   ] [j1.authclient.html                    ] [END: Modal SIDE INFO signed in] -->
+
+{% comment %} Modal TOP INFO signed in
+--------------------------------------------------------------------------------
+<!-- [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">
+    <!-- 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-outline-modal" data-dismiss="modal"OK</a>
+        </div>
+      </div>
+    </div>
+    <!-- END Content -->
+  </div>
+</div>
+<!-- [INFO   ] [j1.authclient.html                    ] [END: Modal TOP INFO signed in] -->
+-------------------------------------------------------------------------------- {% endcomment %}
+
+{% endcapture %}
+
+{{ cache | pretty_print | remove:'<html><body>' | remove:'</body></html>' | strip_empty_lines }}
+{% assign cache = nil %}

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

@@ -0,0 +1,431 @@
+---
+regenerate:                             true
+---
+{% capture cache %}
+
+{% comment %}
+ # -----------------------------------------------------------------------------
+ # ~/assets/data/banner.html
+ # Liquid procedure to generate HTML (data) for all BANNER configured for
+ # (fragmented) AJAX load
+ #
+ # Product/Info:
+ # https://jekyll.one
+ #
+ # Copyright (C) 2019 Juergen Adams
+ #
+ # J1 Template is licensed under the MIT License.
+ # See: https://github.com/jekyll-one-org/j1_template/blob/master/LICENSE
+ #
+ # -----------------------------------------------------------------------------
+ # Test data:
+ #    {{ variable | debug }}
+ #
+ # -----------------------------------------------------------------------------
+{% endcomment %}
+
+{% comment %} Liquid procedures
+-------------------------------------------------------------------------------- {% endcomment %}
+{% capture select_color     %}themes/{{site.template.name}}/procedures/global/select_color.proc{% endcapture %}
+{% capture select_icon_size %}themes/{{site.template.name}}/procedures/global/select_icon_size.proc{% endcapture %}
+{% capture create_bs_button %}themes/{{site.template.name}}/procedures/global/create_bs_button.proc{% endcapture %}
+{% capture news_box %}themes/{{site.template.name}}/modules/footers/boxes/news_box.proc{% endcapture %}
+
+{% comment %} Set global settings
+-------------------------------------------------------------------------------- {% endcomment %}
+{% assign environment = site.environment %}
+{% assign debug       = false %}
+
+
+{% comment %} Process YML config data
+================================================================================ {% endcomment %}
+
+{% comment %} Set config files
+-------------------------------------------------------------------------------- {% endcomment %}
+{% assign template_config         = site.data.template_settings %}
+{% assign blocks                  = site.data.blocks %}
+{% assign banner_config_defaults  = blocks.defaults.banner %}
+{% assign banner_config_settings  = blocks.banner %}
+
+{% comment %} Set config data
+-------------------------------------------------------------------------------- {% endcomment %}
+{% assign banner_config_defaults = banner_config_defaults.defaults %}
+{% assign banner_config_settings = banner_config_settings.settings %}
+
+{% comment %} Set config options
+-------------------------------------------------------------------------------- {% endcomment %}
+{% assign parallax_options  = banner_config_defaults.parallax_settings | merge: banner_config_settings.parallax_settings %}
+
+{% comment %} Set HELPER variables
+-------------------------------------------------------------------------------- {% endcomment %}
+{% capture banner_config_file_name %}~/_data/blocks/banner.yml{% endcapture %}
+
+
+{% comment %} Main
+================================================================================ {% endcomment %}
+{% for items in banner_config_settings %}
+  {% assign key             = items[0] %}
+  {% assign value           = items[1] %}
+  {% assign banner_config   = value %}
+
+  {% for items in banner_config %}
+    {% for banners in items %}
+
+      {% if debug %} banners: {{ banners }} {% endif %}
+
+      {% comment %} parse settings for MAIN keys
+      -------------------------------------------------------------------------- {% endcomment %}
+      {% for banner in banners %}
+        {% assign data_type = banner | is_type %}
+        {% if data_type == 'hash' %}
+          {% assign banner_settings = banner %}
+          {% assign id              = banner_settings.id %}
+          {% assign enabled         = banner_settings.enabled %}
+          {% assign type            = banner_settings.type %}
+          {% assign icon_family     = banner_settings.icon_family | downcase %}
+          {% assign style           = banner_settings.style %}
+          {% assign raised          = banner_settings.raised %}
+          {% assign lane_span       = banner_settings.lane_span %}
+          {% assign buttons         = banner_settings.buttons %}
+          {% assign cards           = banner_settings.cards %}
+        {% endif %}
+      {% endfor %}
+
+      {% if lane_span == 'fixed' %}
+        {% assign container_class = 'container' %}
+      {% elsif lane_span == 'fluid' %}
+        {% assign container_class = 'container-fluid' %}
+      {% else %}
+        {% assign container_class = 'container' %}
+      {% endif %}
+
+      {% comment %} process current banner
+      -------------------------------------------------------------------------- {% endcomment %}
+
+      {% if banner_settings.enabled %}
+      <!-- BANNER ID: {{banner_settings.id}}} -->
+
+      {% case banner_settings.type %}
+
+        {% comment %} Collect DIVIDER banner
+        ------------------------------------------------------------------------ {% endcomment %}
+        {% when 'divider' %}
+        {% assign banner_options = banner_config_defaults.divider | merge: banner_settings %}
+        {% if debug %}<!-- banner_options:  {{banner_options}} -->{% endif %}
+        <div id="{{banner_settings.id}}">
+          <div class="row banner-divider"></div>
+        </div> <!-- End banner {{ id }} -->
+        {% comment %} Reset element variables (already processed)
+        ------------------------------------------------------------------------ {% endcomment %}
+        {% assign banner_settings = nil %}
+
+        {% comment %} Collect TEASER banner
+        ------------------------------------------------------------------------ {% endcomment %}
+        {% when 'teaser' %}
+        {% assign banner_options = banner_config_defaults.teaser | merge: banner_settings %}
+        {% if debug %}<!-- banner_options:  {{banner_options}} -->{% endif %}
+        <section id="{{banner_settings.id}}">
+          <div class="container">
+          {% 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 == 'width' %}       {% assign card_width        = value %}                   {% endif %}
+                {% if key == 'type' %}        {% assign card_type         = value %}                   {% endif %}
+                {% if key == 'icon' %}        {% assign icon              = value %}                   {% endif %}
+                {% if key == 'icon_size' %}   {% assign icon_size         = value %}                   {% endif %}
+                {% if key == 'icon_color' %}  {% assign icon_color        = value %}                   {% endif %}
+                {% if key == 'image_path' %}  {% assign card_image_path   = value %}                   {% endif %}
+                {% if key == 'animate' %}     {% assign card_animate      = value %}                   {% endif %}
+                {% if key == 'title' %}       {% assign card_title        = value | strip_newlines%}   {% endif %}
+                {% if key == 'description' %} {% assign card_description  = 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 == 'buttons' %}     {% assign card_buttons      = value %}                   {% endif %}
+              {% endfor %}
+              {% if card_enabled == false %} {% assign card_items = card_items | minus:1 %} {% endif %}
+            {% endfor %}
+
+            {% if card_icon_color %}
+              {% include {{select_color}} color=card_icon_color fallback="#fff" %}
+              {% assign card_icon_color = color %}
+              {% capture card_icon_color %}style="color:{{card_icon_color}}" %}{% endcapture %}
+            {% else %}
+              {% assign card_icon_color = '' %}
+            {% endif %}
+
+            {% include {{select_icon_size}} family=icon_family size=icon_size %}
+            {% assign icon_size = size %}
+
+            {% if card_width %}
+              {% assign card_enabled = true %}
+              {% assign card_width_md = card_width %}
+            {% else %}
+              {% assign card_width_md = 12 | divided_by: card_items %}
+            {% endif %}
+
+            {% if card_animate %}
+              {% assign card_animate = card_animate %}
+            {% else %}
+              {% assign card_animate = '' %}
+            {% endif %}
+
+            {% comment %} TODO: Add payment_url to config
+            ---------------------------------------------------------------- {% endcomment %}
+            {% assign patreon_enabled     = true %}
+            {% assign patreon_home        = 'https://www.patreon.com' %}
+            {% assign pledge_url          = 'join' %}
+            {% assign vanity              = 'jekyll_one' %}
+            {% assign pledge_button_text  = 'Become a Patron' %}
+
+            {% capture payment_url %}{{patreon_home}}/{{pledge_url}}/{{vanity}}{% endcapture %}
+
+            {% if card_type == 'text' and card_enabled %}
+            {% if card_animate %} {% capture animate %}animated {{card_animate}}{% endcapture %} {% endif %}
+            <!-- Heading -->
+            <div class="row">
+              <div class="col-lg-9">
+                <div class="{{animate}}">
+                  <h1 class="g-font-weight-500 g-mb-0">{{card_title}}</h1>
+                  <p class="tagline">{{card_tagline}}</p>
+                  <div class="d-inline-block g-width-50 g-height-2 g-bg-primary g-mb-5"></div>
+                </div>
+              </div>
+            </div>
+            <!-- End Heading -->
+
+            <!-- Card -->
+            <div class="row {{animate}}">
+              <div class="col-lg-9 g-mb-30">
+
+                <p class="lead">{{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>
+
+              </div>
+            </div>
+            <!-- End Card -->
+            {% endif %}
+
+          {% endfor %}
+          {% comment %} END cards
+          -------------------------------------------------------------------- {% endcomment %}
+          </div>
+        </section> <!-- End banner {{ id }} -->
+
+        {% comment %} Reset element variables (already processed)
+        ------------------------------------------------------------------------ {% endcomment %}
+        {% assign banner_settings = nil %}
+
+        {% comment %} END TEASER banner
+        ------------------------------------------------------------------------ {% endcomment %}
+
+        {% comment %} Collect IMAGE banner
+        ------------------------------------------------------------------------ {% endcomment %}
+        {% when 'image' %}
+        <div id="{{banner_settings.id}}">
+        {% assign banner_options = banner_config_defaults.image | merge: banner_settings %}
+        {% if debug %}<!-- banner_options:  {{banner_options}} -->{% endif %}
+
+          {% 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 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>
+                  .{{banner_settings.id}}-image{background:url("{{background_image}}"); min-height: {{size_y}}px; background-position: center;  background-repeat: no-repeat; background-size: cover; }
+                </style>"
+              );
+
+              <div class="panel-fluid">
+                <div class="row no-gutters {{banner_settings.id}}-image"></div>
+              </div>
+
+            {% endif %}
+          {% endfor %}
+          {% comment %} END cards
+          -------------------------------------------------------------------- {% endcomment %}
+        </div> <!-- End banner {{ id }} -->
+
+        {% comment %} Reset element variables (already processed)
+        ---------------------------------------------------------------------- {% endcomment %}
+        {% assign banner_settings = nil %}
+
+        {% comment %} END IMAGE banner
+        ---------------------------------------------------------------------- {% endcomment %}
+
+
+        {% comment %} Collect PARALLAX banner
+        ------------------------------------------------------------------------ {% endcomment %}
+        {% when 'parallax' %}
+        <div id="{{banner_settings.id}}">
+        {% assign banner_options = banner_config_defaults.parallax | merge: banner_settings %}
+        {% if debug %}<!-- banner_options:  {{banner_options}} -->{% endif %}
+
+          {% 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 == 'cite_text_size' %}        {% assign card_cite_text_size        = value %}                   {% endif %}
+                {% if key == 'cite_text_quotes' %}      {% assign card_cite_text_quotes      = value %}                   {% endif %}
+                {% if key == 'cite_text' %}             {% assign card_text                  = value | strip_newlines %}  {% endif %}
+                {% if key == 'cite_size' %}             {% assign card_cite_size             = value %}                   {% endif %}
+                {% if key == 'cite' %}                  {% assign card_cite                  = value | strip_newlines %}  {% endif %}
+                {% if key == 'text_color' %}            {% assign card_text_color            = value %}                   {% endif %}
+                {% if key == 'cite_color' %}            {% assign card_cite_color            = value %}                   {% endif %}
+                {% if key == 'gridify' %}               {% assign card_gridify               = value %}                   {% endif %}
+                {% if key == 'gridifier' %}             {% assign card_gridifier             = value %}                   {% endif %}
+                {% if key == 'darken' %}                {% assign card_darken                = value %}                   {% endif %}
+                {% if key == 'size_y' %}                {% assign card_background_size       = value %}                   {% endif %}
+                {% if key == 'background_image' %}      {% assign card_background_image      = value %}                   {% endif %}
+              {% endfor %}
+            {% endfor %}
+
+            {% if card_type == 'quote' and card_enabled %}
+
+              {% comment %} Set parallax DEFAULTS
+              ------------------------------------------------------------------ {% endcomment %}
+              {% assign background_image  = parallax_options.background %}
+              {% assign gridify           = parallax_options.gridify %}
+              {% assign gridifier         = parallax_options.gridifier %}
+              {% assign text_color        = parallax_options.text_color %}
+              {% assign cite_color        = parallax_options.cite_color %}
+              {% assign darken            = parallax_options.darken %}
+
+              {% comment %} Set banner VALUES
+              ------------------------------------------------------------------ {% endcomment %}
+              {% if card_gridify %}               {% assign gridify           = card_gridify %}               {% endif %}
+              {% if card_gridifier %}             {% assign gridifier         = card_gridifier %}             {% endif %}
+              {% if card_darken %}                {% assign darken            = card_darken %}                {% endif %}
+              {% if card_text_color %}            {% assign text_color        = card_text_color %}            {% endif %}
+              {% if card_cite_color %}            {% assign cite_color        = card_cite_color %}            {% endif %}
+              {% if card_background_size %}       {% assign size_y            = card_background_size %}       {% endif %}
+              {% if card_background_image %}      {% assign background_image  = card_background_image %}      {% endif %}
+
+              {% capture darken %}0.{{darken}}{% endcapture %}
+
+              {% include {{select_color}} color=text_color fallback="#FAFAFA" %}
+              {% assign text_color = color %}
+
+              {% include {{select_color}} color=cite_color fallback="#FAFAFA" %}
+              {% assign cite_color = color %}
+
+              {% comment %} Set individual STYLE tags
+              ------------------------------------------------------------------ {% endcomment %}
+              $('head').append(
+
+                "<style>
+                  .{{banner_settings.id}}-parallaxBg{background:url("{{background_image}}"); min-height: {{size_y}}px; background-attachment: fixed; background-position: center;  background-repeat: no-repeat; background-size: cover; }
+                  .{{banner_settings.id}}-parallax-quote{color:#fff;padding:100px 0;position:relative;text-align:center}
+                  .{{banner_settings.id}}-parallax-quote:before{top:0;left:0;width:100%;height:100%;content:" ";position:absolute;{% if gridify == true %}background: url("{{gridifier}}") repeat;{% endif %}}
+                  .{{banner_settings.id}}-parallax-quote:after{top:0;left:0;width:100%;height:100%;content:" ";position:absolute;background:rgba(0,0,0,{{darken}})}
+                  .{{banner_settings.id}}-parallax-quote-in{z-index: 2;position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; padding: 20px; text-align: center; }
+                  .{{banner_settings.id}}-parallax-quote-in p{color:{{text_color}};font-size:{{card_cite_text_size}};text-transform:uppercase;}
+                  {% if card_text and card_cite_text_quotes %}
+                  .{{banner_settings.id}}-parallax-quote-in p:after,.{{banner_settings.id}}-parallax-quote-in p:before{content:' " ';}
+                  {% endif %}
+                  .{{banner_settings.id}}-parallax-quote-in small{color:{{cite_color}};font-size:{{card_cite_size}};font-weight:600;}
+                  .{{banner_settings.id}}-parallax-quote:after{background: rgba(0,0,0,{{darken}})}
+                </style>"
+              );
+
+                <div class="panel-fluid">
+                <div class="row no-gutters {{banner_settings.id}}-parallax-quote {{banner_settings.id}}-parallaxBg">
+                  <div class="col-md-12 col-xs-12 {{banner_settings.id}}-parallax-quote-in">
+                    {% if card_text %} <p>{{card_text}}</p>{% endif %}
+                    {% if card_text %}<i>{{card_cite}}</i>{% endif %}
+                  </div>
+                </div>
+              </div>
+            </div> <!-- End banner {{ id }} -->
+            {% endif %}
+          {% endfor %}
+          {% comment %} END cards
+          ---------------------------------------------------------------------- {% endcomment %}
+
+          {% comment %} Reset element variables (already processed)
+          ---------------------------------------------------------------------- {% endcomment %}
+          {% assign banner_settings = nil %}
+
+          {% comment %} END PARALLAX banner
+          ---------------------------------------------------------------------- {% endcomment %}
+
+          {% else %}
+          {% comment %} Collect EXCEPTION banner: given type NOT found
+          ---------------------------------------------------------------------- {% endcomment %}
+          {% unless banner_settings.id == 'exception_container' %}
+          <div id="exception_container">
+            <div id="{{banner_settings.id}}" class="container-fluid no-padding">
+              <div class="col-md-12 col-sm-12 col-xs-12 no-padding">
+                <div class="box">
+                  <div class="content content-danger">
+                    <h2 class="notoc">
+                      <i class="mdi mdi-alarm-light mdi-3x mdi-md-red mr-1"></i>
+                      Banner of type <big>{{banner_settings.type}}</big> not found
+                    </h2>
+                    <h4 class="notoc box-title">Check your configuration at {{banner_config_file_name}}</h4>
+                    <div class="box-description">
+                      Don't worry about this. Maybe you've a typo in the banner configuration.
+                      Check the banner config file for the unknown type. <br />
+                      Check for something wrong like:
+                      <div class="mt-2 mb-2">
+                        <b>id:        {{banner_settings.id}}</b>  <br />
+                        <b>type:     {{banner_settings.type}}</b> <br />
+                        <b>comment:  {{banner_settings.comment}}</b>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div> <!-- End banner {{banner_settings.id}} -->
+          </div> <!-- End exception_container -->
+          {% endunless %}
+
+      {% comment %} Reset element variables (already processed)
+      -------------------------------------------------------------------------- {% endcomment %}
+      {% assign banner_settings = nil %}
+
+      {% comment %} END EXEPTION banner
+      -------------------------------------------------------------------------- {% endcomment %}
+
+      {% endcase %}
+      {% endif %} {% comment %} endif enabled {% endcomment %}
+
+    {% endfor %}  {% comment %} END banners {% endcomment %}
+  {% endfor %}  {% comment %} END banner_config {% endcomment %}
+{% endfor %}  {% comment %} END banner_config_settings {% endcomment %}
+
+{% endcapture %}
+
+{{ cache | pretty_print | remove:'<html><body>' | remove:'</body></html>' | strip_empty_lines }}
+{% assign cache = nil %}