j1-template 2023.9.0 → 2023.9.1

data/lib/starter_web/pages/public/blog/navigator/index.html

@@ -4,7 +4,7 @@ layout:                                 page
 title:                                  Navigator
 tagline:                                Explore Posts
 
-date:                                   2022-01-01
+date:                                   2023-09-20
 #last_modified:                         2023-01-01
 
 description: >
@@ -27,10 +27,11 @@ robots:
   follow:                               true
 
 image:
-  path:                                 /assets/images/modules/attics/matthaeus-1920x1280.jpg
+  path:                                 /assets/images/modules/attics/1920x1280/matthaeus.jpg
   width:                                1920
   height:                               1280
 
+#tts:                                   false
 sort:                                   date
 fab_menu_id:                            default
 scrollDynamicPagesTopOnChange:          false                                   # do NOT scroll the page to top on content changes
@@ -41,13 +42,26 @@ resources:                              [ animate, scroller ]
 resource_options:
   - attic:
       slides:
-        - url:                          /assets/images/modules/attics/matthaeus-1920x1280.jpg
+        - url:                          /assets/images/modules/attics/1920x1280/matthaeus.jpg
           alt:                          Photo by Matthaeus on Unsplash
           badge:
             type:                       unsplash
             author:                     Matthaeus
             href:                       https://unsplash.com/@matthaeus123
 ---
+{% comment %} Stackoverflow articles
+------------------------------------------------------------------------
+https://stackoverflow.com/questions/22763180/assign-an-array-literal-to-a-variable-in-liquid-template
+{% assign my_array = "one|two|three" | split: "|" %}
+------------------------------------------------------------------------
+{% endcomment %}
+
+{% comment %} Debugging
+------------------------------------------------------------------------
+blog_navigator_options.article_navigator.page_text: {{blog_navigator_options.article_navigator.page_text | debug}}
+------------------------------------------------------------------------
+{% endcomment %}
+
 
 {% comment %} Liquid procedures
 -------------------------------------------------------------------------------- {% endcomment %}
@@ -84,7 +98,6 @@ resource_options:
 
 {% assign previewer                           = blog_navigator_options.previewer %}
 {% assign paginate                            = paginator_options.pagination.enabled %}
-{% assign scroller                            = blog_navigator_options.scroller %}
 {% assign rtext                               = template_config.typography.rtext %}
 {% assign page_rtext                          = page.rtext %}
 {% assign page_rtext_size                     = page.rtext_size %}
@@ -97,49 +110,30 @@ resource_options:
   {% assign rtext_size = 0 %}
 {% endif %}
 
-{% comment %} language detection (disabled)
+{% comment %} Collect Button Text/Description
 -------------------------------------------------------------------------------- {% endcomment %}
-{% if site.language == "en" %}
-  {% assign language = "en" %}
-{% elsif site.language == "de"%}
-  {% assign language = "de" %}
-{% else %}
-  {% assign language = "en" %}
-{% endif %}
+{% assign home_button_text                  = blog_navigator_options.button_text.view_pager.home %}
+{% assign category_view_button_text         = blog_navigator_options.button_text.view_pager.category_view %}
+{% assign date_view_button_text             = blog_navigator_options.button_text.view_pager.date_view %}
+{% assign archive_view_button_text          = blog_navigator_options.button_text.view_pager.archive_view %}
+{% assign tag_view_button_text              = blog_navigator_options.button_text.view_pager.tag_view %}
 
