j1-template 2021.1.18 → 2021.1.22

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: aa01cf574f18489413430d77f6ef69779d295abbfb682aa4c3ee3ee231d47809
-  data.tar.gz: 7c1ca8d541741b15a9088c672455b4b315f1235672fbe15d3b2307e80c748036
+  metadata.gz: c099a5b2dbbcd100e4d23f86d6c85f0a0bf6621779b49a57229595d8e9496553
+  data.tar.gz: 971523404db89f2cea6788b777adee94a0acbe83427c928516cd9696eff7695d
 SHA512:
-  metadata.gz: d12662ee484c5c29de662747de3839b9ceac0f628a4bb4cc9a2ff0710258b8593ab0e4d834d5b217543b1ef44178f077013b7246171111395028a74eea21519b
-  data.tar.gz: 1b7779503fcd407413681efe3eb529dbf08b3bdf6ebc0cec1636005d985ca9cba8a13c89b1b22e3e17dc885c12775bef5557ac2fa3b5001d7acc61398dae8545
+  metadata.gz: 8f9bf76cfe0b8becfcaa32e12198465c2e1eab907dc56c552e2f7d869d4641fd21557c5e53c1173d6ce8eb7a535ca2baa0bfe3962bc87e96f3f4ebaae10a1129
+  data.tar.gz: a4726d2714bb21ffd7adce7ef7e8957b5b3325f713252157df37f0deb5feb9e310af301fcd00a0dfb5691af8b90f138056816e74b13133a50a899ab04c740b55

data/_includes/themes/j1/layouts/content_generator_post.html

@@ -52,7 +52,7 @@
  {% assign rtext_size = 0 %}
 {% endif %}
 
-{% comment %} language detection
+{% comment %} i18n: language detection
 -------------------------------------------------------------------------------- {% endcomment %}
 {% if site.language == "en" %}
   {% assign language = "en" %}
@@ -62,6 +62,7 @@
   {% assign language = "en" %}
 {% endif %}
 
+
 {% comment %} Main
 -------------------------------------------------------------------------------- {% endcomment %}
 <!-- [INFO   ] [j1.layout.content_generator_post.html ] [ begin content ] -->

data/_includes/themes/j1/layouts/layout_metadata_generator.html

@@ -55,6 +55,9 @@
 <!-- [INFO   ] [j1.layout.meta_data_generator.html    ] [ initial zoom level when the page is first loaded by the browser ] -->
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+<!-- [INFO   ] [j1.layout.meta_data_generator.html    ] [ added version info for the templte ] -->
+<meta name="template version" content="{{site.version}}" />
+
 {% if template_config.translation.enabled %}
 <!-- [INFO   ] [j1.layout.meta_data_generator.html    ] [ add google translator meta tag to enable customized translations ] -->
 <meta name="google-translate-customization" />

data/_includes/themes/j1/procedures/global/attributes_loader.proc

@@ -91,6 +91,7 @@
 {% if scope == "global" %}
 include::{globalincludedir}/attributes.asciidoc[tag=tags]
 include::{globalincludedir}/attributes.asciidoc[tag=urls]
+include::{globalincludedir}/attributes.asciidoc[tag=footnotes]
 include::{globalincludedir}/attributes.asciidoc[tag=data]
 include::{globalincludedir}/attributes.asciidoc[tag=tables]
 include::{globalincludedir}/attributes.asciidoc[tag=documents]
@@ -99,11 +100,13 @@ include::{globalincludedir}/attributes.asciidoc[tag=authors]
 {% elsif scope == "local" %}
 include::{includedir}/attributes.asciidoc[tag=tags]
 include::{includedir}/attributes.asciidoc[tag=urls]
+include::{includedir}/attributes.asciidoc[tag=footnotes]
 include::{includedir}/attributes.asciidoc[tag=data]
 include::{includedir}/attributes.asciidoc[tag=authors]
 {% elsif scope == "all" %}
 include::{globalincludedir}/attributes.asciidoc[tag=tags]
 include::{globalincludedir}/attributes.asciidoc[tag=urls]
+include::{globalincludedir}/attributes.asciidoc[tag=footnotes]
 include::{globalincludedir}/attributes.asciidoc[tag=data]
 include::{globalincludedir}/attributes.asciidoc[tag=tables]
 include::{globalincludedir}/attributes.asciidoc[tag=documents]
