jekyll-theme-centos 2.2.21 → 2.3.0.beta.1

data/_includes/blog/header.html

@@ -0,0 +1,22 @@
+<header class="header header__blog">
+
+  {% if paginator.previous_page_path %}
+  <a href="{{ paginator.previous_page_path }}"><div class="header__blog__older"><i class="fas fa-arrow-left"></i></div></a>
+  {% else %}
+  <div class="header__blog__older header__blog__older--disabled"><i class="fas fa-arrow-left"></i></div>
+  {% endif %}
+
+  <section class="header__blog__present">
+    <h1 class="header__blog__title">{{ page.title }}</h1>
+    <p class="header__blog__description">{{ page.title_lead }}</p>
+  </section>
+
+  {% if paginator.next_page_path %}
+  <a href="{{ paginator.next_page_path }}"><div class="header__blog__newer"><i class="fas fa-arrow-right"></i></div></a>
+  {% else %}
+  <div class="header__blog__newer header__blog__newer--disabled"><i class="fas fa-arrow-right"></i></div>
+  {% endif %}
+
+</header>
+
+{% include hr.html %}

data/_includes/breadcrumbs.html

@@ -0,0 +1,13 @@
+<nav aria-label="breadcrumb">
+<ol class="breadcrumb">
+  {% assign crumbs = page.url | remove:'/index.html' | split: '/' %}
+  <li class="breadcrumb-item"><a href="{{ site.baseurl }}">Home</a></li>
+  {% for crumb in crumbs offset: 1 %}
+    {% if forloop.last %}
+      <li class="breadcrumb-item active">{{ page.title }}</li>
+    {% else %}
+      <li class="breadcrumb-item"><a href="{{ site.baseurl }}{% assign crumb_limit = forloop.index | plus: 1 %}{% for crumb in crumbs limit: crumb_limit %}{{ crumb | append: '/' | replace:'without-plugin/','without-plugins/' }}{% endfor %}">{{ crumb | replace:'-',' ' | remove:'.html' | capitalize }}</a></li>
+    {% endif %}
+  {% endfor %}
+</ol>
+</nav>

data/_includes/default/alert-danger.html

@@ -0,0 +1,4 @@
+<div class="alert alert-danger" role="alert">
+  <p class="title"><i class="fas fa-minus-circle"></i> Caution:</p>
+  <p>{{ include.content }}</p>
+</div>

data/_includes/default/alert-info.html

@@ -0,0 +1,4 @@
+<div class="alert alert-info" role="alert">
+  <p class="title"><i class="fas fa-clipboard"></i> Note:</p>
+  <p>{{ include.content }}</p>
+</div>

data/_includes/default/alert-success.html

@@ -0,0 +1,4 @@
+<div class="alert alert-success" role="alert">
+  <p class="title"><i class="fas fa-lightbulb"></i> Idea:</p>
+  <p>{{ include.content }}</p>
+</div>

data/_includes/default/alert-warning.html

@@ -0,0 +1,4 @@
+<div class="alert alert-warning" role="alert">
+  <p class="title"><i class="fas fa-exclamation-triangle"></i> Warning:</p>
+  <p>{{ include.content }}</p>
+</div>

data/_includes/default/figure.html

@@ -0,0 +1,3 @@
+<figure class="figure">
+  <img src="{{ include.src }}" alt="{{ include.alt | escape }}">
+</figure>

data/_includes/default/header.html

@@ -0,0 +1,10 @@
+<div class="bg-dark" style="background: url({{ site.baseurl }}/assets/img/centos-motif.png) right center / cover;">
+  <div class="container py-5 text-light">
+    <div class="row mb-5">
+    <div class="col">
+      <div class="display-4 my-4 fw-bold">{{ page.title }}</div>
+      <div class="lead">{{ page.title_lead }}</div>
+    </div>
+    </div>
+  </div>
+</div>

data/_includes/default/video.html

