j1-template 2021.0.5 → 2021.0.10

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

@@ -32,7 +32,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
@@ -71,9 +71,8 @@ critical messages.
 NOTE: For more information on how to use Bootstrap’s JavaScript modal
 plugin, refer to: link:{bs_doc_components_modal}[Bootstrap Docs, {browser-window--new}].
 
-// Include sub-documents
-// -----------------------------------------------------------------------------
-include::{documentdir}/410_table_3_column.asciidoc[]
+// include::{documentdir}/tables/bs_modal_examples.asciidoc[]
+include::{documentdir}/410_table_bs_modal_examples.asciidoc[]
 
 == Whats next
 
@@ -89,5 +88,5 @@ what the link:{roundtrip-responsive-tables}[BS tables extensions] can do!
 
 
 // Include the modals HTML portion
-// -------------------------------------------------------------------
+// -----------------------------------------------------------------------------
 include::{documentdir}/419_advanced_modals_demo.asciidoc[]

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

@@ -35,10 +35,9 @@ resource_options:
 // Enable the Liquid Preprocessor
 :page-liquid:
 
-// Set page (local) attributes here
+// Set (local) page attributes here
 // -----------------------------------------------------------------------------
 // :page--attr:                         <attr-value>
-:debug:
 :images-dir:                            {imagesdir}/pages/roundtrip/100_present_images
 
 //  Load Liquid procedures
@@ -57,58 +56,6 @@ Creating a design for responsive tables is challenging. The approach used by
 J1 Template is based on pure CSS on top of the classic Bootstrap styles for
 simplicity and portability to be viewed best on all devices and browsers.
 
-ifdef::debug[]
-
-.Source, options NOT set
-[source, md, role="noclip"]
-----
-[cols=",", options="header", ]
-|===============================================================================
-|Bratze |Bru
-
-|Fick
-|dich
-
-|===============================================================================
-----
-
-
-.Options NOT set
-[cols=",", options="header", ]
-|===============================================================================
-|Bratze |Bru
-
-|Fick
-|dich
-
-|===============================================================================
-
-.Source, options SET
-[source, adoc, role="noclip"]
-----
-[cols="6a,6a", options="header", width="100%", role="table-responsive mt-3"]
-|===============================================================================
-|Bratze |Bru
-
-|Fick
-|dich
-
-|===============================================================================
-----
-
-.options set
-[cols="6a,6a", options="header", width="100%", role="table-responsive mt-3"]
-|===============================================================================
-|Bratze |Bru
-
-|Fick
-|dich
-
-|===============================================================================
-endif::[]
-
-
-
 == Table types
 
 But, for sure, the solution provided is a compromise. To fit the common needs

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

@@ -11,6 +11,8 @@ description: >
 tags:                                   [ Bootstrap, Themes ]
 categories:                             [ Introduction, Features ]
 
+scrollbar:                              false
+
 permalink:                              /pages/public/learn/roundtrip/themes/
 regenerate:                             false
 
@@ -34,7 +36,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
@@ -125,7 +127,6 @@ not all of them for now.
 Simply select a theme from this menu, and a new BS-based stylesheet is
 automatically applied to your pages.
 
-
 == Code Highlighter Rouge
 
 _Rouge_ is a pure Ruby and themeable syntax highlighter. It can highlight
@@ -133,37 +134,50 @@ _Rouge_ is a pure Ruby and themeable syntax highlighter. It can highlight
 this section all available themes and examples for several lanuguages how
 highlightning works using _Rouge_.
 
+For the default theme `Uno` of J1 Template, the following _Rouge_ themes
+are used:
+
+* light: `igorpro`
+* dark: `monokai.sublime`
+
+NOTE: The default themes used for J1 Template can be configured with the
+global template config file `~/_data/j1_config.yml`.
+
+
 === Apply a theme
 
-Make a selection of theme below to preview a theme.
+Make a selection of a theme below to preview.
 
 ++++
 <div class="btn-group">
