j1-template 2023.0.17 → 2023.2.0

data/lib/starter_web/pages/public/learn/roundtrip/present_images.adoc

@@ -15,7 +15,7 @@ keywords: >
                                         Roundtrip
 
 categories:                             [ Roundtrip ]
-tags:                                   [ Module, Carousel, Lightbox, Image, Slider ]
+tags:                                   [ Module, Carousel, Lightbox, Image, Slider, Slick ]
 
 image:
   path:                                 /assets/images/modules/attics/1920x1280/quino-al-2.jpg
@@ -30,7 +30,7 @@ permalink:                              /pages/public/learn/roundtrip/present_im
 resources:                              [
                                           animate, clipboard, carousel, comments,
                                           justifiedGallery, lightbox, lightGallery,
-                                          masterslider, rouge
+                                          masterslider, rouge, slick
                                         ]
 resource_options:
   - attic:
@@ -44,7 +44,6 @@ resource_options:
             href:                       https://unsplash.com/@quinoal
 ---
 
-
 // Page Initializer
 // =============================================================================
 // Enable the Liquid Preprocessor
@@ -64,7 +63,7 @@ resource_options:
 :url-j1-docs--masterslider-module:      https://jekyll.one/pages/public/manuals/modules/masterslider/
 
 :url-j1-masterslider-slider-previewer:  https://jekyll.one/pages/public/previewer/masterslider/
-
+:url-j1-slick-previewer:                /pages/public/previewer/slick/
 
 //  Load Liquid procedures
 // -----------------------------------------------------------------------------
@@ -145,6 +144,7 @@ LightGallery can do this by the following example.
 
 gallery::jg_old_times[ role="mb-4 wm-800" ]
 