+{% assign description_enabled               = blog_navigator_options.article_navigator.page_description.enabled %}
+{% assign description_text                  = blog_navigator_options.article_navigator.page_description.text %}
+{% assign headline_enabled                  = blog_navigator_options.article_navigator.headline.enabled %}
+{% assign headline_text                     = blog_navigator_options.article_navigator.headline.text %}
 
 
-{% if language == "en" %}
-  {% assign category_view_button_text         = blog_navigator_options.button_text.view_selector.category_view.en %}
-  {% assign date_view_button_text             = blog_navigator_options.button_text.view_selector.date_view.en %}
-  {% assign archive_view_button_text          = blog_navigator_options.button_text.view_selector.archive_view.en %}
-  {% assign tag_view_button_text              = blog_navigator_options.button_text.view_selector.tag_view.en %}
-
-  {% assign previewer_headline                = blog_navigator_options.article_previewer.page_text.en.headline %}
-  {% assign navigator_description_text        = blog_navigator_options.article_navigator.page_text.en.description %}
-  {% assign previewer_description_text        = blog_navigator_options.article_previewer.page_text.en.description %}
-{% endif %}
-
-{% if language == "de" %}
-  {% assign category_view_button_text         = blog_navigator_options.button_text.view_selector.category_view.de %}
-  {% assign date_view_button_text             = blog_navigator_options.button_text.view_selector.date_view.de %}
-  {% assign archive_view_button_text          = blog_navigator_options.button_text.view_selector.archive_view.de %}
-  {% assign tag_view_button_text              = blog_navigator_options.button_text.view_selector.tag_view.de %}
-
-  {% assign previewer_headline                = blog_navigator_options.article_previewer.page_text.de.headline %}
-  {% assign navigator_description_text        = blog_navigator_options.article_navigator.page_text.de.description %}
-  {% assign previewer_description_text        = blog_navigator_options.article_previewer.page_text.de.description %}
-{% endif %}
-
-
-{% comment %} Main container
+{% comment %} Main
 -------------------------------------------------------------------------------- {% endcomment %}
-  <!-- [INFO   ] [j1.layout.content_generator_blog.html  ] [Begin content] -->
-  <div id="main-container" class="container r-text-{{rtext_size}} js-toc-content mb-5">
-    <!-- Content placed by layouts/content_generator_blog_archive.html -->
+  <!-- [INFO   ] [blog.navigator.index.html               ] [Begin content] -->
+  <div id="navigator_content">
+
     <div id="blog_navigator">
       <div id="article_navigator">
 
+        {% comment %} Generate URLs for all Navigator Views
+        ------------------------------------------------------------------------ {% endcomment %}
         {% include {{get_page_path}} mode='absolute' %}
         {% capture navigator_path%}{{page_path}}{% endcapture %}
         {% capture archive_path %}{{navigator_path}}/archive{% endcapture %}
@@ -148,79 +142,41 @@ resource_options:
         {% capture tag_view %}{{archive_path}}/tagview/{% endcapture %}
         {% capture all_view %}{{archive_path}}/allview/{% endcapture %}
 
-        {% comment %}
-        ------------------------------------------------------------------------
-        https://stackoverflow.com/questions/22763180/assign-an-array-literal-to-a-variable-in-liquid-template
-        {% assign my_array = "one|two|three" | split: "|" %}
-        ------------------------------------------------------------------------
-        {% endcomment %}
-
-        {% comment %} Debugging
-        --------------------------------------------------------------------------------
-        blog_navigator_options.article_navigator.page_text: {{blog_navigator_options.article_navigator.page_text | debug}}
-        --------------------------------------------------------------------------------
-        {% endcomment %}
-
+        {% comment %} Generate navigation pager
+        ------------------------------------------------------------------------ {% endcomment %}
         <div class="navigator-headline">
-          <nav class="paginator speak2me-ignore mb-4">
+          <nav class="paginator speak2me-ignore">
             <ul class="pagination raised-z0">
-              <li class="page-item"><a class="page-link" href="/" title="Home">Home</a></li>
-              <li class="page-item"><a class="page-link" href="{{category_view}}" alt="View by Category">{{category_view_button_text}}</a></li>
-              <li class="page-item"><a class="page-link" href="{{date_view}}" alt="View by Date">{{date_view_button_text}}</a></li>
-              <!-- li class="page-item"><a class="page-link" href="{{tag_view}}" alt="{{tag_view_button_text}}">By Tag</a></li -->
-              <li class="page-item"><a class="page-link" href="{{all_view}}" alt="View All">{{archive_view_button_text}}</a></li>
+              <li class="page-item"><a class="page-link" href="/"                 title="Back to {{home_button_text}}">{{home_button_text}}</a></li>
+              <li class="page-item"><a class="page-link" href="{{category_view}}" title="View by {{category_view_button_text}}">{{category_view_button_text}}</a></li>
+              <li class="page-item"><a class="page-link" href="{{date_view}}"     title="View by {{date_view_button_text}}">{{date_view_button_text}}</a></li>
+          <!-- li class="page-item"><a class="page-link" href="{{tag_view}}"      title="View by {{tag_view_button_text}}">{{tag_view_button_text}}</a></li -->
+              <li class="page-item"><a class="page-link" href="{{all_view}}"      title="View {{archive_view_button_text}}">{{archive_view_button_text}}</a></li>
             </ul>
           </nav> <!-- end paginator -->
         </div> <!-- end navigator headline -->
 
