jekyll-theme-centos 2.52.0.beta.91 → 2.52.0.beta.92

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 23bf21a6e35d2941d90d11a7aefac6c245c1e2811fa5945eccf8bca522c02b90
-  data.tar.gz: 3f4e5a418e6a8e949b528bc4762899a351bebb05bd835c53df0945517d825e4b
+  metadata.gz: b215f97ff3780331a982089e5719dbe284707fef64a0a5f4abc2b30864f2023c
+  data.tar.gz: 612f7607e1ea34f937f9cd881be3c4e4df01d9f1eee172540eeca244096ee10b
 SHA512:
-  metadata.gz: 02da80654ac1f33df8888665c3f562face66490047e0726437ad8ac56c501e16046f6b1b3d993678159483204bf3612fb2086de5fdee8ce2b608aa4fda176130
-  data.tar.gz: 8d39190e6c26dc5c274933988326cbabe1152052e9f6e60f1eeeb2faacfbf472918f572b15c84122f77120f2d4e71d0b5385b1e5cd2981412b70f02bc6a21699
+  metadata.gz: 1c826018b0f8b10df68124dd00b13328953b70596297d390ad3bf05f1dc269261255b2d680cbc98a41ac9701fec11692d657d34cfd502210a50cf0ce874cf739
+  data.tar.gz: ac962acbdbaffa0f44397c21474866ce09ad5acf0564c52ee0ebcefc75629f86f887a82f3da25a0a873409dda7c2b6966d2cbdcc1c3315d37cebda6f3c7b583f

data/_data/base/download_schema.yml

@@ -205,6 +205,20 @@ properties:
                     properties:
                       title: { type: string, default: "", description: "Visible link label." }
                       link:  { type: string, default: "", description: "Target URL." }
