RubyGems - j1-template - Versions diffs - 2020.0.9 → 2020.0.14 - Mend

j1-template 2020.0.9 → 2020.0.14

Files changed (541) hide show

data/lib/starter_web/pages/public/learn/roundtrip/510_mdb_preview/mdb_previewer.adoc ADDED

@@ -0,0 +1,52 @@
+---
+title:                                  Themes
+tagline:                                Material Design for Bootstrap
+description:                            material
+tags:                                   [ Page, Bootstrap ]
+index:                                  [ Bootstrap, Addon, Clear, Button ]
+categories:                             [ pages ]
+permalink:                              /pages/public/mdb_preview/
+regenerate:                             true
+resources:                              [ clipboard ]
+resource_options:
+---
+// Enable the Liquid Preprocessor
+// -----------------------------------------------------------------------------
+:page-liquid:
+// Set other global page attributes here
+// -----------------------------------------------------------------------------
+//:my-asciidoc-attribute:
+//  Load Liquid procedures
+// -----------------------------------------------------------------------------
+{% capture set_env_entry_document %}themes/{{site.template.name}}/procedures/global/set_env_entry_document.proc{%endcapture%}
+// Initialize entry document environmental attributes
+// -----------------------------------------------------------------------------
+{% include {{set_env_entry_document}} %}
+// Load tag, url and data attributes
+// -----------------------------------------------------------------------------
+include::{includedir}/attributes.asciidoc[tag=tags]
+include::{includedir}/attributes.asciidoc[tag=urls]
+include::{includedir}/attributes.asciidoc[tag=data]
+// Set local page attributes
+// -----------------------------------------------------------------------------
+// :images-dir:                         {imagesdir}/path/to/page/images
+// Page content
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+// Include sub-documents
+// -----------------------------------------------------------------------------
+include::{documentsdir}/100_buttons.asciidoc[]

data/lib/starter_web/pages/public/learn/vtutorials/000_includes/attributes.asciidoc CHANGED

@@ -89,14 +89,14 @@ tag::tags[]
 :dotdot:                                          &#46;&#46;
 :middot:                                          &middot;
-end::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-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.webp, 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.webp, Forest with mountains behind"
 end::data[]

data/lib/starter_web/pages/public/learn/vtutorials/000_includes/documents/410_table_3_column.asciidoc CHANGED

@@ -1,6 +1,6 @@
 .Selected extended BS modal examples
-[cols="6a,3a,3a", options="header", width="100%", role="table-responsive"]
+[cols="6a,3a,3a", options="header", width="100%", role="table-responsive-stacked-lg"]
 |===============================================================================
 |Postion |Class | Example

data/lib/starter_web/pages/public/learn/vtutorials/000_includes/documents/419_advanced_modals_html.asciidoc CHANGED

@@ -128,7 +128,7 @@
     <div class="modal-content">
       <!-- 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">
+        <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-primary-modal mr-2">Yes, please</a>
           <a type="button" class="btn btn-outline-secondary-modal" 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>
         </div>
@@ -184,7 +184,7 @@
       </div>
       <!-- Body -->
       <div class="modal-body">
-        <img src="/assets/images/modules/attics/admin-dashboard-bootstrap-1280x600.png" alt="" class="img-fluid">
+        <img src="/assets/images/modules/attics/admin-dashboard-bootstrap-1280x600.jpg" alt="admin-dashboard-bootstrap-1280x600.jpg" class="img-fluid">
         <div class="text-center">
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt vero illo error eveniet cum.</p>
         </div>
@@ -409,7 +409,7 @@
           <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>
-        <img src="/assets/images/modules/attics/admin-dashboard-bootstrap-1280x600.png" alt="" class="img-fluid">
+        <img src="/assets/images/modules/attics/admin-dashboard-bootstrap-1280x600.jpg" alt="admin-dashboard-bootstrap-1280x600.jpg" class="img-fluid">
       </div>
       <!-- Footer -->
       <div class="modal-footer">
@@ -724,7 +724,7 @@
       </div>
       <!-- Body -->
       <div class="modal-body">
-        <img src="/assets/images/modules/attics/admin-dashboard-bootstrap-1280x600.png" alt="" class="img-fluid">
+        <img src="/assets/images/modules/attics/admin-dashboard-bootstrap-1280x600.jpg" alt="bootstrap-1280x600.jpg" class="img-fluid">
         <div class="text-center">
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt vero illo error eveniet cum.</p>
         </div>
@@ -925,4 +925,4 @@
   </div>
 </div>
 <!--END Modal Subscription -->
-++++
+++++