+
 == J1 Carousel
 
 J1 Carousel is based on OWL Carousel V1 in the latest (and unfortunately
@@ -234,6 +234,53 @@ many images the show contains.
 .One Slide Carousel
 carousel::demo_oneslide[role="mb-4"]
 
+
+== J1 Slick Carousel
+
+[role="mb-4"]
+_Slick_ is a popular jQuery plugin for creating responsive and fully
+customizable carousels. It allows developers to easily create beautiful
+and dynamic carousels that can display images, videos, or any other type
+of content in a visually appealing way. The plugin is designed to be
+lightweight, fast, and easy to use, making it a popular choice for all web
+developers. It has many features, including multiple navigation options,
+lazy loading, or autoplay. Slick carousels are compatible with all modern
+browsers and devices, making it a great choice to create a responsive and
+mobile-friendly website.
+
+=== Slick Image Carousel
+
+[role="mb-4"]
+An _Slick_ image carousel typically consists of a container with images and
+a navigation system, including buttons, arrows, or dots that allow users to
+move back and forth between images or select a specific image. Image carousels
+can also include animation effects, such as fade-in or slide-in transitions
+between images, to make the presentation more engaging and visually appealing.
+
+.Carousel + Arrows + Dots + Captions + Lightbox
+slick::image_carousel_mega_cities_lightbox[role="mb-5"]
+
+=== Slick Carousel from Collections
+
+[role="mb-4"]
+A carousel from a collection for J1 Template is a *pre-defined* carousel
+type to display collection *articles* on a webpage as a carousel. Collection
+carousels pull content from a specific *collection*. All Carousels
+for collections display the article image and a link to the article as a
+caption. All Slick carousels for the J1 Theme can be easily customized in
+various ways, such as changing the slider speed, or the navigation options
+like *Arrows* and *Dots*.
+
+.Collection Biography + Arrows + Dots + Gutters
+slick::collection_carousel_biography[role="mb-3"]
+
+=== More about Slick Carousels
+
+[role="mb-4"]
+If you're interested to learn more about _Slick_, go previewer page
+link:{url-j1-slick-previewer}[Slick Previewer, {browser-window--new}],
+
+
 == J1 Master Slider
 
 The Javascript tool _Master Slider_ is a 3rd party plugin fully integrated
@@ -324,13 +371,14 @@ masterslider::ms_00009[role="mb-5"]
 
 === More about Master Slider
 
+[role="mb-5"]
 If you're interested to learn more about MS Slider, go for the following
 documents:
 
 * MS Slider link:{url-j1-masterslider-slider-previewer}[Previewer, {browser-window--new}]
 * MS Slider link:{url-j1-docs--masterslider-module}[Module documentation, {browser-window--new}]
 
-[role="mt-5"]
+
 == JustifiedGallery
 
 link:{url-justified-gallery--home}[JustifiedGallery, {browser-window--new}]
@@ -358,4 +406,12 @@ 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.
 
+The J1 Theme support playing video on web pages by HTML5 Video, the new
+standard of HTML. HTML5 Video implements a pure HTML way to show video on
+the web. Modern browsers support the video tag `<video>` for the HTML5 video
+standard. The previous proprietary de facto standard software like Flash
+Player, Quicktime, or Silverlight is no longer needed as the Jekyll theme
+JekyllOne provides HTML5 Video support for local video content and from
+online sources on the Internet.
+
 Incredible? See the next example page link:{url-roundtrip--present-videos}[Present Videos].

data/lib/starter_web/pages/public/learn/roundtrip/present_videos.adoc

@@ -237,9 +237,21 @@ gallery::jg_video_online_vk[role="mb-5"]
 == What next
 
 Images and videos are pretty visual. And it can be impressive, for sure.
-But the most visual component is the text for all pages, for all sites on the
-Internet. To see how text could be presented great for modern responsive
-websites, check the section Typography next.
+But the most visual component is the text for all pages, for all sites on
+the Internet.
+
+Sadly, one common flaw is seen in many templates and frameworks: a lack of
+support for genuinely responsive text. While elements on a page resize
+fluidly, the text still resizes on a fixed basis. To avoid this issue,
+especially for heavily text-focused pages, J1 Theme supports styles that
+fluidly scale text size and line height to optimize readability for the user.
+
+The Jekyll Theme JekyllOne places the character font as one of the most
+crucial branding elements for any website. Typography matters for any media
+presenting text. The text will take on an important role of acting not only
+as plain text but also as something like images. To see how text could be
+presented great for modern responsive websites, check the section
+Typography next.
 
 What? Please find out how it works.
 Go for: link:{url-roundtrip--typography}[Typography], then.

data/lib/starter_web/pages/public/learn/roundtrip/responsive_tables.adoc

@@ -25,7 +25,7 @@ flowtext:                               false
 fab_menu_id:                            page_ctrl
 scrollbar:                              true
 
-regenerate:                             true
+regenerate:                             false
 permalink:                              /pages/public/learn/roundtrip/responsive_tables/
 
 resources:                              [ animate, clipboard, lightbox, rouge ]
@@ -442,5 +442,17 @@ Expectedly you've enjoyed exploring all the possibilities J1 offers so far.
 An exciting feature may be the use of themes. But much, much more can the J1
 do for your Web Site.
 
+J1 Theme offers various unique functionalities compared to other Jekyll
+themes and templates. Bootstrap themes for the J1 Theme are based on the
+free and open-source CSS front-end framework Bootstrap of version V5. The
+Bootstrap themes for the J1 enable the presentation of different versions
+(skins) of the same site using already prepared Bootstrap CSS templates.
+
+Using Bootstrap themes results in a uniform appearance for the content in
+terms of the overall layout, text, tables, and form elements across all
+modern web browsers available on the market. In addition, developers can
+take advantage of CSS classes defined in Bootstrap to customize content
+individually.
+
 Check out what themes can do. Have a look at the
 link:{url-roundtrip--themes}[Bootstrap Themes] feature!

data/lib/starter_web/pages/public/learn/roundtrip/typography.adoc

@@ -128,6 +128,7 @@ what will happen in terms of responsiveness.
 To see Responsive Text `r-text` in action, use the button above to toggle on
 and off Responsive Text to see the difference!
 
+
 == Scaling Responsive Text
 
 The responsive text comes in five different scale factors in a range from 100
@@ -179,6 +180,7 @@ responsiveness in action.
 </script>
 ++++
 
+
 == Scale factors
 
 As mentioned, `r-text` comes in five levels of size. The base of `r-text` is
@@ -192,8 +194,8 @@ font in size accordingly. Further, 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.
+That way, five series are available by the five scale factors. See the
+following table how `r-text` scales.
 
 .Scale factors
 |===
@@ -246,12 +248,17 @@ explorer of the truth, the master-builder of human happiness.
 
 |===
 
+
 == What next
 
-Have you enjoyed playing with the text? We hope so. But even more, J1 can
+Have you enjoyed playing with the text? I hope so. But even more, J1 can
 do for your web pages. With the examples on that page, icons support the
 meaning of what was grouped as text.
 
+J1 Theme supports popular icons font sets out-of-the-box. 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.
+
 J1 Theme supports popular icons font sets like:
 
 * Material Design Icons

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

@@ -72,7 +72,7 @@ resource_options:
 == Full Responsive
 
 [role="mb-3"]
-image::/assets/images/pages/panels/responsive-text-1920x800.jpg[{{page.title}}]
+image::/assets/images/pages/panels/responsive-text-1920x800.jpg[{{page.title}}, width=1280]
 
 A good user experience browsing a Web site is one of the most important
 features a website offers as a must, besides excellent content. Presenting
@@ -126,7 +126,7 @@ modifications; your unique design.
 == HTML5 · CSS3 · JS
 
 [role="mb-3"]
-image::/assets/images/pages/panels/florian-olivo-1920x800.jpg[{{page.title}}]
+image::/assets/images/pages/panels/florian-olivo-1920x800.jpg[{{page.title}}, width=1280]
 
 The Internet is a rapidly changing world. Like the fashion industries, new
 trends are set every year. J1 Theme combines modern technologies for the
@@ -185,7 +185,7 @@ solutions like Adobe Flash to build modern web pages based on open standards.
 === Javascript
 
 [role="mb-3"]
-image::/assets/images/pages/panels/modules-apps-1920x800.jpg[{{page.title}}]
+image::/assets/images/pages/panels/modules-apps-1920x800.jpg[{{page.title}}, width=1280]
 
 JavaScript is a text-based programming language used on the client-side and
 server-side to make web pages interactive. HTML and CSS are languages that
@@ -217,7 +217,7 @@ JavaScript is needed to use the build-in JS-based modules.
 == Start in No Time
 
 [role="mb-3"]
-image::/assets/images/pages/panels/no-time-1920x800.jpg[{{page.title}}]
+image::/assets/images/pages/panels/no-time-1920x800.jpg[{{page.title}}, width=1280]
 
 The base idea of the J1 Theme is to give all people a toolset at their
 hands to create a website with no need to start by web development or

data/lib/starter_web/pages/public/plans/plans.adoc

@@ -1,13 +1,12 @@
 ---
 title:                                  J1 Starter
-tagline:                                Plan Setails
+tagline:                                Plan Details
 date:                                   2020-11-03 00:00:00
 description: >
-                                        A good user experience browsing a Web site is one of the most important
-                                        features a website offers as a must, besides excellent content. Presenting
-                                        content at its best on all devices for all window sizes makes a great Web
-                                        brilliant. J1 Theme supports your Web for full responsiveness, for the
-                                        best user experience on all modern devices.
+                                        Service plans give customers a clear understanding of what services
+                                        they will receive, how they will be provided, and what they will cost. Service
+                                        plans help ensure that the service provider and the customer are on the same
+                                        page and can work together effectively.
 
 categories:                             [ Info ]
 tags:                                   [ Plan, Template ]
@@ -17,7 +16,7 @@ robots:
   follow:                               false
 
 image:
-  path:                                 /assets/images/modules/attics/gift-from-hand-1920x1280.jpg
+  path:                                 /assets/images/modules/attics/1920x1280/kira-auf-der-heide.jpg
   width:                                1920
   height:                               1280
   alt:                                  Plan Details
@@ -33,8 +32,12 @@ resource_options:
   - attic:
       padding_top:                      600
       slides:
-        - url:                          /assets/images/modules/attics/gift-from-hand-1920x1280.jpg
-          alt:                          Plan Details
+        - url:                          /assets/images/modules/attics/1920x1280/kira-auf-der-heide.jpg
+          alt:                          Photo by Kira auf der Heide on Unsplash
+          badge:
+            type:                       unsplash
+            author:                     Kira auf der Heide
+            href:                       https://unsplash.com/@kadh
 ---
 
 // Page Initializer
@@ -61,15 +64,25 @@ resource_options:
 // -----------------------------------------------------------------------------
 == Plans
 
-lorem:sentences[5]
+Service plans are typically contracts or agreements between a service provider
+and a customer, outlining the terms and conditions of a particular service or
+set of services that will be provided.
 
-lorem:sentences[3]
+Service plans may include details such as the scope of the service, the level
+of support provided, the duration of the contract, the payment terms, and any
+additional fees or charges. Some service plans may also include warranties or
+guarantees, outlining what the customer can expect regarding quality or
+reliability.
+
+Overall, service plans give customers a clear understanding of what services
+they will receive, how they will be provided, and what they will cost. Service
+plans help ensure that the service provider and the customer are on the same
+page and can work together effectively.
 
 === Starter
 
 lorem:sentences[5]
 
-
 === Base
 
 lorem:sentences[5]