j1-template 2020.0.6 → 2020.0.7

data/lib/starter_web/_config.yml

@@ -53,7 +53,7 @@ environment:                            production
 # ------------------------------------------------------------------------------
 #   Sets the build version of J1 Template Gem
 #
-version:                                2020.0.6
+version:                                2020.0.7
 
 # version
 # ------------------------------------------------------------------------------

data/lib/starter_web/_data/resources.yml

@@ -690,15 +690,9 @@ resources:
       dependencies:                     false
       pass_init_data:                   false
       data:
-        css:                            [
-                                          extensions/mmenu-light/css/mmenu-light,
-                                          extensions/mmenu-light/css/themes/uno
-                                        ]
+        css:                            []
         files:                          [ adapter/js/mmenu.js ]
-        js:                             [
-                                          extensions/mmenu-light/js/mmenu-light,
-                                          extensions/mmenu-light/js/mmenu-light.polyfills
-                                        ]
+        js:                             []
         init_function:                  [ j1.adapter.mmenu.init ]
 
 # ==============================================================================

data/lib/starter_web/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "j1_starter",
-  "version": "2020.0.6",
+  "version": "2020.0.7",
   "description": "J1 Template starter Web",
   "homepage": "https://your.site",
   "author": {

data/lib/starter_web/pages/public/about/about_site.adoc

@@ -1,6 +1,6 @@
 ---
-title:                                  Abouttt
-tagline:                                J1 Template
+title:                                  J1 Template
+tagline:                                about
 description:                            Things you should know about this site
 categories:                             [ pages ]
 
@@ -37,4 +37,4 @@ lorem:sentences[5]
 
 == Hall of fame
 
-lorem:sentences[5]
+lorem:sentences[5]

data/lib/starter_web/pages/public/about/become_a_patron.adoc

@@ -1,6 +1,6 @@
 ---
-title:                                  Become a patron
-tagline:                                help us to create premium content
+title:                                  J1 Template
+tagline:                                become a patron
 description:                            Help to create premium content
 categories:                             [ pages ]
 
@@ -16,7 +16,7 @@ resource_options:
   - attic:
       padding_top:                      400
       padding_bottom:                   50
-      opacity:                          0.5 
+      opacity:                          0.5
       slides:
         - url:                          /assets/images/modules/attics/premium-1920x1280-bw.jpg
           alt:                          Photo by Anders Nord on Unsplash
@@ -29,9 +29,9 @@ resource_options:
 // Page content
 // -----------------------------------------------------------------------------
 
-_Patron_ allows fans -- the *patrons* -- to pay creators for their work. Many 
-of these creators are influencers: photographers on Instagram, comedians 
-on YouTube, podcasters that tweet, creative technicians providing useful 
+_Patron_ allows fans -- the *patrons* -- to pay creators for their work. Many
+of these creators are influencers: photographers on Instagram, comedians
+on YouTube, podcasters that tweet, creative technicians providing useful
 software, tools and tutorials.
 
 Simple like this.
@@ -40,11 +40,9 @@ Simple like this.
 == Become a Patron
 
 What does that mean? A _Patron_ support a _Creator_ for the provided content
-they love, they like to use: excellent content services -- created with passion. 
+they love, they like to use: excellent content services -- created with passion.
 
 What does a creator need to provide outstanding, useful products to the people?
 
-No surprise: time and money. What is, vice versa, quite the same. But that's not 
-all. 
-
-
+No surprise: time and money. What is, vice versa, quite the same. But that's not
+all.

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

@@ -67,7 +67,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 +124,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 +174,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]