j1-template 2022.0.9 → 2022.0.10

data/lib/starter_web/pages/_test_pages/infinite-scroll-tester.adoc

@@ -1,225 +0,0 @@
----
-title:                                  Tester
-tagline:                                infinite scroll
-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/scroller/
-regenerate:                             false
-
-resources:                              [ infinitescroll ]
-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)
-// -----------------------------------------------------------------------------
-
-== Infinite scroll example
-
-lorem:sentences[5]
-
-++++
-  <section class="ftco-section">
-    <div class="container">
-      <div class="row">
-        <div class="col-md-12 text-center">
-          <h2 class="heading-section mb-5 pb-md-4">Accordion #06</h2>
-        </div>
-      </div>
-      <div class="row justify-content-center">
-        <div class="col-md-7 col-lg-6">
-          <div id="accordion" class="myaccordion w-100">
-            <div class="card">
-              <div class="card-header p-0" id="headingOne">
-                <button class="d-flex pl-4 align-items-center justify-content-between btn btn-link" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
-                  <div class="heading d-flex align-items-center">
-                    <h3 class="mb-0">How to manage account?</h3>
-                  </div>
-                  <div class="icon d-flex align-items-center justify-content-center">
-                    <i class="fa" aria-hidden="true"></i>
-                  </div>
-                </button>
-              </div>
-              <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
-                <div class="card-body p-4">
-                  <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
-                </div>
-              </div>
-            </div>
-            <div class="card">
-              <div class="card-header p-0" id="headingTwo">
-                <button class="d-flex pl-4 align-items-center justify-content-between btn btn-link collapsed" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
-                  <div class="heading d-flex align-items-center">
-                    <h3 class="mb-0">How to become Pro</h3>
-                  </div>
-                  <div class="icon d-flex align-items-center justify-content-center">
-                    <i class="fa" aria-hidden="true"></i>
-                  </div>
-                </button>
-              </div>
-              <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
-                <div class="card-body p-4">
-                  <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
-                </div>
-              </div>
-            </div>
-            <div class="card">
-              <div class="card-header p-0" id="headingThree">
-                <button class="d-flex pl-4 align-items-center justify-content-between btn btn-link collapsed" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
-                  <div class="heading d-flex align-items-center">
-                    <h3 class="mb-0">How to create an account?</h3>
-                  </div>
-                  <div class="icon d-flex align-items-center justify-content-center">
-                    <i class="fa" aria-hidden="true"></i>
-                  </div>
-                </button>
-              </div>
-              <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
-                <div class="card-body p-4">
-                  <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-
-++++
-
-++++
-<div class="row mt-3">
-	<section id="scroller">
-    <ul id="post-group" class="list-group list-group-horizontal align-items-stretch flex-wrap">
-      <li id="post-item" class="list-group-item items-2 p-0">
-        <article class="card card-same-height raised-z3 mb-3">
-          <img class="img-fluid img-object--cover g-height-200" src="/assets/images/modules/attics/katie-moum-1920x1280.jpg" alt="Welcome">
-          <h3 class="card-header bg-primary notoc">Welcome</h3>
-          <!-- Body|Excerpt -->
-          <div class="card-body r-text-300">
-            <div class="paragraph dropcap">
-              <p class="dropcap"><span class="j1-dropcap">A</span>ll you’re doing at the end of the day is writing your content, and the J1
-                Template does all the tricky things: putting out HTML, Javascript, and CSS.
-                As a result, the site creation process gets out of your way.</p>
-            </div>
-            <div class="paragraph">
-              <p><strong>Sounds fun, isn’t it</strong>?</p>
-            </div>
-          </div>
-          <!-- End Body|Excerpt -->
-          <div class="card-footer r-text-200">
-
-            <div class="card-footer-text">
-              <i class="mdi mdi-calendar-blank md-grey-600 mr-1"></i>2021 March, 28
-            </div>
-            <a class="card-link text-muted text-lowercase" href="/posts/public/featured/info/2021/03/28/welcome-to-j1/">
-              read · jekyll for everyone
-            </a>
-          </div>
-        </article>
-      </li>
-      <li id="post-item" class="list-group-item items-2 p-0">
-        <article class="card card-same-height raised-z3 mb-3">
-          <img class="img-fluid img-object--cover g-height-200" src="/assets/images/modules/attics/runner-1920x1200.jpg" alt="J1 Template">
-          <h3 class="card-header bg-primary notoc">J1 Template</h3>
-          <!-- Body|Excerpt -->
-          <div class="card-body r-text-300">
-            <div class="paragraph dropcap">
-              <p class="dropcap"><span class="j1-dropcap">T</span>he template system was initially developed to create a simple but fully
-                configurable website creation toolset for document servers. Document servers
-                provide websites or other content formats like PDF, projects, software
-                documentation, or similar approaches.</p>
-            </div>
-          </div>
-          <!-- End Body|Excerpt -->
-          <div class="card-footer r-text-200">
-
-            <div class="card-footer-text">
-              <i class="mdi mdi-calendar-blank md-grey-600 mr-1"></i>2021 March,  3
-            </div>
-            <a class="card-link text-muted text-lowercase" href="/posts/public/featured/knowledge/2021/03/03/about-j1/">
-              read · first version is out
-            </a>
-          </div>
-        </article>
-      </li>
-    </ul>
-	</section>
-
-  <div class="page-load-status">
-    <div class="loader-ellips infinite-scroll-request">
-      <span class="loader-ellips__dot"></span>
-      <span class="loader-ellips__dot"></span>
-      <span class="loader-ellips__dot"></span>
-      <span class="loader-ellips__dot"></span>
-    </div>
-    <p class="infinite-scroll-last">{{infinite_scroll_last}} <a href="/pages/public/blog/navigator/">Blog Navigator</a></p>
-  </div>
-
-  <div class="page-scroll-last">
-    <p class="infinite-scroll-last">{{infinite_scroll_last}} <a href="/pages/public/blog/navigator/">Blog Navigator</a></p>
-  </div>
-</div>
-++++

