j1-template 2020.0.6 → 2020.0.11

data/lib/starter_web/pages/public/learn/{floating_sidebar.adoc → examples/floating_div.adoc}

@@ -1,7 +1,7 @@
 ---
-title:                                  Floating SideBar
-tagline:                                where to go
-description:                            Where to go
+title:                                  CSS Examples
+tagline:                                floating div
+description:                            floating div
 
 tags:                                   [ Page, Roundtrip ]
 index:                                  [ Start, Template, Whats, Up, Readme, TL;DR ]
@@ -12,17 +12,6 @@ regenerate:                             false
 
 resources:                              [ lightbox ]
 resource_options:
-  - attic:
-      padding_top:                      400
-      padding_bottom:                   50
-      opacity:                          0.5
-      slides:
-        - url:                          /assets/images/modules/attics/runner-1920x1200-bw.jpg
-          alt:                          Photo by Alexander Redl on Unsplash
-          badge:
-            type:                       unsplash
-            author:                     Alexander Redl
-            href:                       https://unsplash.com/@alexanderredl
 ---
 
 // Enable the Liquid Preprocessor
@@ -53,7 +42,6 @@ resource_options:
 // -----------------------------------------------------------------------------
 // :images-dir:                         {imagesdir}/path/to/page/images
 
-
 // Page content
 // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
@@ -86,44 +74,34 @@ use the English language for our international vistors (we are German),
 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
-countries and cultures go for RTL, but currently we've *no* support for RTL
-implemented.
-
-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
-your way to Jekyll is done. Congratiulations.
-
-The *Learn* section contains all you need to learn what Jekyll and J1 can do
-for your website. For your new static web - if you like.
-
-With this section you'll find a:
-
-. *Roundtrip* to show some of the main features of the template system
-  *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
-  the template system Jekyll One - your site using Jekyll and the template J1.
-
-== Where to go
+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
+place to step in.
 
-You should go for the *Roundtrip* first. See what you will get. As an overview
-of some of the main features of *J1*. The roundtrip is a *visual* tour. No
-technical stuff, nothing academic.
+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.
 
-Let's go more deeper and make things real - and your hands dirty. We
-recomment to work on the Kickstarter *Web in a Day*. A nice one-day journey
-diving into the world of Jekyll. You'll learn a lot and at the end of that day
-you know what Jekyll, static webs and the template system J1 is all about.
+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
+and pages.
+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
+place to step in.
 
-You're welcome!
+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.
 
-If you like, continue by walking through the roundtrip examples
-link:/pages/public/learn/roundtrip/present_images/[by starting the tour here].
+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
+and pages.
 
 ++++
 <style>

data/lib/starter_web/pages/public/learn/kickstarter/web_in_a_day/000_includes/parts.asciidoc

@@ -61,7 +61,7 @@ Find here is a list of the basic Chocolatey commands used this section.
 And some more related ones. If you'd like to explore the Chocolatey CLI a bit 
 *more*, give it a try before moving on.
 
-[cols="8a,4", options="header", role="table-responsive, full-width"]
+[cols="8a,4", options="header", role="table-responsive-stacked-lg, full-width"]
 |===============================================================================
 |Command |Description
 

data/lib/starter_web/pages/public/learn/kickstarter/web_in_a_day/100_meet_and_greet_jekyll.adoc

@@ -1,7 +1,12 @@
 ---
-title:                                  Web in a Day 
+title:                                  Web in a Day
 tagline:                                meet & greet jekyll
-description:                            Modern static website in a day
+description: >
+                                        Web in a Day is the first in a series of tutorials to
+                                        learn how to create modern websites using Jekyll. This
+                                        Kickstarter focus on the basics of Jekyll and the
+                                        J1 Template which all people needs to know for a successful
+                                        way to a modern static website using Jekyll and J1 Template
 
 tags:                                   [ Kickstarter ]
 index:                                  [ Introduction, Web, Website, Jekyll ]
@@ -15,7 +20,7 @@ resource_options:
   - attic:
       padding_top:                      400
       padding_bottom:                   50
