jekyll-theme-centos-test 1.0.32 → 1.1.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c30c47432e0f22356876c8860b3e1ea21dccb24d18e77cac63591d8d4020fb63
-  data.tar.gz: eecbd4214fab9eef8450b02b969fc15ecce4674a5c6e8870cf1f19ca2257817d
+  metadata.gz: 34cb1615aa8a947a068bf37d10e3ad8f9304862c9d6f18e39ea00ac1666d95bb
+  data.tar.gz: ff10e599a577742bd7e18a7075972394c47795d6a0c0b1b99b60abf32a7fb28b
 SHA512:
-  metadata.gz: a1b3cf8e7ccc3049cce3c7e1f0f71ef7d3f179f2c95e61185b61e092111a4087c76a17d6fb4eaed5a89054c6273721a83276d692f55e25eaccdc38e18c58b29e
-  data.tar.gz: a556f4fbdd29c856738b4c4298d13d7d98a3c70761ab119432d9dabbb2ce695e4d6d29208da700313c2b1aa7d492e5bbe64b975fa36938323c39d7013ed3f4f5
+  metadata.gz: 5ba2d4b7a39e76bb430d0636f9b0a063a0871d11aa00e05ddd2da20dc87a460de16ecdcaa9108d3d4da55edbcbc6a154ad2c745f157298d0c57f81f05ba485ef
+  data.tar.gz: 63c911fc1d37611c2608f87ed78284d5eee6839fe201239e177397157cb472c973637109a6d335c88b9fa70030f68f845b94a8518978190638469936637db792

data/_includes/footer.html

@@ -1,64 +1,36 @@
-{% include hr.html %}
+<footer class="footer mt-auto mt-5 bg-dark small text-white">
 
-<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
-    <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>
+<div class="container">
+  <div class="row justify-content-between mt-4 pt-4">
+    <div class="col-lg-3 mb-5">
+      <a href="{{ site.data.centos.identity.logo.link }}"><img role="img" src="{{ 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="list-unstyled d-flex">
+        {% for item in site.data.centos.footer.social %}
+        <li class="me-4 lead"><a href="{{ item.link }}" role="button" aria-label="{{ item.name }}"><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 }}" class="btn btn-link" role="button" aria-label="{{ item.name }}"><i class="{{ item.icon }}"></i></a>
-            {% endfor %}
-          </div>
-        </section>
-
-      </div>
+      </ul>
+    </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>
+    {% 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="nav-link p-0">{{ item.name }}</a></li>
+        {% endfor %}
+      </ul>
     </div>
+    {% endfor %}
+    {% endfor %}
+    {% endif %}
+  </div>
+
+  <div class="row">
+    <div class="col">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 }}" class="text-decoration-none">{{ item.text }}</a>{% endfor %}</p></div>
+  </div>
 
 </footer>

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

data/_includes/header/home.html

@@ -1,5 +1,5 @@
-<div class="pt-5 pb-5 container">
-  <div class="text-center"><img src="{{ site.url }}{{ site.baseurl }}/assets/img/centos-symbol.png" alt="CentOS"></div>
-  <p class="display-2 fw-bold text-center pt-5">{{ site.title }}</p>
-  <p class="display-6 fw-lighter text-center">{{ site.description }}</p>
+<div class="container text-center text-white">
+  <img role="img" src="assets/img/centos-symbol-with-shadow.svg" alt="CentOS" height="352">
+  <h1 class="display-3 fw-bold">{{ site.title }}</h1>
+  <p class="lead">{{ site.description }}</p>
 </div>

data/_includes/home/distributions.html

