RubyGems - j1-template - Versions diffs - 2020.0.10 → 2020.0.15 - Mend

j1-template 2020.0.10 → 2020.0.15

Files changed (542) hide show

data/lib/starter_web/pages/public/learn/roundtrip/200_typography.adoc CHANGED

@@ -8,9 +8,10 @@ index:                                  [ Template, Roundtrip, Typography ]
 categories:                             [ pages ]
 permalink:                              /pages/public/learn/roundtrip/typography/
-regenerate:                             false
+regenerate:                             true
 toc:                                    true
+advertising:                            false
 resources:                              []
 resource_options:
@@ -21,8 +22,11 @@ resource_options:
       padding_bottom:                   50
       opacity:                          0.3
       slides:
-        - url:                          /assets/images/pages/roundtrip/typography-1920x1280-bw.jpg
+        - url:                          /assets/images/pages/roundtrip/typography-1920x1280-bw.webp
           alt:                          Photo by Alice Donovan Rousel on Unsplash
+          preload:                      0
+          transitionDuration:           fast
+          resolutionRefreshRate:        500
           badge:
             type:                       unsplash
             author:                     Alice Donovan Rousel
@@ -194,7 +198,7 @@ base.
 That way, five series are available by the five scale factors. See the following
 table how `r-text` scales.
-[cols="3,2,7a", options="header", role="table-responsive mb-5"]
+[cols="3,2,7a", options="header", role="table-responsive-stacked-lg mb-5"]
 |===============================================================================
 |Property | Factor |Example text
@@ -287,7 +291,7 @@ The design for the Bootstrap *nav pills* were change into MD Design. As all
 elements available with J1 Template, the _Meterial Design_ color palette is
 used. All Bootstrap base classes can be used to colorize:
-[cols="5,7a", options="header", role="table-responsive mb-5"]
+[cols="5,7a", options="header", role="table-responsive-stacked-lg mb-5"]
 |===============================================================================
 |Property | Example

data/lib/starter_web/pages/public/learn/roundtrip/300_icon_fonts.adoc CHANGED

@@ -10,14 +10,14 @@ categories:                             [ pages ]
 permalink:                              /pages/public/learn/roundtrip/mdi_icon_font/
 regenerate:                             false
-resources:                              []
+resources:                              [ iconify ]
 resource_options:
   - attic:
       padding_top:                      400
       padding_bottom:                   50
       opacity:                          0.5
       slides:
-        - url:                          /assets/images/pages/roundtrip/icon-fonts-1920x1280-bw.jpg
+        - url:                          /assets/images/pages/roundtrip/icon-fonts-1920x1280-bw.webp
           alt:                          Photo by Harpal Singh on Unsplash
           badge:
             type:                       unsplash
@@ -50,7 +50,7 @@ include::{includedir}/attributes.asciidoc[tag=data]
 // Set local page attributes
 // -----------------------------------------------------------------------------
-// :images-dir:                         {imagesdir}/path/to/page/images
+// :images-dir:                         {imagesdir}/path/to/page/images
 // Page content
@@ -89,7 +89,7 @@ project to create an increased icon-set based on _Google_'s official repository
 and MD style specification.
 .Material Design Icons
-[cols="2a,3a,4a,3a", options="header", width="100%", role="rtable_v table-responsive mt-3"]
+[cols="2a,3a,4a,^", options="header", width="100%", role="table-responsive-stacked-lg mt-3"]
 |===============================================================================
 |Size |Modifier |Markup |Render
@@ -100,7 +100,7 @@ and MD style specification.
 ----
 mdi:account[1x]
 ----
-^|mdi:account[1x]
+|mdi:account[1x]
 |3x
 |no modifier set
@@ -109,7 +109,7 @@ mdi:account[1x]
 ----
 mdi:account[3x]
 ----
-^|mdi:account[3x]
+|mdi:account[3x]
 |5x
 |no modifier set
@@ -118,7 +118,7 @@ mdi:account[3x]
 ----
 mdi:account[5x]
 ----
-^|mdi:account[5x]
+|mdi:account[5x]
 |5x
 |`mdi-rotate-45`