@@ -0,0 +1,3 @@
+<div class="video">
+  <iframe class="embed-responsive-item" src="{{ include.src }}" allowfullscreen></iframe>
+</div>

data/_includes/download/cards-body-convert.html

@@ -1,10 +1,12 @@
+{% capture code %}```sh
+{{ row["commands"] | lstrip }}
+```{% endcapture %}
+
 <tr>
   <td>
-    {% if row.commands != "" %}
-    <div class="input-group">
-      <textarea id="{{ card.page }}-{{ release[0] }}-key-{{ forloop.index }}" class="form-control font-monospace" placeholder="{{ row.overview }}" aria-label="{{ row.overview }}" aria-describedby="{{ card.page }}-button-{{ forloop.index }}" readonly rows="2">{{ row.commands }}</textarea>
-      <button id="{{ card.page }}-{{ release[0] }}-button-{{ forloop.index }}" class="btn btn-clipboard" type="button" aria-label="Copy to clipboard" data-clipboard-target="#{{ card.page }}-{{ release[0] }}-key-{{ forloop.index }}" data-bs-toggle="tooltip" data-bs-title="Copy to clipboard"><i class="fa-solid fa-clipboard"></i></button>
-    </div>
-    {% endif %}
+{% if row["commands"] != "" %}
+{{ code | markdownify }}
+{% endif %}
   </td>
 </tr>
+

data/_includes/download/cards-body-doc.html

@@ -1,9 +1,6 @@
 <tr>
-  <td>
-      {% for rows in release %}
-      {% for row in rows.docs %}
-      <a class="btn btn-sm btn-primary{% if row.name == "" %} disabled" aria-disabled="true"{% else %}" href="{{ row.link }}"{% endif %} role="button"><i class="fa-solid fa-file"></i> {{ row.name }}</a>
-      {% endfor %}
-      {% endfor %}
-  </td>
+  <td>{% if row["release_notes"] != "" %}<a href="{{ row['release_notes'] }}">Release Notes</a>{% else %}Release Notes{% endif %}
+    | {% if row["release_email"] != "" %}<a href="{{ row['release_email'] }}">Release Email</a>{% else %}Release Email{% endif %}
+    | {% if row["website"] != "" %}<a href="{{ row['website'] }}">Website</a>{% else %}Website{% endif %}</td>
 </tr>
+

data/_includes/download/cards-body-eol.html

@@ -1,16 +1,7 @@
 <tr>
   <td>
-    {% if row.overview != "" %}
-    {{ row.overview }}
-    {% endif %}
-
-    {% if row.date != "" %}
-    {{ row.date | date_to_string: "ordinal", "US" }}
-    {% endif %}
-
-    {% if row.url != "" %}
-    <a href="{{ row.url }}"><i class="fas fa-exclamation-circle"></i> Know more</a>
-    {% else %}
-    {% endif %}
-  </td>
+    {% if row["overview"] != "" %}{{ row['overview'] }} {% endif %}
+    {% if row["date"] != "" %}{{ row['date'] | date_to_string: "ordinal", "US" }} {% endif %}
+    {% if row["url"] != "" %}<a href="{{ row['url'] }}"><i class="fas fa-exclamation-circle"></i></a>{% endif %}
+    </td>
 </tr>

data/_includes/download/cards-body.html

@@ -1,8 +1,7 @@
 <tr>
