j1-template 2022.5.1 → 2022.5.2

data/lib/starter_web/pages/public/learn/roundtrip/{100_present_images.adoc → present_images.adoc}

@@ -21,13 +21,13 @@ resources:                              [
                                           masterslider, rouge
                                         ]
 resource_options:
+
   - attic:
+
       slides:
 
         - url:                          /assets/images/pages/roundtrip/images-1920x1280-bw.jpg
           alt:                          Photo by Ricardo Gomez Angel on Unsplash
-          title:                        Roundtrip
-          tagline:                      present images
           badge:
             type:                       unsplash
             author:                     Ricardo Gomez Angel
@@ -100,7 +100,7 @@ Both lightboxes are fully integrated to be used as standalone modules or
 used as helpers *under-the-hood* by other apps or modules focussing on
 image-data like gallery or carousel, the build-in carousel module.
 
-== Lightbox block Examples
+== Lightbox block examples
 
 Find below an example of using the lightbox Lightbox standalone. See how
 single (individual) images are linked for use with Lightbox.
@@ -114,7 +114,7 @@ see how Lightbox manages a group of images.
 .Lightbox block for grouped images
 lightbox::example-group[ 395, {data-images-group}, group, role="mb-4 wm-800" ]
 
-=== LightGallery Example
+=== LightGallery example
 
 LightGallery provides more complex functions on image data. The module
 supports a gallery-style thumbnail preview plus image resizing, a download
@@ -141,7 +141,7 @@ A slider or carousel is typically used for displaying images. Still, the
 implementation for the J1 Template supports a lot more sources to be
 displayed as a slide show: simple text, for example.
 
-.Carousel Example
+.Carousel example
 carousel::demo_text_carousel[role="mb-3"]
 
 Important statements or topics can be placed, e.g., on top of an article or
@@ -157,7 +157,7 @@ slide show may be interesting. Image-based slide shows may draw off the
 reader's attention from the text, therefore a pure text-based presentation
 maybe the better choice.
 
-.Carousel Example
+.Carousel example
 carousel::demo_text_carousel_parallax[role="mb-3"]
 
 Parallax text shows can be placed as banners on a page. For text shows,
@@ -178,7 +178,7 @@ data.
 A simple image show is useful, for example, as an animated (or not animated)
 banner presenting exciting things about your site or the products offered.
 
-.Carousel Example
+.Carousel example
 carousel::demo_simple[role="mb-3"]
 
 === Carousel + Caption + Lightbox
@@ -188,7 +188,7 @@ This example shows some pictures having individual caption text and supports
 a lightbox to enlarge images full size. For the example below, an almost simple
 lightbox is used: Lightbox V2; or short: lightbox.
 
-.Carousel Example
+.Carousel example
 carousel::demo_cats[role="mb-3"]
 
 The J1 module lightbox is a simple Lightbox but offers a bunch of impressive
@@ -203,7 +203,7 @@ Here you find an example of a single image slide show with controls enabled
 to browse all images back and forth. An indicator below the slider shows how
 many images the show contains.
 
-.Carousel Example
+.Carousel example
 carousel::demo_oneslide[role="mb-3"]
 
 == J1 Master Slider
@@ -305,7 +305,7 @@ layout. It works by placing elements in an optimal position based on available
 horizontal and vertical space. Sort of like mason fitting stones in a wall.
 You'll have seen it in use all over the Internet!
 
-.JustifiedGallery Example
+.JustifiedGallery example
 gallery::jg_customizer[role="mb-4"]
 
 == What next

data/lib/starter_web/pages/public/learn/roundtrip/{600_quicksearch.adoc → quicksearch.adoc}

@@ -20,18 +20,17 @@ fab_menu_id:                            page_ctrl
 permalink:                              /pages/public/learn/roundtrip/quicksearch/
 regenerate:                             false
 
-resources:                              [ animate, lunr, rouge, lightbox, clipboard ]
+resources:                              [ animate, clipboard, lightbox, rouge ]
 resource_options:
+
   - toccer:
       collapseDepth:                    3
 
   - attic:
-      slides:
 
-        - url:                          /assets/images/modules/attics/banner/lunr-banner-1280x800.jpg
+      slides:
+        - url:                          /assets/images/modules/attics/lunr-1280x800.jpg
           alt:                          Lunr
-          title:                        Roundtrip
-          tagline:                      full text search
 ---
 
 // Page Initializer