-  <button class="btn btn-primary btn-raised btn-flex btn-lg dropdown-toggle" type="button" data-toggle="dropdown" data-target="#navbarDropdown" aria-haspopup="true" aria-expanded="false">
-  Select a theme<span class="caret"></span>
+  <!-- See: https://stackoverflow.com/questions/47242702/force-bootstrap-dropdown-menu-to-always-display-at-the-bottom-and-allow-it-go-of -->
+  <!-- NOTE: control the behaviour of popper.js for positioning -->
+  <!-- NOTE: set attribute data-flip="false" to open the SELECT list at the BOTTOM of the BUTTON -->
+  <button class="btn btn-primary btn-raised btn-flex btn-lg dropdown-toggle" data-flip="false" type="button" data-toggle="dropdown" data-target="#navbarDropdown" aria-haspopup="true" aria-expanded="false">
+  Select Theme<span class="caret"></span>
   </button>
-  <div class="dropdown-menu">
-    <a class="dropdown-item" active="true" href="javascript:void(0)" onclick="j1.adapter.rouge.reaplyStyles('base16')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16</a>
-    <a class="dropdown-item" href="javascript:void(0)" onclick="j1.adapter.rouge.reaplyStyles('base16.dark')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16.dark</a>
-    <a class="dropdown-item" href="javascript:void(0)" onclick="j1.adapter.rouge.reaplyStyles('base16.light')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16.light</a>
-    <a class="dropdown-item" href="javascript:void(0)" onclick="j1.adapter.rouge.reaplyStyles('base16.monokai')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16.monokai</a>
-    <a class="dropdown-item" href="javascript:void(0)" onclick="j1.adapter.rouge.reaplyStyles('base16.monokai.dark')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16.monokai.dark</a>
-    <a class="dropdown-item" href="javascript:void(0)" onclick="j1.adapter.rouge.reaplyStyles('base16.monokai.light')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16.monokai.light</a>
-    <a class="dropdown-item" href="javascript:void(0)" onclick="j1.adapter.rouge.reaplyStyles('base16.solarized')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16.solarized</a>
-    <a class="dropdown-item" href="javascript:void(0)" onclick="j1.adapter.rouge.reaplyStyles('base16.solarized.dark')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16.solarized.dark</a>
-    <a class="dropdown-item" href="javascript:void(0)" onclick="j1.adapter.rouge.reaplyStyles('base16.solarized.light')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16.solarized.light</a>
-    <a class="dropdown-item" href="javascript:void(0)" onclick="j1.adapter.rouge.reaplyStyles('colorful')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>colorful</a>
-    <a class="dropdown-item" href="javascript:void(0)" onclick="j1.adapter.rouge.reaplyStyles('github')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>github</a>
-    <a class="dropdown-item" href="javascript:void(0)" onclick="j1.adapter.rouge.reaplyStyles('gruvbox')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>gruvbox</a>
-    <a class="dropdown-item" href="javascript:void(0)" onclick="j1.adapter.rouge.reaplyStyles('gruvbox.light')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>gruvbox.light</a>
-    <a class="dropdown-item" href="javascript:void(0)" onclick="j1.adapter.rouge.reaplyStyles('igorpro')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>igorpro</a>
-    <a class="dropdown-item" href="javascript:void(0)" onclick="j1.adapter.rouge.reaplyStyles('molokai')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>molokai</a>
-    <a class="dropdown-item" href="javascript:void(0)" onclick="j1.adapter.rouge.reaplyStyles('monokai')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>monokai</a>
-    <a class="dropdown-item" href="javascript:void(0)" onclick="j1.adapter.rouge.reaplyStyles('monokai.sublime')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>monokai.sublime</a>
-    <a class="dropdown-item" href="javascript:void(0)" onclick="j1.adapter.rouge.reaplyStyles('pastie')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>pastie</a>
-    <a class="dropdown-item" href="javascript:void(0)" onclick="j1.adapter.rouge.reaplyStyles('thankful_eyes')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>thankful_eyes</a>
-    <a class="dropdown-item" href="javascript:void(0)" onclick="j1.adapter.rouge.reaplyStyles('tulip')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>tulip</a>
-  </div>
+  <ul class="dropdown-menu scrollable-menu" role="menu">
+    <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('base16')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16</a></li>
+    <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('base16.dark')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16.dark</a></li>
+    <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('base16.light')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16.light</a></li>
+    <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('base16.monokai')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16.monokai</a></li>
+    <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('base16.monokai.dark')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16.monokai.dark</a></li>
+    <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('base16.monokai.light')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16.monokai.light</a></li>
+    <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('base16.solarized')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16.solarized</a></li>
+    <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('base16.solarized.dark')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16.solarized.dark</a></li>
+    <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('base16.solarized.light')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16.solarized.light</a></li>
+    <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('colorful')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>colorful</a></li>
+    <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('github')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>github</a></li>
+    <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('gruvbox')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>gruvbox</a></li>
+    <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('gruvbox.light')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>gruvbox.light</a></li>
+    <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('igorpro')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>igorpro</a></li>
+    <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('molokai')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>molokai</a></li>
+    <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('monokai')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>monokai</a></li>
+    <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('monokai.sublime')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>monokai.sublime</a></li>
+    <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('pastie')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>pastie</a></li>
+    <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('thankful_eyes')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>thankful_eyes</a></li>
+    <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('tulip')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>tulip</a></li>
+  </ul>
 </div>
 <div id="selected" class="mt-1 mb-3"></div>
 ++++
