j1-template 2023.6.0 → 2023.7.0

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

@@ -7,14 +7,9 @@ date:                                   2020-11-04
 #last_modified:                         2023-01-01
 
 description: >
-                                        The J1 Template support playing video on web pages by HTML5 Video,
-                                        the new standard of HTML. HTML5 Video implements a pure HTML way
-                                        to show video on the web. Modern browsers support the video tag
-                                        `<video>` for the HTML5 video standard. The previous proprietary
-                                        de facto standard software like Flash Player, Quicktime, or
-                                        Silverlight is no longer needed as the Jekyll theme JekyllOne
-                                        provides HTML5 Video support for local video content and from
-                                        online sources on the Internet.
+                                        The J1 Template support playing video on web pages
+                                        by HTML5 Video, the new standard of HTML to show
+                                        videos on web pages.
 keywords: >
                                         open source, free, template, jekyll, jekyllone, web,
                                         sites, static, jamstack, bootstrap,
@@ -91,64 +86,68 @@ resource_options:
 // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 [role="dropcap"]
 The J1 Template support playing video on web pages by HTML5 Video, the new
-standard of HTML. HTML5 Video implements a pure HTML way to show video
-on the web.
+standard of HTML to show videos on webpages.
 
-Modern browsers support the video tag `<video>` for the HTML5
-video standard. The previous proprietary de facto standard software like
-_Flash Player_, _Quicktime, or _Silverlight_ is no longer needed as the
-Jekyll theme JekyllOne provides HTML5 Video support for local video content
+Modern browsers support the video tag `<video>` for the new HTML5 video
+standard. The previous proprietary de facto standard software like
+_Flash Player_, _Quicktime_, or _Silverlight_ is no longer needed as the
+Jekyll theme J1 provides HTML5 Video support for local video content
 and from online sources on the Internet.
 
+mdi:clock-time-five-outline[24px, md-gray mt-4 mr-2]
+*10 Minutes* to read
+
 // Include sub-documents (if any)
 // -----------------------------------------------------------------------------
-[role="mt-4"]
+[role="mt-5"]
 == Video Galleries
 
-HTML5 Video opens the doors to your way of presenting video content. Modern
-browsers support the video tag `<video>` for the HTML5 video standard.
-Browsers have a built-in multimedia framework already for decoding and displaying
-video content. No need to use such proprietary software components anymore!
-
-HTML5 Video support is given by the App gallery combined with the lightbox
-LightGallery.
+HTML5 Video opens the doors to your way of presenting video content. All
+modern browsers support the video tag `<video>` for the HTML5. Browsers have
+a built-in multimedia framework already for decoding and displaying video
+content. No need to use such proprietary software components anymore!
 
-Two types of video sources are supported:
+HTML5 Video support is given by the lightbox *LightGallery*. Two types of
+video sources are supported:
 
 . Video files from local folders (your webspace)
 . Video files from online sources (on the Internet) like YouTube, Vimeo, etc.
 
-The combination of the App gallery and the lightbox LightGallery is entirely
-usable for all the video content you want to present on your site. You can
-place Galleries elsewhere with your content. You can use them for video blogs
-by putting them into your blog article's content.
+The combination of a gallery and a lightbox is entirely usable for all
+the video content you want to present on your site. You can place galleries
+elsewhere with your content. You can use them for video blogs by putting
+them into your blog article's content.
 
-WARNING: LightGallery can be used for free for private use, but a commercial
-license is needed for business use. See
+WARNING: The module LightGallery can be used for free for private use, but
+a commercial license is required for business use. See
 link:{url-light-gallery--license}[LightGallery licenses, {browser-window--new}]
 how to use LightGallery for commercial websites and projects.
 
+
+[role="mt-5"]
 == Local Video content
 
 Digital image content, simple pictures or videos, are easy to make. Today,
-every mobile has a camera. Presenting a bunch of (digital) pictures is done
-very easily by using Justified Gallery. Videos created by a digicam or a mobile
-can be played by J1 Template using the HTML5 Video support. Present videos you
-have made at it's best.
+every mobile has a camera. Presenting a bunch of pictures is done very easily
+by using *Justified Gallery*. Videos created by a digicam or a mobile can be
+played by J1 Template using the HTML5 Video support. Present videos you have
+made at it's best.
 
 Two players are available with LightGallery:
 
 . an internal player used by default
-. {url-videojs--home}[video.js, {browser-window--new}], a excellent
-  Javascript video library including a great player
+. VideoJS {url-videojs--home}[video.js, {browser-window--new}], a
+  excellent Javascript video library including a great player
 
 NOTE: The HTML5 specification does *not* define which video and audio formats
 browsers *should* support. J1 LightGallery can play all types of standard
