RubyGems - j1-template - Versions diffs - 2020.0.12 → 2020.0.17 - Mend

j1-template 2020.0.12 → 2020.0.17

Files changed (480) hide show

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

@@ -26,7 +26,7 @@ resource_options:
         color_2:                        md_grey_400
       slides:
         # Broadway Underground - still image (animate default)
-        - url:                          /assets/videos/headers/still/underground-broadway.png
+        - url:                          /assets/videos/headers/still/underground-broadway.jpg
           alt:                          Broadway Underground
           alignY:                       top
           animateFirst:                 false
@@ -37,7 +37,7 @@ resource_options:
           loop:                         false
           duration:                     12000
         # Broadway Underground - still image (animate random)
-        - url:                          /assets/videos/headers/still/underground-broadway.png
+        - url:                          /assets/videos/headers/still/underground-broadway.jpg
           alt:                          Broadway Underground
           alignY:                       top
           transition:                   push_left|push_right|cover_up|cover_down|fade|fadeInOut

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

@@ -24,6 +24,9 @@ resource_options:
       slides:
         - url:                          /assets/images/pages/roundtrip/typography-1920x1280-bw.jpg
           alt:                          Photo by Alice Donovan Rousel on Unsplash
+          preload:                      0
+          transitionDuration:           fast
+          resolutionRefreshRate:        500
           badge:
             type:                       unsplash
             author:                     Alice Donovan Rousel
@@ -87,15 +90,15 @@ will happen in terms of responsiveness.
 ++++
 <div>
-  <button type="button" name="toggle-r-text" class="btn btn-secondary btn-raised btn-flex mt-3 mb-3">
+  <button type="button" name="toggle-r-text" class="btn btn-info 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="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">
+      <h4 class="notoc">The Extremes of Good and Evil</h4>
+      <h6 class="notoc text-gray mb-3">Cicero, Paragraph 1.10.32 · Translation by H. Rackham, Issue 1914 - De Finibus</h6>
+      <p class="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
@@ -143,15 +146,15 @@ of the text in action.
 ++++
 <div>
-  <button type="button" name="scale-r-text" class="btn btn-secondary btn-raised btn-flex mt-3 mb-3">
+  <button type="button" name="scale-r-text" class="btn btn-info 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="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">
+      <h4 class="notoc">The Extremes of Good and Evil</h4>
+      <h6 class="notoc text-gray mb-3">Cicero, Paragraph 1.10.33 · Translation by H. Rackham, Issue 1914 - De Finibus</h6>
+      <p class="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
@@ -195,7 +198,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-stacked-lg mb-5"]
+[cols="3,2,7a", options="header", role="table-responsive-stacked-lg"]
 |===============================================================================
 |Property | Factor |Example text
@@ -295,7 +298,7 @@ used. All Bootstrap base classes can be used to colorize:
 |`nav-pills-primary`
 |
 ++++
-<button type="button" class="btn btn-primary btn-raised btn-round">
+<button type="button" class="btn btn-secondary btn-raised btn-round">
   color example
 </button>
 ++++

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

@@ -10,7 +10,7 @@ categories:                             [ pages ]
 permalink:                              /pages/public/learn/roundtrip/mdi_icon_font/
 regenerate:                             false
-resources:                              [ iconify_api ]
+resources:                              [ iconify ]
 resource_options:
   - attic:
       padding_top:                      400
@@ -50,7 +50,7 @@ include::{includedir}/attributes.asciidoc[tag=data]
 // Set local page attributes
 // -----------------------------------------------------------------------------
-// :images-dir:                         {imagesdir}/path/to/page/images
+// :images-dir:                         {imagesdir}/path/to/page/images
 // Page content

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

@@ -10,7 +10,7 @@ categories:                             [ pages ]
 permalink:                              /pages/public/learn/roundtrip/asciidoc_extensions/
 regenerate:                             false
-resources:                              [ lightbox ]
+resources:                              [ lightbox, iconify, twemoji ]
 resource_options:
   - attic:
       padding_top:                      400

data/lib/starter_web/pages/public/learn/roundtrip/410_bs_modals_extentions.adoc CHANGED

@@ -57,57 +57,32 @@ include::{includedir}/attributes.asciidoc[tag=data]
 // Include sub-documents
 // -----------------------------------------------------------------------------
