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

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b215f97ff3780331a982089e5719dbe284707fef64a0a5f4abc2b30864f2023c
-  data.tar.gz: 612f7607e1ea34f937f9cd881be3c4e4df01d9f1eee172540eeca244096ee10b
+  metadata.gz: d1ddd48e40839e62993220986497939549cbacca43c0c8a26020996e3520a3e6
+  data.tar.gz: dccc3f654ba6ef736e52803738dd01eb9846024e37c09e16c52ed916ad83a59b
 SHA512:
-  metadata.gz: 1c826018b0f8b10df68124dd00b13328953b70596297d390ad3bf05f1dc269261255b2d680cbc98a41ac9701fec11692d657d34cfd502210a50cf0ce874cf739
-  data.tar.gz: ac962acbdbaffa0f44397c21474866ce09ad5acf0564c52ee0ebcefc75629f86f887a82f3da25a0a873409dda7c2b6966d2cbdcc1c3315d37cebda6f3c7b583f
+  metadata.gz: 15fe51e10c40b2e264a5008e0a315d7bb79180718dd6632416ae090adeb5fe71131abed39ba5416198eaced8978f9091e8accc731c0cf115b6fadc87dc265f09
+  data.tar.gz: 67b10667ff2b8831b4fbe115f2388f496f7a8b4295d5aabdb75f7ec437143c7396afefa9b322850fcacec2eb8529cde40dbd3111acddc9207748dc53b90ab064

data/_data/base/bits_schema.yml

@@ -112,7 +112,7 @@ properties:
           items:
             type: object
             description: Configuration object for a single action button (link). Refer to the `link` component documentation for specific properties.
-            additionalProperties: true # Changed to true as properties are defined externally
+            additionalProperties: true
         actions_class:
           type: string
           default: ""
@@ -135,11 +135,11 @@ properties:
             Only relevant when `type` is set to `upstream`.
         finale_class:
           type: string
-          default: mb-3
+          default: "mb-3"
           description: Custom Bootstrap classes applied to the `finale` message element (default adds margin-bottom).
         class:
           type: string
-          default: "bg-primary bg-opacity-10 border border-primary-subtle mb-3 p-5 align-items-center text-center rounded"
+          default: "bg-primary bg-opacity-10 border border-primary-subtle mb-3 p-3 pb-1 align-items-center text-center rounded"
           description: >-
             Custom Bootstrap classes applied to the main container of the
             Upstream Bit layout. Use this to control padding, background, and element
@@ -148,6 +148,17 @@ properties:
           type: string
           default: "flex-column align-items-center text-center mb-3"
           description: Custom Bootstrap classes applied directly to the card element inside the Upstream Bit container.
+        col_class:
+          type: string
+          default: "col-12 col-sm-4"
+          description: >-
+            Custom Bootstrap grid column class(es) applied to the wrapper around a
+            downstream Bit's card, controlling its width and responsiveness within
+            the downstream row (e.g., `col-12` to span the full row, `col-sm-6` to
+            share the row 50/50 with one other item, or the default `col-12 col-sm-4`
+            to keep three items evenly spaced from the small breakpoint up). Only
+            relevant when `type` is `downstream` and the parent Upstream Bit uses the
+            `card` downstream style — has no effect on `accordion` style.
         color:
           type: string
           default: primary
@@ -175,11 +186,32 @@ properties:
             to this Upstream Bit. For example, if the Upstream is at `/my-project/`,
             this might be `/my-project/derivatives/`.
           format: uri-reference
+        downstream_style:
+          type: string
+          default: card
+          description: >-
+            Presentation style for this Upstream Bit's downstream projects.
+            `card` (default) keeps the fixed 3-item card preview grid. `accordion`
+            renders every related downstream Bit as a Bootstrap accordion item
+            instead, optionally capped via `downstream_limit`. Only relevant
+            when `type` is `upstream`.
+          enum:
+            - card
+            - accordion
+        downstream_limit:
+          type: integer
+          minimum: 1
+          description: >-
+            Only used when `downstream_style` is `accordion`. Maximum number of
+            downstream Bits shown in the accordion for this Upstream Bit. When
+            omitted, every related downstream Bit is shown and the index-page
+            link is not rendered, since there is nothing left to link to. Has
+            no effect on the `card` style, whose display count stays fixed at 3.
       required:
         - screenshot
         - description
         - type
         - color
