j1_template_mde 2018.4.27 → 2018.4.28

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

@@ -130,13 +130,13 @@ 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[ 300, {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.
 
 .A Lightbox block for grouped images
-lightbox::example-group[ 200, {data-images-group}, group ]
+lightbox::example-group[ 400, {data-images-group}, group ]
 
 
 === LightGallery Example
@@ -159,14 +159,14 @@ dialog, sharing provider support and some more helpfull. Check what
   </div>
 
   <div id="lightgallery-roundtrip-example" class="imageblock mb-4" data-sub-html=".caption">
-    <a href="{images-dir}/image-3.jpg" data-sub-html="#caption1">
-      <img src="{images-dir}/thumb-3.jpg" alt="Golden Gate Bridge with San Francisco in distance">
+    <a href="{images-dir}/lightbox-image-1.jpg" data-sub-html="#caption1">
+      <img src="{images-dir}/lightbox-thumb-1.jpg" alt="Golden Gate Bridge with San Francisco in distance">
     </a>
-    <a href="{images-dir}/image-4.jpg" data-sub-html="#caption2">
-      <img src="{images-dir}/thumb-4.jpg" alt="Forest with mountains behind">
+    <a href="{images-dir}/lightbox-image-2.jpg" data-sub-html="#caption2">
+      <img src="{images-dir}/lightbox-thumb-2.jpg" alt="Forest with mountains behind">
     </a>
-    <a href="{images-dir}/image-5.jpg" data-sub-html="#caption3">
-      <img src="{images-dir}/thumb-5.jpg" alt="Bicyclist looking out over hill at ocean">
+    <a href="{images-dir}/lightbox-image-3.jpg" data-sub-html="#caption3">
+      <img src="{images-dir}/lightbox-thumb-3.jpg" alt="Bicyclist looking out over hill at ocean">
     </a>
   </div>
 

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

@@ -15,7 +15,7 @@ resource_options:
   - masthead:
       opacity:                          0.2
       slides:
-        - url:                          /assets/images/pages/roundtrip/cards-1920.jpg
+        - url:                          /"pages/roundtrip/cards-1920.jpg
           alt:                          Photo by Jack Hamilton on Unsplash
           caption:                      Photo by Jack Hamilton on Unsplash
           caption_href:                 https://unsplash.com/@jacc
@@ -350,7 +350,7 @@ lorem:sentences[4]
       <div class="card card-blog">
         <div class="card-image">
           <a href="#">
-          <img class="img" src="/assets/images/pages/roundtrip/meeting.jpg" alt="image img12.jpg">
+          <img class="img" src="/"pages/roundtrip/meeting.jpg" alt="image img12.jpg">
           </a>
         </div>
         <div class="content">

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

@@ -15,7 +15,7 @@ resource_options:
   - masthead:
       opacity:                          0.2
       slides:
-        - url:                          /assets/images/pages/roundtrip/typography-1920.jpg
+        - url:                          /"pages/roundtrip/typography-1920.jpg
           alt:                          Photo by Alice Donovan Rousel on Unsplash
           caption:                      Photo by Alice Donovan Rouse on Unsplash
           caption_href:                 https://unsplash.com/alicekat/portfolio

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

@@ -3,7 +3,7 @@ title:                                  Roundtrip
 tagline:                                Icon Fonts
 description:                            J1 Template Roundtrip - Icon Fonts
 
-tags:                                   [ Template, Roundtrip, Material, Design, MDI, FontAwesome, Icon, Fonts ]
+tags:                                   [ Template, Roundtrip, Material, Design, MDI, Font Awesome, Icon, Fonts ]
 index:                                  []
 categories:                             [ pages ]
 
@@ -15,7 +15,7 @@ resource_options:
   - masthead:
       opacity:                          0.5
       slides:
-        - url:                          /assets/images/pages/roundtrip/icon-fonts-1920.jpg
+        - url:                          /"pages/roundtrip/icon-fonts-1920.jpg
           alt:                          Photo by Harpal Singh on Unsplash
           caption:                      Photo by Harpal Singh on Unsplash
           caption_href:                 https://unsplash.com/aquatium/portfolio
@@ -53,11 +53,11 @@ include::{includedir}/attributes.asciidoc[tag=data]
 J1 template supports 2 very popular icons font sets out-of-the-box:
 
 * Material Design Icons
-* FontAwesome Icons V5
+* Font Awesome Icons V5
 
 Both icon sets 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 _MDI_ and
-_FontAweSome_.
+_Font Awesome_.
 
 === Material Design Icons
 
@@ -113,7 +113,7 @@ J1 implemetation regarding sizes, colors, animations etc. Go for the
 link:{previewer-mdi}[Preview Page, window="_blank"] and check-out what's
 possible using _MDI_ !
 
-=== FontAwesome
+=== Font Awesome Icons
 
 Font Awesome is a font and icon toolkit based on CSS and LESS. It was made by
 Dave Gandy. For version 4 mainly for use with Twitter Bootstrap V3. The new
@@ -121,7 +121,7 @@ version, Font Awesome V5 was officially released on December 7, 2017 today
 with 2300+ icons included. Version 5 comes in two packages: Font Awesome *Free*
 and the *proprietary* Font Awesome *Pro* (available for a license fee).
 
-.FontAwesome V5 Icon examples
+.Font Awesome V5 Icon examples
 ----
 Size of 1x: <i class="fas fa-1x fa-user"></i>
 Size of 3x: <i class="fas fa-3x fa-user"></i>
@@ -154,18 +154,19 @@ The free versions (all releases up to 4 and the free version for 5) are
 available under SIL Open Font License 1.1, Creative Commons Attribution 4.0,
 and MIT License.
 
-FontAwesome V5 meets the Material Design idea (of _Google_) and in compare to
+Font Awesome V5 meets the Material Design idea (of _Google_) and in compare to
 Version 4, the current version is much more than a face-lifting. The Version 5
 comes with more than 2300+ icons but many of them are available with the *Pro*
 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
+NOTE: The CSS styles for Font Awesome 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 teh MDI link:{previewer-mdi}[Preview Page, window="_blank"].
+as well. See all styles that can be used with the MDI 
+link:{previewer-mdi}[Preview Page, window="_blank"].
 
-You can checkout what icons available at link:{fontawesome-icons}[FontAweSome Icons,
-window="_blank"]. _FontAwesome_ V5 is fully integrated - no need for additional
+You can checkout what icons available at link:{fontawesome-icons}[Font Awesome Icons,
+window="_blank"]. _Font Awesome_ V5 is fully integrated - no need for additional
 resources to load. But in compare to Version 4 a lot of differences needs to be
 noticed.
 

data/lib/starter_web/pages/public/start/roundtrip/500_asciidoc_extensions.adoc

@@ -48,8 +48,6 @@ include::{includedir}/attributes.asciidoc[tag=data]
 // MAIN
 // =============================================================================
 
-// Page content
-// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
 J1 Template implements some incubating Ruby-based extensions for Asciidoctor.
 Most extensions are based on the examples given with the
@@ -66,19 +64,25 @@ 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).
 
-== View Result Extension
+== Asciidoc Extensions
+
+lorem:sentences[3]
+
+lorem:sentences[2]
+
+=== 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 a *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
+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`.
 
 The `View Result Extension` is quite useful for example sections discussing
-(Asciidoc code) and how the resulting (HTML) code would look alike.
+Asciidoc code and how the resulting (HTML) code would look alike.
 
-[source, adoc, numbered]
+[source, adoc]
 ----
   .This will have a button `VIEW` placed to the right top of the example box
   ----
@@ -108,33 +112,42 @@ 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*.
 
-== Admonition Blocks
+=== Asciidoc Admonitions
 
-Colors for Admonition Blocks set to stand MD color set.
+All colors for all *default* admonition blocks set to the standard MD color
+set. Find available block types an their colors below.
 
+.NOTE block
 NOTE: Icon background-color: indigo
 
+.TIP block
 TIP: Icon background-color: green
 
+.IMPORTANT block
 IMPORTANT: Icon background-color: orange
 
+.WARNING block
 WARNING: Icon background-color: yellow
 
+.CAUTION block
 CAUTION: Icon background-color: red
 
+lorem:sentences[3]
 
-== Additional Admonition 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 `[QUESTION]`
-and `[ANSWER]` are available for J1 Template as Asciidoctor extentions.
+*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 
+`[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 type of *question*.
+The admonition *Question block* is an extention to the Asciidoc admonition
+block types that introduce an admonition of type *question*.
 
 .Example of a question block
+[source, adoc, role="noclip"]
 ----
 [QUESTION]
 What's the main tool for selecting colors?
@@ -142,17 +155,21 @@ What's the main tool for selecting colors?
 
 [.result]
 ====
+.QUESTION
 [QUESTION]
 What's the main tool for selecting colors used for J1 Template?
 ====
 
-===  Answer block
+lorem:sentences[3]
+
+====  Answer block
 
 The Admonition *Answer block* is an extention to the Asciidoc admonition
 block types that introduce an admonition type of *answer* in conjunction
-to the admonition type of *question*.
+to the admonition of type *question*.
 
 .Example of a answer block
+[source, adoc, role="noclip"]
 ----
 [ANSWER]
 For J1 Template, go for for the Core documentation section. You'll
@@ -161,12 +178,15 @@ find the full color scheme for Material Design.
 
 [.result]
 ====
+.ANSWER
 [ANSWER]
 For J1 Template, go for the {jekyll-one-core-doc-color-scheme}[Core documentation, window="blank"] section.
 You'll find the full color scheme for *Material Design*.
 ====
 
-== Lightbox Block
+lorem:sentences[3]
+
+== Lightboxes
 
 To make the use of the built-in Lightbox easier, J1 Template offers an Asciidoc
 extension: the LightBox block macro. The `lightbox::` block macro embeds one or
@@ -174,29 +194,31 @@ more images into the output document and puts *automatically* the default
 Lightbox (lightbox) for J1 on. For all images, the `size` (width) and individual
 `caption text` can be configured.
 
-//[source, adoc, role="noclip"]
+.Lightbox Block
+[source, adoc, role="noclip"]
 ----
 .block_title
-lightbox::block_id[ images_width, images_data, group ]
+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 images to make
-them fit at its best for the available space.
+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
+=== Standalone Images
 
 For your convenience, and better readability, the *image data* should be
 defined as Asciidoc *attributes*. The *image data* is given as a *string*
 of *data pairs*:
 
+.Paired attributes
 ----
   "path/to/image-1, image-caption-1, ..."
 ----
 
-.Example of an *data attribute* for a lightbox block
+.Example of an data *attribute* for a lightbox block
 ----
 :data-images: "pages/image-1.jpg, Description 1, "pages/image-2.jpg, Description 2"
 ----
@@ -216,125 +238,149 @@ The parameter `group` for the `lightbox::` block is an *option*. If *no*
 `group` parameter is given for a block, the related images are treated as
 *standalone*.
 
-[source, adoc]
+.Lightbox block for standalone images
+[source, adoc, role="noclip"]
 ----
-.A Lightbox block for standalone images
-lightbox::images-standalone[ 250, {data-images-standalone} ]
+lightbox::images-standalone[ 400, {data-images-standalone} ]
 ----
 
-.A Lightbox block for standalone images
-lightbox::images-standalone[ 250, {data-images-standalone} ]
+.Lightbox block for standalone images
+lightbox::images-standalone[ 400, {data-images-standalone} ]
 
+lorem:sentences[5]
 
-=== Grouped images
+=== Grouped Images
 
 If more than a single image is given for a `lightbox::` block, the images can be
 grouped together to enable a simple sliding functionality through this group
 of *related* images. To *enable* grouping, the option `group` needs to be
 configured for the block.
 
-//[source, adoc]
+.Lightbox block for grouped images
+[source, adoc, role="noclip"]
 ----
-.A Lightbox block for grouped images
-lightbox::images-group[ 250, {data-images-group}, group ]
+lightbox::images-group[ 400, {data-images-group}, group_name ]
 ----
 
-.A Lightbox block for grouped images
-lightbox::images-group[ 250, {data-images-group}, group ]
+.Lightbox block for grouped images
+lightbox::images-group[ 400, {data-images-group}, group_name ]
 
+lorem:sentences[5]
 
-== Emoji Inline Macro
 
-J1 Template comes with *Twitter Emoji* V1 support for Asciidoc documents
-included. Twitter Emoji's can be used as *inline* icons by using the `emoji:`
-inline macro like this:
+== Icon Fonts
+
+lorem:sentences[5]
+
+=== Material Designs Icons
 
+J1 Template comes with *MDI* icon support for Asciidoc documents
+included. *Material Designs Icons* can be used as *inline* icons by using 
+the `mdi:` inline macro like so:
+
+[source, adoc, role="noclip"]
 ----
-Your text emoji:icon_name[icon_size] <1> <2>
+Your text mdi:icon_name[icon_size, modifier] <1> <2> <3>
 ----
-<1> All `icon_name` can be found on the Preview page for *Twitter Emoji's*
-<2> The `icon_size` attribute can be one of: `xs`, `sm`, `lg` and `1x` to `5x`
+<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 
+    animation (fa-pulsed) or the orientation (fa-rotate-45)
 
-.Click on `view result` to see what Twitter Emoji support can do for your documents.
+.Click on _view result_ to see how it's looks alike
 ----
-Faster than a emoji:turtle[3x]!
-
-This is an example of how you can emoji:heart[2x, pulsed] Asciidoctor 
-and Twitter Emoji emoji:smile[].
+Macro mdi:  mdi:account[2x, md-blue mdi-pulsed  ml-3]
+Macro mdi:  mdi:font-awesome[2x, md-indigo ml-3]
+Macro mdi:  mdi:font-awesome[3x, md-indigo ml-3]
 ----
 
 [.result]
 ====
-Faster than a emoji:turtle[3x]!
+Macro mdi:  mdi:account[2x, md-blue mdi-pulsed ml-3]
 
-This is an example of how you can emoji:heart[2x, pulsed] Asciidoctor 
-and Twitter Emoji emoji:smile[].
+Macro mdi:  mdi:font-awesome[2x, md-indigo ml-3]
+
+Macro mdi:  mdi:font-awesome[3x, md-indigo ml-3]
 ====
 
-Find all Twitter Emoji's build-in with J1 Template on page
-link:{previewer-emoji}[Emoji Icon Previewer, window="_blank"].
+Find all MDI Icons on page 
+link:{previewer-mdi}[MDI Icon Previewer, window="_blank"].
 
+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.
 
-== MDI Icon Inline Macro
+=== Font Awesome Icons
 
-J1 Template comes with *MDI* icon support for Asciidoc documents
-included. *Material Designs Icons* can be used as *inline* icons by using 
-the `mdi:` inline macro like so:
+J1 Template comes with *FA* icon support for Asciidoc documents
+included. *Font Awesome Icons* can be used as *inline* icons by using 
+the `fas:` (solid icons) or `fab` (brand icons) inline macro like so:
 
+[source, adoc, role="noclip"]
 ----
-Your text mdi:icon_name[icon_size, icon_modifier] <1> <2> <3>
+Your text fas:icon_name[icon_size, modifier] <1> <2> <3>
 ----
-<1> All `icon_name` can be found on the Preview page for *MDI Icon Previewer*
+<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 icon_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 what MDI Icon support can do for your documents
+.Click on _view result_ to see how it's looks alike
 ----
-Macro mdi:  mdi:account[2x, md-blue fa-pulsed]
-Macro mdi:  mdi:font-awesome[3x, md-indigo]
+Solid icon:  fas:account[2x, md-blue fa-pulsed ml-3]
+
+Brand icon:  fab:font-awesome[2x, md-indigo ml-3]
+
+Brand icon:  fab:font-awesome[3x, md-indigo ml-3]
 ----
 
 [.result]
 ====
-Macro mdi:  mdi:account[2x, md-blue fa-pulsed]
+Solid icon:  fas:user[2x, md-blue fa-pulsed ml-3]
 
-Macro mdi:  mdi:font-awesome[3x, md-indigo]
-====
+Brand icon:  fab:font-awesome[2x, md-indigo ml-3]
 
-Find all MDI Icons on page 
-link:{previewer-mdi}[MDI Icon Previewer, window="_blank"].
+Brand icon:  fab:font-awesome[3x, md-indigo ml-3]
+====
 
+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.
 
-== FA Icon Inline Macro
+=== Twitter Emoji Icons
 
-J1 Template comes with *FA* icon support for Asciidoc documents
-included. *FontAweSome Icons* can be used as *inline* icons by using 
-the `fas:` or `fab` inline macro like so:
+J1 Template comes with *Twitter Emoji* V1 support for Asciidoc documents
+included. Twitter Emoji's can be used as *inline* icons by using the `emoji:`
+inline macro like this:
 
+[source, adoc]
 ----
-Your text fas:icon_name[icon_size, icon_modifier] <1> <2> <3>
+Your text emoji:icon_name[icon_size] <1> <2>
 ----
-<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 icon_modifier can be used to set the e.g the color (md_blue), an 
-    animation (fa-pulsed) or the orientation (fa-rotate-45)
+<1> All `icon_name` can be found on the Preview page for *Twitter Emoji's*
+<2> The `icon_size` attribute can be one of: `xs`, `sm`, `lg` and `1x` to `5x`
 
-.Click on `view result` to see what MDI Icon support can do for your documents
+.Click on _view result_ to see how it's look alike
 ----
-Macro fas:  fas:igloo[2x, md-blue fa-pulsed]
-Macro fab:  fab:font-awesome[2x, md-indigo fa-rotate-45]
+Faster than a emoji:turtle[3x]!
+
+This is an example of how you can emoji:heart[2x, pulsed] Asciidoctor 
+and Twitter Emoji emoji:smile[].
 ----
 
 [.result]
 ====
-Macro fas:  fas:igloo[2x, md-blue fa-pulsed]
+Faster than a emoji:turtle[3x]!
 
-Macro fab:  fab:font-awesome[2x, md-indigo fa-rotate-45]
+This is an example of how you can emoji:heart[2x, pulsed] Asciidoctor 
+and Twitter Emoji emoji:smile[].
 ====
 
+Find all Twitter Emoji's build-in with J1 Template on page
+link:{previewer-emoji}[Emoji Icon Previewer, window="_blank"].
+
 
-== Lorem Inline Macro
+== Blind Text (Lorem)
 
 The Ruby *gem* Middleman, a Ruby-gem based static site generator, provides a
 set of powerful helpers for generating *random text* content. The *Lorem*
@@ -365,11 +411,12 @@ lorem:sentences[5]
 lorem:sentences[5]
 ====
 
-=== Available Lorem Macros
+=== Lorem Types
 
 All *macro* types available for `lorem:` to be used for blind *text* can be
 found with the following table below.
 
+//.Tabelle
 [cols="5,2,5a", options="header", role="table-responsive mb-2"]
 |===============================================================================
 |Macro | Type |Example