@@ -111,6 +114,7 @@ include::{globalincludedir}/attributes.asciidoc[tag=products]
 include::{globalincludedir}/attributes.asciidoc[tag=authors]
 include::{includedir}/attributes.asciidoc[tag=tags]
 include::{includedir}/attributes.asciidoc[tag=urls]
+include::{includedir}/attributes.asciidoc[tag=footnotes]
 include::{includedir}/attributes.asciidoc[tag=data]
 include::{includedir}/attributes.asciidoc[tag=authors]
 {% else %}

data/_includes/themes/j1/procedures/posts/collate_timeline.proc

@@ -77,6 +77,8 @@
     <!-- Use custom collator -->
     {% include themes/{{site.template.name}}/procedures/custom/posts_collate %}
   {% else %}
+    {% comment %} NOTE: header_title NOT used
+    ---------------------------------------------------------------------------- {% endcomment %}
     <!-- Use j1 blog timeline collator -->
     {% if header_title %}
     <div class="row timeline-header-box">
@@ -107,14 +109,14 @@
 
       <li class="{{blog_position}}">
         <div class="timeline-badge"><i class="tmicon rounded-x hidden-xs"></i></div>
-
         <div class="card raised-z5 timeline-panel">
 
+          {% comment %} jadams, 2021-08-05:
+          NOTE: Changed headerlevel form h3 -> h2
+          ---------------------------------------------------------------------- {% endcomment %}
           <!-- div class="timeline-title" -->
           <div class="card-header bg-primary pt-4 pb-3">
-            <!-- a href="{{post.url}}" -->
-              <h3 id="{{1000000 | rand}}" class="md-white">{{post.title}}</h3>
-            <!-- /a -->
+            <h2 id="{{1000000 | rand}}" class="md-white">{{post.title}}</h2>
           </div>
 
           <!-- Collect icon data from frontmatter -->
@@ -157,8 +159,10 @@
               <div class="timeline-tagline">
                 <p class="card-subtitle text-muted">{{post.tagline}}</p>
               </div>
+              <!-- place excerpt -->
               <div class="timeline-excerpt mb-4">
-                {% assign excerpt = post.excerpt|truncatewords: truncate_words|replace:'...',' ...'|strip_html|strip_newlines|strip %}
+                {% comment %} {% assign excerpt = post.excerpt|truncatewords: truncate_words|replace:'...',' ...'|strip_html %} {% endcomment %}
+                {% assign excerpt = post.excerpt|truncatewords: truncate_words|replace:'...',' ...' %}
                 <i class="timeline-icon {{icon_family}} {{icon_family}}-{{icon_name}} {{icon_family}}-{{icon_size}} {{icon_family}}-{{icon_color}}"></i>
                 {{excerpt}}
               </div>
@@ -181,7 +185,7 @@
                 <p class="card-subtitle text-muted">{{post.tagline}}</p>
               </div>
               <div class="timeline-excerpt mb-4">
-                {% assign excerpt = post.excerpt|truncatewords: truncate_words|replace:'...',' ...'|strip_html|strip_newlines|strip %}
+                {% assign excerpt = post.excerpt|truncatewords: truncate_words|replace:'...',' ...'|strip_html %}
                 {{excerpt}}
               </div>
               <div class="card-footer r-text-200 text-lowercase">
@@ -201,7 +205,8 @@
                 <p class="card-subtitle text-muted">{{post.tagline}}</p>
               </div -->
               <div class="excerpt">
-                {% assign excerpt = post.excerpt|truncatewords: truncate_words|replace:'...',' ...'|strip_html|strip_newlines|strip %}
+                {% comment %} {% assign excerpt = post.excerpt|truncatewords: truncate_words|replace:'...',' ...'|strip_html %} {% endcomment %}
+                {% assign excerpt = post.excerpt|truncatewords: truncate_words|replace:'...',' ...' %}
                 {{excerpt}}
               </div>
             </div>

data/_includes/themes/j1/procedures/posts/create_series_header.proc

@@ -42,6 +42,15 @@
 {% assign post     = include.post %}
 {% assign readmore = include.readmore %}
 
