jekyll-theme-centos 0.0.0

data/_includes/download/cards-header-screenshot.html

@@ -0,0 +1,8 @@
+<div class="table-responsive">
+  <table class="table mb-0">
+    <thead class="table-light">
+      <tr>
+        <th scope="col"><i class="fa-solid fa-desktop"></i> Desktop</th>
+      </tr>
+    </thead>
+    <tbody>

data/_includes/download/cards-header-screenshots.html

@@ -0,0 +1,8 @@
+<div class="table-responsive">
+  <table class="table table-bordered mb-0">
+    <thead class="table-light">
+      <tr>
+        <th scope="col"><i class="fa-solid fa-desktop"></i> Screenshots</th>
+      </tr>
+    </thead>
+    <tbody>

data/_includes/download/cards-header.html

@@ -0,0 +1,13 @@
+<div class="table-responsive">
+  <table class="table mb-0">
+    <thead class="table-light">
+      <tr>
+        <th scope="col"><i class="fa-solid fa-microchip"></i> Architectures</th>
+        <th scope="col">ISOs</th>
+        <th scope="col">RPMs</th>
+        <th scope="col">Cloud</th>
+        <th scope="col">Containers</th>
+        <th scope="col">Vagrant</th>
+      </tr>
+    </thead>
+    <tbody>

data/_includes/download/cards.html

@@ -0,0 +1,120 @@
+{% if include.data and include.data != "" %}
+  {% assign cards = include.data %}
+{% else %}
+  {% assign cards = site.data.download.cards %}
+{% endif %}
+
+
+{% for card in cards %}
+
+  {% if include.title and include.title != "" %}
+    {% if include.title != card.title %}
+      {% continue %}
+    {% endif %}
+  {% endif %}
+
+  <div class="mb-5">
+    {% if include.with_title %}
+    <div class="h2">{{ card.title }}</div>
+    {% endif %}
+
+    {% if include.with_description %}
+    <p>{{ card.description }}</p>
+    {% endif %}
+
+    {% if include.id and include.id != "" %}
+      {%- capture card_id -%}
+      {{ include.id }}-{{ card.title | downcase | replace: " ", "-" }}
+      {%- endcapture %}
+    {% else %}
+      {%- capture card_id -%}
+      DownloadsCard-1-{{ card.title | downcase | replace: " ", "-" }}
+      {%- endcapture %}
+    {% endif %}
+
+    {% if include.with_releases %}
+    <ul class="nav nav-pills my-3 justify-content-start" id="{{ card_id }}-pills-tab" role="tablist">
+      {% for release in card.releases %}
+      <li class="nav-item" role="presentation">
+        <button class="nav-link{% if forloop.first %} active{% endif %} fw-bold"
+          id="{{ card_id }}-pills-tab{{ forloop.index }}"
+          data-bs-toggle="tab"
+          data-bs-target="#{{ card_id }}-pills{{ forloop.index }}"
+          type="button"
+          role="tab"
+          aria-controls="{{ card_id }}-pills-tab{{ forloop.index }}"
+          {% if forloop.first %}aria-selected="true"{% endif %}
+          >{{ release[0] }}</button>
+      </li>
+      {% endfor %}
+    </ul>
+
+    <div class="tab-content mb-3" id="{{ card_id }}-pills-tabContent">
+    {% for release in card.releases %}
+
+    {%- capture release_id -%}
+    {{ card_id }}-pills{{ forloop.index }}
+    {%- endcapture %}
+
+    {%- capture tab_id -%}
+    {{ card_id }}-pills-tab{{ forloop.index }}
+    {%- endcapture %}
+
+    <div class="tab-pane fade {% if forloop.first %} show active{% endif %}"
+         id="{{ release_id }}"
+         role="tabpanel"
+         aria-labelledby="{{ tab_id }}"
+         tabindex="{{ forloop.index }}">
+
+        {% if include.with_screenshots %}
+        {% for rows in release %}
+        {% if rows.screenshots.size > 0 %}
+        {% include download/cards-header-screenshots.html %}
+        {% include download/cards-body-screenshots.html %}
+        {% include download/cards-footer.html %}
+        {% endif %}
+        {% endfor %}
+        {% endif %}
+
+        {% if include.with_mirrors %}
+        {% include download/cards-header-mirrors.html %}
+        {% for rows in release %}
+        {% for row in rows.mirrors %}
+        {% include download/cards-body-mirrors.html %}
+        {% endfor %}
+        {% endfor %}
+        {% include download/cards-footer.html %}
+        {% endif %}
+
+        {% if include.with_documentation %}
+        {% include download/cards-header-documentation.html %}
+        {% include download/cards-body-documentation.html %}
+        {% include download/cards-footer.html %}
+        {% endif %}
+
+        {% if include.with_eol %}
+        {% include download/cards-header-eol.html %}
+        {% for rows in release %}
+        {% for row in rows.eol %}
+        {% include download/cards-body-eol.html %}
+        {% endfor %}
+        {% endfor %}
+        {% include download/cards-footer.html %}
+        {% endif %}
+
+        {% if include.with_commands %}
+        {% for rows in release %}
+        {% for row in rows.commands %}
+        {% include download/cards-header-commands.html %}
+        {% include download/cards-body-commands.html %}
+        {% include download/cards-footer.html %}
+        {% endfor %}
+        {% endfor %}
+        {% endif %}
+      </div>
+      {% endfor %}
+    </div>
+    {% endif %}
+
+  </div>
+{% endfor %}

