j1-template 2024.0.2 → 2024.1.0

data/lib/starter_web/pages/public/learn/roundtrip/present_videos.adoc

@@ -30,7 +30,8 @@ regenerate:                             false
 permalink:                              /pages/public/learn/roundtrip/present_videos/
 
 resources:                              [
-                                          animate, lightgallery, gallery, rouge,
+                                          animate,
+                                          lightgallery, gallery, rouge,
                                           videojs, vimeoplayer
                                         ]
 resource_options:
@@ -151,7 +152,7 @@ video::/assets/videos/gallery/html5/video1.mp4[poster="/assets/videos/gallery/vi
 [role="mt-4"]
 === VideoJS Player
 
-VideoJS is an open-source JavaScript framework and library for building
+VideoJS is an Open Source JavaScript framework and library for building
 custom video players for the web. It provides a flexible and customizable
 platform for displaying and controlling video content on websites and web
 applications.
@@ -167,8 +168,9 @@ YouTube is a popular online video-sharing platform that allows users to
 upload, view, share, and comment on videos. The platform provides services
 for people and organizations to publish various video content.
 
-.Last Carpool Karaoke
-youtube::nV8UZJNBY6Y[poster="/assets/videos/gallery/video_adele_last_carpool_caraoke_poster.1920.jpg" role="mt-4 mb-5"]
+.The Voice Kids NL 2021 - Emma Kok
+youtube::20gXikNRjbo[poster="/assets/videos/gallery/voice_kids_nl_2021/video_poster.jpg" role="mt-4 mb-5"]
+
 
 [role="mt-4"]
 === Dailymotion on VideoJS
@@ -207,13 +209,24 @@ and creative expression.
 vimeo::179528528[role="mt-4 mb-5"]
 
 
-[role="mt-4"]
+[role="mt-5"]
 == Galleries of Video
 
+Video galleries are collections to display videos organized around a specific
+theme, topic, or purpose. The gallery module (lightGallery) for J1 Template is
+a fast, modular, and responsive plugin to create beautiful-looking, featured
+image and video galleries.
+
+Find below examples of video galleries of locally stored (MP4) video resources
+and video content provided online via YouTube.
+
+[role="mt-4"]
+=== Local Video
+
 Videos created by a digicam or a mobile can be played by J1 Template using
 the lightGallery integration. Present videos you have made at it's best.
 
-.Local Videos
+.MP4 Videos
 gallery::jg_video_html5[role="mt-4 mb-4"]
 
 [role="mb-4"]
@@ -226,7 +239,7 @@ video for the Web like MP4, WebM, or Ogg.
 
 
 [role="mt-5"]
-=== YouTube Video Galleries
+=== YouTube Video
 
 [role="mb-4"]
 The community at link:{url-youtube--home}[YouTube, {browser-window--new}] is
@@ -242,7 +255,7 @@ gallery::jg_video_online_youtube_james_and_adele[role="mb-5"]
 
 
 [role="mt-4"]
-=== Vimeo Video Galleries
+=== Vimeo Video
 
 [role="mb-4"]
 link:{url-vimeo--home}[Vimeo, {browser-window--new}] is a video-sharing

data/lib/starter_web/pages/public/learn/roundtrip/responsive_tables.adoc

@@ -1,5 +1,5 @@
 ---
-title:                                  Tables
+title:                                  Responsive Tables
 title_extention:                        Responsive tables for J1 Template based on Bootstrap
 tagline:                                Viewed Best On All Devices
 
@@ -23,7 +23,6 @@ image:
   width:                                1920
   height:                               1280
 
-tts:                                    false
 regenerate:                             false
 permalink:                              /pages/public/learn/roundtrip/responsive_tables/
 
@@ -61,10 +60,12 @@ resource_options:
 // Page content
 // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 [role="dropcap"]
-Creating a design for responsive tables is challenging. J1 Template supports
-a new design for responsive tables based on Bootstrap. The approach used 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.
+Creating a design for *responsive* tables is challenging for all template
+sytems. J1 Template supports a new design for responsive tables based on the
+Bootstrap framework.
+
+The approach is using pure CSS styles on top of the classic Bootstrap tags
+for simplicity and portability to be viewed best on all devices and browsers.
 
 mdi:clock-time-five-outline[24px, md-gray mt-4 mr-2]
 *5 Minutes* to read
@@ -74,9 +75,10 @@ mdi:clock-time-five-outline[24px, md-gray mt-4 mr-2]
 [role="mt-5"]
 == Table types
 
-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:
+For sure, the solution provided by J1 Template for *responsive* tables are
+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
 [cols="3a,3a,6a", options="header", width="100%", role="rtable mt-4"]
@@ -84,15 +86,16 @@ needs for tables viewed on desktop and mobile devices, two types of
 |Style |Type |Description
 
 |`rtable`
-|*B Table*
-|B Tables are used by J1 Template for default. Those tables are using the
-*responsive text* feature (see link:{url-roundtrip--typography}[Typography])
-of Bootstrap with no additional CSS classes applied. For smaller viewports,
-the text scales down and should fit the cells automatically. The default
-text size for J1 is `r-text-300`.
+|*Bootstap Table*
+|Bootstap tables are used by J1 Template for default. Those tables are using
+the *responsive text* feature (see link:{url-roundtrip--typography}[Typography])
+and classic Bootstrap table styles with no additional CSS classes applied.
+For smaller viewports, the text scales down and should automatically fit the
+cells. The default text size for tables is level 300 `r-text-300` for
+*responsive* text.
 
 |`table-responsive`
-|*R Table*
+|*Responsive Table*
 |If adding the class `table-responsive`, it creates a responsive table based
 on *additional* Bootstrap CSS styles.  Making any table responsive across
 all viewports, the additional class `table-responsive` is to applied. For
@@ -286,189 +289,23 @@ Post's front matter by specifying a new date/time in the format
 
 |===
 
-////
-[role="mt-5"]
-== Tables multi-column
-
-Responsive Bootstrap tables support tables to be scrolled horizontally
-on smaller viewports. Making any table responsive across all viewports,
-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.
-
-[bs-table-multi-column]
-=== Bootstrap 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.
-
-.Bootstrap using fixed text size `no-rtext`
-[source, asciidoc, role="noclip"]
-----
-[cols=",,,,", options="header", width="100%", role="table-responsive-lg no-rtext" mt-4"]
-|===
-|Parameter |Type |Default |Description |Example
-...
-|===
-----
-
-.Bootstrap, fixed text size `no-rtext`
-[cols="2a,2a,2a,3a,3a", options="header", width="100%", role="table-responsive-lg no-rtext mt-4"]
-|===
-|Parameter |Type |Default |Description |Example
-
-|`color`
-|Hash
-|`md_white`
-|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
-background as a gradient.
-
-|`background_color_1`
-|Symbolic color \| RGB valuess
-|`md_indigo`
-|Start value (color) for the gradient used for the header box background.
-Alternatively, the color can be configured as (hexadecimal) RGB valuess of
-the form `#RRGGBB`
-|Start value (color) for the gradient used for the header box background.
-Alternatively, the color can be configured as (hexadecimal) RGB valuess of
-the form `#RRGGBB`
-
-|===
-
-.Bootstrap using responsive text size
-[source, asciidoc, role="noclip"]
-----
-[cols=",,,,", options="header", width="100%", role="table-responsive"]
-|===
-|Parameter |Type |Default |Description |Example
-...
-|===
-----
-
-.Bootstrap, responsive text size
-[cols="2a,2a,2a,3a,3a", options="header", width="100%", role="table-responsive mt-4"]
-|===
-|Parameter |Type |Default |Description |Example
-
-|`color`
-|Hash
-|`md_white`
-|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
-background as a gradient.
-
-|`background_color_1`
-|Symbolic color \| RGB valuess
-|`md_indigo`
-|Start value (color) for the gradient used for the header box background.
-Alternatively, the color can be configured as (hexadecimal) RGB valuess of
-the form `#RRGGBB`
-|Start value (color) for the gradient used for the header box background.
-Alternatively, the color can be configured as (hexadecimal) RGB valuess of
-the form `#RRGGBB`
-
-|===
-
-[role="mt-4"]
-=== Responsive table
-
-.R Table using fixed text size `no-rtext`
-[source, asciidoc, role="noclip"]
-----
-[cols="2a,2a,2a,3a,3a", options="header", width="100%", role="rtable no-rtext mt-4"]
-|===
-|Parameter |Type |Default |Description |Example
-...
-|===
-----
-
-.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
-
-|`color`
-|Hash
-|`md_white`
-|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
-background as a gradient.
-
-|`background_color_1`
-|Symbolic color \| RGB valuess
-|`md_indigo`
-|Start value (color) for the gradient used for the header box background.
-Alternatively, the color can be configured as (hexadecimal) RGB valuess of
-the form `#RRGGBB`
-|Start value (color) for the gradient used for the header box background.
-Alternatively, the color can be configured as (hexadecimal) RGB valuess of
-the form `#RRGGBB`
-
-|===
-
-.R Table using responsive text size
-[source, asciidoc, role="noclip"]
-----
-[cols="2a,2a,2a,3a,3a", options="header", width="100%", role="rtable mt-4"]
-|===
-|Parameter |Type |Default |Description |Example
-...
-|===
-----
-
-.R Table, responsive text size
-[cols="2a,2a,2a,3a,3a", options="header", width="100%", role="rtable mt-4"]
-|===
-|Parameter |Type |Default |Description |Example
-
-|`color`
-|Hash
-|`md_white`
-|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
-background as a gradient.
-
-|`background_color_1`
-|Symbolic color \| RGB valuess
-|`md_indigo`
-|Start value (color) for the gradient used for the header box background.
-Alternatively, the color can be configured as (hexadecimal) RGB valuess of
-the form `#RRGGBB`
-|Start value (color) for the gradient used for the header box background.
-Alternatively, the color can be configured as (hexadecimal) RGB valuess of
-the form `#RRGGBB`
-
-|===
-////
 
 [role="mt-5"]
 == What next
 
-Expectedly you've enjoyed exploring all the possibilities J1 offers so far.
-An exciting feature may be the use of themes. But much, much more can the J1
-do for your Web Site.
-
-J1 Template offers various unique functionalities compared to other Jekyll
-themes and templates. Bootstrap themes for the J1 Template are based on the
-free and open-source CSS front-end framework Bootstrap of version V5. The
-Bootstrap themes for the J1 enable the presentation of different skins of
-the same site using already prepared Bootstrap CSS templates.
+J1 Template offers unique functionalities in compare to other templates
+for Jekyll available on the market -- *Themes* for J1 Template is one of
+them. J1 Themes are based on the framework Bootstrap of version V5. J1
+themes for Bootstrap enable the presentation of different *skins* of the
+*same site* based on already prepared CSS templates for Bootstrap.
 
 Using Bootstrap themes results in a uniform appearance for the content in
 terms of the overall layout, text, tables, and form elements across all
 modern web browsers available on the market. In addition, developers can
-take advantage of CSS classes defined in Bootstrap to customize content
-individually.
+take advantage of CSS classes already defined in Bootstrap to customize
+content individually for a seamless integration in existing webs.
 
 [role="mb-7"]
-Check out what themes can do. Have a look at the
-link:{url-roundtrip--themes}[Bootstrap Themes] feature!
+Check out what the *Theme Feature* can do for modern static websites.
+Experience the functionality checking the preview page at
+link:{url-roundtrip--themes}[Bootstrap Themes]!

data/lib/starter_web/pages/public/learn/roundtrip/typography.adoc

@@ -131,22 +131,20 @@ what will happen in terms of responsiveness.
 </script>
 ++++
 
-To see Responsive Text `r-text` in action, use the button above to toggle on
-and off Responsive Text to see the difference!
-
 
 [role="mt-5"]
-== Scaling Responsive Text
+== Text Scaling
 
-The responsive text comes in five different scale factors in a range from 100
-to 500. Scaling `r-text` gives you the flexibility to use `r-text` everywhere.
-Or you can offer different text sizes of your Web for visitors having visual
-handicaps or reading disabilities.
+Responsive text comes in five different scale factors in a range from 100
+to 500. Scaling `r-text` gives you the flexibility to use responsive text
+`r-text` everywhere. Or you can offer different text sizes of your Web for
+visitors having visual handicaps or reading disabilities *without* bothering
+your visitors for changing their browser settings.
 
-To see `r-text` scaling in action, click on the button above to resize
-the text from `r-text` level 300 to 500 back and forth. Resize
-your Browser and watch the size of this text body change to see the
-responsiveness in action.
+To see the text `r-text` scaling in action, click on the button above to
+resize the text from `r-text` level 300 to 500 back and forth. Resize your
+Browser and watch the size of this text body change to see the responsiveness
+in action.
 
 ++++
 <div>
@@ -191,19 +189,23 @@ responsiveness in action.
 [role="mt-5"]
 == Scale factors
 
-As mentioned, `r-text` comes in five levels of size. The base of `r-text` is
-the Fibonacci numbers extracted from the Fibonacci series. These numbers are
-the most popular division ratios in typography. Fibonacci numbers are relevant
-in design and typography due to their prevalence in natural patterns.
+As mentioned, responsive text `r-text` comes in five levels of size. The
+base of responsive text `r-text` is the Fibonacci numbers extracted from
+the Fibonacci series.
+
+These numbers are the most popular division ratios in typography. Fibonacci
+numbers are relevant in design and typography due to their prevalence in
+natural patterns.
 
 The Fibonacci series is translated into CSS Media queries and scales a base
 font in size accordingly. Further, the resulting font scale series have
-multipliers ranging from 0.5 up to 1.0, resulting in 100% of the base.
+multipliers ranging from 100 up to 500, resulting in 100% of the base.
 
 That way, five series are available by the five scale factors. See the
-following table how `r-text` scales.
+following table how responsive text `r-text` scales.
 
 .Scale factors
+[cols="3a,3a,6a", options="header", width="100%", role="table-responsive mt-4"]
 |===
 |Property |Factor |Example text
 
@@ -258,20 +260,22 @@ explorer of the truth, the master-builder of human happiness.
 [role="mt-5"]
 == What next
 
-Have you enjoyed playing with the text? I hope so. But even more, J1 can
-do for your web pages. With the examples on that page, icons support the
-meaning of what was grouped as text.
+Have you enjoyed playing with the text? I hope so. But even more, the template
+J1 can do for your web pages. With the examples on the following page, find how
+icons support the meaning of what was grouped as text.
 
 J1 Template supports popular icons font sets out-of-the-box. The icon sets MDI
-and FA are very good in design and have a rich set of different icons for
-many categories used for the Web.
+and FA are very good in design and have a rich set of different icon elements
+for many categories used for the Web.
 
-J1 Template supports popular icons font sets like:
+With J1 Template, the following icons font sets are available out-of-the-box
+like:
 
-* Material Design Icons
-* FontAwesome Icons V5
-* Iconify
+* Material Design Icons (MDI)
+* FontAwesome Icons V5 (FA)
+* Iconify Icon Sets
 
 [role="mb-7"]
-Would you like to learn more about icons? The next example page focus on what's
-possible using link:{url-roundtrip--icon-fonts}[Icon Fonts, {browser-window--new}].
+Would you like to learn more about using icons? The next example page focus
+on what's possible using link:{url-roundtrip--icon-fonts}[Icon Fonts, {browser-window--new}]
+on your pages.

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

@@ -23,7 +23,6 @@ image:
   width:                                1920
   height:                               1280
 
-# fab_menu_id:                          default
 regenerate:                             false
 permalink:                              /pages/public/learn/where_to_go/
 

data/lib/starter_web/pages/public/panels/intro_panel/_includes/attributes.asciidoc

@@ -29,10 +29,11 @@ tag::data[]
 :data-images-standalone:                          "assets/images/modules/gallery/old_times/image_02.jpg, GrandPa's 80th Birthday"
 :data-images-group:                               "assets/images/modules/gallery/old_times/image_03.jpg, GrandPa's annual journey, assets/images/modules/gallery/old_times/image_04.jpg, GrandPa's annual journey"
 
-:data-images--themes-menu:                        "assets/images/pages/roundtrip/themes-menu-1280x800.jpg, Themes menu (Bootswatch)"
+:data-images--themes-menu:                        "assets/images/pages/roundtrip/themes-1920x1280.jpg, Themes menu (Bootswatch)"
 
-:data-quicksearch-icon:                           "assets/images/pages/roundtrip/600_quicksearch/quicksearch_icon-800x200.jpg, Search button (magnifier) in the quick access area"
-:data-quicksearch-input:                          "assets/images/pages/roundtrip/600_quicksearch/quicksearch_input-800x200.jpg, Input bar for a QuickSearch"
+:data-quicksearch--icon:                          "assets/images/pages/roundtrip/600_quicksearch/quicksearch_icon.jpg, Search button (magnifier) in the quick access area"
+:data-quicksearch--input:                         "assets/images/pages/roundtrip/600_quicksearch/quicksearch_input.jpg, Input bar for a QuickSearch"
+:data-quicksearch--results:                       "assets/images/pages/roundtrip/600_quicksearch/quicksearch_results.jpg, Results for a QuickSearch"
 
 end::data[]