@@ -1,18 +1,57 @@
-<div class="card text-center">
-  <div class="card-header">
-    <ul class="nav nav-pills nav-fill" id="pills-tab" role="tablist">
-      {% for item in site.data.centos.distributions %}
-      <li class="nav-item" role="presentation">
-        <button class="nav-link{% if forloop.first %} active{% endif %}" id="pills-{{ item.page }}-tab" data-bs-toggle="pill" data-bs-target="#pills-{{ item.page }}" type="button" role="tab" aria-controls="pills-home" aria-selected="true">{{ item.name }}</button>
-      </li>
-      {% endfor %}
-    </ul>
-  </div>
-  <div class="card-body">
-    <div class="tab-content" id="pills-tabContent">
-      {% for item in site.data.centos.distributions %}
-      <div class="tab-pane fade show{% if forloop.first %} active{% endif %}" id="pills-{{ item.page }}" role="tabpanel" aria-labelledby="pills-{{ item.page }}-tab" tabindex="{{ forloop.index }}">{{ item.description }}</div>
-      {% endfor %}
-    </div>
+<div class="row">
+  <div class="col text-center">
+
+    <h1 class="fw-bold">Linux distributions</h1>
+    <p class="lead">We offer two Linux variants:</p>
+    <p class="my-3"><a role="button" href="cl-vs-cs">What's the difference?</a></p>
+
+    <nav>
+      <ul class="nav nav-pills nav-fill mb-3" id="pills-tab" role="tablist">
+        {% for item in site.data.centos.distributions %}
+        <li class="nav-item" role="presentation">
+          <button class="nav-link{% if forloop.first %} active{% endif %}" id="{{ item.page }}-tab" data-bs-toggle="pill" data-bs-target="#{{ item.page }}" type="button" role="tab" aria-controls="{{ item.page }}-{{ forloop.index }}" {% if forloop.first %}aria-selected="true"{% endif %}>{{ item.name }}</button>
+        </li>
+        {% endfor %}
+      </ul>
+
+      <div class="tab-content" id="pills-tabContent">
+        {% for item in site.data.centos.distributions %}
+
+        <div class="tab-pane fade show{% if forloop.first %} active{% endif %}" id="{{ item.page }}" role="tabpanel" aria-labelledby="{{ item.page }}-tab">
+          <p>{{ item.description }}</p>
+          <div id="carouselScreenshots-{{ item.page }}" class="shadow carousel slide" data-bs-ride="true">
+            <div class="carousel-indicators">
+              {% for screenshot in item.screenshots %}
+              <button type="button" data-bs-target="#carouselScreenshots-{{ item.page }}" data-bs-slide-to="{{ forloop.index0 }}" class="{% if forloop.first %}active" aria-current="true{% endif %}" aria-label="Screenshot {{ forloop.index }}"></button>
+              {% endfor %}
+            </div>
+            <div class="carousel-inner">
+              {% for screenshot in item.screenshots %}
+              <div class="carousel-item{% if forloop.first %} active{% endif %}">
+                <img src="{{ screenshot.image }}" class="d-block w-100" alt="{{ screenshot.description }}">
+              </div>
+              {% endfor %}
+            </div>
+            <button class="carousel-control-prev" type="button" data-bs-target="#carouselScreenshots-{{ item.page }}" data-bs-slide="prev">
+              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+              <span class="visually-hidden">Previous</span>
+            </button>
+            <button class="carousel-control-next" type="button" data-bs-target="#carouselScreenshots-{{ item.page }}" data-bs-slide="next">
+              <span class="carousel-control-next-icon" aria-hidden="true"></span>
+              <span class="visually-hidden">Next</span>
+            </button>
+          </div>
+
+          <div class="d-grid gap-2 my-3">
+            <a class="btn btn-primary" href="{{ item.page }}" role="button"><i class="fas fa-download"></i> Download {{ item.name }}</a>
+          </div>
+
+        </div>
+
+        {% endfor %}
+
+      </div>
+    </nav>
+
   </div>
 </div>

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