@@ -294,7 +293,7 @@ searches.
 
 .Available fields (all documents)
 [cols="3a,3a,6a, options="header", width="100%", role="rtable mt-3"]
-|===============================================================================
+|===
 |Name |Value |Description\|Example\|s
 
 |`title`
@@ -333,7 +332,7 @@ summary what the document is all about.
 Example\|s: QuickSearch is based on the search engine Lunr, fully integrated
 with J1 Template  ...
 
-|===============================================================================
+|===
 
 
 ////

data/lib/starter_web/pages/public/learn/roundtrip/{420_responsive_tables_extensions.adoc → responsive_tables_extensions.adoc}

@@ -4,7 +4,7 @@ tagline:                                responsive tables
 date:                                   2020-11-09 00:00:00
 description: >
                                         Creating a design for responsive tables is challenging. The approach used by
-                                        J1 Template is based on pure CSS on top of the classic Bootstrap styles for
+                                        J1 Template is based on pure CSS styles on top of the classic Bootstrap tags for
                                         simplicity and portability to be viewed best on all devices and browsers.
 
 categories:                             [ Roundtrip ]
@@ -12,20 +12,21 @@ tags:                                   [ Introduction, Bootstrap, Table, Extens
 
 flowtext:                               false
 fab_menu_id:                            page_ctrl
+scrollbar:                              true
 
 permalink:                              /pages/public/learn/roundtrip/responsive_tables/
-regenerate:                             false
+regenerate:                             true
 
-resources:                              [ animate, rouge ]
+resources:                              [ animate, clipboard, lightbox, rouge ]
 resource_options:
+
   - attic:
       opacity:                          0.7
+
       slides:
 
         - url:                          /assets/images/pages/roundtrip/tables-1920x1280-bw.jpg
           alt:                          Photo by Markus Spiske on Unsplash
-          title:                        Roundtrip
-          tagline:                      responsive tables
           badge:
             type:                       unsplash
             author:                     Markus Spiske
@@ -58,23 +59,23 @@ resource_options:
 // -----------------------------------------------------------------------------
 [role="dropcap"]
 Creating a design for responsive tables is challenging. The approach used by
-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.
+J1 Template is based on pure CSS styles on top of the classic Bootstrap tags
+for simplicity and portability to be best viewed on all devices and browsers.
 
 == Table types
 
-But, for sure, the solution provided is a compromise. To fit the everyday needs
-for tables viewed on desktop and mobile devices, three types of responsive
-tables are implemented:
+But, for sure, the solutions provided are a compromise. To fit the everyday
+needs for tables viewed on desktop and mobile devices, two types of
+*responsive* tables are implemented by J1 Template:
 
 .Types of responsive tables
-[cols="3a,3a,6a", options="header", width="100%", role="table-responsive mt-3"]
+[cols="3a,3a,6a", options="header", width="100%", role="rtable mt-4"]
 |===
 |Type |Style |Description
 
-|J Table (default)
-|`r-text-xxx`
-|J Tables are used by J1 Template for default. Those tables are using the
+|R Table (J1)
+|`rtable`
+|J Table are used by J1 Template for default. Those tables are using the
 *responsive text* feature (see link:{url-roundtrip--typography}[Typography])
 with no additional CSS classes to be applied. For smaller viewports, the text
 scales down and should fit the cells automatically. The default text size for
@@ -84,25 +85,10 @@ J1 is `r-text-300`.
 |`table-responsive`
 |If adding the class `table-responsive`, it creates a responsive table based
 on Bootstrap CSS styles. The table will then scroll horizontally on small
-devices. Making any table responsive across *all* viewports, the additional
+devices. Making any table responsive across all viewports, the additional
 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.
-
-|F Table (fixed)
-|`no-rtext`
-|If the responsive text feature from J1 is *not* wanted, the CSS class
-`no-rtext` is to be applied. J tables are *not* responsive per default,
-but in combination with the CSS class `table-responsive{-sm|-md|-lg|-xl`
-from Bootstrap, this type behaves like classic Bootstrap responsive tables
-(see above) but *no* responsive text is used.
-
-|R Tables (stacked)
-|`rtable`
-|The style `rtable` *rebuilds* a table. The header is set to invisible, and
-all columns get vertically *stacked as rows*. The rebuild of responsive
-tables takes effect if the viewport (window size) is smaller than 992px for
-the width (x-axis); typical for small devices like tablets or mobiles.
+the classes `table-responsive-{lg \| sm \| md \| lg \| xl}` are available to
+have better control on what viewport sizes tables are being transformed.
 
 |===
 
@@ -119,21 +105,30 @@ pages.
 === Bootstrap tables
 
 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.
+viewports. From a specified breakpoint and up, the table will behave
+normally and do not scroll horizontally.
 
-.Example, Bootstrap using fixed text size `no-rtext`
-[source, no_theme, role="noclip"]
+.Bootstrap using fixed text size `no-rtext`
+[source, asciidoc, role="noclip"]
 ----
-[cols="6,6", options="header", width="100%", role="table-responsive no-rtext"]
+[cols="4a,8a", options="header", width="100%", role="table-responsive-md no-rtext"]
 |===
 |Variable |Description
+
+|`page.content`
+|The content of the Page, rendered or un-rendered
+depending upon what Liquid is being processed and what `page` is.
+
+|`page.title`
+|The title of the Page.
+
 ...
+
 |===
 ----
 
 .Bootstrap, fixed text size `no-rtext`
-[cols="6a,6a", options="header", width="100%", role="table-responsive no-rtext mt-3"]
+[cols="4a,8a", options="header", width="100%", role="table-responsive-md no-rtext mt-4"]
 |===
 |Variable |Description
 
@@ -153,18 +148,24 @@ Post's front matter by specifying a new date/time in the format
 
 |===
 
-.Example, Bootstrap using responsive text size
-[source, no_theme, role="noclip"]
+.Bootstrap using responsive text size
+[source, asciidoc, role="noclip"]
 ----
-[cols="6,6", options="header", width="100%", role="table-responsive"]
+[cols="4a,8a", options="header", width="100%", role="table-responsive-md"]
 |===
 |Variable |Description
+
+|`page.content`
+|The content of the Page, rendered or un-rendered
+depending upon what Liquid is being processed and what `page` is.
+
 ...
+
 |===
 ----
 
 .Bootstrap, responsive text size
-[cols="6a,6a", options="header", width="100%", role="table-responsive mt-3"]
+[cols="4a,8a", options="header", width="100%", role="table-responsive mt-4"]
 |===
 |Variable |Description
 
@@ -190,18 +191,24 @@ Post's front matter by specifying a new date/time in the format
 Responsive tables *rebuild* a table. The header is set to invisible, and
 all columns get vertically *stacked as rows*.
 
-.Example, R Table using responsive text size
-[source, no_theme, role="noclip"]
+.R Table using responsive text size
+[source, asciidoc, role="noclip"]
 ----
-[cols="6,6", options="header", width="100%", role="rtable"]
+[cols="4a,8a", options="header", width="100%", role="rtable"]
 |===
 |Variable |Description
+
+|`page.content`
+|The content of the Page, rendered or un-rendered
+depending upon what Liquid is being processed and what `page` is.
+
 ...
+
 |===
 ----
 
 .R Table, responsive text size
-[cols="6a,6a", options="header", width="100%", role="rtable mt-3"]
+[cols="4a,8a", options="header", width="100%", role="rtable mt-4"]
 |===
 |Variable |Description
 
@@ -221,18 +228,24 @@ Post's front matter by specifying a new date/time in the format
 
 |===
 
-.Example, R Table using fixed font size
-[source, no_theme, role="noclip"]
+.R Table using fixed font size
+[source, asciidoc, role="noclip"]
 ----
-[cols="6,6", options="header", width="100%", role="rtable no-rtext"]
+[cols="4a,8a", options="header", width="100%", role="rtable no-rtext"]
 |===
 |Variable |Description
+
+|`page.content`
+|The content of the Page, rendered or un-rendered
+depending upon what Liquid is being processed and what `page` is.
+
 ...
+
 |===
 ----
 
 .R Table, stacked, fixed text size `no-rtext`
-[cols="6a,6a", options="header", width="100%", role="rtable no-rtext mt-3"]
+[cols="4a,8a", options="header", width="100%", role="rtable no-rtext mt-4"]
 |===
 |Variable |Description
 
@@ -257,23 +270,23 @@ Post's front matter by specifying a new date/time in the format
 
 Responsive Bootstrap tables support tables to be scrolled horizontally
 on smaller viewports. Making any table responsive across all viewports,
-the additional class `rtable` is used. For specific (Bootstrap)
-breakpoints, the classes `rtable{-sm|-md|-lg|-xl}` are available
-to better control over what viewport sizes table are transformed.
-From a specified breakpoint and up, the table will behave normally and do
-not scroll horizontally.
+the additional class `table-responsive` is used. For specific (Bootstrap)
+breakpoints, the classes `table-responsive-{ sm | md | lg |xl}` are
+available to better control over what viewport sizes table are transformed.
+From a specified breakpoint and up, the table will behave normally
+and do not scroll horizontally.
 
 === Bootstrap tables
 
-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.
+Bootstrap responsive tables make use of the CSS `overflow-x: auto`, 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.
 
-.Example, Bootstrap using fixed text size `no-rtext`
-[source, no_theme, role="noclip"]
+.Bootstrap using fixed text size `no-rtext`
+[source, asciidoc, role="noclip"]
 ----
-[cols=",,,,", options="header", width="100%", role="table-responsive no-rtext"]
+[cols=",,,,", options="header", width="100%", role="table-responsive-lg no-rtext" mt-4"]
 |===
 |Parameter |Type |Default |Description |Example
 ...
@@ -281,7 +294,7 @@ widgets.
 ----
 
 .Bootstrap, fixed text size `no-rtext`
-[cols="2,2,2,3,3", options="header", width="100%", role="table-responsive no-rtext mt-3"]
+[cols="2a,2a,2a,3a,3a", options="header", width="100%", role="table-responsive-lg no-rtext mt-4"]
 |===
 |Parameter |Type |Default |Description |Example
 
@@ -305,8 +318,8 @@ the form `#RRGGBB`
 
 |===
 
-.Example, Bootstrap using responsive text size
-[source, no_theme, role="noclip"]
+.Bootstrap using responsive text size
+[source, asciidoc, role="noclip"]
 ----
 [cols=",,,,", options="header", width="100%", role="table-responsive"]
 |===
@@ -316,7 +329,7 @@ the form `#RRGGBB`
 ----
 
 .Bootstrap, responsive text size
-[cols="2,2,2,3,3", options="header", width="100%", role="table-responsive mt-3"]
+[cols="2a,2a,2a,3a,3a", options="header", width="100%", role="table-responsive mt-4"]
 |===
 |Parameter |Type |Default |Description |Example
 
@@ -342,18 +355,18 @@ the form `#RRGGBB`
 
 === Responsive tables
 
-.Example, R Table using fixed text size `no-rtext`
-[source, no_theme, role="noclip"]
+.R Table using fixed text size `no-rtext`
+[source, asciidoc, role="noclip"]
 ----
-[cols=",,,,", options="header", width="100%", role="rtable no-rtext"]
+[cols="2a,2a,2a,3a,3a", options="header", width="100%", role="rtable no-rtext mt-4"]
 |===
 |Parameter |Type |Default |Description |Example
 ...
 |===
 ----
 
-.R Table, fixed text size `no-rtext`
-[cols="2,2,2,3,3", options="header", width="100%", role="rtable no-rtext mt-3"]
+.R Table using fixed text size `no-rtext`
+[cols="2a,2a,2a,3a,3a", options="header", width="100%", role="rtable no-rtext mt-4"]
 |===
 |Parameter |Type |Default |Description |Example
 
@@ -377,10 +390,10 @@ the form `#RRGGBB`
 
 |===
 
-.Example, R Table using fixed text size `no-rtext`
-[source, no_theme, role="noclip"]
+.R Table using responsive text size
+[source, asciidoc, role="noclip"]
 ----
-[cols=",,,,", options="header", width="100%", role="rtable no-rtext"]
+[cols="2a,2a,2a,3a,3a", options="header", width="100%", role="rtable mt-4"]
 |===
 |Parameter |Type |Default |Description |Example
 ...
@@ -388,7 +401,7 @@ the form `#RRGGBB`
 ----
 
 .R Table, responsive text size
-[cols="2,2,2,3,3", options="header", width="100%", role="rtable mt-3"]
+[cols="2a,2a,2a,3a,3a", options="header", width="100%", role="rtable mt-4"]
 |===
 |Parameter |Type |Default |Description |Example
 

data/lib/starter_web/pages/public/learn/roundtrip/{500_themes.adoc → themes.adoc}

@@ -19,13 +19,13 @@ regenerate:                             false
 
 resources:                              [ animate, rouge, clipboard, lightbox ]
 resource_options:
+
   - attic:
+
       slides:
 
         - url:                          /assets/images/pages/roundtrip/themes-1920x1280-bw.jpg
           alt:                          Photo by Clem Onojeghuo on Unsplash
-          title:                        Roundtrip
-          tagline:                      themes
           badge:
             type:                       unsplash
             author:                     Clem Onojeghuo

data/lib/starter_web/pages/public/learn/roundtrip/{200_typography.adoc → typography.adoc}

@@ -16,19 +16,19 @@ fab_menu_id:                            page_ctrl
 permalink:                              /pages/public/learn/roundtrip/typography/
 regenerate:                             false
 
-resources:                              [ animate ]
+resources:                              [ animate, rouge, clipboard, lightbox ]
 resource_options:
+
   - attic:
       opacity:                          0.3
+      preload:                          0
+      transitionDuration:               fast
+      resolutionRefreshRate:            500
+
       slides:
 
         - url:                          /assets/images/pages/roundtrip/typography-1920x1280-bw.jpg
           alt:                          Photo by Alice Donovan Rousel on Unsplash
-          title:                        Roundtrip
-          tagline:                      typography
-          preload:                      0
-          transitionDuration:           fast
-          resolutionRefreshRate:        500
           badge:
             type:                       unsplash
             author:                     Alice Donovan Rousel

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

@@ -40,13 +40,13 @@ regenerate:                             false
 
 resources:                              [ animate, comments ]
 resource_options:
+
   - attic:
+
       slides:
 
         - url:                          /assets/images/modules/attics/tldr-1920x800.jpg
           alt:                          Photo by Alexander Redl on Unsplash
-          title:                        Where to go
-          tagline:                      fasten your way
           badge:
             type:                       unsplash
             author:                     Alexander Redl

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

@@ -25,13 +25,14 @@ regenerate:                             false
 
 resources:                              [ animate ]
 resource_options:
+
   - attic:
+      padding_top:                      550
+
       slides:
 
         - url:                          /assets/images/modules/attics/markus-spiske-1920x1280.jpg
           alt:                          Photo by Markus Spiske on Unsplash
-          title:                        Urheberrechte
-          tagline:                      schutz geistigen eigentums
           badge:
             type:                       unsplash
             author:                     Markus Spiske

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

@@ -25,13 +25,14 @@ regenerate:                             false
 
 resources:                              [ animate ]
 resource_options:
+
   - attic:
+      padding_top:                      550
+
       slides:
 
         - url:                          /assets/images/modules/attics/markus-spiske-1920x1280.jpg
           alt:                          Photo by Markus Spiske on Unsplash
-          title:                        Impressum
-          tagline:                      kontakt information
           badge:
             type:                       unsplash
             author:                     Markus Spiske

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

@@ -25,13 +25,14 @@ regenerate:                             false
 
 resources:                              [ animate ]
 resource_options:
+
   - attic:
+      padding_top:                      550
+
       slides:
 
         - url:                          /assets/images/modules/attics/markus-spiske-1920x1280.jpg
           alt:                          Photo by Markus Spiske on Unsplash
-          title:                        Persönliche Daten
-          tagline:                      ihre privatsphäre
           badge:
             type:                       unsplash
             author:                     Markus Spiske

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

@@ -25,13 +25,14 @@ regenerate:                             false
 
 resources:                              [ animate ]
 resource_options:
+
   - attic:
+      padding_top:                      550
+
       slides:
 
         - url:                          /assets/images/modules/attics/leon-1920x1280.jpg
           alt:                          Photo by Leon on Unsplash
-          title:                        Kommentare
-          tagline:                      mit respekt diskutieren
           badge:
             type:                       unsplash
             author:                     Leon

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

@@ -27,13 +27,14 @@ regenerate:                             false
 
 resources:                              [ animate ]
 resource_options:
+
   - attic:
+      padding_top:                      550
+
       slides:
 
         - url:                          /assets/images/modules/attics/markus-spiske-1920x1280.jpg
           alt:                          Photo by Markus Spiske on Unsplash
-          title:                        Copyright
-          tagline:                      software and content
           badge:
             type:                       unsplash
             author:                     Markus Spiske

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

@@ -26,13 +26,14 @@ regenerate:                             false
 
 resources:                              [ animate ]
 resource_options:
+
   - attic:
+      padding_top:                      550
+
       slides:
 
         - url:                          /assets/images/modules/attics/markus-spiske-1920x1280.jpg
           alt:                          Photo by Markus Spiske on Unsplash
-          title:                        Impress
-          tagline:                      legal information
           badge:
             type:                       unsplash
             author:                     Markus Spiske

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

@@ -25,13 +25,14 @@ regenerate:                             false
 
 resources:                              [ animate ]
 resource_options:
+
   - attic:
+      padding_top:                      550
+
       slides:
 
         - url:                          /assets/images/modules/attics/markus-spiske-1920x1280.jpg
           alt:                          Photo by Markus Spiske on Unsplash
-          title:                        Privacy
-          tagline:                      your personal data
           badge:
             type:                       unsplash
             author:                     Markus Spiske

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

@@ -28,13 +28,14 @@ regenerate:                             false
 
 resources:                              [ animate ]
 resource_options:
+
   - attic:
+      padding_top:                      550
+
       slides:
 
         - url:                          /assets/images/modules/attics/leon-1920x1280.jpg
           alt:                          Photo by Leon on Unsplash
-          title:                        Comment Policy
-          tagline:                      discuss with respect
           badge:
             type:                       unsplash
             author:                     Leon