-HTML5 Video formats on modern browsers today (MP4, WebM, and Ogg).
+HTML5 Video formats on modern browsers today like MP4, WebM, or Ogg.
 
 .MP4 Videos - VideoJS Player
 gallery::jg_video_html5[role="mb-5"]
 
+
+[role="mt-5"]
 == Online Video content
 
 The Internet is full of inspiring content. If you want to present video
@@ -161,9 +160,9 @@ The community at link:{url-youtube--home}[YouTube, {browser-window--new}] is
 large, with over 1 billion users that watch hundreds of millions of hours of
 content every day. The number of channels on YouTube is enormous. For TV
 Stations, it's a must to publish videos of their shows on YouTube. Find below
-a current gallery from *The Voice Kids* (SAT.1) Germany and a real classic
-channel *Carpool Karaoke* from the frontman James Corden of *The Late Late Show*
-at CBS, Los Angeles.
+a current gallery from *The Voice Kids*, a SAT.1 Germany production, and a
+real classic channel *Carpool Karaoke* presented by the frontman _James Corden_
+of *The Late Late Show* at CBS, Los Angeles.
 
 .The Voice Kids, Germany 2021
 gallery::jg_video_online_youtube_2[role="mb-5"]
@@ -198,10 +197,10 @@ link:{url-vivendi--home}[Vivendi, {browser-window--new}]. The platform is
 available worldwide in 183 languages and 43 localised versions featuring local
 home pages and local content.
 
-The platform is a monetization solution that allows allows to directly connect
-to high-quality advertisers through a proprietary Advertising Solution. Like
-YouTube, videos cav be watched for free, but ads are shown on each and every
-video.
+The platform is a *monetization* solution that allows allows to directly
+connect to high-quality advertisers through a proprietary Advertising system.
+Like YouTube, videos can be watched for free, but ads are shown on each and
+every video.
 
 Dailymotion allows users to search videos by *tags*, topic *channels*, or
 user-created *groups*. Users can upload videos of up to 2 gigabytes and a
@@ -218,7 +217,7 @@ gallery::jg_video_online_dailymotion[role="mb-5"]
 
 === VK
 
-link:{url-vk--home}[VK, {browser-window--new}], former Vkontakte.ru until
+link:{url-vk--home}[VK, {browser-window--new}], Vkontakte.ru until
 January 2012, is a multilingual social network operated from Russia.
 Registered users can create a profile on VK and exchange information with
 other users.
@@ -237,24 +236,24 @@ right-wing extremists or to suppress racist currents on the platform.
 gallery::jg_video_online_vk[role="mb-5"]
 
 
+[role="mt-5"]
 == What next
 
 Images and videos are pretty visual. And it can be impressive, for sure.
-But the most visual component is the text for all pages, for all sites on
+But the most visual component on all web pages is text, for all sites on
 the Internet.
 
-Sadly, one common flaw is seen in many templates and frameworks: a lack of
-support for genuinely responsive text. While elements on a page resize
-fluidly, the text still resizes on a fixed basis. To avoid this issue,
-especially for heavily text-focused pages, J1 Template supports styles that
-fluidly scale text size and line height to optimize readability for the user.
+Sadly, one common flaw in many templates and frameworks is a lack of support
+for responsive text. While other elements on a page resize fluidly, the text
+still resizes fixedly. To avoid this issue, especially for heavily text-focused
+pages, J1 Template supports a fluidly scaled text that changes in size and
+line height to optimize readability for the user.
 
 The Jekyll Theme JekyllOne places the character font as one of the most
 crucial branding elements for any website. Typography matters for any media
-presenting text. The text will take on an important role of acting not only
-as plain text but also as something like images. To see how text could be
-presented great for modern responsive websites, check the section
-Typography next.
+presenting text. The text will take on an important role of acting as plain
+text and as something like images. To see how text could be presented great
+for modern responsive websites.
 
 What? Please find out how it works.
 Go for: link:{url-roundtrip--typography}[Typography], then.

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

@@ -6,11 +6,10 @@ tagline:                                Viewed Best On All Devices
 date:                                   2020-11-09
 #last_modified:                         2023-01-01
 description: >
-                                        J1 Templatesupports a new design for responsive tables
-                                        based on Bootstrap. The approach used by J1 Template is
-                                        using pure CSS styles on top of the classic Bootstrap
-                                        styles for simplicity and portability to be viewed best
-                                        on all devices and browsers.
+                                        J1 Template supports a new design for responsive tables
+                                        based on Bootstrap. The approach used is using pure CSS
+                                        styles on top of the classic Bootstrap styles for simplicity
+                                        and portability to be viewed best  on all devices and browsers.
 keywords: >
                                         open source, free, template, jekyll, jekyllone, web,
                                         sites, static, jamstack, bootstrap,
@@ -27,7 +26,7 @@ image:
 regenerate:                             false
 permalink:                              /pages/public/learn/roundtrip/responsive_tables/
 