@@ -127,7 +127,7 @@ mdi:account[5x]
 ----
 mdi:account[5x mdi-rotate-45]
 ----
-^|mdi:account[5x mdi-rotate-45]
+|mdi:account[5x mdi-rotate-45]
 |5x
 |`mdi-rotate-315`
@@ -136,7 +136,7 @@ mdi:account[5x mdi-rotate-45]
 ----
 mdi:account[5x mdi-rotate-315]
 ----
-^|mdi:account[5x mdi-rotate-315]
+|mdi:account[5x mdi-rotate-315]
 |5x
 |`mdi-light` +
@@ -146,7 +146,7 @@ mdi:account[5x mdi-rotate-315]
 ----
 mdi:alert[5x mdi-light mdi-flip-v]
 ----
-^|mdi:alert[5x mdi-light mdi-flip-v]
+|mdi:alert[5x mdi-light mdi-flip-v]
 |5x
 |`md-indigo`
@@ -155,7 +155,7 @@ mdi:alert[5x mdi-light mdi-flip-v]
 ----
 mdi:alert[5x md-indigo]
 ----
-^|mdi:account[5x md-indigo]
+|mdi:account[5x md-indigo]
 |5x
 |`md-pink`
@@ -164,7 +164,7 @@ mdi:alert[5x md-indigo]
 ----
 mdi:alert[5x md-pink]
 ----
-^|mdi:account[5x md-pink]
+|mdi:account[5x md-pink]
 |5x
 |`mdi-spin`
@@ -173,7 +173,7 @@ mdi:alert[5x md-pink]
 ----
 mdi:loading[5x mdi-spin]
 ----
-^|mdi:loading[5x mdi-spin]
+|mdi:loading[5x mdi-spin]
 |5x
 |`md-red-900` +
@@ -183,7 +183,7 @@ mdi:loading[5x mdi-spin]
 ----
 mdi:heart[5x md-red-900 mdi-pulsed]
 ----
-^|mdi:heart[5x md-red-900 mdi-pulsed]
+|mdi:heart[5x md-red-900 mdi-pulsed]
 |===============================================================================
@@ -223,7 +223,7 @@ and the MIT License.
 ====
 .FontAwesome Icons
-[cols="2a,3a,4a,3a", options="header", width="100%", role="rtable_v table-responsive mt-3"]
+[cols="2a,3a,4a,^", options="header", width="100%", role="table-responsive-stacked-lg mt-3"]
 |===============================================================================
 |Size |Modifier |Markup |Render
@@ -234,7 +234,7 @@ and the MIT License.
 ----
 fas:user[1x]
 ----
-^|fas:user[1x mt-4]
+^|fas:user[1x]
 |3x
 |no modifier set
@@ -243,7 +243,7 @@ fas:user[1x]
 ----
 fas:user[3x]
 ----
-^|fas:user[3x mt-4]
+^|fas:user[3x]
 |5x
 |no modifier set
@@ -252,25 +252,16 @@ fas:user[3x]
 ----
 fas:user[5x]
 ----
-^|fas:user[5x mt-4]
+^|fas:user[5x]
 |5x
-|`fa-rotate-45`
-|Rotate 45 degrees
-[source, adoc, role="noclip"]
-----
-fas:user[5x fa-rotate-45]
-----
-^|fas:user[5x fa-rotate-45 mt-4]
-|5x
-|`fa-rotate-315`
-|Rotate 315 degrees
+|`fa-rotate-90`
+|Rotate 90 degrees
 [source, adoc, role="noclip"]
 ----
-fas:user[5x fa-rotate-315]
+fas:user[5x fa-rotate-90]
 ----
-^|fas:user[5x fa-rotate-315 mt-4]
+^|fas:user[5x fa-rotate-90]
 |5x
 |`mdi-light` +
@@ -280,7 +271,7 @@ fas:user[5x fa-rotate-315]
 ----
 fas:exclamation-triangle[5x mdi-light fa-flip-v]
 ----
-^|fas:exclamation-triangle[5x mdi-light fa-flip-v mt-4]
+^|fas:exclamation-triangle[5x mdi-light fa-flip-v]
 |5x
 |`md-indigo`
