j1-template 2022.0.9 → 2022.0.10

data/lib/starter_web/pages/_test_pages/accordion-02-tester.adoc

@@ -1,177 +0,0 @@
----
-title:                                  Tester
-tagline:                                bootstrap accordion 2
-date:                                   2020-11-03 00:00:00 +100
-description: >
-                                        Welcome to the preview page focussing on the image module. This page
-                                        shows some valuable features of the J1 Template to manage your image-based
-                                        content using lightboxes, carousels (slider), and galleries.
-
-categories:                             [ Testpages ]
-tags:                                   [ Example ]
-
-comments:                               false
-fab_menu_id:                            page_ctrl_simple
-
-permalink:                              /pages/public/learn/bs_acc_2/
-regenerate:                             false
-
-resources:                              []
-resource_options:
-  - attic:
-      padding_top:                      400
-      padding_bottom:                   50
-      opacity:                          0.5
-      slides:
-        - url:                          /assets/images/pages/roundtrip/images-1920x1280-bw.jpg
-          alt:                          Photo by Ricardo Gomez Angel on Unsplash
-          badge:
-            type:                       unsplash
-            author:                     Ricardo Gomez Angel
-            href:                       https://unsplash.com/@ripato/portfolio
----
-
-// Page Initializer
-// =============================================================================
-// Enable the Liquid Preprocessor
-:page-liquid:
-
-// Set (local) page attributes here
-// -----------------------------------------------------------------------------
-// :page--attr:                         <attr-value>
-:images-dir:                            {imagesdir}/pages/roundtrip/100_present_images
-
-//  Load Liquid procedures
-// -----------------------------------------------------------------------------
-{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
-
-// Load page attributes
-// -----------------------------------------------------------------------------
-{% include {{load_attributes}} scope="global" %}
-
-{% comment %} language detection|i18n
--------------------------------------------------------------------------------- {% endcomment %}
-{% if site.language == "en" %}
-  {% assign language = "en" %}
-{% elsif site.language == "de"%}
-  {% assign language = "de" %}
-{% else %}
-  {% assign language = "en" %}
-{% endif %}
-
-{% if language == "en" %}
-  {% assign readmore_text = "read" %}
-  {% assign infinite_scroll_last = "More articles can be found with the" %}
-{% endif %}
-
-{% if language == "de" %}
-  {% assign readmore_text = "lesen" %}
-  {% assign infinite_scroll_last = "Weitere Artikel finden Sie im" %}
-{% endif %}
-
-// Page content
-// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-
-// Include sub-documents (if any)
-// -----------------------------------------------------------------------------
-
-== BS Accordion 1
-
-lorem:sentences[5]
-
-++++
-<div class="container">
-
-  <div class="row">
-    <div class="col-lg-9 mx-auto">
-      <!-- Accordion -->
-      <div id="accordionExample" class="accordion shadow">
-
-        <!-- Accordion item 1 -->
-        <div class="card">
-          <div id="headingOne" class="card-header bg-white shadow-sm border-0">
-            <h6 class="mb-0 font-weight-bold"><a href="#void" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne" class="d-block position-relative text-dark text-uppercase collapsible-link py-2">Collapsible Group Item #1</a></h6>
-          </div>
-          <div id="collapseOne" aria-labelledby="headingOne" data-parent="#accordionExample" class="collapse show">
-            <div class="card-body p-5">
-              <p class="font-weight-light m-0">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.</p>
-            </div>
-          </div>
-        </div>
-
-        <!-- Accordion item 2 -->
-        <div class="card">
-          <div id="headingTwo" class="card-header bg-white shadow-sm border-0">
-            <h6 class="mb-0 font-weight-bold"><a href="#void" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" class="d-block position-relative collapsed text-dark text-uppercase collapsible-link py-2">Collapsible Group Item #2</a></h6>
-          </div>
-          <div id="collapseTwo" aria-labelledby="headingTwo" data-parent="#accordionExample" class="collapse">
-            <div class="card-body p-5">
-              <p class="font-weight-light m-0">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.</p>
-            </div>
-          </div>
-        </div>
-
-        <!-- Accordion item 3 -->
-        <div class="card">
-          <div id="headingThree" class="card-header bg-white shadow-sm border-0">
-            <h6 class="mb-0 font-weight-bold"><a href="#void" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree" class="d-block position-relative collapsed text-dark text-uppercase collapsible-link py-2">Collapsible Group Item #3</a></h6>
-          </div>
-          <div id="collapseThree" aria-labelledby="headingThree" data-parent="#accordionExample" class="collapse">
-            <div class="card-body p-5">
-              <p class="font-weight-light m-0">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.</p>
-            </div>
-          </div>
-        </div>
-
-      </div>
-    </div>
-  </div>
-</div>
-
-
-
-<style>
-/*
-*
-* ==========================================
-* CUSTOM UTIL CLASSES
-* ==========================================
-*
-*/
-/* Horizontal line */
-.collapsible-link::before {
-  content: '';
-  width: 14px;
-  height: 2px;
-  background: #333;
-  position: absolute;
-  top: calc(50% - 1px);
-  right: 1rem;
-  display: block;
-  transition: all 0.3s;
-}
-
-/* Vertical line */
-.collapsible-link::after {
-  content: '';
-  width: 2px;
-  height: 14px;
-  background: #333;
-  position: absolute;
-  top: calc(50% - 7px);
-  right: calc(1rem + 6px);
-  display: block;
-  transition: all 0.3s;
-}
-
-.collapsible-link[aria-expanded='true']::after {
-  transform: rotate(90deg) translateX(-1px);
-}
-
-.collapsible-link[aria-expanded='true']::before {
-  transform: rotate(180deg);
-}
-
-
-</style>
-++++

data/lib/starter_web/pages/_test_pages/accordion-03-tester.adoc

@@ -1,148 +0,0 @@
----
-title:                                  Tester
-tagline:                                bootstrap accordion 3
-date:                                   2020-11-03 00:00:00 +100
-description: >
-                                        Welcome to the preview page focussing on the image module. This page
-                                        shows some valuable features of the J1 Template to manage your image-based
-                                        content using lightboxes, carousels (slider), and galleries.
-
-categories:                             [ Testpages ]
-tags:                                   [ Example ]
-
-comments:                               false
-fab_menu_id:                            page_ctrl_simple
-
-permalink:                              /pages/public/learn/bs_acc_3/
-regenerate:                             false
-
-resources:                              []
-resource_options:
-  - attic:
-      padding_top:                      400
-      padding_bottom:                   50
-      opacity:                          0.5
-      slides:
-        - url:                          /assets/images/pages/roundtrip/images-1920x1280-bw.jpg
-          alt:                          Photo by Ricardo Gomez Angel on Unsplash
-          badge:
-            type:                       unsplash
-            author:                     Ricardo Gomez Angel
-            href:                       https://unsplash.com/@ripato/portfolio
----
-
-// Page Initializer
-// =============================================================================
-// Enable the Liquid Preprocessor
-:page-liquid:
-
-// Set (local) page attributes here
-// -----------------------------------------------------------------------------
-// :page--attr:                         <attr-value>
-:images-dir:                            {imagesdir}/pages/roundtrip/100_present_images
-
-//  Load Liquid procedures
-// -----------------------------------------------------------------------------
-{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
-
-// Load page attributes
-// -----------------------------------------------------------------------------
-{% include {{load_attributes}} scope="global" %}
-
-{% comment %} language detection|i18n
--------------------------------------------------------------------------------- {% endcomment %}
-{% if site.language == "en" %}
-  {% assign language = "en" %}
-{% elsif site.language == "de"%}
-  {% assign language = "de" %}
-{% else %}
-  {% assign language = "en" %}
-{% endif %}
-
-{% if language == "en" %}
-  {% assign readmore_text = "read" %}
-  {% assign infinite_scroll_last = "More articles can be found with the" %}
-{% endif %}
-
-{% if language == "de" %}
-  {% assign readmore_text = "lesen" %}
-  {% assign infinite_scroll_last = "Weitere Artikel finden Sie im" %}
-{% endif %}
-
-// Page content
-// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-
-// https://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=expand-and-collapse-faq-accordion
-
-// Include sub-documents (if any)
-// -----------------------------------------------------------------------------
-
-== BS Accordion 3
-
-lorem:sentences[5]
-
-++++
-<div class="row">
-	<div class="col-lg-12">
-		<div class="accordion" id="accordionExample">
-			<div class="card">
-				<div class="card-header" id="headingOne">
-					<h2 class="clearfix mb-0">
-						<a class="btn btn-link" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne"><i class="fa fa-chevron-circle-down"></i> What is Bootstrap Framework?</a>
-					</h2>
-				</div>
-				<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
-					<div class="card-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum.</div>
-				</div>
-			</div>
-			<div class="card">
-				<div class="card-header" id="headingTwo">
-					<h2 class="mb-0">
-						<a class="btn btn-link collapsed" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"><i class="fa fa-chevron-circle-down"></i> How to Create Responsive Website with Bootstrap?</a>
-					</h2>
-				</div>
-				<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
-					<div class="card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.</div>
-				</div>
-			</div>
-			<div class="card">
-				<div class="card-header" id="headingThree">
-					<h2 class="mb-0">
-						<a class="btn btn-link collapsed" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"><i class="fa fa-chevron-circle-down"></i> Does Bootstrap Framework Provide Cross-browser Support?</a>
-					</h2>
-				</div>
-				<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
-					<div class="card-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum.</div>
-				</div>
-			</div>
-			<div class="card">
-				<div class="card-header" id="headingFour">
-					<h2 class="mb-0">
-						<a class="btn btn-link collapsed" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour"><i class="fa fa-chevron-circle-down"></i> Can I Use Bootstrap for Mobile App Development?</a>
-					</h2>
-				</div>
-				<div id="collapseFour" class="collapse" aria-labelledby="headingFour" data-parent="#accordionExample">
-					<div class="card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.</div>
-				</div>
-			</div>
-		</div>
-	</div>
-</div>
-++++
-
-++++
-<script>
-  $(document).ready(function(){
-  	// Add minus icon for collapse element which is open by default
-  	$(".collapse.show").each(function(){
-  		$(this).prev(".card-header").addClass("highlight");
-  	});
-
-  	// Highlight open collapsed element
-  	$(".card-header .btn").click(function(){
-  		$(".card-header").not($(this).parents()).removeClass("highlight");
-  		$(this).parents(".card-header").toggleClass("highlight");
-  	});
-  });
-</script>
-++++

data/lib/starter_web/pages/_test_pages/attribute-changes-01-tester.adoc

@@ -1,226 +0,0 @@
----
-title:                                  Tester
-tagline:                                listen attribute changes
-date:                                   2021-10-18 00:00:00 +100
-description: >
-                                        A simple example to demonstrate how the attrchange handler
-                                        function is triggered when a style attribute is changed.
-
-categories:                             [ Tester ]
-tags:                                   [ listen, attribute, changes ]
-
-comments:                               false
-fab_menu_id:                            default
-
-permalink:                              /pages/public/learn/attr_change/
-regenerate:                             false
-
-resources:                              []
-resource_options:
-  - attic:
-      padding_top:                      400
-      padding_bottom:                   50
-      opacity:                          0.5
-      slides:
-        - url:                          /assets/images/pages/roundtrip/images-1920x1280-bw.jpg
-          alt:                          Photo by Ricardo Gomez Angel on Unsplash
-          badge:
-            type:                       unsplash
-            author:                     Ricardo Gomez Angel
-            href:                       https://unsplash.com/@ripato/portfolio
----
-
-// Page Initializer
-// =============================================================================
-// Enable the Liquid Preprocessor
-:page-liquid:
-
-// Set (local) page attributes here
-// -----------------------------------------------------------------------------
-// :page--attr:                         <attr-value>
-
-//  Load Liquid procedures
-// -----------------------------------------------------------------------------
-{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
-
-// Load page attributes
-// -----------------------------------------------------------------------------
-{% include {{load_attributes}} scope="none" %}
-
-// Page content
-// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-// https://github.com/meetselva/attrchange
-// http://meetselva.github.io/
-// https://codepen.io/meetselva/pen/EVaLmP
-
-// Include sub-documents (if any)
-// -----------------------------------------------------------------------------
-== Tester
-
-.Usage
-[source, js]
-----
-$([selector]).attrchange({
-  trackValues: true,
-  callback: function (event) {
-  	//event.attributeName - Attribute Name
-  	//event.oldValue - Prev Value
-  	//event.newValue - New Value
-    console.log("attr changed: " +event.newValue);
-  }
-});
-----
-
-++++
-<section class="row ml-0">
-
-  <p>
-    A simple example to demonstrate how the attrchange handler
-    function is triggered when a style attribute is changed.
-    Click the buttons below to move the blue box left/right 10px.
-  </p>
-
-  <div>
-    <h3 class="notoc">Demonstration Highlights</h3>
-    <ul>
-      <li>Uses the supported browser specific method to detect attribute changes.</li>
-      <li>Does not use polling to detect an attribute change</li>
-      <li>Detected DOM change: <span id="attrchange-demo-attrchange-method"></span> </li>
-    </ul>
-  </div>
-
-  <div class="container mb-3">
-
-    <div id="attrchange-demobox">
-      <div id="attrchange-buttons">
-        <div class="attrchange-demo-liner">Live Demo <span class="demo-value-name">( Event Count: <span id="attrchange-demo-event-count" class="demo-value">0</span> )</span></div>
-        <button class="attrchange-demo-button left">&lt;&lt;</button>
-        <button class="attrchange-demo-button right">&gt;&gt;</button>
-      </div>
-      <div id="attrchange-demo" class="attrchange-demo">
-        Click the buttons above to move this box left/right '10px'
-      </div>
-    </div>
-
-    <div id="attrchange-demo-logger">
-      <div class="attrchange-demo-liner">Logs</div>
-      <div id="attrchange-demo-logs"></div>
-    </div>
-
-  </div>
-</section>
-++++
-
-++++
-<script>
-  $(function () {
-    var eventCount = 0;                                                         //event counter
-    var $attrchange_logger = $('#attrchange-demo-logs');                        //cached logger
-
-    $('.attrchange-demo').attrchange({
-      trackValues: true,                                                        // enables tracking old and new values
-      callback: function (e) {                                                  //callback handler on DOM changes
-        // log the events in the panel
-        var $logs = $attrchange_logger.prepend('<p>Attribute <b>' + e.attributeName +
-            '</b> changed from <b>' + e.oldValue +
-            '</b> to <b>' + e.newValue +
-            '</b></p>')
-          .find('p');
-
-        //remove old logs, lets just keep the last 5 events
-        $logs.filter(':gt(4)').remove();
-        // highlight the last log in #333 and rest in #999
-        $logs.css('color', '#777').first().css('color', '#333');
-        //show the method used for detecting DOM changes
-        $("#attrchange-demo-attrchange-method").text($(this).attrchange("getProperties")["method"]);
-        //show the event count
-        $('#attrchange-demo-event-count').text(++eventCount);
-      }
-    });
-
-    $('.attrchange-demo-button').on('click', function () {
-      $('#attrchange-demo').css('left', ($(this).hasClass('left') ? "-=10px" : "+=10px"));
-    });
-
-  });
-</script>
-++++
-
-++++
-<style>
-#attrchange-demobox {
-  height: 230px;
-  float: left;
-  width: 33%;
-  background-color: #f2f2f2;
-  position: relative;
-}
-
-#attrchange-buttons {
-  margin: 0;
-  padding: 0;
-}
-
-.attrchange-demo-button {
-  margin: 0 5px;
-}
-
-#attrchange-demo {
-  width: 200px;
-  height: 40px;
-  overflow: hidden;
-  padding: 10px;
-  border: 1px solid #d2d2d2;
-  background-color: #C2D9EC;
-  font-size: 0.9em;
-  position: absolute;
-  top: 95px;
-  left: 5px;
-}
-
-#attrchange-demo-logger {
-  height: 230px;
-  float: left;
-  width: 33%;
-  background-color: #f2f2f2;
-  overflow: auto;
-}
-
-#attrchange-demo-logs p {
-  padding-left: 10px;
-}
-
-.attrchange-demo-liner {
-  margin: 0 0 15px;
-  font-weight: bold;
-  background-color: #d2d2d2;
-  padding: 5px;
-}
-
-.attrchange-demo-liner span {
-  font-weight: normal;
-  font-size: 0.9em;
-}
-
-.attrchange-demo-liner span.demo-value {
-  color: #7E0136;
-}
-
-#attrchange-demo-highlight {
-  float: left;
-  width: 33%;
-  background-color: #d2d2d2;
-  height: 230px;
-}
-
-#attrchange-demo-highlight ul li {
-  margin-top: 10px;
-}
-
-#attrchange-demo-attrchange-method {
-  color: #7E0136;
-  font-weight: bold;
-}
-
-</style>
-++++