data/lib/starter_web/pages/public/learn/whats_up.adoc CHANGED

@@ -9,8 +9,9 @@ categories:                             [ pages ]
 permalink:                              /pages/public/learn/whats_up/
 regenerate:                             false
+toc:                                    true
-resources:                              [ lightbox ]
+resources:                              []
 resource_options:
   - ssm:
       mode:                             menu
@@ -19,7 +20,7 @@ resource_options:
       padding_bottom:                   50
       opacity:                          0.5
       slides:
-        - url:                          /assets/images/modules/attics/runner-1920x1200-bw.jpg
+        - url:                          /assets/images/modules/attics/runner-1920x1200-bw.webp
           alt:                          Photo by Alexander Redl on Unsplash
           badge:
             type:                       unsplash
@@ -83,7 +84,6 @@ implemented.
 For that reason, it was a good decision to start from here.
 == Whats up
 First of all, you've started already! The important first step in to find

data/lib/starter_web/pages/public/legal/en/000_copyright.adoc CHANGED

@@ -17,7 +17,7 @@ resource_options:
       padding_bottom:                   50
       opacity:                          0.5
       slides:
-        - url:                          /assets/images/modules/attics/giammarco-boscaro-1920x1280.jpg
+        - url:                          /assets/images/modules/attics/giammarco-boscaro-1920x1280.webp
           alt:                          Photo by Giammarco Boscaro
           alignY:                       0.5
           badge:

data/lib/starter_web/pages/public/legal/en/100_impress.adoc CHANGED

@@ -18,7 +18,7 @@ resource_options:
       padding_bottom:                   50
       opacity:                          0.5
       slides:
-        - url:                          /assets/images/modules/attics/aditya-joshi-1920x1280.jpg
+        - url:                          /assets/images/modules/attics/aditya-joshi-1920x1280.webp
           alt:                          Photo by Aditya Joshi
           alignY:                       0.5
           badge:

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

@@ -17,7 +17,7 @@ resource_options:
       padding_bottom:                   50
       opacity:                          0.5
       slides:
-        - url:                          /assets/images/modules/attics/lianhao-1920x1280.jpg
+        - url:                          /assets/images/modules/attics/lianhao-1920x1280.webp
           alt:                          Photo by Lianhao Qu
           alignY:                       top
           badge:

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

@@ -1,7 +1,15 @@
 ---
 title:                                  J1 Template
 tagline:                                creating responsive websites
-description:                            Responsive Webs using J1 Template
+description: >
+                                        A good user experience browsing a Web is one of
+                                        the most important features a site has to offer as
+                                        a must. Beside excellent content. Presenting content
+                                        at it’s best on all devices, for all window sizes makes
+                                        an excellent Web brilliant. J1 Template support your Web
+                                        for full responsiveness, for the best user experience on
+                                        all modern devices.
 author:                                 J1 Team
 tags:                                   [ Jekyll, Template ]
@@ -16,9 +24,9 @@ resource_options:
   - attic:
       padding_top:                      400
       padding_bottom:                   50
-      opacity:                          0.5
+      opacity:                          0.5
       slides:
-        - url:                          /assets/images/modules/attics/the-place-1920x1280-bw.jpg
+        - url:                          /assets/images/modules/attics/the-place-1920x1280-bw.webp
           alt:                          the-place-1920x1280-bw
 ---
@@ -35,13 +43,13 @@ best user experience on all modern devices.
 === Bootstrap 4 Integration
 To not sidetrack your audience by irritating user interface (UI) components,
-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, the
-last current version to support your visitors by common elements for
+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, the
+last current version to support your visitors by common elements for
 navigation, data input, tables and many other components more.
 For your development projects, Bootstrap simplifies HTML programming a lot,
-offers excellent JS support for interactive components like navigation
+offers excellent JS support for interactive components like navigation
 elements, cards, forms etc.
 [[current-technology]]
@@ -55,40 +63,40 @@ development, languages and tools.
 === HTML5 + CSS3
-J1 is using HTML5 for structuring content on the World Wide Web. The current
-version of the HTML standard offer a lot of new features including detailed
-processing models to support more interoperable implementations. It extends
-and improves HTML markups available. HTML5 introduces application
-programming interfaces (APIs) for more complex web applications. For same
-reasons, the new HTMLstandard is also a good choice for modern cross-platform
+J1 is using HTML5 for structuring content on the World Wide Web. The current
+version of the HTML standard offer a lot of new features including detailed
+processing models to support more interoperable implementations. It extends
+and improves HTML markups available. HTML5 introduces application
+programming interfaces (APIs) for more complex web applications. For same
+reasons, the new HTMLstandard is also a good choice for modern cross-platform
 mobile applications, because it includes features designed with mobile devices
 in mind.
