j1-template 2024.3.22 → 2024.3.24

data/lib/starter_web/pages/public/tools/tester/videojs_macro_tester.adoc

@@ -0,0 +1,297 @@
+---
+title:                                  VideoJS over YT
+title_extention:                        Custom progressControlSlider
+tagline:                                Custom progressControlSlider
+
+date:                                   2025-06-05
+last_modified:                          2025-06-08
+
+description: >
+                                        Test the VideoJS ADOC Macro for
+                                        custom AJS progressControlSilder
+keywords: >
+                                        open source, free, template, jekyll,
+                                        jekyllone, web, sites, static, jamstack,
+                                        bootstrap, html, html5, video, support,
+                                        videojs
+
+categories:                             [ Tester ]
+tags:                                   [ Module, VideoJS ]
+
+image:
+  path:                                 /assets/image/module/attic/markus-spiske-1920x1280.jpg
+  width:                                1920
+  height:                               1280
+
+attic:                                  false
+regenerate:                             false
+personalization:                        true
+permalink:                              /pages/public/tester/videojs_yt/
+
+resources:                              [ gallery, lightgallery, videojs ]
+resource_options:
+  - toccer:
+      collapseDepth:                    3
+  - attic:
+      slides:
+        - url:                          /assets/image/module/attic/1920x1280/markus-spiske.jpg
+          alt:                          Photo by Markus Spiske on Unsplash
+          badge:
+            type:                       unsplash
+            author:                     Markus Spiske
+            href:                       https://unsplash.com/de/@markusspiske/ 
+---
+
+// Page Initializer
+// =============================================================================
+// Enable the Liquid Preprocessor
+:page-liquid:
+
+// Attribute settings for section control
+//
+:swiper--features:                      false
+
+// Set (local) page attributes here
+// -----------------------------------------------------------------------------
+// :page--attr:                         <attr-value>
+
+//  Load Liquid procedures
+// -----------------------------------------------------------------------------
+{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
+
+// Load page attributes
+// -----------------------------------------------------------------------------
+{% include {{load_attributes}} scope="global" %}
+
+
+// Page content
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+[role="dropcap"]
+Swiper, the free and most modern mobile touch slider with hardware accelerated
+transitions and amazing native behavior. It is intended to be used in mobile
+websites, mobile web apps, and mobile native/hybrid apps.
+
+// Include sub-documents (if any)
+// -----------------------------------------------------------------------------
+[role="mt-4"]
+== lightGallery (YouTube)
+
+The galley maker *justifiedGallery* in combination with the *lightbox*
+lightGallery is a great toolset for creating dynamic video galleries.
+The module combinati0n makes creating a gallery to access videos easy.
+
+.YouTube Video · justifiedGallery + LightGallery
+gallery::jg_video_youtube_james_and_adele[role="mb-4"]
+
+
+== VideoJS Player over YouTube
+
+lorem:sentences[3]
+
+++++
+<style>
+
+/* -----------------------------------------------------------------------------
+  styles moved to VJS theme uno at: 
+  assets/theme/j1/modules/videojs/css/themes/uno.css
+*/
+
+</style>
+++++
+
+++++
+<div class="video-title">
+  <i class="mdib mdib-video mdib-24px mr-2"></i>
+  The Breathtaking Beauty of Nature
+</div>
+
+<div class="mb-8">
+  <video
+    id="2rtQOsWaAXc"
+    class="video-js vjs-theme-uno"
+    controls
+    width="640"
+    height="360"
+    poster="//img.youtube.com/vi/IUN664s7N-c/maxresdefault.jpg" alt="Beauty of Nature" 
+    aria-label="The Breathtaking Beauty of Nature"
+    data-setup='{
+        "fluid" : true,
+        "techOrder": [
+            "youtube", "html5"
+        ],
+        "sources": [{
+            "type": "video/youtube",
+            "src": "//youtube.com/watch?v=IUN664s7N-c"
+        }],
+        "controlBar": {      
+          "pictureInPictureToggle": false,
+          "volumePanel": {
+              "inline": false
+          }
+        }
+      }'
+  ></video>
+</div>
+++++
+
+++++
+<script>
+
+$(function() {
+  // ===========================================================================
+  // take over VideoJS configuration data (JSON data from Ruby)
+  // ---------------------------------------------------------------------------
+  //
+  const videojsDefaultConfigJson = '{"description":{"title":"J1 VideoJS","scope":"Default settings","location":"_data/modules/defaults/videojs.yml"},"defaults":{"enabled":false,"playbackRates":{"enabled":false,"values":[0.25,0.5,1,1.5,2]},"players":{"youtube":{"autoplay":0,"cc_load_policy":0,"controls":0,"disablekb":1,"enablejsapi":1,"fs":0,"iv_load_policy":3,"loop":0,"modestbranding":1,"rel":0,"showinfo":0,"default_poster":"/assets/image/icon/videojs/videojs-poster.png","poster":"maxresdefault.jpg","end":true,"start":true}},"plugins":{"autoCaption":{"enabled":false},"hotKeys":{"enabled":false,"seekStep":15,"volumeStep":0.1,"alwaysCaptureHotkeys":true,"captureDocumentHotkeys":false,"hotkeysFocusElementFilter":"function () { return false }","enableFullscreen":true,"enableHoverScroll":true,"enableInactiveFocus":true,"enableJogStyle":false,"enableMute":true,"enableModifiersForNumbers":true,"enableNumbers":false,"enableVolumeScroll":true,"skipInitialFocus":false},"skipButtons":{"enabled":false,"surroundPlayButton":false,"backwardIndex":1,"forwardIndex":1,"forward":10,"backward":10},"zoomButtons":{"enabled":false,"moveX":0,"moveY":0,"rotate":0,"zoom":1}}}}';
+
+  const videojsUserConfigJson = '{"description":{"title":"J1 VideoJS","scope":"User settings","location":"_data/modules/videojs.yml"},"settings":{"enabled":true,"playbackRates":{"enabled":true},"plugins":{"hotKeys":{"enabled":false,"enableInactiveFocus":false},"skipButtons":{"enabled":true,"surroundPlayButton":true},"zoomButtons":{"enabled":false}}}}';
+
+  // ===========================================================================
+  // create config objects from JSON data
+  // ---------------------------------------------------------------------------
+  const videojsDefaultSettings  = JSON.parse(videojsDefaultConfigJson);
+  const videojsUserSettings     = JSON.parse(videojsUserConfigJson);
+  const videojsConfig           = $.extend(true, {}, videojsDefaultSettings.defaults, videojsUserSettings.settings);
+
+  // ===========================================================================
+  // VideoJS player settings
+  // ---------------------------------------------------------------------------
+  const vjsPlayerType           = 'ytp';
+  const vjsPlaybackRates        = videojsConfig.playbackRates.values;
+
+  // ===========================================================================
+  // VideoJS plugin settings
+  // -----------------------------------------------------------------
+  const piAutoCaption           = videojsConfig.plugins.autoCaption;
+  const piHotKeys               = videojsConfig.plugins.hotKeys;
+  const piSkipButtons           = videojsConfig.plugins.skipButtons;
+  const piZoomButtons           = videojsConfig.plugins.zoomButtons;
+
+  // ===========================================================================
+  // helper functions
+  // ---------------------------------------------------------------------------
+  function addCaptionAfterImage(imageSrc) {
+    const image = document.querySelector(`img[src="${imageSrc}"]`);
+
+    if (image) {
+      // create div|caption container
+      const newDiv = document.createElement('div');
+      newDiv.classList.add('caption');
+      newDiv.textContent = 'The Breathtaking Beauty of Nature';
+
+      // insert div|caption container AFTER the image
+      image.parentNode.insertBefore(newDiv, image.nextSibling);
+    } else {
+      console.error(`No image found at: ${imageSrc}`);
+    }
+  }
+
+  // ===========================================================================
+  // initialize the VideoJS player (on page ready)
+  // ---------------------------------------------------------------------------
+  var dependencies_met_page_ready = setInterval(function(options) {
+    var pageState       = $('#content').css("display");
+    var pageVisible     = (pageState == 'block') ? true : false;
+    var j1CoreFinished  = (j1.getState() === 'finished') ? true : false;
+
+    if (j1CoreFinished && pageVisible) {
+      const vjs_player  = document.getElementById("2rtQOsWaAXc");
+
+      // add captions (on poster image)
+      addCaptionAfterImage('//img.youtube.com/vi/IUN664s7N-c/maxresdefault.jpg');
+
+      // scroll page to the players top position
+      // -----------------------------------------------------------------------
+      vjs_player.addEventListener('click', function(event) {
+        const targetDiv         = document.getElementById("2rtQOsWaAXc");
+        const targetDivPosition = targetDiv.offsetTop;
+        const scrollOffset      = (window.innerWidth >= 720) ? -130 : -110;
+
+        // scroll player to top position
+        window.scrollTo(0, targetDivPosition + scrollOffset);
+      });// END EventListener 'click'
+
+      clearInterval(dependencies_met_page_ready);
+    }
+  }, 10);
+
+  // customize the yt player created
+  // ---------------------------------------------------------------------------
+  var dependencies_met_vjs_player_exist = setInterval(function(options) {
+    var vjsPlayerExist = document.getElementById("2rtQOsWaAXc") ? true : false;
+
+    if (vjsPlayerExist) {
+
+      // apply player customization on 'player ready'
+      videojs("2rtQOsWaAXc").ready(function() {
+        const vjsPlayer = this;
+
+        // create customControlContainer for progressControlSilder|time (display) elements
+        const customProgressContainer = vjsPlayer.controlBar.addChild('Component', {
+          el: videojs.dom.createEl('div', {
+            className: 'vjs-theme-uno custom-progressbar-container'
+          })
+        });
+
+        // move progressControlSlider into customControlContainer
+        const progressControlSlider = vjsPlayer.controlBar.progressControl;
+        if (progressControlSlider) {
+          customProgressContainer.el().appendChild(progressControlSlider.el());
+        }
+
+        // move currentTimeDisplay BEFORE the progressControlSilder
+        const currentTimeDisplay = vjsPlayer.controlBar.currentTimeDisplay;
+        if (currentTimeDisplay) {
+          customProgressContainer.el().insertBefore(currentTimeDisplay.el(), progressControlSlider.el());
+        }
+
+        // move the durationDisplay AFTER the progressControlSilder
+        const durationDisplay = vjsPlayer.controlBar.durationDisplay;
+        if (durationDisplay) {
+          customProgressContainer.el().appendChild(durationDisplay.el());
+        }
+
+        // add|skip playbackRates
+        if (videojsConfig.playbackRates.enabled) {
+          vjsPlayer.playbackRates(vjsPlaybackRates);
+        }
+
+        // add|skip skipButtons plugin
+        if (piSkipButtons.enabled) {
+          var backwardIndex = piSkipButtons.backward;
+          var forwardIndex  = piSkipButtons.forwardIndex;
+
+          // property 'surroundPlayButton' takes precendence
+          if (piSkipButtons.surroundPlayButton) {
+              var backwardIndex = 0;
+              var forwardIndex  = 1;
+          }
+
+          vjsPlayer.skipButtons({
+            backwardIndex: backwardIndex,
+            forwardIndex: forwardIndex,
+            backward: piSkipButtons.backward,
+            forward: piSkipButtons.forward,
+          });
+        }
+
+        // set start position of current video (on play)
+        // ---------------------------------------------------------------------
+        var appliedOnce = false;
+        vjsPlayer.on("play", function() {
+          var startFromSecond = new Date('1970-01-01T' + "00:00:00" + 'Z').getTime() / 1000;
+          if (!appliedOnce) {
+              vjsPlayer.currentTime(startFromSecond);
+              appliedOnce = true;
+          }
+        });
+
+      }); // eventListener on 'player ready'
+
+      clearInterval(dependencies_met_vjs_player_exist);
+    } // END if 'vjsPlayerExist'
+  }, 10); // END 'dependencies_met_vjs_player_exist'
+}); // END 'document ready'
+
+</script>
+++++

