j1-template 2024.3.22 → 2024.3.23

data/lib/starter_web/_data/modules/gallery.yml

@@ -82,29 +82,29 @@ settings:
           file:                         image-1.jpg
           caption_text:                 GrandPa · 80th Birthday
           description: >
-                                        <h5>GrandPa</h5>
-                                        <h6>80th Birthday</h6>
+                                        <h2>GrandPa</h2>
+                                        <h3>80th Birthday</h3>
 
         - image:                        # image
           file:                         image-2.jpg
           caption_text:                 GrandPa &middot; 80th Birthday
           description: >
-                                        <h5>GrandPa</h5>
-                                        <h6>80th Birthday</h6>
+                                        <h2>GrandPa</h2>
+                                        <h3>80th Birthday</h3>
 
         - image:                        # image
           file:                         image-3.jpg
           caption_text:                 GrandPa &middot; Annual journey
           description: >
-                                        <h5>GrandPa</h5>
-                                        <h6>Annual journey</h6>
+                                        <h2>GrandPa</h2>
+                                        <h3>Annual journey</h3>
 
         - image:                        # image
           file:                         image-4.jpg
           caption_text:                 GrandPa &middot; Annual journey
           description: >
-                                        <h5>GrandPa</h5>
-                                        <h6>Annual journey</h6>
+                                        <h2>GrandPa</h2>
+                                        <h3>Annual journey</h3>
 
     # --------------------------------------------------------------------------
     # Gallery Mega Cities
@@ -163,85 +163,85 @@ settings:
           file:                         banter-snaps_b.jpg
           caption_text:                 Japan &middot; City of Osaka
           description: >
-                                        <h5>Japan</h5>
-                                        <h6>City of Osaka</h6>
+                                        <h2>Japan</h2>
+                                        <h3>City of Osaka</h3>
 
         - image:                        # image 2
           file:                         denys-nevozhai-1_b.jpg
           caption_text:                 China &middot; Man posing at the rooftop of Jin Mao Tower Shanghai
           description: >
-                                        <h5>China</h5>
-                                        <h6>Man posing at the rooftop of Jin Mao Tower Shanghai</h6>
+                                        <h2>China</h2>
+                                        <h3>Man posing at the rooftop of Jin Mao Tower Shanghai</h3>
 
         - image:                        # image 3
           file:                         gints-gailis_b.jpg
           caption_text:                 Indonesia &middot; Shangri-La Hotel Jakarta
           description: >
-                                        <h5>Indonesia</h5>
-                                        <h6>Shangri-La Hotel Jakarta</h6>
+                                        <h2>Indonesia</h2>
+                                        <h3>Shangri-La Hotel Jakarta</h3>
 
         - image:                        # image 4
           file:                         steven-diaz_b.jpg
           caption_text:                 Indonesia &middot; Shangri-La Hotel Jakarta
           description: >
-                                        <h5>Japan</h5>
-                                        <h6>Tokyo seen from World Trade Center Observation Deck</h6>
+                                        <h2>Japan</h2>
+                                        <h3>Tokyo seen from World Trade Center Observation Deck</h3>
 
         - image:                        # image 5
           file:                         denys-nevozhai-2_b.jpg
           caption_text:                 China &middot; Young couple over Shenzhen
           description: >
-                                        <h5>China</h5>
-                                        <h6>Young couple over Shenzhen</h6>
+                                        <h2>China</h2>
+                                        <h3>Young couple over Shenzhen</h3>
 
         - image:                        # image 6
           file:                         johan-mouchet_b.jpg
           caption_text:                 Australia &middot; The Queen Bee at the Eureka Tower of Melbourne
           description: >
-                                        <h5>Australia</h5>
-                                        <h6>The Queen Bee at the Eureka Tower of Melbourne</h6>
+                                        <h2>Australia</h2>
+                                        <h3>The Queen Bee at the Eureka Tower of Melbourne</h3>
 
         - image:                        # image 7
           file:                         thomas-tucker_b.jpg
           caption_text:                 Taiwan &middot; Sunset over City of Taipei
           description: >
