j1-template 2020.0.21 → 2020.0.22

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

@@ -15,6 +15,8 @@ advertising:                            false
 
 resources:                              []
 resource_options:
+  - toccer:
+      collapseDepth:                    3
 # - ssm:
 #     mode:                             menu
   - attic:
@@ -38,40 +40,41 @@ resource_options:
 // Enable the Liquid Preprocessor
 :page-liquid:
 
+// Set page (local) attributes here
+// -----------------------------------------------------------------------------
+// :page--attr:                         <attr-value>
+:images-dir:                            {imagesdir}/pages/roundtrip/100_present_images
+
 //  Load Liquid procedures
 // -----------------------------------------------------------------------------
 {% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
 
-// Load page attributes (all)
+// Load page attributes
 // -----------------------------------------------------------------------------
-{% include {{load_attributes}} scope="all" %}
+{% include {{load_attributes}} scope="local" %}
 
-// Set local page attributes
-// -----------------------------------------------------------------------------
-:images-dir:                            {imagesdir}/pages/roundtrip/100_present_images
 
 // Page content
-// =============================================================================
-
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 == Typography
 
-Typography serves as one the most crucial branding elements for any business.
-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.
+Typography serves as one of the most crucial branding elements for any business.
+Typography matters for any media presenting text. The text will take on an
+important role of acting not only as plain text but will also serve as
+something like images.
 
 == 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
-on a page resize fluidly, text still resizes on a fixed basis. To avoiding this
-issue, especially for heavily text focussed pages, J1 Template supports styles
-that fluidly scales text size and line-height to optimize readability for the
-user.
+to Bootstrap, including V4) is a lack of support for genuinely responsive text.
+While elements on a page resize fluidly, the text still resizes on a fixed basis.
+To avoiding this issue, especially for heavily text focussed pages, J1 Template
+supports styles that fluidly scale text size and line-height to optimize
+readability for the user.
 
-Below you find an example how text behaves if defined on a fixed basis - what
-you'll see quite often. Change the size of your Browser Window to see what
-will happen in terms of responsiveness.
+Below you find an example of how text behaves if defined on a fixed basis -
+what you'll see quite often. Change the size of your Browser Window to see
+what will happen in terms of responsiveness.
 
 ++++
 <div>
@@ -121,13 +124,13 @@ and off Responsive Text to see the difference!
 
 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
-you can offer different text sizes of your Web for vistors having a visual
+you can offer different text sizes of your Web for visitors having a visual
 handicap or reading disabilities.
 
 To see `r-text` scaling in action, click on the button above to resize
-the text from `r-text` level 300 to 500 back and forth. And again: resize
-your Browser and watch the size of this text body change to see responsiveness
-of the text in action.
+the text from `r-text` level 300 to 500 back and forth. Simply resize
+your Browser and watch the size of this text body change to see the
+responsiveness in action.
 
 ++++
 <div>
@@ -169,21 +172,21 @@ of the text in action.
 
 == Scale factors
 
-As mentioned, `r-text` comes in five levels of size. The base of `r-text` are
+As mentioned, `r-text` comes in five levels of size. The base of `r-text` is
 the Fibonacci numbers extracted from the Fibonacci series. These numbers are
 the most popular division ratios in typography. When speaking of the golden
 ratio (1: 1.618) in typography and graphic design, the Fibonacci numbers are
 usually the base.
 
-The Fibonacci series are translated into CSS Media queries and scale a base
-font size accordingly. Additionaly, the resulting font scale series have
+The Fibonacci series is translated into CSS Media queries and scale a base
+font size accordingly. Further, the resulting font scale series have
 multipliers (scale factors) ranging from 0.5 (50%) up to 1.0 (100%) of the
 base.
 
 That way, five series are available by the five scale factors. See the following
 table how `r-text` scales.
 
-[cols="3,2,7a", options="header", role="table-responsive-stacked-lg"]
+[cols="3,2,7a", options="header", role="rtable"]
 |===============================================================================
 |Property | Factor |Example text
 
@@ -263,7 +266,7 @@ choosen per chance. It is a good idea to spend some time on text and design.
 
 === Text in Action
 
-User interfaces (UI) enable vistors to interact with a page, explore things
+User interfaces (UI) enable visitors to interact with a page, explore things
 on their own - playing around. Presenting a service or a product in simple nav
 elements may help to reduce to space needed - more can be placed on page. On
 other hand, navigation elements present by playful and interactive means.