-  <td>{{ row.arch }}</td>
-  <td><a class="btn btn-sm btn-primary{% if row.iso] == "" %} disabled" aria-disabled="true"{% else %}" href="{{ row.iso }}"{% endif %} role="button"><i class="fa-solid fa-download"></i> Download</a></td>
-  <td><a class="btn btn-sm btn-primary{% if row.rpm] == "" %} disabled" aria-disabled="true"{% else %}" href="{{ row.rpm }}"{% endif %} role="button"><i class="fa-solid fa-download"></i> Download</a></td>
-  <td><a class="btn btn-sm btn-primary{% if row.cloud] == "" %} disabled" aria-disabled="true"{% else %}" href="{{ row.cloud }}"{% endif %} role="button"><i class="fa-solid fa-download"></i> Download</a></td>
-  <td><a class="btn btn-sm btn-primary{% if row.containers] == "" %} disabled" aria-disabled="true"{% else %}" href="{{ row.containers }}"{% endif %} role="button"><i class="fa-solid fa-download"></i> Download</a></td>
-  <td><a class="btn btn-sm btn-primary{% if row.vagrant] == "" %} disabled" aria-disabled="true"{% else %}" href="{{ row.vagrant }}"{% endif %} role="button"><i class="fa-solid fa-download"></i> Download</a></td>
+  <td><a href="{{ row['iso'] }}"> {{ row['arch'] }}</a></td>
+  <td>{% if row["rpm"] != "" %}<a href="{{ row['rpm'] }}"> RPMs</a>{% else %}RPMs{% endif %}</td>
+  <td>{% if row["cloud"] != "" %}<a href="{{ row['cloud'] }}">Cloud</a>{% else %}Cloud{% endif %}
+    | {% if row["containers"] != "" %}<a href="{{ row['containers'] }}">Containers</a>{% else %}Containers{% endif %}
+    | {% if row["vagrant"] != "" %}<a href="{{ row['vagrant'] }}">Vagrant</a>{% else %}Vagrant{% endif %}</td>
 </tr>

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

@@ -1,8 +1,9 @@
 <div class="table-responsive">
-  <table class="table mb-0">
-    <thead class="table-light">
-      <tr>
-        <th scope="col"><i class="fas fa-sync-alt"></i> {{ row.overview }}</th>
-      </tr>
-    </thead>
-    <tbody>
+<table class="table">
+<thead>
+  <tr>
+    <th scope="col"><i class="fas fa-sync-alt"></i> {{ row["overview"] }}</th>
+  </tr>
+</thead>
+<tbody>
+

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

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

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

@@ -1,8 +1,9 @@
 <div class="table-responsive">
-  <table class="table mb-0">
-    <thead class="table-light">
-      <tr>
-        <th scope="col"><i class="fas fa-hourglass-end"></i> End-of-life</th>
-      </tr>
-    </thead>
-    <tbody>
+<table class="table">
+<thead>
+  <tr>
+    <th scope="col"><i class="fas fa-hourglass-end"></i> End-of-life</th>
+  </tr>
+</thead>
+<tbody>
+

data/_includes/download/cards-header.html

@@ -1,13 +1,11 @@
 <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>
+<table class="table">
+<thead>
+  <tr>
+    <th scope="col"><i class="fas fa-microchip"></i> Architectures</th>
+    <th scope="col">Packages</th>
+    <th scope="col">Others</th>
+  </tr>
+</thead>
+<tbody>
+

data/_includes/download/cards.html

@@ -1,58 +1,63 @@
-{% assign cards = site.data.download.cards %}
-
-{% for card in cards %}
-<div class="mb-5">
-  <h1>{{ card.name }}</h1>
-  <p>{{ card.description }}</p>
-  <ul class="nav nav-pills my-3 justify-content-start" id="pills-{{ card.page }}-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="pills-{{ card.page }}-release-{{ forloop.index }}-tab" data-bs-toggle="tab" data-bs-target="#pills-{{ card.page }}-release-{{ forloop.index }}" type="button" role="tab" aria-controls="pills-{{ forloop.index }}-release-{{ release[0] }}-tab" {% if forloop.first %} aria-selected="true" {% endif %}>{{ release[0] }}</button>
-    </li>
+{% if include.distribution %}
+{% assign cards = site.data.centos.distributions | where: "page", include.distribution %}
+{% else %}
+{% assign cards = site.data.centos.distributions %}
+{% endif %}
+
+<div class="download__content__card">
+  <div class="download__content__card__header">
+    <ul class="nav nav-pills card-header-pills flex-column flex-sm-row">
+    {% for item in cards %}
+    <li class="nav-item flex-sm-fill text-sm-center"><a class="nav-link{% if forloop.first %} active{% endif %}" role="tab" data-toggle="tab" href="#{{ item.page }}">{{ item.name }}</a></li>
     {% endfor %}