-                                        <h5>Taiwan</h5>
-                                        <h6>Sunset over City of Taipei</h6>
+                                        <h2>Taiwan</h2>
+                                        <h3>Sunset over City of Taipei</h3>
 
         - image:                        # image 8
           file:                         emmad-mazhari_b.jpg
           caption_text:                 United States &middot; City of Chicago
           description: >
-                                        <h5>United States</h5>
-                                        <h6>City of Chicago</h6>
+                                        <h2>United States</h2>
+                                        <h3>City of Chicago</h3>
 
         - image:                        # image 9
           file:                         federico-rizzarelli_b.jpg
           caption_text:                 China &middot; City of Shanghai
           description: >
-                                        <h5>China</h5>
-                                        <h6>City of Shanghai</h6>
+                                        <h2>China</h2>
+                                        <h3>City of Shanghai</h3>
 
         - image:                        # image 10
           file:                         andreas-brucker_b.jpg
           caption_text:                 Thailand &middot; City of Bangkok
           description: >
-                                        <h5>Thailand</h5>
-                                        <h6>City of Bangkok</h6>
+                                        <h2>Thailand</h2>
+                                        <h3>City of Bangkok</h3>
 
         - image:                        # image 11
           file:                         luca-bravo_b.jpg
           caption_text:                 Taiwan &middot; Sunset over City of Taipei
           description: >
-                                        <h5>Taiwan</h5>
-                                        <h6>Sunset over City of Taipei</h6>
+                                        <h2>Taiwan</h2>
+                                        <h3>Sunset over City of Taipei</h3>
 
         - image:                        # image 12
           file:                         ethan-brooke_b.jpg
           caption_text:                 South Korea &middot; Lotte World Tower Seoul
           description: >
-                                        <h5>South Korea</h5>
-                                        <h6>Lotte World Tower Seoul</h6>
+                                        <h2>South Korea</h2>
+                                        <h3>Lotte World Tower Seoul</h3>
 
 
     # ==========================================================================
@@ -353,9 +353,9 @@ settings:
           tweet_prefix:                 Try video
           caption_text:                 Peck Pocketed &middot; Student Academy Award winning Cartoon Clip
           description: >
-                                        <h5>Peck Pocketed by Kevin Herron | Disney Favorite</h5>
-                                        <h6>Student Academy Award winning Cartoon Clip</h6>
-                                        <br>
+                                        <h2>Peck Pocketed by Kevin Herron | Disney Favorite</h2>
+                                        <h3>Student Academy Award winning Cartoon Clip</h3>
+
           tracks:
             - track:
               default:                  true                                    # Indicates that the track is to be enabled if the user's preferences do not indicate that another track would be more appropriate
