jekyll-theme-centos 0.7.7 → 0.8.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6a2b951477c5432c04ba1f0d582c3c7ed34e73e05e759deb2a0a90e855f192a2
-  data.tar.gz: 17ad9416ce67a974a1a0c276cff20816e1b7fe356e614ae8140f138d00c53318
+  metadata.gz: ff10403bfccef61d8236575cd0ffe8685263e514abbb2872e84b260777d8aab9
+  data.tar.gz: fafbe9de0f7b5f2e2de346350f385538d08a40c00da599369f2b89cc19a57af3
 SHA512:
-  metadata.gz: 5d52557d08c09f3a55a5015ff66854907afa87ac2d9c019c185ba9511cb5480cd8cbe3e5da543c71c4b68c14f8816338a4c20a5d8a1131cd0a20a049f36ec254
-  data.tar.gz: ac2e651550a6c1656e26cd0433af9cf104285575627538d9b3c5aec3a636b327cd2abd3b3120f7732e9c97c7a95b29df9528d17b5a08d64ba62a88de1e1a083e
+  metadata.gz: f267820f1d425f00c2016234b511969649b5ab1b261fd99f737c684a15826b1032b75ecb10cf70a0a040ded92e1962b2a2b4c5bfb6202b706eab7349f8b47492
+  data.tar.gz: a55b31b24149e4b50ceb64ef5e5fe1199521eae57f49a564d3507a9eb8cbd855fb5a99009f109c486353fc63d3b19ae34889c0ae098383a30d6d083397db9747

data/_includes/breadcrumbs.html

@@ -3,7 +3,7 @@
       <li class="breadcrumb-item"><a href="/">Home</a></li>
   {% for crumb in crumbs offset: 1 %}
     {% if forloop.last %}
-      <li class="breadcrumb-item">{{ page.title }}</li>
+      <li class="breadcrumb-item active">{{ page.title }}</li>
     {% else %}
       <li class="breadcrumb-item"><a href="{% 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 %}

data/_includes/footer.html

@@ -1,5 +1,29 @@
+{% 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 %}
@@ -35,6 +59,8 @@
           <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>
-
     </div>
+
+    {% include top.html %}
+
 </footer>

data/_includes/header/blog.html

@@ -18,3 +18,5 @@
   {% endif %}
 
 </header>
+
+{% include hr.html %}

data/_includes/header/home.html

@@ -1,4 +1,20 @@
 <header class="header header__home">