-resources:                              [ animate, clipboard, lightbox, rouge ]
+resources:                              [ animate, clipboard, rouge ]
 resource_options:
   - attic:
       slides:
@@ -61,15 +60,17 @@ resource_options:
 // Page content
 // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 [role="dropcap"]
-Creating a design for responsive tables is challenging. The Jekyll Theme
-JekyllOne supports a new design for responsive tables based on Bootstrap.
-The approach used by 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.
+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.
+
+mdi:clock-time-five-outline[24px, md-gray mt-4 mr-2]
+*5 Minutes* to read
 
 // Include sub-documents (if any)
 // -----------------------------------------------------------------------------
-[role="mt-4"]
+[role="mt-5"]
 == Table types
 
 But, for sure, the solutions provided are a compromise. To fit the everyday
@@ -82,35 +83,38 @@ needs for tables viewed on desktop and mobile devices, two types of
 |Style |Type |Description
 
 |`rtable`
-|*R Table (J1)*
-|J Table are used by J1 Template for default. Those tables are using the
+|*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])
-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
-J1 is `r-text-300`.
+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`.
 
 |`table-responsive`
-|*B Table (Bootstrap)*
+|*R Table*
 |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
-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.
+on *additional* Bootstrap CSS styles.  Making any table responsive across
+all viewports, the additional class `table-responsive` is to applied. For
+specific Bootstrap breakpoints, the breakpoint classes
+`table-responsive-{lg \| sm \| md \| lg \| xl}` are available to have better
+control on what viewport sizes tables are being transformed.
 
 |===
 
-To see the transformation on a table in action, resize for desktop devices the
-browser window or use a device the viewport is smaller than 768px (mobiles or
-tablets).
+TIP: To see the transformation on a table in action, resize for desktop
+devices the browser window smaller than *768px* to transform for mobiles or
+tablets.
+
 
-== Table 2-column
+[role="mt-5"]
+== Bootstrap Tables
 
 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
 pages.
 
-=== Bootstrap table
+[bs-table-2-column-fixed]
+=== Fixed font size
 
 Bootstrap tables support tables to be scrolled horizontally on smaller
 viewports. From a specified breakpoint and up, the table will behave
@@ -156,6 +160,10 @@ Post's front matter by specifying a new date/time in the format
 
 |===
 
+
+[bs-table-2-column-responsive]
+===  Responsive font size
+
 .Bootstrap using responsive text size
 [source, asciidoc, role="noclip"]
 ----
@@ -193,8 +201,8 @@ Post's front matter by specifying a new date/time in the format
 
 |===
 
-
-=== Responsive table
+[role="mt-4"]
+== Responsive Tables
 
 Responsive tables *rebuild* a table. The header is set to invisible, and
 all columns get vertically *stacked as rows*.
@@ -273,7 +281,8 @@ 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
@@ -284,6 +293,7 @@ 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
@@ -361,6 +371,7 @@ the form `#RRGGBB`
 
 |===
 
+[role="mt-4"]
 === Responsive table
 
 .R Table using fixed text size `no-rtext`
@@ -432,8 +443,9 @@ 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.
@@ -443,8 +455,8 @@ 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 versions
-(skins) of the same site using already prepared Bootstrap CSS templates.
+Bootstrap themes for the J1 enable the presentation of different skins of
+the same site using already prepared Bootstrap CSS templates.
 
 Using Bootstrap themes results in a uniform appearance for the content in
 terms of the overall layout, text, tables, and form elements across all

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

@@ -7,12 +7,10 @@ date:                                   2020-11-05
 #last_modified:                         2023-01-01
 
 description: >
-                                        J1 Template places the character font as
-                                        one of the most crucial branding elements for any website.
-                                        Typography matters for any media presenting text. The text
-                                        will take on an important role of acting not only as plain
-                                        text but also as something like images.
-keywords: >
+                                        J1 Template places the character font as one of the
+                                        most crucial branding elements for any website. The
+                                        text take on an important role of acting not only as
+                                        plain text but also as something like images.
 keywords: >
                                         open source, free, template, jekyll, jekyllone, web,
                                         sites, static, jamstack, bootstrap,
@@ -29,7 +27,7 @@ image:
 regenerate:                             false
 permalink:                              /pages/public/learn/roundtrip/typography/
 
-resources:                              [ animate, clipboard, lightbox, rouge ]
+resources:                              [ animate, clipboard, rouge ]
 resource_options:
   - attic:
       opacity:                          0.3
@@ -67,21 +65,25 @@ resource_options:
 // Page content
 // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 [role="dropcap"]
