j1-template 2022.0.1 → 2022.0.5

data/lib/starter_web/pages/public/learn/roundtrip/_includes/documents/419_advanced_modals_demo.asciidoc

@@ -16,8 +16,8 @@
           <p class="pt-1 pr-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nisi quo provident fugiat reprehenderit nostrum quos..</p>
         </div>
         <div class="row px-4">
-          <a type="button" class="btn btn-raised btn-primary mr-2">Yes, please</a>
-          <a type="button" class="btn btn-outline-secondary" data-dismiss="modal">No, thanks</a>
+          <a type="button" class="btn btn-primary mr-2">Yes, please</a>
+          <a type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">No, thanks</a>
         </div>
       </div>
     </div>
@@ -40,22 +40,22 @@
       <!--Header-->
       <div class="modal-header">
         <p class="lead">Modal Success</p>
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+        <button type="button" class="close" data-bs-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-center">
-          <i class="mdi mdi-4x mdi-check mdi-rotateIn mb-1"></i>
+          <i class="mdi mdi-4x mdi-check md-green mb-1"></i>
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga, enim, ab officiis totam.
           </p>
         </div>
       </div>
       <!-- Footer -->
       <div class="modal-footer justify-content-center">
-        <a type="button" class="btn btn-raised btn-primary mr-2">Yes, please</a>
-        <a type="button" class="btn btn-outline-secondary" data-dismiss="modal">No, thanks</a>
+        <a type="button" class="btn btn-primary mr-2">Yes, please</a>
+        <a type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">No, thanks</a>
       </div>
     </div>
     <!-- END Content -->
@@ -77,7 +77,7 @@
       <!--Header-->
       <div class="modal-header">
         <p class="lead">Modal Info</p>
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
           <i class="mdi mdi-close mdi-dark mdi-48px"></i>
         </button>
       </div>
@@ -90,8 +90,8 @@
       </div>
       <!-- Footer -->
       <div class="modal-footer justify-content-center">
-        <a type="button" class="btn btn-raised btn-primary mr-2">Yes, please</a>
-        <a type="button" class="btn btn-outline-secondary" data-dismiss="modal">No, thanks</a>
+        <a type="button" class="btn btn-primary mr-2">Yes, please</a>
+        <a type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">No, thanks</a>
       </div>
     </div>
     <!-- END Content -->
@@ -113,8 +113,8 @@
       <!-- Body -->
       <div class="modal-body">
         <p class="mt-1 ml-3 mr-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nisi quo provident fugiat reprehenderit nostrum quos..</p><div class="row ml-3">
-          <a type="button" class="btn btn-raised btn-primary mr-2">Yes, please</a>
-          <a type="button" class="btn btn-outline-secondary" data-dismiss="modal">No, thanks<div class="ripple-container"><div class="ripple-decorator ripple-on ripple-out" style="left: 51.4063px; top: 20px; background-color: rgb(1, 211, 107); transform: scale(14.5548);"></div></div></a>
+          <a type="button" class="btn btn-primary mr-2">Yes, please</a>
+          <a type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">No, thanks<div class="ripple-container"><div class="ripple-decorator ripple-on ripple-out" style="left: 51.4063px; top: 20px; background-color: rgb(1, 211, 107); transform: scale(14.5548);"></div></div></a>
         </div>
       </div>
     </div>
@@ -137,7 +137,7 @@
       <!--Header-->
       <div class="modal-header">
         <p class="lead">Modal Danger</p>
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
           <i class="mdi mdi-close mdi-dark mdi-48px"></i>
         </button>
       </div>
@@ -146,7 +146,7 @@
         <div class="row">
           <div class="col-3">
             <p></p>
-            <p class="text-center"><i class="mdi mdi-cart fa-4x"></i></p>
+            <p class="text-center"><i class="mdi mdi-cart md-gray-600 fa-4x"></i></p>
           </div>
           <div class="col-9">
             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, molestiae provident temporibus sunt earum.</p>
@@ -156,8 +156,8 @@
       </div>
       <!-- Footer -->
       <div class="modal-footer justify-content-center">