+                      description:
+                        type: string
+                        default: ""
+                        description: >-
+                          Optional supporting text or HTML explaining why
+                          this link is worth revisiting, not just what it's
+                          called. Empty renders this entry as a plain button
+                          (most entries need only `title`/`link`); set,
+                          renders as one prose sentence instead — `title` as
+                          the inline link, this text continuing the sentence
+                          grammatically right after it (e.g. a `title` of
+                          "Release Notes" and a `description` of "are
+                          continuously updated..." reads as "Release Notes
+                          are continuously updated...").
                     additionalProperties: false
                 eol:
                   type: array

data/_includes/base/download.html.liquid

@@ -22,8 +22,14 @@ Data Source Hierarchy (in priority order):
 4. site.data.base.download - Theme defaults
 
 Optional Inputs (from include):
-- title: Render only the entry whose title matches exactly.
-- id:    HTML id prefix for the nav-pills tab selector (default: DownloadsCard-1).
+- title:            Render only the entry whose title matches exactly.
+- id:                HTML id prefix for the nav-pills tab selector (default: DownloadsCard-1).
+- with_title:        Set to false to skip the entry's own title heading, e.g. when
+                     the calling page already presents it as a real markdown
+                     heading immediately above the include (for TOC/anchor
+                     navigation). Default: true.
+- with_description:  Set to false to skip the entry's own description text for the
+                     same reason. Default: true.
 ================================================================================
 {% endcomment %}
 
@@ -76,13 +82,13 @@ Optional Inputs (from include):
       {%- assign single_release = entry.releases | first %}
     {%- endif %}
 
-    {%- if entry.title and entry.title != "" %}
+    {%- if entry.title and entry.title != "" and include.with_title != false %}
     <div class="h2">
       {{ entry.title | escape }}{% if single_release %} {{ single_release[0] | escape }}{% endif %}
     </div>
     {%- endif %}
 
-    {%- if entry.description and entry.description != "" %}
+    {%- if entry.description and entry.description != "" and include.with_description != false %}
     {{ entry.description | strip_newlines | markdownify }}
     {%- endif %}
 
@@ -102,7 +108,7 @@ Optional Inputs (from include):
       </div>
       {%- endfor %}
     {%- elsif entry.releases.size > 1 %}
-    <ul class="nav nav-pills my-3 justify-content-start" id="{{ card_id }}-pills-tab" role="tablist">
+    <ul class="nav nav-pills mb-3 justify-content-start" id="{{ card_id }}-pills-tab" role="tablist">
       {%- for release in entry.releases %}
       <li class="nav-item" role="presentation">
         <button class="nav-link{% if forloop.first %} active{% endif %} fw-bold"

data/_includes/base/download_architecture.html.liquid

@@ -154,10 +154,10 @@ content — see examples/components/download-alternative-images.md.
   {%- assign arch_name_id_safe = arch_name | remove: '"' | remove: "'" | remove: '<' | remove: '>' | remove: '&' | remove: '#' | remove: '?' | remove: '/' %}
   {%- assign arch_id_prefix = include.release_id | default: "download" | append: "-" | append: arch_name_id_safe | downcase | replace: " ", "-" %}
   <div class="{{ arch_col_class }}"{% if arch_orphan_style != "" %} style="{{ arch_orphan_style }}"{% endif %}>
-    <div class="d-flex flex-column align-items-start p-3">
-      <div class="mb-2">
-        <div class="fs-2"><i class="fa-solid fa-microchip"></i></div>
-        <div class="h3">{{ arch_name | escape }}</div>
+    <div class="d-flex flex-column align-items-start p-3 pt-1">
+      <div class="mb-2 d-flex align-items-center gap-2">
+        <i class="fa-solid fa-microchip fs-2"></i>
+        <span class="h3 mb-0">{{ arch_name | escape }}</span>
       </div>
 
       {%- assign has_download_button = false %}
@@ -213,24 +213,31 @@ content — see examples/components/download-alternative-images.md.
       {%- endif %}
 
       {%- if has_mirrors %}
+      {%- comment %} These are outbound links to a mirror/registry, not
+      in-page navigation, so each opens in a new tab (target="_blank") with
+      the same trailing external-link icon as the Documentation section's
+      buttons (base/download_documentation.html.liquid), rather than the
+      Download button's leading icon above — the leading icon there signals
+      the primary action; the trailing external icon here signals "leaves
+      the site". {% endcomment %}
       <div class="d-flex flex-wrap gap-2">
         {%- if arch_data.mirrors.iso and arch_data.mirrors.iso != "" %}
-          {%- include base/link.html.liquid class="btn btn-outline-primary flex-fill text-start" role="button" name="ISO Mirrors" link=arch_data.mirrors.iso icon="fa-solid fa-compact-disc" icon_position="start" -%}
+          {%- include base/link.html.liquid class="btn btn-outline-primary flex-fill text-start" role="button" name="ISO Mirrors" link=arch_data.mirrors.iso target="_blank" icon="fa-solid fa-up-right-from-square" icon_position="end" -%}
         {%- endif %}
         {%- if arch_data.mirrors.rpm and arch_data.mirrors.rpm != "" %}
-          {%- include base/link.html.liquid class="btn btn-outline-primary flex-fill text-start" role="button" name="RPM Mirrors" link=arch_data.mirrors.rpm icon="fa-solid fa-box" icon_position="start" -%}
+          {%- include base/link.html.liquid class="btn btn-outline-primary flex-fill text-start" role="button" name="RPM Mirrors" link=arch_data.mirrors.rpm target="_blank" icon="fa-solid fa-up-right-from-square" icon_position="end" -%}
         {%- endif %}
         {%- if arch_data.mirrors.cloud and arch_data.mirrors.cloud != "" %}
-          {%- include base/link.html.liquid class="btn btn-outline-primary flex-fill text-start" role="button" name="Cloud Images" link=arch_data.mirrors.cloud icon="fa-solid fa-cloud" icon_position="start" -%}
+          {%- include base/link.html.liquid class="btn btn-outline-primary flex-fill text-start" role="button" name="Cloud Images" link=arch_data.mirrors.cloud target="_blank" icon="fa-solid fa-up-right-from-square" icon_position="end" -%}
         {%- endif %}
         {%- if arch_data.mirrors.containers and arch_data.mirrors.containers != "" %}
-          {%- include base/link.html.liquid class="btn btn-outline-primary flex-fill text-start" role="button" name="Container Images" link=arch_data.mirrors.containers icon="fa-solid fa-cubes" icon_position="start" -%}
+          {%- include base/link.html.liquid class="btn btn-outline-primary flex-fill text-start" role="button" name="Container Images" link=arch_data.mirrors.containers target="_blank" icon="fa-solid fa-up-right-from-square" icon_position="end" -%}
         {%- endif %}
         {%- if arch_data.mirrors.vagrant and arch_data.mirrors.vagrant != "" %}
-          {%- include base/link.html.liquid class="btn btn-outline-primary flex-fill text-start" role="button" name="Vagrant Boxes" link=arch_data.mirrors.vagrant icon="fa-solid fa-box-archive" icon_position="start" -%}
+          {%- include base/link.html.liquid class="btn btn-outline-primary flex-fill text-start" role="button" name="Vagrant Boxes" link=arch_data.mirrors.vagrant target="_blank" icon="fa-solid fa-up-right-from-square" icon_position="end" -%}
         {%- endif %}
         {%- if arch_data.mirrors.torrent and arch_data.mirrors.torrent != "" %}
-          {%- include base/link.html.liquid class="btn btn-outline-primary flex-fill text-start" role="button" name="Torrent" link=arch_data.mirrors.torrent icon="fa-solid fa-magnet" icon_position="start" -%}
+          {%- include base/link.html.liquid class="btn btn-outline-primary flex-fill text-start" role="button" name="Torrent" link=arch_data.mirrors.torrent target="_blank" icon="fa-solid fa-up-right-from-square" icon_position="end" -%}
         {%- endif %}
       </div>
       {%- endif %}

data/_includes/base/download_documentation.html.liquid

@@ -7,18 +7,52 @@ eol/screenshots accordion — release-wide metadata that applies in common to
 every architecture above. Called from download_sections.html.liquid.
 
 Required Inputs:
-- documentation: Array of {title, link}
+- documentation: Array of {title, link, description}
 - accordion_id: Parent accordion's id, for data-bs-parent scoping
 - item_id: This item's unique collapse id
 - expanded: true starts this item open; false starts it closed. Passed
   through from the caller (see download_sections.html.liquid).
+
+An entry's optional `description` switches its own presentation rather than
+attaching a caption to a button: a bare button reads as a call to action
+("do this now"), a mismatched signifier for a full explanatory sentence
+sitting next to it — so once there's a sentence to say, the entry renders as
+one prose paragraph with `title` as the inline link and `description`
+continuing the sentence grammatically (e.g. "Release Notes are continuously
+updated..."), the standard, immediately-recognizable convention for
+referencing a resource from explanatory text. Entries without a description
+still render as a bare button, identical to before this field existed —
+prose and buttons render as two separate groups (prose first, since it's the
+richer content) rather than interleaved, so a documentation list mixing both
+kinds doesn't end up with paragraphs breaking up a button row.
 ================================================================================
 {% endcomment %}
-{%- capture download_documentation_body -%}
+{%- capture download_documentation_prose -%}
   {%- for row in include.documentation %}
-  {%- if row.title and row.title != "" %}
-  {%- include base/link.html.liquid class="btn btn-outline-primary" role="button" name=row.title link=row.link icon="fa-solid fa-up-right-from-square" icon_position="start" -%}
-  {%- endif %}
+    {%- assign has_description = false %}
+    {%- if row.description and row.description != "" %}
+      {%- assign has_description = true %}
+    {%- endif %}
+    {%- if row.title and row.title != "" and has_description %}
+    <p class="mb-2">{%- include base/link.html.liquid name=row.title link=row.link target="_blank" icon="fa-solid fa-up-right-from-square" icon_position="end" %} {{ row.description }}</p>
+    {%- endif %}
   {%- endfor %}
 {%- endcapture -%}
-{%- include base/download_accordion_item.html.liquid icon="fa-solid fa-book" title="Documentation" item_id=include.item_id accordion_id=include.accordion_id expanded=include.expanded body_class="d-flex flex-wrap gap-2" body=download_documentation_body -%}
+{%- capture download_documentation_buttons -%}
+  {%- for row in include.documentation %}
+    {%- assign has_description = false %}
+    {%- if row.description and row.description != "" %}
+      {%- assign has_description = true %}
+    {%- endif %}
+    {%- if row.title and row.title != "" and has_description == false %}
+    {%- include base/link.html.liquid class="btn btn-outline-primary text-start" role="button" name=row.title link=row.link target="_blank" icon="fa-solid fa-up-right-from-square" icon_position="end" -%}
+    {%- endif %}
+  {%- endfor %}
+{%- endcapture -%}
+{%- assign download_documentation_prose_stripped = download_documentation_prose | strip %}
+{%- assign download_documentation_buttons_stripped = download_documentation_buttons | strip %}
+{%- capture download_documentation_body -%}
+  {%- if download_documentation_prose_stripped != "" %}{{ download_documentation_prose }}{%- endif %}
+  {%- if download_documentation_buttons_stripped != "" %}<div class="d-flex flex-wrap gap-2">{{ download_documentation_buttons }}</div>{%- endif %}
+{%- endcapture -%}
+{%- include base/download_accordion_item.html.liquid icon="fa-solid fa-book" title="Documentation" item_id=include.item_id accordion_id=include.accordion_id expanded=include.expanded body=download_documentation_body -%}

data/_includes/base/download_screenshots.html.liquid

@@ -24,18 +24,77 @@ Required Inputs:
 - expanded: true starts this item open; false starts it closed. Passed
   through from the caller (see download_sections.html.liquid).
 
-Each slide is wrapped in Bootstrap's `ratio ratio-16x9` utility, the same
-ratio artwork.html.liquid uses for its own image presentation
+Each slide is wrapped in Bootstrap's `.ratio` utility, set to a fixed 16:10
+box (`--bs-aspect-ratio: 62.5%` — 800 / 1280) so screenshots of any native
+size crop to a consistent box instead of each slide having its own height.
+16:10 matches actual OS screenshot captures (e.g. 1280x800, a common
+display resolution) — deliberately not the 16:9 `ratio-16x9` modifier class
+artwork.html.liquid uses for its own image presentation
 (artwork_schema.yml's image_class default: `ratio ratio-16x9 rounded
-bg-dark bg-artwork`), so screenshots of any native size crop to a
-consistent 16:9 box instead of each slide having its own height.
+bg-dark bg-artwork`); real screen captures are rarely 16:9 natively, so
+matching artwork's ratio here would crop more than necessary. Bootstrap
+ships no `ratio-16x10` modifier class, hence the inline `--bs-aspect-ratio`
+override on the base `.ratio` class instead of a second modifier class.
 `object-fit-cover` on the `<img>` itself does the actual cropping — `.ratio`
 alone only stretches its child to fill the box.
+
+The carousel skips Bootstrap's `.carousel-dark` modifier: its indicator/
+caption colors are meant to react to whether the underlying image is
+generally light or dark, which fits calm banner photography but not real OS
+screenshots — a single release's slides span stark-white installer screens
+to busy desktop/app-grid content, no single color choice reads clearly
+against all of them. `.download-screenshots-carousel` (see
+src/SASS/_download.scss) instead gives the prev/next icons their own fixed
+dark scrim and the caption its own dark backdrop, so both stay legible over
+any screenshot regardless of image content.
+
+`.carousel-inner` and the two control buttons are wrapped in their own
+`.position-relative` div, separate from `.carousel-indicators` — Bootstrap's
+default markup puts indicators inside that same positioned box, overlaid on
+the image (`.carousel-indicators` is `position: absolute; bottom: 0`), which
+is illegible over screenshot content no scrim reliably fixes since a slide's
+content near the bottom edge varies per screenshot. Moving indicators
+outside the wrapper and resetting them to `position: static` in
+_download.scss instead renders them in normal flow below the image — plain
+dots on the page's own background, not an overlay — where they don't need a
+scrim at all. `.position-relative` also keeps the prev/next buttons
+(`top: 0; bottom: 0`, relative to the nearest positioned ancestor) scoped to
+the image's own height instead of stretching down to cover the indicator
+row too.
 ================================================================================
 {% endcomment %}
 {%- capture download_screenshots_body -%}
   <div class="p-3">
-    <div id="carouselScreenshotsIndicators-{{ include.release_id }}" class="carousel carousel-dark slide" data-bs-ride="true">
+    <div id="carouselScreenshotsIndicators-{{ include.release_id }}" class="carousel slide download-screenshots-carousel" data-bs-ride="true">
+      <div class="position-relative">
+        <div class="carousel-inner">
+          {%- for row in include.screenshots %}
+          <div class="carousel-item{% if forloop.first %} active{% endif %}">
+            <div class="ratio" style="--bs-aspect-ratio: 62.5%;">
+              <img class="object-fit-cover" src="{{ site.baseurl }}{{ include.image_base_path }}{{ row.src | escape }}" alt="{{ row.alt | escape }}" />
+            </div>
+            {%- if row.title and row.title != "" or row.description and row.description != "" %}
+            <div class="carousel-caption d-none d-md-block">
+              {%- if row.title and row.title != "" %}
+              <div class="h5">{{ row.title }}</div>
+              {%- endif %}
+              {%- if row.description and row.description != "" %}
+              <p>{{ row.description }}</p>
+              {%- endif %}
+            </div>
+            {%- endif %}
+          </div>
+          {%- endfor %}
+        </div>
+        <button class="carousel-control-prev" type="button" data-bs-target="#carouselScreenshotsIndicators-{{ include.release_id }}" data-bs-slide="prev">
+          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+          <span class="visually-hidden">Previous</span>
+        </button>
+        <button class="carousel-control-next" type="button" data-bs-target="#carouselScreenshotsIndicators-{{ include.release_id }}" data-bs-slide="next">
+          <span class="carousel-control-next-icon" aria-hidden="true"></span>
+          <span class="visually-hidden">Next</span>
+        </button>
+      </div>
       <div class="carousel-indicators">
         {%- for row in include.screenshots %}
         <button
@@ -46,33 +105,6 @@ alone only stretches its child to fill the box.
           aria-label="Screenshot {{ forloop.index }}"></button>
         {%- endfor %}
       </div>
-      <div class="carousel-inner">
-        {%- for row in include.screenshots %}
-        <div class="carousel-item{% if forloop.first %} active{% endif %}">
-          <div class="ratio ratio-16x9">
-            <img class="object-fit-cover" src="{{ site.baseurl }}{{ include.image_base_path }}{{ row.src | escape }}" alt="{{ row.alt | escape }}" />
-          </div>
-          {%- if row.title and row.title != "" or row.description and row.description != "" %}
-          <div class="carousel-caption d-none d-md-block">
-            {%- if row.title and row.title != "" %}
-            <div class="h5">{{ row.title }}</div>
-            {%- endif %}
-            {%- if row.description and row.description != "" %}
-            <p>{{ row.description }}</p>
-            {%- endif %}
-          </div>
-          {%- endif %}
-        </div>
-        {%- endfor %}
-      </div>
-      <button class="carousel-control-prev" type="button" data-bs-target="#carouselScreenshotsIndicators-{{ include.release_id }}" data-bs-slide="prev">
-        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
-        <span class="visually-hidden">Previous</span>
-      </button>
-      <button class="carousel-control-next" type="button" data-bs-target="#carouselScreenshotsIndicators-{{ include.release_id }}" data-bs-slide="next">
-        <span class="carousel-control-next-icon" aria-hidden="true"></span>
-        <span class="visually-hidden">Next</span>
-      </button>
     </div>
   </div>
 {%- endcapture -%}

data/_includes/base/navindex.html.liquid

@@ -71,7 +71,7 @@ Data Object Properties:
 {% assign show_page_filename = include.show_page_filename | default: "false" %}
 <div class="row g-3 mb-3 pt-1">
   {%- for item in data %}
-    {%- if item.title != page.title %}
+    {%- if item.url != page.url %}
       <div class="col-12 col-md-6">
         <div class="p-3 pb-1 bg-light border rounded">
           <div class="h5">
@@ -98,7 +98,7 @@ Data Object Properties:
 {% assign show_page_filename = include.show_page_filename | default: "false" %}
 <div class="row g-3 mb-3 pt-1">
   {%- for item in data %}
-    {%- if item.title != page.title %}
+    {%- if item.url != page.url %}
       <div class="col-12 col-md-6">
         {%- if show_page_filename == "true" %}
           {%- assign item_name = item.name | remove: '.md' %}
@@ -116,7 +116,7 @@ Data Object Properties:
 {% assign show_page_filename = include.show_page_filename | default: "false" %}
 <ul>
 {%- for item in data %}
-  {%- if item.title != page.title %}
+  {%- if item.url != page.url %}
     {%- if show_page_filename == "true" %}
       {%- assign item_name = item.name | remove: '.md' %}
       <li>{% include base/link.html.liquid name=item_name link=item.url %}{% if item.title_lead != nil %} &mdash; {{ item.title_lead | strip_newlines | markdownify | remove: "<p>" | remove: "</p>" | strip }}{% endif %}</li>
@@ -140,7 +140,7 @@ Data Object Properties:
   <tbody>
     {%- for item in data %}
       <tr>
-        {%- if item.title != page.title %}
+        {%- if item.url != page.url %}
           {%- if show_page_filename == "true" %}
             {%- assign item_name = item.name | remove: '.md' %}
             <td>{% include base/link.html.liquid name=item_name link=item.url %}</td>

data/_sass/base/_download.scss

@@ -68,3 +68,82 @@
     width: var(--download-arch-orphan-lg-width);
   }
 }