@@ -1,4 +1,40 @@
-<section id="news-and-events" class="home__news-and-events">
+<div class="col-md-12 col-lg-6 mt-3">
+<h2 class="fw-bold">News and events</h2>
+<div class="list-group mb-3">
+  <a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
+    <i class="fa-solid fa-calendar-days"></i>
+    <div class="d-flex gap-2 w-100 justify-content-between">
+      <div>
+        <h6 class="mb-0">List group item heading</h6>
+        <p class="mb-0 opacity-75">Some placeholder content in a paragraph.</p>
+      </div>
+      <small class="opacity-50 text-nowrap">now</small>
+    </div>
+  </a>
+  <a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
+    <i class="fa-solid fa-calendar-days"></i>
+    <div class="d-flex gap-2 w-100 justify-content-between">
+      <div>
+        <h6 class="mb-0">Another title here</h6>
+        <p class="mb-0 opacity-75">Some placeholder content in a paragraph that goes a little longer so it wraps to a new line.</p>
+      </div>
+      <small class="opacity-50 text-nowrap">3d</small>
+    </div>
+  </a>
+  <a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
+    <i class="fa-solid fa-calendar-days"></i>
+    <div class="d-flex gap-2 w-100 justify-content-between">
+      <div>
+        <h6 class="mb-0">Third heading</h6>
+        <p class="mb-0 opacity-75">Some placeholder content in a paragraph.</p>
+      </div>
+      <small class="opacity-50 text-nowrap">1w</small>
+    </div>
+  </a>
+</div>
+
+<!--
+<section id="news-and-events" class="p7-5 my-5">
 
   <h2 class="home__news-and-events__title">News and events</h2>
 
@@ -16,3 +52,5 @@
   </div>
 
 </section>
+-->
+</div>

data/_includes/home/planet.html

@@ -1,3 +1,40 @@
+<div class="col-md-12 col-lg-6 mt-3">
+<h2 class="fw-bold">Blog posts</h2>
+<div class="list-group mb-3">
+  <a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
+    <i class="fa-solid fa-globe"></i>
+    <div class="d-flex gap-2 w-100 justify-content-between">
+      <div>
+        <h6 class="mb-0">List group item heading</h6>
+        <p class="mb-0 opacity-75">Some placeholder content in a paragraph.</p>
+      </div>
+      <small class="opacity-50 text-nowrap">now</small>
+    </div>
+  </a>
+  <a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
+    <i class="fa-solid fa-globe"></i>
+    <div class="d-flex gap-2 w-100 justify-content-between">
+      <div>
+        <h6 class="mb-0">Another title here</h6>
+        <p class="mb-0 opacity-75">Some placeholder content in a paragraph that goes a little longer so it wraps to a new line.</p>
+      </div>
+      <small class="opacity-50 text-nowrap">3d</small>
+    </div>
+  </a>
+  <a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
+    <i class="fa-solid fa-globe"></i>
+    <div class="d-flex gap-2 w-100 justify-content-between">
+      <div>
+        <h6 class="mb-0">Third heading</h6>
+        <p class="mb-0 opacity-75">Some placeholder content in a paragraph.</p>
+      </div>
+      <small class="opacity-50 text-nowrap">1w</small>
+    </div>
+  </a>
+</div>
+</div>
+
+<!--
 <section id="around-centos" class="home__planet">
 
   <h2 class="home__planet__title">Around CentOS</h2>
@@ -16,3 +53,4 @@
   </div>
 
 </section>
+-->

data/_includes/home/sponsors.html

@@ -1,19 +1,53 @@
-<section class="home__content__sponsors">
+{% assign sponsors_limit = 65 %}
 
-  <h2>Sponsors</h2>
+<div class="row py-3">
+<h2 class="fw-bold">Sponsors</h2>
+<div class="col">
+  <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 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="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 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 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 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 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>
-  <p>If you value our work, please consider <a href="/sponsors">becoming a sponsor</a>!</p>
-  </div>
+</div>
 
-</section>
+<p>If you value our work, please consider <a href="sponsors">becoming a sponsor</a>!</p>
+</div>

data/_includes/navbar.html

@@ -1,6 +1,7 @@
-<nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top p-3 shadow">
+<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.data.centos.identity.logo.link }}"><img src="{{ site.url }}{{ site.baseurl }}/{{ site.data.centos.identity.logo.image }}" height="32" alt="{{ site.title }}"><span class="manifestation">{{ site.data.centos.identity.logo.manifestation }}</span></a>
+    <a class="navbar-brand" href="{{ site.data.centos.identity.logo.link }}"><img role="img" src="{{ 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>
@@ -24,3 +25,4 @@
     </div>
   </div>
 </nav>