data/lib/starter_web/pages/public/tour/_includes/attributes.asciidoc

@@ -99,8 +99,7 @@ end::tags[]
 // -----------------------------------------------------------------------------
 tag::data[]
 
-:data-images--themes-menu:                        "assets/image/page/tour/themes-1920x1280.jpg, Themes menu (Bootswatch)"
-:data-images--styles-menu:                        "assets/image/page/tour/styles-menu-1280x800.jpg, Styles menu (Bootswatch)"
+:data-images--bootswatch-themes:                  "assets/image/page/tour/bootswatch-themes.jpg, Bootswatch Themes"
 
 :data-quicksearch--icon:                          "assets/image/page/tour/600_quicksearch/quicksearch_icon.jpg, Search button (magnifier) in the quick access area"
 :data-quicksearch--input:                         "assets/image/page/tour/600_quicksearch/quicksearch_input.jpg, Input bar for a QuickSearch"

data/lib/starter_web/pages/public/tour/_includes/documents/themes_bootstrap.asciidoc

@@ -15,7 +15,7 @@ link:{url-w3schools--css-tutorial}[Design base, {browser-window--new}] of each
 and every website.
 
 .Theme menu (Bootswatch)
-lightbox::images--themes-menu[ 1280, {data-images--themes-menu} ]
+lightbox::data-images--themes-menu[1280, {data-images--themes-menu}]
 
 Thanks to the people at link:{url-bootswatch--home}[Bootswatch, {browser-window--new}],
 a great set of already prepared Bootstrap stylesheets in various designs are