-Many new features are included with HTML5. To natively support multimedia and
-graphical content, the new `<video>`, `<audio>` and `<canvas>` elements were
+Many new features are included with HTML5. To natively support multimedia and
+graphical content, the new `<video>`, `<audio>` and `<canvas>` elements were
 added. Beside this, support for scalable vector graphics (SVG) and an API
 called MathML for mathematical formulas are now available.
 The new standard allows to use so-called *semantic* markup elements for your
-documents. New structure elements such as `<main>`, `<section>`, `<article>`,
-`<header>` or `<footer>` (and many more) were added. Better structured HTML
+documents. New structure elements such as `<main>`, `<section>`, `<article>`,
+`<header>` or `<footer>` (and many more) were added. Better structured HTML
 code can help people having disabilities to read the pages presented better.
-CSS is designed to enable the separation of presentation and content.
-Including layout, colors and fonts for example. This separation improves
-content accessibility, provide more flexibility and control in the
+CSS is designed to enable the separation of presentation and content.
+Including layout, colors and fonts for example. This separation improves
+content accessibility, provide more flexibility and control in the
 presentation.
 Separation of formatting and content also makes it feasible to present the
-same page in different styles. For example, the themes feature of J1 Template
+same page in different styles. For example, the themes feature of J1 Template
 make use of this.
 CSS3 is divided into several separate components called *modules*. Each module
-adds new capabilities or extends features defined in the former CSS2 standard.
+adds new capabilities or extends features defined in the former CSS2 standard.
 HTML5 in combination with CSS3 allows to create modern and modular code for web
 pages that can be viewed on all current devices like Mobiles, Tablets or the
 classic Desktop PC. The new HTML5 elements plus CSS3 modules can be used as a
-replacement for *proprietary solutions* like Adobe Flash to build modern
+replacement for *proprietary solutions* like Adobe Flash to build modern
 webpages based on *open standards*.
 === Javascript
@@ -97,8 +105,8 @@ HTML5 and CSS3 can do a lot. Content placement and basic methods for the
 dynamic of elements can be done using pure HTML5 and CSS3. For more
 complex solutions like modules the support of Javascript is needed.
-J1 Template has build-in a wide range of JS powered modules to support a
-website for e.g. the navigation, for presenting image data in galeries,
+J1 Template has build-in a wide range of JS powered modules to support a
+website for e.g. the navigation, for presenting image data in galeries,
 lightboxes and so on.
@@ -106,53 +114,51 @@ lightboxes and so on.
 == Start in No Time
 The base idea of J1 Template is to give all people a tool set at their hands
-to create a website with no need to start by web development or web design
-from the beginning. A website based on J1 is using build-in templates and
-engines. As a result, the process to generate HTML code from your content
-is done automatically and allows you to concentrate on what truly matters:
+to create a website with no need to start by web development or web design
+from the beginning. A website based on J1 is using build-in templates and
+engines. As a result, the process to generate HTML code from your content
+is done automatically and allows you to concentrate on what truly matters:
 your content.
-Using J1, you can instantly start a web project by creating your content
+Using J1, you can instantly start a web project by creating your content
 and not by start learning the the deep of web development technologies.
 === Create your Web
-J1 is highly customizeable. Based on a pure configuration, a website can be
+J1 is highly customizeable. Based on a pure configuration, a website can be
 created. The template system creates static web pages using Jekyll as
-the base HTML code generator. Static website are fast and secure but simple
+the base HTML code generator. Static website are fast and secure but simple
 to manage. No complex database systems and PHP interfaces are needed.
-To present a static website, only a web server environment is needed. To
-publish a website on the Internet, many possible platforms can be used like
+To present a static website, only a web server environment is needed. To
+publish a website on the Internet, many possible platforms can be used like
 Github, Netlify or Heroku for example - for free!
 The Internet is not a peaceful place. Every site accessible from the public is
-attacked from the first second if published. Static websites are robust, fast
-and that's import: intrinsicly secure. That means: *not* changeable. No
-offender attacking your website is able to break your site. Because it's
+attacked from the first second if published. Static websites are robust, fast
+and that's import: intrinsicly secure. That means: *not* changeable. No
+offender attacking your website is able to break your site. Because it's
 static or in other words: unchangeable, unbreakable from it's natur.
 This makes a static website for the better.
 === Modules and Apps