-      opacity:                          0.5 
+      opacity:                          0.5
       slides:
         - url:                          /assets/images/pages/kickstarter/web_in_a_day/get-started-1920x1280-bw.jpg
           alt:                          Photo by JESHOOTS.COM on Unsplash
@@ -26,7 +31,7 @@ resource_options:
             href:                       https://unsplash.com/@jeshoots/portfolio
 ---
 
-// Enable the Liquid Preprocessor 
+// Enable the Liquid Preprocessor
 // -----------------------------------------------------------------------------
 :page-liquid:
 

data/lib/starter_web/pages/public/learn/roundtrip/000_bs_tour_api.adoc

@@ -116,7 +116,7 @@ var tour = Tour({
 });
 ----
 
-[cols="1,1,3a,7a", options="header", width="100%", role="table-responsive"]
+[cols="1,1,3a,7a", options="header", width="100%", role="table-responsive-stacked-lg"]
 |===============================================================================
 |Name |Type |Default |Description
 
@@ -381,7 +381,7 @@ tour.addStep({
 
 // |Name |Type |Description |Default
 
-[cols="1,1,3a,7a", options="header", width="100%", role="table-responsive"]
+[cols="1,1,3a,7a", options="header", width="100%", role="table-responsive-stacked-lg"]
 |===============================================================================
 |Name |Type |Default |Description
 

data/lib/starter_web/pages/public/learn/roundtrip/000_includes/documents/410_table_3_column.asciidoc

@@ -1,6 +1,6 @@
 
 .Selected extended BS modal examples
-[cols="6a,3a,3a", options="header", width="100%", role="table-responsive"]
+[cols="6a,3a,3a", options="header", width="100%", role="table-responsive-stacked-lg"]
 |===============================================================================
 |Postion |Class | Example
 

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
@@ -190,7 +194,7 @@ 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 mb-5"]
+[cols="3,2,7a", options="header", role="table-responsive-stacked-lg mb-5"]
 |===============================================================================
 |Property | Factor |Example text
 
@@ -283,7 +287,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 mb-5"]
+[cols="5,7a", options="header", role="table-responsive-stacked-lg mb-5"]
 |===============================================================================
 |Property | Example
 

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
@@ -89,7 +89,7 @@ project to create an increased icon-set based on _Google_'s official repository
 and MD style specification.
 
 .Material Design Icons
-[cols="2a,3a,4a,3a", options="header", width="100%", role="rtable_v table-responsive mt-3"]
+[cols="2a,3a,4a,3a", options="header", width="100%", role="table-responsive-stacked-lg mt-3"]
 |===============================================================================
 |Size |Modifier |Markup |Render
 
@@ -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]
@@ -225,7 +223,7 @@ and the MIT License.
 ====
 
 .FontAwesome Icons
-[cols="2a,3a,4a,3a", options="header", width="100%", role="rtable_v table-responsive mt-3"]
+[cols="2a,3a,4a,3a", options="header", width="100%", role="table-responsive-stacked-lg mt-3"]
 |===============================================================================
 |Size |Modifier |Markup |Render
 
@@ -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}].
@@ -368,7 +366,7 @@ Currently, over 40,000 vector icons are available for many different use cases.
 Find some examples below.
 
 .Brand Icons
-[cols="2a,3a,4a,3a", options="header", width="100%", role="rtable_v table-responsive mt-3"]
+[cols="2a,3a,4a,3a", options="header", width="100%", role="table-responsive-stacked-lg mt-3"]
 |===============================================================================
 |Size |Modifier |Markup |Render
 
@@ -393,7 +391,7 @@ iconify:logos:atom[5x]
 |===============================================================================
 
 .Medical Icons
-[cols="2a,3a,4a,3a", options="header", width="100%", role="rtable_v table-responsive mt-3"]
+[cols="2a,3a,4a,3a", options="header", width="100%", role="table-responsive-stacked-lg mt-3"]
 |===============================================================================
 |Size |Modifier |Markup |Render
 
@@ -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[].
 ====
 
@@ -454,7 +453,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 mb-2"]
+[cols="5,2,5a", options="header", role="table-responsive-stacked-lg mb-2"]
 |===============================================================================
 |Macro | Type |Example
 
@@ -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]