-        - name # Added name as it is critical for relationship
+        - name
       additionalProperties: false
 additionalProperties: false

data/_includes/base/{download_accordion_item.html.liquid → accordion_item.html.liquid}

@@ -1,13 +1,14 @@
 {% comment %}
 ================================================================================
-Utility: Download Accordion Item
-Purpose: The Bootstrap accordion-item/header/button/collapse/body shell
-shared by the four sibling sections below a release's architecture grid
-(Screenshots, Documentation, Migration, End-of-life) — see
-download_sections.html.liquid for how these compose into one shared
-accordion. Body content is built by the caller via a capture tag and passed
-in as a pre-rendered HTML string, since Jekyll's Liquid include mechanism
-has no block/yield content-passing.
+Utility: Accordion Item
+Purpose: The Bootstrap accordion-item/header/button/collapse/body shell,
+shared across components. Used by the four sibling sections below a
+release's architecture grid (Screenshots, Documentation, Migration,
+End-of-life — see download_sections.html.liquid for how these compose into
+one shared accordion) and by the bits component's accordion downstream
+style (see bits.html.liquid). Body content is built by the caller via a
+capture tag and passed in as a pre-rendered HTML string, since Jekyll's
+Liquid include mechanism has no block/yield content-passing.
 
 Required Inputs:
 - icon:         Font Awesome icon class shown before the title.
@@ -28,7 +29,7 @@ Optional Inputs:
   <div class="accordion-header h2">
     <button class="accordion-button{% unless include.expanded %} collapsed{% endunless %}" type="button" data-bs-toggle="collapse" data-bs-target="#{{ include.item_id }}" aria-expanded="{{ include.expanded }}" aria-controls="{{ include.item_id }}">
       <i class="{{ include.icon }} me-2"></i>
-      <span class="mx-3 fw-bold">{{ include.title }}</span>
+      <span class="ms-1 fw-bold">{{ include.title }}</span>
     </button>
   </div>
   <div id="{{ include.item_id }}" class="accordion-collapse collapse{% if include.expanded %} show{% endif %}" data-bs-parent="#{{ include.accordion_id }}">

data/_includes/base/bits.html.liquid

@@ -1,42 +1,44 @@
 {% comment %}
 ================================================================================
 Template: Bits Component (Upstream/Downstream Relationships)
-Purpose: Renders hierarchical relationships between upstream and downstream
-components. Displays upstream with preamble, card, finale, and up to 3 preview
-cards of related downstream items.
-================================================================================
-
-Strategic Design Logic:
-- Hierarchical relationships: upstream parent, downstream children
-- Card-based presentation: reuses card component for consistency
-- Filtered display: shows max 3 downstream preview cards
-- Optional sections: preamble, finale, "View All" link
-- Relationship linking: downstream filtered by upstream name
-- Customizable styling: per-element class overrides
+Purpose: Renders upstream/downstream relationships — each upstream Bit as a
+preamble/card/finale block, followed by its related downstream Bits in one
+of two switchable presentation styles.
+
+Design Logic:
+- Hierarchical relationships: upstream parent, downstream children, linked
+by matching `relationship` to the upstream's `name`
+- Card-based presentation: reuses base/card.html.liquid for the upstream Bit
+- Switchable downstream presentation, picked per upstream Bit via
+`downstream_style`: `card` (default, fixed 3-item preview grid) or
+`accordion` (every related item, optionally capped via `downstream_limit`)
+- Optional sections: preamble, finale, "View All" link (shown once the
+downstream count exceeds the effective style cap)
+- Per-item downstream card width: each downstream Bit's own `col_class`
+(card style only) controls its Bootstrap grid column class, so cards in the
+same row need not be equal width
 
 Required Inputs (from data objects):
