j1_template 2019.4.8 → 2019.4.10

data/lib/starter_web/pages/public/start/roundtrip/000_whats_up.adoc

@@ -0,0 +1,63 @@
+---
+title:                                  Roundtrip
+tagline:                                step in
+description:                            What to get
+
+tags:                                   [ Start, Template, Whats, Up, Readme, TL;DR ]
+index:                                  []
+categories:                             [ pages ]
+
+permalink:                              /pages/public/start/roundtrip/whats_up/
+regenerate:                             false
+
+resources:                              [ lightbox ]
+resource_options:
+  - attic:
+      opacity:                          0.5
+      slides:
+        - url:                          /assets/images/attics/the-place-1920x1280-bw.jpg
+          alt:                          Photo by Tim Mossholder on Unsplash
+          badge:
+            type:                       unsplash
+            author:                     Tim Mossholder
+            href:                       https://unsplash.com/@timmossholder/portfolio
+---
+
+// Enable the Liquid Preprocessor
+//
+:page-liquid:
+
+// Set other global page attributes here                                          
+// -------------------------------------------------------------------
+
+
+{% comment %} Liquid procedures
+--------------------------------------------------------------- {% endcomment %}
+{% capture set_env_entry_document %}themes/{{site.template.name}}/procedures/global/set_env_entry_document.proc{%endcapture%}
+
+
+// NOTE: Initialize entry document paths
+//
+{% include {{set_env_entry_document}} init_folders=all %}
+
+// Load tags and urls
+// -----------------------------------------------------------------------------
+include::{includedir}/attributes.asciidoc[tag=tags]
+include::{includedir}/attributes.asciidoc[tag=urls]
+include::{includedir}/attributes.asciidoc[tag=data]
+
+// Additional Asciidoc page attributes goes here
+//
+
+This is for you when you're yust too lazy to read the whole stuff.
+
+lorem:sentences[5]
+
+== Whats up
+
+lorem:sentences[5]
+
+lorem:sentences[3]
+
+
+

data/lib/starter_web/pages/public/start/roundtrip/100_present_images.adoc

@@ -2,7 +2,7 @@
 #scrollbar:                              true
 
 title:                                  Roundtrip
-tagline:                                Various ways to present Image Data
+tagline:                                present images
 description:                            J1 Template Roundtrip - Present image based data
 
 tags:                                   [ Template, Roundtrip, Images ]
@@ -19,38 +19,18 @@ resources:                              [
                                           lightbox, light_gallery, bs_gallery
                                         ]
 resource_options:
-  - masthead:
-      padding_top:                      300
-      padding_bottom:                   50
-      margin_bottom:                    50
-      background_color:
-        color_1:                        "#162126"
-        color_2:                        "#849191"
-      mute:                             true
-      loop:                             false
-      preload:                          5
-
+  - attic:
+      opacity:                          0.5
       slides:
-        # Victoria Oskolovich - still image 1
-        - url:                          /assets/videos/headers/still/victoria-oskolovich-on-vimeo.png
-          alt:                          Victoria Oskolovich on Vimeo
-          alignY:                       top
-          animateFirst:                 false
-        # Victoria Oskolovich on Vimeo
-        - url:                          https://github.com/jekyll-one-org/jekyll-one-lfs/raw/master/videos/victoria-oskolovich-on-vimeo.mp4
-          alignY:                       0
-          isVideo:                      true
-          loop:                         true
-          duration:                     12000
-        # Victoria Oskolovich - still image 2
-        - url:                          /assets/videos/headers/still/victoria-oskolovich-on-vimeo.png
-          alt:                          Victoria Oskolovich on Vimeo
-          alignY:                       top
-          transitionDuration:           750
-          transition:                   fadeInOut
+        - url:                          /assets/images/pages/roundtrip/images-1920x1280-bw.jpg
+          alt:                          Photo by Ricardo Gomez Angel on Unsplash
+          badge:
+            type:                       unsplash
+            author:                     Ricardo Gomez Angel
+            href:                       https://unsplash.com/@ripato/portfolio
 ---
 
-// Enable the Liquid Preprocessor 
+// Enable the Liquid Preprocessor
 // -----------------------------------------------------------------------------
 :page-liquid:
 
@@ -134,7 +114,7 @@ Find below an example of using the lightbox Lightbox *standalone*. See how
 *single* (individual) images are linked for the use with *Lightbox*.
 
 .A Lightbox block for standalone images