@@ -276,7 +279,7 @@ The design for the Bootstrap nav pills were change into MD Design. As all
 elements available with J1 Template, the _Meterial Design_ color palette is
 used. All Bootstrap base classes can be used to colorize:
 
-[cols="5,7a", options="header", role="table-responsive-stacked-lg mb-5"]
+[cols="5,7a", options="header", role="rtable mb-5"]
 |===============================================================================
 |Property | Example
 
@@ -503,9 +506,9 @@ used. All Bootstrap base classes can be used to colorize:
 
 == Whats next
 
-Have you enjoyed playing with text? We hope so. But even more can J1 do for
+Have you enjoyed playing with the text? We hope so. But even more, J1 can do for
 your web pages. With the examples on that page, icons were used to support the
-meaning what was grouped as text.
+meaning of what was grouped as text.
 
 J1 Template supports popular icons font sets like:
 

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

@@ -12,6 +12,8 @@ regenerate:                             false
 
 resources:                              [ iconify ]
 resource_options:
+  - toccer:
+      collapseDepth:                    3
   - attic:
       padding_top:                      400
       padding_bottom:                   50
@@ -30,21 +32,22 @@ resource_options:
 // Enable the Liquid Preprocessor
 :page-liquid:
 
+// Set page (local) attributes here
+// -----------------------------------------------------------------------------
+// :page--attr:                         <attr-value>
+:images-dir:                            {imagesdir}/pages/roundtrip/100_present_images
+
 //  Load Liquid procedures
 // -----------------------------------------------------------------------------
 {% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
 
-// Load page attributes (all)
+// Load page attributes
 // -----------------------------------------------------------------------------
-{% include {{load_attributes}} scope="all" %}
+{% include {{load_attributes}} scope="local" %}
 
-// Set local page attributes
-// -----------------------------------------------------------------------------
-:images-dir:                            {imagesdir}/pages/roundtrip/100_present_images
 
 // Page content
-// =============================================================================
-
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 == Icon Fonts
 
 J1 Template support popular icons font sets out-of-the-box:
@@ -57,25 +60,25 @@ 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
-framework. See section <<Iconify Icons>> for more information.
+Iconify icons is not a locally stored icon-set like MDI or FA. All icons are
+loaded over the Internet using the so-called *Unified OpenSource Icon
+Framework*. See section <<Iconify Icons>> for more information.
 
 
 == Material Design Icons
 
-The primary icon set for J1 Template are link:{mdi-home}[Material Design Icons, {browser-window--new}],
-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 is link:{mdi-home}[Material Design Icons, {browser-window--new}],
+because it is extremely rich set providing more than 3300+ icons (v3.3.92). From a design
+perspective, _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
+_Material Design Icons_ (MDI) is a beneficial design resource for Web Design
 that is based on _Google_'s Material Design. _MDI_ is a community-driven
-project to create an increased icon-set based on _Google_'s official repository
+project to create an increased number of icons based on _Google_'s official repository
 and MD style specification.
 
 .Material Design Icons
-[cols="2a,3a,4a,^", options="header", width="100%", role="table-responsive-stacked-lg mt-3"]
+[cols="2a,3a,4a,^", options="header", width="100%", role="rtable mt-3"]
 |===============================================================================
 |Size |Modifier |Markup |Render
 
@@ -127,7 +130,7 @@ mdi:account[5x mdi-rotate-315]
 |5x
 |`mdi-light` +
 `mdi-flip-v`
-|Color set to MDI Light (Grey) and flipped vertical
+|Colour set to MDI Light (Grey) and flipped vertical
 [source, adoc, role="noclip"]
 ----
 mdi:alert[5x mdi-light mdi-flip-v]
@@ -136,7 +139,7 @@ mdi:alert[5x mdi-light mdi-flip-v]
 
 |5x
 |`md-indigo`
-|Color set to MDI Indigo
+|Colour set to MDI Indigo
 [source, adoc, role="noclip"]
 ----
 mdi:alert[5x md-indigo]
@@ -145,7 +148,7 @@ mdi:alert[5x md-indigo]
 
 |5x
 |`md-pink`
-|Color set to MDI Pink
+|Colour set to MDI Pink
 [source, adoc, role="noclip"]
 ----
 mdi:alert[5x md-pink]
@@ -164,7 +167,7 @@ mdi:loading[5x mdi-spin]
 |5x
 |`md-red-900` +
 `mdi-pulsed`
-|Color set to MDI Dark Red and added animation of type Pulsed
+|Colour  set to MDI Dark Red and added animation of type Pulsed
 [source, adoc, role="noclip"]
 ----
 mdi:heart[5x md-red-900 mdi-pulsed]
@@ -174,7 +177,7 @@ mdi:heart[5x md-red-900 mdi-pulsed]
 |===============================================================================
 
 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
+`mdi:` is available to place icons where ever you want. See more about
 this in section link:{roundtrip-asciidoc-extensions}#icon-fonts[Asciidoc Extensions]
 
 _MDI_ is a growing collection to allow designers and developers targeting
@@ -186,13 +189,13 @@ _J1 Template_ supports the full set of _MDI_ for the Web (Webfont, WOFF). The
 icon set is fully integrated and can be used out-of-the-box.
 
 For MDI a Preview Page is available to explore what can be done base on the
-J1 implemetation regarding sizes, colors, animations etc. Go for the
+J1 implementation regarding sizes, colours, animations etc. Go for the
 link:{previewer-mdi}[Preview Page, {browser-window--new}] and check-out what's
 possible using MDI font icons!
 
 == FontAwesome Icons
 
-FontAwesome is a font and icon toolkit based on CSS. It was originally created
+FontAwesome is a font and icon toolkit based on CSS. It was initially 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.
@@ -209,7 +212,7 @@ and the MIT License.
 ====
 
 .FontAwesome Icons
-[cols="2a,3a,4a,^", options="header", width="100%", role="table-responsive-stacked-lg mt-3"]
+[cols="2a,3a,4a,^", options="header", width="100%", role="rtable mt-3"]
 |===============================================================================
 |Size |Modifier |Markup |Render
 
@@ -252,7 +255,7 @@ fas:user[5x fa-rotate-90]
 |5x
 |`mdi-light` +
 `fa-flip-v`
-|Color set to MDI Light (Grey) and flipped vertical
+|Colour set to MDI Light (Grey) and flipped vertical
 [source, adoc, role="noclip"]
 ----
 fas:exclamation-triangle[5x mdi-light fa-flip-v]
@@ -261,7 +264,7 @@ fas:exclamation-triangle[5x mdi-light fa-flip-v]
 
 |5x
 |`md-indigo`
-|Color set to MDI Indigo
+|Colour set to MDI Indigo
 [source, adoc, role="noclip"]
 ----
 fas:alert[5x md-indigo]
@@ -270,7 +273,7 @@ fas:alert[5x md-indigo]
 
 |5x
 |`md-pink`
-|Color set to MDI Pink
+|Colour set to MDI Pink
 [source, adoc, role="noclip"]
 ----
 fas:alert[5x md-pink]
@@ -289,7 +292,7 @@ fas:circle-notch[5x fa-spin]
 |5x
 |`md-red-900` +
 `md-red-900` `fa-pulsed`
-|Color set to MDI Dark Red and added animation of type Pulsed
+|Colour set to MDI Dark Red and added animation of type Pulsed
 [source, adoc, role="noclip"]
 ----
 fas:heart[5x md-red-900 fa-pulsed]
@@ -299,24 +302,24 @@ fas:heart[5x md-red-900 fa-pulsed]
 |===============================================================================
 
 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
+`fas:` and `fas:` are available to place icons where ever you want. See more about
 this in section link:{roundtrip-asciidoc-extensions}#icon-fonts[Asciidoc Extensions]
 
-FontAwesome 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.
+FontAwesome V5 meets the Material Design idea (of _Google_) and in comparison
+to Version 4, the current version is much more than a face-lifting. Version 5
+comes with more than 2300+ icons, but many of them are available with the Pro
+license only. For the Free version, only 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
+the same classes (and their respective names) as for other Font Icon sets.
+Already existing styles like `fa-flip-vertical` are available as `fa-flip-v`
+as well. See all types that can be used with the MDI
 link:{previewer-mdi}[Preview Page, {browser-window--new}].
 
 You can checkout what icons available at link:{fontawesome-icons}[FontAwesome Icons,
-{browser-window--new}]. _FontAwesome_ 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.
+{browser-window--new}]. _FontAwesome_ V5 is fully integrated - no need for
+additional resources to load. But in comparison to Version 4, a lot of
+differences needs to be noticed.
 
 If you haven't used V5 yet, it is highly recommended to visit the
 link:{fontawesome-get-started}[Get started, {browser-window--new}] pages to learn