-- type: 'upstream' or 'downstream' (required)
-- name: Component name (required)
-- relationship: For downstream, name of upstream parent
+- type: 'upstream' or 'downstream'
+- name: Component name
+- relationship: For downstream, name of its upstream parent
 
 Optional Inputs (from data objects):
 - description, screenshot, icon, image, actions, color
-- preamble, finale: Text before/after card
+- preamble, finale: Text before/after the upstream card
 - class, card_class, preamble_class, finale_class: Custom styling
-- index_page_name, index_page_url: For "View All" link (shows if >3 items)
-
-Data Source Hierarchy (in priority order):
-1. include.data - Explicitly passed array
-2. page.with_bits_data - Page front matter
-3. site.data.bits - Site data
-4. site.data.base.bits - Theme defaults
-
-Component Layout:
-- Outer loop: upstream bits (type='upstream')
-- Preamble text (if present)
-- Card component for upstream
-- Finale section with optional "View All" link (if >3 downstream)
-- Downstream preview grid (max 3 items, filtered by relationship)
+- downstream_style: 'card' (default) or 'accordion'
+- downstream_limit: accordion style only; caps items shown, omit for
+unlimited (all shown, "View All" link never rendered)
+- col_class: card style only; Bootstrap column class per downstream card
+(default: three-across)
+- index_page_name, index_page_url: For the "View All" link
+
+Data Source Hierarchy (priority order):
+1. include.data
+2. page.with_bits_data
+3. site.data.bits
+4. site.data.base.bits
 ================================================================================
 {% endcomment %}
 
@@ -70,10 +72,13 @@ Component Layout:
   {%- assign upstream_bit_screenshot_class      = upstream_bit.screenshot_class | default: with_bits_schema.screenshot_class.default %}
   {%- assign upstream_bit_actions_class         = upstream_bit.actions_class    | default: with_bits_schema.actions_class.default %}
   {%- assign upstream_bit_btn_class             = "btn btn-sm m-1 btn-"         | append: upstream_bit_color %}
+  {%- assign upstream_bit_downstream_style      = upstream_bit.downstream_style  | default: with_bits_schema.downstream_style.default %}
+  {%- assign upstream_bit_downstream_limit      = upstream_bit.downstream_limit %}
+  {%- assign card_style_downstream_cap          = 3 %}
 
   <div class="d-flex flex-column{% if upstream_bit_class != "" %} {{ upstream_bit_class }}{% endif %}">
 
-    {%- comment %} --- Upstream Peamble --- {% endcomment %}
+    {%- comment %} --- Upstream Preamble --- {% endcomment %}
     {%- if upstream_bit.preamble %}
       <p{% if upstream_bit_preamble_class != "" %} class="{{ upstream_bit_preamble_class }}"{% endif %}>{{ upstream_bit.preamble }}</p>
     {%- endif %}
@@ -98,55 +103,114 @@ Component Layout:
     actions           = upstream_bit.actions
     actions_class     = upstream_bit_actions_class
     color             = upstream_bit_color
-    %}
+    -%}
 
     {%- comment %} --- Upstream Finale (Downstream Introduction) --- {% endcomment %}
     {%- assign downstream_bits           = with_bits_data               | where: "type", "downstream" | where: "relationship", upstream_bit.name %}
     {%- assign downstream_bit_total      = downstream_bits              | size %}
     {%- assign downstream_bit_index_name = upstream_bit_index_page_name | append: " (" | append: downstream_bit_total | append: ")"  %}
 
+    {%- assign downstream_display_limit = upstream_bit_downstream_limit %}
+    {%- if upstream_bit_downstream_style != "accordion" %}
+      {%- assign downstream_display_limit = card_style_downstream_cap %}
+    {%- endif %}
+
+    {%- assign show_index_link = false %}
+    {%- if downstream_display_limit and downstream_bit_total > downstream_display_limit %}
+      {%- assign show_index_link = true %}
+    {%- endif %}
+
     {%- if upstream_bit.finale %}