+{% comment %} i18n: language detection
+-------------------------------------------------------------------------------- {% endcomment %}
+{% if site.language == "en" %}
+  {% assign language = "en" %}
+{% elsif site.language == "de" %}
+  {% assign language = "de" %}
+{% else %}
+  {% assign language = "en" %}
+{% endif %}
 
 {% comment %} Main
 -------------------------------------------------------------------------------- {% endcomment %}
@@ -51,16 +60,19 @@
 
 {% capture open %}
 <div id="post_series">
- <!-- div class="series-navigator ml-3" -->
- <!-- jadams, 2021-02-28: added ml-3 -->
+ <!-- series navigator block -->
  <div class="series-navigator">
   <div class="container content series-navigation">
-
      <div class="row">
-       <!-- div class="col-xs-12 col-md-12 col-lg-12 mb-4" -->
-       <div class="">
-         <h4 id="blog_series_list" class="notoc mt-2 mr-2 mb-4">This article is <strong>part <<idx>> </strong> in a <strong><<count>>-part</strong> series:</h4>
-         <ul class="side-nav">
+       <div style="width: calc(100% - 5px)">
+         {% if site.language == "en" %}
+           {% assign series_heading = "This article is <strong>part <<idx>> </strong> in a <strong><<count>>-part</strong> series:" %}
+         {% elsif site.language == "de" %}
+           {% assign series_heading = "Dieser Artikel ist <strong>Teil <<idx>> </strong> einer <strong><<count>>-er</strong> Serie:" %}
+         {% endif %}
+         <!-- series heading -->
+         <h4 id="blog_series_list" class="notoc mt-2 mr-2 mb-4">{{series_heading}}</h4>
+         <ul class="side-nav" style="width: calc(100% - 5px)">
  {% endcapture %}
          {% for post in site.posts reversed %}
            {% if post.series == page.series %}
@@ -70,7 +82,7 @@
                {% assign excerpt = post.excerpt %}
                {% assign excerpt_title = post.tagline|capitalize %}
              {% endif %}
-             {% capture list_tmp %}{{list}}{% if page.url == post.url %}<li class="current"><a data-proofer-ignore href="#">{{post.date|date: "%Y-%m-%d"}} · Part {{count}} · {{post.title}}</a>{% else %}<li><a data-proofer-ignore href="{{site.baseurl}}{{post.url}}">{{post.date|date: "%Y-%m-%d"}} · Part {{count}} · {{post.title}}</a>{% endif %}</li>{% endcapture %}
+             {% capture list_tmp %}{{list}}{% if page.url == post.url %}<li class="current" style="width: calc(100% - 5px)"><a data-proofer-ignore href="#" style="width: calc(100% - 5px)">{{post.date|date: "%Y-%m-%d"}} · Part {{count}} · {{post.title}}</a>{% else %}<li style="width: calc(100% - 5px)"><a data-proofer-ignore href="{{site.baseurl}}{{post.url}}" style="width: calc(100% - 5px)">{{post.date|date: "%Y-%m-%d"}} · Part {{count}} · {{post.title}}</a>{% endif %}</li>{% endcapture %}
              {% assign list = list_tmp %}
            {% endif %}
          {% endfor %}
@@ -78,11 +90,9 @@
          </ul>
        </div>
 
-       <!-- div class="col-xs-12 col-md-12 col-lg-12 mt-2" -->
-       <!-- jadams, 2021-02-28: added mr-3 -->
+       <!-- place excerpt -->
        <div class="mt-2">
          <h5 class="notoc series-exerpt-title">{{excerpt_title}}</h5>
-         <!-- div class="series-exerpt mr-3" -->
          <div class="series-exerpt">
            <div class="paragraph">
              <p>{{excerpt}}</p>

data/_layouts/default.html

@@ -224,127 +224,10 @@ layout:                                 compress
   <div id="{{webhook_options.xhr_container_id}}"></div>
   {% endif %}
 