data/lib/starter_web/pages/public/tour/asciidoc_extensions.adoc

@@ -20,7 +20,7 @@ categories:                             [ Roundtrip ]
 tags:                                   [ Asciidoc, Extension ]
 
 image:
-  path:                                 /assets/image/page/tour/puzzle-1920x1280-bw.jpg
+  path:                                 /assets/image/module/attic/1920x1280/martin-sanchez.jpg
   width:                                1920
   height:                               1280
 
@@ -36,8 +36,12 @@ resources:                              [
 resource_options:
   - attic:
       slides:
-        - url:                          /assets/image/page/tour/puzzle-1920x1280-bw.jpg
-          alt:                          puzzle-1920x1280-bw
+        - url:                          /assets/image/module/attic/1920x1280/martin-sanchez.jpg
+          alt:                          Photo by Martin Sanchez on Unsplash
+          badge:
+            type:                       unsplash
+            author:                     BP Miller
+            href:                       //unsplash.com/de/@bp_miller
 ---
 
 // Page Initializer

data/lib/starter_web/pages/public/tour/bootstrap_themes.adoc

@@ -1,7 +1,7 @@
 ---
 title:                                  Themes
 title_extention:                        Bootstrap V5 Themes
-tagline:                                Individual Bootstrap Styles
+tagline:                                Individual Style
 
 date:                                   2020-11-10
 #last_modified:                         2023-01-01
@@ -21,7 +21,7 @@ categories:                             [ Roundtrip ]
 tags:                                   [ Bootstrap, Module, Theme ]
 
 image:
-  path:                                 /assets/image/module/attic/themes-1920x1280-bw.jpg
+  path:                                 /assets/image/module/attic/1920x1280/stories-ink-tattoo-care.jpg
   width:                                1920
   height:                               1280
 
@@ -32,12 +32,12 @@ resources:                              [ lightbox ]
 resource_options:
   - attic:
       slides:
-        - url:                          /assets/image/module/attic/themes-1920x1280-bw.jpg
-          alt:                          Photo by Clem Onojeghuo on Unsplash
+        - url:                          /assets/image/module/attic/1920x1280/stories-ink-tattoo-care.jpg
+          alt:                          Photo by Stories & Ink Tattoo Care on Unsplash
           badge:
             type:                       unsplash
-            author:                     Clem Onojeghuo
-            href:                       //unsplash.com/@clemono
+            author:                     Stories & Ink Tattoo Care
+            href:                       https://unsplash.com/de/@storiesandink
 ---
 
 // Page Initializer
@@ -84,9 +84,64 @@ defined CSS classes in Bootstrap to customize a layout individually.
 </div>
 ++++
 
+
 // Include sub-documents (if any)
 // -----------------------------------------------------------------------------
-include::{documentdir}/themes_bootstrap.asciidoc[]
+[role="mt-5"]
+== The Themes
+
+Styles adjust the website's appearance based on the CSS rules and definitions
+of Bootstrap. Styles do not change the framework's functionality but modify
+rule-based, e.g., the color scheme, fonts, sizes, or the appearance of more
+complex elements like forms or tables. Additionally, a style may add additional
+components to extend the Bootstrap's framework.
+
+Modifying the CSS styles of link:{url-bs--home}[Bootstrap, {browser-window--new}]
+is not rocket science. But, to be honest, some knowledge is needed for the
+link:{url-w3org--css-spec}[CSS technology, {browser-window--new}] to do so.
+I encourage you to spend some time on learning CSS, the
+link:{url-w3schools--css-tutorial}[Design base, {browser-window--new}] of each
+and every website.
+
+.Bootswatch Themes (Examples)
+lightbox::bootswatch-themes[1280, {data-images--bootswatch-themes}]
+
+Thanks to the people at link:{url-bootswatch--home}[Bootswatch, {browser-window--new}],
+a great set of already prepared Bootstrap stylesheets in various designs are
+available on their website; no need to start from scratch. It is not
+required to re-define all the Bootstrap variables and rebuild the framework.
+Many different styles are available. What is already available at Bootswatch
+is at least a good base for your modifications -- your unique design.
+
+Besides the bunch of different stylesheets at *Bootswatch*, an
+link:{url-bootswatch--api}[Integration API, {browser-window--new}] is provided
+that helps a lot to make designs available for an existing site. This API
+is the base to integrate selectable Bootswatch stylesheets into the J1 Template
+navigation system.
+
+[role="mt-4"]
+=== Apply a Style
+
+The base for designing pages using the J1 Template is the style Uno, a modern
+light or dark CSS layout used for many types of websites. What I mentioned
+already, web design is not: one size fits all. The style Uno can be seen as
+a good base, a starting point. Combining Uno and a different styles may be
+a fast solution for your site!
+
+You can find all available stylesheets to be applied on your pages from the
+*Themes* menu. You're invited to check how a page is changing for its design
+if a different stylesheet for web design is used.
+
+[WARNING]
+====
+For changing from one style to the next at *runtime*, the current
+version of the J1 Template system tries add new styles to J1 specific
+components like fonts, headlines, lists or paragraphs. Changing the style
+will work for the most *common* elements, but *not all* of them for now.
+====
+
+Select a style from the *Themes* menu, and the new BS-based stylesheet is
+automatically applied to all pages of your website.
 
 
 [role="mt-5"]

data/lib/starter_web/pages/public/tour/icon_fonts.adoc

@@ -1,7 +1,7 @@
 ---
 title:                                  Icon Fonts
 title_extention:                        Icons for J1 Template
-tagline:                                Popular Icons for Your Web
+tagline:                                Icons for Your Web
 
 date:                                   2020-11-06
 #last_modified:                         2023-01-01
@@ -20,7 +20,7 @@ categories:                             [ Roundtrip ]
 tags:                                   [ Module, Icon ]
 
 image:
-  path:                                 assets/image/page/tour/icon-fonts-1920x1280-bw.jpg
+  path:                                 /assets/image/module/attic/1920x1280/material_symbols.jpg
   width:                                1920
   height:                               1280
 
@@ -31,12 +31,8 @@ resources:                              [ iconify ]
 resource_options:
   - attic:
       slides:
-        - url:                          /assets/image/page/tour/icon-fonts-1920x1280-bw.jpg
-          alt:                          Photo by Harpal Singh on Unsplash
-          badge:
-            type:                       unsplash
-            author:                     Harpal Singh
-            href:                       //unsplash.com/@aquatium
+        - url:                          /assets/image/module/attic/1920x1280/material_symbols.jpg
+          alt:                          Material Design Symbols
 ---
 
 // Page Initializer

data/lib/starter_web/pages/public/tour/modal_extentions.adoc

@@ -21,7 +21,7 @@ categories:                             [ Roundtrip ]
 tags:                                   [ Bootstrap, Modal, Extension ]
 
 image:
-  path:                                 /assets/image/page/tour/bootstrap-1920x1000-bw.jpg
+  path:                                 /assets/image/module/attic/1920x1280/bootstrap-modal.jpg
   width:                                1920
   height:                               1280
 
@@ -32,7 +32,7 @@ resources:                              []
 resource_options:
   - attic:
       slides:
-        - url:                          /assets/image/page/tour/bootstrap-1920x1000-bw.jpg
+        - url:                          /assets/image/module/attic/1920x1280/bootstrap-modal.jpg
           alt:                          Bootstrap Framework Logo
 ---
 

data/lib/starter_web/pages/public/tour/responsive_tables.adoc

@@ -1,7 +1,7 @@
 ---
 title:                                  Responsive Tables
 title_extention:                        Responsive tables for J1 Template
-tagline:                                Tables viewed best
+tagline:                                Present tables at its best
 
 date:                                   2020-11-09
 #last_modified:                         2023-01-01
@@ -30,12 +30,12 @@ resources:                              []
 resource_options:
   - attic:
       slides:
-        - url:                          /assets/image/page/tour/tables-1920x1280-bw.jpg
-          alt:                          Photo by Markus Spiske on Unsplash
+        - url:                          /assets/image/module/attic/1920x1280/towfiqu-barbhuiya.jpg
+          alt:                          Photo by Towfiqu barbhuiya on Unsplash
           badge:
             type:                       unsplash
-            author:                     Markus Spiske
-            href:                       //unsplash.com/@markusspiske/portfolio
+            author:                     Towfiqu barbhuiya
+            href:                       https://unsplash.com/de/@towfiqu999999
 ---
 
 // Page Initializer
@@ -89,7 +89,7 @@ a compromise. To fit the everyday needs for tables, viewed well on desktop
 and mobile devices, two types of *responsive* tables are implemented by the
 J1 Template system:
 
-.Types of responsive tables
+.Types of Responsive Tables
 [cols="3a,3a,6a", options="header", width="100%", role="rtable mt-4"]
 |===
 |Style |Type |Description
@@ -123,7 +123,7 @@ tablets.
 
 
 [role="mt-5"]
-== Bootstrap Tables
+== Bootstrap Tables (striped)
 
 Tables are widely used for documentation pages. Below, simple 2-column tables
 are used to explain some of the Jekyll variables for templating your content
@@ -140,7 +140,7 @@ normally and do not scroll horizontally.
 .Bootstrap using fixed text size `no-rtext`
 [source, asciidoc, role="noclip"]
 ----
-[cols="4a,8a", options="header", width="100%", role="table-responsive-md no-rtext"]
+[cols="4a,8a", options="header", width="100%", role="table-striped table-responsive-md no-rtext"]
 |===
 |Variable |Description
 
@@ -157,7 +157,7 @@ depending upon what Liquid is being processed and what `page` is.
 ----
 
 .Bootstrap, fixed text size `no-rtext`
-[cols="4a,8a", options="header", width="100%", role="table-responsive-md no-rtext mt-4"]
+[cols="4a,8a", options="header", width="100%", role="table-striped table-responsive-md no-rtext mt-4"]
 |===
 |Variable |Description
 
@@ -184,7 +184,7 @@ Post's front matter by specifying a new date/time in the format
 .Bootstrap using responsive text size
 [source, asciidoc, role="noclip"]
 ----
-[cols="4a,8a", options="header", width="100%", role="table-responsive-md"]
+[cols="4a,8a", options="header", width="100%", role="table-striped table-responsive-md"]
 |===
 |Variable |Description
 
@@ -198,7 +198,7 @@ depending upon what Liquid is being processed and what `page` is.
 ----
 
 .Bootstrap, responsive text size
-[cols="4a,8a", options="header", width="100%", role="table-responsive mt-4"]
+[cols="4a,8a", options="header", width="100%", role="table-striped table-responsive mt-4"]
 |===
 |Variable |Description
 
@@ -219,7 +219,8 @@ Post's front matter by specifying a new date/time in the format
 |===
 
 [role="mt-4"]
-== Responsive Tables
+[[rtables-striped]]
+== Responsive Tables (striped)
 
 Responsive tables *rebuild* a table. The header is set to invisible, and
 all columns get vertically *stacked as rows*.
@@ -227,7 +228,7 @@ all columns get vertically *stacked as rows*.
 .R Table using responsive text size
 [source, asciidoc, role="noclip"]
 ----
-[cols="4a,8a", options="header", width="100%", role="rtable"]
+[cols="4a,8a", options="header", width="100%", role="table-striped rtable"]
 |===
 |Variable |Description
 
@@ -241,7 +242,7 @@ depending upon what Liquid is being processed and what `page` is.
 ----
 
 .R Table, responsive text size
-[cols="4a,8a", options="header", width="100%", role="rtable mt-4"]
+[cols="4a,8a", options="header", width="100%", role="table-striped rtable mt-4"]
 |===
 |Variable |Description
 
@@ -261,7 +262,12 @@ Post's front matter by specifying a new date/time in the format
 
 |===
 
-.R Table using fixed font size
+
+[role="mt-4"]
+[[rtables-not-striped]]
+== Responsive Tables (NOT striped)
+
+.R Table using fixed font size (no rtext)
 [source, asciidoc, role="noclip"]
 ----
 [cols="4a,8a", options="header", width="100%", role="rtable no-rtext"]

data/lib/starter_web/pages/public/tour/typography.adoc

@@ -20,7 +20,7 @@ categories:                             [ Roundtrip ]
 tags:                                   [ Module, Typography ]
 
 image:
-  path:                                 /assets/image/page/tour/typography-1920x1280-bw.jpg
+  path:                                 /assets/image/module/attic/1920x1280/bp-miller.jpg
   width:                                1920
   height:                               1280
 
@@ -35,12 +35,12 @@ resource_options:
       transitionDuration:               fast
       resolutionRefreshRate:            500
       slides:
-        - url:                          /assets/image/page/tour/typography-1920x1280-bw.jpg
-          alt:                          Photo by Alice Donovan Rousel on Unsplash
+        - url:                          /assets/image/module/attic/1920x1280/bp-miller.jpg
+          alt:                          Photo by BP Miller on Unsplash
           badge:
             type:                       unsplash
-            author:                     Alice Donovan Rousel
-            href:                       //unsplash.com/@alicekat/portfolio
+            author:                     BP Miller
+            href:                       //unsplash.com/de/@bp_miller
 ---
 
 // Page Initializer