j1_template 2019.4.8 → 2019.4.10

data/lib/starter_web/pages/public/start/_unused/_roundtrip/100_present_videos.adoc

@@ -0,0 +1,159 @@
+---
+#scrollbar:                              true
+
+title:                                  Roundtrip
+tagline:                                present videos
+description:                            J1 Template Roundtrip - Present video based data
+
+tags:                                   [ Template, Roundtrip, Video ]
+index:                                  []
+categories:                             [ pages ]
+
+toc:                                    true
+
+permalink:                              /pages/public/start/roundtrip/present_videos/
+regenerate:                             false
+
+resources:                              [ lightbox, light_gallery, bs_gallery ]
+resource_options:
+  - attic:
+      background_color:
+        color_1:                        md_grey_100
+        color_2:                        md_grey_400
+      slides:
+        # Broadway Underground - still image (animate default)
+        - url:                          /assets/videos/headers/still/underground-broadway.png
+          alt:                          Broadway Underground
+          alignY:                       top
+          animateFirst:                 false
+        # Broadway Underground - FAYETTE ST, moved file to Github/LFS
+        - url:                          https://github.com/jekyll-one-org/jekyll-one-lfs/raw/master/videos/underground-broadway.mp4
+          alignY:                       0
+          isVideo:                      true
+          loop:                         true
+          duration:                     12000
+        # Broadway Underground - still image (animate random)
+        - url:                          /assets/videos/headers/still/underground-broadway.png
+          alt:                          Broadway Underground
+          alignY:                       top
+          transition:                   push_left|push_right|cover_up|cover_down|fade|fadeInOut
+
+---
+
+// Enable the Liquid Preprocessor 
+// -----------------------------------------------------------------------------
+:page-liquid:
+
+// Set other global page attributes here
+// -----------------------------------------------------------------------------
+//:my-asciidoc-attribute:
+
+//  Load Liquid procedures
+// -----------------------------------------------------------------------------
+{% capture set_env_entry_document %}themes/{{site.template.name}}/procedures/global/set_env_entry_document.proc{%endcapture%}
+{% capture set_image_block %}themes/{{site.template.name}}/procedures/global/set_image_block.proc{%endcapture%}
+
+// Initialize entry document environmental attributes
+// -----------------------------------------------------------------------------
+{% include {{set_env_entry_document}} %}
+
+// Load tag, url and data attributes
+// -----------------------------------------------------------------------------
+include::{includedir}/attributes.asciidoc[tag=tags]
+include::{includedir}/attributes.asciidoc[tag=urls]
+include::{includedir}/attributes.asciidoc[tag=data]
+
+// Set local page attributes
+// -----------------------------------------------------------------------------
+:images-dir:                            {imagesdir}/pages/roundtrip/100_present_images
+
+// NOTE: Place an excerpt at the most top position
+// -----------------------------------------------------------------------------
+// Page excerpt text ..
+//
+// [role="clearfix mb-3"]
+// excerpt__end
+
+// Page content
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+Playing video on a web page seems not that special since you can already
+watch videos on web pages through plugins like _Flash Player_, _Quicktime_
+or _Silverlight_. A new standard goes to *HTML5 Video*, a pure *HTML* way to
+show video on the web; instead of the previous de facto standard of using
+*proprietary* software.
+
+== Video Galleries
+
+*HTML5 Video* open the doors to *your way* presenting video content. Modern
+browsers support the video tag `<video>` for the HTML5 Video standard. Browsers
+have a build-in multimedia framework already for decoding and displaying
+video content. No need to use such proprietary software components anymore!
+
+HTML5 Video support is given by the App *gallery* combined with the Lightbox
+*LightGallery*.
+
+Two types of video sources are supported:
+
+. videos from *local* files (your web space)
+. videos from *online* sources (on the Internet) like YouTube, Vimeo, etc.
+
+The combination of the App *gallery* and the lightbox *LightGallery* is quite
+usable for all the video content you want to present on your site. Galleries
+can be placed elsewhere with your content. You can use them for video blogs
+for example by placing them into your blog articles content.
+
+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
+
+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
+of (digital) pictures is very easy by using *Justified Gallery* for example.
+Videos created by a digi cam or a mobile can played by J1 Template using the
+*HTML5 Video support of *LightGallery*.
+
+Two players are available with *LightGallery*:
+
+. a internal player used by default
+. http://www2.videojs.com/[video.js], a excellent Javascript video library
+
+.HTML5 Video Gallery
+carousel::bg_video_html5[role="mb-5"]
+
+NOTE: The HTML5 specification does _not_ define which video and audio formats
+browsers _should_ support. J1 *LightGallery* supports all _typical_ types of
+HTML5 Video formats browsers support today such as *MP4*, *WebM*, and *Ogg*.
+
+=== 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
+video content from the Internet, e.g. your channnel, the online video
+support of J1 Template may a good choice. Find some enjoyable videos from
+*James Cordon's* channel: *Carpool Karaoke*.
+
+.Youtube Video Gallery
+carousel::bg_video_online[role="mb-5"]
+
+
+== What's next
+
+lorem:sentences[3].
+
+lorem:sentences[3]
+
+What? Find out how it works: link:{roundtrip-typography}[Typography].
+
+
+/////
+== What's next?
+
+Hopefully you've enjoyed exploring the possibilities J1 offers for managing
+and displaying digital image content. But much, much more can the J1 do for
+your web.
+
+Incredible?  See the next example page link:{roundtrip-cards}[to check what Cards are all about].
+/////

