j1-template 2020.0.16 → 2020.0.21

data/lib/starter_web/pages/public/learn/roundtrip/420_responsive_tables_extensions.adoc

@@ -28,40 +28,25 @@ resource_options:
             href:                       https://unsplash.com/@markusspiske/portfolio
 ---
 
+// Page Initializer
+// =============================================================================
 // 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}} %}
+{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
 
-// Load tag, url and data attributes
+// Load page attributes (all)
 // -----------------------------------------------------------------------------
-include::{includedir}/attributes.asciidoc[tag=tags]
-include::{includedir}/attributes.asciidoc[tag=urls]
-include::{includedir}/attributes.asciidoc[tag=data]
+{% include {{load_attributes}} scope="all" %}
 
 // Set local page attributes
 // -----------------------------------------------------------------------------
-// :images-dir:                         {imagesdir}/path/to/page/images
-
+:images-dir:                            {imagesdir}/pages/roundtrip/100_present_images
 
 // Page content
-// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-
-// Include sub-documents
-// -----------------------------------------------------------------------------
-
+// =============================================================================
 
 Creating a design for responsive tables is challenging. The approch used by
 J1 Template is based on pure CSS on top of the classic Bootstrap styles for
@@ -70,7 +55,7 @@ simplicity and portability to be viewed best on all devices and browsers.
 == Table types
 
 But, for sure, the solution provided is a compromise. To fit the common needs
-for tables viewed on desktop *and* mobile devices, three types of responsive
+for tables viewed on desktop and mobile devices, three types of responsive
 tables are implemented:
 
 .Types of responsive tables
@@ -81,45 +66,45 @@ tables are implemented:
 |Bootstrap
 |`table-responsive`
 |The adding the class `table-responsive`, it creates a responsive table based
-on BS CSS styles. The table will then *scroll horizontally* on small devices.
-Making *any* table responsive across all viewports, the additonal class
+on BS CSS styles. The table will then scroll horizontally on small devices.
+Making any table responsive across all viewports, the additonal class
 `table-responsive` is to applied. For specific (Bootstrap) breakpoints, the
 classes `table-responsive-lg{-sm\|-md\|-lg\|-xl}` are available to have better
 control on what viewport sizes tables are being transformed.
 
 |R Tables
 |`r-text-xxx`
-|R tables are used by J1 Template for *default*. Those tables are using the
+|R tables are used by J1 Template for default. Those tables are using the
 responsive text feature (presented in section link:{roundtrip-typography}[Typography])
-with *no* additonal CSS classes to be applied. For smaller viewports, the text
+with no additonal CSS classes to be applied. For smaller viewports, the text
 scales down and should fit the cells automatically. The default text size for
 J1 is `r-text-300`.
 
 |F Tables
 |`no-r-text`
-|If the responsive text feature from J1 is *not* wanted, the CSS class
-`no-r-text` is to be applied. F (fixed) tables are *not responsive* per
+|If the responsive text feature from J1 is not wanted, the CSS class
+`no-r-text` is to be applied. F (fixed) tables are not responsive per
 default, but in combination with the CSS class `table-responsive-stacked-lg` (Bootstrap),
 this type behaves like classic Bootstrap responsive table (see above).
 
 |S Tables
 |`table-responsive-stacked-lg-stacked`
-|The style `table-responsive-stacked-lg-stacked` *rebuilds* a table. The header is set
-to *invisible* and all *columns* gets vertically *stacked* as *rows*. For
+|The style `table-responsive-stacked-lg-stacked` rebuilds a table. The header is set
+to invisible and all columns gets vertically stacked as rows. For
 specific (Bootstrap) breakpoints, the classes `table-responsive-stacked-lg-stacked{-sm\|-md\|-lg\|-xl}`
 are available to have better control on what viewport sizes tables are
 being transformed. The class `table-responsive-stacked-lg-stacked` is using the breakpoint
-at *768px* what is the same as `table-responsive-stacked-lg-stacked-md`
+at 768px what is the same as `table-responsive-stacked-lg-stacked-md`
 
 |===============================================================================
 
 [TIP]
 ====
-The styles for responsive tables takes effect for *default* if the viewport
+The styles for responsive tables takes effect for default if the viewport
 (window size) is smaller than 768px for the width (x-axis). Typical for small
 devices like tablets or mobiles.
 
-The styles for F *and* S Tables can be combined with the *Bootstrap* responsive
+The styles for F and S Tables can be combined with the Bootstrap responsive
 table approach (`table-responsive-stacked-lg`).
 ====
 
@@ -136,7 +121,7 @@ templating your content pages.
 
 === Bootstrap
 
-Responsive Bootstrap tables support tables to be *scrolled horizontally*
+Responsive Bootstrap tables support tables to be scrolled horizontally
 on smaller viewports. From a specified breakpoint and up, the table will
 behave normally and do not scroll horizontally.
 
@@ -207,7 +192,7 @@ Post's front matter by specifying a new date/time in the format
 
 == Multi-column Table
 
-Responsive Bootstrap tables support tables to be *scrolled horizontally*
+Responsive Bootstrap tables support tables to be scrolled horizontally
 on smaller viewports. Making any table responsive across all viewports, the
 additonal class `table-responsive-stacked-lg` is used. For specific (Bootstrap)
 breakpoints, the classes `table-responsive-stacked-lg{-sm|-md|-lg|-xl}` are available
@@ -227,9 +212,9 @@ In particular, this can clip off dropdown menus and other third-party widgets.
 |`color`
 |Hash
 |`md_white`
-|The *background_color hash* contains a pair of colors to control the header
+|The background_color hash contains a pair of colors to control the header
 background as a gradient.
-|The *background_color hash* contains a pair of colors to control the header
+|The background_color hash contains a pair of colors to control the header
 background as a gradient.
 
 |`background_color_1`
@@ -253,9 +238,9 @@ the form `#RRGGBB`
 |`color`
 |Hash
 |`md_white`
-|The *background_color hash* contains a pair of colors to control the header
+|The background_color hash contains a pair of colors to control the header
 background as a gradient.
-|The *background_color hash* contains a pair of colors to control the header
+|The background_color hash contains a pair of colors to control the header
 background as a gradient.
 
 |`background_color_1`

data/lib/starter_web/pages/public/learn/roundtrip/500_themes.adoc

@@ -25,64 +25,49 @@ resource_options:
             href:                       https://unsplash.com/@clemono
 ---
 
+// Page Initializer
+// =============================================================================
 // 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}} %}
+{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
 
-// Load tag, url and data attributes
+// Load page attributes (all)
 // -----------------------------------------------------------------------------
-include::{includedir}/attributes.asciidoc[tag=tags]
-include::{includedir}/attributes.asciidoc[tag=urls]
-include::{includedir}/attributes.asciidoc[tag=data]
+{% include {{load_attributes}} scope="all" %}
 
 // Set local page attributes
 // -----------------------------------------------------------------------------
-// :images-dir:                         {imagesdir}/path/to/page/images
-
+:images-dir:                            {imagesdir}/pages/roundtrip/100_present_images
 
 // Page content
-// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-
-// Include sub-documents
-// -----------------------------------------------------------------------------
-
+// =============================================================================
 ++++
 <!-- page_path:            {{page_path | debug}} -->
 <!-- site.source:          {{site.source | debug}} -->
 <!-- site.source.size:     {{site.source.size | debug}} -->
 ++++
 
-The themes feature for J1 Template is in a *alpha status* of the template
-system. Anyway, it makes sense to present what is possible using *different*
+The themes feature for J1 Template is in a alpha status of the template
+system. Anyway, it makes sense to present what is possible using different
 versions of Bootstrap's CSS styles for a website.
 
 == Themes
 
 It is expected that many people will change the template for their needs. To
-really create *unique* websites. Fundamental to do this is are CSS styles
+really create unique websites. Fundamental to do this is are CSS styles
 defined by Bootstrap.
 
-Modifying the CSS styles of link:{bootstrap-home}[Bootstrap, {window}] is not
+Modifying the CSS styles of link:{bootstrap-home}[Bootstrap, {browser-window--new}] is not
 rocket science. But, to be honest, some knowledge is needed of
 link:{w3org-css-spec}[the CSS technology] to do so. We encourage you to spend
 some time first on learning CSS. To learn what is the
-link:{w3schools-css-tutorial}[design base, {window}] of each and every website.
+link:{w3schools-css-tutorial}[design base, {browser-window--new}] of each and every website.
 Independendly from using Bootstrap or any other CSS framwork.
 
-Thanks to the people at link:{bootswatch-home}[Bootswatch, {window}], a great
+Thanks to the people at link:{bootswatch-home}[Bootswatch, {browser-window--new}], a great
 set of already prepared Bootstrap stylesheets in various designs are available
 at their website. No need to start from the scratch, to re-define all the
 Bootstrap variables and rebuild the framework files to create a new theme. Many
@@ -90,7 +75,7 @@ different styles are available. What is already available is at least a good
 base for your modifications: your unique design.
 
 Beside the bunch of different stylesheets at Bootswatch, an
-link:{bootswatch-api}[integration API, {window}] is available that helps a lot
+link:{bootswatch-api}[integration API, {browser-window--new}] is available that helps a lot
 to integrate available designs into a existing site. This API is the base to
 integrate Bootswatch stylesheets into J1 Template for easy use.
 
@@ -99,20 +84,20 @@ Thanks again the people at Bootswatch for this great work.
 
 == Apply a theme
 
-The base for designing pages using J1 Template is the theme *Uno*, a modern
+The base for designing pages using J1 Template is the theme Uno, a modern
 light theme that can be used for many types of websites. And what we mentioned
-already, web design is not: one size fits all. The theme *Uno* can be seen as
+already, web design is not: one size fits all. The theme Uno can be seen as
 good base, a starting point. Combining Uno and a different theme may a fast
 solution for your site!?
 
 You can find all available themes, all stylesheets to be applied to your pages
-from the menu *Themes*. You're invited to check how a page is changing for
+from the menu Themes. You're invited to check how a page is changing for
 their design if other stylesheets, other ideas of web design is used.
 
 NOTE: Changing BS-based styles is one thing, changing from one theme to the
 next at runtime a bit more challanging. For the alpha version of J1 Template,
 many styles are automatically changed for J1 specific components as well, but
-*not* all of them for now.
+not all of them for now.
 
 Simply select a theme from this menu and a new BS-based stylesheet is
 automatically applied to your pages.
@@ -128,9 +113,9 @@ This was the last place to go for the roundtrip. More details of the most
 common elements of Bootstrap can be found on the previewer for a theme. Have
 a look at the link:{previewer-theme}[Theme previewer].
 
-To make things real for your new site, go for *Web in a day*. This tutorial
+To make things real for your new site, go for Web in a day. This tutorial
 guides you through all the steps how to build a website - your site using
-Jekyll  nd the template system J1. It's really a nice journey to *explore*
-and  *learn* creating a static web.
+Jekyll  nd the template system J1. It's really a nice journey to explore
+and  learn creating a static web.
 
 Start your journey from here: link:{kickstarter-web-in-a-day}[Web in a day].

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

@@ -8,7 +8,7 @@ index:                                  [ Bootstrap, Addon, Clear, Button ]
 categories:                             [ pages ]
 
 permalink:                              /pages/public/mdb_preview/
-regenerate:                             true 
+regenerate:                             false
 
 resources:                              [ clipboard ]
 resource_options:
@@ -49,4 +49,4 @@ include::{includedir}/attributes.asciidoc[tag=data]
 // Include sub-documents
 // -----------------------------------------------------------------------------
 
-include::{documentsdir}/100_buttons.asciidoc[]
+include::{documentdir}/100_buttons.asciidoc[]

data/lib/starter_web/pages/public/learn/roundtrip/{000_includes → includes}/attributes.asciidoc

@@ -2,7 +2,6 @@
 //  Asciidoc attribute includes:                 attributes.asciidoc
 // -----------------------------------------------------------------------------
 
-
 // URLs - Internal references and/or sources on the Internet
 // -----------------------------------------------------------------------------
 tag::urls[]
@@ -25,7 +24,7 @@ tag::urls[]
 :fontawesome-get-started:                         https://fontawesome.com/get-started
 
 :mdi-home:                                        https://materialdesignicons.com/
-:mdi-icons-sheatsheet:                            https://cdn.materialdesignicons.com/3.3.92/
+:mdi-icons-cheatsheet:                            https://cdn.materialdesignicons.com/3.3.92/
 
 :iconify-home:                                    https://iconify.design/
 :iconify-icon-sets:                               https://iconify.design/icon-sets/
@@ -59,8 +58,8 @@ tag::urls[]
 :github-gist-home:                                https://gist.github.com/
 :asciidoc-extensions-gist-example:                https://gist.github.com/mojavelinux/5546622
 
-:previewer-emoji:                                 /pages/protected/previewer/twitter_emoji/
-:previewer-mdi:                                   /pages/protected/previewer/mdi_font/
+:previewer-emoji:                                 /pages/public/previewer/twitter_emoji/
+:previewer-mdi:                                   /pages/public/previewer/mdi_font/
 
 :previewer-theme:                                 /pages/public/previewer/theme/
 
@@ -70,25 +69,6 @@ end::urls[]
 // Tags - Asciidoc attributes used internally
 // -----------------------------------------------------------------------------
 tag::tags[]
-
-:window:                                          window="blank"
-:no-clipboard:                                    noclip
-:figure-caption:                                  Figure
-:images-dir:                                      pages/roundtrip
-:y:                                               icon:check[role="green"]
-:n:                                               icon:times[role="red"]
-:c:                                               icon:file-alt[role="blue"]
-:beginner:                                        icon:battery-quarter[role="md-blue"]
-:inter:                                           icon:battery-half[role="md-blue"]
-:advanced:                                        icon:battery-full[role="md-blue"]
-:emdash:                                          —
-:bullet:                                          •
-:bigbullet:                                       ●
-:bigbigbullet:                                    ⬤
-:dot:                                             .
-:dotdot:                                          ..
-:middot:                                          ·
-
 end::tags[]
 
 // Data - Data elements for Asciidoctor extensions
@@ -100,18 +80,13 @@ tag::data[]
 
 end::data[]
 
-
-// Product - Document (e.g release) information
+// PRODUCTS, local product information (e.g. release)
 // -----------------------------------------------------------------------------
-tag::product_info[]
-:license:                                         MIT License
-:revdate:                                         2018
-:revnumber:                                       1.0.0
-end::product_info[]
+tag::products[]
+end::products[]
 
 
-// Author - Author information
+// AUTHORS, local author information (e.g. article)
 // -----------------------------------------------------------------------------
 tag::authors[]
-:uri-author-juergen-adams                         https://jekyll.one
 end::authors[]

data/lib/starter_web/pages/public/learn/roundtrip/includes/documents/410_bottom_info.asciidoc

@@ -0,0 +1,14 @@
+// === Bottom Info
+// Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
+
+++++
+<div class="ml-2">
+  <!-- Button trigger modal -->
+  <button type="button"
+    class="btn btn-primary btn-raised"
+    data-toggle="modal"
+    data-target="#frameModalBottomSuccessDemo">
+    Launch Example
+  </button>
+</div>
+++++

data/lib/starter_web/pages/public/learn/roundtrip/{000_includes → includes}/documents/410_bottom_left_warning.asciidoc

@@ -2,10 +2,10 @@
 // Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
 
 ++++
-<div class="ml-2 mb-5">
+<div class="ml-2">
   <!-- Button trigger modal -->
   <button type="button" class="btn btn-primary btn-raised" data-toggle="modal" data-target="#sideModalBLWarningDemo">
-    Launch Modal Example
+    Launch Example
   </button>
 </div>
 ++++

data/lib/starter_web/pages/public/learn/roundtrip/{000_includes → includes}/documents/410_bottom_right_danger.asciidoc

@@ -2,10 +2,10 @@
 // Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
 
 ++++
-<div class="ml-2 mb-5">
+<div class="ml-2">
   <!-- Button trigger modal -->
   <button type="button" class="btn btn-primary btn-raised" data-toggle="modal" data-target="#sideModalBRDangerDemo">
-    Launch Modal Example
+    Launch Example
   </button>
 </div>
 ++++

data/lib/starter_web/pages/public/learn/roundtrip/{000_includes → includes}/documents/410_central_success.asciidoc

@@ -2,10 +2,10 @@
 // Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
 
 ++++
-<div class="ml-2 mb-5">
+<div class="ml-2">
   <!-- Button trigger modal -->
   <button type="button" class="btn btn-primary btn-raised" data-toggle="modal" data-target="#centralModalSuccessDemo">
-    Launch Modal Example
+    Launch Example
   </button>
 </div>
 ++++

data/lib/starter_web/pages/public/learn/roundtrip/{000_includes → includes}/documents/410_full_height_left_info.asciidoc

@@ -2,10 +2,10 @@
 // Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
 
 ++++
-<div class="ml-2 mb-5">
+<div class="ml-2">
   <!-- Button trigger modal -->
   <button type="button" class="btn btn-primary btn-raised" data-toggle="modal" data-target="#fluidModalLeftInfoDemo">
-    Launch Modal Example
+    Launch Example
   </button>
 </div>
 ++++

data/lib/starter_web/pages/public/learn/roundtrip/{000_includes → includes}/documents/410_full_height_right_success.asciidoc

@@ -2,10 +2,10 @@
 // Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
 
 ++++
-<div class="ml-2 mb-5">
+<div class="ml-2">
   <!-- Button trigger modal -->
   <button type="button" class="btn btn-primary btn-raised" data-toggle="modal" data-target="#fluidModalRightSuccessDemo">
-    Launch Modal Example
+    Launch Example
   </button>
 </div>
 ++++