-        <a type="button" class="btn btn-raised btn-primary mr-2">Yes, please</a>
-        <a type="button" class="btn btn-outline-secondary" data-dismiss="modal">No, thanks</a>
+        <a type="button" class="btn btn-primary mr-2">Yes, please</a>
+        <a type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">No, thanks</a>
       </div>
     </div>
     <!-- END Content -->
@@ -179,7 +179,7 @@
       <!--Header-->
       <div class="modal-header">
         <p class="lead">Modal Warning</p>
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
           <i class="mdi mdi-close mdi-dark mdi-48px"></i>
         </button>
       </div>
@@ -200,8 +200,8 @@
       </div>
       <!-- Footer -->
       <div class="modal-footer justify-content-center">
-        <a type="button" class="btn btn-raised btn-primary mr-2">Yes, please</a>
-        <a type="button" class="btn btn-outline-secondary" data-dismiss="modal">No, thanks</a>
+        <a type="button" class="btn btn-primary mr-2">Yes, please</a>
+        <a type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">No, thanks</a>
       </div>
     </div>
     <!-- END Content -->
@@ -223,48 +223,48 @@
       <!--Header-->
       <div class="modal-header">
         <p class="lead">Modal Success</p>
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+        <button type="button" class="close" data-bs-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-center">
-          <i class="mdi mdi-4x mdi-check mdi-rotateIn mb-1"></i>
+          <i class="mdi mdi-4x mdi-check md-green mb-1"></i>
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga, enim, ab officiis totam.
           </p>
         </div>
-        <ul class="list-group z-depth-0">
-          <li class="list-group-item justify-content-between">
+        <ul class="list-group">
+          <li class="list-group-item d-flex justify-content-between align-items-start">
             Cras justo odio
-            <span class="badge badge-primary badge-pill">14</span>
+            <span class="badge badge-primary rounded-pill">1</span>
           </li>
-          <li class="list-group-item justify-content-between">
+          <li class="list-group-item d-flex justify-content-between align-items-start">
             Dapibus ac facilisis in
-            <span class="badge badge-primary badge-pill">2</span>
+            <span class="badge badge-primary rounded-pill">2</span>
           </li>
-          <li class="list-group-item justify-content-between">
+          <li class="list-group-item d-flex justify-content-between align-items-start">
             Morbi leo risus
-            <span class="badge badge-primary badge-pill">1</span>
+            <span class="badge badge-primary rounded-pill">3</span>
           </li>
-          <li class="list-group-item justify-content-between">
+          <li class="list-group-item d-flex justify-content-between align-items-start">
             Cras justo odio
-            <span class="badge badge-primary badge-pill">14</span>
+            <span class="badge badge-primary rounded-pill">4</span>
           </li>
-          <li class="list-group-item justify-content-between">
+          <li class="list-group-item d-flex justify-content-between align-items-start">
             Dapibus ac facilisis in
-            <span class="badge badge-primary badge-pill">2</span>
+            <span class="badge badge-primary rounded-pill">5</span>
           </li>
-          <li class="list-group-item justify-content-between">
+          <li class="list-group-item d-flex justify-content-between align-items-start">
             Morbi leo risus
-            <span class="badge badge-primary badge-pill">1</span>
+            <span class="badge badge-primary rounded-pill">6</span>
           </li>
         </ul>
       </div>
       <!-- Footer -->
       <div class="modal-footer">
-        <a type="button" class="btn btn-raised btn-primary mr-2">Yes, please</a>
-        <a type="button" class="btn btn-outline-secondary" data-dismiss="modal">No, thanks</a>
+        <a type="button" class="btn btn-primary mr-2">Yes, please</a>
+        <a type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">No, thanks</a>
       </div>
     </div>
     <!-- END Content -->
@@ -286,48 +286,48 @@
       <!--Header-->
       <div class="modal-header">
         <p class="lead">Modal Success</p>
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+        <button type="button" class="close" data-bs-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-center">
-          <i class="mdi mdi-4x mdi-check mdi-rotateIn mb-1"></i>
+          <i class="mdi mdi-4x mdi-check md-green mb-1"></i>
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga, enim, ab officiis totam.
           </p>
         </div>