@@ -383,9 +383,8 @@ settings:
           tweet_prefix:                 Try video
           caption_text:                 Rollin` Wild &middot; Short Funny animated video clip created at the Film Academy
           description: >
-                                        <h5>Rollin` Wild</h5>
-                                        <h6>Short Funny Animated Clip created at the Film Academy</h6>
-                                        <br>
+                                        <h2>Rollin` Wild</h2>
+                                        <h3>Short Funny Animated Clip created at the Film Academy</h3>
 
     # --------------------------------------------------------------------------
     # Online VIDEO Tylor Swift (YouTube)
@@ -469,9 +468,8 @@ settings:
           tweet_prefix:                 Try video
           caption_text:                 Fortnight (feat. Post Malone) &middot; Official Music Video
           description: >
-                                        <h5>Tylor Swift</h5>
-                                        <h6>Fortnight (feat. Post Malone) &middot; Official Music Video</h6>
-                                        <br>
+                                        <h2>Tylor Swift</h2>
+                                        <h3>Fortnight (feat. Post Malone) &middot; Official Music Video</h3>
 
         - video:                        # video 2
           enabled:                      true
@@ -485,9 +483,8 @@ settings:
           tweet_prefix:                 Try video
           caption_text:                 Fortnight (feat. Post Malone) &middot; Behind the Scenes
           description: >
-                                        <h5>Tylor Swift</h5>
-                                        <h6>Fortnight (feat. Post Malone) &middot; Behind the Scenes</h6>
-                                        <br>
+                                        <h2>Tylor Swift</h2>
+                                        <h3>Fortnight (feat. Post Malone) &middot; Behind the Scenes</h3>
 
 #         - video:                        # video 2
 #           enabled:                      true
@@ -500,9 +497,9 @@ settings:
 #           pinterest_prefix:             Pin video
 #           tweet_prefix:                 Try video
 #           description: >
-#                                         <h5>Tylor Swift</h5>
-#                                         <h6>I Can Do With a Broken Heart</h6>
-#                                         <br>
+#                                         <h2>Tylor Swift</h2>
+#                                         <h3>I Can Do With a Broken Heart</h3>
+#                                         
 #           caption:
 #             text:                       I Can Do With a Broken Heart &middot; Tylor Swift
 #           poster:
@@ -527,9 +524,9 @@ settings:
 #           pinterest_prefix:             Pin video
 #           tweet_prefix:                 Try video
 #           description: >
-#                                         <h5>Tylor Swift</h5>
-#                                         <h6>The Tortured Poets Department (Official Lyric Video)</h6>
-#                                         <br>
+#                                         <h2>Tylor Swift</h2>
+#                                         <h3>The Tortured Poets Department (Official Lyric Video)</h3>
+#                                         
 #           caption:
 #             text:                       The Tortured Poets Department (Official Lyric Video) &middot; Tylor Swift
 #           poster:
@@ -545,9 +542,9 @@ settings:
 #           pinterest_prefix:             Pin video
 #           tweet_prefix:                 Try video
 #           description: >
-#                                         <h5>Tylor Swift</h5>
-#                                         <h6>My Boy Only Breaks His Favorite Toys (Official Lyric Video)</h6>
-#                                         <br>
+#                                         <h2>Tylor Swift</h2>
+#                                         <h3>My Boy Only Breaks His Favorite Toys (Official Lyric Video)</h3>
+#                                         
 #           caption:
 #             text:                       My Boy Only Breaks His Favorite Toys (Official Lyric Video) &middot; Tylor Swift
 #           poster:
@@ -635,13 +632,13 @@ settings:
           tweet_prefix:                 Try video
           caption_text:                 Carpool Karaoke 2015 &middot; James and Adele
           description: >
-                                        <h5>Carpool Karaoke 2015</h5>
-                                        <h6>
-                                        December 2015 - James is on holidays is about the holidays in
-                                        London and gets Adele off for a ride through the city. On the way
-                                        they sing some of their biggest hits.
-                                        </h6>
-                                        <br>
+                                        <h2>Carpool Karaoke 2015</h2>
+                                        <h3>
+                                          December 2015 - James is on holidays is about the holidays in
+                                          London and gets Adele off for a ride through the city. On the way
+                                          they sing some of their biggest hits.
+                                        </h3>
+
           playerParams:
             start:                      50                                      # seconds to start
 
@@ -657,12 +654,12 @@ settings:
           tweet_prefix:                 Try video
           caption_text:                 Carpool Karaoke 2023 &middot; Last Carpool Karaoke
           description: >
-                                        <h5>Carpool Karaoke 2023</h5>
-                                        <h6>
+                                        <h2>Carpool Karaoke 2023</h2>
+                                        <h3>
                                           April 2023 - Adele wakeup James at home for the last Late Night Show,
                                           for the last Carpool Caraoke ever.
-                                        </h6>
-                                        <br>
+                                        </h3>
+
           playerParams:
             start:                      50                                      # seconds to start
 
@@ -742,9 +739,9 @@ settings:
           tweet_prefix:                 Try video
           caption_text:                 Forever 21 &middot; Kick It Old School
           description: >
-                                        <h5>Forever 21</h5>
-                                        <h6>Kick It Old School</h6>
-                                        <br>
+                                        <h2>Forever 21</h2>
+                                        <h3>Kick It Old School</h3>
+
           playerParams:
             start:                      50                                      # seconds to start
 
@@ -754,15 +751,17 @@ settings:
           name:                         Forever 21
           type:                         vimeo
           size:                         1280-720
-          source:                       //vimeo.com/202117650
-          poster_image:                 stay_colorful.jpg
+          source:                       //vimeo.com/33929033
+          poster_image:                 fall_2011.jpg
           pinterest_prefix:             Pin video
           tweet_prefix:                 Try video
-          caption_text:                 Forever 21 &middot; Stay Colorful, Babe!
+          caption_text:                 Forever 21 &middot; Fall 2011
           description: >
-                                        <h5>Forever 21</h5>
-                                        <h6>Stay Colorful, Babe!</h6>
-                                        <br>
+                                        <h2>Forever 21</h2>
+                                        <h3>Fall 2011</h3>
+
+          playerParams:
+            start:                      50                                      # seconds to start
 
     # --------------------------------------------------------------------------
     # Online VIDEO (Dailymotion)
@@ -835,9 +834,8 @@ settings:
           tweet_prefix:                 Try video
           caption_text:                 SELF Channel &middot; Morning Energy
           description: >
-                                        <h5>SELF Channel</h5>
-                                        <h6>Guided Meditation: Morning Energy</h6>
-                                        <br>
+                                        <h2>SELF Channel</h2>
+                                        <h3>Guided Meditation: Morning Energy</h3>
 
         - video:                        # video 2
           enabled:                      true
@@ -851,9 +849,8 @@ settings:
           tweet_prefix:                 Try video
           caption_text:                 SELF Channel &middot; Pilates Core Workout
           description: >
-                                        <h5>SELF Channel</h5>
-                                        <h6>Beginner Mat Pilates: Core Workout</h6>
-                                        <br>
+                                        <h2>SELF Channel</h2>
+                                        <h3>Beginner Mat Pilates: Core Workout</h3>
 
     # --------------------------------------------------------------------------
     # HTML5 VIDEO (over VodeoJS)
@@ -960,8 +957,8 @@ settings:
           tweet_prefix:                 Try video
           caption_text:                 Peck Pocketed &middot; Student Academy Award winning Cartoon Clip
           description: >
-                                        <h5>Peck Pocketed by Kevin Herron | Disney Favorite</h5>
-                                        <h6>Student Academy Award winning Cartoon Clip</h6>
+                                        <h2>Peck Pocketed by Kevin Herron | Disney Favorite</h2>
+                                        <h3>Student Academy Award winning Cartoon Clip</h3>
 
         # - video:                        # video 2
         #   enabled:                      true
@@ -975,8 +972,8 @@ settings:
         #   tweet_prefix:                 Try video
         #   caption_text:                 Rollin` Wild &middot; Short Funny animated video clip created at the Film Academy
         #   description: >