data/lib/starter_web/pages/_test_pages/list-group-tester.adoc

@@ -1,265 +0,0 @@
----
-title:                                  Tester
-tagline:                                list groups
-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/listgroup/
-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)
-// -----------------------------------------------------------------------------
-
-== Example with cards
-++++
-<div class="row">
-	<section id="list-group">
-		<ul class="list-group list-group-horizontal align-items-stretch flex-wrap">
-			<li class="list-group-item items-2 p-0">
-        <article class="card raised-z3 p-0">
-          <img class="img-fluid img-object--cover" src="/assets/images/modules/attics/rirri-1920x1280.jpg" alt="Polaroid">
-          <h3 class="card-header bg-primary notoc">Polaroid</h3>
-          <div class="card-body r-text-300">
-            <div class="paragraph dropcap">
-              <p class="dropcap"><span class="j1-dropcap">M</span>ehr als zehn Jahre nach der Insolvenz von Polaroid ist die Sofortbildfotografie heute erfolgreicher denn je. Sofortbilder sind vorallem eines: Einzigartig. Polaroids fangen Momente ein wie sind. Nicht zu wiederholen.</p>
-            </div>
-            <div class="paragraph">
-              <p><strong>Was geht denn sofort?</strong></p>
-            </div>
-          </div>
-          <div class="card-footer r-text-200">
-            
-            <div class="card-footer-text"> <i class="mdi mdi-calendar-blank md-grey-600 mr-1"></i>1. Januar 2025 </div>
-            <a class="card-link text-muted text-lowercase" href="/posts/public/featured/produkte/2025/01/01/gegenbewegung_polaroit/"> lesen · Gegenbewegung </a>
-          </div>
-        </article>
-			</li>
-			<li class="list-group-item items-2 p-0">
-        <article class="card raised-z3 p-0">
-          <img class="img-fluid img-object--cover" src="/assets/images/modules/attics/franck-1920x1280.jpg" alt="TikTok">
-          <h3 class="card-header bg-primary notoc">TikTok</h3>
-          <div class="card-body r-text-300">
-            <div class="paragraph dropcap">
-              <p class="dropcap"><span class="j1-dropcap">T</span>ikTok ist eine Social-Media Plattform mit Schwerpunkt Video-Content. Die Nutzer können kurze selbstgemachte Videos teilen. Die Plattform bietet einen Raum, in dem einfach und schnell die eigenen Inhalte veröffentlicht werden können.</p>
-            </div>
-            <div class="paragraph">
-              <p><strong>Was kann TikTok besser?</strong></p>
-            </div>
-          </div>
-          <div class="card-footer r-text-200">
-            
-            <div class="card-footer-text"> <i class="mdi mdi-calendar-blank md-grey-600 mr-1"></i>1. Januar 2025 </div>
-            <a class="card-link text-muted text-lowercase" href="/posts/public/featured/produkte/2025/01/01/aufsteiger_tiktok/"> lesen · video neu gedacht </a>
-          </div>
-        </article>
-			</li>
-			<li class="list-group-item items-2 p-0">
-        <article class="card raised-z3 p-0">
-          <img class="img-fluid img-object--cover" src="/assets/images/modules/attics/alexander-shatov-1920x1280.jpg" alt="Snapchat">
-          <h3 class="card-header bg-primary notoc">Snapchat</h3>
-          <div class="card-body r-text-300">
-            <div class="paragraph dropcap">
-              <p class="dropcap"><span class="j1-dropcap">S</span>napchat ist eine Messenger App für mobile Endgeräte um Bild- und Video- Nachrichten zu versenden. Textnachrichten sind hier Nebensache. Das besondere: Bilder und Videos können einfach mit Filtern und Linsen bearbeitet werden. Dazu Overlay-Elemente wie Audio oder Sticker. Falls gewünscht, ist der Standort auch dabei.</p>
-            </div>
-            <div class="paragraph">
-              <p><strong>Was macht Snapchat besonders?</strong></p>
-            </div>
-          </div>
-          <div class="card-footer r-text-200">
-            
-            <div class="card-footer-text"> <i class="mdi mdi-calendar-blank md-grey-600 mr-1"></i>1. Januar 2025 </div>
-            <a class="card-link text-muted text-lowercase" href="/posts/public/featured/produkte/2025/01/01/aufsteiger_snapchat/"> lesen · anders chatten </a>
-          </div>
-        </article>
-			</li>
-      <li class="list-group-item items-2 p-0">
-        <article class="card raised-z3 p-0">
-          <img class="img-fluid img-object--cover" src="/assets/images/modules/attics/franck-1920x1280.jpg" alt="TikTok">
-          <h3 class="card-header bg-primary notoc">TikTok</h3>
-          <div class="card-body r-text-300">
-            <div class="paragraph dropcap">
-              <p class="dropcap"><span class="j1-dropcap">T</span>ikTok ist eine Social-Media Plattform mit Schwerpunkt Video-Content. Die Nutzer können kurze selbstgemachte Videos teilen. Die Plattform bietet einen Raum, in dem einfach und schnell die eigenen Inhalte veröffentlicht werden können.</p>
-            </div>
-            <div class="paragraph">
-              <p><strong>Was kann TikTok besser?</strong></p>
-            </div>
-          </div>
-          <div class="card-footer r-text-200">
-            
-            <div class="card-footer-text"> <i class="mdi mdi-calendar-blank md-grey-600 mr-1"></i>1. Januar 2025 </div>
-            <a class="card-link text-muted text-lowercase" href="/posts/public/featured/produkte/2025/01/01/aufsteiger_tiktok/"> lesen · video neu gedacht </a>
-          </div>
-        </article>
-			</li>
-      <li class="list-group-item items-2 p-0">
-        <article class="card raised-z3 p-0">
-          <img class="img-fluid img-object--cover" src="/assets/images/modules/attics/rirri-1920x1280.jpg" alt="Polaroid">
-          <h3 class="card-header bg-primary notoc">Polaroid</h3>
-          <div class="card-body r-text-300">
-            <div class="paragraph dropcap">
-              <p class="dropcap"><span class="j1-dropcap">M</span>ehr als zehn Jahre nach der Insolvenz von Polaroid ist die Sofortbildfotografie heute erfolgreicher denn je. Sofortbilder sind vorallem eines: Einzigartig. Polaroids fangen Momente ein wie sind. Nicht zu wiederholen.</p>
-            </div>
-            <div class="paragraph">
-              <p><strong>Was geht denn sofort?</strong></p>
-            </div>
-          </div>
-          <div class="card-footer r-text-200">
-            
-            <div class="card-footer-text"> <i class="mdi mdi-calendar-blank md-grey-600 mr-1"></i>1. Januar 2025 </div>
-            <a class="card-link text-muted text-lowercase" href="/posts/public/featured/produkte/2025/01/01/gegenbewegung_polaroit/"> lesen · Gegenbewegung </a>
-          </div>
-        </article>
-			</li>
-			<li class="list-group-item items-2 p-0">
-        <article class="card raised-z3 p-0">
-          <img class="img-fluid img-object--cover" src="/assets/images/modules/attics/franck-1920x1280.jpg" alt="TikTok">
-          <h3 class="card-header bg-primary notoc">TikTok</h3>
-          <div class="card-body r-text-300">
-            <div class="paragraph dropcap">
-              <p class="dropcap"><span class="j1-dropcap">T</span>ikTok ist eine Social-Media Plattform mit Schwerpunkt Video-Content. Die Nutzer können kurze selbstgemachte Videos teilen. Die Plattform bietet einen Raum, in dem einfach und schnell die eigenen Inhalte veröffentlicht werden können.</p>
-            </div>
-            <div class="paragraph">
-              <p><strong>Was kann TikTok besser?</strong></p>
-            </div>
-          </div>
-          <div class="card-footer r-text-200">
-            
-            <div class="card-footer-text"> <i class="mdi mdi-calendar-blank md-grey-600 mr-1"></i>1. Januar 2025 </div>
-            <a class="card-link text-muted text-lowercase" href="/posts/public/featured/produkte/2025/01/01/aufsteiger_tiktok/"> lesen · video neu gedacht </a>
-          </div>
-        </article>
-			</li>
-      <li class="list-group-item items-2 p-0">
-        <article class="card raised-z3 p-0">
-          <img class="img-fluid img-object--cover" src="/assets/images/modules/attics/rirri-1920x1280.jpg" alt="Polaroid">
-          <h3 class="card-header bg-primary notoc">Polaroid</h3>
-          <div class="card-body r-text-300">
-            <div class="paragraph dropcap">
-              <p class="dropcap"><span class="j1-dropcap">M</span>ehr als zehn Jahre nach der Insolvenz von Polaroid ist die Sofortbildfotografie heute erfolgreicher denn je. Sofortbilder sind vorallem eines: Einzigartig. Polaroids fangen Momente ein wie sind. Nicht zu wiederholen.</p>
-            </div>
-            <div class="paragraph">
-              <p><strong>Was geht denn sofort?</strong></p>
-            </div>
-          </div>
-          <div class="card-footer r-text-200">
-            
-            <div class="card-footer-text"> <i class="mdi mdi-calendar-blank md-grey-600 mr-1"></i>1. Januar 2025 </div>
-            <a class="card-link text-muted text-lowercase" href="/posts/public/featured/produkte/2025/01/01/gegenbewegung_polaroit/"> lesen · Gegenbewegung </a>
-          </div>
-        </article>
-			</li>
-			<li class="list-group-item items-2 p-0">
-        <article class="card raised-z3 p-0">
-          <img class="img-fluid img-object--cover" src="/assets/images/modules/attics/franck-1920x1280.jpg" alt="TikTok">
-          <h3 class="card-header bg-primary notoc">TikTok</h3>
-          <div class="card-body r-text-300">
-            <div class="paragraph dropcap">
-              <p class="dropcap"><span class="j1-dropcap">T</span>ikTok ist eine Social-Media Plattform mit Schwerpunkt Video-Content. Die Nutzer können kurze selbstgemachte Videos teilen. Die Plattform bietet einen Raum, in dem einfach und schnell die eigenen Inhalte veröffentlicht werden können.</p>
-            </div>
-            <div class="paragraph">
-              <p><strong>Was kann TikTok besser?</strong></p>
-            </div>
-          </div>
-          <div class="card-footer r-text-200">
-            
-            <div class="card-footer-text"> <i class="mdi mdi-calendar-blank md-grey-600 mr-1"></i>1. Januar 2025 </div>
-            <a class="card-link text-muted text-lowercase" href="/posts/public/featured/produkte/2025/01/01/aufsteiger_tiktok/"> lesen · video neu gedacht </a>
-          </div>
-        </article>
-			</li>
-      <li class="list-group-item items-2 p-0">
-        <article class="card raised-z3 p-0">
-          <img class="img-fluid img-object--cover" src="/assets/images/modules/attics/rirri-1920x1280.jpg" alt="Polaroid">
-          <h3 class="card-header bg-primary notoc">Polaroid</h3>
-          <div class="card-body r-text-300">
-            <div class="paragraph dropcap">
-              <p class="dropcap"><span class="j1-dropcap">M</span>ehr als zehn Jahre nach der Insolvenz von Polaroid ist die Sofortbildfotografie heute erfolgreicher denn je. Sofortbilder sind vorallem eines: Einzigartig. Polaroids fangen Momente ein wie sind. Nicht zu wiederholen.</p>
-            </div>
-            <div class="paragraph">
-              <p><strong>Was geht denn sofort?</strong></p>
-            </div>
-          </div>
-          <div class="card-footer r-text-200">
-            
-            <div class="card-footer-text"> <i class="mdi mdi-calendar-blank md-grey-600 mr-1"></i>1. Januar 2025 </div>
-            <a class="card-link text-muted text-lowercase" href="/posts/public/featured/produkte/2025/01/01/gegenbewegung_polaroit/"> lesen · Gegenbewegung </a>
-          </div>
-        </article>
-			</li>
-			<li class="list-group-item items-2 p-0">
-        <article class="card raised-z3 p-0">
-          <img class="img-fluid img-object--cover" src="/assets/images/modules/attics/franck-1920x1280.jpg" alt="TikTok">
-          <h3 class="card-header bg-primary notoc">TikTok</h3>
-          <div class="card-body r-text-300">
-            <div class="paragraph dropcap">
-              <p class="dropcap"><span class="j1-dropcap">T</span>ikTok ist eine Social-Media Plattform mit Schwerpunkt Video-Content. Die Nutzer können kurze selbstgemachte Videos teilen. Die Plattform bietet einen Raum, in dem einfach und schnell die eigenen Inhalte veröffentlicht werden können.</p>
-            </div>
-            <div class="paragraph">
-              <p><strong>Was kann TikTok besser?</strong></p>
-            </div>
-          </div>
-          <div class="card-footer r-text-200">
-            
-            <div class="card-footer-text"> <i class="mdi mdi-calendar-blank md-grey-600 mr-1"></i>1. Januar 2025 </div>
-            <a class="card-link text-muted text-lowercase" href="/posts/public/featured/produkte/2025/01/01/aufsteiger_tiktok/"> lesen · video neu gedacht </a>
-          </div>
-        </article>
-			</li>
-		</ul>
-	</section>
-</div>
-
-<style>
-.card {
-	height: calc(100% - 1.75rem);
-}
-</style>
-++++