@@ -227,16 +241,10 @@ end
 
 == Whats next
 
-You've explored some of the possibilities J1 offers for
-managing themes. But much, much more can the J1 do for your website.
-
-This was the last place to go for the roundtrip. More details of the most
-common elements of Bootstrap can be found on the previewer for a theme. Have
-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 on how to build a website - your site using
-Jekyll and the template system J1. It's really a pleasant journey to learn to
-create today's static webs.
+Using a theme, the character of a website can change a lot. If you don't want
+to support multiple themes with your site, a theme is a good base to create
+your own theme, anayway.
 
-Start your journey from here: link:{kickstarter-web-in-a-day}[Web in a day].
+An important feature for larger webs is searching. The visitors should be able
+to search your site to find pages and posts they are interested in. Check what
+is searching a J1 websites all about at link:{roundtrip-quicksearch}[Quicksearch].

data/lib/starter_web/pages/public/learn/roundtrip/600_quicksearch.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>
 
@@ -415,3 +415,19 @@ To simulate a logical *AND* search of documents that contains the word `jekyll`
 ----
 +jekyll +collection
 ----
+
+
+== Whats next
+
+You've explored some of the possibilities J1 offers for websites. But much,
+much more can J1 do for your project. This was the last place to go for the
+roundtrip. More details of the most common elements of Bootstrap can be found
+on the previewer for a theme. Have 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 on how to build a website. Your site using
+Jekyll and the template system J1. It's really a pleasant journey to learn what
+modern static webs can offer today.
+
+// Start your journey from here: link:{kickstarter-web-in-a-day}[Web in a day].

data/lib/starter_web/pages/public/learn/roundtrip/_includes/attributes.asciidoc

@@ -53,7 +53,7 @@ tag::urls[]
 :roundtrip-icon-fonts:                            /pages/public/learn/roundtrip/mdi_icon_font/
 :roundtrip-responsive-tables:                     /pages/public/learn/roundtrip/responsive_tables/
 :roundtrip-themes:                                /pages/public/learn/roundtrip/themes/
-:roundtrip-search-engine:                         /pages/public/learn/roundtrip/search_engine/
+:roundtrip-quicksearch:                           /pages/public/learn/roundtrip/quicksearch/
 
 :github-gist-home:                                https://gist.github.com/
 :asciidoc-extensions-gist-example:                https://gist.github.com/mojavelinux/5546622

data/lib/starter_web/pages/public/learn/roundtrip/_includes/documents/tables/bs_modal_examples.asciidoc