-  {% comment %} Place container for R-Text resizer modals (deactivated)
-  ------------------------------------------------------------------------------
-  <!-- [INFO   ] [j1.layout.default.html                ] [ place container for R-Text resizer modals ] -->
-  <div id="rtext_resizer">
-    <div class="modal fade right" id="fluidModalRTextResizer" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
-      <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">
-            <p class="lead">Text Resizer</p>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <i class="mdi mdi-close mdi-dark mdi-48px"></i>
-            </button>
-          </div>
-          <!-- Body -->
-          <div class="modal-body">
-            <div class="text align-left">
-              <p>
-                Change the text size for the main window by the switches from below:
-              </p>
-            </div>
-            <div class="ml-3 mt-5 mb-5">
-              <div class="switch">
-                <label>
-                  <input id="textsize-300" name="textsize-300" type="checkbox" checked>
-                  300 - Default Size
-                </label>
-              </div>
-              <div class="switch">
-                <label>
-                  <input id="textsize-400" name="textsize-400" type="checkbox">
-                  400 - Larger Size
-                </label>
-              </div>
-              <div class="switch">
-                <label>
-                  <input id="textsize-500" name="textsize-500" type="checkbox">
-                  500 - Largest Size
-                </label>
-              </div>
-            </div>
-          </div>
-        <!-- END Content -->
-      </div>
-    </div>
-  </div>
-  <!-- [INFO   ] [j1.layout.default.html                ] [ end modals for r-text resizer ] -->
-  ------------------------------------------------------------------------------ {% endcomment %}
-
-  {% comment %} JS for R-Text (deactivated)
-  ------------------------------------------------------------------------------
-  <!-- [INFO   ] [j1.layout.default.html                ] [ place JS for R-Text resizer modals ] -->
-  <script>
-    // Set global variables
-    var environment     = '{{environment}}';
-    var logger          = log4javascript.getLogger('j1.template.rtext-resizer');
-    var $el             = $("main[class*='r-text']");
-    var base_classes    = $("main[class*='r-text']").attr('class').replace(/r-text-[0-9]*/g, '');
-    var r_text_default  = ' r-text-300';
-    var r_text_larger   = ' r-text-400';
-    var r_text_largest  = ' r-text-500';
-    var cl;
-    var value;
-
-    $('input:checkbox[name="textsize-300"]').on('click', function (e) {
-      value = $(this).is(':checked');
-
-      $('input:checkbox[name="textsize-400"]').prop('checked', false);
-      $('input:checkbox[name="textsize-500"]').prop('checked', false);
-
-      if (value == true) {
-        cl = r_text_default;
-      }
-      $el.attr('class', base_classes + cl);
-
-      if(environment === 'development') {
-        logText = 'Changed textsize to: ' +cl;
-        logger.info(logText);
-      }
-      e.stopPropagation();
-    });
-
-    $('input:checkbox[name="textsize-400"]').on('click', function (e) {
-      value = $(this).is(':checked');
-
-      $('input:checkbox[name="textsize-300"]').prop('checked', false);
-      $('input:checkbox[name="textsize-500"]').prop('checked', false);
-
-      if (value == true) {
-        cl = r_text_larger;
-      }
-      $el.attr('class', base_classes + cl);
-
-      if(environment === 'development') {
-        logText = 'Changed textsize to: ' +cl;
-        logger.info(logText);
-      }
-      e.stopPropagation();
-    });
-
-    $('input:checkbox[name="textsize-500"]').on('click', function (e) {
-      value = $(this).is(':checked');
-
-      $('input:checkbox[name="textsize-300"]').prop('checked', false);
-      $('input:checkbox[name="textsize-400"]').prop('checked', false);
-
-      if (value == true) {
-        cl = r_text_largest;
-      }
-      $el.attr('class', base_classes + cl);
-
-      if(environment === 'development') {
-        logText = 'Changed textsize to: ' +cl;
-        logger.info(logText);
-      }
-      e.stopPropagation();
-    });
-  </script>
-  <!-- [INFO   ] [j1.layout.default.html                ] [ end JS for r-text resizer ] -->
+  {% comment %} Place container for the r-text resizer
   ------------------------------------------------------------------------------ {% endcomment %}
+  <!-- [INFO   ] [j1.layout.default.html                ] [ place container for the r-text resizer modal ] -->
+  <div id="rtext_resizer_container"></div>
 
   {% comment %} Initialize Tooltips|Popovers
   ------------------------------------------------------------------------------ {% endcomment %}

data/assets/data/banner.html

@@ -145,19 +145,20 @@ exclude_from_search:                    true
               {% 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 %}
