jekyll-theme-centos-test 1.1.1 → 1.1.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9d667815b0d8674fade425db3905efef489b5f67108dbf4b1f5ee84d4c2711bd
-  data.tar.gz: 911a8d07a92ab8be9576f8a9a56c9fcca583fc20f8e1c8b2ce08d9c50920436e
+  metadata.gz: 34cb1615aa8a947a068bf37d10e3ad8f9304862c9d6f18e39ea00ac1666d95bb
+  data.tar.gz: ff10e599a577742bd7e18a7075972394c47795d6a0c0b1b99b60abf32a7fb28b
 SHA512:
-  metadata.gz: 568e44cb11ad803bb71dbe95a63c78a19340088adce0cfedacaebd902608fa5b793dd9e170e665b5d310999dc84b6ceef7ff32134a126661823a10486b987758
-  data.tar.gz: 1494cc84848ab0b7881f136ef3cce8db67255fd90c25156efdf53c04dc35279e3c52531d03e420655fdbb70d7ad9ca8669f1050b6e5a730385bba09928a71882
+  metadata.gz: 5ba2d4b7a39e76bb430d0636f9b0a063a0871d11aa00e05ddd2da20dc87a460de16ecdcaa9108d3d4da55edbcbc6a154ad2c745f157298d0c57f81f05ba485ef
+  data.tar.gz: 63c911fc1d37611c2608f87ed78284d5eee6839fe201239e177397157cb472c973637109a6d335c88b9fa70030f68f845b94a8518978190638469936637db792

data/_includes/home/distributions.html

@@ -1,12 +1,57 @@
 <div class="row">
-<div class="col text-center">
-  <h1 class="fw-bold">Linux distributions</h1>
-  <p class="lead">We offer two Linux variants:</p>
-  <div class="d-grid gap-2 d-md-block">
-    {% for item in site.data.centos.distributions %}
-    <button type="button" class="btn btn-primary fw-bold">{{ item.name }}</button>
-    {% endfor %}
+  <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>
-  <p class="my-3"><a role="button" href="">What's the difference?</a></p>
-</div>
 </div>

data/_includes/home/sponsors.html

@@ -1,51 +1,53 @@
-<div class="row py-5">
+{% assign sponsors_limit = 65 %}
+
+<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="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:6  %}
-                        <div class="item">
-                          <img src="{{ sponsor.logo }}" alt="{{ sponsor.name }}" class="company">
-                        </div>
-                        {% endfor %}
-                    </div>
-                    <div class="items-container roll-RL">
-                        {% for sponsor in site.sponsors limit:6 %}
-                        <div class="item">
-                          <img src="{{ sponsor.logo }}" alt="{{ sponsor.name }}" class="company">
-                        </div>
-                        {% endfor %}
-                    </div>
-                </div>
-                <div class="wrapper">
-                    <div class="items-container reverse-roll-LL">
-                        {% for sponsor in site.sponsors limit:6 offset:6 %}
-                        <div class="item">
-                          <img src="{{ sponsor.logo }}" alt="{{ sponsor.name }}" class="company">
-                        </div>
-                        {% endfor %}
-                    </div>
-                    <div class="items-container reverse-roll-RL">
-                        {% for sponsor in site.sponsors limit:6 offset:6 %}
-                        <div class="item">
-                          <img src="{{ sponsor.logo }}" alt="{{ sponsor.name }}" class="company">
-                        </div>
-                        {% endfor %}
-                    </div>
-                </div>
-                <div class="end-roller"></div>
+  <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>
 </div>
 
-<p>If you value our work, please consider <a href="/sponsors">becoming a sponsor</a>!</p>
+<p>If you value our work, please consider <a href="sponsors">becoming a sponsor</a>!</p>
 </div>

data/_layouts/home.html

@@ -21,9 +21,7 @@
   {% include home/distributions.html %}
   {% endif %}
 
-  {% include home/screenshots.html %}
-
-  <div class="row pt-5">
+  <div class="row pt-3">
   {% include home/news-and-events.html %}
   {% include home/planet.html %}
   </div>

data/_sass/centos/centos-sponsors.scss

@@ -31,8 +31,8 @@
 
 .container .rollers .wrapper {
   position: relative;
-  width: 1400px;
-  height: 100px;
+  width: 15600px;
+  height: 80px;
   margin: 0 0 20px 0;
   flex: 0 0 auto;
 }
@@ -43,7 +43,7 @@
   position: absolute;
   width: 100%;
   height: 100%;
-  animation-duration: 30s;
+  animation-duration: 240s;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
 }