@@ -325,13 +328,13 @@ the basics and features and styles.
 
 == Iconify Icons
 
-MDI and FA are quite rich icon sets but designed for general use. Sometimes
+MDI and FA are 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, {browser-window--new}]. Iconify is a so-called unified
-open source icon framework that makes it possible to use icons from different
+OpenSource 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
@@ -343,7 +346,7 @@ Currently, over 40,000 vector icons are available for many different use cases.
 Find some examples below.
 
 .Brand Icons
-[cols="2a,3a,4a,^", options="header", width="100%", role="table-responsive-stacked-lg mt-3"]
+[cols="2a,3a,4a,^", options="header", width="100%", role="rtable mt-3"]
 |===============================================================================
 |Size |Modifier |Markup |Render
 
@@ -368,7 +371,7 @@ iconify:logos:atom[5x]
 |===============================================================================
 
 .Medical Icons
-[cols="2a,3a,4a,^", options="header", width="100%", role="table-responsive-stacked-lg mt-3"]
+[cols="2a,3a,4a,^", options="header", width="100%", role="rtable mt-3"]
 |===============================================================================
 |Size |Modifier |Markup |Render
 
@@ -393,16 +396,16 @@ iconify:medical-icon:i-ear-nose-throat[5x md-red-900]
 |===============================================================================
 
 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