-      <div class="d-flex flex-row w-100 justify-content-between align-items-center my-3">
+      <div class="d-flex flex-row w-100 justify-content-between align-items-center">
         <p class="m-1{% if upstream_bit_finale_class != "" %} {{ upstream_bit_finale_class }}{% endif %}">{{ upstream_bit.finale }}</p>
-        {%- if downstream_bit_total > 3 %}
+        {%- if show_index_link %}
           <div class="m-1">
-            {% include base/link.html.liquid
+            {%- include base/link.html.liquid
             name          = downstream_bit_index_name
             class         = ""
             icon          = "fa-solid fa-arrow-right"
             icon_position = "end"
             link          = upstream_bit_index_page_url
-            %}
+            -%}
           </div>
-        {% endif %}
+        {%- endif %}
       </div>
     {%- endif %}
 
-    {%- comment %} --- Downstream Cards --- {% endcomment %}
-    <div class="d-flex flex-row flex-wrap flex-lg-nowrap justify-content-between w-100 mb-3">
-      {%- for downstream_bit in downstream_bits | limit: 3 %}
-        <div class="card border-{{ upstream_bit_color }}-subtle m-1">
+    {%- comment %} --- Downstream Items --- {% endcomment %}
+    {%- if downstream_display_limit %}
+      {%- assign visible_downstream_bits = downstream_bits | slice: 0, downstream_display_limit %}
+    {%- else %}
+      {%- assign visible_downstream_bits = downstream_bits %}
+    {%- endif %}
+
+    {%- if upstream_bit_downstream_style == "accordion" %}
+      {%- assign downstream_accordion_id = upstream_bit_id | append: "-downstream-accordion" %}
+      {%- assign downstream_item_img_class = "img-fluid" %}
+    {%- else %}
+      {%- assign downstream_item_img_class = "card-img-top" %}
+    {%- endif %}
+
+    {%- capture downstream_items_html %}
+      {%- for downstream_bit in visible_downstream_bits %}
+        {%- assign downstream_bit_first_action = downstream_bit.actions | first %}
+        {%- capture downstream_bit_action_button %}
+          {%- if downstream_bit_first_action %}
+            {%- include base/link.html.liquid
+            name          = downstream_bit_first_action.name
+            link          = downstream_bit_first_action.link
+            class         = upstream_bit_btn_class
+            icon          = downstream_bit_first_action.icon
+            icon_position = downstream_bit_first_action.icon_position
+            -%}
+          {%- endif %}
+        {%- endcapture %}
+
+        {%- capture downstream_bit_media %}
           <div class="bg-{{ upstream_bit_color }} rounded-top">
-            <img src="{{ site.baseurl }}/assets/img/{{ downstream_bit.screenshot }}" class="card-img-top" alt="{{ downstream_bit.screenshot }}">
+            <img src="{{ site.baseurl }}/assets/img/{{ downstream_bit.screenshot }}" class="{{ downstream_item_img_class }}" alt="{{ downstream_bit.screenshot }}">
           </div>