-  </ul>
-
-  <div class="tab-content mb-3" id="pills-{{ card.page }}-tabContent">
-    {% for release in card.releases %}
-    <div class="tab-pane fade {% if forloop.first %} show active{% endif %}" id="pills-{{ card.page }}-release-{{ forloop.index }}" role="tabpanel" aria-labelledby="pills-{{ card.page }}-release-{{ forloop.index }}-tab" tabindex="{{ forloop.index }}">
-      {% for rows in release %}
-      {% if rows.screenshots.size > 0 %}
-      {% include download/cards-header-screenshot.html %}
-      {% include download/cards-body-screenshot.html %}
-      {% include download/cards-footer.html %}
-      {% endif %}
-      {% endfor %}
-
-
-      {% include download/cards-header.html %}
-      {% for rows in release %}
-      {% for row in rows.downloads %}
-      {% include download/cards-body.html %}
-      {% endfor %}
-      {% endfor %}
-      {% include download/cards-footer.html %}
-
-      {% include download/cards-header-doc.html %}
-      {% include download/cards-body-doc.html %}
-      {% include download/cards-footer.html %}
-
-      {% 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 %}
-
-      {% for rows in release %}
-      {% for row in rows.convert %}
-      {% include download/cards-header-convert.html %}
-      {% include download/cards-body-convert.html %}
-      {% include download/cards-footer.html %}
-      {% endfor %}
-      {% endfor %}
+    </ul>
+  </div>
+  <div class="download__content__card__body tab-content">
+    {% for item in cards %}
+    <div class="tab-pane{% if forloop.first %} active{% endif %}" role="tabpanel" id="{{ item.page }}">
+
+      <div class="download__content__card">
+        <div class="download__content__card__header">
+          <ul class="nav nav-pills card-header-pills flex-column flex-sm-row">
+            {% for release in item.releases %}
+            <li class="nav-item flex-sm-fill text-sm-center"><a class="nav-link{% if forloop.first %} active{% endif %}" role="tab" data-toggle="tab" href="#{{ item.page }}-{{ release[0] }}">{{ release[0] }}</a></li>
+            {% endfor %}
+          </ul>
+        </div>
+
+        <div class="download__content__card__body tab-content">
+            {% for release in item.releases %}
+            <div class="tab-pane{% if forloop.first %} active{% endif %}" role="tabpanel" id="{{ item.page }}-{{ release[0] }}">
+            {% include download/cards-header.html %}
+            {% for row in release[1].downloads %}
+            {% include download/cards-body.html %}
+            {% endfor %}
+            {% include download/cards-footer.html %}
+
+            {% include download/cards-header-doc.html %}
+            {% for row in release[1].docs %}
+            {% include download/cards-body-doc.html %}
+            {% endfor %}
+            {% include download/cards-footer.html %}
+
+            {% include download/cards-header-eol.html %}
+            {% for row in release[1].eol %}
+            {% include download/cards-body-eol.html %}
+            {% endfor %}
+            {% include download/cards-footer.html %}
+
+            {% for row in release[1].convert %}
+            {% include download/cards-header-convert.html %}
+            {% include download/cards-body-convert.html %}
+            {% include download/cards-footer.html %}
+            {% endfor %}
+
+            </div>
+            {% endfor %}
+        </div>
+      </div>
+
     </div>
     {% endfor %}
   </div>
 </div>
-{% endfor %}

data/_includes/editbar.html

