j1-template 2022.5.0.rc0 → 2022.5.0.rc1

data/lib/starter_web/pages/public/learn/_roundtrip/100_present_videos.adoc

@@ -1,281 +0,0 @@
----
-title:                                  Roundtrip
-tagline:                                present videos
-date:                                   2020-11-04 00:00:00  +100
-description: >
-                                        Playing video on web pages seems not that special since you can already
-                                        watch videos on web pages through plugins like Flash Player, Quicktime
-                                        or Silverlight. A new standard goes to HTML5 Video, a pure HTML way to
-                                        show video on the web; instead of the previous de facto standard of using
-                                        proprietary software.
-
-categories:                             [ Roundtrip ]
-tags:                                   [ Introduction, Module, Video ]
-
-permalink:                              /pages/public/learn/roundtrip/present_videos/
-regenerate:                             false
-
-personalization:                        true
-fab_menu_id:                            page_ctrl
-
-resources:                              [
-                                          animate, lightGallery, justifiedGallery, video_js,
-                                          vimeo_player, vimeo_froogaloop
-                                        ]
-resource_options:
-  - attic:
-      slides:
-        # Broadway Underground - still image (animate default)
-        - url:                          /assets/videos/headers/still/underground-broadway.jpg
-          alt:                          Broadway Underground
-          alignY:                       top
-          animateFirst:                 false
-        # Broadway Underground - FAYETTE ST, moved file to Github/LFS
-        - url:                          https://github.com/jekyll-one-org/jekyll-one-lfs/raw/master/videos/underground-broadway.mp4
-          alignY:                       0
-          isVideo:                      true
-          loop:                         false
-          duration:                     12000
-        # Broadway Underground - still image (animate random)
-        - url:                          /assets/videos/headers/still/underground-broadway.jpg
-          alt:                          Broadway Underground
-          alignY:                       top
-          transition:                   push_left|push_right|cover_up|cover_down|fade|fadeInOut
----
-
-// Page Initializer
-// =============================================================================
-// Enable the Liquid Preprocessor
-:page-liquid:
-
-// Set (local) page attributes here
-// -----------------------------------------------------------------------------
-// :page--attr:                         <attr-value>
-:images-dir:                            {imagesdir}/pages/roundtrip/100_present_images
-
-//  Load Liquid procedures
-// -----------------------------------------------------------------------------
-{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
-
-// Load page attributes
-// -----------------------------------------------------------------------------
-{% include {{load_attributes}} scope="all" %}
-
-
-// Page content
-// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-
-++++
-<!-- insert Google Ad (Displayanzeige): horizontal-2, adSlot="5128488466" -->
-<div class="5128488466 mb-5">
-  <ins class="adsbygoogle"
-    style="display: block;"
-    data-ad-client="ca-pub-3885670015316130"
-    data-ad-slot="5128488466"
-    data-ad-format="auto"
-    data-adtest="on"
-    data-full-width-responsive="true">
-  </ins>
-</div>
-++++
-
-++++
-<script>
-
-  $(document).ready(function() {
-    var logger              = log4javascript.getLogger('j1.google.ads');
-    var autoHideOnUnfilled  = true;
-
-    var dependencies_met_page_ready = setInterval (function (options) {
-      if ( j1.getState() === 'finished' ) {
-
-        // monitor for state changes on the ad
-        // ---------------------------------------------------------------------
-        $('.adsbygoogle').attrchange({
-          trackValues: true,
-          callback: function (event) {
-            if (event.newValue === 'unfilled') {
-              var elm = event.target.dataset;
-              if (elm.adClient) {
-                logger.warn('\n' + 'initialized ad detected as: ' + event.newValue);
-                if (autoHideOnUnfilled) {
-                  logger.info('\n' + ' hide ad for slot: ' + elm.adSlot);
-                  $('.' + elm.adSlot ).hide();
-                }
-              }
-            }
-          }
-        });
-
-        // manage uncaught execeptions
-        // ---------------------------------------------------------------------
-        // window.onerror = function (msg, url, line) {
-        //    alert("Message : " + msg );
-        //    alert("url : " + url );
-        //    alert("Line number : " + line );
-        // }
-
-        logger.info('\n' + 'initialize Google Ad on slot: ' + '5128488466');
-        (adsbygoogle = window.adsbygoogle || []).push({});
-
-        clearInterval(dependencies_met_page_ready);
-      }
-   });
-
-  });
-
-</script>
-++++
-
-// Include sub-documents (if any)
-// -----------------------------------------------------------------------------
-[role="dropcap"]
-Playing video on web pages seems not that special since you can already
-watch videos on web pages through plugins like _Flash Player_, _Quicktime_,
-or _Silverlight_. A new standard goes to HTML5 Video, a pure HTML way to
-show video on the web, instead of the previous de facto standard of using
-proprietary software.
-
-== 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.
-
-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.
-
-WARNING: LightGallery can be used for free for private use, but a commercial
-license is needed for business use. See
-link:{url-light-gallery--license}[LightGallery licenses, {browser-window--new}]
-how to use LightGallery for commercial websites and projects.
-
-== 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.
-
-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
-
-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).
-
-.MP4 Videos - VideoJS Player
-gallery::jg_video_html5[role="mb-5"]
-
-== Online Video content
-
-The Internet is full of inspiring content. If you want to present video
-content from the Internet, the online video support of J1 Template is the
-right choice.
-
-=== YouTube
-
-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.
-
-.The Voice Kids, Germany 2021
-gallery::jg_video_online_youtube_2[role="mb-5"]
-
-.James Cordon's Carpool Karaoke
-gallery::jg_video_online_youtube[role="mb-5"]
-
-=== Vimeo
-
-link:{url-vimeo--home}[Vimeo, {browser-window--new}] is a video-sharing
-platform that includes features such as live-streaming and customization.
-Vimeo provides many tools for video creation, editing, and broadcasting.
-The platform provides you with an excellent channel to present high-quality,
-professional videos and reach audiences worldwide.
-
-Vimeo does offer a basic, free membership, but it limits you to 500MB maximum
-storage per week. Alternately, you can book on paid plans: Plus, PRO, Business.
-Each membership has varied storage limits, but the free plan offers sufficient
-space for private projects to present video content without advertising.
-
-NOTE: A great plus using Vimeo is that *no advertising* is used on that
-platform.
-
-.Vimeo Video Gallery - Fashion
-gallery::jg_video_online_vimeo[role="mb-5"]
-
-=== DailyMotion
-
-link:{url-dailymotion--home}[Dailymotion, {browser-window--new}] is a French
-video-sharing technology platform primarily owned by
-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.
-
-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
-length of 60 minutes. If a user is a MotionMaker or MotionPartner, a program
-for particularly creative users or partners, they can upload videos of
-unlimited length.
-
-NOTE: Like YouTube, DailyMotion is a commercial platform using *advertising*
-on all video content. On every video, an ad clip is presented of 15 to
-30 seconds in length.
-
-.DailyMotion Video Gallery - SELF Magazine (Channel)
-gallery::jg_video_online_dailymotion[role="mb-5"]
-
-=== VK
-
-link:{url-vk--home}[VK, {browser-window--new}], former 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.
-
-According to the operator, the platform has over 100 million active users,
-but mainly in Russia, Ukraine, and other Russian spoken countries. VK is
-among the most popular websites in Russia.
-
-NOTE: VK is accused of insufficient protection of personal data. The platform
-is also openly criticized by neo-Nazi and neo-fascist Groups used without
-there being a handle against them so far. To date, the Russian investigative
-authorities (especially the FSB) have not made any efforts to identify
-right-wing extremists or to suppress racist currents on the platform.
-
-.VK Video Gallery - Wildlife
-gallery::jg_video_online_vk[role="mb-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 the
-Internet. To see how text could be presented great for modern responsive
-websites, check the section Typography next.
-
-What? Please find out how it works.
-Go for: link:{url-roundtrip--typography}[Typography], then.

data/lib/starter_web/pages/public/learn/_roundtrip/200_typography.adoc

@@ -1,253 +0,0 @@
----
-title:                                  Roundtrip
-tagline:                                typography
-date:                                   2020-11-05 00:00:00
-description: >
-                                        The character font serves as one of the most crucial branding elements for
-                                        any business. Typography matters for any media presenting text. The text will
-                                        take on an important role of acting not only as plain text but will also serve
-                                        as something like images.
-
-categories:                             [ Roundtrip ]
-tags:                                   [ Introduction, Module, Typography ]
-
-fab_menu_id:                            page_ctrl
-
-permalink:                              /pages/public/learn/roundtrip/typography/
-regenerate:                             false
-
-resources:                              [ animate ]
-resource_options:
-  - attic:
-      opacity:                          0.3
-      slides:
-        - url:                          /assets/images/pages/roundtrip/typography-1920x1280-bw.jpg
-          alt:                          Photo by Alice Donovan Rousel on Unsplash
-          preload:                      0
-          transitionDuration:           fast
-          resolutionRefreshRate:        500
-          badge:
-            type:                       unsplash
-            author:                     Alice Donovan Rousel
-            href:                       https://unsplash.com/@alicekat/portfolio
----
-
-// Page Initializer
-// =============================================================================
-// Enable the Liquid Preprocessor
-:page-liquid:
-
-// Set (local) page attributes here
-// -----------------------------------------------------------------------------
-// :page--attr:                         <attr-value>
-:images-dir:                            {imagesdir}/pages/roundtrip/100_present_images
-
-//  Load Liquid procedures
-// -----------------------------------------------------------------------------
-{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
-
-// Load page attributes
-// -----------------------------------------------------------------------------
-{% include {{load_attributes}} scope="all" %}
-
-
-// Page content
-// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-
-// Include sub-documents (if any)
-// -----------------------------------------------------------------------------
-[role="dropcap"]
-The character font serves as one of the most crucial branding elements for
-any business. Typography matters for any media presenting text. The text will
-take on an important role of acting as plain text but will also serve
-as something like images.
-
-== 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
-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.
-
-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
-what will happen in terms of responsiveness.
-
-++++
-<div>
-  <button type="button" name="toggle-r-text" class="btn btn-primary btn-flex mt-3 mb-3">
-    <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="content">
-      <!-- jadams, 2020-11-15: adjusted heading levels (Google optimisation) -->
-      <h3 class="notoc">The Extremes of Good and Evil</h3>
-      <p class="small notoc text-gray mb-3">Cicero, Paragraph 1.10.32 · Translation by H. Rackham, Issue 1914 - De Finibus</p>
-      <p class="toggle-description no-r-text">
-        But I must explain to you how all this mistaken idea of denouncing
-        pleasure and praising pain was born and I will give you a complete
-        account of the system, and expound the actual teachings of the great
-        explorer of the truth, the master-builder of human happiness.
-        <br/><br/>
-        No one rejects, dislikes, or avoids pleasure itself, because it is
-        pleasure, but because those who do not know how to pursue pleasure
-        rationally encounter consequences that are extremely painful. Nor
-        again is there anyone who loves or pursues or desires to obtain pain
-        of itself, because it is pain, but because occasionally circumstances
-        occur in which toil and pain can procure him some great pleasure.
-        <br/><br/>
-        To take a trivial example, which of us ever undertakes laborious
-        physical exercise, except to obtain some advantage from it? But who
-        has any right to find fault with a man who chooses to enjoy a pleasure
-        that has no annoying consequences, or one who avoids a pain that
-        produces no resultant pleasure?
-      </p>
-    </div>
-  </div>
-</div>
-
-<script>
-  $('button[name="toggle-r-text"]').on('click', function (e) {
-    $('p.toggle-description').toggleClass('no-r-text r-text-300');
-    $('.toggle-button').toggleClass('mdi-toggle-switch-off mdi-toggle-switch');
-  });
-</script>
-++++
-
-To see Responsive Text `r-text` in action, use the button above to toggle on
-and off Responsive Text to see the difference!
-
-== Scaling Responsive Text
-
-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.
-
-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.
-
-++++
-<div>
-  <button type="button" name="scale-r-text" class="btn btn-primary btn-flex mt-3 mb-3">
-    <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="content">
-      <!-- jadams, 2020-11-15: adjusted heading levels (Google optimisation) -->
-      <h3 class="notoc">The Extremes of Good and Evil</h3>
-      <p class="small notoc text-gray mb-3">Cicero, Paragraph 1.10.32 · Translation by H. Rackham, Issue 1914 - De Finibus</p>
-      <p class="scale-description r-text-300">
-        On the other hand, we denounce with righteous indignation and dislike men who
-        are so beguiled and demoralized by the charms of pleasure of the moment, so
-        blinded by desire, that they cannot foresee the pain and trouble that are
-        bound to ensue; and equal blame belongs to those who fail in their duty through
-        weakness of will, which is the same as saying through shrinking from toil and pain.
-        <br/><br/>
-        These cases are perfectly simple and easy to distinguish. In a free hour, when
-        our power of choice is untrammelled and when nothing prevents our being able to
-        do what we like best, every pleasure is to be welcomed and every pain avoided.
-        But in certain circumstances and owing to the claims of duty or the obligations
-        of business is will frequently occur that pleasures have to be repudiated and
-        annoyances accepted. The wise man therefore always holds in these matters to
-        this principle of selection: he rejects pleasures to secure other greater
-        pleasures, or else he endures pains to avoid worse pains.
-      </p>
-    </div>
-  </div>
-</div>
-
-<script>
-  $('button[name="scale-r-text"]').on('click', function (e) {
-    $('p.scale-description').toggleClass('r-text-300 r-text-500');
-    $('.scale-button').toggleClass('mdi-arrow-up mdi-arrow-down');
-  });
-</script>
-++++
-
-== 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 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.
-
-That way, five series are available by the five scale factors. See the following
-table how `r-text` scales.
-
-.Scale factors
-|===
-|Property |Factor |Example text
-
-|`r-text-100`
-|0.5
-|
-[role="r-text-100"]
-But I must explain to you how all this mistaken idea of denouncing
-pleasure and praising pain was born and I will give you a complete
-account of the system, and expound the actual teachings of the great
-explorer of the truth, the master-builder of human happiness.
-
-|`r-text-200`
-|0.7
-|
-[role="r-text-200"]
-But I must explain to you how all this mistaken idea of denouncing
-pleasure and praising pain was born and I will give you a complete
-account of the system, and expound the actual teachings of the great
-explorer of the truth, the master-builder of human happiness.
-
-|`r-text-300`
-|0.8
-|
-[role="r-text-300"]
-But I must explain to you how all this mistaken idea of denouncing
-pleasure and praising pain was born and I will give you a complete
-account of the system, and expound the actual teachings of the great
-explorer of the truth, the master-builder of human happiness.
-
-|`r-text-400`
-|0.9
-|
-[role="r-text-400"]
-But I must explain to you how all this mistaken idea of denouncing
-pleasure and praising pain was born and I will give you a complete
-account of the system, and expound the actual teachings of the great
-explorer of the truth, the master-builder of human happiness.
-
-|`r-text-500`
-|1.0
-|
-[role="r-text-500"]
-But I must explain to you how all this mistaken idea of denouncing
-pleasure and praising pain was born and I will give you a complete
-account of the system, and expound the actual teachings of the great
-explorer of the truth, the master-builder of human happiness.
-
-|===
-
-== What next
-
-Have you enjoyed playing with the text? We 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.
-
-J1 Template supports popular icons font sets like:
-
-* Material Design Icons
-* FontAwesome Icons V5
-* Iconify
-
-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}].