-        <ul class="list-group z-depth-0">
-          <li class="list-group-item justify-content-between">
+        <ul class="list-group">
+          <li class="list-group-item d-flex justify-content-between align-items-start">
             Cras justo odio
-            <span class="badge badge-primary badge-pill">14</span>
+            <span class="badge badge-primary badge-pill">1</span>
           </li>
-          <li class="list-group-item justify-content-between">
+          <li class="list-group-item d-flex justify-content-between align-items-start">
             Dapibus ac facilisis in
             <span class="badge badge-primary badge-pill">2</span>
           </li>
-          <li class="list-group-item justify-content-between">
+          <li class="list-group-item d-flex justify-content-between align-items-start">
             Morbi leo risus
-            <span class="badge badge-primary badge-pill">1</span>
+            <span class="badge badge-primary badge-pill">3</span>
           </li>
-          <li class="list-group-item justify-content-between">
+          <li class="list-group-item d-flex justify-content-between align-items-start">
             Cras justo odio
-            <span class="badge badge-primary badge-pill">14</span>
+            <span class="badge badge-primary badge-pill">4</span>
           </li>
-          <li class="list-group-item justify-content-between">
+          <li class="list-group-item d-flex justify-content-between align-items-start">
             Dapibus ac facilisis in
-            <span class="badge badge-primary badge-pill">2</span>
+            <span class="badge badge-primary badge-pill">5</span>
           </li>
-          <li class="list-group-item justify-content-between">
+          <li class="list-group-item d-flex justify-content-between align-items-start">
             Morbi leo risus
-            <span class="badge badge-primary badge-pill">1</span>
+            <span class="badge badge-primary badge-pill">6</span>
           </li>
         </ul>
       </div>
       <!-- Footer -->
       <div class="modal-footer">
-        <a type="button" class="btn btn-raised btn-primary mr-2">Yes, please</a>
-        <a type="button" class="btn btn-outline-secondary" data-dismiss="modal">No, thanks</a>
+        <a type="button" class="btn btn-primary mr-2">Yes, please</a>
+        <a type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">No, thanks</a>
       </div>
     </div>
     <!-- END Content -->

data/lib/starter_web/pages/public/learn/where_to_go.adoc

@@ -15,7 +15,7 @@ fab_menu_id:                            default
 permalink:                              /pages/public/learn/where_to_go/
 regenerate:                             false
 
-resources:                              []
+resources:                              [ animate ]
 resource_options:
   - attic:
       padding_top:                      400

data/lib/starter_web/pages/public/legal/de/100_copyright.adoc

@@ -23,7 +23,7 @@ toc:                                    true
 permalink:                              /pages/public/legal/de/copyright/
 regenerate:                             false
 
-resources:                              []
+resources:                              [ animate ]
 resource_options:
   - attic:
       padding_top:                      400

data/lib/starter_web/pages/public/legal/de/100_impress.adoc

@@ -23,7 +23,7 @@ toc:                                    false
 permalink:                              /pages/public/legal/de/impress/
 regenerate:                             false
 
-resources:                              []
+resources:                              [ animate ]
 resource_options:
   - attic:
       padding_top:                      400

data/lib/starter_web/pages/public/legal/de/300_privacy.adoc

@@ -23,7 +23,7 @@ toc:                                    true
 permalink:                              /pages/public/legal/de/privacy/
 regenerate:                             false
 
-resources:                              []
+resources:                              [ animate ]
 resource_options:
   - attic:
       padding_top:                      400
@@ -145,16 +145,16 @@ System befinden. In diesem Fall sind möglicherweise bereits vorhandene Cookies
 *manuell* über Funktionen Ihres Browsers zu löschen.
 
 ++++
-<div class="mt-4 mb-3">
+<div class="mt-4 mb-4 d-grid gap-2">
   <a  href="javascript:j1.cookieConsent.showDialog()"