-Advanced Bootstrap Modals are based on the free package of
-link:{mdb-home}[Material Design for Bootstrap, {window}] on version
+Advanced Bootstrap Modals are based on the free package of
+link:{mdb-home}[Material Design for Bootstrap, {window}] on version
 *4.3.2*. This version can be found following this link:
-link:{mdb-bs-modals-legacy}[Enhanced Bootstrap Modals, {window}]. A more
+link:{mdb-bs-modals-legacy}[Enhanced Bootstrap Modals, {window}]. A more
 current version is available from here: link:{mdb-bs-modals}[Modal examples & templates, {window}].
-Bootstrap modals are used to add dialogs to your web pages for user
-notifications. To highlight important information to your vistors. Modals
-are positioned over everything else in the document so that the notification
+Bootstrap modals are used to add dialogs to your web pages for user
+notifications. To highlight important information to your vistors. Modals
+are positioned over everything else in the document so that the notification
 gets the users attention.
 == BS advanced Modals
 To improve your visitors experience on important information that shouldn't
-missed, modals are a good choice to bring the users attention on. Using J1
+missed, modals are a good choice to bring the users attention on. Using J1
 Template BS enhanced predefined modal styles, some emotional weight is added
-to the information displayed - ranging from an info level, simple warning to
+to the information displayed - ranging from an info level, simple warning to
 critical messages.
-NOTE: For more information on how to use Bootstrap’s JavaScript modal
+NOTE: For more information on how to use Bootstrap’s JavaScript modal
 plugin, refer to: link:{bs_doc_components_modal}[Bootstrap Docs, {window}].
 // Include sub-documents
 // -----------------------------------------------------------------------------
 include::{documentsdir}/410_table_3_column.asciidoc[]
-//////////
-include::{documentsdir}/410_top_info.asciidoc[]
-include::{documentsdir}/410_top_right_success.asciidoc[]
-include::{documentsdir}/410_top_left_info.asciidoc[]
-include::{documentsdir}/410_bottom_info.asciidoc[]
-include::{documentsdir}/410_bottom_right_danger.asciidoc[]
-include::{documentsdir}/410_bottom_left_warning.asciidoc[]
-include::{documentsdir}/410_full_height_right_success.asciidoc[]
-include::{documentsdir}/410_full_height_left_info.asciidoc[]
-//////////
-//////////
-include::{documentsdir}/410_position_and_sizes.asciidoc[]
-include::{documentsdir}/410_contact_form.asciidoc[]
-include::{documentsdir}/410_form_login_with_avatar.asciidoc[]
-include::{documentsdir}/410_omni_login.asciidoc[]
-include::{documentsdir}/410_central_large_info.asciidoc[]
-include::{documentsdir}/410_central_fluid_success.asciidoc[]
-include::{documentsdir}/410_full_height_top_warning.asciidoc[]
-include::{documentsdir}/410_full_height_bottom_danger.asciidoc[]
-include::{documentsdir}/410_full_height_right_success.asciidoc[]
-//////////
 == Whats next
 Bootstrap is really a great CSS framework that offers in the current V4
@@ -123,6 +98,4 @@ what the link:{roundtrip-responsive-tables}[BS tables extensions] can do!
 // Include the modals HTML portion
 // -------------------------------------------------------------------
-include::{documentsdir}/419_advanced_modals_html.asciidoc[]
+include::{documentsdir}/419_advanced_modals_demo.asciidoc[]

data/lib/starter_web/pages/public/learn/roundtrip/420_responsive_tables_extensions.adoc CHANGED

@@ -141,7 +141,7 @@ on smaller viewports. From a specified breakpoint and up, the table will
 behave normally and do not scroll horizontally.
 .Bootstrap F Table (fixed font size)
-[cols="6a,6a", options="header", width="100%", role="table-responsive-stacked-lg no-r-text mt-3"]
+[cols="6a,6a", options="header", width="100%", role="table-responsive no-r-text mt-3"]
 |===============================================================================
 |Variable |Description
@@ -163,7 +163,7 @@ Post's front matter by specifying a new date/time in the format
 .Bootstrap R Table (responsive text size)
-[cols="6a,6a", options="header", width="100%", role="table-responsive-stacked-lg mt-3"]
+[cols="6a,6a", options="header", width="100%", role="table-responsive mt-3"]
 |===============================================================================
 |Variable |Description