-        #                                 <h5>Rollin` Wild</h5>
-        #                                 <h6>Short Funny Animated Clip created at the Film Academy</h6>
+        #                                 <h2>Rollin` Wild</h2>
+        #                                 <h3>Short Funny Animated Clip created at the Film Academy</h3>
 
         - video:                        # video 2
           enabled:                      true
@@ -990,12 +987,11 @@ settings:
           tweet_prefix:                 Try video
           caption_text:                 Carpool Karaoke 2023 &middot; Last Carpool Karaoke
           description: >
-                                        <h5>Carpool Karaoke 2023</h5>
-                                        <h6>
+                                        <h2>Carpool Karaoke 2023</h2>
+                                        <h3>
                                           April 2023 - Adele wakeup James at home for the last Late Night Show,
                                           for the last Carpool Caraoke ever.
-                                        </h6>
-                                        <br>
+                                        </h3>
           playerParams:
             start:                      50                                      # seconds to start
 

data/lib/starter_web/_data/modules/navigator_menu.yml

@@ -24,13 +24,13 @@
   sublevel:
 
     - title:                            Image
-      href:                             /pages/public/tour/present_images/
+      href:                             /pages/public/tour/image_data/
       icon:                             image
     - title:                            Audio
-      href:                             /pages/public/tour/present_audio/
+      href:                             /pages/public/tour/audio_data/
       icon:                             volume-high
     - title:                            Video