+                {% 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 == 'description_properties' %}  {% assign card_properties   = 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 %}
@@ -200,7 +201,7 @@ exclude_from_search:                    true
             {% if card_animate %} {% capture animate %}animated {{card_animate}}{% endcapture %} {% endif %}
             <!-- Heading -->
             <div class="row">
-              <div class="{{animate}}">
+              <div class="{{animate}} mb-2">
                 <h2 class="g-font-weight-500 mb-0">{{card_title}}</h2>
                 <p class="tagline mb-0">{{card_tagline}}</p>
                 <div class="d-inline-block g-width-50 g-height-2 bg-primary mb-2"></div>
@@ -210,10 +211,10 @@ exclude_from_search:                    true
 
             <!-- Body -->
             <div class="row {{animate}}">
-              <div class="{{properties}}">{{card_description}}</div>
+              <div class="{{card_properties}}">{{card_description}}</div>
               {% if card_buttons %}
-              <!-- Footer -->
-              <div class="mt-1">
+              <!-- Footer|Button row -->
+              <div class="mt-1 text-center">
                 {% for button_hash in card_buttons %}
                   {% include {{create_bs_button}} button_data=button_hash button_type="link" %}
                   {{bs_button_html}}
@@ -354,7 +355,7 @@ exclude_from_search:                    true
                   .{{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{z-index: 2;position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; padding: 20px; text-align: center; font-family: "Roboto Slab", Helvetica, Arial, sans-serif; }
                   .{{banner_settings.id}}-parallax-quote-in p{color:{{text_color}};font-size:{{card_cite_text_size}};text-transform:uppercase;line-height: 1.25;}
                   {% 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:' " ';}

data/assets/data/cookieconsent.html

@@ -61,6 +61,9 @@ exclude_from_search:                    true
   <meta name="robots" content="noindex, nofollow" />
 </head>
 
+{% comment %} i18n: translations
+-------------------------------------------------------------------------------- {% endcomment %}
+
 {% comment %} Modal cookie consent dialog (default: en-EN)
 -------------------------------------------------------------------------------- {% endcomment %}
 <div id="consent-data-en">
@@ -75,7 +78,7 @@ exclude_from_search:                    true
         </div>
         <p>
           <a href="#bccs-privacy" data-toggle="collapse" class="">Privacy Notice</a>
-          <a href="#bccs-options" data-toggle="collapse" class="float-right">Settings</a>
+          <a href="#bccs-options" data-toggle="collapse" class="float-right">My Settings</a>
         </p>
 
         <div id="bccs-privacy" class="collapse">
@@ -85,7 +88,7 @@ exclude_from_search:                    true
         </div>
 
         <div id="bccs-options" class="collapse">
-          <p class="tagline mt-4 mb-1"><b>Your settings</b></p>
+          <p class="tagline mt-4 mb-1"><b>Settings</b></p>
           <div class="d-inline-block g-width-50 g-height-2 bg-primary mb-3"></div>
 
           <div class="bccs-option" data-name="necessary">
@@ -164,7 +167,7 @@ exclude_from_search:                    true
         </div>
         <p>
           <a href="#bccs-privacy" data-toggle="collapse" class="">Datenschutzerklärung</a>
-          <a href="#bccs-options" data-toggle="collapse" class="float-right">Einstellungen</a>
+          <a href="#bccs-options" data-toggle="collapse" class="float-right">Meine Einstellungen</a>
         </p>
 
         <div id="bccs-privacy" class="collapse">
@@ -174,7 +177,7 @@ exclude_from_search:                    true
         </div>
 
         <div id="bccs-options" class="collapse">
-          <p class="tagline mt-4 mb-1"><b>Ihre Einstellungen</b></p>
+          <p class="tagline mt-4 mb-1"><b>Einstellungen</b></p>
           <div class="d-inline-block g-width-50 g-height-2 bg-primary mb-3"></div>
 
           <div class="bccs-option" data-name="necessary">

data/assets/data/gallery_customizer.html

@@ -27,6 +27,10 @@ exclude_from_search:                    true
 {% comment %} Liquid procedures
 -------------------------------------------------------------------------------- {% endcomment %}
 
+{% comment %} Set global settings
+-------------------------------------------------------------------------------- {% endcomment %}
+{% assign environment         = site.environment %}
+
 {% comment %} Set config files
 -------------------------------------------------------------------------------- {% endcomment %}
 {% assign apps                = site.data.apps %}
@@ -34,8 +38,6 @@ exclude_from_search:                    true
 
 {% comment %} Set config data
 -------------------------------------------------------------------------------- {% endcomment %}
-{% assign environment         = site.environment %}
-
 {% assign customizer_defaults = apps.defaults.justifiedGalleryCustomizer.defaults %}
 {% assign customizer_settings = apps.justifiedGalleryCustomizer.settings %}
 
@@ -48,6 +50,14 @@ exclude_from_search:                    true
   {% assign production = true %}
 {% endif %}
 
+{% comment %} i18n: language selection (supported languages: en|de)
+-------------------------------------------------------------------------------- {% endcomment %}
+{% if site.language == 'en' or site.language == 'de' %}
+  {% assign language = site.language %}
+{% else %}
+  {% assign language = 'en' %}
+{% endif %}
+
 <!-- [INFO   ] [j1.assets.data.banner.html             ] [ set meta data (robots) to exclude HTML datafiles from index ] -->
 <head>
   <meta name="robots" content="noindex, nofollow" />
@@ -57,10 +67,10 @@ exclude_from_search:                    true
 <div id="{{customizer_options.xhr_data_element}}">
 
   {% comment %} Main
-  -------------------------------------------------------------------------------- {% endcomment %}
+  ------------------------------------------------------------------------------ {% endcomment %}
   <!-- [INFO   ] [j1.gallery_customizer              ] [Placement of the Drawer] -->
 
-  <nav class="nav bmd-layout-container bmd-drawer-f-l">
+  <nav class="nav bmd-layout-container custom-size-300 bmd-drawer-f-l">
 
     <header class="bmd-layout-header">
       <div class="navbar navbar-dark bg-primary raised-z2 mb-2">
@@ -69,43 +79,47 @@ exclude_from_search:                    true
         </button>
         <ul class="nav navbar-nav">
           <li class="nav-item">
-            <span class="navbar-text md-grey-900">Gallery: {{customizer_options.title}}</span>
+            <span class="navbar-text md-grey-900" style="font-size: x-large;">{{customizer_options.title}}</span>
           </li>
         </ul>
       </div>
     </header>
 
+    {% comment %} i18n: translations
+    ---------------------------------------------------------------------------- {% endcomment %}
+
+    {% if language == 'en' %}
     <div id="drw_customizer" class="bmd-layout-drawer bg-faded">
-      <span class="navbar-brand ml-2 mb-3">Gallery Settings</span>
+      <span class="navbar-brand ml-2 mb-3">Settings</span>
       <form id="jg-customizer-form" class="form-horizontal">
 
         <div class="mdc-list-group">
-          <div class="col-md-12">
 
+          <div class="col-md-12 mb-4">
             <div class="form-group">
               <label class="bmd-label-floating" for="rowHeight">Row Height [px]</label>
               <input id="rowHeight" name="rowHeight" class="form-control" type="number" value="{{customizer_options.gallery_settings.rowHeight}}">
-              <span class="bmd-help">Preferred row height (min: 40px)</span>
+              <span class="bmd-help">Image line height (min: 100px)</span>
             </div>
           </div>
 
-          <div class="col-md-12">
+          <!-- div class="col-md-12">
             <div class="form-group">
               <label class="bmd-label-floating" for="rowHeightMax">Row Height Max [px]</label>
               <input id="rowHeightMax" name="rowHeightMax" class="form-control" type="number" value="{{customizer_options.gallery_settings.maxRowHeight}}">
               <span class="bmd-help">Maximum row height</span>
             </div>
-          </div>
+          </div-->
 
-          <div class="col-md-12">
+          <div class="col-md-12 mb-4">
             <div class="form-group">
               <label class="bmd-label-floating" for="margins">Thumb Spacing [px]</label>
               <input id="margins" name="margins" class="form-control" type="number" value="{{customizer_options.gallery_settings.margins}}">
-              <span class="bmd-help">Space between the images</span>
+              <span class="bmd-help">Space between the preview images</span>
             </div>
           </div>
 
-          <div class="col-md-12">
+          <div class="col-md-12 mb-4">
             <div class="form-group">
               <label class="bmd-label-floating" for="border">Gallery Padding [px]</label>
               <input id="border" name="border" class="form-control" type="number" value="{{customizer_options.gallery_settings.border}}">
@@ -113,7 +127,7 @@ exclude_from_search:                    true
             </div>
           </div>
 
-          <div class="ml-3 mt-5 mb-5">
+          <div class="ml-1 mt-5 mb-5">
             <div class="switch">
               <label>
                 <input id="captions" name="captions" type="checkbox" checked>
@@ -143,13 +157,13 @@ exclude_from_search:                    true
         </div>
 
         <button type="button" name="reset-defaults"
-                class="btn btn-raised btn-flex btn-primary ml-2"
-                aria-label="Reset Button"
-                style="min-width: 12rem">
-                <i class="mdi mdi-close mdi-24px mdi-md_white mr-1"></i>Reset
+          class="btn btn-raised btn-flex btn-primary ml-2"
+          aria-label="Reset Button"
+          style="min-width: 12rem">
+          <i class="mdi mdi-close mdi-24px mdi-md_white mr-1"></i>
+          Reset
         </button>
 
-
         <!-- div class="mt-1">
           <a  id="reset-defaults" href="#"
               class="btn btn-raised btn-flex btn-md btn-primary mr-2 mb-2" style="min-width: 10rem">
@@ -160,6 +174,79 @@ exclude_from_search:                    true
 
       </form>
     </div>
+    {% endif %}
+
+    {% if language == 'de' %}
+    <div id="drw_customizer" class="bmd-layout-drawer bg-faded">
+      <span class="navbar-brand ml-2 mb-3">Einstellungen</span>
+      <form id="jg-customizer-form" class="form-horizontal">
+
+        <div class="mdc-list-group">
+          <div class="col-md-12 mb-4">
+
+            <div class="form-group">
+              <label class="bmd-label-floating" for="rowHeight">Zeilenhöhe [px]</label>
+              <input id="rowHeight" name="rowHeight" class="form-control" type="number" value="{{customizer_options.gallery_settings.rowHeight}}">
+              <span class="bmd-help">Höhe einer Bildzeile (min: 100px)</span>
+            </div>
+          </div>
+
+          <div class="col-md-12 mb-4">
+            <div class="form-group">
+              <label class="bmd-label-floating" for="margins">Bildabstand [px]</label>
+              <input id="margins" name="margins" class="form-control" type="number" value="{{customizer_options.gallery_settings.margins}}">
+              <span class="bmd-help">Abstände der Vorschaubilder</span>
+            </div>
+          </div>
+
+          <div class="col-md-12 mb-4">
+            <div class="form-group">
+              <label class="bmd-label-floating" for="border">Gallerierahmen [px]</label>
+              <input id="border" name="border" class="form-control" type="number" value="{{customizer_options.gallery_settings.border}}">
+              <span class="bmd-help">Randgröße um die Gallerie</span>
+            </div>
+          </div>
+
+          <div class="ml-1 mt-5 mb-5">
+            <div class="switch">
+              <label>
+                <input id="captions" name="captions" type="checkbox" checked>
+                Untertitel aktivieren
+              </label>
+            </div>
+            <div class="switch">
+              <label>
+                <input id="random" name="random" type="checkbox">
+                Zufällige Bildanzeige
+              </label>
+            </div>
+            <div class="switch">
+              <label>
+                <input id="justify_last_row" name="justify_last_row" type="checkbox">
+                Letzte Reihe ausrichten
+              </label>
+            </div>
+            <div class="switch">
+              <label>
+                <input id="hide_last_row" name="hide_last_row" type="checkbox">
+                Letzte Reihe ausblenden
+              </label>
+            </div>
+          </div>
+
+        </div>
+
+        <button type="button" name="reset-defaults"
+          class="btn btn-raised btn-flex btn-primary ml-2"
+          aria-label="Reset Button"
+          style="min-width: 12rem">
+          <i class="mdi mdi-close mdi-24px mdi-md_white mr-1"></i>
+          Zurücksetzen
+        </button>
+
+      </form>
+    </div>
+    {% endif %}
 
     <!-- main content -->
     <div class="bmd-layout-content">