-          <div class="card-body">
-            <p class="h5 card-title">{{ downstream_bit.name }}</p>
-            <p class="card-text">{{ downstream_bit.description }}</p>
-            {% for action in downstream_bit.actions | limit: 1 %}
-              {% include base/link.html.liquid
-              name          = action.name
-              link          = action.link
-              class         = upstream_bit_btn_class
-              icon          = action.icon
-              icon_position = action.icon_position
-              %}
-            {% endfor %}
+        {%- endcapture %}
+
+        {%- if upstream_bit_downstream_style == "accordion" %}
+          {%- assign downstream_bit_id = downstream_bit.name | replace: " ", "" | capitalize %}
+          {%- assign downstream_item_id = downstream_accordion_id | append: "-" | append: downstream_bit_id %}
+          {%- capture downstream_bit_body %}
+            {{- downstream_bit_media | strip -}}
+            <p class="card-text mt-3">{{ downstream_bit.description }}</p>
+            {{ downstream_bit_action_button }}
+          {%- endcapture %}
+          {%- include base/accordion_item.html.liquid
+          icon          = downstream_bit.icon
+          title         = downstream_bit.name
+          item_id       = downstream_item_id
+          accordion_id  = downstream_accordion_id
+          expanded      = false
+          body          = downstream_bit_body
+          -%}
+        {%- else %}
+          {%- assign downstream_bit_col_class = downstream_bit.col_class | default: with_bits_schema.col_class.default %}
+          <div class="{{ downstream_bit_col_class }}">
+            <div class="card border-{{ upstream_bit_color }}-subtle h-100">
+              {{- downstream_bit_media | strip -}}
+              <div class="card-body">
+                <p class="h5 card-title">{{ downstream_bit.name }}</p>
+                <p class="card-text">{{ downstream_bit.description }}</p>
+                {{ downstream_bit_action_button }}
+              </div>
+            </div>
           </div>
-        </div>
+        {%- endif %}
       {%- endfor %}
-    </div>
+    {%- endcapture %}
+
+    {%- if upstream_bit_downstream_style == "accordion" %}
+      <div class="accordion w-100 mb-3" id="{{ downstream_accordion_id }}">{{- downstream_items_html -}}</div>
+    {%- else %}
+      <div class="row w-100 mb-3 g-2">{{- downstream_items_html -}}</div>
+    {%- endif %}
 
   </div>
-{% endfor %}
+{%- endfor %}
 
 {%- endif -%}

data/_includes/base/download_commands.html.liquid

@@ -24,4 +24,4 @@ Required Inputs:
     {%- endif %}
   {%- endfor %}
 {%- endcapture -%}
-{%- include base/download_accordion_item.html.liquid icon="fa-solid fa-terminal" title="Migration" item_id=include.item_id accordion_id=include.accordion_id expanded=include.expanded body=download_commands_body -%}
+{%- include base/accordion_item.html.liquid icon="fa-solid fa-terminal" title="Migration" item_id=include.item_id accordion_id=include.accordion_id expanded=include.expanded body=download_commands_body -%}

data/_includes/base/download_documentation.html.liquid

@@ -55,4 +55,4 @@ kinds doesn't end up with paragraphs breaking up a button row.
   {%- 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 -%}