data/_layouts/base/default.html

@@ -0,0 +1,68 @@
+<!doctype html>
+<html lang="{{ page.lang | default: 'en' }}"{% if page.with_ogp %} prefix="og: https://ogp.me/ns#"{% endif %}>
+  {% include base/head.html.liquid -%}
+  <body id="top" class="bg-body">
+
+    {% include base/navbar.html.liquid -%}
+
+    {% include base/project.html.liquid %}
+
+    {% include base/breakingnews.html.liquid -%}
+
+    <main class="container py-3">
+
+      {%- include base/announcement.html.liquid %}
+
+      {% include base/bits.html.liquid %}
+
+      {% include base/event.html.liquid %}
+
+      {% if page.with_breadcrumb %}
+      <div class="row small mb-3">
+        <div class="col">
+          {% include base/breadcrumb.html.liquid %}
+        </div>
+      </div>
+      {% endif %}
+
+      {% if page.with_title %}
+      <div class="row mb-3">
+        <div class="{{ site.data.base.content.class | default: 'col' }}">
+          {% include base/title.html.liquid %}
+        </div>
+      </div>
+      {% endif %}
+
+      {% if page.with_artwork %}
+      <div class="row mb-3">
+        <div class="{{ site.data.base.content.class | default: 'col' }}">
+          {% include base/artwork.html.liquid %}
+        </div>
+      </div>
+      {% endif %}
+
+      {% if page.with_toc %}
+      <div class="row mb-3">
+        <div class="{{ site.data.base.content.class | default: 'col' }}">
+          {% include base/toc.html.liquid %}
+        </div>
+      </div>
+      {% endif %}
+
+      {% if page.with_content %}
+      <div class="row mb-3">
+        <div class="{{ site.data.base.content.class | default: 'col' }} content">
+          {% include base/content.html.liquid %}
+        </div>
+      </div>
+{% endif %}
+
+    </main>
+
+    {% if page.with_footer %}
+    <footer class="footer small bg-dark text-centos-purple-100 pt-5">
+    {% include base/footer.html.liquid -%}
+    </footer>
+    {% endif %}
+  </body>
+</html>

data/_layouts/download/cards.html

@@ -0,0 +1,7 @@
+---
+layout: default
+---
+
+{% include download/cards.html %}
+
+{{ content }}

data/_layouts/download/default.html

@@ -0,0 +1,7 @@
+---
+layout: base/default
+---
+
+{% include download/cards.html %}
+
+{{ content }}

data/_layouts/people/default.html

