jekyll-theme-centos 0.9.20221031122647 → 2.0.9

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3fab7300dae51863c74a9df317c6041ae77ba8a211fb1a3913483db501b04893
-  data.tar.gz: 68dc1225abfbe0a99edb83de26ded9d20578c6391a26904b6ce890152756a8b4
+  metadata.gz: 29c900c119123f8971904845bdba7deb46d38f364cf3bbb6b2e9f1dfc0a8696e
+  data.tar.gz: f29ff30e9928b2fbba999a39445e2cd0843d376d99373079c229aaf7049510d0
 SHA512:
-  metadata.gz: ab34e5166b0f7cd1295bbbf42613e0ab44a34d6c2b84f4981646f594d718f448d42a6d25f4d679e51fdaa0d102bdd9668eb2a89248c0ca63dba20f9bf5d67bc3
-  data.tar.gz: 2e21e5947f3418772ac07a93633660ae0533a548fd866df2c066289853e2dd26438937055a626b27a2118fb00a1f7df7b4312aec1182349a061166a6ed971488
+  metadata.gz: 4b24a6cc7d57c1872aabe52efc1b832f035a1547834afe079bf5627c75ef013c735c8e4bdf353abf84661d25aa93e59a665035275167d9c0ad6775cc320f3f28
+  data.tar.gz: 24e7e1ec8f526de06804a09ef50c850f4d2556123105abc6566bd9ab03c193f6fd24764c0744acac8bc8e35f44b38401f827ae7b1fdb907eacf25b3521b94303

data/_includes/breadcrumbs.html

@@ -1,6 +1,7 @@
+<nav aria-label="breadcrumb">
 <ol class="breadcrumb">
   {% assign crumbs = page.url | remove:'/index.html' | split: '/' %}
-      <li class="breadcrumb-item"><a href="/">Home</a></li>
+  <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>
@@ -9,3 +10,4 @@
     {% endif %}
   {% endfor %}
 </ol>
+</nav>

data/_includes/default/header.html

@@ -0,0 +1,2 @@
+<h1 class="display-4 fw-bold">{{ page.title }}</h1>
+<p class="lead">{{ page.title_lead }}</p>

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

@@ -1,66 +1,36 @@
-{% include hr.html %}
-
-<footer class="footer">
-    <div class="container">
-      <div class="row">
-        <section class="sponsor">
-          <div class="sponsor__message">
-          <h6><i class="fas fa-hand-holding-heart"></i> Sponsors</h6>
-          <p>CentOS would not be possible without the support of our sponsors. We would like to thank the following product/service for being a CentOS sponsor. If you value our work, please consider <a href="/sponsors">becoming a sponsor</a>!</p>
-          </div>
-
-          <div class="sponsor__logo">
-          <div class="carousel">
-          <div class="card">
-          <div class="carousel slide carousel-fade" data-ride="carousel" id="carousel-1">
-            <div class="carousel-inner" role="listbox">
-            {% for sponsor in site.sponsors %}
-            <div class="carousel-item {{ sponsor.status }}"><a href="{{ sponsor.address }}" rel="nofollow"><img class="img-fluid" src="{{ sponsor.logo }}"></a></div>
-            {% endfor %}
-            </div>
-            </div>
-          </div>
-          </div>
-          </div>
-        </section>
-      </div>
-      <div class="row">
-
-        {% 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 %}
-        <section class="links">
-          <h6><i class="{{ section.icon }}"></i> {{ section.name }}</h6>
-          <ul>
-            {% for item in section.menu %}
-            <li><a href="{{ item.link }}">{{ item.name }}</a></li>
-            {% endfor %}
-          </ul>
-        </section>
+<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 %}
-        {% endfor %}
-        {% endif %}
-
-        <section class="project">
-          <h4>{{ site.title }}</h4>
-          <p class="lead">{{ site.description }}</p>
-          <div class="lead social">
-            {% for item in site.data.centos.footer.social %}
-            <a href="{{ item.link }}"><i class="{{ item.icon }}"></i></a>
-            {% endfor %}
-          </div>
-        </section>
-
-      </div>
-
-      <div class="row">
-        <section class="copyright">
-          <p>Copyright &copy; {{ site.time | date: "%Y" }} {{ site.data.centos.footer.copyright.author }} {% for item in site.data.centos.footer.copyright.legals %} | <a href="{{ item.link }}">{{ item.text }}</a>{% endfor %}</p>
-        </section>
-      </div>
+      </ul>
     </div>
 