data/lib/starter_web/pages/_test_pages/tictok.adoc

@@ -1,127 +0,0 @@
----
-title:                                  TikTok
-tagline:                                video examples
-date:                                   2021-04-17 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:                             [ TikTok ]
-tags:                                   [ Video, Desktop ]
-
-comments:                               true
-fab_menu_id:                            page_ctrl_simple
-
-personalization:                        true
-
-permalink:                              /pages/public/tiktok/
-regenerate:                             false
-
-resources:                              [ justifiedGallery, lightGallery ]
-resource_options:
-  - attic:
-      padding_top:                      400
-      padding_bottom:                   50
-      opacity:                          0.5
-      slides:
-        - url:                          /assets/images/modules/attics/franck-1920x1280.jpg
-          alt:                          Photo by Franck on Unsplash
-          badge:
-            type:                       unsplash
-            author:                     Franck
-            href:                       https://unsplash.com/@franckinjapan
----
-
-// 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="none" %}
-
-// Page content
-// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-
-// Include sub-documents (if any)
-// -----------------------------------------------------------------------------
-
-lorem:sentences[3]
-
-lorem:sentences[5]
-
-== Funny videos
-
-lorem:sentences[3]
-
-++++
-<!-- See: https://forum.obsidian.md/t/how-do-i-embed-tiktok-videos/13532/13 -->
-<!-- div style="max-width: 56vh;"><div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 177.7778%; padding-top: 120px;"><iframe src="https://www.tiktok.com/embed/6992668750692584710" allow="fullscreen" style="position: absolute; top: 0px; left: 0px; height: 100%; width: 100%;"></iframe></div -->
-<iframe loading="lazy" width="340" height="700" src="https://www.tiktok.com/embed/6726553443009383682" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="allowfullscreen"></iframe>
-<iframe loading="lazy" width="340" height="700" src="https://www.tiktok.com/embed/6983746143356292357" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="allowfullscreen"></iframe>
-<iframe loading="lazy" width="340" height="700" src="https://www.tiktok.com/embed/6726553443009383682" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="allowfullscreen"></iframe>
-
-<!-- script async src="https://www.tiktok.com/embed.js"></script -->
-
-<style>
-
-/*
-$grid-breakpoint-xl:                              1200px;
-$grid-breakpoint-lg:                              992px;
-$grid-breakpoint-lg-min:                          991px;
-$grid-breakpoint-md:                              768px;
-$grid-breakpoint-md-min:                          767px;
-$grid-breakpoint-sm:                              576px;
-$grid-breakpoint-xs:                              575px;
-*/
-
-.lg-tiktok {
-  padding-left: 200px;
-}
-
-/* Desktop */
-@media screen and (min-width: 991px) {
-  .lg-tiktok {
-    padding-left: 300px;
-  }
-}
-
-
-/* iPad */
-@media screen and (max-width: 1024px) {
-  .lg-tiktok {
-    padding-left: 40px;
-  }
-}
-
-/* Mobile */
-@media screen and (max-width: 575px)  {
-  .lg-tiktok {
-    padding-left: 20px;
-  }
- }
-
-/*
- @media screen and (max-width: 575px)  {
-   .lg-tiktok {
-     padding-left: 180px;
-   }
-  }
-*/
-
-</style>
-++++
-
-// .TikTok
-// gallery::jg_tiktok[role="mb-5"]