@@ -0,0 +1,68 @@
+<!doctype html>
+<html lang="{{ page.lang | default: 'en' }}">
+  {% include base/head.html -%}
+  <body id="top" class="bg-dots pt-0">
+    {% include base/navbar.html %}
+
+    <div class="bg-dark bg-image border-bottom border-5 border-primary">
+      <div class="container text-white p-5">
+        <div class="row mt-3 mb-4">
+          {% assign header_image = "people/" | append: page.title | append: ".webp" %}
+          {% include base/card.html
+                class             = "my-5"
+                image             = header_image
+                image_class       = "mb-4 w-25 rounded border border-3"
+                name              =  page.title
+                name_class        = "display-2 fw-bold mb-1"
+                description       = page.title_lead
+                description_class = "lead"
+          %}
+        </div>
+      </div>
+    </div>
+
+    <main class="container bg-body p-5 mt-n6 shadow rounded-top">
+      {% if page.with_announcements == true and page.with_announcements_data.size > 0 -%}
+      {% include base/announcements.html %}
+      {% endif %}
+
+      {% if page.with_content == true %}
+      <div class="content">
+        {{ content }}
+      </div>
+      {% endif %}
+    </main>
+
+    {% if page.with_footer == true %}
+    <footer class="footer small bg-dark bg-image text-light">
+      {% if page.with_shortcuts == true %}
+      <div class="container px-0">
+        {% include base/shortcuts.html %}
+      </div>
+      {% endif %}
+
+      {% if page.with_finale == true %}
+      <div class="container px-0">
+      {% include base/finale.html %}
+      </div>
+      {% endif %}
+
+      {% if page.with_sponsors == true %}
+      <div class="container px-0">
+      {% include sponsors/carousel.html -%}
+      </div>
+      {% endif %}
+
+      {% if page.with_copyright == true %}
+      <div class="container px-0 py-1">
+        {% include base/copyright.html %}
+      </div>
+      {% endif %}
+
+    </footer>
+    {% endif %}
+
+    {% include base/script.html -%}
+
+  </body>
+</html>

data/_sass/base/_customization.scss