-  <h1 class="header__home__title">{{ site.title }}</h1>
-  <p class="header__home__description">{{ site.description }}</p>
+
+  <section class="header__home__presentation">
+  <h1 class="header__home__presentaiton_title">{{ site.title }}</h1>
+  <p class="header__home__presentation__description">{{ site.description }}</p>
+  {% if site.data.centos.distributions %}
+  <p class="header__home__presentation__description">We offer two Linux variants: (<a class="btn btn-sm" role="button" href="cs-vs-cl">What's the difference?</a>)</p>
+  <div class="header__home__presentation__distributions">
+  {% include home/distributions.html %}
+  </div> 
+  {% endif %}
+  </section>
+
+  <section class="header__home__shortcuts">
+    {% include home/shortcuts.html %}
+  </section>
+
 </header>
+
+{% include hr.html %}

data/_includes/header/page.html

@@ -2,3 +2,5 @@
   <h1 class="header__page__title">{{ page.title }}</h1>
   <p class="header__page__description">{{ page.title_lead }}</p>
 </header>
+
+{% include hr.html %}

data/_includes/header/post.html

@@ -19,3 +19,5 @@
   {% endif %}
 
 </header>
+
+{% include hr.html %}

data/_includes/home/distributions.html

@@ -1,12 +1,10 @@
-<section class="home__content__distributions">
-  <h2>Distributions</h2>
-  <p class="home__content__distributions_preamble">We offer the following distributions:</p>
-
-  {% if site.data.centos.distributions %}
-  <div class="home__content__distributions__buttons">
   {% for item in site.data.centos.distributions %}
-    <a class="btn" role="button" href="{{ item.page }}">{{ item.name }}</a>
-  {% endfor %}
+  <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>
+  </a>
   </div>
-  {% endif %}
-</section>
+  {% endfor %}

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

@@ -1,13 +1,18 @@
-<section class="home__content__news-and-events">
+<section id="news-and-events" class="home__news-and-events">
 
-  <h2>News and events</h2>
+  <h2 class="home__news-and-events__title">News and events</h2>
 
-  <ul>
-  {% 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" -%}
-  <li><a href="{{ i.url }}">{{ i.title }}</a><br>{{ i.date | date: date_format }} &mdash; {{ i.excerpt | strip_html }}</li>
-  {% endfor %}
-  </ul>
+  <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>
+  </a>
+{% endfor %}
+  </div>
 
 </section>

data/_includes/home/planet.html

@@ -1,13 +1,18 @@
-<section class="home__content__planet">
+<section id="around-centos" class="home__planet">
 
-  <h2>Around CentOS</h2>
+  <h2 class="home__planet__title">Around CentOS</h2>
 
-  <ul>
+  <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" -%}
-  <li><a href="{{ i.link }}">{{ i.title }}</a><br>{{ i.published | date: date_format }} &mdash; {{ i.summary | strip_html | slice: 0,150 }}...</li>
-  {% endfor %}
-  </ul>
+  <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>
 
 </section>

data/_includes/home/shortcuts.html

@@ -0,0 +1,17 @@
+<div class="header__home__shortcuts__community">
+
+  {% assign links = site.data.centos.navbar | where: "name", "Community" %}
+  {% for section in links %}
+  {% for item in section.menu %}
+  <a class="btn" role="button" href="{{ item.link }}">
+  <div class="card">
+    <div class="card-body">
+      <h2 class="card-title"><i class="{{ item.icon }}"></i></h2>
+      <p class="card-text">{{ item.name }}</p>
+    </div>
+  </div>
+  </a>
+  {% endfor %}
+  {% endfor %}
+
+</div>

data/_includes/hr.html

@@ -0,0 +1,6 @@
+<div class="hr">
+  <div class="hr__centos-color-0"></div>
+  <div class="hr__centos-color-1"></div>
+  <div class="hr__centos-color-2"></div>
+  <div class="hr__centos-color-3"></div>
+</div>

data/_includes/navbar.html

@@ -1,4 +1,4 @@
-<nav class="navbar fixed-top navbar-expand-lg navbar-dark">
+<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>

data/_includes/post-nav-explorer.html

@@ -4,20 +4,20 @@
   {% else %}
   <div class="post__nav__explorer__newer--disabled">
   {% endif %}
-  <a href="{{ page.previous.url | remove:'index.html' }}"><button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Previous Post - {{ page.previous.title }}"><i class="fas fa-arrow-left"></i></button></a>
+  <a href="{{ page.previous.url | remove:'index.html' }}"><button type="button" class="btn btn-light" data-toggle="tooltip" data-placement="top" title="Previous Post - {{ page.previous.title }}"><i class="fas fa-arrow-left"></i></button></a>
   </div>
-  {% include top.html %}
+
   <div class="post__nav_explorer__feeds">
-    <a href="{{ "/feed.xml" | relative_url }}"><button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="RSS"><i class="fas fa-rss"></i></button></a>
+    <a href="{{ "/feed.xml" | relative_url }}"><button type="button" class="btn btn-light" data-toggle="tooltip" data-placement="top" title="RSS"><i class="fas fa-rss"></i></button></a>
   </div>
   <div class="post__nav__explorer__index">
-    <a href="/news-and-events/"><button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Blog posts"><i class="fas fa-th"></i></button></a>
+    <a href="/news-and-events/"><button type="button" class="btn btn-light" data-toggle="tooltip" data-placement="top" title="Blog posts"><i class="fas fa-th"></i></button></a>
   </div>
   {% if page.next.url %}
   <div class="post__nav__explorer__older">
   {% else %}
   <div class="post__nav__explorer__older--disabled">
   {% endif %}
-  <a href="{{ page.next.url | remove:'index.html' }}"><button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Next Post - {{ page.next.title }}"><i class="fas fa-arrow-right"></i></button></a>
+  <a href="{{ page.next.url | remove:'index.html' }}"><button type="button" class="btn btn-light" data-toggle="tooltip" data-placement="top" title="Next Post - {{ page.next.title }}"><i class="fas fa-arrow-right"></i></button></a>
   </div>
 </nav>

data/_includes/toc.html

@@ -94,11 +94,11 @@
 {{ my_toc | lstrip }}{% endcapture %}
     {% endif %}{% endcapture %}
 
-{% if my_toc != "" %}
 <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>
-</div>
 {% endif %}
+</div>

data/_includes/top.html

@@ -1,3 +1,3 @@
-<div class="top">
-  <a href="#top"><button title="Page top" type="button" data-toggle="tooltip" class="btn btn-primary"><i class="fas fa-arrow-circle-up"></i></button></a>
+<div id="topbtn">
+  <a href="#top"><button title="Page top" type="button" data-toggle="tooltip" class="btn btn-light"><i class="fas fa-arrow-up"></i></button></a>
 </div>

data/_layouts/aside.html

@@ -13,20 +13,13 @@ layout: default
 
     <div class="aside__content__nav">
       <div class="aside__nav__explorer">
-        {% include top.html %}
       </div>
     </div>
-
   </article>
 
   <aside class="aside__nav">
     {% include breadcrumbs.html %}
     {% include toc.html html=content %}
-
-    <div class="aside__nav__explorer">
-      {% include top.html %}
-    </div>
-
   </aside>
 
 </main>

data/_layouts/default.html

@@ -14,7 +14,7 @@
 
   <script src="/assets/js/jquery.min.js"></script>
   <script src="/assets/js/bootstrap.min.js"></script>
-  <script src="/assets/js/copycode.js"></script>
+  <script src="/assets/js/customization.js"></script>
 </body>
 
 </html>

data/_layouts/download-mirror.html

@@ -29,6 +29,7 @@
   } );
   </script>
   <script src="/assets/js/bootstrap.min.js"></script>