-The Jekyll Theme JekyllOne places the character font as one of the most
-crucial branding elements for any website. Typography matters for any media
-presenting text. The text will take on an important role of acting not only
-as plain text but also as something like images.
+The Jekyll Theme J1 places the character font as one of the most crucial
+branding elements for any website. Typography matters for any page
+presenting text. The text will take on an important role of acting not
+only as plain text but also as something like images.
+
+mdi:clock-time-five-outline[24px, md-gray mt-4 mr-2]
+*5 Minutes* to read
 
 // Include sub-documents (if any)
 // -----------------------------------------------------------------------------
-[role="mt-4"]
+[role="mt-5"]
 == Responsive Text
 
-Sadly, one common flaw is seen in many templates and frameworks: a lack of
-support for genuinely responsive text. While elements on a page resize
+Sadly to say, one common flaw is seen in many templates and frameworks:
+the lack of support for responsive text. While elements on a page resize
 fluidly, the text still resizes on a fixed basis. To avoid this issue,
 especially for heavily text-focused pages, J1 Template supports styles that
-fluidly scale text size and line height to optimize readability for the user.
+fluidly scale text in size and line height to optimize readability for the
+user.
 
 Below you find an example of how text behaves if defined on a fixed basis -
 what you'll see quite often. Change the size of your Browser Window to see
@@ -93,7 +95,7 @@ what will happen in terms of responsiveness.
     <i class="toggle-button mdi mdi-toggle-switch-off mdi-lg mdi-md-bg-primary-50 mr-1"></i>
     Toggle rtext
   </button>
-  <div class="mb-4">
+  <div class="speak2me-ignore mb-4">
     <div class="content">
       <!-- jadams, 2020-11-15: adjusted heading levels (Google optimisation) -->
       <h3 class="notoc">The Extremes of Good and Evil</h3>
@@ -133,6 +135,7 @@ 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
 
 The responsive text comes in five different scale factors in a range from 100
@@ -151,7 +154,7 @@ responsiveness in action.
     <i class="scale-button mdi mdi-arrow-up mdi-lg mdi-md-bg-primary-50 mr-1"></i>
     Scale rtext
   </button>
-  <div class="mb-4">
+  <div class="speak2me-ignore mb-4">
     <div class="content">
       <!-- jadams, 2020-11-15: adjusted heading levels (Google optimisation) -->
       <h3 class="notoc">The Extremes of Good and Evil</h3>
@@ -185,18 +188,17 @@ 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. When speaking of the golden
-ratio (1: 1.618) in typography and graphic design, the Fibonacci numbers are
-usually the base.
+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 (scale factors) ranging from 0.5 (50%) up to 1.0 (100%) of the
-base.
+multipliers ranging from 0.5 up to 1.0, 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.
@@ -253,6 +255,7 @@ 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

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

@@ -64,17 +64,21 @@ resource_options:
 // Page content
 // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 [role="dropcap"]
-Welcome to the learning pages of JekyllOne, the J1 Template. A good decision to
+Welcome to the learning pages of the J1 Template. A good decision to
 get on that page first. Certainly, there is no better place to start learning
 what the J1 Template can do and what pages are available to experience more.
 
-// Include sub-documents (if any) (if any)
+mdi:clock-time-five-outline[24px, md-gray mr-2]
+*3 Minutes* to read
+
+// Include sub-documents (if any)
 // -----------------------------------------------------------------------------
 The crucial first step in finding your way to Jekyll is done. Congratulations.
 The *Learn* section contains all you need to expirience what Jekyll and J1
 can do for your new website, for your new static web. You are welcome to spend
 some time diving into the techniques of creating modern static webs.
 
+[role="mt-5"]
 Roundtrip::
 In this section, you’ll find a tour to show some of the main features of
 the J1 Template. This trip covers how image data can be managed using

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

@@ -1,8 +1,10 @@
 ---
 title:                                  Copyright
 tagline:                                Legal Right Of The Content
+
 date:                                   2020-10-23
 #last_modified:                         2023-01-01
+
 description: >
                                         J1 Template is a Bootstrap V5 website template for the static
                                         site generator Jekyll.
@@ -70,6 +72,7 @@ consent of the author or authors in question.
 
 // Include sub-documents (if any)
 // -----------------------------------------------------------------------------
+[role="mt-5"]
 == Copyright policy
 
 The content provided by this site is subject to German copyright law. The
@@ -82,6 +85,7 @@ parties' copyrights are respected. Nevertheless, you were on one copyright
 infringement, we friendly ask for a corresponding note.
 
 ifeval::[{disclaimer} == true]
+[role="mt-5"]
 == Disclaimer
 
 The website contents were created with the care and to the best of our

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

@@ -1,8 +1,10 @@
 ---
 title:                                  Impress
 tagline:                                Legal Information
+
 date:                                   2020-10-23
 #last_modified:                         2023-01-01
+
 description: >
                                         J1 Template is a Bootstrap V5 website template for the static
                                         site generator Jekyll.