@@ -289,7 +280,7 @@ fas:exclamation-triangle[5x mdi-light fa-flip-v]
 ----
 fas:alert[5x md-indigo]
 ----
-^|fas:user[5x md-indigo mt-4]
+^|fas:user[5x md-indigo]
 |5x
 |`md-pink`
@@ -298,7 +289,7 @@ fas:alert[5x md-indigo]
 ----
 fas:alert[5x md-pink]
 ----
-^|fas:user[5x md-pink mt-4]
+^|fas:user[5x md-pink]
 |5x
 |`fa-spin`
@@ -307,17 +298,17 @@ fas:alert[5x md-pink]
 ----
 fas:circle-notch[5x fa-spin]
 ----
-^|fas:circle-notch[5x fa-spin mt-4]
+^|fas:circle-notch[5x fa-spin]
 |5x
 |`md-red-900` +
-`fa-pulsed`
+`md-red-900` `fa-pulsed`
 |Color set to MDI Dark Red and added animation of type Pulsed
 [source, adoc, role="noclip"]
 ----
 fas:heart[5x md-red-900 fa-pulsed]
 ----
-^|fas:heart[5x md-red-900 fa-pulsed mt-4]
+^|fas:heart[5x md-red-900 fa-pulsed]
 |===============================================================================
@@ -366,20 +357,20 @@ Currently, over 40,000 vector icons are available for many different use cases.
 Find some examples below.
 .Brand Icons
-[cols="2a,3a,4a,3a", options="header", width="100%", role="rtable_v table-responsive mt-3"]
+[cols="2a,3a,4a,^", options="header", width="100%", role="table-responsive-stacked-lg mt-3"]
 |===============================================================================
 |Size |Modifier |Markup |Render
-|5x
+|3x
 |no modifier set
 |All `icons` can be found on the preview page at link:{iconify-brand-icons}[SVG Logos, {window}]
 [source, adoc, role="noclip"]
 ----
-iconify:logos:opensource[5x]
+iconify:logos:opensource[3x]
 ----
-^|iconify:logos:opensource[5x]
+^|iconify:logos:opensource[3x]
-|3x
+|5x
 |no modifier set
 |All `icons` can be found on the preview page at link:{iconify-brand-icons}[SVG Logos, {window}]
 [source, adoc, role="noclip"]
@@ -391,7 +382,7 @@ iconify:logos:atom[5x]
 |===============================================================================
 .Medical Icons
-[cols="2a,3a,4a,3a", options="header", width="100%", role="rtable_v table-responsive mt-3"]
+[cols="2a,3a,4a,^", options="header", width="100%", role="table-responsive-stacked-lg mt-3"]
 |===============================================================================
 |Size |Modifier |Markup |Render
@@ -405,13 +396,13 @@ iconify:medical-icon:i-ear-nose-throat[3x]
 ^|iconify:medical-icon:i-ear-nose-throat[3x]
 |5x
-|no modifier set
+|`md-red-900`
 |All `icons` can be found on the preview page at link:{iconify-medical-icons}[Medical Icons, {window}]
 [source, adoc, role="noclip"]
 ----
-iconify:medical-icon:i-ear-nose-throat[5x]
+iconify:medical-icon:i-ear-nose-throat[5x md-red-900]
 ----
-^|iconify:medical-icon:i-ear-nose-throat[5x]
+^|iconify:medical-icon:i-ear-nose-throat[5x md-red-900]
 |===============================================================================

data/lib/starter_web/pages/public/learn/roundtrip/400_asciidoc_extensions.adoc CHANGED

@@ -10,14 +10,14 @@ categories:                             [ pages ]
 permalink:                              /pages/public/learn/roundtrip/asciidoc_extensions/
 regenerate:                             false
-resources:                              [ lightbox ]
+resources:                              [ lightbox, iconify, twemoji ]
 resource_options:
   - attic:
       padding_top:                      400
       padding_bottom:                   50
       opacity:                          0.5
       slides:
-        - url:                          /assets/images/pages/roundtrip/puzzle-1920x1280-bw.jpg
+        - url:                          /assets/images/pages/roundtrip/puzzle-1920x1280-bw.webp
           alt:                          puzzle-1920x1280-bw
 #         badge:
 #           type:                       unsplash
@@ -453,7 +453,7 @@ All *macro* types available for `lorem:` to be used for blind *text* can be
 found with the following table below.
 //.Tabelle
-[cols="5,2,5a", options="header", role="table-responsive mb-2"]
+[cols="5,2,5a", options="header", role="table-responsive-stacked-lg mb-2"]
 |===============================================================================
 |Macro | Type |Example

data/lib/starter_web/pages/public/learn/roundtrip/410_bs_modals_extentions.adoc CHANGED

@@ -19,7 +19,7 @@ resource_options:
       padding_bottom:                   50
       opacity:                          0.5
       slides:
-        - url:                          /assets/images/pages/roundtrip/bootstrap-1920x1000-bw.jpg
+        - url:                          /assets/images/pages/roundtrip/bootstrap-1920x1000-bw.webp
           alt:                          bootstrap
 ---
@@ -57,27 +57,27 @@ include::{includedir}/attributes.asciidoc[tag=data]
 // Include sub-documents
 // -----------------------------------------------------------------------------
-Advanced Bootstrap Modals are based on the free package of
-link:{mdb-home}[Material Design for Bootstrap, {window}] on version
+Advanced Bootstrap Modals are based on the free package of
+link:{mdb-home}[Material Design for Bootstrap, {window}] on version
 *4.3.2*. This version can be found following this link:
-link:{mdb-bs-modals-legacy}[Enhanced Bootstrap Modals, {window}]. A more
+link:{mdb-bs-modals-legacy}[Enhanced Bootstrap Modals, {window}]. A more
 current version is available from here: link:{mdb-bs-modals}[Modal examples & templates, {window}].
-Bootstrap modals are used to add dialogs to your web pages for user
-notifications. To highlight important information to your vistors. Modals
-are positioned over everything else in the document so that the notification
+Bootstrap modals are used to add dialogs to your web pages for user
+notifications. To highlight important information to your vistors. Modals
+are positioned over everything else in the document so that the notification
 gets the users attention.
 == BS advanced Modals
 To improve your visitors experience on important information that shouldn't
-missed, modals are a good choice to bring the users attention on. Using J1
+missed, modals are a good choice to bring the users attention on. Using J1
 Template BS enhanced predefined modal styles, some emotional weight is added
-to the information displayed - ranging from an info level, simple warning to
+to the information displayed - ranging from an info level, simple warning to
 critical messages.
-NOTE: For more information on how to use Bootstrap’s JavaScript modal
+NOTE: For more information on how to use Bootstrap’s JavaScript modal
 plugin, refer to: link:{bs_doc_components_modal}[Bootstrap Docs, {window}].
@@ -125,4 +125,3 @@ what the link:{roundtrip-responsive-tables}[BS tables extensions] can do!
 // -------------------------------------------------------------------
 include::{documentsdir}/419_advanced_modals_html.asciidoc[]

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

@@ -20,7 +20,7 @@ resource_options:
       padding_bottom:                   50
       opacity:                          0.7
       slides:
-        - url:                          /assets/images/pages/roundtrip/tables-1920x1280-bw.jpg
+        - url:                          /assets/images/pages/roundtrip/tables-1920x1280-bw.webp
           alt:                          Photo by Markus Spiske on Unsplash
           badge:
             type:                       unsplash
@@ -64,7 +64,7 @@ include::{includedir}/attributes.asciidoc[tag=data]
 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
+J1 Template is based on pure CSS on top of the classic Bootstrap styles for
 simplicity and portability to be viewed best on all devices and browsers.
 == Table types