data/lib/starter_web/pages/_test_pages/backdrop-tester.adoc

@@ -1,109 +0,0 @@
----
-title:                                  Tester
-tagline:                                backdrop
-date:                                   2020-11-03 00:00:00 +100
-description: >
-                                        Welcome to the preview page focussing on the image module. This page
-                                        shows some valuable features of the J1 Template to manage your image-based
-                                        content using lightboxes, carousels (slider), and galleries.
-
-categories:                             [ Testpages ]
-tags:                                   [ Example ]
-
-comments:                               false
-fab_menu_id:                            page_ctrl_simple
-
-permalink:                              /pages/public/learn/bd_tester/
-regenerate:                             false
-
-resources:                              [
-                                          clipboard, rouge, carousel, lightbox,
-                                          justifiedGallery, lightGallery
-                                        ]
-resource_options:
-  - attic:
-      padding_top:                      400
-      padding_bottom:                   50
-      opacity:                          0.5
-      slides:
-        - url:                          /assets/images/pages/roundtrip/images-1920x1280-bw.jpg
-          alt:                          Photo by Ricardo Gomez Angel on Unsplash
-          badge:
-            type:                       unsplash
-            author:                     Ricardo Gomez Angel
-            href:                       https://unsplash.com/@ripato/portfolio
----
-
-// Page Initializer
-// =============================================================================
-// Enable the Liquid Preprocessor
-:page-liquid:
-
-// Set (local) page attributes here
-// -----------------------------------------------------------------------------
-// :page--attr:                         <attr-value>
-:images-dir:                            {imagesdir}/pages/roundtrip/100_present_images
-
-//  Load Liquid procedures
-// -----------------------------------------------------------------------------
-{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
-
-// Load page attributes
-// -----------------------------------------------------------------------------
-{% include {{load_attributes}} scope="global" %}
-
-// Page content
-// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-
-// Include sub-documents (if any)
-// -----------------------------------------------------------------------------
-
-++++
-<div class="row mt-3 mr-3 mb-5 ml-3">
-  <!-- Heading -->
-  <div class="row">
-    <div class="animated fadeInUp">
-      <h2 class="g-font-weight-500 mb-0">Jekyll One Template</h2>
-      <p class="tagline mb-0"><b>powerful modern static websites</b></p>
-      <div class="d-inline-block g-width-50 g-height-2 bg-primary mb-2"></div>
-    </div>
-  </div>
-  <!-- End Heading -->
-  <!-- Body -->
-  <div class="row animated fadeInUp">
-    <div class="mr-3 mb-3">
-      <p class="dropcap">
-        Jekyll One Template is the first toolbox to create modern webs and a  learning platform to experience what is behind current Internet  Technologies for the World Wide Web. J1 provides creative people  with both: a rich toolset to build websites and the knowledge  needed to learn what's all  about.
-      </p>
-      <p>  J1 meets Jekyll and Bootstrap and makes a lot of friends.  The template system combines the best free software for the Web.  Jekyll One Template is OpenSource and the modules included are free  to use as well. No license issues for private or professional use.</p>
-      <p>  Explore what's possible if you go for static websites.</p>
-    </div>
-    <!-- Footer|Button row -->
-    <div class="mt-1 text-center">
-      <a href="/pages/public/learn/roundtrip/present_images/" class="btn btn-xl btn-primary text-uppercase text-left mr-2 mb-2" style="min-width: 250px">
-        <i class="mdi mdi-briefcase-search-outline mdi-3x mdi- mr-3"></i>
-        <span class="float-right text-left mt-2">
-          Roundtrip
-          <span class="d-block r-text-200 text-lowercase">learn top features</span>
-        </span>
-      </a>
-      <a href="https://rubygems.org/gems/j1-template" target="blank" rel="noopener" class="btn btn-xl btn-primary text-uppercase text-left mr-2 mb-2" style="min-width: 250px">
-        <i class="mdi mdi-briefcase-download-outline mdi-3x mdi- mr-3"></i>
-        <span class="float-right text-left mt-2">
-          Download
-          <span class="d-block r-text-200 text-lowercase">get on rubygems</span>
-        </span>
-      </a>
-      <a href="https://jekyll.one/pages/public/learn/quickstart/" target="blank" rel="noopener" class="btn btn-xl btn-primary text-uppercase text-left mr-2 mb-2" style="min-width: 250px">
-        <i class="mdi mdi-briefcase-check-outline mdi-3x mdi- mr-3"></i>
-        <span class="float-right text-left mt-2">
-          Quickstart
-          <span class="d-block r-text-200 text-lowercase">finished in 15 minutes</span>
-        </span>
-      </a>
-    </div>
-  </div>
-  <!-- END Body -->
-  <!-- End Card -->
-</div>
-++++