data/lib/starter_web/pages/public/start/_unused/_roundtrip/200_typography.adoc

@@ -0,0 +1,517 @@
+---
+title:                                  Roundtrip
+tagline:                                typography
+description:                            Typography, a crucial branding element
+
+tags:                                   [ Template, Roundtrip, Typography ]
+index:                                  []
+categories:                             [ pages ]
+
+permalink:                              /pages/public/start/roundtrip/typography/
+regenerate:                             false
+
+resources:                              []
+resource_options:
+  - attic:
+      opacity:                          0.3
+      slides:
+        - url:                          /assets/images/pages/roundtrip/typography-1920x1280-bw.jpg
+          alt:                          Photo by Alice Donovan Rousel on Unsplash
+          badge:
+            type:                       unsplash
+            author:                     Alice Donovan Rousel
+            href:                       https://unsplash.com/@alicekat/portfolio
+---
+
+// Enable the Liquid Preprocessor
+// -----------------------------------------------------------------------------
+:page-liquid:
+
+// Set other global page attributes here
+// -----------------------------------------------------------------------------
+
+
+{% comment %} Liquid procedures
+--------------------------------------------------------------- {% endcomment %}
+{% capture set_env_entry_document %}themes/{{site.template.name}}/procedures/global/set_env_entry_document.proc{%endcapture%}
+
+
+// NOTE: Initialize entry document paths
+// -----------------------------------------------------------------------------
+{% include {{set_env_entry_document}} init_folders=all %}
+
+// Load tags and urls
+//
+include::{includedir}/attributes.asciidoc[tag=tags]
+include::{includedir}/attributes.asciidoc[tag=urls]
+include::{includedir}/attributes.asciidoc[tag=data]
+
+// Additional Asciidoc page attributes goes here
+// -----------------------------------------------------------------------------
+
+
+== Typography
+
+Typography serves as one the most crucial branding elements for any business.
+Typography matters for any media presenting text - for any sort of reading.
+Text will take on an important role of acting not only as plain text but will
+also serve as something like images.
+
+Get ready for the big, the bold and the beautiful!
+
+
+
+//////////
+=== 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.
+
+//////////
+
+
+
+=== 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.
+
+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.
+
+++++
+<div>
+  <button type="button" name="toggle-r-text" class="btn btn-indigo btn-md btn-raised btn-flex mt-3 mb-3">
+    <i class="toggle-button mdi mdi-toggle-switch-off mdi-lg mdi-md-bg-primary-50 mr-1"></i>
+    Toggle rtext
+  </button>
+  <div class="card card-flat mb-4">
+    <div class="content">
+      <h4 class="notoc card-title">The Extremes of Good and Evil</h4>
+      <h6 class="notoc category text-gray mb-3">Cicero, Paragraph 1.10.32 · Translation by H. Rackham, Issue 1914 - De Finibus</h6>
+      <p class="card-description toggle-description no-r-text">
+        But I must explain to you how all this mistaken idea of denouncing
+        pleasure and praising pain was born and I will give you a complete
+        account of the system, and expound the actual teachings of the great
+        explorer of the truth, the master-builder of human happiness.
+        <br/><br/>
+        No one rejects, dislikes, or avoids pleasure itself, because it is
+        pleasure, but because those who do not know how to pursue pleasure
+        rationally encounter consequences that are extremely painful. Nor
+        again is there anyone who loves or pursues or desires to obtain pain
+        of itself, because it is pain, but because occasionally circumstances
+        occur in which toil and pain can procure him some great pleasure.
+        <br/><br/>
+        To take a trivial example, which of us ever undertakes laborious
+        physical exercise, except to obtain some advantage from it? But who
+        has any right to find fault with a man who chooses to enjoy a pleasure
+        that has no annoying consequences, or one who avoids a pain that
+        produces no resultant pleasure?
+      </p>
+    </div>
+  </div>
+</div>
+
+<script>
+  $('button[name="toggle-r-text"]').on('click', function (e) {
+    $('p.toggle-description').toggleClass('no-r-text r-text-300');
+    $('.toggle-button').toggleClass('mdi-toggle-switch-off mdi-toggle-switch');
+  });
+</script>
+++++
+
+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
+
+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
+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.
+
+++++
+<div>
+  <button type="button" name="scale-r-text" class="btn btn-indigo btn-md btn-raised btn-flex mt-3 mb-3">
+    <i class="scale-button mdi mdi-arrow-up mdi-lg mdi-md-bg-primary-50 mr-1"></i>
+    Scale rtext
+  </button>
+  <div class="card card-flat mb-4">
+    <div class="content">
+      <h4 class="notoc card-title">The Extremes of Good and Evil</h4>
+      <h6 class="notoc category text-gray mb-3">Cicero, Paragraph 1.10.33 · Translation by H. Rackham, Issue 1914 - De Finibus</h6>
+      <p class="card-description scale-description r-text-300">
+        On the other hand, we denounce with righteous indignation and dislike men who
+        are so beguiled and demoralized by the charms of pleasure of the moment, so
+        blinded by desire, that they cannot foresee the pain and trouble that are
+        bound to ensue; and equal blame belongs to those who fail in their duty through
+        weakness of will, which is the same as saying through shrinking from toil and pain.
+        <br/><br/>
+        These cases are perfectly simple and easy to distinguish. In a free hour, when
+        our power of choice is untrammelled and when nothing prevents our being able to
+        do what we like best, every pleasure is to be welcomed and every pain avoided.
+        But in certain circumstances and owing to the claims of duty or the obligations
+        of business is will frequently occur that pleasures have to be repudiated and
+        annoyances accepted. The wise man therefore always holds in these matters to
+        this principle of selection: he rejects pleasures to secure other greater
+        pleasures, or else he endures pains to avoid worse pains.
+      </p>
+    </div>
+  </div>
+</div>
+
+<script>
+  $('button[name="scale-r-text"]').on('click', function (e) {
+    $('p.scale-description').toggleClass('r-text-300 r-text-500');
+    $('.scale-button').toggleClass('mdi-arrow-up mdi-arrow-down');
+  });
+</script>
+++++
+
+=== 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
+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
+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 mb-5"]
+|===============================================================================
+|Property | Factor |Example text
+
+|`r-text-100`
+|0.5
+|
+[role="r-text-100"]
+Lorem ipsum dolor sit amet, consetetur sadipscing
+elitr, sed diam nonumy eirmod tempor erat, sed diam
+voluptua.
+
+|`r-text-200`
+|0.7
+|
+[role="r-text-200"]
+Lorem ipsum dolor sit amet, consetetur sadipscing
+elitr, sed diam nonumy eirmod tempor erat, sed diam
+voluptua.
+
+|`r-text-300`
+|0.8
+|
+[role="r-text-300"]
+Lorem ipsum dolor sit amet, consetetur sadipscing
+elitr, sed diam nonumy eirmod tempor erat, sed diam
+voluptua.
+
+|`r-text-400`
+|0.9
+|
+[role="r-text-400"]
+Lorem ipsum dolor sit amet, consetetur sadipscing
+elitr, sed diam nonumy eirmod tempor erat, sed diam
+voluptua.
+
+|`r-text-500`
+|1.0
+|
+[role="r-text-500"]
+Lorem ipsum dolor sit amet, consetetur sadipscing
+elitr, sed diam nonumy eirmod tempor erat, sed diam
+voluptua.
+
+|===============================================================================
+
+
+=== Text in Action
+
+User interfaces (UI) enable vistors 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="table-responsive mb-5"]
+|===============================================================================
+|Property | Example
+
+|`nav-pills-primary`
+|
+++++
+<button type="button" class="btn btn-primary 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-info 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>
+++++
+
+
+== What's next
+
+Have you enjoyed playing with text? We hope so. But more on can the J1 do for
+your web pages. With the examples on that page, icons were used to support the
+meaning what was grouped as text.
+
+J1 template supports 2 popular icons font sets:
+
+* Material Design Icons
+* FontAwesome Icons V5
+
+Would you like learn more about icons? The next example page focus on what's
+possible using link:{roundtrip-icon-fonts}[Material Design Icons].