data/lib/starter_web/pages/public/learn/roundtrip/500_themes.adoc CHANGED

@@ -72,26 +72,26 @@ versions of Bootstrap's CSS styles for a website.
 == Themes
 It is expected that many people will change the template for their needs. To
-really create *unique* websites. Fundamental to do this is are CSS styles
+really create *unique* websites. Fundamental to do this is are CSS styles
 defined by Bootstrap.
 Modifying the CSS styles of link:{bootstrap-home}[Bootstrap, {window}] is not
-rocket science. But, to be honest, some knowledge is needed of
+rocket science. But, to be honest, some knowledge is needed of
 link:{w3org-css-spec}[the CSS technology] to do so. We encourage you to spend
-some time first on learning CSS. To learn what is the
-link:{w3schools-css-tutorial}[design base, {window}] of each and every website.
+some time first on learning CSS. To learn what is the
+link:{w3schools-css-tutorial}[design base, {window}] of each and every website.
 Independendly from using Bootstrap or any other CSS framwork.
-Thanks to the people at link:{bootswatch-home}[Bootswatch, {window}], a great
-set of already prepared Bootstrap stylesheets in various designs are available
-at their website. No need to start from the scratch, to re-define all the
-Bootstrap variables and rebuilt the framework files to create a new theme. Many
-different styles are available. What is already available is at least a good
+Thanks to the people at link:{bootswatch-home}[Bootswatch, {window}], a great
+set of already prepared Bootstrap stylesheets in various designs are available
+at their website. No need to start from the scratch, to re-define all the
+Bootstrap variables and rebuild the framework files to create a new theme. Many
+different styles are available. What is already available is at least a good
 base for your modifications: your unique design.
-Beside the bunch of different stylesheets at Bootswatch, an
+Beside the bunch of different stylesheets at Bootswatch, an
 link:{bootswatch-api}[integration API, {window}] is available that helps a lot
-to integrate available designs into a existing site. This API is the base to
+to integrate available designs into a existing site. This API is the base to
 integrate Bootswatch stylesheets into J1 Template for easy use.
 Thanks again the people at Bootswatch for this great work.
@@ -99,22 +99,22 @@ Thanks again the people at Bootswatch for this great work.
 == Apply a theme
-The base for designing pages using J1 Template is the theme *Uno*, a modern
+The base for designing pages using J1 Template is the theme *Uno*, a modern
 light theme that can be used for many types of websites. And what we mentioned
 already, web design is not: one size fits all. The theme *Uno* can be seen as
 good base, a starting point. Combining Uno and a different theme may a fast
 solution for your site!?
-You can find all available themes, all stylesheets to be applied to your pages
-from the menu *Themes*. You're invited to check how a page is changing for
-their design if other stylesheets, other ideas of web design is used.
+You can find all available themes, all stylesheets to be applied to your pages
+from the menu *Themes*. You're invited to check how a page is changing for
+their design if other stylesheets, other ideas of web design is used.
-NOTE: Changing BS-based styles is one thing, changing from one theme to the
-next at runtime a bit more challanging. For the alpha version of J1 Template,
+NOTE: Changing BS-based styles is one thing, changing from one theme to the
+next at runtime a bit more challanging. For the alpha version of J1 Template,
 many styles are automatically changed for J1 specific components as well, but
-*not* all of them for now.
+*not* all of them for now.
-Simply select a theme from this menu and a new BS-based stylesheet is
+Simply select a theme from this menu and a new BS-based stylesheet is
 automatically applied to your pages.
 Have fun!
@@ -130,9 +130,7 @@ a look at the link:{previewer-theme}[Theme previewer].
 To make things real for your new site, go for *Web in a day*. This tutorial
 guides you through all the steps how to build a website - your site using
-Jekyll  nd the template system J1. It's really a nice journey to *explore*
+Jekyll  nd the template system J1. It's really a nice journey to *explore*
 and  *learn* creating a static web.
 Start your journey from here: link:{kickstarter-web-in-a-day}[Web in a day].

data/lib/starter_web/pages/public/{previewer/mdb_preview → learn/roundtrip/510_mdb_preview}/000_includes/attributes.asciidoc RENAMED

File without changes

data/lib/starter_web/pages/public/{previewer/mdb_preview → learn/roundtrip/510_mdb_preview}/000_includes/documents/100_buttons.asciidoc RENAMED

File without changes