-      class="btn btn-primary btn-lg btn-block btn-raised btn-flex mb-3"
-      aria-label="Cookie Consent"
-      style="min-width: 25rem">
+      class="btn btn-primary btn-flex btn-lg"
+      aria-label="Cookie Consent">
       <i class="mdi mdi-cookie mdi-2x mr-2"></i>
       Ihre Einstellungen
   </a>
 </div>
 ++++
+
 endif::[]
 
 ifeval::[{logs-files} == true]

data/lib/starter_web/pages/public/legal/de/400_comment_policy.adoc

@@ -23,7 +23,7 @@ toc:                                    true
 permalink:                              /pages/public/legal/de/comment_policy/
 regenerate:                             true
 
-resources:                              []
+resources:                              [ animate ]
 resource_options:
   - attic:
       padding_top:                      400

data/lib/starter_web/pages/public/legal/en/100_copyright.adoc

@@ -26,7 +26,7 @@ comments:                               false
 permalink:                              /pages/public/legal/en/copyright/
 regenerate:                             false
 
-resources:                              []
+resources:                              [ animate ]
 resource_options:
   - attic:
       padding_top:                      400

data/lib/starter_web/pages/public/legal/en/200_impress.adoc

@@ -25,7 +25,7 @@ comments:                               false
 permalink:                              /pages/public/legal/en/impress/
 regenerate:                             false
 
-resources:                              []
+resources:                              [ animate ]
 resource_options:
   - attic:
       padding_top:                      400

data/lib/starter_web/pages/public/legal/en/300_privacy.adoc

@@ -23,7 +23,7 @@ toc:                                    true
 permalink:                              /pages/public/legal/en/privacy/
 regenerate:                             false
 
-resources:                              []
+resources:                              [ animate ]
 resource_options:
   - attic:
       padding_top:                      400
@@ -138,11 +138,10 @@ cases, cookies already be present and needs to be *manually* deleted by
 functions of your browser.
 
 ++++
-<div class="mt-4 mb-3">
+<div class="mt-4 mb-4 d-grid gap-2">
   <a  href="javascript:j1.cookieConsent.showDialog()"
-      class="btn btn-primary btn-lg btn-block btn-raised btn-flex mb-3"
-      aria-label="Cookie Consent"
-      style="min-width: 25rem">
+      class="btn btn-primary btn-flex btn-lg"
+      aria-label="Cookie Consent">
       <i class="mdi mdi-cookie mdi-2x mr-2"></i>
       Your settings
   </a>

data/lib/starter_web/pages/public/legal/en/400_comment_policy.adoc

@@ -27,7 +27,7 @@ comments:                               false
 permalink:                              /pages/public/legal/en/comment_policy/
 regenerate:                             true
 
-resources:                              []
+resources:                              [ animate ]
 resource_options:
   - attic:
       padding_top:                      400

data/lib/starter_web/pages/public/panels/intro_panel/_includes/attributes.asciidoc

