j1-template 2021.0.5 → 2021.0.10

data/lib/starter_web/pages/public/asciidoc_skeletons/simple-document/simple.adoc

@@ -0,0 +1,236 @@
+---
+title:                                  Skeleton
+tagline:                                simple document
+date:                                   2021-01-01 00:00:00
+description: >
+                                        Simple documents are used quite often. If the number
+                                        of chapters is about or less than three and the document
+                                        is small in size. This document type does not use any
+                                        (local) Asciidoc include files or attributes.
+
+categories:                             [ Asciidoc, Skeleton ]
+tags:                                   [ Knowledge, Skeleton, Document ]
+
+permalink:                              /pages/public/skeleton/simple/
+regenerate:                             false
+
+resources:                              []
+resource_options:
+  - toccer:
+      collapseDepth:                    4
+  - attic:
+      padding_top:                      400
+      padding_bottom:                   50
+      opacity:                          0.5
+      slides:
+        - url:                          /assets/images/pages/skeleton/antonino-visalli-1920x1280.jpg
+          alt:                          Photo by Antonino Visalli on Unsplash
+          alignY:                       top
+          badge:
+            type:                       unsplash
+            author:                     Antonino Visalli
+            href:                       https://unsplash.com/@_visalli
+---
+
+// Page Initializer
+// =============================================================================
+// Enable the Liquid Preprocessor
+:page-liquid:
+
+// Set (local) page attributes here
+// -----------------------------------------------------------------------------
+// :page--attr:                         <attr-value>
+:url-fontawesome--home:                 https://fontawesome.com/
+:url-fontawesome--icons:                https://fontawesome.com/icons?d=gallery/
+:url-fontawesome--get-started:          https://fontawesome.com/get-started/
+
+:url-mdi--home:                         https://materialdesignicons.com/
+:url-mdi-icons--cheatsheet:             https://cdn.materialdesignicons.com/3.3.92/
+
+:url-iconify--home:                     https://iconify.design/
+:url-iconify--icon-sets:                https://iconify.design/icon-sets/
+:url-iconify--medical-icons:            https://iconify.design/icon-sets/medical-icon/
+:url-iconify--brand-icons:              https://iconify.design/icon-sets/logos/
+
+:url-roundtrip--mdi-icons:              /pages/public/learn/roundtrip/mdi_icon_font/#material-design-icons
+:url-roundtrip--fontawesome-icons:      /pages/public/learn/roundtrip/mdi_icon_font/#fontawesome-icons
+:url-roundtrip--iconify-icons:          /pages/public/learn/roundtrip/mdi_icon_font/#iconify-icons
+:url-roundtrip--asciidoc-extensions:    /pages/public/learn/roundtrip/asciidoc_extensions/
+//  Load Liquid procedures
+// -----------------------------------------------------------------------------
+{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
+
+// Load page attributes
+// -----------------------------------------------------------------------------
+{% include {{load_attributes}} scope="global" %}
+
+
+// Page content
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+The Asciidoc *skeleton simple-document* a helper for setting up a base file and
+folder structure for simple-document AsciiDoc pages based on _Jekyll_ and
+_J1 Template_. You need *both* to use this skeleton creating AsciiDoc
+documents from it.
+
+Simple documents are used quite often for documents of a website. If the number
+of chapters is about or less than three and the document is small in size,
+simple documents should fit. This document type is based on a *single* Asciidoc
+document and does *not* use any (local) Asciidoc include files or attributes.
+
+[NOTE]
+====
+.Moving documents based on a J1 Skeleton
+
+All J1 Asciidoc Skeletons are fully *relocateable* and can be placed in any
+subfolder of your Jekyll site.
+====
+
+[role="mb-5"]
+*Happy Jekylling!*
+
+== Chapter
+
+J1 Template support popular icons font sets out-of-the-box:
+
+* link:{url-mdi--home}[Material Design Icons, {browser-window--new}] (MDI)
+* link:{url-fontawesome--home}[FontAwesome Icons V5, {browser-window--new}] (FA)
+* link:{url-iconify--home}[Iconify Icons, {browser-window--new}] (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
+for link:{url-roundtrip--mdi-icons}[Material Design Icons, {browser-window--new}]
+and link:{url-roundtrip--fontawesome-icons}[FontAwesome Icons, {browser-window--new}].
+
+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 link:{url-roundtrip--iconify-icons}[Iconify Icons, {browser-window--new}]
+for more information.
+
+=== Section
+
+The primary icon-set for J1 Template is link:{url-mdi--home}[Material Design Icons, {browser-window--new}],
+because it is extremely rich set providing more than 5900+ icons for the
+current version (v5.9.55). From a design perspective, _MDI_ has an excellen
+*Material Design* support an comes with the original icon set created by
+_Google_ build-in.
+
+_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 number of icons based on _Google_'s official repository
+and MD style specification.
+
+==== Subsection
+
+_MDI_ is a growing collection to allow designers and developers targeting
+various platforms to download icons in the format, color and size they need
+for any project. The repo contains today 2100+ icons plus converted icons from
+the official set created by _Google_.
+
+.Material Design Icons
+[cols="2a,3a,4a,^", options="header", width="100%", role="rtable mt-3"]
+|===============================================================================
+|Size |Modifier |Markup |Render
+
+|1x
+|no modifier set
+|All `icon_name` can be found on the Preview page for MDI Icon Previewer +
+[source, adoc, role="noclip"]
+----
+mdi:account[1x]
+----
+|mdi:account[1x]
+
+|3x
+|no modifier set
+|All `icon_name` can be found on the Preview page for MDI Icon Previewer +
+[source, adoc, role="noclip"]
+----
+mdi:account[3x]
+----
+|mdi:account[3x]
+
+|5x
+|no modifier set
+|All `icon_name` can be found on the Preview page for MDI Icon Previewer
+[source, adoc, role="noclip"]
+----
+mdi:account[5x]
+----
+|mdi:account[5x]
+
+|5x
+|`mdi-rotate-45`
+|Rotate 45 degrees
+[source, adoc, role="noclip"]
+----
+mdi:account[5x mdi-rotate-45]
+----
+|mdi:account[5x mdi-rotate-45]
+
+|5x
+|`mdi-rotate-315`
+|Rotate 315 degrees
+[source, adoc, role="noclip"]
+----
+mdi:account[5x mdi-rotate-315]
+----
+|mdi:account[5x mdi-rotate-315]
+
+|5x
+|`mdi-light` +
+`mdi-flip-v`
+|Colour set to MDI Light (Grey) and flipped vertical
+[source, adoc, role="noclip"]
+----
+mdi:alert[5x mdi-light mdi-flip-v]
+----
+|mdi:alert[5x mdi-light mdi-flip-v]
+
+|5x
+|`md-indigo`
+|Colour set to MDI Indigo
+[source, adoc, role="noclip"]
+----
+mdi:alert[5x md-indigo]
+----
+|mdi:account[5x md-indigo]
+
+|5x
+|`md-pink`
+|Colour set to MDI Pink
+[source, adoc, role="noclip"]
+----
+mdi:alert[5x md-pink]
+----
+|mdi:account[5x md-pink]
+
+|5x
+|`mdi-spin`
+|Added animation of type Rotate (Spin)
+[source, adoc, role="noclip"]
+----
+mdi:loading[5x mdi-spin]
+----
+|mdi:loading[5x mdi-spin]
+
+|5x
+|`md-red-900` +
+`mdi-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]
+----
+|mdi:heart[5x md-red-900 mdi-pulsed]
+
+|===============================================================================
+
+
+NOTE: Using Material Design Icons with Asciidoc is quite easy as an inline
+macro `mdi:` is available to place icons where ever you want. See more about
+this in section
+link:{url-roundtrip--asciidoc-extensions}#icon-fonts[Asciidoc Extensions, {browser-window--new}]
+
+_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.

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

@@ -42,7 +42,7 @@ resource_options:
 // Enable the Liquid Preprocessor
 :page-liquid:
 
-// Set page (local) attributes here
+// Set (local) page attributes here
 // -----------------------------------------------------------------------------
 // :page--attr:                         <attr-value>
 :images-dir:                            {imagesdir}/pages/roundtrip/100_present_images
@@ -122,8 +122,7 @@ supports a gallery-style thumbnail preview plus image resizing, a dowload
 dialogue, sharing provider support and some more helpful. Check what
 LightGallery can do by the following example.
 
-// .Example of a Justified Gallery
-gallery::jg_example[]
+gallery::jg_old_times[]
 
 
 == J1 Carousel App
@@ -182,7 +181,7 @@ A simple image show is useful for example as an animated (or not animated)
 banner presenting exciting things of your site or the products offered.
 
 .Simple Image Carousel
-carousel::demo_simple[role="mb-5"]
+carousel::demo_simple[role="mb-3"]
 
 === Carousel + Caption + Lightbox
 
@@ -192,7 +191,7 @@ a lightbox to enlarge images full size. For the example below, a almost simple
 lightbox is used: Lightbox V2; or short: lightbox.
 
 .Nice cats
-carousel::demo_cats[role="mb-5"]
+carousel::demo_cats[role="mb-3"]
 
 The J1 module lightbox is a simple Lightbox but offers a bunch of impressive
 features for displaying images. For example, the lightbox can display all
@@ -207,7 +206,7 @@ to browse all images back and forth. An indicator below the slider shows how
 many images the show contains.
 
 .Single Slide Carousel and a Lightbox
-carousel::demo_oneslide[role="mb-5"]
+carousel::demo_oneslide[role="mb-3"]
 
 == J1 Gallery App
 

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

@@ -51,7 +51,7 @@ resource_options:
 // Enable the Liquid Preprocessor
 :page-liquid:
 
-// Set page (local) attributes here
+// Set (local) page attributes here
 // -----------------------------------------------------------------------------
 // :page--attr:                         <attr-value>
 :images-dir:                            {imagesdir}/pages/roundtrip/100_present_images

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

@@ -37,7 +37,7 @@ resource_options:
 // Enable the Liquid Preprocessor
 :page-liquid:
 
-// Set page (local) attributes here
+// Set (local) page attributes here
 // -----------------------------------------------------------------------------
 // :page--attr:                         <attr-value>
 :images-dir:                            {imagesdir}/pages/roundtrip/100_present_images
@@ -236,274 +236,6 @@ explorer of the truth, the master-builder of human happiness.
 
 |===============================================================================
 
-
-//////////
-=== Mixing font sizes
-
-See the example below. Two cards are tied together by a title of Your Topic.
-The taglines are different and focus on different things. Because the title
-is on each and every card of such a group, it makes sense to give the upper
-level headline a smaller font size than the tagline that decribes different
-features.
-
-To not loose the focus on reading the text, font icons are used to support what
-a card decribes to get the readers orientated better. The left one has a
-camera symbol, the right one a speaker. The reader can expect two features:
-video and audio.
-
-++++
-<div id="roundtrip_example_panel" class="mt-2 mb-3"></div>
-++++
-
-The body text is the smallest in size. On one hand to save space on other
-hand the readers know in general what they can can expect to read about. To
-focus the body text, it's positioned in the middle and centered for optimal
-placement. A final quote text followed by a button in card footer guides the
-reader to a page to read more.
-
-This simple example shows that content, placement and design of text was not
-choosen per chance. It is a good idea to spend some time on text and design.
-
-=== Text in Action
-
-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.
-
-The next two simple examples shows you what type of UI's may helpful to present
-a bunch of information on a small footprint: tabbed text by using Bootstrap's
-Nav Pills.
-
-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="rtable mb-5"]
-|===============================================================================
-|Property | Example
-
-|`nav-pills-primary`
-|
-++++
-<button type="button" class="btn btn-secondary btn-raised btn-round">
-  color example
-</button>
-++++
-
-|`nav-pills-secondary`
-|
-++++
-<button type="button" class="btn btn-secondary btn-raised btn-round">
-  color example
-</button>
-++++
-
-|`nav-pills-info`
-|
-++++
-<button type="button" class="btn btn-primary btn-raised btn-round">
-  color example
-</button>
-++++
-
-|`nav-pills-success`
-|
-++++
-<button type="button" class="btn btn-success btn-raised btn-round">
-  color example
-</button>
-++++
-
-|`nav-pills-warning`
-|
-++++
-<button type="button" class="btn btn-warning btn-raised btn-round">
-  color example
-</button>
-++++
-
-|`nav-pills-danger`
-|
-++++
-<button type="button" class="btn btn-danger btn-raised btn-round">
-  color example
-</button>
-++++
-
-|===============================================================================
-
-==== Plain Pills
-
-++++
-<div class="row mt-3">
-  <div class="col-md-6">
-
-    <h5 class="notoc mb-3">Horizontal Tabs</h5>
-    <ul class="nav nav-pills nav-pills-danger mt-2">
-      <li class="nav-item"><a class="nav-link active" href="#pill1" data-toggle="tab" aria-expanded="true">Detracto</a></li>
-      <li class="nav-item"><a class="nav-link" href="#pill2" data-toggle="tab" aria-expanded="false">Facer</a></li>
-      <li class="nav-item"><a class="nav-link" href="#pill3" data-toggle="tab" aria-expanded="false">Dolor</a></li>
-    </ul>
-
-    <div class="tab-content tab-space">
-      <div class="tab-pane active" id="pill1">
-        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
-        eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
-        voluptua.
-      </div>
-      <div class="tab-pane" id="pill2">
-        Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint
-        dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo
-        apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae
-        eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius
-        voluptatum pro te, saepe laoreet in est.
-      </div>
-      <div class="tab-pane" id="pill3">
-        Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique
-        omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum
-        his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo
-        cu primis delenit.
-      </div>
-    </div>
-  </div>
-
-  <div class="col-md-6">
-    <h5 class="notoc mb-3">Vertical Tabs</h5>
-    <div class="row">
-
-      <div class="col-md-4">
-        <ul class="nav nav-pills nav-pills-primary nav-stacked mt-2">
-          <li class="nav-item"><a class="nav-link active" href="#tab1" data-toggle="tab">Detracto</a></li>
-          <li class="nav-item"><a class="nav-link" href="#tab2" data-toggle="tab">Facer</a></li>
-          <li class="nav-item"><a class="nav-link" href="#tab3" data-toggle="tab">Dolor</a></li>
-        </ul>
-      </div>
-
-      <div class="col-md-8">
-        <div class="tab-content">
-          <div class="tab-pane active" id="tab1">
-            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
-            eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
-            voluptua.
-          </div>
-          <div class="tab-pane" id="tab2">
-            Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint
-            dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo
-            apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae
-            eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius
-            voluptatum pro te, saepe laoreet in est.
-          </div>
-          <div class="tab-pane" id="tab3">
-            Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique
-            omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum
-            his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo
-            cu primis delenit.
-          </div>
-        </div>
-      </div>
-
-    </div>
-  </div>
-</div>
-++++
-
-==== Pills + Icons
-
-++++
-<div class="row mt-3">
-  <div class="col-md-6">
-  <h5 class="notoc">Horizontal Tabs</h5>
-    <ul class="nav nav-pills nav-pills-danger nav-pills-icons mt-2" role="tablist">
-
-      <li class="nav-item">
-        <a class="nav-link active" href="#h-tabs-1" role="tab" data-toggle="tab" aria-expanded="false">
-          <i class="mdi mdi-bluetooth mt-1 mb-2"></i> Detracto
-        </a>
-      </li>
-      <li class="nav-item">
-        <a class="nav-link" href="#h-tabs-2" role="tab" data-toggle="tab" aria-expanded="false">
-          <i class="mdi mdi-bluetooth-connect mt-1 mb-2"></i> Facer
-        </a>
-      </li>
-      <li class="nav-item">
-        <a class="nav-link" href="#h-tabs-3" role="tab" data-toggle="tab" aria-expanded="true">
-          <i class="mdi mdi-bluetooth-audio mt-1 mb-2"></i> Dolor
-        </a>
-      </li>
-    </ul>
-    <div class="tab-content tab-space">
-      <div class="tab-pane" id="h-tabs-1">
-        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
-        eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
-        voluptua.
-      </div>
-      <div class="tab-pane" id="h-tabs-2">
-        Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint
-        dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo
-        apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae
-        eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius
-        voluptatum pro te, saepe laoreet in est.
-      </div>
-      <div class="tab-pane active" id="h-tabs-3">
-        Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique
-        omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum
-        his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo
-        cu primis delenit.
-      </div>
-    </div>
-  </div>
-  <div class="col-md-6">
-  <h5 class="notoc">Vertical Tabs</h5>
-    <div class="row">
-      <div class="col-md-4">
-        <ul class="nav nav-pills nav-pills-icons nav-stacked mt-2" role="tablist">
-
-          <li class="nav-item">
-            <a class="nav-link active" href="#v-tabs-1" role="tab" data-toggle="tab" aria-expanded="true">
-              <i class="mdi mdi-bluetooth mt-1 mb-2"></i> Detracto
-            </a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="#v-tabs-2" role="tab" data-toggle="tab" aria-expanded="false">
-              <i class="mdi mdi-bluetooth-connect mt-1 mb-2"></i> Facer
-            </a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="#v-tabs-3" role="tab" data-toggle="tab" aria-expanded="false">
-              <i class="mdi mdi-bluetooth-audio mt-1 mb-2"></i> Dolor
-            </a>
-          </li>
-        </ul>
-      </div>
-      <div class="col-md-8">
-        <div class="tab-content">
-          <div class="tab-pane active" id="v-tabs-1">
-            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
-            eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
-            voluptua.
-          </div>
-          <div class="tab-pane" id="v-tabs-2">
-            Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint
-            dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo
-            apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae
-            eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius
-            voluptatum pro te, saepe laoreet in est.
-          </div>
-          <div class="tab-pane" id="v-tabs-3">
-            Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique
-            omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum
-            his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo
-            cu primis delenit.
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-++++
-//////////
-
 == Whats next
 
 Have you enjoyed playing with the text? We hope so. But even more, J1 can do for