data/lib/starter_web/pages/public/{previewer/mdb_preview → learn/roundtrip/510_mdb_preview}/mdb_previewer.adoc RENAMED

File without changes

data/lib/starter_web/pages/public/learn/vtutorials/000_includes/attributes.asciidoc CHANGED

@@ -89,7 +89,7 @@ tag::tags[]
 :dotdot:                                          &#46;&#46;
 :middot:                                          &middot;
-end::tags[]
+end::tags[]
 // Data - Data elements for Asciidoctor extensions
 // -----------------------------------------------------------------------------

data/lib/starter_web/pages/public/learn/vtutorials/000_includes/documents/410_bottom_info.asciidoc CHANGED

@@ -4,7 +4,7 @@
 ++++
 <div class="ml-2 mb-5">
   <!-- Button trigger modal -->
-  <button type="button" class="btn btn-primary btn-raised" data-toggle="modal" data-target="#frameModalBottomSuccessDemo">
+  <button type="button" class="btn btn-secondary btn-raised" data-toggle="modal" data-target="#frameModalBottomSuccessDemo">
     Launch Modal Example
   </button>
 </div>

data/lib/starter_web/pages/public/learn/vtutorials/000_includes/documents/410_bottom_left_warning.asciidoc CHANGED

@@ -4,7 +4,7 @@
 ++++
 <div class="ml-2 mb-5">
   <!-- Button trigger modal -->
-  <button type="button" class="btn btn-primary btn-raised" data-toggle="modal" data-target="#sideModalBLWarningDemo">
+  <button type="button" class="btn btn-secondary btn-raised" data-toggle="modal" data-target="#sideModalBLWarningDemo">
     Launch Modal Example
   </button>
 </div>

data/lib/starter_web/pages/public/learn/vtutorials/000_includes/documents/410_bottom_right_danger.asciidoc CHANGED

@@ -4,7 +4,7 @@
 ++++
 <div class="ml-2 mb-5">
   <!-- Button trigger modal -->
-  <button type="button" class="btn btn-primary btn-raised" data-toggle="modal" data-target="#sideModalBRDangerDemo">
+  <button type="button" class="btn btn-secondary btn-raised" data-toggle="modal" data-target="#sideModalBRDangerDemo">
     Launch Modal Example
   </button>
 </div>

data/lib/starter_web/pages/public/learn/vtutorials/000_includes/documents/410_central_success.asciidoc CHANGED

@@ -4,7 +4,7 @@
 ++++
 <div class="ml-2 mb-5">
   <!-- Button trigger modal -->
-  <button type="button" class="btn btn-primary btn-raised" data-toggle="modal" data-target="#centralModalSuccessDemo">
+  <button type="button" class="btn btn-secondary btn-raised" data-toggle="modal" data-target="#centralModalSuccessDemo">
     Launch Modal Example
   </button>
 </div>

data/lib/starter_web/pages/public/learn/vtutorials/000_includes/documents/410_full_height_left_info.asciidoc CHANGED

@@ -4,7 +4,7 @@
 ++++
 <div class="ml-2 mb-5">
   <!-- Button trigger modal -->
-  <button type="button" class="btn btn-primary btn-raised" data-toggle="modal" data-target="#fluidModalLeftInfoDemo">
+  <button type="button" class="btn btn-secondary btn-raised" data-toggle="modal" data-target="#fluidModalLeftInfoDemo">
     Launch Modal Example
   </button>
 </div>

data/lib/starter_web/pages/public/learn/vtutorials/000_includes/documents/410_full_height_right_success.asciidoc CHANGED

@@ -4,7 +4,7 @@
 ++++
 <div class="ml-2 mb-5">
   <!-- Button trigger modal -->
-  <button type="button" class="btn btn-primary btn-raised" data-toggle="modal" data-target="#fluidModalRightSuccessDemo">
+  <button type="button" class="btn btn-secondary btn-raised" data-toggle="modal" data-target="#fluidModalRightSuccessDemo">
     Launch Modal Example
   </button>
 </div>

data/lib/starter_web/pages/public/learn/vtutorials/000_includes/documents/410_top_info.asciidoc CHANGED

@@ -4,7 +4,7 @@
 ++++
 <div class="ml-2 mb-5">
   <!-- Button trigger modal -->