@@ -0,0 +1,55 @@
+// ~/document_base_folder/000_includes
+//  Asciidoc attribute includes:                 attributes.asciidoc
+// -----------------------------------------------------------------------------
+
+// URLs - Internal references and/or sources on the Internet
+// -----------------------------------------------------------------------------
+tag::urls[]
+end::urls[]
+
+
+// FOOTNOTES, global asciidoc attributes (variables)
+// -----------------------------------------------------------------------------
+tag::footnotes[]
+:fn-bootstrap-v5--responsive-text:                footnote:[https://getbootstrap.com/docs/5.0/content/typography/#responsive-font-sizes[Supported with Bootstrap V5 · Responsive font sizes, window="_blank"]]
+end::footnotes[]
+
+
+
+// Tags - Asciidoc attributes used internally
+// -----------------------------------------------------------------------------
+tag::tags[]
+end::tags[]
+
+
+// Data - Data elements for Asciidoctor extensions
+// -----------------------------------------------------------------------------
+tag::data[]
+
+:data-images-standalone:                          "pages/roundtrip/100_present_images/lightbox-image-1.jpg, Golden Gate Bridge with San Francisco in distance, pages/roundtrip/100_present_images/lightbox-image-2.jpg, Forest with mountains behind"
+:data-images-group:                               "pages/roundtrip/100_present_images/lightbox-image-1.jpg, Golden Gate Bridge with San Francisco in distance, pages/roundtrip/100_present_images/lightbox-image-2.jpg, Forest with mountains behind"
+
+:data-images--themes-menu:                        "pages/roundtrip/500_themes/themes-menu-1280x800.jpg, Themes menu (Bootswatch)"
+
+:data-quicksearch-icon:                           "pages/roundtrip/600_quicksearch/quicksearch_icon-800x200.jpg, Search button (magnifier) in the quick access area"
+:data-quicksearch-input:                          "pages/roundtrip/600_quicksearch/quicksearch_input-800x200.jpg, Input bar for a QuickSearch"
+
+end::data[]
+
+
+// Images - Images from local include/images folder
+// -----------------------------------------------------------------------------
+tag::images[]
+end::images[]
+
+
+// PRODUCTS, local product information (e.g. release)
+// -----------------------------------------------------------------------------
+tag::products[]
+end::products[]
+
+
+// AUTHORS, local author information (e.g. article)
+// -----------------------------------------------------------------------------
+tag::authors[]
+end::authors[]

data/lib/starter_web/pages/public/panels/intro_panel/panel.adoc

@@ -44,8 +44,26 @@ resource_options:
             href:                       https://unsplash.com/@alex_andrews
 ---
 
-// Page content
+// Page Initializer
 // =============================================================================
+// Enable the Liquid Preprocessor
+:page-liquid:
+
+// Set (local) page attributes here
+// -----------------------------------------------------------------------------
+// :page--attr:                         <attr-value>
+:images-dir:                            {imagesdir}/pages/roundtrip/100_present_images
+
+//  Load Liquid procedures
+// -----------------------------------------------------------------------------
+{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
+
+// Load page attributes
+// -----------------------------------------------------------------------------
+{% include {{load_attributes}} scope="all" %}
+
+// Page content
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
 // Include sub-documents (if any)
 // -----------------------------------------------------------------------------
@@ -61,17 +79,47 @@ content at its best on all devices for all window sizes makes a great Web
 brilliant. J1 Template supports your Web for full responsiveness, for the
 best user experience on all modern devices.
 
-=== Bootstrap 4 Integration
+// [role="skiptranslate"]
+=== Bootstrap Integration
 
 To not sidetrack your audience by irritating user interface (UI) components,
 the J1 Template is based on Bootstrap. Bootstrap is one of the most popular
-frameworks for web development used today. J1 is based on Bootstrap V4,
+frameworks for web development used today. J1 is based on Bootstrap V5,
 the last current version to support your visitors by common navigation
 elements, data input, tables, and many other components.
 
 Bootstrap simplifies HTML programming a lot, offers excellent JS support
 for interactive components like navigation elements, cards, forms, etc.
 
+==== Themes
+
+The themes feature for J1 is in an experimental state for the template
+system. Anyway, it makes sense to present what is possible using different
+versions of Bootstrap's CSS styles for a website.
+
+Themes step in the framework to further adjust the website's appearance
+based on the core CSS rules and definitions of Bootstrap. Themes do not
+change the framework's functionality but modify rule-based, e.g., the
+color scheme, fonts, sizes, or the appearance of more complex elements like
+forms or tables. Additionally, a theme may add additional components but in
+the *sense* of Bootstrap's framework rules and philosophy.
+
+It is expected that many people will change the template for their needs. To
+create unique websites. Fundamental to do this is are CSS styles
+defined by Bootstrap.
+
+.Themes menu (Bootswatch)
+lightbox::images--themes-menu[ 1024, {data-images--themes-menu} ]
+
+Thanks to the people at link:{url-bootswatch--home}[Bootswatch, {browser-window--new}],
+a great set of already prepared Bootstrap stylesheets (20+ for BS V5) in
+various designs are available on their website. There is no need to start from
+scratch, re-define all the Bootstrap variables, and rebuild the framework files
+to create a new theme. Many different styles are available. What is already
+available at Bootswatch is at least a good base for your modifications; your
+unique design.
+
+
 [[current-technology]]
 == HTML5 · CSS3 · JS