-        {% if blog_navigator_options.article_navigator.page_text.enabled %}
-        <div class="view-description">{{navigator_description_text}}</div>
+        {% if description_enabled %}
+        <div class="view-description mt-4 mb-4">{{description_text}}</div>
+        {% endif %}
+
+        {% if headline_enabled %}
+        <div class="post-headline mt-4 mb-5">
+          <h2 id="post_headline" class="notoc">{{headline_text}}</h2>
+        </div>
         {% endif %}
 
       </div> <!-- end article_navigator -->
 
-      <!-- Add article previewer if paginator is enabled -->
+      {% comment %} Generate content section
+      ------------------------------------------------------------------------ {% endcomment %}
+      <!-- Add article previewer -->
       {% if paginate %}
-      <div id="article_previewer">
-
-        <div class="previewer-headline">
-
-          <div class="post-headline">
-            <h2 id="post-headline" class="notoc mt-4">{{previewer_headline}}</h2>
-          </div>
-
-          <!-- Add Jekyll Paginator if enabled: {{scroller}} -->
-          {% if scroller == 'jekyll' %} {% if paginator.total_pages > 1 %}
-          <nav class="paginator mb-4">
-            <ul class="pagination raised-z0">
-              {% if paginator.previous_page %}
-                <li class="page-item">
-                  <a class="page-link" href="{{paginator.previous_page_path}}#article_navigator">{{paginator_button_newer_posts_text}}</a>
-                </li>
-              {% else %}
-                <li class="page-item disabled"><a href="#void" class="page-link">{{paginator_button_first_post_text}}</a></li>
-              {% endif %}
-
-              {% if paginator.next_page %}
-              <li class="page-item">
-                <a class="page-link" href="{{paginator.next_page_path}}#article_navigator">{{paginator_button_older_posts_text}}</a>
-              </li>
-              {% else %}
-                <li class="page-item disabled"><a href="#void" class="page-link">{{paginator_button_last_post_text}}</a></li>
-              {% endif %}
-            </ul>
-          </nav>
-          {% endif %} {% endif %}
-
-          {% if scroller == 'jekyll' %} {% if blog_navigator_options.article_previewer.page_text.enabled %}
-          <div class="view-description mb-3">{{previewer_description_text}}</div>
-          {% endif %} {% endif %}
-
-        </div>
+      <div id="article_previewer" class="mt-5">
 
-        <div id="navigator_article_preview">
+        <div id="article_preview">
           <!-- Previewer selected of type: {{previewer}}-->
-          <div id="preview_content">
+          <div id="previewer_{{previewer}}">
             {% assign posts_collate = paginator.posts %}
             {% case previewer %}
               {% when 'list' %}

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

@@ -1,4 +1,4 @@
-[role="mt-4"]
+[role="mt-5"]
 == The Themes Menu
 
 Styles adjust the website's appearance based on the CSS rules and definitions
@@ -30,6 +30,7 @@ that helps a lot to make designs available for an existing site. This API
 is the base to integrate selectable Bootswatch stylesheets into the J1 Template
 navigation system.
 
+[role="mt-4"]
 === Apply a Style
 
 The base for designing pages using the J1 Template is the style Uno, a modern

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

@@ -1,9 +1,9 @@
 ---
 title:                                  Extensions
-title_extention:                        Jekyll One enhancements for the Asciidoc markup language
-tagline:                                Asciidoc Markup Enhancements
+title_extention:                        Enhance Asciidoc Markup Language
+tagline:                                Asciidoc Markup
 
-date:                                   2020-11-07
+date:                                   2023-09-01
 #last_modified:                         2023-01-01
 
 description: >