@@ -0,0 +1,43 @@
+<!-- Button trigger modal -->
+<button type="button" class="btn btn-sm btn-light" data-bs-toggle="modal" data-bs-target="#modalEditThisPage"><i class="fa-sharp fa-solid fa-pen-to-square"></i> Edit</button>
+<button type="button" class="btn btn-sm btn-light" data-bs-toggle="modal" data-bs-target="#modalReportAnIssue"><i class="fa-solid fa-bug"></i> Report an issue</button>
+
+<!-- Modal: Edit this page -->
+<div class="modal fade" id="modalEditThisPage" data-bs-keyboard="true" data-bs-keyboard="false" tabindex="-1" aria-labelledby="modalEditThisPageLabel" aria-hidden="true">
+  <div class="modal-dialog modal-lg">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h1 class="modal-title fs-5" id="modalEditThisPageLabel">Edit this page</h1>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body text-start">
+        <p>Praesent fermentum tempor tellus.  Nullam tempus.  Mauris ac felis vel velit tristique imperdiet.  Donec at pede.  Etiam vel neque nec dui dignissim bibendum.  Vivamus id enim.  Phasellus neque orci, porta a, aliquet quis, semper a, massa.  Phasellus purus.  Pellentesque tristique imperdiet tortor.  Nam euismod tellus id erat.  Nullam eu ante vel est convallis dignissim.  Fusce suscipit, wisi nec facilisis facilisis, est dui fermentum leo, quis tempor ligula erat quis odio.</p>
+        <pre>
+git clone git.centos.org/centos/centos.org/
+        <pre>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Modal: Report an issue -->
+<div class="modal fade" id="modalReportAnIssue" data-bs-keyboard="true" data-bs-keyboard="false" tabindex="-1" aria-labelledby="modalReportAnIssueLabel" aria-hidden="true">
+  <div class="modal-dialog modal-lg">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h1 class="modal-title fs-5" id="modalReportAnIssueLabel">Report an issue</h1>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body text-start">
+        <p>Praesent fermentum tempor tellus.  Nullam tempus.  Mauris ac felis vel velit tristique imperdiet.  Donec at pede.  Etiam vel neque nec dui dignissim bibendum.  Vivamus id enim.  Phasellus neque orci, porta a, aliquet quis, semper a, massa.  Phasellus purus.  Pellentesque tristique imperdiet tortor.  Nam euismod tellus id erat.  Nullam eu ante vel est convallis dignissim.  Fusce suscipit, wisi nec facilisis facilisis, est dui fermentum leo, quis tempor ligula erat quis odio.</p>
+        <p>Praesent fermentum tempor tellus.  Nullam tempus.  Mauris ac felis vel velit tristique imperdiet.  Donec at pede.  Etiam vel neque nec dui dignissim bibendum.  Vivamus id enim.  Phasellus neque orci, porta a, aliquet quis, semper a, massa.  Phasellus purus.  Pellentesque tristique imperdiet tortor.  Nam euismod tellus id erat.  Nullam eu ante vel est convallis dignissim.  Fusce suscipit, wisi nec facilisis facilisis, est dui fermentum leo, quis tempor ligula erat quis odio.</p>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+      </div>
+    </div>
+  </div>
+</div>

data/_includes/footer.html