-lightbox::example-standalone[ 400, {data-images-standalone} ] 
+lightbox::example-standalone[ 400, {data-images-standalone} ]
 
 For a *group* of images (image sets), *Lightbox* support image *groups*. Click
 on the images below to see how *Lightbox* manage image groups.
@@ -339,81 +319,13 @@ seen it in use all over the Internet!
 carousel::jg_live_demo[role="mb-5"]
 
 
-=== HTML5 Video Galleries
-
-Playing video on a web page 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.
-
-*HTML5 Video* open the doors to *your way* presenting video content. Modern
-browsers support the video tag `<video>` for the HTML5 Video standard. Browsers
-have a build-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:
-
-. videos from *local* files (your web space)
-. videos from *online* sources (on the Internet) like YouTube, Vimeo, etc.
-
-The combination of the App *gallery* and the lightbox *LightGallery* is quite
-usable for all the video content you want to present on your site. Galleries
-can be placed elsewhere with your content. You can use them for video blogs
-for example by placing them into your blog articles content.
-
-WARNING: *LightGallery* can be used *for free* for *private use* but for
-business use, a *commercial license* is needed. See link:{light-gallery-license}[Light Gallery license]
-how to use LightGallery for *commercial* webs and projects.
-
-==== Local video content
-
-Digital image content, simple pictures or vidoes, are quite easy to make.
-Today, each and every mobile has a camera - not that bad! Presenting a bunch
-of (digital) pictures is very easy by using *Justified Gallery* for example.
-Videos created by a digi cam or a mobile can played by J1 Template using the
-*HTML5 Video support of *LightGallery*.
-
-Two players are available with *LightGallery*:
-
-. a internal player used by default
-. http://www2.videojs.com/[video.js], a excellent Javascript video library
-
-.HTML5 Video Gallery
-carousel::bg_video_html5[role="mb-5"]
-
-NOTE: The HTML5 specification does _not_ define which video and audio formats
-browsers _should_ support. J1 *LightGallery* supports all _typical_ types of
-HTML5 Video formats browsers support today such as *MP4*, *WebM*, and *Ogg*.
-
-==== Online video content
-
-The Internet is full of interesting content. Video content is very popular,
-the number of channels at e.g. _YouTube_ is enormous. If you want to present
-video content from the Internet, e.g. your channnel, the online video
-support of J1 Template may a good choice. Find some enjoyable videos from
-*James Cordon's* channel: *Carpool Karaoke*.
-
-.Youtube Video Gallery
-carousel::bg_video_online[role="mb-5"]
-
-
-== What's next?
-
-You've found cards for your web that fit your needs? If so, really great.
+== What's next
 
-Content counts - no way. If a page is opened, yes a great one, the very first
-what your vistors will see is what is top most on a page - a header. A header
-is somewhat like an intro. Very important to make a reader feel right on a
-page. Or interested to go for reading.
+lorem:sentences[3].
 
-Beside simple text headers, J1 support *Image Headers* using pictures or videos.
-To create eye-catching headers no expensive software is needed.
+lorem:sentences[3]
 
-What? Find out how it works: link:{roundtrip-typography}[J1 Typography].
+What? Find out how it works: link:{roundtrip-present-videos}[Present videos].
 
 
 /////

data/lib/starter_web/pages/public/start/roundtrip/100_present_videos.adoc