+{%- include base/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_eol.html.liquid

@@ -26,4 +26,4 @@ Required Inputs:
     {%- endfor %}
   </ul>
 {%- endcapture -%}
-{%- include base/download_accordion_item.html.liquid icon="fa-solid fa-hourglass-end" title="End-of-life" item_id=include.item_id accordion_id=include.accordion_id expanded=include.expanded body=download_eol_body -%}
+{%- include base/accordion_item.html.liquid icon="fa-solid fa-hourglass-end" title="End-of-life" item_id=include.item_id accordion_id=include.accordion_id expanded=include.expanded body=download_eol_body -%}

data/_includes/base/download_screenshots.html.liquid

@@ -87,15 +87,15 @@ row too.
           {%- 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="carousel-control-prev-icon" aria-hidden="true"><i class="fa-solid fa-chevron-left"></i></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="carousel-control-next-icon" aria-hidden="true"><i class="fa-solid fa-chevron-right"></i></span>
           <span class="visually-hidden">Next</span>
         </button>
       </div>
-      <div class="carousel-indicators">
+      <div class="carousel-indicators mt-3">
         {%- for row in include.screenshots %}
         <button
           {%- if forloop.first %} class="active" aria-current="true"{% endif %}
@@ -108,4 +108,4 @@ row too.
     </div>
   </div>
 {%- endcapture -%}
-{%- include base/download_accordion_item.html.liquid icon="fa-solid fa-desktop" title="Screenshots" item_id=include.item_id accordion_id=include.accordion_id expanded=include.expanded body_class="p-0" body=download_screenshots_body -%}
+{%- include base/accordion_item.html.liquid icon="fa-solid fa-desktop" title="Screenshots" item_id=include.item_id accordion_id=include.accordion_id expanded=include.expanded body_class="p-0" body=download_screenshots_body -%}

data/_includes/base/head.html.liquid

@@ -39,11 +39,11 @@ Optional Inputs:
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <meta name="referrer" content="strict-origin-when-cross-origin" />
 {% if page.title == site.title -%}
-  <title>{{ page.title }}</title>
+  <title>{{ page.title | escape }}</title>
 {% else -%}
-  <title>{{ page.title }} - {{ site.title }}</title>
+  <title>{{ page.title | escape }} - {{ site.title | escape }}</title>
 {% endif -%}
-<meta name="description" content="{{ page.description | default: page.excerpt | default: page.title_lead | default: site.description | strip_html | truncate: 160 }}" />
+<meta name="description" content="{{ page.description | default: page.excerpt | default: page.title_lead | default: site.description | strip_html | truncate: 160 | escape }}" />
 {% include base/ogp.html.liquid %}
 <link rel="icon" href="{{ site.baseurl }}/assets/icons/favicon-16.png" sizes="16x16" />
 <link rel="icon" href="{{ site.baseurl }}/assets/icons/favicon-32.png" sizes="32x32" />

data/_includes/base/ogp.html.liquid

@@ -90,7 +90,7 @@ Data Source Hierarchy:
 
     {%- comment %} --- Title --- {% endcomment %}
     {%- if with_ogp_data[property].title %}
-      <meta {{ meta_attr }}="{{ property }}:title" content="{{ page.title }}" />
+      <meta {{ meta_attr }}="{{ property }}:title" content="{{ page.title | escape }}" />
     {%- endif %}
 
     {%- comment %} --- OG type and logo (after title, before url) --- {% endcomment %}
@@ -110,11 +110,11 @@ Data Source Hierarchy:
     {%- comment %} --- Description --- {% endcomment %}
     {%- if with_ogp_data[property].description %}
       {%- if page.excerpt %}
-        <meta {{ meta_attr }}="{{ property }}:description" content="{{ page.excerpt }}" />
+        <meta {{ meta_attr }}="{{ property }}:description" content="{{ page.excerpt | strip_html | escape }}" />
       {%- elsif page.title_lead %}
-        <meta {{ meta_attr }}="{{ property }}:description" content="{{ page.title_lead }}" />
+        <meta {{ meta_attr }}="{{ property }}:description" content="{{ page.title_lead | escape }}" />
       {%- else %}
-        <meta {{ meta_attr }}="{{ property }}:description" content="{{ site.description }}" />
+        <meta {{ meta_attr }}="{{ property }}:description" content="{{ site.description | escape }}" />
       {%- endif %}
     {%- endif %}
 
@@ -127,14 +127,14 @@ Data Source Hierarchy:
         <meta {{ meta_attr }}="{{ property }}:image:width" content="{{ ogp_image_width }}" />
         <meta {{ meta_attr }}="{{ property }}:image:height" content="{{ ogp_image_height }}" />
       {%- endif %}
-      <meta {{ meta_attr }}="{{ property }}:image:alt" content="{{ with_ogp_data[property].image.alt | default: with_ogp_og_image_schema.alt.default | default: 'The CentOS Project' }}" />
+      <meta {{ meta_attr }}="{{ property }}:image:alt" content="{{ with_ogp_data[property].image.alt | default: with_ogp_og_image_schema.alt.default | default: 'The CentOS Project' | escape }}" />
     {%- endif %}
 
     {%- comment %} --- OG site_name and locale (after image) --- {% endcomment %}
     {%- if property == "og" %}
       {%- assign ogp_site_name = with_ogp_data.og.site_name | default: site.title %}
       {%- if ogp_site_name %}
-        <meta property="og:site_name" content="{{ ogp_site_name }}" />
+        <meta property="og:site_name" content="{{ ogp_site_name | escape }}" />
       {%- endif %}
       <meta property="og:locale" content="{{ ogp_locale }}" />
     {%- endif %}

data/_sass/base/_download.scss

@@ -94,7 +94,8 @@
 // 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
+// distinction. The active dot also widens into a pill (GNOME workspace-
+// switcher style), so both color and size signal "current slide", not just a
 // subtle 50%-vs-100%-opacity difference easy to miss.
 // ================================================================================
 
@@ -111,11 +112,36 @@
 
   .carousel-control-prev-icon,
   .carousel-control-next-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     width: 2.5rem;
     height: 2.5rem;
-    background-color: rgba(0, 0, 0, .55);
-    background-size: 55% 55%;
+    // $body-color is centos-purple-900 (see _variables.scss) — used via the Sass
+    // variable, not a CSS custom property: Bootstrap computes its `-rgb`
+    // companion variables from $theme-colors before base/maps.scss merges in
+    // the extended centos-purple-XXX shades, so no --bs-centos-purple-900-rgb
+    // ever gets generated for rgba() to reference.
+    background-color: rgba($body-color, .55); // dark scrim tinted with the theme's own purple, not neutral black
+    background-image: none; // drop Bootstrap's built-in chevron SVG — replaced with a FontAwesome icon
     border-radius: 50%;
+    transition: background-color .2s ease;
+
+    i {
+      font-size: 1.1rem;
+      color: #fff;
+    }
+  }
+
+  .carousel-control-prev:hover .carousel-control-prev-icon,
+  .carousel-control-prev:focus-visible .carousel-control-prev-icon,
+  .carousel-control-next:hover .carousel-control-next-icon,
+  .carousel-control-next:focus-visible .carousel-control-next-icon {
+    // :focus-visible, not :focus — a mouse click also sets :focus on a
+    // <button>, which would leave the highlight stuck after the pointer
+    // moves away; :focus-visible only fires for keyboard navigation, so the
+    // mouse-driven highlight is hover-only while Tab users still get a cue.
+    background-color: var(--bs-primary); // full-opacity primary on hover/focus, same interactive cue as the active indicator dot
   }
 
   .carousel-indicators {
@@ -129,11 +155,22 @@
       margin-right: .375rem;
       margin-left: .375rem;
       background-color: var(--bs-border-color); // primary-100, see _variables.scss
-      border-radius: 50%;
+      // Reset Bootstrap's default 10px transparent top/bottom border (its
+      // thin-bar click-hit-area trick): left in place, its background-clip:
+      // padding-box carries over too, and clips our visible color to a
+      // padding-box radius of border-radius minus that 10px border — well
+      // below 0, so the dot renders square no matter what radius we set.
+      border: 0;
+      // Fixed radius (half the dot's own height), not 50%: a percentage is
+      // computed per-axis, so on the wider active dot it would stretch into
+      // an ellipse instead of keeping the same round end-caps as the circle.
+      border-radius: .3125rem;
       opacity: 1;
+      transition: width .2s ease, background-color .2s ease;
     }
 
     .active {
+      width: 1.375rem;
       background-color: var(--bs-primary);
     }
   }

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-theme-centos
 version: !ruby/object:Gem::Version
-  version: 2.52.0.beta.92
+  version: 2.52.0.beta.94
 platform: ruby
 authors:
 - Alain Reguera Delgado
@@ -326,6 +326,7 @@ files:
 - _data/base/sponsors_schema.yml
 - _data/base/title_schema.yml
 - _data/base/toc_schema.yml
+- _includes/base/accordion_item.html.liquid
 - _includes/base/announcement.html.liquid
 - _includes/base/artwork.html.liquid
 - _includes/base/backtotop.html.liquid
@@ -344,7 +345,6 @@ files:
 - _includes/base/copyvalue.html.liquid
 - _includes/base/datatable.html.liquid
 - _includes/base/download.html.liquid
-- _includes/base/download_accordion_item.html.liquid
 - _includes/base/download_architecture.html.liquid
 - _includes/base/download_commands.html.liquid
 - _includes/base/download_documentation.html.liquid