+  <script src="/assets/js/customization.js"></script>
 </body>
 
 </html>

data/_layouts/home.html

@@ -9,24 +9,15 @@
   {% include header.html -%}
 
   <main class="home">
-    <div class="home__content">
-      <div class="row">
-        <div class="col-sm-12 col-lg-8">
-          {% include home/news-and-events.html %}
-          {% include home/planet.html -%}
-        </div>
-        <div class="col-sm-12 col-lg-4">
-          {% include home/distributions.html -%}
-          {% include home/sponsors.html %}
-        </div>
-      </div>
-    </div>
+    {% include home/news-and-events.html %}
+    {% include home/planet.html -%}
   </main>
 
   {% include footer.html -%}
 
   <script src="/assets/js/jquery.min.js"></script>
   <script src="/assets/js/bootstrap.min.js"></script>
+  <script src="/assets/js/customization.js"></script>
 </body>
 
 </html>

data/_layouts/page.html

@@ -12,9 +12,6 @@ layout: default
 
     {{ content }}
 
-    <nav class="page__content__nav">
-      {% include top.html %}
-    </nav>
   </article>
   
 </main>

data/_layouts/search.html

@@ -34,6 +34,7 @@
 
   <script src="/assets/js/jquery.min.js"></script>
   <script src="/assets/js/bootstrap.min.js"></script>
+  <script src="/assets/js/customization.js"></script>
 </body>
 
 </html>

data/_sass/centos/_footer.scss

@@ -1,10 +1,12 @@
 .footer {
 
+  flex: 1;
+
   @include header-links;
 
 	background-image: url($centos-img-motif);
 	background-size: cover;
-  background-position: top right;
+  background-position: top left;
 
   %-margin {
     margin-top: $line-height-base * 1.5rem;
@@ -25,7 +27,7 @@
 	}
 
   .links {
-    @extend .col-sm-3;
+    @extend .col-md-3;
     @extend %-margin;
   }
 
@@ -41,15 +43,19 @@
   }
 
   .sponsor {
-    @extend .col;
     @extend %-margin;
     display: flex;
     justify-content: space-between;
     flex-direction: row;
+    flex-wrap: wrap;
     &__message {
+      @extend .col-md-6, .col-lg-8;
     }
     &__logo {
+      @extend .col-md-6, .col-lg-4;
+      text-align: center;
       img {
+        height: 90px;
         padding: 15px;
         background-color: $white;
       }
@@ -62,4 +68,11 @@
     font-size: small;
   }
 
+  #topbtn {
+    position: fixed;
+    bottom: 15px;
+    right: 15px;
+  }
+
+
 }