@@ -0,0 +1,159 @@
+---
+#scrollbar:                              true
+
+title:                                  Roundtrip
+tagline:                                present videos
+description:                            J1 Template Roundtrip - Present video based data
+
+tags:                                   [ Template, Roundtrip, Video ]
+index:                                  []
+categories:                             [ pages ]
+
+toc:                                    true
+
+permalink:                              /pages/public/start/roundtrip/present_videos/
+regenerate:                             false
+
+resources:                              [ lightbox, light_gallery, bs_gallery ]
+resource_options:
+  - attic:
+      background_color:
+        color_1:                        md_grey_100
+        color_2:                        md_grey_400
+      slides:
+        # Broadway Underground - still image (animate default)
+        - url:                          /assets/videos/headers/still/underground-broadway.png
+          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:                         true
+          duration:                     12000
+        # Broadway Underground - still image (animate random)
+        - url:                          /assets/videos/headers/still/underground-broadway.png
+          alt:                          Broadway Underground
+          alignY:                       top
+          transition:                   push_left|push_right|cover_up|cover_down|fade|fadeInOut
+
+---
+
+// Enable the Liquid Preprocessor 
+// -----------------------------------------------------------------------------
+:page-liquid:
+
+// Set other global page attributes here
+// -----------------------------------------------------------------------------
+//:my-asciidoc-attribute:
+
+//  Load Liquid procedures
+// -----------------------------------------------------------------------------
+{% capture set_env_entry_document %}themes/{{site.template.name}}/procedures/global/set_env_entry_document.proc{%endcapture%}
+{% capture set_image_block %}themes/{{site.template.name}}/procedures/global/set_image_block.proc{%endcapture%}
+
+// Initialize entry document environmental attributes
+// -----------------------------------------------------------------------------
+{% include {{set_env_entry_document}} %}
+
+// Load tag, url and data attributes
+// -----------------------------------------------------------------------------
+include::{includedir}/attributes.asciidoc[tag=tags]
+include::{includedir}/attributes.asciidoc[tag=urls]
+include::{includedir}/attributes.asciidoc[tag=data]
+
+// Set local page attributes
+// -----------------------------------------------------------------------------
+:images-dir:                            {imagesdir}/pages/roundtrip/100_present_images
+
+// NOTE: Place an excerpt at the most top position
+// -----------------------------------------------------------------------------
+// Page excerpt text ..
+//
+// [role="clearfix mb-3"]
+// excerpt__end
+
+// Page content
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+Playing video on a web page 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* open the doors to *your way* presenting video content. Modern
+browsers support the video tag `<video>` for the HTML5 Video standard. Browsers
+have a build-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:
+
+. videos from *local* files (your web space)
+. videos from *online* sources (on the Internet) like YouTube, Vimeo, etc.
+
+The combination of the App *gallery* and the lightbox *LightGallery* is quite
+usable for all the video content you want to present on your site. Galleries
+can be placed elsewhere with your content. You can use them for video blogs
+for example by placing them into your blog articles content.
+
+WARNING: *LightGallery* can be used *for free* for *private use* but for
+business use, a *commercial license* is needed. See link:{light-gallery-license}[Light Gallery license]
+how to use LightGallery for *commercial* webs and projects.
+
+=== Local video content
+
+Digital image content, simple pictures or vidoes, are quite easy to make.
+Today, each and every mobile has a camera - not that bad! Presenting a bunch
+of (digital) pictures is very easy by using *Justified Gallery* for example.
+Videos created by a digi cam or a mobile can played by J1 Template using the
+*HTML5 Video support of *LightGallery*.
+
+Two players are available with *LightGallery*:
+
+. a internal player used by default
+. http://www2.videojs.com/[video.js], a excellent Javascript video library
+
+.HTML5 Video Gallery
+carousel::bg_video_html5[role="mb-5"]
+
+NOTE: The HTML5 specification does _not_ define which video and audio formats
+browsers _should_ support. J1 *LightGallery* supports all _typical_ types of
+HTML5 Video formats browsers support today such as *MP4*, *WebM*, and *Ogg*.
+
+=== Online video content
+
+The Internet is full of interesting content. Video content is very popular,
+the number of channels at e.g. _YouTube_ is enormous. If you want to present
+video content from the Internet, e.g. your channnel, the online video
+support of J1 Template may a good choice. Find some enjoyable videos from
+*James Cordon's* channel: *Carpool Karaoke*.
+
+.Youtube Video Gallery
+carousel::bg_video_online[role="mb-5"]
+
+
+== What's next
+
+lorem:sentences[3].
+
+lorem:sentences[3]
+
+What? Find out how it works: link:{roundtrip-typography}[Typography].
+
+
+/////
+== What's next?
+
+Hopefully you've enjoyed exploring the possibilities J1 offers for managing
+and displaying digital image content. But much, much more can the J1 do for
+your web.
+
+Incredible?  See the next example page link:{roundtrip-cards}[to check what Cards are all about].
+/////

data/lib/starter_web/pages/public/start/roundtrip/200_typography.adoc

@@ -1,7 +1,7 @@
 ---
 title:                                  Roundtrip