-It's predictable what base components are needed for a modern website. For
-Content Management Systems (CMS) like Wordpress, Joomla or Drupal a huge
-number of modules are available to extend a site by e.g. Apps like image
+It's predictable what base components are needed for a modern website. For
+Content Management Systems (CMS) like Wordpress, Joomla or Drupal a huge
+number of modules are available to extend a site by e.g. Apps like image
 galleries, video players, calendars etc.
 This is a bit different for static webs as they don't have a central
 Management System as CMS do to integrate external code. There no ecosystem,
-no marketplace to get apps and modules from.
+no marketplace to get apps and modules from.
-Luckily, it is not that hard to integrate external components into the world
-of Jekyll. But one of the objectives of J1 is to give people a ready-to-use
-toolset without the need to install, to integrate components that expected
+Luckily, it is not that hard to integrate external components into the world
+of Jekyll. But one of the objectives of J1 is to give people a ready-to-use
+toolset without the need to install, to integrate components that expected
 as a need.
-A rich set of modules are already included. The modules support common use
-cases of a website like a flexible navigation system, a local search,
-lightboxes to present pictures and videos, little helpers for scrolling or
+A rich set of modules are already included. The modules support common use
+cases of a website like a flexible navigation system, a local search,
+lightboxes to present pictures and videos, little helpers for scrolling or
 to automatically create TOCs (table of contents) for a page.

data/lib/starter_web/pages/public/previewer/000_includes/tables/mdi_icons/100_absolute_sizes.asciidoc CHANGED

@@ -1,6 +1,6 @@
 .Fixed (absolute) sizes
-[cols="2,1,9a", options="header", role="table-responsive mb-5"]
+[cols="2,1,9a", options="header", role="table-responsive-stacked-lg mb-5"]
 |===============================================================================
 |Class |Result |Code

data/lib/starter_web/pages/public/previewer/000_includes/tables/mdi_icons/110_bs_grid_sizes.asciidoc CHANGED

@@ -1,6 +1,6 @@
 .Bootstrap (BS) grid sizes
-[cols="2,1,9a", options="header", role="table-responsive mb-5"]
+[cols="2,1,9a", options="header", role="table-responsive-stacked-lg mb-5"]
 |===============================================================================
 |Class |Result |Code

data/lib/starter_web/pages/public/previewer/000_includes/tables/mdi_icons/120_relative_sizes.asciidoc CHANGED

@@ -1,6 +1,6 @@
 .Relative sizes
-[cols="2,1,9a", options="header", role="table-responsive mb-5"]
+[cols="2,^2m,8a", options="header", role="table-responsive-stacked-lg mb-5"]
 |===============================================================================
 |Class |Result |Code
@@ -44,44 +44,4 @@
 <i class="mdi mdi-5x mdi-account"></i>
 ----
-|`mdi-6x`
-^|pass:[<i class="mdi mdi-6x mdi-account"></i>]
-|
-[source, html]
-----
-<i class="mdi mdi-6x mdi-account"></i>
-----
-|`mdi-7x`
-^|pass:[<i class="mdi mdi-7x mdi-account"></i>]
-|
-[source, html]
-----
-<i class="mdi mdi-7x mdi-account"></i>
-----
-|`mdi-8x`
-^|pass:[<i class="mdi mdi-8x mdi-account"></i>]
-|
-[source, html]
-----
-<i class="mdi mdi-1x mdi-account"></i>
-----
-|`mdi-9x`
-^|pass:[<i class="mdi mdi-9x mdi-account"></i>]
-|
-[source, html]
-----
-<i class="mdi mdi-9x mdi-account"></i>
-----
-|`mdi-10x`
-^|pass:[<i class="mdi mdi-10x mdi-account"></i>]
-|
-[source, html]
-----
-<i class="mdi mdi-10x mdi-account"></i>
-----
 |===============================================================================

data/lib/starter_web/pages/public/previewer/000_includes/tables/mdi_icons/200_rotate.asciidoc CHANGED

@@ -1,6 +1,6 @@
 .Rotate icons
-[cols="2,1,9a", options="header", role="table-responsive mb-5"]
+[cols="2,1,9a", options="header", role="table-responsive-stacked-lg mb-5"]
 |===============================================================================
 |Class |Result |Code

data/lib/starter_web/pages/public/previewer/000_includes/tables/mdi_icons/300_flip.asciidoc CHANGED

@@ -1,6 +1,6 @@
 .Flip icons
-[cols="2,1,9a", options="header", role="table-responsive mb-5"]
+[cols="2,1,9a", options="header", role="table-responsive-stacked-lg mb-5"]
 |===============================================================================
 |Class |Result |Code