data/_sass/centos/_header.scss

@@ -6,25 +6,70 @@
   background-image: url($centos-img-motif);
   background-color: $dark;
   background-size: cover;
-  background-position: top right;
+  background-position: top left;
 
   text-shadow: 0 0 5px $dark;
 
   &__home {
     display: flex;
-    justify-content: center;
-    flex-direction: column;
+    flex-wrap: wrap;
 
     padding-top: calc(#{$navbar-brand-height} * 4);
-    padding-bottom: calc(#{$navbar-brand-height} * 6);
     margin-top: $navbar-brand-height;
 
-    &__title, &__description, &__preamble {
+    .card {
+      background-color: transparent;
+      border: none;
+    }
+
+    &__presentation {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
       @extend .container;
+
+      &__title, &__description, &__preamble, &__distributions {
+      }
+
+      &__description {
+        @extend .lead;
+      }
+
+      &__distributions {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        @include media-breakpoint-up(lg) { flex-wrap: nowrap; }
+
+        .card {
+          background: rgba(0, 0, 0, 0.3);
+          margin-bottom: 15px;
+          border-radius: 10px;
+        }
+        .card-body {
+          text-align: left;
+        }
+        .card:nth-child(1) {
+          @include media-breakpoint-up(lg) { margin-right: 15px; } 
+        }
+      }
     }
 
-    &__description {
-      @extend .lead;
+    &__shortcuts {
+      background: rgba(0, 0, 0, 0.3);
+      width: 100%;
+      margin-top: calc(#{$navbar-brand-height} * 4);
+
+      .card {
+        font-size: small;
+      }
+
+      &__community {
+        display: flex;
+        justify-content: space-around;
+        flex-wrap: wrap;
+        @extend .container;
+      }
     }
   }
 

data/_sass/centos/_hr.scss

@@ -0,0 +1,27 @@
+.hr {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+
+  width: 100%;
+  height: 5px;
+
+  background-color: $centos-color-3;
+
+  &__centos-color-0 {
+    width: 25%;
+    background-color: $centos-color-0;
+  }
+  &__centos-color-1 {
+    width: 25%;
+    background-color: $centos-color-1;
+  }
+  &__centos-color-2 {
+    width: 25%;
+    background-color: $centos-color-2;
+  }
+  &__centos-color-3 {
+    width: 25%;
+    background-color: $centos-color-3;
+  }
+}

data/_sass/centos/_main.scss

@@ -4,51 +4,60 @@ body {
   min-height: 100vh;
 }
 
-.home, .page, .blog, .aside, .download, .sponsors, .search, .post {
+.page, .blog, .aside, .download, .sponsors, .search, .post {
   display: flex;
-  flex: 1;
   @extend .container;
 }
 
 .home {
-  &__content {
-    @extend .col-sm-12;
-    @include content;
-    &__distributions {
-      .btn {
-        @extend .btn-primary;
-        width: 100%;
-        margin-right: 15px;
-        margin-bottom: $paragraph-margin-bottom;
+  flex-wrap: nowrap;
+  flex-direction: column;
+
+  &__planet, &__news-and-events {
+    &__title {
+      text-align: center;
+      &:nth-child(1){
+        margin-top: 2rem;
       }
     }
-    &__sponsors {
-      .card {
+    &__content {
+      @extend .container;
+      margin-top: 1em;
+      margin-bottom: 1em;
+      .btn {
+        text-align: left;
+        padding: 0;
         margin: 1em;
-        margin-left: 0;
+        border-radius: 10px;
+      }
+      .card {
+        padding: 2em;
+        box-shadow: 0px 2px 3px 0px rgba(50, 50, 50, 0.25);
+        border-radius: 10px;
+        background: $white; 
         border: none;
       }
-      img {
-        width: auto;
-        height: 50px;
+      .card-body {
+        padding: 0;
       }
     }
-    &__planet, &__news-and-events {
-      a { font-weight: bold; }
-      @include list-links;
+  }
+  &__news-and-events {
+    &__title {
+    }
+  }
+  &__planet {
+    &__title {
     }
   }
 }
 
 .aside {
-  display: flex;
-
   &__nav {
     @include aside-nav;
   }
-
   &__content {
-    @extend .col-sm-12, .col-md-12, .col-lg-8, .col-xl-8;
+    @extend .col-sm-12, .col-md-12, .col-lg-12, .col-xl-8;
     @include content;
     @include content-nav;
   }
@@ -56,7 +65,7 @@ body {
 
 .page {
   &__content {
-    @extend .col-sm-12;
+    @extend .col-sm-12, .col-md-12, .col-lg-12, .col-xl-12;
     @include content;
   }
 }
@@ -64,7 +73,7 @@ body {
 .blog {
 
   &__content {
-    @extend .col-sm-12;
+    @extend .col-sm-12, .col-md-12, .col-lg-12, .col-xl-12;
     @include content;
 
     &__breadcrumb {
@@ -113,7 +122,7 @@ body {
   }
 
   &__content {
-    @extend .col-sm-12, .col-md-12, .col-lg-8, .col-xl-8;
+    @extend .col-sm-12, .col-md-12, .col-lg-12, .col-xl-8;
     @include content;
     @include content-nav;
   }
@@ -122,7 +131,7 @@ body {
 
 .search {
   &__content {
-    @extend .col-sm-12;
+    @extend .col-sm-12, .col-md-12, .col-lg-12, .col-xl-12;
     @include content;
 
     .ais-search-box {
@@ -142,7 +151,6 @@ body {
       font-style: normal;
     }
     .post-breadcrumbs {
-      display: block;
       font-size: small;
     }
     .post-snippet img {

data/_sass/centos/_nav.scss

@@ -1,8 +1,14 @@
 .navbar {
+  @extend .fixed-top;
+  @extend .navbar-expand-xl;
+  @extend .navbar-dark;
+
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
+
   &-dark {
     background: $dark;
   }
+
   &-brand {
     .manifestation {
       color: white;

data/_sass/centos/_toc.scss

@@ -1,6 +1,9 @@
 .toc {
   font-size: small;
-  margin-bottom: calc(#{$paragraph-margin-bottom} * 1.25);
+
+  @include media-breakpoint-up(xm) {
+    margin-bottom: calc(#{$paragraph-margin-bottom} * 1.25);
+  }
 
   &__header {
     font-weight: $headings-font-weight;

data/_sass/centos/_variables.scss

@@ -12,8 +12,8 @@ $centos-img-motif:                  "../img/motif.png";
 // Color system - based in the artistic motif palette and the number of
 // occurrence each color has in the image.
 $white:                             #fff;
-$primary:                           #0f5dd5;
-$secondary:                         #0f1c4c;
+$primary:                           $centos-color-2;
+$secondary:                         $centos-color-3;
 $dark:                              #020008;
 
 // Header

data/_sass/centos/centos-blog.scss

@@ -19,12 +19,12 @@
       margin-bottom: 1rem;
     }
     .avatar {
-      border-radius: 50px;
+      border-radius: $border-radius;
       margin-right: 1rem;
       margin-bottom: 1rem;
     }
     .comment-body {
-      border-radius: 10px;
+      border-radius: $border-radius;
       background: #f8f8f8;
       padding: 1rem;
     }

data/_sass/centos/centos-httpd.scss

@@ -11,8 +11,6 @@
       // sites (e.g., mirror.centos.org, people.centos.org and all the
       // user-specific pages under it.
       &__list {
-        padding-bottom: $paragraph-margin-bottom;
-        border-bottom: 1px solid lightgray;
       }
       img {
         width: auto;

data/_sass/centos/centos.scss

@@ -1,5 +1,5 @@
 /*!
- * jekyll-theme-centos v0.7.7 (https://gitlab.com/areguera/jekyll-theme-centos/)
+ * jekyll-theme-centos v0.8.1 (https://gitlab.com/areguera/jekyll-theme-centos/)
  * Copyright 2020-2021 Alain Reguera Delgado
  * Licensed under MIT (https://gitlab.com/areguera/jekyll-theme-centos/-/blob/master/LICENSE)
  */
@@ -15,6 +15,7 @@
 @import "centos/toc";
 @import "centos/breadcrumbs";
 @import "centos/nav";
+@import "centos/hr";
 @import "centos/header";
 @import "centos/main";
 @import "centos/footer";

data/_sass/centos/mixins/_aside-nav.scss

@@ -3,27 +3,20 @@
   width: 100%;
   margin-top: 15px;
   margin-left: 15px;
-  margin-bottom: $paragraph-margin-bottom;
-
+  margin-bottom: 15px;
   align-self: start;
-  position: sticky;
-  top: calc(#{$navbar-brand-height + $paragraph-margin-bottom} + 10px);
 
   &__explorer {
     display: flex;
     justify-content: space-between;
     flex-direction: row;
-    border-top: 1px solid $gray-300;
-    margin-top: $paragraph-margin-bottom;
-    margin-bottom: $paragraph-margin-bottom;
-    padding-top: $paragraph-margin-bottom;
   }
 
   .toc {
     &__section {
       flex-direction: column;
-      max-height: 65vh;
       overflow-y: auto;
+      max-height: 75vh;
     }
   }
 
@@ -31,8 +24,11 @@
     display: none;
   }
 
-  @include media-breakpoint-up(lg) {
-    display: block;
+  @include media-breakpoint-up(xl) {
+    display: flex;
+    flex-flow: column nowrap;
+    position: sticky;
+    top: calc(#{$navbar-brand-height + $paragraph-margin-bottom} + 10px);
   }
 
 }

data/_sass/centos/mixins/_content-nav.scss

@@ -3,8 +3,11 @@
     margin: 0;
     @include media-breakpoint-up(xm) {
       display: block;
+      .top {
+        margin-top: $paragraph-margin-bottom;
+      }
     }
-    @include media-breakpoint-up(lg) {
+    @include media-breakpoint-up(xl) {
       display: none;
     }
   }

data/_sass/centos/mixins/_content.scss

@@ -4,6 +4,7 @@
   padding: 2.75rem;
   margin-top: -120px;
   box-shadow: 0px -2px 3px 0px rgba(50, 50, 50, 0.25);
+  border-radius: 10px 10px 0 0;
 
   h1, h2, h3, h4, h5, h6 {
     scroll-margin-top: $scroll-margin-top + 2.5;
@@ -15,7 +16,6 @@
 
   h2 {
     margin-top: $scroll-margin-top;
-    border-bottom: 3px solid $dark;
   }
 
   img {
@@ -74,4 +74,5 @@
   }
 
   @include code-header;
+
 }

data/assets/js/{copycode.js → customization.js}

@@ -1,3 +1,4 @@
+// Copy code
 // Thanks Aleksandr
 // https://www.aleksandrhovhannisyan.com/blog/how-to-add-a-copy-to-clipboard-button-to-your-jekyll-blog/
 const codeBlocks = document.querySelectorAll(".code-header + .highlighter-rouge");
@@ -16,3 +17,13 @@ copyCodeButtons.forEach((copyCodeButton, index) => {
     }, 2000);
   });
 });
+
+// Show top page button after scrolling down.
+$("#topbtn").hide();
+$(window).scroll(function() {
+  if ($(window).scrollTop() > 100) {
+    $("#topbtn").fadeIn("slow");
+  } else {
+    $("#topbtn").fadeOut("fast");
+  }
+});

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-theme-centos
 version: !ruby/object:Gem::Version
-  version: 0.7.7
+  version: 0.8.1
 platform: ruby
 authors:
 - Alain Reguera Delgado
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-07-04 00:00:00.000000000 Z
+date: 2021-07-25 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -82,7 +82,9 @@ files:
 - _includes/home/distributions.html
 - _includes/home/news-and-events.html
 - _includes/home/planet.html
+- _includes/home/shortcuts.html
 - _includes/home/sponsors.html
+- _includes/hr.html
 - _includes/navbar.html
 - _includes/page/alert-danger.html
 - _includes/page/alert-info.html
@@ -201,6 +203,7 @@ files:
 - _sass/centos/_footer.scss
 - _sass/centos/_header.scss
 - _sass/centos/_highlighter.scss
+- _sass/centos/_hr.scss
 - _sass/centos/_main.scss
 - _sass/centos/_mixins.scss
 - _sass/centos/_nav.scss
@@ -350,7 +353,7 @@ files:
 - assets/img/post.png
 - assets/js/bootstrap.min.js
 - assets/js/bootstrap.min.js.map
-- assets/js/copycode.js
+- assets/js/customization.js
 - assets/js/dataTables.bootstrap4.min.js
 - assets/js/instantsearch.min.js
 - assets/js/jquery.dataTables.min.js