distributions.html in jekyll-theme-centos-test-1.1.4

- old
+ new
@@ -1,57 +1,29 @@
-<div class="row">
-  <div class="col text-center">
+<div style="background: linear-gradient(180deg, #ffe8ed, #fbedd3, #f8f9fa)">
 
-    <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>
+<div class="container py-5 text-center">
 
-    <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="row">
+    <div class="col">
+      <div class="display-6">Linux distributions</div>
+      <p>We offer two Linux variants:</p>
+    </div>
+  </div>
 
-      <div class="tab-content" id="pills-tabContent">
-        {% for item in site.data.centos.distributions %}
+  <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 border-white{% endif %}">
+      <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="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="carousel">
-            <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="row">
+    <div class="col">
+      <p><a href="cl-vs-cs">What's the difference?</a></p>
+    </div>
+  </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>
 
-        </div>
-
-        {% endfor %}
-
-      </div>
-    </nav>
-
-  </div>
 </div>