@@ -0,0 +1,47 @@
+
+.Selected extended BS modal examples
+[cols="6a,3a,3a", options="header", width="100%", role="rtable"]
+|===============================================================================
+|Postion |Class | Example
+
+|`top`
+|`info`
+|
+include::../410_top_info.asciidoc[]
+
+|`top-right`
+|`success`
+|
+include::../410_top_right_success.asciidoc[]
+
+|`top-left`
+|`info`
+|
+include::../410_top_left_info.asciidoc[]
+
+|`bottom`
+|`info`
+|
+include::../410_bottom_info.asciidoc[]
+
+|`bottom-right`
+|`danger`
+|
+include::../410_bottom_right_danger.asciidoc[]
+
+|`bottom-left`
+|`warning`
+|
+include::../410_bottom_left_warning.asciidoc[]
+
+|`full-height right`
+|`success`
+|
+include::../410_full_height_right_success.asciidoc[]
+
+|`full-height left`
+|`info`
+|
+include::../410_full_height_left_info.asciidoc[]
+
+|===============================================================================

data/lib/starter_web/pages/public/learn/where_to_go.adoc

@@ -3,8 +3,9 @@ title:                                  Where to go
 tagline:                                fasten your way
 date:                                   2020-11-03 00:00:00
 description: >
-                                        Where to go, Too Long; Didn't Read to fasten
-                                        your way through the preview pages of J1 Template.
+                                        Welcome to the pages of J1 Template. If your here
+                                        first time, a good decision you get on that page first.
+                                        For sure, there is no better place to go.
 
 tags:                                   [ Roundtrip, Introduction ]
 categories:                             [ Info ]
@@ -35,7 +36,7 @@ resource_options:
 // Enable the Liquid Preprocessor
 :page-liquid:
 
-// Set page (local) attributes here
+// Set (local) page attributes here
 // -----------------------------------------------------------------------------
 // :page--attr:                         <attr-value>
 
@@ -45,59 +46,43 @@ resource_options:
 
 // Load page attributes
 // -----------------------------------------------------------------------------
-{% include {{load_attributes}} scope="none" %}
+{% include {{load_attributes}} scope="global" %}
 
 
 // Page content
 // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-Welcome to the pages of J1 Template. If your here first time,
-a good decision you get on that page first. For sure, there is no better
-place to go.
-
-Having a menu system is great. We hope the Navigator module of J1 will
-support you to explore this site, find what you 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.
-
-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.
-
-To read the webpages, 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.
-
-== Whats up
-
-First of all, you've started already! The crucial first step in to find
-your way to Jekyll is done. Congratulations.
+Welcome to the pages of J1 Template. If your here first time, a good decision
+you get on that page first. For sure, there is no better place to go.
+The crucial first step in to find your way to Jekyll is done. Congratulations.
 
 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
-
-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.
-
-Let's go more in-depth and make things real - and your hands dirty. You dive
-into the world of Jekyll. You'll have learned a lot at the end of that
-day about what Jekyll is, static webs and the template system J1 is all
-about.
-
-You're welcome!
-
-If you like, continue by walking through the roundtrip examples
+Roundtrip::
+With this section you'll find a *tour* to show some of the main features of
+the template system *J1*. The tour covers how image data can be managed using
+J1, some background of the typography the template is using, discuss important
+extensions and some more what J1 can do. The roundtrip is a *visual* tour.
+No technical stuff, nothing academic.
+
+Asciidoc Skeletons::
+AsciiDoc is a human-readable document format using plain-text mark-up
+conventions. AsciiDoc documents can be created using any text editor and
+read *as-is*. J1 template renders Asciidoc code to HTML, your future awesome
+web pages. J1 is using *Asciidoc* for writing content. Documents in a web may
+simple in structure, but may also grow complex for e.g multi-chapter pages.
+The skeletons are discussed in the tutorial *Web in a Day* as a base for
+your content.
+
+You should go for *first* the *Roundtrip*. See what you will get. As an
+overview of some of the main features of *J1*.  If you like, continue by
+walking through the roundtrip examples
 link:/pages/public/learn/roundtrip/present_images/[by starting the tour here].