@@ -0,0 +1,36 @@
+<footer class="footer pt-3 bg-dark small text-light" style="background: url({{ site.baseurl }}/assets/img/centos-motif.png) right center / cover;">
+
+<div class="container">
+  <div class="row justify-content-between mt-4 pt-4">
+    <div class="col-lg-3 mb-5">
+      <a class="navbar-brand" href="{{ site.baseurl }}/{{ site.data.centos.identity.logo.link }}"><img role="img" src="{{ site.baseurl }}/{{ site.data.centos.identity.logo.navbar }}" height="32" alt="{{ site.title }}"><span class="manifestation">{{ site.data.centos.identity.logo.manifestation }}</span></a>
+      <p class="my-3">{{ site.description }}</p>
+      <ul class="nav list-unstyled d-flex">
+        {% for item in site.data.centos.footer.social %}
+        <li class="nav-item me-4 fs-5"><a href="{{ item.link }}" role="button" aria-label="{{ item.name }}" class="link-light"><i class="{{ item.icon }}"></i></a></li>
+        {% endfor %}
+      </ul>
+    </div>
+
+    {% if site.data.centos.footer.columns %}
+    {% for column in site.data.centos.footer.columns %}
+    {% assign links = site.data.centos.navbar | where: "name", column %}
+    {% for section in links %}
+    <div class="col-sm-12 col-lg-3 mb-3">
+      <h6 class="text-uppercase fw-bold">{{ section.name }}</h6>
+      <ul class="nav flex-column">
+        {% for item in section.menu %}
+        <li class="nav-item my-1"><a href="{{ item.link }}" class="px-0 link-light">{{ item.name }}</a></li>
+        {% endfor %}
+      </ul>
+    </div>
+    {% endfor %}
+    {% endfor %}
+    {% endif %}
+  </div>
+
+  <div class="row pt-5">
+    <div class="col">Copyright &copy; {{ site.time | date: "%Y" }} {{ site.data.centos.footer.copyright.author }} {% for item in site.data.centos.footer.copyright.legals %} | <span class="nav-item"><a href="{{ item.link }}" class="link-light">{{ item.text }}</a></span>{% endfor %}</p></div>
+  </div>
+
+</footer>

data/_includes/head-datatables.html

@@ -0,0 +1,8 @@
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <title>{{ page.title }}</title>
+    <link rel="icon" type="image/png" sizes="16x16" href="{{ site.baseurl }}/assets/img/favicon.png">
+    <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/stylesheet.css">
+    <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/dataTables.bootstrap5.min.css">
+</head>

data/_includes/head.html

@@ -0,0 +1,7 @@
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <title>{{ page.title }}</title>
+    {% favicons %}
+    <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/stylesheet.min.css">
+</head>

data/_includes/header.html

@@ -0,0 +1,7 @@
+{% if page.layout == "home" %}
+{% include home/header.html %}
+{% elsif page.layout == "blog" %}
+{% include blog/header.html %}
+{% else %}
+{% include default/header.html %}
+{% endif %}

data/_includes/home/header.html

@@ -1,4 +1,4 @@
-<div class="bg-image bg-dark text-light">
+<div class="bg-dark py-5" style="background: url({{ site.baseurl }}/assets/img/centos-motif.png) right center / cover;">
   <div class="container py-5 text-white text-center">
     <div class="row">
       <div class="col">

data/_includes/home/planet.html

@@ -3,15 +3,16 @@
 <div class="container text-center mt-5 mb-5">
   <div class="row">
     <div class="col">
-      <div class="display-6"><i class="fa-solid fa-globe"></i></div>
-      <div class="display-6">Blob posts</div>
+    <div class="display-6"><i class="fa-solid fa-globe"></i></div>
+    <div class="display-6">Blob posts</div>
     </div>
   </div>
 
   <div class="row mt-3 text-start">
     <div class="col">
       <div class="list-group shadow mb-3">
-        {% for i in entries limit:5 %} {%- assign date_format = site.date_format | default: "%b %-d, %Y" -%}
+        {% for i in entries limit:5 %}
+        {%- assign date_format = site.date_format | default: "%b %-d, %Y" -%}
         <a href="{{ i.link }}" class="list-group-item list-group-item-action">
           <div class="d-flex gap-2w-100 justify-content-between">
             <h5 class="pt-0 mt-1 mb-1 fw-bold text-primary">{{ i.title }}</h5>
@@ -23,4 +24,6 @@
       </div>
     </div>
   </div>
+
+  </div>
 </div>

data/_includes/navbar.html

