j1-template 2020.0.4 → 2020.0.9

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

@@ -105,7 +105,7 @@ Both lightboxes are fully integrated to be used as standalone modules or to be
 used as helpers _under-the-hood_ by other apps or modules focussing on image
 data like *gallery* or *carousel*, the build-in carousel module.
 
-=== Lightbox Examples
+== Lightbox Examples
 
 Find below an example of using the lightbox Lightbox *standalone*. See how
 *single* (individual) images are linked for the use with *Lightbox*.

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

@@ -13,8 +13,8 @@ toc:                                    true
 permalink:                              /pages/public/learn/roundtrip/present_videos/
 regenerate:                             true
 
-resources:                              [ 
-                                          light_gallery, justified_gallery, video_js, 
+resources:                              [
+                                          light_gallery, justified_gallery, video_js,
                                           vimeo_player, vimeo_player, vimeo_froogaloop
                                         ]
 resource_options:
@@ -44,7 +44,7 @@ resource_options:
 
 ---
 
-// Enable the Liquid Preprocessor 
+// Enable the Liquid Preprocessor
 // -----------------------------------------------------------------------------
 :page-liquid:
 
@@ -107,7 +107,7 @@ 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
+== 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
@@ -127,7 +127,7 @@ HTML5 Video formats browsers support today such as *MP4*, *WebM*, and *Ogg*.
 .HTML5 video gallery
 gallery::jg_video_html5[role="mb-5"]
 
-=== Online video content
+== 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
@@ -141,12 +141,11 @@ gallery::jg_video_online_youtube[role="mb-5"]
 .Vimeo Video Gallery - Fashion
 gallery::jg_video_online_vimeo[role="mb-5"]
 
-
 == Whats next
 
 Images and videos are quite *visual* - and could be impressive, for sure.
 But the most visual component is *text* for all pages, for all sites on the
-Internet. To see how text could be presented great for modern responsive 
+Internet. To see how text could be presented great for modern responsive
 websites, check the section *Typography* next.
 
 What? Find out how it works. go for: link:{roundtrip-typography}[Typography].

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

@@ -10,8 +10,12 @@ categories:                             [ pages ]
 permalink:                              /pages/public/learn/roundtrip/typography/
 regenerate:                             false
 
+toc:                                    true
+
 resources:                              []
 resource_options:
+# - ssm:
+#     mode:                             menu
   - attic:
       padding_top:                      400
       padding_bottom:                   50
@@ -67,7 +71,7 @@ Typography matters for any media presenting text. Text will take on a important
 role of acting not only as plain text but will also serve as something like
 images.
 
-=== Responsive Text
+== Responsive Text
 
 One common flaw seen in many templates and frameworks (sadly to say: the same
 to Bootstrap) is a lack of support for truly *responsive text*. While elements
@@ -124,7 +128,7 @@ will happen in terms of responsiveness.
 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
+== Scaling Responsive Text
 
 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
@@ -174,7 +178,7 @@ of the text in action.
 </script>
 ++++
 
-=== Scale factors
+== Scale factors
 
 As mentioned, `r-text` comes in five levels of size. The base of `r-text` are
 the Fibonacci numbers extracted from the Fibonacci series. These numbers are

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

@@ -67,20 +67,20 @@ J1 Template support popular icons font sets out-of-the-box:
 * link:{fontawesome-home}[FontAwesome Icons V5, {window}] (FA)
 * link:{iconify-home}[Iconify Icons, {window}] (II)
 
-The icon sets MDI and FA are very good in design and have a rich set of 
-different icons for many categories used for the Web. See below some details 
+The icon sets MDI and FA are very good in design and have a rich set of
+different icons for many categories used for the Web. See below some details
 for <<Material Design Icons>> and <<FontAwesome Icons>>.
 
-Iconify Icons is not a local stored icon set like MDI or FA. All icons are 
-loaded over the *Internet* using the so-called unified open source icon 
+Iconify Icons is not a local stored icon set like MDI or FA. All icons are
+loaded over the *Internet* using the so-called unified open source icon
 framework. See section <<Iconify Icons>> for more information.
 
 
-=== Material Design Icons
+== Material Design Icons
 
-The primary icon set for J1 Template are link:{mdi-home}[Material Design Icons, {window}], 
-because it is an rich set providing more than 3300+ icons (v3.3.92). From a design 
-prospective, _MDI_ has an excellent Material Design support an comes with the 
+The primary icon set for J1 Template are link:{mdi-home}[Material Design Icons, {window}],
+because it is an rich set providing more than 3300+ icons (v3.3.92). From a design
+prospective, _MDI_ has an excellent Material Design support an comes with the
 original icon set created by _Google_ build-in.
 
 _Material Design Icons_ (MDI) is a very helpful design resource for Web Design
@@ -187,7 +187,7 @@ mdi:heart[5x md-red-900 mdi-pulsed]
 
 |===============================================================================
 
-NOTE: Using Material Design Icons with Asciidoc is quite easy as an inline macro 
+NOTE: Using Material Design Icons with Asciidoc is quite easy as an inline macro
 `mdi:` is avaialble to place icons where ever you want. See more about
 this in section link:{roundtrip-asciidoc-extensions}#icon-fonts[Asciidoc Extensions]
 
@@ -204,14 +204,12 @@ J1 implemetation regarding sizes, colors, animations etc. Go for the
 link:{previewer-mdi}[Preview Page, {window}] and check-out what's
 possible using MDI font icons!
 
+== FontAwesome Icons
 
-
-=== FontAwesome Icons
-
-FontAwesome is a font and icon toolkit based on CSS. It was originally created 
-by Dave Gandy. The previous version 4 was mainly for the use with Twitter 
-Bootstrap V3. The new version V5, released in December 2017, is focussing all 
-frameworks used for web development. Today, FA comes with 2300+ icons included. 
+FontAwesome is a font and icon toolkit based on CSS. It was originally created
+by Dave Gandy. The previous version 4 was mainly for the use with Twitter
+Bootstrap V3. The new version V5, released in December 2017, is focussing all
+frameworks used for web development. Today, FA comes with 2300+ icons included.
 
 
 [NOTE]
@@ -323,7 +321,7 @@ fas:heart[5x md-red-900 fa-pulsed]
 
 |===============================================================================
 
-NOTE: Using FontAwesome with Asciidoc is quite easy as two inline macros 
+NOTE: Using FontAwesome with Asciidoc is quite easy as two inline macros
 `fas:` and `fas:` are avaialble to place icons where ever you want. See more about
 this in section link:{roundtrip-asciidoc-extensions}#icon-fonts[Asciidoc Extensions]
 
@@ -335,7 +333,7 @@ license only. For the *Free* version, a subset of 900+ icons is available.
 NOTE: The CSS styles for FontAwesome V5 has been extended for J1 Template to
 the *same* styles (and their respective *names*) as for other Font Icon sets.
 Already existing styles like `fa-flip-vertical` is available as `fa-flip-v`
-as well. See all styles that can be used with the MDI 
+as well. See all styles that can be used with the MDI
 link:{previewer-mdi}[Preview Page, {window}].
 
 You can checkout what icons available at link:{fontawesome-icons}[FontAwesome Icons,
@@ -348,18 +346,18 @@ link:{fontawesome-get-started}[Get started, {window}] pages to learn
 the basics and features and styles.
 
 
-=== Iconify Icons
+== Iconify Icons
 
 MDI and FA are quite rich icon sets but designed for *general* use. Sometimes
 icons are missing in one of these fonts like specific *brand* or *theme*
 icons.
 
-An interesting solution for using font icons from a *remote* repository is 
-link:{iconify-home}[Iconify, {window}]. Iconify is a so-called unified 
-*open source icon framework* that makes it possible to use icons from different 
+An interesting solution for using font icons from a *remote* repository is
+link:{iconify-home}[Iconify, {window}]. Iconify is a so-called unified
+*open source icon framework* that makes it possible to use icons from different
 icon sets using one syntax.
 
-To access that framework, a Javascript client is needed. For J1 Template, the 
+To access that framework, a Javascript client is needed. For J1 Template, the
 client is available with the JS assets (/assets/themes/j1/extensions/iconify)
 and is loaded per default. To see what icon sets available with that framework,
 check the page link:{iconify-icon-sets}[Iconify Icon Sets, {window}].
@@ -417,7 +415,7 @@ iconify:medical-icon:i-ear-nose-throat[5x]
 
 |===============================================================================
 
-NOTE: Using Iconify icons with Asciidoc is quite easy as an inline macro 
+NOTE: Using Iconify icons with Asciidoc is quite easy as an inline macro
 `iconify:` is avaialble to place icons where ever you want. See more about
 this in section link:{roundtrip-asciidoc-extensions}#icon-fonts[Asciidoc Extensions]
 

data/lib/starter_web/pages/public/learn/roundtrip/400_asciidoc_extensions.adoc

@@ -78,12 +78,12 @@ additional useful extensions to the Markup language *Asciidoc* are made
 especially for documents of the Jekyll content type *pages* (but can be used
 for post or collections as well).
 
-=== Asciidoc Code
+== Asciidoc Code
 
 J1 Template adds a simple *Javascript* based on the `View Result Extension` to
 any `listingblock`. The extension adds an interactive *toggle button* `VIEW`
-to the output of an Asciidoc *listingblock box* placed to the top right of 
-the example box. If a result block `[.result]` is placed under a `listingblock`, 
+to the output of an Asciidoc *listingblock box* placed to the top right of
+the example box. If a result block `[.result]` is placed under a `listingblock`,
 clicking the toggle button `VIEW` displays (or hide) the content given by the
 `result block`.
 
@@ -120,7 +120,7 @@ for *5 seconds*. If the button `VIEW` is clicked, the result box toggles
 between open and close (the result gets hidden). That way, you can *open and
 close* the result box *at any time*.
 
-=== Asciidoc Admonitions
+== Asciidoc Admonitions
 
 All colors for all *default* admonition blocks set to the standard MD color
 set. Find available block types an their colors below.
@@ -141,14 +141,14 @@ WARNING: Icon background-color: yellow
 CAUTION: Icon background-color: red
 
 
-=== Q&A Blocks
+== Q&A Blocks
 
 *Q&A sections* are used quite often to answer popular questions. To make
-such a Q&A section more eye-minded, the additional Admonition Blocks 
+such a Q&A section more eye-minded, the additional Admonition Blocks
 `[QUESTION]` and `[ANSWER]` are available for J1 Template as Asciidoctor
 extentions.
 
-==== Question block
+=== Question block
 
 The admonition *Question block* is an extention to the Asciidoc admonition
 block types that introduce an admonition of type *question*.
@@ -167,7 +167,7 @@ What's the main tool for selecting colors?
 What's the main tool for selecting colors used for J1 Template?
 ====
 
-====  Answer block
+===  Answer block
 
 The Admonition *Answer block* is an extention to the Asciidoc admonition
 block types that introduce an admonition type of *answer* in conjunction
@@ -206,8 +206,8 @@ lightbox::block_id[ images_width, images_data [, group_name] ]
 
 NOTE: For a `lightbox::` block, images are placed in the output document
 *without* any other scaling than in *width* - they are placed using simple
-HTML `img` tags. This is fine for images *even in size*. For images in 
-different sizes, a *gallery* should be used as gallery (apps) rearrange 
+HTML `img` tags. This is fine for images *even in size*. For images in
+different sizes, a *gallery* should be used as gallery (apps) rearrange
 images to make them fit at its best for the available space.
 
 === Standalone Images
@@ -250,7 +250,6 @@ lightbox::images-standalone[ 400, {data-images-standalone} ]
 .Lightbox block for standalone images
 lightbox::images-standalone[ 400, {data-images-standalone} ]
 
-
 === Grouped Images
 
 If more than a single image is given for a `lightbox::` block, the images can be
@@ -279,9 +278,9 @@ All icon fonts are supported:
 * Twitter Emoji
 
 
-=== Material Designs Icons
- 
-*Material Designs Icons* can be used as *inline* icons by using 
+== Material Designs Icons
+
+*Material Designs Icons* can be used as *inline* icons by using
 the `mdi:` inline macro:
 
 [source, adoc, role="noclip"]
@@ -290,7 +289,7 @@ mdi:icon_name[icon_size, modifier] <1> <2> <3>
 ----
 <1> All `icon_name` can be found on the Preview page for *MDI Icon Previewer*
 <2> The `icon_size` attribute can be one of: `xs`, `sm`, `lg` and `1x` to `10x`
-<3> The `modifier` can be used to set the e.g the color (md-blue), an 
+<3> The `modifier` can be used to set the e.g the color (md-blue), an
     animation (fa-pulsed) or the orientation (fa-rotate-45)
 
 .Click on _view result_ to see how it's looks alike
@@ -307,16 +306,16 @@ mdi:font-awesome[2x, ml-3 mr-2 mb-2] Brand icon +
 mdi:apple[2x, md-indigo ml-3 mr-2] Brand icon (colored)
 ====
 
-Find all MDI Icons on page 
+Find all MDI Icons on page
 link:{previewer-mdi}[MDI Icon Previewer, {window}].
 
 NOTE: Parameters `icon_size` and `modifier` are optional. If *not* given,
 the icons `size` is set to default  (`1x`), the color to `black` and *no*
 settings for the `modifier` are applied.
 
-=== Font Awesome Icons
+== Font Awesome Icons
 
-*Font Awesome Icons* can be used as *inline* icons by using 
+*Font Awesome Icons* can be used as *inline* icons by using
 the `fas:` (solid icons) or `fab` (brand icons) inline macro:
 
 [source, adoc, role="noclip"]
@@ -325,7 +324,7 @@ fas:icon_name[icon_size, modifier] <1> <2> <3>
 ----
 <1> All `icon_name` can be found on the Preview page for *FA Icon Previewer*
 <2> The `icon_size` attribute can be one of: `xs`, `sm`, `lg` and `1x` to `10x`
-<3> The `modifier` can be used to set e.g the color (md-blue), an 
+<3> The `modifier` can be used to set e.g the color (md-blue), an
     animation (fa-pulsed) or the orientation (fa-rotate-45) of an icon
 
 .Click on _view result_ to see how it's looks alike
@@ -347,9 +346,9 @@ the icons `size` is set to default  (`1x`), the color to `black` and *no*
 settings for the `modifier` are applied.
 
 
-=== Iconify Icons
+== Iconify Icons
 
-*Iconify Icons* can be used as *inline* icons by using the `iconify:` 
+*Iconify Icons* can be used as *inline* icons by using the `iconify:`
 inline macro:
 
 [source, adoc, role="noclip"]
@@ -358,14 +357,14 @@ iconify:icon_name[icon_size, modifier] <1> <2> <3>
 ----
 <1> All `icon_name` can be found on the Preview page for *FA Icon Previewer*
 <2> The `icon_size` attribute can be one of: `xs`, `sm`, `lg` and `1x` to `10x`
-<3> The `modifier` can be used to set e.g the color (md-blue) or additional 
+<3> The `modifier` can be used to set e.g the color (md-blue) or additional
 positioning classes for margings and padding
 
 .Click on _view result_ to see how it's looks alike
 ----
 iconify:logos:opensource[2x, ml-4 mr-2 mb-2] Brand icon *OpenSource*  +
 iconify:logos:netlify[2x, ml-4 mr-2 mb-2] Brand icon *Netlify* +
-iconify:simple-icons:netlify[2x, md-red ml-4 mr-2] Brand icon *Netlify* 
+iconify:simple-icons:netlify[2x, md-red ml-4 mr-2] Brand icon *Netlify*
 ----
 
 [.result]
@@ -375,7 +374,7 @@ iconify:logos:netlify[2x, ml-4 mb-2] Brand icon *Netlify* +
 iconify:simple-icons:netlify[2x, md-red ml-4] Brand icon *Netlify*, colored
 ====
 
-Find all Iconify Icons available on page 
+Find all Iconify Icons available on page
 link:{iconify-icon-sets}[Iconify Icon Sets, {window}].
 
 [NOTE]
@@ -389,7 +388,7 @@ applied, the color settings will have *no* effect.
 ====
 
 
-=== Twitter Emoji Icons
+== Twitter Emoji Icons
 
 Twitter Emoji's can be used as *inline* icons by using the `emoji:`
 inline macro:
@@ -403,13 +402,13 @@ emoji:icon_name[icon_size] <1> <2>
 
 .Click on _view result_ to see how it's look alike
 ----
-This is an example of how you can emoji:heart[2x, pulsed mt-1] Asciidoctor 
+This is an example of how you can emoji:heart[2x, pulsed mt-1] Asciidoctor
 and Twitter Emoji emoji:smile[].
 ----
 
 [.result]
 ====
-This is an example of how you can emoji:heart[2x, pulsed mt-1] Asciidoctor 
+This is an example of how you can emoji:heart[2x, pulsed mt-1] Asciidoctor
 and Twitter Emoji emoji:smile[].
 ====
 
@@ -510,8 +509,6 @@ lorem:email[]
 
 |===============================================================================
 
-
-
 // Include documents
 // -----------------------------------------------------------------------------
 
@@ -529,7 +526,7 @@ that is needed for modern Web pages based on the Asciidoc Markup language
 generated by Jekyll. For sure!
 
 The next preview is focussing advanced Bootstrap *Modals*. The modals feature
-is currently in *beta* status, but it is a great option to customize your 
+is currently in *beta* status, but it is a great option to customize your
 user dialogs using them!
 
 Have a look for the link:{roundtrip-extended-modals}[BS modal extensions]

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

@@ -12,6 +12,8 @@ regenerate:                             false
 
 resources:                              [ lightbox ]
 resource_options:
+  - ssm:
+      mode:                             menu
   - attic:
       padding_top:                      400
       padding_bottom:                   50
@@ -61,21 +63,21 @@ resource_options:
 // -----------------------------------------------------------------------------
 
 Welcome to the pages of J1 Template. If your here first time,
-hopefully you get on that page first. For sure, there is no better 
+hopefully you get on that page first. For sure, there is no better
 place to step in.
 
-Having a menu system is great. We hope the the navigator module of J1 will 
-support you to explore this site, find what your are looking for. The site 
-of J1 has grown over the last month a lot. Many documents were seeking for 
+Having a menu system is great. We hope the the navigator module of J1 will
+support you to explore this site, find what your are looking for. The site
+of J1 has grown over the last month a lot. Many documents were seeking for
 a home. And we have really a bunch of them.
 
 To get better orientated, the site is organized for *natural reading*. As we
-use the English language for our international vistors (we are German), 
-*natural reading* means for a western language, reading from the left to the 
-right (LTR), and from top to down a page. The same to all menus, sections 
+use the English language for our international vistors (we are German),
+*natural reading* means for a western language, reading from the left to the
+right (LTR), and from top to down a page. The same to all menus, sections
 and pages.
 
-To read the site it is recommended to go for LTR. Other languages, other 
+To read the site it is recommended to go for LTR. Other languages, other
 countries and cultures go for RTL, but currently we've *no* support for RTL
 implemented.
 
@@ -84,7 +86,7 @@ For that reason, it was a good decision to start from here.
 
 == Whats up
 
-First of all, you've started already! The important first step in to find 
+First of all, you've started already! The important first step in to find
 your way to Jekyll is done. Congratiulations.
 
 The *Learn* section contains all you need to learn what Jekyll and J1 can do
@@ -96,7 +98,7 @@ With this section you'll find a:
   *J1*.
 
 . *Kickstarter* are Tutorials. The most important one to start is *Web in a Day*.
-  This tutorial guides you through all the steps to build a website using 
+  This tutorial guides you through all the steps to build a website using
   the template system Jekyll One - your site using Jekyll and the template J1.
 
 == Where to go
@@ -114,4 +116,3 @@ You're welcome!
 
 If you like, continue by walking through the roundtrip examples
 link:/pages/public/learn/roundtrip/present_images/[by starting the tour here].
-