-    {% include top.html %}
+    {% 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="/assets/img/favicon.png">
+    <link rel="stylesheet" href="/assets/css/stylesheet.css">
+    <link rel="stylesheet" href="/assets/css/dataTables.bootstrap5.min.css">
+</head>

data/_includes/head.html

@@ -2,6 +2,6 @@
     <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="/assets/img/favicon.png">
-    <link rel="stylesheet" href="/assets/css/centos.bootstrap.min.css">
+    <link rel="icon" type="image/png" sizes="16x16" href="{{ site.baseurl }}/assets/img/favicon.png">
+    <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/stylesheet.min.css">
 </head>

data/_includes/header.html

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

data/_includes/home/distributions.html

@@ -1,10 +1,26 @@
-  {% for item in site.data.centos.distributions %}
-  <div class="card">
-  <a class="btn" role="button" href="{{ item.page }}">
-    <div class="card-body">
-    <h2 class="card-title">{{ item.name }}</h2>
-    <p class="card-text">{{ item.description }}</p>
+<div class="container py-5 text-center">
+
+  <div class="row">
+    <div class="col">
+      <div class="display-5">Linux distributions</div>
+      <p>We offer two Linux variants:</p>
     </div>
-  </a>
   </div>
-  {% endfor %}
+
+  <div class="row">
+    {% for item in site.data.centos.distributions limit:2 %}
+    <div class="col-sm-6 px-5 mb-3{% if forloop.first %} border-end{% endif %}">
+      <img role="img" src="{{ site.baseurl }}/{{ site.data.centos.identity.symbol.image }}" height="64" alt="{{ site.title }}">
+      <h3 class="display-6 fw-bold"><a href="{{ item.page }}">{{ item.name }}</a></h3>
+      <p class="lead">{{ item.description }}</p>
+    </div>
+    {% endfor%}
+  </div>
+
+  <div class="row">
+    <div class="col">
+      <p><a href="cl-vs-cs">What's the difference?</a></p>
+    </div>
+  </div>
+
+</div>

data/_includes/home/header.html

@@ -0,0 +1,10 @@
+<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">
+        <h1 class="display-1 fw-bold">{{ site.title }}</h1>
+        <p class="lead">{{ site.description }}</p>
+      </div>
+    </div>
+  </div>
+</div>

data/_includes/home/news-and-events.html

@@ -1,18 +1,32 @@
-<section id="news-and-events" class="home__news-and-events">
+{% assign entries = site.posts | where: "category", "news-and-events" %}
 
-  <h2 class="home__news-and-events__title">News and events</h2>
+<div class="container text-center">
 
-  <div class="home__news-and-events__content">
-{% assign blog_posts = site.posts | where: "category", "news-and-events" %}
-{% for i in blog_posts limit:5 %}
-{%- assign date_format = site.date_format | default: "%b %-d, %Y" -%}
-  <a class="btn" role="button" href="{{ i.url }}">
-  <div class="card">
-  <h3 class="card-title">{{ i.title }}</h3>
-  <div class="card-body">{{ i.date | date: date_format }} &mdash; {{ i.excerpt | strip_html }}</div>
+  <div class="row">
+    <div class="col">
+      <div class="display-6"><i class="fa-solid fa-calendar-days"></i></div>
+      <div class="display-6">News and Events</div>
+    </div>
   </div>
-  </a>
-{% endfor %}
+
+  <div class="row">
+    <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" -%}
+        <a href="{{ i.link }}" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
+          <i class="text-primary mt-2 fa-solid fa-calendar-days"></i>
+          <div class="d-flex gap-2 w-100 justify-content-between">
+            <div class="text-start">
+              <h5 class="text-primary">{{ i.title }}</h5>
+              <p class="opacity-75">{{ i.excerpt | strip_html | slice: 0,150 }}...</p>
+            </div>
+            <small class="opacity-50 text-nowrap">{{ i.date | date: date_format }}</small>
+          </div>
+        </a>
+        {% endfor %}
+      </div>
+    </div>
   </div>
 
-</section>
+</div>

data/_includes/home/planet.html

@@ -1,18 +1,30 @@
-<section id="around-centos" class="home__planet">
+{% assign entries = site.data.centos.planet %}
 
-  <h2 class="home__planet__title">Around CentOS</h2>
-
-  <div class="home__planet__content">
-  {% assign entries = site.data.centos.planet %}
-  {% for i in entries limit:5 %}
-  {%- assign date_format = site.date_format | default: "%b %-d, %Y" -%}
-  <a class="btn" role="button" href="{{ i.link }}">
-  <div class="card">
-  <h3 class="card-title">{{ i.title }}</h3>
-  <div class="card-body">{{ i.published | date: date_format }} &mdash; {{ i.summary | strip_html | slice: 0,150 }}...</div>
-  </div>
-  </a>
-{% endfor %}
+<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>
   </div>
+  <div class="row">
+    <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" -%}
+        <a href="{{ i.link }}" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
+        <i class="text-primary mt-2 fa-solid fa-globe"></i>
+        <div class="d-flex gap-2 w-100 justify-content-between">
+        <div class="text-start">
+          <h5 class="text-primary">{{ i.title }}</h5>
+          <p class="opacity-75">{{ i.summary | strip_html | slice: 0,150 }}...</p>
+        </div>
+        <small class="opacity-50 text-nowrap">{{ i.published | date: date_format }}</small>
+        </div>
+        </a>
+        {% endfor %}
+      </div>
+    </div>
 
-</section>
+  </div>
+</div>

data/_includes/home/sponsors.html

@@ -1,19 +1,64 @@
-<section class="home__content__sponsors">
+{% assign sponsors_limit = 65 %}
 
-  <h2>Sponsors</h2>
+<div class="container text-center mt-5 mb-5">
 
-  <div class="carousel">
-  <p>CentOS would not be possible without the support of our sponsors. We would like to thank the following product/service for being a CentOS sponsor:</p>
-  <div class="card">
-  <div class="carousel slide carousel-fade" data-ride="carousel" id="carousel-1">
-      <div class="carousel-inner" role="listbox">
-      {% for sponsor in site.sponsors %}
-      <div class="carousel-item {{ sponsor.status }}"><a href="{{ sponsor.address }}" rel="nofollow"><img class="img-fluid" src="{{ sponsor.logo }}"></a></div>
-      {% endfor %}
+  <div class="row">
+    <div class="col">
+      <div class="display-6"><i class="fa-solid fa-hand-holding-heart"></i></div>
+      <div class="display-6">Sponsors</div>
+      <p>CentOS would not be possible without the support of our sponsors. We would like to thank the following product/service for being a CentOS sponsor.</p>
+    </div>
+  </div>
+
+  <div class="row">
+    <div class="col">
+      <div class="content d-flex align-items-center justify-content-center">
+        <div class="container rounded">
+          <div class="rollers position-relative overflow-hidden">
+            <div class="start-roller"></div>
+            <div class="wrapper">
+              <div class="items-container roll-LL">
+                {% for sponsor in site.sponsors limit: sponsors_limit %}
+                <div class="item">
+                  <a class="btn btn-link" href="{{ sponsor.address }}"><img src="{{ sponsor.logo }}" alt="{{ sponsor.name }}" class="company"></a>
+                </div>
+                {% endfor %}
+              </div>
+              <div class="items-container roll-RL">
+                {% for sponsor in site.sponsors limit: sponsors_limit %}
+                <div class="item">
+                  <a class="btn btn-link" href="{{ sponsor.address }}"><img src="{{ sponsor.logo }}" alt="{{ sponsor.name }}" class="company"></a>
+                </div>
+                {% endfor %}
+              </div>
+            </div>
+            <div class="wrapper">
+              <div class="items-container reverse-roll-LL">
+                {% for sponsor in site.sponsors limit: sponsors_limit | reverse %}
+                <div class="item">
+                  <a class="btn btn-link" href="{{ sponsor.address }}"><img src="{{ sponsor.logo }}" alt="{{ sponsor.name }}" class="company"></a>
+                </div>
+                {% endfor %}
+              </div>
+              <div class="items-container reverse-roll-RL">
+                {% for sponsor in site.sponsors limit: sponsors_limit | reverse  %}
+                <div class="item">
+                  <a class="btn btn-link" href="{{ sponsor.address }}"><img src="{{ sponsor.logo }}" alt="{{ sponsor.name }}" class="company"></a>
+                </div>
+                {% endfor %}
+              </div>
+            </div>
+            <div class="end-roller"></div>
+          </div>
+        </div>
       </div>
     </div>
   </div>
-  <p>If you value our work, please consider <a href="/sponsors">becoming a sponsor</a>!</p>
+
+  <div class="row">
+    <div class="col">
+      <p>If you value our work, please consider <a href="sponsors"><i class="fa-solid fa-hand-holding-heart"></i> becoming a sponsor</a>!</p>
+    </div>
   </div>
 
-</section>
+</div>

data/_includes/navbar.html

@@ -1,23 +1,28 @@
-<nav class="navbar">
-    <div class="container">
-      <a class="navbar-brand" href="{{ site.data.centos.identity.logo.link }}"><img src="{{ site.data.centos.identity.logo.image }}" height="32" alt="{{ site.title }}"> <span class="manifestation">{{ site.data.centos.identity.logo.manifestation }}</span></a>
-        <button data-toggle="collapse" class="navbar-toggler" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
-        <div class="collapse navbar-collapse" id="navcol-1">
-            <ul class="nav navbar-nav ml-auto">
-              {%- for nav-item in site.data.centos.navbar -%}
-              {% if nav-item.menu.size == 0 %}
-              <li class="nav-item" role="presentation"><a class="nav-link" href="{{ nav-item.link }}"><i class="{{ nav-item.icon }}"></i> {{ nav-item.name }}</a></li>
-              {% else -%}
-              <li class="nav-item dropdown"><a class="dropdown-toggle nav-link" data-toggle="dropdown" aria-expanded="false" href="#"><i class="{{ nav-item.icon }}"></i> {{ nav-item.name }}</a>
-                <div class="dropdown-menu" role="menu">
-                  {%- for dropdown-item in nav-item.menu -%}
-                  <a class="dropdown-item" role="presentation" href="{{ dropdown-item.link }}">{{ dropdown-item.name }}</a>
-                  {% endfor -%}
-                </div>
-              </li>
-              {% endif %}
-              {%- endfor -%}
-            </ul>
-        </div>
+<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/toc-accordion.html

@@ -0,0 +1,10 @@
+<div class="accordion my-4" id="pageTocAccordion">
+  <div class="accordion-item">
+    <div class="accordion-header" id="flush-headingOne">
+      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">Table of content</button>
+    </div>
+    <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#pageTocAccordion">
+      <div class="accordion-body">{% include toc.html html=content %}</div>
+    </div>
+  </div>
+</div>

data/_includes/toc.html

@@ -94,11 +94,6 @@
 {{ my_toc | lstrip }}{% endcapture %}
     {% endif %}{% endcapture %}
 
-<div class="toc">
 {% if my_toc != "" %}
-  <header class="toc__header">On this page:</header>
-  <section class="toc__section">
-  {% assign tocWorkspace = '' %}{{ my_toc | markdownify | strip }}
-  </section>
+{% assign tocWorkspace = '' %}{{ my_toc | markdownify | strip }}
 {% endif %}
-</div>

data/_layouts/{download-mirror.html → default-datatables.html}

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="{{ page.lang | default: 'en' }}">
 
-{% include head.html %}
+{% include head-datatables.html %}
 
 <body>
 
@@ -20,16 +20,16 @@
 
   {% include footer.html -%}
 
-  <script src="/assets/js/jquery.min.js"></script>
-  <script src="/assets/js/jquery.dataTables.min.js"></script>
-  <script src="/assets/js/dataTables.bootstrap4.min.js"></script>
+  <script src="assets/js/jquery.min.js"></script>
+  <script src="assets/js/jquery.dataTables.min.js"></script>
+  <script src="assets/js/dataTables.bootstrap5.min.js"></script>
   <script>
   $(document).ready(function() {
     $('#download-mirror').DataTable();
   } );
   </script>
-  <script src="/assets/js/bootstrap.min.js"></script>
-  <script src="/assets/js/customization.js"></script>
+
+  <script src="{{ site.baseurl }}/assets/js/bootstrap.bundle.min.js"></script>
 </body>
 
 </html>

data/_layouts/default.html

@@ -1,21 +1,42 @@
 <!DOCTYPE html>
 <html lang="{{ page.lang | default: 'en' }}">
 
-{% include head.html -%}
+  {% include head.html -%}
 
-<body>
+  <body>
 
-  {% include navbar.html -%}
-  {% include header.html -%}
+    {% include navbar.html -%}
 
-  {{ content }}
+    <main class="bg-light">
 
-  {% include footer.html -%}
+      <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">
+            {% include header.html -%}
+          </div>
+          </div>
+        </div>
+      </div>
 
-  <script src="/assets/js/jquery.min.js"></script>
-  <script src="/assets/js/bootstrap.min.js"></script>
-  <script src="/assets/js/clipboard.min.js"></script>
-  <script src="/assets/js/customization.js"></script>
-</body>
+      <div class="container shadow-lg bg-body p-5 mt-n5 rounded">
+        <div class="row">
+          <div class="col-sm-8">{% include breadcrumbs.html %}</div>
+          <div class="col-sm-4 text-end">{% include editbar.html %}</div>
+        </div>
+        <div class="row">
+          <div class="col">{% include toc-accordion.html %}</div>
+        </div>
+        <div class="row">
+          <div class="col mt-3">{{ content }}</div>
+        </div>
+      </div>
+
+    </main>
+
+    {% include footer.html -%}
+
+    <script src="{{ site.baseurl }}/assets/js/bootstrap.bundle.min.js"></script>
+  </body>
 
 </html>