-      href:                             /pages/public/tour/present_video/
+      href:                             /pages/public/tour/video_data/
       icon:                             video
 
     - title:                            Typography

data/lib/starter_web/_data/resources.yml

@@ -1320,9 +1320,9 @@ resources:
 
       data:
         css:                            [
-                                          modules/lightGallery/css/lightgallery-bundle,
                                           modules/lightGallery/css/lg-transitions,
-                                          modules/lightGallery/css/themes/uno/uno
+                                          modules/lightGallery/css/lightgallery-bundle,
+                                          modules/lightGallery/css/theme/uno/uno
                                         ]
         files:                          []
         js:                             [
@@ -1362,24 +1362,28 @@ resources:
       data:
         css:                            [
                                           modules/videojs/css/videojs,
-                                          modules/videojs/css/plugins/controls/skipbuttons,
-                                          modules/videojs/css/plugins/controls/zoom,
                                           modules/videojs/css/themes/city,
                                           modules/videojs/css/themes/fantasy,
                                           modules/videojs/css/themes/forest,
                                           modules/videojs/css/themes/sea,
-                                          modules/videojs/css/themes/uno
+                                          modules/videojs/css/themes/uno,
+                                          modules/videojs/plugins/controls/aspect-ratio-panel/css/aspect-ratio-panel,
+                                          modules/videojs/plugins/controls/skipbuttons/css/skipbuttons,
+                                          modules/videojs/plugins/controls/zoom/css/zoom
                                         ]
         files:                          [ adapter/js/videojs.js ]
         js:                             [
                                           modules/videojs/js/video,
-                                          modules/videojs/js/plugins/controls/hotkeys/hotkeys,
-                                          modules/videojs/js/plugins/controls/skipbuttons/skipbuttons,
-                                          modules/videojs/js/plugins/controls/zoom/zoom,
-                                          modules/videojs/js/plugins/players/dm/dailymotion,
-                                          modules/videojs/js/plugins/players/vm/vimeo,
-                                          modules/videojs/js/plugins/players/wt/wistia,
-                                          modules/videojs/js/plugins/players/yt/youtube
+                                          modules/videojs/plugins/controls/aspect-ratio-panel/js/aspect-ratio-panel,
+                                          modules/videojs/plugins/controls/hotkeys/js/hotkeys,
+                                          modules/videojs/plugins/controls/skipbuttons/js/skipbuttons,
+                                          modules/videojs/plugins/controls/persist-settings/js/videojs-persist,
+                                          modules/videojs/plugins/controls/playbackrate-adjuster/js/playbackrate-adjuster,
+                                          modules/videojs/plugins/controls/zoom/js/zoom,
+                                          modules/videojs/plugins/players/dm/js/dailymotion,
+                                          modules/videojs/plugins/players/vm/js/vimeo,
+                                          modules/videojs/plugins/players/wt/js/wistia,
+                                          modules/videojs/plugins/players/yt/js/youtube
                                         ]
         init_function:                  [ j1.adapter.videojs.init ]
 

data/lib/starter_web/_data/templates/feed.xml

@@ -57,7 +57,7 @@
   <id>{{ page.url | absolute_url | xml_escape }}</id>
   <post_limited>{{ limit_posts }}</post_limited>
   <template_name>J1 Theme</template_name>
-  <template_version>2024.3.22</template_version>
+  <template_version>2024.3.23</template_version>
 
   {% assign title = site.title | default: site.name %}
   {% if page.collection != "posts" %}

data/lib/starter_web/_plugins/asciidoctor/videojs-block.rb

@@ -107,30 +107,30 @@ Asciidoctor::Extensions.register do
 
             // =================================================================
             // take over VideoJS configuration data (JSON data from Ruby)
-            // -----------------------------------------------------------------            
-            var videojsDefaultConfigJson = '#{videojsDefaultSettingsJson}';
-            var videojsUserConfigJson    = '#{videojsUserSettingsJson}';
+            // -----------------------------------------------------------------
+            var videojsDefaultConfigJson  = '#{videojsDefaultSettingsJson}';
+            var videojsUserConfigJson     = '#{videojsUserSettingsJson}';
 
             // create config objects from JSON data
-            var videojsDefaultSettings   = JSON.parse(videojsDefaultConfigJson);
-            var videojsUserSettings      = JSON.parse(videojsUserConfigJson);
+            var videojsDefaultSettings    = JSON.parse(videojsDefaultConfigJson);
+            var videojsUserSettings       = JSON.parse(videojsUserConfigJson);
 
             // merge config objects (jQuery)
-            var videojsConfig = $.extend(true, {}, videojsDefaultSettings.defaults, videojsUserSettings.settings);
+            var videojsConfig             = $.extend(true, {}, videojsDefaultSettings.defaults, videojsUserSettings.settings);
 
             // =================================================================
             // VideoJS player settings
             // -----------------------------------------------------------------
-            const vjsPlayerType     = 'native';
-            const vjsPlaybackRates  = videojsConfig.playbackRates.values;
+            const vjsPlayerType           = 'native';
+            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;
+            // -----------------------------------------------------------------
+            const piAutoCaption           = videojsConfig.plugins.autoCaption;
+            const piHotKeys               = videojsConfig.plugins.hotKeys;
+            const piSkipButtons           = videojsConfig.plugins.skipButtons;
+            const piZoomButtons           = videojsConfig.plugins.zoomButtons;
 
             // =================================================================
             // helper functions
@@ -147,21 +147,21 @@ Asciidoctor::Extensions.register do
                 // insert div|caption container AFTER the image
                 image.parentNode.insertBefore(newDiv, image.nextSibling);
               } else {
-                console.error(`Kein Bild mit src="${imageSrc}" gefunden.`);
+                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;
+              var pageState       = $('#content').css("display");
+              var pageVisible     = (pageState == 'block') ? true : false;
+              var j1CoreFinished  = (j1.getState() === 'finished') ? true : false;
 
               if (j1CoreFinished && pageVisible) {
-                var vjs_player  = document.getElementById("#{video_id}");
-                var appliedOnce = false;
+                var vjs_player    = document.getElementById("#{video_id}");
+                var appliedOnce   = false;
 
                 // add|skip captions (on poster image)
                 if ('#{caption_enabled}' === 'true') {
@@ -172,6 +172,34 @@ Asciidoctor::Extensions.register do
                 videojs("#{video_id}").ready(function() {
                   var vjsPlayer = this;
 
+                  // add custom progressControlSilder
+                  // -----------------------------------------------------------
+
+                  // 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) {
@@ -234,15 +262,7 @@ Asciidoctor::Extensions.register do
                       forward:        piSkipButtons.forward,
                     });
                   }
-
-
-                  // TODO:
-                  // -----------------------------------------------------------
-                  // Check if plugin ZoomButtons possible to be used for 
-                  // this extension. Disabled for now.
-                  // ------------------------------------------------------------
-                  piZoomButtons.enabled = false; 
-                  
+                                 
                   // add|skip zoomButtons plugin
                   //
                   if (piZoomButtons.enabled && vjsPlayerType === 'native') {
@@ -276,7 +296,7 @@ Asciidoctor::Extensions.register do
                   var scrollOffset        = (window.innerWidth >= 720) ? -130 : -110;
 
                   // scroll page to the players top position
-                  // -------------------------------------------------------------                  
+                  // ------------------------------------------------------------
                   window.scrollTo(0, targetDivPosition + scrollOffset);
 
                 }); // END EventListener 'click'