@@ -24,6 +24,7 @@ image:
   width:                                1920
   height:                               1280
 
+tts:                                    false
 comments:                               false
 regenerate:                             false
 permalink:                              /pages/public/learn/roundtrip/asciidoc_extensions/
@@ -62,11 +63,10 @@ resource_options:
 [role="dropcap"]
 J1 Template implements some handy Ruby-based enhancements for the markup
 language Asciidoc. Providing extensions for a Jekyll theme is a unique feature
-of Jekyll One compared to other Jekyll themes and templates. All already
-implemented Asciidoctor extensions you'll find below. Additional valuable
-extensions to the markup language Asciidoc is made especially for documents
-of the Jekyll content type *page*, but can be used for posts or collections
-as well.
+of Jekyll One compared to other Jekyll themes and templates.
+
+[role="mb-4"]
+All already implemented Asciidoctor extensions you'll find below.
 
 [TIP]
 ====
@@ -77,6 +77,11 @@ link:{url-asciidoctor--extensions-manual}[extensions section, {browser-window--n
 the Asciidoctor user manual.
 ====
 
+[role="mt-4"]
+Additional valuable extensions to the markup language Asciidoc is made
+especially for documents of the Jekyll content type *page*, but can be used
+for posts or collections as well.
+
 mdi:clock-time-five-outline[24px, md-gray mt-4 mr-2]
 *15 Minutes* to read
 
@@ -90,10 +95,12 @@ J1 Template adds a simple Javascript based functionality for the
 extension adds an interactive toggle button `VIEW` to the output of a listing
 block placed to the top right of the example box.
 
+[role="mb-4"]
 If a result block `[.result]` is placed under a listing block, clicking the
 toggle button *view* `VIEW` displays or hide the content given by the
 result block.
 
+[role="mb-5"]
 [TIP]
 ====
 The *View Result Extension* is quite helpful for sections discussing
@@ -114,13 +121,14 @@ code elements.
 [role="mt-5"]
 == Asciidoc Admonitions
 
+[role="mb-5]
 Admonition blocks draw the reader to certain statements by labeling
 them as priorities displayed in separate blocks. These types of information
 blocks are called *admonitions*. The AsciiDoc markuplanguage provides five
 block types shown by the following examples.
 
 .Admonition labels
-[cols="3a,9a", subs=+macros, options="header", width="100%", role="rtable mt-3"]
+[cols="3a, 9a", subs=+macros, options="header", width="100%", role="rtable mt-3 mb-4"]
 |===
 |Name |Description
 
@@ -152,6 +160,7 @@ All colors for all default admonition blocks set to the standard
 color set. Find available block types and their colors below.
 ====
 
+[role="mr-4]
 When you want to call attention to a single paragraph, start the first
 line of the paragraph with the label you want to use. The label must be
 uppercase and followed by a colon `:`.
@@ -249,6 +258,7 @@ A *single* paragraph can be turned into a blockquote by:
 -- attribution
 ----
 
+[role="mt-5"]
 "Don't do stupid things twice. The selection is too big for that."
 -- Jean-Paul Sartre
 
@@ -269,7 +279,8 @@ paragraph text (multiline)
 ____
 ----
 
-Example of a quoted *block*:
+[role="mt-4 mb-4"]
+Example of a quoted *block*.
 
 [quote, Monty Python and the Holy Grail]
 ____
@@ -283,18 +294,13 @@ ____
 [role="mt-5"]
 == Lightboxes
 
-A lightbox is, in general, a helper which displays enlarged, almost
-screen-filling versions of images while dimming the remainder
-of the page. The technique, introduced by Lightbox V2, gained widespread
-popularity thanks to its simple style. The term lightbox has been employed
-since then for Javascript libraries to support such functionality.
-
 To make the use of the built-in lightbox easier, the J1 Template offers an
-Asciidoc extension: the lightBox block macro. The lightbox block macro
+Asciidoc extension: the lightBox block *macro*. The lightbox block macro
 `lightbox::` embeds one or more images into the output document and puts
-the default lightbox for J1 automatically on. The images width and additional
-a addtional caption text `caption text` and CSS styles are configurable for
-all images using this macro.
+the default lightbox for J1 automatically on.
+
+The images width and additional a addtional caption text `caption text`
+and CSS styles are configurable for all images using this macro.
 
 .Lightbox block for single images
 [source, no_template, role="noclip"]
@@ -323,7 +329,7 @@ J1 Gallery to rearrange images and make them fit at their best for the
 available space.
 ====
 
-[role="mt-4"]
+[role="mt-5"]
 === Standalone Images
 
 For your convenience and better readability, the image data should be
@@ -348,10 +354,13 @@ to images path `/assets/images`. The base path is automatically added to
 each image. If you want to use the default asset path for images, a relative
 path needs to be given like path-to-image `path/to/image`.
 
-WARNING: If an absolute path `/path/to/image` is configured, the base
+[WARNING]
+====
+If an absolute path `/path/to/image` is configured, the base
 path gets ignored. This is the default behavior of the Asciidoc Markup
 processor. If an absolute path is given, the full path to the images
 used has to be configured.
+====
 
 The group parameter `group` for the lightbox block `lightbox::` is optional.
 If *no* group parameter is given for a block, the related images are treated
@@ -366,13 +375,13 @@ lightbox::<block_id>[ 800, {<data-images-id>} ]
 .Lightbox block for standalone images
 lightbox::images-standalone[ 800, {data-images-standalone} ]
 
-[role="mt-4"]
+[role="mt-5"]
 === Grouped Images
 
-If more than a single image is given for a lightbox block `lightbox::`,
-the images can be grouped to enable a simple sliding functionality through
-this group of related images. Enabling this function, the group option
-`group` needs to be configured for the block.
+If more than a single image is given for a lightbox `lightbox::`, images
+can be *grouped* to enable a simple sliding functionality through
+related images. Enabling this function, the group option `group` needs to
+be configured for the block.
 
 .Lightbox block for grouped images
 [source, no_template, role="noclip"]
@@ -383,6 +392,7 @@ lightbox::<block_id>[ 400, {<data-images-group_id>}, <group_name> ]
 .Lightbox block for grouped images
 lightbox::images-group[ 400, {data-images-group}, group_name ]
 
+
 [role="mt-5"]
 == Galleries
 
@@ -559,7 +569,7 @@ optional. If not given, the icons size `size` is set to default `1x`, the
 color to *black* and no settings for *modifiers* `modifier` are applied.
 ====
 
-[role="mt-4"]
+[role="mt-5"]
 === Font Awesome Icons
 
 Font Awesome Icons can be used as inline icons by using the macro *fas* `fas:`
@@ -597,7 +607,7 @@ optional. If not given, the icons size is set to default `1x`, the color
 to *black* and no settings for modifiers  `modifier` are applied.
 ====
 
-[role="mt-4"]
+[role="mt-5"]
 === Iconify Icons
 
 Iconify Icons can be used as inline icons by using the iconify inline

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

@@ -84,9 +84,6 @@ classes defined in Bootstrap to customize a layout individually.
 mdi:clock-time-five-outline[24px, md-gray mt-4 mr-2]
 *3 Minutes* to read
 
-mdi:clock-time-five-outline[24px, md-gray mt-4 mr-2]
-*3 Minutes* to read
-
 // Include sub-documents (if any)
 // -----------------------------------------------------------------------------
 include::{documentdir}/themes_bootstrap.asciidoc[]

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

@@ -97,7 +97,7 @@ To preview *all* themes supported by *J1 Template*, make your selection
 from the button *AVAILABLE THEMES* below.
 
 ++++
-<div class="btn-group">
+<div class="btn-group speak2me-ignore">
   <!-- 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 -->

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

@@ -24,6 +24,7 @@ image:
   width:                                1920
   height:                               1280
 
+tts:                                    false
 regenerate:                             false
 permalink:                              /pages/public/learn/roundtrip/mdi_icon_font/
 

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

@@ -25,6 +25,7 @@ image:
   width:                                1920
   height:                               1280
 
+tts:                                    false
 regenerate:                             false
 permalink:                              /pages/public/learn/roundtrip/modals/
 

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

@@ -187,7 +187,7 @@ line. No much space is needed!
 === Parallax Text Carousel
 
 [role="mb-4"]
-A more eye-minded type of text-based slide show is a parallax text slider. If
+A more visual type of text-based slide show is a parallax text slider. If
 you want to emphasize your statements focussing the meaning, this kind of a
 slide show may be interesting. Image-based slide shows may draw off the
 reader's attention from the text, therefore a pure text-based presentation

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

@@ -23,6 +23,7 @@ image:
   width:                                1920
   height:                               1280
 
+tts:                                    false
 regenerate:                             false
 permalink:                              /pages/public/learn/roundtrip/responsive_tables/
 

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

@@ -73,13 +73,17 @@ mdi:clock-time-five-outline[24px, md-gray mr-2]
 
 // Include sub-documents (if any)
 // -----------------------------------------------------------------------------
-The crucial first step in finding your way to Jekyll is done. Congratulations.
-The *Learn* section contains all you need to expirience what Jekyll and J1
+[role="mt-5"]
+== Important Sections
+
+The crucial first step in finding your way to Jekyll is done: congratulations.
+The section *Learn* contains all you need to expirience what Jekyll and J1
 can do for your new website, for your new static web. You are welcome to spend
 some time diving into the techniques of creating modern static webs.
 
-[role="mt-5"]
-Roundtrip::
+[role="mt-4"]
+=== Roundtrip
+
 In this section, you’ll find a tour to show some of the main features of
 the J1 Template. This trip covers how image data can be managed using
 J1, some background of the Theme's typography, discuss extensions, and
@@ -91,15 +95,20 @@ If you're interested what J1 Template can do, continue by walking through the
 roundtrip examples by starting an inspiring tour
 link:{url-j1-roundtrip--present-images}[from here].
 
-Cheatsheet::
-Cheat sheets are concise reference guides or summaries that provide quick
-and handy information about a topic or subject. They help you to remember
-key concepts, formulas, commands, or other essential details without
-consulting extensive documentation or resources. Find convenient quick
-references for _YAML_, _Git_ and more. For example, go for the cheatsheet
-link:{url-j1--cheatsheet-yaml}[YAML, {browser-window--new}].
+[role="mt-4"]
+=== Cheatsheets
+
+A cheatsheet is a helper text concise as a reference or summary to provide
+quick and handy information about a topic or subject. They will help you to
+remember key concepts, formulas, commands, or other essential details without
+consulting extensive documentation or resources.
+
+Find convenient quick references for _YAML_, _Git_ and more. For example,
+go for the cheatsheet link:{url-j1--cheatsheet-yaml}[YAML, {browser-window--new}].
+
+[role="mt-4"]
+=== Collections
 
-Collections::
 Collections are Jekyll’s most powerful and simultaneously least understood
 feature of the generator. Collections add another possibility, or use-case,
 outside of Jekyll’s post- and page-publishing functionality. Learn more
@@ -107,7 +116,9 @@ about collections for more powerful static websites. To learn more what
 collections are, check
 link:{url-j1--jekyll-collections}[Jekyll Collections, {browser-window--new}].
 
-Tutorials::
+[role="mt-4"]
+=== Tutorials
+
 To become more familiar with using J1, go to the tutorial section. Have
 fun experiencing what Jekyll and J1 can do. A good starting point for using
 J1 Template is

data/lib/starter_web/pages/public/legal/en/100_copyright.adoc

@@ -57,8 +57,11 @@ resource_options:
 {% include {{load_attributes}} scope="global" %}
 
 ifeval::[{legal-warning} == true]
-WARNING: This document *does not* constitute any *legal advice*. It is
+[WARNING]
+====
+This document *does not* constitute any *legal advice*. It is
 highly recommended to verify legal aspects and implications.
+====
 endif::[]
 
 

data/lib/starter_web/pages/public/legal/en/200_impress.adoc

@@ -60,8 +60,11 @@ resource_options:
 {% include {{load_attributes}} scope="none" %}
 
 ifeval::[{legal-warning} == true]
-WARNING: This document *does not* constitute any *legal advice*. It is
+[WARNING]
+====
+This document *does not* constitute any *legal advice*. It is
 highly recommended to verify legal aspects and implications.
+====
 endif::[]
 
 // NOTE