+</header>

data/_layouts/default.html

@@ -3,16 +3,18 @@
 
 {% include head.html -%}
 
-<body>
+<body class="d-flex flex-column h-100">
 
+  <main class="flex-shrink-0">
   {% include navbar.html -%}
   {% include header.html -%}
 
   {{ content }}
+  <main>
 
   {% include footer.html -%}
 
-  <script src="{{ site.url }}{{ site.baseurl }}/assets/js/bootstrap.bundle.min.js"></script>
+  <script src="assets/js/bootstrap.bundle.min.js"></script>
 </body>
 
 </html>

data/_layouts/home.html

@@ -3,43 +3,38 @@
 
 {% include head.html -%}
 
-<body>
+<body class="d-flex flex-column h-100">
 
   {% include navbar.html -%}
 
-  <main>
+  <main class="flex-shrink-0 bg-light">
 
-  <div id="content">
-    <div class="pt-5 pb-5 bg-gradient">
-      {% include header.html -%}
+  <div class="bg-primary pb-5">
+    <div class="container pb-5 px-0">
+    {% include header.html -%}
     </div>
+  </div>
 
-    <div class="container">
-      {% if site.data.centos.distributions %}
-      <p class="display-6 fw-bold text-center pt-3"><i class="fa-brands fa-linux"></i> Linux distributions</p>
-      <p class="text-center">We offer two Linux variants: (<a href="cl-vs-cs">What's the difference?</a>)</p>
-      {% include home/distributions.html %}
-      {% endif %}
-    </div>
+  <div class="container bg-body position-relative px-5 pt-5 mt-n5 shadow">
 
-    <div class="container">
-      <div class="row">
-        <div class="col-md-12 col-lg-6 mt-5">
-          <p class="display-6 fw-bold pt-3"><i class="fa-solid fa-microphone-lines"></i> News and events</p>
-        </div>
-        <div class="col-md-12 col-lg-6 mt-5">
-          <p class="display-6 fw-bold pt-3"><i class="fa-solid fa-keyboard"></i> Blog posts</p>
-        </div>
-      </div>
-    </div>
+  {% if site.data.centos.distributions %}
+  {% include home/distributions.html %}
+  {% endif %}
 
-    </div>
+  <div class="row pt-3">
+  {% include home/news-and-events.html %}
+  {% include home/planet.html %}
+  </div>
+
+  {% include home/sponsors.html %}
+
+  </div>
 
   </main>
 
   {% include footer.html -%}
 
-  <script src="{{ site.url }}{{ site.baseurl }}/assets/js/bootstrap.bundle.min.js"></script>
+  <script src="assets/js/bootstrap.bundle.min.js"></script>
 </body>
 
 </html>

data/_sass/centos/_variables.scss

@@ -9,8 +9,12 @@ $centos-color-4: #efa724;
 // Bootstrap v5 customization variables
 //
 $enable-rounded:              false !default;
+$enable-negative-margins:     true;
 $nav-pills-link-active-bg:    $centos-color-1;
 $link-color:                  $centos-color-1;
+$primary:                     $centos-color-1;
+$secondary:                   $centos-color-4;
+$dark:                        #160d27;
 $gradient:                    linear-gradient(rgba(239,167,36,0.3), rgba(161,79,140,0.3) 30%, rgba(255,255,255,1));
 $font-family-sans-serif:      Montserrat, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
-$font-family-monospace:       overpass-mono, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default; 
+$font-family-monospace:       overpass-mono, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;

data/_sass/centos/centos-sponsors.scss

@@ -0,0 +1,126 @@
+/*
+ * CSS used to show sponsors' rolling images in CentOS homepage.
+ *
+ * Thanks to Anand Vunnam for publishing this example.
+ * Example: https://bbbootstrap.com/snippets/bootstrap-5-rolling-images-animation-33714815
+ **/
+
+.container .rollers {
+  flex: 0 0 230px;
+}
+
+.container .start-roller{
+  left: 0;
+  top: 0;
+  background-image: linear-gradient(to right, white 30%, #ffffff00);
+}
+
+.container .start-roller,
+.container .end-roller {
+  height: 100%;
+  width: 40px;
+  position: absolute;
+  z-index: 1;
+}
+
+.container .end-roller{
+  right: 0;
+  top: 0;
+  background-image: linear-gradient(to left, white 30%, rgba(255, 255, 255, 0));
+}
+
+.container .rollers .wrapper {
+  position: relative;
+  width: 15600px;
+  height: 80px;
+  margin: 0 0 20px 0;
+  flex: 0 0 auto;
+}
+
+.container .rollers .wrapper .items-container{
+  display: flex;
+  align-items: center;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  animation-duration: 240s;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+}
+
+.container .rollers .wrapper .items-container.roll-LL{
+  animation-name: roll;
+}
+.container .rollers .wrapper .items-container.roll-RL{
+  animation-name: roll-reverse;
+  left: 100%;
+}
+.container .rollers .wrapper .items-container.reverse-roll-LL{
+  animation-name: roll-clockwise;
+  left: -100%;
+}
+.container .rollers .wrapper .items-container.reverse-roll-RL{
+  animation-name: roll-reverse-clockwise;
+  left: 100%;
+}
+
+@keyframes roll {
+  0% {
+    left: 0%;
+  }
+  100% {
+    left: -100%;
+  }
+}
+@keyframes roll-reverse {
+  0% {
+    left: 100%;
+  }
+  100% {
+    left: 0%;
+  }
+}
+@keyframes roll-clockwise {
+  0%{
+    left: -100%;
+  }
+  100%{
+    left: 0%;
+  }
+}
+@keyframes roll-reverse-clockwise {
+  0% {
+    left: 0%;
+  }
+  100% {
+    left: 100%;
+  }
+}
+
+.container .rollers .wrapper .items-container .item {
+  flex: 1 1 200px;
+  min-width: 0;
+  margin: 20px;
+}
+
+.container .rollers .wrapper .items-container .item .company {
+  filter: grayscale(100%);
+  opacity: 0.2;
+  width: 100%;
+  object-fit: scale-down;
+}
+
+.container .rollers .wrapper .items-container .item .company:hover {
+  filter: grayscale(0%);
+  opacity: 1;
+  cursor: pointer;
+}
+
+.container .rollers .wrapper .items-container .item img {
+  vertical-align: middle;
+  height: 60px;
+}
+
+.container .rollers .wrapper .items-container .item .company {
+  opacity: 0.4;
+}

data/_sass/centos/centos.scss

@@ -1 +1,2 @@
-@import "centos/variables"
+@import "centos/variables";
+@import "centos/centos-sponsors";

data/assets/css/dataTables.bootstrap5.min.css

@@ -0,0 +1,5 @@
+table.dataTable td.dt-control{text-align:center;cursor:pointer}table.dataTable td.dt-control:before{height:1em;width:1em;margin-top:-9px;display:inline-block;color:white;border:.15em solid white;border-radius:1em;box-shadow:0 0 .2em #444;box-sizing:content-box;text-align:center;text-indent:0 !important;font-family:"Courier New",Courier,monospace;line-height:1em;content:"+";background-color:#31b131}table.dataTable tr.dt-hasChild td.dt-control:before{content:"-";background-color:#d33333}table.dataTable thead>tr>th.sorting,table.dataTable thead>tr>th.sorting_asc,table.dataTable thead>tr>th.sorting_desc,table.dataTable thead>tr>th.sorting_asc_disabled,table.dataTable thead>tr>th.sorting_desc_disabled,table.dataTable thead>tr>td.sorting,table.dataTable thead>tr>td.sorting_asc,table.dataTable thead>tr>td.sorting_desc,table.dataTable thead>tr>td.sorting_asc_disabled,table.dataTable thead>tr>td.sorting_desc_disabled{cursor:pointer;position:relative;padding-right:26px}table.dataTable thead>tr>th.sorting:before,table.dataTable thead>tr>th.sorting:after,table.dataTable thead>tr>th.sorting_asc:before,table.dataTable thead>tr>th.sorting_asc:after,table.dataTable thead>tr>th.sorting_desc:before,table.dataTable thead>tr>th.sorting_desc:after,table.dataTable thead>tr>th.sorting_asc_disabled:before,table.dataTable thead>tr>th.sorting_asc_disabled:after,table.dataTable thead>tr>th.sorting_desc_disabled:before,table.dataTable thead>tr>th.sorting_desc_disabled:after,table.dataTable thead>tr>td.sorting:before,table.dataTable thead>tr>td.sorting:after,table.dataTable thead>tr>td.sorting_asc:before,table.dataTable thead>tr>td.sorting_asc:after,table.dataTable thead>tr>td.sorting_desc:before,table.dataTable thead>tr>td.sorting_desc:after,table.dataTable thead>tr>td.sorting_asc_disabled:before,table.dataTable thead>tr>td.sorting_asc_disabled:after,table.dataTable thead>tr>td.sorting_desc_disabled:before,table.dataTable thead>tr>td.sorting_desc_disabled:after{position:absolute;display:block;opacity:.125;right:10px;line-height:9px;font-size:.9em}table.dataTable thead>tr>th.sorting:before,table.dataTable thead>tr>th.sorting_asc:before,table.dataTable thead>tr>th.sorting_desc:before,table.dataTable thead>tr>th.sorting_asc_disabled:before,table.dataTable thead>tr>th.sorting_desc_disabled:before,table.dataTable thead>tr>td.sorting:before,table.dataTable thead>tr>td.sorting_asc:before,table.dataTable thead>tr>td.sorting_desc:before,table.dataTable thead>tr>td.sorting_asc_disabled:before,table.dataTable thead>tr>td.sorting_desc_disabled:before{bottom:50%;content:"▴"}table.dataTable thead>tr>th.sorting:after,table.dataTable thead>tr>th.sorting_asc:after,table.dataTable thead>tr>th.sorting_desc:after,table.dataTable thead>tr>th.sorting_asc_disabled:after,table.dataTable thead>tr>th.sorting_desc_disabled:after,table.dataTable thead>tr>td.sorting:after,table.dataTable thead>tr>td.sorting_asc:after,table.dataTable thead>tr>td.sorting_desc:after,table.dataTable thead>tr>td.sorting_asc_disabled:after,table.dataTable thead>tr>td.sorting_desc_disabled:after{top:50%;content:"▾"}table.dataTable thead>tr>th.sorting_asc:before,table.dataTable thead>tr>th.sorting_desc:after,table.dataTable thead>tr>td.sorting_asc:before,table.dataTable thead>tr>td.sorting_desc:after{opacity:.6}table.dataTable thead>tr>th.sorting_desc_disabled:after,table.dataTable thead>tr>th.sorting_asc_disabled:before,table.dataTable thead>tr>td.sorting_desc_disabled:after,table.dataTable thead>tr>td.sorting_asc_disabled:before{display:none}table.dataTable thead>tr>th:active,table.dataTable thead>tr>td:active{outline:none}div.dataTables_scrollBody table.dataTable thead>tr>th:before,div.dataTables_scrollBody table.dataTable thead>tr>th:after,div.dataTables_scrollBody table.dataTable thead>tr>td:before,div.dataTables_scrollBody table.dataTable thead>tr>td:after{display:none}div.dataTables_processing{position:absolute;top:50%;left:50%;width:200px;margin-left:-100px;margin-top:-26px;text-align:center;padding:2px}div.dataTables_processing>div:last-child{position:relative;width:80px;height:15px;margin:1em auto}div.dataTables_processing>div:last-child>div{position:absolute;top:0;width:13px;height:13px;border-radius:50%;background:rgba(13, 110, 253, 0.9);animation-timing-function:cubic-bezier(0, 1, 1, 0)}div.dataTables_processing>div:last-child>div:nth-child(1){left:8px;animation:datatables-loader-1 .6s infinite}div.dataTables_processing>div:last-child>div:nth-child(2){left:8px;animation:datatables-loader-2 .6s infinite}div.dataTables_processing>div:last-child>div:nth-child(3){left:32px;animation:datatables-loader-2 .6s infinite}div.dataTables_processing>div:last-child>div:nth-child(4){left:56px;animation:datatables-loader-3 .6s infinite}@keyframes datatables-loader-1{0%{transform:scale(0)}100%{transform:scale(1)}}@keyframes datatables-loader-3{0%{transform:scale(1)}100%{transform:scale(0)}}@keyframes datatables-loader-2{0%{transform:translate(0, 0)}100%{transform:translate(24px, 0)}}table.dataTable.nowrap th,table.dataTable.nowrap td{white-space:nowrap}table.dataTable th.dt-left,table.dataTable td.dt-left{text-align:left}table.dataTable th.dt-center,table.dataTable td.dt-center,table.dataTable td.dataTables_empty{text-align:center}table.dataTable th.dt-right,table.dataTable td.dt-right{text-align:right}table.dataTable th.dt-justify,table.dataTable td.dt-justify{text-align:justify}table.dataTable th.dt-nowrap,table.dataTable td.dt-nowrap{white-space:nowrap}table.dataTable thead th,table.dataTable thead td,table.dataTable tfoot th,table.dataTable tfoot td{text-align:left}table.dataTable thead th.dt-head-left,table.dataTable thead td.dt-head-left,table.dataTable tfoot th.dt-head-left,table.dataTable tfoot td.dt-head-left{text-align:left}table.dataTable thead th.dt-head-center,table.dataTable thead td.dt-head-center,table.dataTable tfoot th.dt-head-center,table.dataTable tfoot td.dt-head-center{text-align:center}table.dataTable thead th.dt-head-right,table.dataTable thead td.dt-head-right,table.dataTable tfoot th.dt-head-right,table.dataTable tfoot td.dt-head-right{text-align:right}table.dataTable thead th.dt-head-justify,table.dataTable thead td.dt-head-justify,table.dataTable tfoot th.dt-head-justify,table.dataTable tfoot td.dt-head-justify{text-align:justify}table.dataTable thead th.dt-head-nowrap,table.dataTable thead td.dt-head-nowrap,table.dataTable tfoot th.dt-head-nowrap,table.dataTable tfoot td.dt-head-nowrap{white-space:nowrap}table.dataTable tbody th.dt-body-left,table.dataTable tbody td.dt-body-left{text-align:left}table.dataTable tbody th.dt-body-center,table.dataTable tbody td.dt-body-center{text-align:center}table.dataTable tbody th.dt-body-right,table.dataTable tbody td.dt-body-right{text-align:right}table.dataTable tbody th.dt-body-justify,table.dataTable tbody td.dt-body-justify{text-align:justify}table.dataTable tbody th.dt-body-nowrap,table.dataTable tbody td.dt-body-nowrap{white-space:nowrap}/*! Bootstrap 5 integration for DataTables
+ *
+ * ©2020 SpryMedia Ltd, all rights reserved.
+ * License: MIT datatables.net/license/mit
+ */table.dataTable{clear:both;margin-top:6px !important;margin-bottom:6px !important;max-width:none !important;border-collapse:separate !important;border-spacing:0}table.dataTable td,table.dataTable th{-webkit-box-sizing:content-box;box-sizing:content-box}table.dataTable td.dataTables_empty,table.dataTable th.dataTables_empty{text-align:center}table.dataTable.nowrap th,table.dataTable.nowrap td{white-space:nowrap}table.dataTable.table-striped>tbody>tr:nth-of-type(2n+1)>*{box-shadow:none}table.dataTable>tbody>tr{background-color:transparent}table.dataTable>tbody>tr.selected>*{box-shadow:inset 0 0 0 9999px rgba(13, 110, 253, 0.9);color:white}table.dataTable.table-striped>tbody>tr.odd>*{box-shadow:inset 0 0 0 9999px rgba(0, 0, 0, 0.05)}table.dataTable.table-striped>tbody>tr.odd.selected>*{box-shadow:inset 0 0 0 9999px rgba(13, 110, 253, 0.95)}table.dataTable.table-hover>tbody>tr:hover>*{box-shadow:inset 0 0 0 9999px rgba(0, 0, 0, 0.075)}table.dataTable.table-hover>tbody>tr.selected:hover>*{box-shadow:inset 0 0 0 9999px rgba(13, 110, 253, 0.975)}div.dataTables_wrapper div.dataTables_length label{font-weight:normal;text-align:left;white-space:nowrap}div.dataTables_wrapper div.dataTables_length select{width:auto;display:inline-block}div.dataTables_wrapper div.dataTables_filter{text-align:right}div.dataTables_wrapper div.dataTables_filter label{font-weight:normal;white-space:nowrap;text-align:left}div.dataTables_wrapper div.dataTables_filter input{margin-left:.5em;display:inline-block;width:auto}div.dataTables_wrapper div.dataTables_info{padding-top:.85em}div.dataTables_wrapper div.dataTables_paginate{margin:0;white-space:nowrap;text-align:right}div.dataTables_wrapper div.dataTables_paginate ul.pagination{margin:2px 0;white-space:nowrap;justify-content:flex-end}div.dataTables_scrollHead table.dataTable{margin-bottom:0 !important}div.dataTables_scrollBody>table{border-top:none;margin-top:0 !important;margin-bottom:0 !important}div.dataTables_scrollBody>table>thead .sorting:before,div.dataTables_scrollBody>table>thead .sorting_asc:before,div.dataTables_scrollBody>table>thead .sorting_desc:before,div.dataTables_scrollBody>table>thead .sorting:after,div.dataTables_scrollBody>table>thead .sorting_asc:after,div.dataTables_scrollBody>table>thead .sorting_desc:after{display:none}div.dataTables_scrollBody>table>tbody tr:first-child th,div.dataTables_scrollBody>table>tbody tr:first-child td{border-top:none}div.dataTables_scrollFoot>.dataTables_scrollFootInner{box-sizing:content-box}div.dataTables_scrollFoot>.dataTables_scrollFootInner>table{margin-top:0 !important;border-top:none}@media screen and (max-width: 767px){div.dataTables_wrapper div.dataTables_length,div.dataTables_wrapper div.dataTables_filter,div.dataTables_wrapper div.dataTables_info,div.dataTables_wrapper div.dataTables_paginate{text-align:center}div.dataTables_wrapper div.dataTables_paginate ul.pagination{justify-content:center !important}}table.dataTable.table-sm>thead>tr>th:not(.sorting_disabled){padding-right:20px}table.table-bordered.dataTable{border-right-width:0}table.table-bordered.dataTable thead tr:first-child th,table.table-bordered.dataTable thead tr:first-child td{border-top-width:1px}table.table-bordered.dataTable th,table.table-bordered.dataTable td{border-left-width:0}table.table-bordered.dataTable th:first-child,table.table-bordered.dataTable th:first-child,table.table-bordered.dataTable td:first-child,table.table-bordered.dataTable td:first-child{border-left-width:1px}table.table-bordered.dataTable th:last-child,table.table-bordered.dataTable th:last-child,table.table-bordered.dataTable td:last-child,table.table-bordered.dataTable td:last-child{border-right-width:1px}table.table-bordered.dataTable th,table.table-bordered.dataTable td{border-bottom-width:1px}div.dataTables_scrollHead table.table-bordered{border-bottom-width:0}div.table-responsive>div.dataTables_wrapper>div.row{margin:0}div.table-responsive>div.dataTables_wrapper>div.row>div[class^=col-]:first-child{padding-left:0}div.table-responsive>div.dataTables_wrapper>div.row>div[class^=col-]:last-child{padding-right:0}