+
+To go deeper, your're invited to *Web in a Day*. This tutorial guides you
+through all the steps to build a website using Jekyll and the template system
+J1. The guide let you go more in-depth and make things real. You dive into
+the world of Jekyll. You'll have learned a lot at the end of that day about
+what Jekyll is, static webs and the template system J1 is all about.
+Try out the journey having some hours of fun at
+{url-j1-web-in-a-day--meet-and-greet}[Web in a Day, {browser-window--new}].

data/lib/starter_web/pages/public/panels/intro_panel/panel.adoc

@@ -18,14 +18,17 @@ categories:                             [ Info, Introduction ]
 permalink:                              /pages/public/panels/intro_panel/
 regenerate:                             false
 
-resources:                              [ lightbox, carousel ]
+resources:                              [
+                                          clipboard, rouge, carousel, lightbox,
+                                          justified_gallery, light_gallery
+                                        ]
 resource_options:
   - attic:
       padding_top:                      400
       padding_bottom:                   50
       opacity:                          0.5
       slides:
-        - url:                          /assets/images/modules/attics/responsive-text-1920x1280.jpg
+        - url:                          /assets/images/modules/attics/jessica-ruscello-1920x1280.jpg
           alt:                          responsive-text-1920x1280
           badge:
             type:                       unsplash
@@ -40,7 +43,7 @@ resource_options:
 == Full Responsive
 
 [role="mb-3"]
-image::/assets/images/pages/panels/the-place-1920x800.jpg[{{page.title}}]
+image::/assets/images/pages/panels/responsive-text-1920x800.jpg[{{page.title}}]
 
 A good user experience browsing a Web site is one of the most important
 feature a site has to offer as a must. Beside excellent content. Presenting
@@ -64,59 +67,85 @@ elements, cards, forms, etc.
 == HTML5 · CSS3 · JS
 
 [role="mb-3"]
-image::/assets/images/pages/panels/modules-apps-1920x800.jpg[{{page.title}}]
+image::/assets/images/pages/panels/florian-olivo-1920x800.jpg[{{page.title}}]
 
 The Internet is a rapidly changing world. Like the fashion industries, new
 trends are set every year. J1 Template combines modern technologies for the
 world of static Webs to make a site unique using current standards in terms
 of web development, languages, and tools.
 
-=== HTML5 + CSS3
+=== Coding web pages
+
+J1 is using HTML5, the latest major version of HTML, for structuring content
+on the World Wide Web. The current version of the HTML standard offers a lot
+of new features including detailed processing models to support more
+interoperable implementations. It extends and improves HTML markups available
+in older versions.
 
-J1 is using HTML5 for structuring content on the World Wide Web. The current
-version of the HTML standard offers a lot of new features including detailed
-processing models to support more interoperable implementations. It extends
-and improves HTML markups available. HTML5 introduces application programming
-interfaces (APIs) for more complex web applications. For the same reasons,
-the new HTML standard is also a good choice for modern cross-platform mobile
-applications, because it includes features designed with mobile devices in mind.
+HTML5 introduces application programming interfaces (APIs) for more complex
+web applications. For the same reasons, the new HTML standard is also a good
+choice for modern cross-platform mobile applications, because it includes
+features designed with mobile devices in mind.
 
 Many new features are included with HTML5. To natively support multimedia and
-graphical content, the new <video>, <audio> and <canvas> elements were added.
-Besides this, support for scalable vector graphics (SVG) and an API called
-MathML for mathematical formulas are now available.
+graphical content, the new `<video>`, `<audio>` and `<canvas>` elements were
+added. Besides this, support for *SVG* (scalable vector graphics), an API called
+*MathML* for mathematical formulas and a grid system called *Flex* are now
+available.
 