@@ -82,70 +82,70 @@ tables are implemented:
 |`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
-`table-responsive` is to applied. For specific (Bootstrap) breakpoints, the
-classes `table-responsive{-sm\|-md\|-lg\|-xl}` are available to have better
+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
 scales down and should fit the cells automatically. The default text size for
-J1 is `r-text-300`.
+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
-default, but in combination with the CSS class `table-responsive` (Bootstrap),
+|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`
-|The style `table-responsive-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{-sm\|-md\|-lg\|-xl}`
-are available to have better control on what viewport sizes tables are
-being transformed. The class `table-responsive-stacked` is using the breakpoint
-at *768px* what is the same as `table-responsive-stacked-md`
+|`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
+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`
 |===============================================================================
 [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
-table approach (`table-responsive`).
+The styles for F *and* S Tables can be combined with the *Bootstrap* responsive
+table approach (`table-responsive-stacked-lg`).
 ====
-To see the transformation o table in action, resize for desktop devices the
-browser window or use a device the viewport is smaller than 768px (mobiles or
+To see the transformation o table in action, resize for desktop devices the
+browser window or use a device the viewport is smaller than 768px (mobiles or
 tablets).
 == 2-column Table
 Tables are widely used for documentation pages. Below, simple 2-column tables
-are used to explain some of the Jekyll variables that can be used for
+are used to explain some of the Jekyll variables that can be used for
 templating your content pages.
 === Bootstrap
-Responsive Bootstrap tables support tables to be *scrolled horizontally*
-on smaller viewports. From a specified breakpoint and up, the table will
+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.
 .Bootstrap F Table (fixed font size)
-[cols="6a,6a", options="header", width="100%", role="table-responsive-lg no-r-text mt-3"]
+[cols="6a,6a", options="header", width="100%", role="table-responsive no-r-text mt-3"]
 |===============================================================================
 |Variable |Description
-|`page.content`
+|`page.content`
 |The content of the Page, rendered or un-rendered
 depending upon what Liquid is being processed and what `page` is.
@@ -163,11 +163,11 @@ Post's front matter by specifying a new date/time in the format
 .Bootstrap R Table (responsive text size)
-[cols="6a,6a", options="header", width="100%", role="table-responsive-lg mt-3"]
+[cols="6a,6a", options="header", width="100%", role="table-responsive mt-3"]
 |===============================================================================
 |Variable |Description
-|`page.content`
+|`page.content`
 |The content of the Page, rendered or un-rendered
 depending upon what Liquid is being processed and what `page` is.
@@ -188,7 +188,7 @@ Post's front matter by specifying a new date/time in the format
 |===============================================================================
 |Variable |Description
-|`page.content`
+|`page.content`
 |The content of the Page, rendered or un-rendered
 depending upon what Liquid is being processed and what `page` is.
@@ -207,20 +207,20 @@ 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*
-on smaller viewports. Making any table responsive across all viewports, the
-additonal class `table-responsive` is used. For specific (Bootstrap)
-breakpoints, the classes `table-responsive{-sm|-md|-lg|-xl}` are available
-to have better control on what viewport sizes table are transformed.
-From a specified breakpoint and up, the table will behave normally and do
+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
+to have better control on what viewport sizes table are transformed.
+From a specified breakpoint and up, the table will behave normally and do
 not scroll horizontally.
-NOTE: Bootstrap responsive tables make use of overflow-y: hidden, which
+NOTE: Bootstrap responsive tables make use of overflow-y: hidden, which
 clips off any content that goes beyond the bottom or top edges of the table.
 In particular, this can clip off dropdown menus and other third-party widgets.
 .Bootstrap R Table (fixed text size)
-[cols="2,2,2,3,3", options="header", width="100%", role="no-r-text table-responsive-lg mt-3"]
+[cols="2,2,2,3,3", options="header", width="100%", role="no-r-text table-responsive-stacked-lg mt-3"]
 |===============================================================================
 |Parameter |Type |Default |Description |Example
@@ -274,8 +274,8 @@ the form `#RRGGBB`
 == Whats next
 Hopefully you've enjoyed exploring all the possibilities J1 offers sofar.
-An interesting feature may using themes. But much, much more can the J1 do
+An interesting feature may using themes. But much, much more can the J1 do
 for your Web Site.
-Check out what themes can do. Have a look at link:{roundtrip-themes}[BS themes]
+Check out what themes can do. Have a look at link:{roundtrip-themes}[BS themes]
 feature!