+
+// ================================================================================
+// Download component: screenshot carousel control legibility
+// ================================================================================
+// Purpose: Bootstrap's carousel controls are built for calm banner
+// photography — prev/next icons get only a faint 25%-opacity edge gradient,
+// and captions get no backdrop at all, just white text on the bare image
+// (download_screenshots.html.liquid drops `.carousel-dark` for this same
+// reason — see that file's own comment). Against real OS screenshots
+// (stark-white installer screens through busy desktop/app-grid content),
+// that's not enough separation: the arrows and caption text read as part of
+// the screenshot rather than as clickable/readable UI chrome, so each gets
+// its own fixed dark scrim here instead — legibility no longer depends on
+// what happens to be under it.
+//
+// Indicators get a different fix, not a scrim: a solid backdrop dark/light
+// enough for every screenshot doesn't exist (slides range from near-white
+// to near-black), so download_screenshots.html.liquid moves
+// `.carousel-indicators` outside the image's positioned wrapper entirely —
+// this resets it from Bootstrap's default absolute overlay to normal
+// in-flow content below the image, on the page's own background, where a
+// single theme-adaptive dot color (not a scrim) is all that's needed.
+// Dots are also reshaped from Bootstrap's default 30x3px bars into circles,
+// and recolored with the theme's own primary shades (var(--bs-border-color)
+// is centos-purple-100, var(--bs-primary) is centos-purple — see
+// _variables.scss) instead of Bootstrap's opacity-based active/inactive
+// distinction, so the color contrast itself signals "clickable", not just a
+// subtle 50%-vs-100%-opacity difference easy to miss.
+// ================================================================================
+
+.download-screenshots-carousel {
+  .carousel-control-prev,
+  .carousel-control-next {
+    opacity: .9;
+
+    &:hover,
+    &:focus {
+      opacity: 1;
+    }
+  }
+
+  .carousel-control-prev-icon,
+  .carousel-control-next-icon {
+    width: 2.5rem;
+    height: 2.5rem;
+    background-color: rgba(0, 0, 0, .55);
+    background-size: 55% 55%;
+    border-radius: 50%;
+  }
+
+  .carousel-indicators {
+    position: static;
+    margin: .75rem 0 0;
+    padding: 0;
+
+    [data-bs-target] {
+      width: .625rem;
+      height: .625rem;
+      margin-right: .375rem;
+      margin-left: .375rem;
+      background-color: var(--bs-border-color); // primary-100, see _variables.scss
+      border-radius: 50%;
+      opacity: 1;
+    }
+
+    .active {
+      background-color: var(--bs-primary);
+    }
+  }
+
+  .carousel-caption {
+    right: .75rem;
+    bottom: .75rem;
+    left: .75rem;
+    padding: .5rem .75rem;
+    background-color: rgba(0, 0, 0, .55);
+    border-radius: var(--bs-border-radius);
+  }
+}

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-theme-centos
 version: !ruby/object:Gem::Version
-  version: 2.52.0.beta.91
+  version: 2.52.0.beta.92
 platform: ruby
 authors:
 - Alain Reguera Delgado