-The new standard allows to use so-called semantic markup elements for your
-documents. New structure elements such as <main>, <section>, <article>,
-<header> or <footer> (and many more) were added. Better structured HTML code
-can help people having disabilities to read the pages presented better.
+The new standard allows to use so-called *semantic* markup elements for your
+documents. New structure elements such as `<main>`, `<section>`, `<article>`,
+`<header>` or `<footer>` (and many more) were added. Better structured HTML
+code can help people having disabilities to read the pages presented better.
 
-CSS is designed to enable the separation of presentation and content. Including
-layout, colors, and fonts for example. This separation improves content
-accessibility, provide more flexibility and control in the presentation.
+*CSS* (cascadeded style sheets) is designed to enable the *separation* of
+presentation and content. Including layout, colors, and fonts for example.
+This separation improves content accessibility, provide more flexibility and
+control in the presentation.
 
 Separation of formatting and content also makes it feasible to present the
-same page in different styles. For example, the themes feature of J1 Template
+same page in different styles. For example, the *themes feature* of J1 Template
 makes use of this.
 
-CSS3 is divided into several separate components called modules. Each module
-adds new capabilities or extends features defined in the former CSS2 standard.
-HTML5 in combination with CSS3 allows creating modern and modular code for
-web pages that can be viewed on all current devices like Mobiles, Tablets,
-or the classic Desktop PC. The new HTML5 elements plus CSS3 modules can be
-used as a replacement for proprietary solutions like Adobe Flash to build
-modern webpages based on open standards.
+*CSS3*, the current standard for cascadeded style sheets, is divided into
+several separated components called *modules*. Each module adds new capabilities
+or extends features defined in the former CSS2 standard. HTML5 in combination
+with CSS3 allows creating modern and modular code for web pages that can be
+viewed on all current devices like Mobiles, Tablets, or the classic Desktop PC.
+The new HTML5 elements plus CSS3 modules can be used as a replacement for
+proprietary solutions like _Adobe Flash_ to build modern webpages based on
+open standards.
 
 === Javascript
 
-HTML5 and CSS3 can do a lot. Content placement and basic methods for the
-dynamic of elements can be done using pure HTML5 and CSS3. For more complex
-solutions like modules, the support of Javascript is needed.
+[role="mb-3"]
+image::/assets/images/pages/panels/modules-apps-1920x800.jpg[{{page.title}}]
+
+JavaScript is a text-based programming language used both on the client-side
+and server-side that allows you to make web pages interactive. Where HTML and
+CSS are languages that give structure and style to web pages, JavaScript gives
+web pages interactive elements that engage a user.
 
-J1 Template has build-in a wide range of JS-powered modules to support a
-website e.g. the navigation, for presenting image data in galleries,
-lightboxes, and so on.
+Content placement and basic methods for the dynamic of elements can be done
+using pure HTML5 and CSS3. For more complex solutions like *modules* (to
+provide dynamic, interactive elements), the support of *Javascript* for a
+webpage is needed.
 
+JavaScript is used for J1 mainly as a client-side script-engine. A client-side
+script is a programming language that performs its tasks entirely on the
+client's machine and does not need to interact with the server to function.
+
+Some of the dynamic website enhancements performed by JavaScript are:
+
+* Loading (new) content or data onto the page without reloading the page
+* Rollover effects and dropdown menus
+* Animating page elements such as fading, resizing or relocating
+* Playing audio and video
+
+J1 Template has build-in a wide range of JS-powered modules to support a
+website e.g. by a powerful navigation system, for presenting image data in
+galleries, lightboxes, and so on. Good news are: no programming JavaScript
+is needed to use the build-in JS-based modules.
 
 [[launch-ready]]
 == Start in No Time
@@ -164,6 +193,8 @@ This is a bit different for static webs as they don’t have a central Managemen
 System as CMS does to integrate external code. There no ecosystem, no
 marketplace to get apps and modules from.
 
+gallery::jg_old_times[]
+
 Luckily, it is not that hard to integrate external components into the world
 of Jekyll. But one of the objectives of J1 is to give people a ready-to-use
 toolset without the need to install, to integrate components that are expected