@@ -0,0 +1,331 @@
+// This file is for custom CSS rules and utility classes that override standard
+// Bootstrap structure. It should be the last file in your import sequence.
+// Here, you define and generate custom utility classes using the variables and
+// maps that were set up previously.
+
+// ================================================================================
+// CSS Custom Properties (for dynamic inline styles)
+// ================================================================================
+// These variables are used in head.html.liquid for dynamic CSS generation.
+// Defined here for centralized configuration and availability to inline styles.
+:root {
+  // Breaking News Component
+  // Measurements used for calculating scroll-margin-top in head.html.liquid
+  --breakingnews-alert-height: 31px;
+  --navbar-height: 42px;
+  --heading-margin-top: 48px;
+
+  // Highlight.js Icon Sizing
+  // Used for copy button icon dimensions
+  --highlight-icon-width: 24px;
+  --highlight-icon-height: 24px;
+}
+
+body {
+  padding-top: $breakingnews-height;
+
+  .sticky-top-breakingnews {
+    top: $breakingnews-height;
+  }
+}
+
+// --------------------------------------------------------------------------------
+// Backgrounds, Texts, and Gradients classes
+// --------------------------------------------------------------------------------
+@each $color, $value in $theme-colors {
+  // Create a background utility class for each color.
+  .bg-#{$color} {
+    background-color: $value;
+  }
+  // Create a text color utility class for each color.
+  .text-#{$color} {
+    color: $value;
+  }
+}
+
+@each $color, $value in $centos-text-gradients {
+  .text-gradient-#{$color} {
+    background-image: $value;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+}
+
+.bg-image {
+  background-image: url("../../img/centos-motif.png");
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+.bg-image-center {
+  background-position: center;
+}
+
+.bg-image-top {
+  background-position: top;
+}
+
+.bg-image-bottom {
+  background-position: bottom;
+}
+
+// --------------------------------------------------------------------------------
+// Lists
+// --------------------------------------------------------------------------------
+#pageToc {
+  li {
+    list-style: none;
+  }
+  li::before {
+    content: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' width='6' height='6'><circle cx='256' cy='256' r='256' fill='rgba(#{to-rgb($body-color)},1)'/></svg>");
+    vertical-align: middle;
+    position: relative;
+    left: -0.5rem;
+    top: -0.2rem;
+  }
+}
+
+// --------------------------------------------------------------------------------
+// Alerts (p), announcements (div), and breakingnews (div)
+// --------------------------------------------------------------------------------
+// Breaking News: Use Font Awesome HTML icons (fa-solid fa-bullhorn) for consistent
+//                visual identity across all color variations.
+//                Positioned at page level with sticky positioning.
+//                Excluded from CSS icon styling via .breakingnews class.
+// Announcements: Use Font Awesome HTML icons (fa-solid fa-bullhorn) for consistent
+//                visual identity across all color variations.
+//                Positioned within .content (inside main).
+//                Excluded from CSS icon styling via .announcement class.
+// Alerts:        Use CSS-based SVG icons ($centos-alert-icons map) for markdown-based
+//                alerts within .content, with type-specific icons per color.
+//                Only applied to .alert:not(.announcement) to avoid styling announcements.
+
+$centos-alert-icons: (
+  "primary": url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='1rem' viewBox='0 0 42.333 42.333'><g transform='rotate(45 -180.13 -610.203) scale(1.0529)'><circle cx='388.123' cy='-290.716' r='20.103' style='fill:rgba(#{to-rgb(shade-color(map-get($theme-colors, 'primary'), 60%))},1);stroke:none;stroke-width:1.32292;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:fill markers stroke;stop-color:#{to-rgb(shade-color(map-get($theme-colors, 'primary'), 60%))}'/><path d='M377.366-301.473v6.301l-4.456 4.456 4.456 4.456v6.302h6.302l4.456 4.456 4.456-4.456h6.301v-6.302l4.456-4.456-4.456-4.456v-6.301h-6.301l-4.456-4.456-4.456 4.456zm2.271 4.183 1.913-1.912 3.227 3.227v1.913h-1.912zm-2.163 5.222h4.565l1.352 1.352-1.352 1.353h-4.564zm9.297-9.297h2.705v4.564l-1.352 1.353-1.353-1.353zm.091 7.607 1.261 1.282 1.26-1.283-.015 1.798 1.798-.016-1.282 1.26 1.283 1.261-1.798-.015.016 1.798-1.26-1.282-1.261 1.283.015-1.799-1.798.016 1.282-1.26-1.283-1.26 1.799.015zm-7.225 9.617 3.228-3.228h1.912v1.913l-3.227 3.227zm11.833-11.834 3.228-3.227 1.913 1.912-3.228 3.228h-1.912zm-4.698 11.345 1.352-1.352 1.352 1.352v4.564h-2.704zm6.085-6.085 1.352-1.353h4.564v2.705h-4.564zm-1.387 3.346h1.913l3.228 3.228-1.913 1.912-3.228-3.227z' style='fill:%23fff;fill-opacity:1;stroke-width:9.12808;stroke-linecap:round;paint-order:fill markers stroke;stop-color:%23000'/></g></svg>"),
+  "secondary": url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='1rem' viewBox='0 0 42.333 42.333'><g transform='rotate(45 -180.13 -610.203) scale(1.0529)'><circle cx='388.123' cy='-290.716' r='20.103' style='fill:rgba(#{to-rgb(shade-color(map-get($theme-colors, 'secondary'), 60%))},1);stroke:none;stroke-width:1.32292;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:fill markers stroke;stop-color:#{to-rgb(shade-color(map-get($theme-colors, 'secondary'), 60%))}'/><path d='M377.366-301.473v6.301l-4.456 4.456 4.456 4.456v6.302h6.302l4.456 4.456 4.456-4.456h6.301v-6.302l4.456-4.456-4.456-4.456v-6.301h-6.301l-4.456-4.456-4.456 4.456zm2.271 4.183 1.913-1.912 3.227 3.227v1.913h-1.912zm-2.163 5.222h4.565l1.352 1.352-1.352 1.353h-4.564zm9.297-9.297h2.705v4.564l-1.352 1.353-1.353-1.353zm.091 7.607 1.261 1.282 1.26-1.283-.015 1.798 1.798-.016-1.282 1.26 1.283 1.261-1.798-.015.016 1.798-1.26-1.282-1.261 1.283.015-1.799-1.798.016 1.282-1.26-1.283-1.26 1.799.015zm-7.225 9.617 3.228-3.228h1.912v1.913l-3.227 3.227zm11.833-11.834 3.228-3.227 1.913 1.912-3.228 3.228h-1.912zm-4.698 11.345 1.352-1.352 1.352 1.352v4.564h-2.704zm6.085-6.085 1.352-1.353h4.564v2.705h-4.564zm-1.387 3.346h1.913l3.228 3.228-1.913 1.912-3.228-3.227z' style='fill:%23fff;fill-opacity:1;stroke-width:9.12808;stroke-linecap:round;paint-order:fill markers stroke;stop-color:%23000'/></g></svg>"),
+  "warning": url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='1rem' fill='rgba(#{to-rgb(shade-color(map-get($theme-colors, 'warning'), 60%))},1)' viewBox='0 0 512 512'><path d='M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24V296c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z'/></svg>"),
+  "info": url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='1rem' fill='rgba(#{to-rgb(shade-color(map-get($theme-colors, 'info'), 60%))},1)' viewBox='0 0 512 512'><path d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z'/></svg>"),
+  "danger": url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='1rem' fill='rgba(#{to-rgb(shade-color(map-get($theme-colors, 'danger'), 60%))},1)' viewBox='0 0 512 512'><path d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24V264c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z'/></svg>"),
+  "success": url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='1rem' fill='rgba(#{to-rgb(shade-color(map-get($theme-colors, 'success'), 60%))},1)' viewBox='0 0 512 512'><path d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z'/></svg>"),
+  "light": url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='1rem' fill='rgba(#{to-rgb(shade-color(map-get($theme-colors, 'light'), 60%))},1)' viewBox='0 0 512 512'><path d='M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160V416c0 53 43 96 96 96H352c53 0 96-43 96-96V320c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V160c0-17.7 14.3-32 32-32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H96z'/></svg>"),
+  "dark": url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='1rem' fill='rgba(#{to-rgb(shade-color(map-get($theme-colors, 'dark'), 60%))},1)' viewBox='0 0 512 512'><path d='M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160V416c0 53 43 96 96 96H352c53 0 96-43 96-96V320c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V160c0-17.7 14.3-32 32-32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H96z'/></svg>")
+);
+
+// Breaking news with HTML-based Font Awesome icons
+// Positioned at page level (outside .content)
+.sticky-top-breakingnews {
+  .breakingnews {
+    padding-left: $spacer * 1.25;
+  }
+}
+
+.content {
+  // Markdown-based alerts with CSS-generated icons
+  // Only apply to alerts that are neither announcements nor breaking news
+  .alert:not(.announcement):not(.breakingnews) {
+    padding-left: $spacer * 3;
+    border-left-width: 0.5rem;
+
+    @each $color, $icon-url in $centos-alert-icons {
+      &.alert-#{$color} {
+        &::before {
+          content: "";
+          position: absolute;
+          left: 1rem;
+          top: 1.75rem;
+          transform: translateY(-50%);
+          width: 1.25rem;
+          height: 1.25rem;
+          background-image: #{$icon-url};
+          background-repeat: no-repeat;
+          background-position: center;
+          background-size: contain;
+        }
+      }
+    }
+  }
+}
+
+main {
+  // --------------------------------------------------------------------------------
+  // Navbar and linked headings' correction.
+  //
+  // By default, when you access page headings from the page table of content
+  // (toc) links, the heading is hidden behind the navbar.  This workaround
+  // fixes the linked headings visibility issue in the page.
+  // Also applies the same correction to accordion buttons for consistent behavior.
+  // --------------------------------------------------------------------------------
+  .content > h1,
+  .content > h2,
+  .content > h3,
+  .content > h4,
+  .content > h5,
+  .content > h6 {
+    scroll-margin-top: 80px;
+    scroll-margin-bottom: 100px;
+    margin-top: 3rem;
+  }
+  .content > h2 {
+    border-bottom: 0.35rem solid $primary;
+    padding-bottom: $spacer * 0.5;
+    margin-bottom: $spacer * 0.75;
+  }
+  .content > figure {
+    scroll-margin-top: 80px;
+    scroll-margin-bottom: 100px;
+  }
+
+  // -------------------------------------------------------------------------------
+  // Heading Anchor Component
+  // -------------------------------------------------------------------------------
+  // :has() guard: position context for the anchor icon.
+  // No padding change — the icon translates left of the text start to preserve heading alignment.
+  .content > h1:has(.heading-anchor),
+  .content > h2:has(.heading-anchor),
+  .content > h3:has(.heading-anchor),
+  .content > h4:has(.heading-anchor),
+  .content > h5:has(.heading-anchor),
+  .content > h6:has(.heading-anchor) {
+    position: relative;
+  }
+  .content > h1 .heading-anchor,
+  .content > h2 .heading-anchor,
+  .content > h3 .heading-anchor,
+  .content > h4 .heading-anchor,
+  .content > h5 .heading-anchor,
+  .content > h6 .heading-anchor {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 1lh;
+    display: flex;
+    align-items: center;
+    transform: translateX(-100%);
+    font-size: 1em;
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+    opacity: 0;
+    pointer-events: auto;
+    text-decoration: none;
+  }
+  .content > h1 .heading-anchor > i,
+  .content > h1 .heading-anchor > svg,
+  .content > h2 .heading-anchor > i,
+  .content > h2 .heading-anchor > svg,
+  .content > h3 .heading-anchor > i,
+  .content > h3 .heading-anchor > svg,
+  .content > h4 .heading-anchor > i,
+  .content > h4 .heading-anchor > svg,
+  .content > h5 .heading-anchor > i,
+  .content > h5 .heading-anchor > svg,
+  .content > h6 .heading-anchor > i,
+  .content > h6 .heading-anchor > svg {
+    font-size: 0.5em;
+  }
+  .content > h1:hover .heading-anchor,
+  .content > h2:hover .heading-anchor,
+  .content > h3:hover .heading-anchor,
+  .content > h4:hover .heading-anchor,
+  .content > h5:hover .heading-anchor,
+  .content > h6:hover .heading-anchor,
+  .heading-anchor:focus {
+    opacity: 1;
+  }
+  .heading-anchor.is-active,
+  .heading-anchor.is-active i {
+    opacity: 1 !important;
+    visibility: visible !important;
+    color: var(--bs-primary);
+  }
+
+  // Accordion containers' correction.
+  //
+  // When accessing accordion containers via internal anchor links, they wouldn't be
+  // hidden behind the navbar. This correction ensures accordion containers remain
+  // visible when linked to, and works in conjunction with the dynamic calculation
+  // in head.html.liquid when breaking news is present.
+  //
+  // Note: Applied to .accordion container (not items) to avoid disrupting accordion
+  // item internal layout while still providing proper scroll margin and visual spacing.
+  .content .accordion,
+  .content .accordion-item {
+    scroll-margin-top: 80px;
+    scroll-margin-bottom: 100px;
+  }
+
+  // --------------------------------------------------------------------------------
+  // DataTable BS5 corrections
+  // --------------------------------------------------------------------------------
+  .content { .dt-container { margin-bottom: 1rem; } }
+
+  // --------------------------------------------------------------------------------
+  // Copy Value Component
+  // --------------------------------------------------------------------------------
+  .content {
+    .copy-btn {
+      cursor: pointer;
+      color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
+      text-decoration: none;
+
+      &:hover {
+        --bs-link-color-rgb: var(--bs-link-hover-color-rgb);
+      }
+    }
+
+    .alert .copy-btn {
+      color: var(--bs-alert-link-color);
+    }
+  }
+
+  // --------------------------------------------------------------------------------
+  // Highlightjs-copy
+  // --------------------------------------------------------------------------------
+  .content {
+    code.hljs {
+      border-radius: var(--bs-border-radius-lg);
+    }
+    pre {
+      .hljs {
+        max-height: 50vh;
+        overflow: auto;
+      }
+      .hljs-copy-button {
+        top: 0.2rem;
+        right: 0.2rem;
+        border-radius: var(--bs-border-radius-lg);
+      }
+
+      .hljs-copy-button:not([data-copied="true"])::before {
+        mask-size: 100% 100%;
+      }
+
+      .hljs-copy-button[data-copied='true'] {
+        color: transparent !important;
+        font-size: 0 !important;
+        text-indent: -9999px !important;
+        width: 1.85rem !important; /* Set a fixed width for the button */
+        height: 1.85rem !important; /* Set a fixed height for the button */
+        position: relative !important; /* Required for absolute positioning of the SVG */
+
+      }
+      .hljs-copy-button[data-copied='true']::after {
+        content: "";
+        background-repeat: no-repeat;
+        background-size: contain;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 1rem; /* Adjust icon size as needed */
+        height: 1rem; /* Adjust icon size as needed */
+      }
+      code {
+        border-left: 5px;
+        border-top: 1px;
+        border-right: 1px;
+        border-bottom: 1px;
+        border-color: var(--bs-light-border-subtle);
+        border-style: solid;
+      }
+    }
+  }
+}

data/_sass/base/_light-dark.scss

@@ -0,0 +1,10 @@
+// Auto-generated from saturation-normalized shade algorithm
+// DO NOT EDIT: This file is generated by generate-scss-light-dark.py
+// Source: centos-purple (#A14F8C)
+// Generated: Shade 50 → $light, Shade 950 → $dark
+//
+// To regenerate after color changes, run:
+//   python3 scripts/colors/generate-scss-light-dark.py
+
+$light: #F6EDF4;  // centos-purple-50: reduced saturation (~60%), high lightness (~95%)
+$dark:  #22061B;   // centos-purple-950: enhanced saturation (100%), low lightness (8%)