+`iconify:` is available to place icons where ever you want. See more about
 this in section link:{roundtrip-asciidoc-extensions}#icon-fonts[Asciidoc Extensions]
 
 == Whats next
 
-Hopefully you've enjoyed the possibilities J1 offers for managing and
-manipulating Font Icons. Do you think these Icons sets fit your needs?
+Have you've enjoyed the possibilities J1 offers for managing and
+manipulating Font Icons. Do you think these Icons sets can fit your needs?
 
-Using Iconify, for all topics a icon font should be found. And it's simple,
-is'nt it?
+Using Iconify, for all topics an icon font should be found. And it's simple,
+isn't it?
 
 We hope so.
 

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

@@ -10,8 +10,10 @@ categories:                             [ pages ]
 permalink:                              /pages/public/learn/roundtrip/asciidoc_extensions/
 regenerate:                             false
 
-resources:                              [ lightbox, iconify, twemoji ]
+resources:                              [ lightbox, iconify, twemoji, rouge ]
 resource_options:
+  - toccer:
+      collapseDepth:                    3
   - attic:
       padding_top:                      400
       padding_bottom:                   50
@@ -30,21 +32,22 @@ resource_options:
 // Enable the Liquid Preprocessor
 :page-liquid:
 
+// Set page (local) attributes here
+// -----------------------------------------------------------------------------
+// :page--attr:                         <attr-value>
+:images-dir:                            {imagesdir}/pages/roundtrip/100_present_images
+
 //  Load Liquid procedures
 // -----------------------------------------------------------------------------
 {% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
 
-// Load page attributes (all)
+// Load page attributes
 // -----------------------------------------------------------------------------
-{% include {{load_attributes}} scope="all" %}
+{% include {{load_attributes}} scope="local" %}
 
-// Set local page attributes
-// -----------------------------------------------------------------------------
-:images-dir:                            {imagesdir}/pages/roundtrip/100_present_images
 
 // Page content
-// =============================================================================
-
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 J1 Template implements some incubating Ruby-based extensions for Asciidoctor.
 Most extensions are based on the examples given with the
 {asciidoctor-extensions-lab}[Asciidoctor Extensions Lab, {browser-window--new}].
@@ -75,36 +78,17 @@ clicking the toggle button `VIEW` displays (or hide) the content given by the
 The `View Result Extension` is quite useful for example sections discussing
 Asciidoc code and how the resulting (HTML) code would look alike.
 
-[source, adoc]
-----
-  .This will have a button `VIEW` placed to the right top of the example box
-  ----
-  * displayed always
-  * displayed always 2
-  ----
-
-  [.result]
-  ====
-  * displayed till clicked
-  * displayed till clicked 2
-  ====
-----
-
-.This example will have a button `VIEW` placed to the top right of the example box
+.This example place a button `VIEW` top right of the example box
+[source, prometheus, role="noclip"]
 ----
 * displayed always
 ----
 
 [.result]
 ====
- displayed till clicked, but closed automatically after 5 seconds
+ displayed till clicked, but closed on second click
 ====
 
-NOTE: The result block closes automatically after the result was shown
-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
 
 All colors for all default admonition blocks set to the standard MD color
@@ -131,15 +115,15 @@ CAUTION: Icon background-color: red
 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.
+extensions.
 
 === Question block
 
-The admonition Question block is an extention to the Asciidoc admonition
+The admonition Question block is an extension to the Asciidoc admonition
 block types that introduce an admonition of type question.
 
 .Example of a question block
-[source, adoc, role="noclip"]
+[source, prometheus, role="noclip"]
 ----
 [QUESTION]
 What's the main tool for selecting colors?
@@ -154,12 +138,12 @@ What's the main tool for selecting colors used for J1 Template?
 
 ===  Answer block
 
-The Admonition Answer block is an extention to the Asciidoc admonition
+The Admonition Answer block is an extension to the Asciidoc admonition
 block types that introduce an admonition type of answer in conjunction
 to the admonition of type question.
 
 .Example of a answer block
-[source, adoc, role="noclip"]
+[source, prometheus, role="noclip"]
 ----
 [ANSWER]
 For J1 Template, go for for the Core documentation section. You'll
@@ -178,12 +162,12 @@ You'll find the full color scheme for Material Design.
 
 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
-more images into the output document and puts automatically the default
-Lightbox (lightbox) for J1 on. For all images, the `size` (width) and individual
+more images into the output document and puts the default Lightbox (lightbox)
+for J1 automatically on. For all images, the `size` (width) and individual
 `caption text` can be configured.
 
 .Lightbox Block
-[source, adoc, role="noclip"]
+[source, prometheus, role="noclip"]
 ----
 .block_title
 lightbox::block_id[ images_width, images_data [, group_name] ]
@@ -191,9 +175,9 @@ 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 that are even in size. For images in
+different sizes, a gallery should be used as a J1 Gallery Apps to rearrange
+images and make them fit at its best for the available space.
 
 === Standalone Images
 
@@ -202,19 +186,21 @@ defined as Asciidoc attributes. The image data is given as a string
 of data pairs:
 
 .Paired attributes
+[source, prometheus, role="noclip"]
 ----
-  "path/to/image-1, image-caption-1, ..."
+"path/to/image-1, image-caption-1, ..."
 ----
 
 .Example of an data attribute for a lightbox block
+[source, prometheus, role="noclip"]
 ----
 :data-images: "pages/image-1.jpg, Description 1, "pages/image-2.jpg, Description 2"
 ----
 
-The base path for all image related data is a side-wide (Asciidoc)
+The base path for all image-related data is a side-wide (Asciidoc)
 configuration (see `_config.yml`) and points per default to `/assets/images`.
 The base path is automatically added to each image. If you want to use the
-default asset path for images, a relativ path needs to be given for
+default asset path for images, a relative path needs to be given for
 `path/to/image`.
 
 WARNING: If an absolute path is configured, like `/path/to/image`, the base
@@ -227,7 +213,7 @@ The parameter `group` for the `lightbox::` block is an option. If no
 standalone.
 
 .Lightbox block for standalone images
-[source, adoc, role="noclip"]
+[source, prometheus, role="noclip"]
 ----
 lightbox::images-standalone[ 400, {data-images-standalone} ]
 ----
@@ -243,7 +229,7 @@ of related images. To enable grouping, the option `group` needs to be
 configured for the block.
 
 .Lightbox block for grouped images
-[source, adoc, role="noclip"]
+[source, prometheus, role="noclip"]
 ----
 lightbox::images-group[ 400, {data-images-group}, group_name ]
 ----
@@ -262,13 +248,12 @@ All icon fonts are supported:
 * Iconify
 * Twitter Emoji
 
-
 == Material Designs Icons
 
 Material Designs Icons can be used as inline icons by using
 the `mdi:` inline macro:
 
-[source, adoc, role="noclip"]
+[source, prometheus, role="noclip"]
 ----
 mdi:icon_name[icon_size, modifier] <1> <2> <3>
 ----
@@ -278,6 +263,7 @@ mdi:icon_name[icon_size, modifier] <1> <2> <3>
     animation (fa-pulsed) or the orientation (fa-rotate-45)
 
 .Click on _view result_ to see how it's looks alike
+[source, prometheus, role="noclip"]
 ----
 mdi:home[2x, mdi-pulsed ml-3 mr-2 mb-2] Symbol icon (pulsed) +
 mdi:font-awesome[2x, ml-3 mr-2 mb-2] Brand icon +
@@ -303,7 +289,7 @@ settings for the `modifier` are applied.
 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"]
+[source, prometheus, role="noclip"]
 ----
 fas:icon_name[icon_size, modifier] <1> <2> <3>
 ----
@@ -313,6 +299,7 @@ fas:icon_name[icon_size, modifier] <1> <2> <3>
     animation (fa-pulsed) or the orientation (fa-rotate-45) of an icon
 
 .Click on _view result_ to see how it's looks alike
+[source, prometheus, role="noclip"]
 ----
 fas:home[2x, fa-pulsed ml-2 mr-2 mb-2] Solid icon (pulsed) +
 fab:font-awesome[2x, ml-3 mr-2 mb-2] Brand icon +
@@ -327,7 +314,7 @@ fab:apple[2x, md-indigo ml-3 mr-2] Brand icon (colored)
 ====
 
 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
+the icons `size` is set to default (`1x`), the color to `black` and no
 settings for the `modifier` are applied.
 
 
@@ -336,7 +323,7 @@ settings for the `modifier` are applied.
 Iconify Icons can be used as inline icons by using the `iconify:`
 inline macro:
 
-[source, adoc, role="noclip"]
+[source, prometheus, role="noclip"]
 ----
 iconify:icon_name[icon_size, modifier] <1> <2> <3>
 ----
@@ -346,6 +333,7 @@ iconify:icon_name[icon_size, modifier] <1> <2> <3>
 positioning classes for margings and padding
 
 .Click on _view result_ to see how it's looks alike
+[source, prometheus, role="noclip"]
 ----
 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 +
@@ -378,7 +366,7 @@ applied, the color settings will have no effect.
 Twitter Emoji's can be used as inline icons by using the `emoji:`
 inline macro:
 
-[source, adoc]
+[source, prometheus]
 ----
 emoji:icon_name[icon_size] <1> <2>
 ----
@@ -386,6 +374,7 @@ emoji:icon_name[icon_size] <1> <2>
 <2> The `icon_size` attribute can be one of: `xs`, `sm`, `lg` and `1x` to `5x`
 
 .Click on _view result_ to see how it's look alike
+[source, prometheus, role="noclip"]
 ----
 This is an example of how you can emoji:heart[2x, pulsed mt-1] Asciidoctor
 and Twitter Emoji emoji:smile[].
@@ -403,26 +392,27 @@ link:{previewer-emoji}[Emoji Icon Previewer, {browser-window--new}].
 
 == Blind Text (Lorem)
 
-The Ruby gem Middleman, a Ruby-gem based static site generator, provides a
+The Ruby Gem Middleman, a Ruby-gem based static site generator, provides a
 set of powerful helpers for generating random text content. The Lorem
 inline macro `lorem:` adapted this functionality from Middleman for the use
 of Asciidoc-based documents processed by Jekyll.
 
 If you start writing larger documents having several chapters, not all of the
 content is available at the beginning. It is quite useful to place blind text
-first to get an better impression how a a page will look alike that is not
+first to get a better impression how a page will look-alike that is not
 finished yet.
 
 Placeholders for blind text comes in several flavours given by `macro`. The
 syntax for the `lorem:` inline macro is simple like this:
 
-[source, adoc]
+[source, prometheus]
 ----
 lorem:macro[]
 lorem:macro[size]
 ----
 
 .Example of a lorem sentences macro
+[source, prometheus, role="noclip"]
 ----
 lorem:sentences[5]
 ----
@@ -438,7 +428,7 @@ 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-stacked-lg mb-2"]
+[cols="5,2,5a", options="header", role="rtable mb-2"]
 |===============================================================================
 |Macro | Type |Example
 
@@ -512,7 +502,7 @@ 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
-user dialogs using them!
+user dialogues using them!
 
 Have a look for the link:{roundtrip-extended-modals}[BS modal extensions]
 feature of J1 Template.