-tagline:                                Typography - A crucial Branding Element
-description:                            J1 Template Roundtrip - Typography - A crucial Branding Element
+tagline:                                typography
+description:                            Typography, a crucial branding element
 
 tags:                                   [ Template, Roundtrip, Typography ]
 index:                                  []
@@ -12,14 +12,15 @@ regenerate:                             false
 
 resources:                              []
 resource_options:
-  - masthead:
-      opacity:                          0.2
+  - attic:
+      opacity:                          0.3
       slides:
-        - url:                          /assets/images/pages/roundtrip/typography-1920.jpg
+        - url:                          /assets/images/pages/roundtrip/typography-1920x1280-bw.jpg
           alt:                          Photo by Alice Donovan Rousel on Unsplash
-          caption:                      Photo by Alice Donovan Rouse on Unsplash
-          caption_href:                 https://unsplash.com/alicekat/portfolio
-          caption_color:                rgba(255, 255, 255, 0.8)
+          badge:
+            type:                       unsplash
+            author:                     Alice Donovan Rousel
+            href:                       https://unsplash.com/@alicekat/portfolio
 ---
 
 // Enable the Liquid Preprocessor
@@ -106,8 +107,8 @@ will happen in terms of responsiveness.
 
 ++++
 <div>
-  <button type="button" name="toggle-r-text" class="btn btn-primary btn-raised btn-flex mt-3 mb-3">
-    <i class="toggle-button mdi mdi-toggle-switch-off mdi-lg mdi-md-indigo-50 mr-1"></i>
+  <button type="button" name="toggle-r-text" class="btn btn-secondary btn-raised 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="card card-flat mb-4">
@@ -162,8 +163,8 @@ of the text in action.
 
 ++++
 <div>
-  <button type="button" name="scale-r-text" class="btn btn-primary btn-raised btn-flex mt-3 mb-3">
-    <i class="scale-button mdi mdi-arrow-up mdi-lg mdi-md-indigo-50 mr-1"></i>
+  <button type="button" name="scale-r-text" class="btn btn-secondary btn-raised 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="card card-flat mb-4">
@@ -260,7 +261,7 @@ voluptua.
 
 |===============================================================================
 
-
+//////////
 === Text in Action
 
 User interfaces (UI) enable vistors to interact with a page, explore things
@@ -499,9 +500,9 @@ used. All Bootstrap base classes can be used to colorize:
   </div>
 </div>
 ++++
+//////////
 
-
-== What's next?
+== What's next
 
 Have you enjoyed playing with text? We hope so. But more on can the J1 do for
 your web pages. With the examples on that page, icons were used to support the

data/lib/starter_web/pages/public/start/roundtrip/300_icon_fonts.adoc

@@ -1,6 +1,6 @@
 ---
 title:                                  Roundtrip
-tagline:                                Icon Fonts
+tagline:                                icon fonts
 description:                            J1 Template Roundtrip - Icon Fonts
 
 tags:                                   [ Template, Roundtrip, Material, Design, MDI, Font Awesome, Icon, Fonts ]
@@ -12,14 +12,15 @@ regenerate:                             false
 
 resources:                              []
 resource_options:
-  - masthead:
+  - attic:
       opacity:                          0.5
       slides:
-        - url:                          /assets/images/pages/roundtrip/icon-fonts-1920.jpg
+        - url:                          /assets/images/pages/roundtrip/icon-fonts-1920x1280-bw.jpg
           alt:                          Photo by Harpal Singh on Unsplash
-          caption:                      Photo by Harpal Singh on Unsplash
-          caption_href:                 https://unsplash.com/aquatium/portfolio
-          caption_color:                rgba_lighten_800
+          badge:
+            type:                       unsplash
+            author:                     Harpal Singh
+            href:                       https://unsplash.com/@aquatium
 ---
 
 // Enable the Liquid Preprocessor
@@ -316,7 +317,7 @@ link:{fontawesome-get-started}[Get started, window="_blank"] pages to learn
 the basics and features and styles.
 
 
-== What's next?
+== What's next
 
 Hopefully you've enjoyed the possibilities J1 offers for managing and
 manipulating *Font Icons*. Do you think these Icons sets fit your needs?
@@ -324,4 +325,4 @@ manipulating *Font Icons*. Do you think these Icons sets fit your needs?
 We hope so.
 
 To check more features, go for the link:{roundtrip-asciidoc-extensions}[
-Asciidoc Extensions] made for J1!
+Asciidoc extensions] made for J1!