-  <button type="button" class="btn btn-primary btn-raised" data-toggle="modal" data-target="#frameModalTopInfoDemo">
+  <button type="button" class="btn btn-secondary btn-raised" data-toggle="modal" data-target="#frameModalTopInfoDemo">
     Launch Modal Example
   </button>
 </div>

data/lib/starter_web/pages/public/learn/vtutorials/000_includes/documents/410_top_left_info.asciidoc CHANGED

@@ -4,7 +4,7 @@
 ++++
 <div class="ml-2 mb-5">
   <!-- Button trigger modal -->
-  <button type="button" class="btn btn-primary btn-raised" data-toggle="modal" data-target="#sideModalTLInfoDemo">
+  <button type="button" class="btn btn-secondary btn-raised" data-toggle="modal" data-target="#sideModalTLInfoDemo">
     Launch Modal Example
   </button>
 </div>

data/lib/starter_web/pages/public/learn/vtutorials/000_includes/documents/410_top_right_success.asciidoc CHANGED

@@ -4,7 +4,7 @@
 ++++
 <div class="ml-2 mb-5">
   <!-- Button trigger modal -->
-  <button type="button" class="btn btn-primary btn-raised" data-toggle="modal" data-target="#sideModalTRSuccessDemo">
+  <button type="button" class="btn btn-secondary btn-raised" data-toggle="modal" data-target="#sideModalTRSuccessDemo">
     Launch Modal Example
   </button>
 </div>

data/lib/starter_web/pages/public/learn/vtutorials/000_includes/documents/419_advanced_modals_html.asciidoc CHANGED

@@ -128,7 +128,7 @@
     <div class="modal-content">
       <!-- Body -->
       <div class="modal-body">
-        <p class="mt-1 ml-3 mr-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nisi quo provident fugiat reprehenderit nostrum quos..</p><div class="row ml-3">
+        <p class="mt-1 ml-3 mr-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nisi quo provident fugiat reprehenderit nostrum quos..</p><div class="row ml-3">
           <a type="button" class="btn btn-primary-modal mr-2">Yes, please</a>
           <a type="button" class="btn btn-outline-secondary-modal" data-dismiss="modal">No, thanks<div class="ripple-container"><div class="ripple-decorator ripple-on ripple-out" style="left: 51.4063px; top: 20px; background-color: rgb(1, 211, 107); transform: scale(14.5548);"></div></div></a>
         </div>
@@ -184,7 +184,7 @@
       </div>
       <!-- Body -->
       <div class="modal-body">
-        <img src="/assets/images/modules/attics/admin-dashboard-bootstrap-1280x600.png" alt="" class="img-fluid">
+        <img src="/assets/images/modules/attics/admin-dashboard-bootstrap-1280x600.jpg" alt="admin-dashboard-bootstrap-1280x600.jpg" class="img-fluid">
         <div class="text-center">
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt vero illo error eveniet cum.</p>
         </div>
@@ -409,7 +409,7 @@
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga, enim, ab officiis totam.
           </p>
         </div>
-        <img src="/assets/images/modules/attics/admin-dashboard-bootstrap-1280x600.png" alt="" class="img-fluid">
+        <img src="/assets/images/modules/attics/admin-dashboard-bootstrap-1280x600.jpg" alt="admin-dashboard-bootstrap-1280x600.jpg" class="img-fluid">
       </div>
       <!-- Footer -->
       <div class="modal-footer">
@@ -724,7 +724,7 @@
       </div>
       <!-- Body -->
       <div class="modal-body">
-        <img src="/assets/images/modules/attics/admin-dashboard-bootstrap-1280x600.png" alt="" class="img-fluid">
+        <img src="/assets/images/modules/attics/admin-dashboard-bootstrap-1280x600.jpg" alt="bootstrap-1280x600.jpg" class="img-fluid">
         <div class="text-center">
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt vero illo error eveniet cum.</p>
         </div>
@@ -925,4 +925,4 @@
   </div>
 </div>
 <!--END Modal Subscription -->
-++++
+++++

data/lib/starter_web/pages/public/learn/whats_up.adoc CHANGED

@@ -11,7 +11,7 @@ permalink:                              /pages/public/learn/whats_up/
 regenerate:                             false
 toc:                                    true
-resources:                              [ lightbox ]
+resources:                              []
 resource_options:
   - ssm:
       mode:                             menu
@@ -84,7 +84,6 @@ 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