@@ -0,0 +1,28 @@
+<header class="site-header sticky-top">
+<nav class="navbar navbar-expand-lg navbar-dark bg-dark p-3 shadow">
+  <div class="container">
+    <a class="navbar-brand" href="{{ site.baseurl }}/{{ site.data.centos.identity.logo.link }}"><img role="img" src="{{ site.baseurl }}/{{ site.data.centos.identity.logo.navbar }}" height="32" alt="{{ site.title }}"><span class="manifestation">{{ site.data.centos.identity.logo.manifestation }}</span></a>
+    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="collapse navbar-collapse flex-grow-0" id="navbarSupportedContent">
+      <ul class="navbar-nav">
+        {%- for nav-item in site.data.centos.navbar -%}
+        {% if nav-item.menu.size == 0 %}
+        <li class="nav-item"><a class="nav-link" role="presentation" href="{{ nav-item.link }}"><i class="{{ nav-item.icon }}"></i> {{ nav-item.name }}</a></li>
+        {% else -%}
+        <li class="nav-item dropdown">
+          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown-{{ forloop.index }}" role="button" data-bs-toggle="dropdown" aria-expanded="false"><i class="{{ nav-item.icon }}"></i> {{ nav-item.name }}</a>
+          <ul class="dropdown-menu dropdown-menu-dark shadow" aria-labelledby="navbarDropdown-{{ forloop.index }}">
+            {%- for dropdown-item in nav-item.menu -%}
+            <li><a class="dropdown-item" role="presentation" href="{{ dropdown-item.link }}">{{ dropdown-item.name }}</a> </li>
+            {% endfor -%}
+          </ul>
+        </li>
+        {% endif %}
+        {%- endfor -%}
+        </ul>
+    </div>
+  </div>
+</nav>
+</header>

data/_includes/people/about.html

@@ -1,25 +1,25 @@
 {% if page.about.section.visible == true %}
-<div class="container py-5 text-center border-top{% if page.about.section.highlight == true %} bg-light-radial-gradient{% endif %}">
+<div class="container py-5 text-center border-top"{% if page.about.section.highlight == true %} style="background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(248,249,250,0) 100%);"{% endif %}>
+
   <div class="row">
     <div class="col">
-      {% if page.about.section.icon %}
-      <div class="display-6"><i class="{{ page.about.section.icon }}"></i></div>
-      {% endif %} {% if page.about.section.name %}
-      <div class="display-6 fw-bold">{{ page.about.section.name }}</div>
-      {% endif %} {% if page.about.section.preamble %}
-      <p>{{ page.about.section.preamble }}</p>
-      {% endif %}
+      {% if page.about.section.icon %}<div class="display-6">{{ page.about.section.icon }}</div>{% endif %}
+      {% if page.about.section.name %}<div class="display-6">{{ page.about.section.name }}</div>{% endif %}
+      {% if page.about.section.preamble %}<p>{{ page.about.section.preamble }}</p>{% endif %}
     </div>
   </div>
 
   <div class="row mt-3">
     <div class="col">
-      {% if page.about.content.size > 0 %} {% for p in page.about.content %}
+      {% if page.about.content.size > 0 %}
+      {% for p in page.about.content %}
       <p>{{ p }}</p>
-      {% endfor %} {% else %}
+      {% endfor %}
+      {% else %}
       <div class="alert alert-light border shadow" role="alert">Nothing posted here, yet.</div>
       {% endif %}
     </div>
   </div>
+
 </div>
 {% endif %}

data/_includes/people/header.html

@@ -1,8 +1,8 @@
-<div class="bg-dark bg-image">
+<div class="bg-dark p-5" style="background: url({{ site.baseurl }}/assets/img/centos-motif.png) right center / cover;">
   <div class="container p-5 text-white text-center">
     <div class="row">
       <div class="col">
-        <img class="rounded-circle shadow img-fluid" width="250" src="{{ site.baseurl }}/assets/img/people/{{ page.username }}.svg" alt="{{ page.username }}" />
+        <img class="rounded-circle shadow img-fluid" width="250" src="{{ site.baseurl }}/assets/img/people/{{ page.username }}.png" alt="{{ page.username }}" />
         <h1 class="display-1 fw-bold">{{ page.username }}</h1>
         <p class="lead">{{ page.fullname }}</p>
       </div>