jekyll-theme-centos 0.3.0 → 0.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4d7a3680d6653496c5d0e7da9074709d0c758fe5df1bd920a2ae0f5163bd28b3
-  data.tar.gz: 92305a7364a76d65e6aa36320a4cdb08214b3ca4e546d159e629d05380b2b333
+  metadata.gz: 181077707ec730242e1a1d1f88c8107d7c4cda70e1fcb41913c0559f185d2fc1
+  data.tar.gz: 86647a29137027f7849f9018db52234d2065aaebb412893ac5f3835e2cf02aca
 SHA512:
-  metadata.gz: 48341f8f9ff022fa0adb16ef1d69487d82176ddf11837c447815bb8ce5fb2afb501db5882357550946a3d6b630d408197892878718580d057f2d09399e5531a1
-  data.tar.gz: 200d36937dae7f7dda92e1deba73d946bf53f76b53cbb66bd6f581e0ab759448a113ba65ee4027ca95b8fe966b0de59c80c1156ac35ef8dca93118766cc0d428
+  metadata.gz: 45b98eb5b67297e557c5622586dbf1715798f3884c38ddb445f3d720be003e46015fcf832825774b3ba89ae1ed39a74cba87126bc1c16d0240f667a2be1bd6b1
+  data.tar.gz: a83b145893d99cadce8e07b3f1f47a44a4db30e8bf8ef206280128ba4d13768f34fb10f82071927ce346c35584eb98aebdb3778297448602565adfe01769d5e2

data/_includes/download/cards.html

@@ -1,8 +1,8 @@
 <div class="download__content__card">
   <div class="download__content__card__header">
-    <ul class="nav nav-pills card-header-pills">
-      <li class="nav-item"><a class="nav-link active" role="tab" data-toggle="tab" href="#tab-stream">CentOS Stream</a></li>
-      <li class="nav-item"><a class="nav-link" role="tab" data-toggle="tab" href="#tab-linux">CentOS Linux</a></li>
+    <ul class="nav nav-pills card-header-pills flex-column flex-sm-row">
+      <li class="nav-item flex-sm-fill text-sm-center"><a class="nav-link active" role="tab" data-toggle="tab" href="#tab-stream">CentOS Stream</a></li>
+      <li class="nav-item flex-sm-fill text-sm-center"><a class="nav-link" role="tab" data-toggle="tab" href="#tab-linux">CentOS Linux</a></li>
     </ul>
   </div>
   <div class="download__content__card__body tab-content">

data/_includes/download/linux.html

@@ -1,8 +1,8 @@
 <div class="download__content__card">
   <div class="download__content__card__header">
-    <ul class="nav nav-pills card-header-pills">
-      <li class="nav-item"><a class="nav-link active" role="tab" data-toggle="tab" href="#tab-linux-8">8</a></li>
-      <li class="nav-item"><a class="nav-link" role="tab" data-toggle="tab" href="#tab-linux-7">7</a></li>
+    <ul class="nav nav-pills card-header-pills flex-column flex-sm-row">
+      <li class="nav-item flex-sm-fill text-sm-center"><a class="nav-link active" role="tab" data-toggle="tab" href="#tab-linux-8">8</a></li>
+      <li class="nav-item flex-sm-fill text-sm-center"><a class="nav-link" role="tab" data-toggle="tab" href="#tab-linux-7">7</a></li>
     </ul>
   </div>
 

data/_includes/download/stream.html

@@ -1,8 +1,8 @@
 <div class="download__content__card">
 
   <div class="download__content__card__header">
-    <ul class="nav nav-pills card-header-pills">
-      <li class="nav-item"><a class="nav-link active" role="tab" data-toggle="tab" href="#tab-stream-8">8</a></li>
+    <ul class="nav nav-pills card-header-pills flex-column flex-sm-row">
+      <li class="nav-item flex-sm-fill text-sm-center"><a class="nav-link active" role="tab" data-toggle="tab" href="#tab-stream-8">8</a></li>
     </ul>
   </div>
 

data/_includes/header/home.html

@@ -7,7 +7,7 @@
   {% if site.header.worklines %}
   <div class="header__home__worklines">
   {% for item in site.header.worklines %}
-    <a class="btn btn-light btn-lg" role="button" href="{{ item.link }}"><strong>{{ item.name }}</strong></a>
+    <a class="btn" role="button" href="{{ item.link }}">{{ item.name }}</a>
   {% endfor %}
   </div>
   {% endif %}

data/_includes/home/around.html

@@ -1,4 +1,4 @@
-<section class="home__around">
+<section class="home__content__around">
   <h2>Around CentOS</h2>
   <div id="rss-feeds"></div>
 </section>

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

@@ -1,8 +1,8 @@
-<section class="home__news-and-sponsors" id="news-and-sponsors">
-    <div class="home__news-and-sponsors__news">
+<div class="home__content__news-and-sponsors" id="news-and-sponsors">
+    <div class="home__content__news-and-sponsors__news">
       {% include home/news.html %}
     </div>
-    <div class="home__news-and-sponsors__sponsors">
+    <div class="home__content__news-and-sponsors__sponsors">
       {% include home/sponsors.html %}
     </div>
-</section>
+</div>

data/_includes/navbar.html

@@ -1,4 +1,4 @@
-<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
+<nav class="navbar fixed-top navbar-expand-lg navbar-dark">
     <div class="container">
       <a class="navbar-brand" href="{{ site.identity.logo.link }}"><img src="{{ site.identity.logo.image }}" height="32" alt="{{ site.title }}"></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

@@ -0,0 +1,23 @@
+<nav class="post__nav__explorer">
+  {% if page.previous.url %}
+  <div class="post__nav__explorer__newer">
+  {% else %}
+  <div class="post__nav__explorer__newer--disabled">
+  {% endif %}
+  <a href="{{ page.previous.url }}"><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-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="{{ "/blog.html" | relative_url }}"><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 }}"><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/post-nav.html

@@ -0,0 +1,3 @@
+{% include breadcrumbs.html %}
+{% include toc.html html=content %}
+{% include post-nav-explorer.html %}

data/_includes/top.html

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

data/_layouts/aside.html

@@ -5,13 +5,28 @@ layout: default
 <main class="aside">
 
   <article class="aside__content">
+    <div class="aside__content__nav">
+      {% include breadcrumbs.html %}
+      {% include toc.html html=content %}
+    </div>
     {{ content }}
+
+    <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 %}
-    {% include top.html %}
+
+    <div class="aside__nav__explorer">
+      {% include top.html %}
+    </div>
+
   </aside>
 
 </main>

data/_layouts/blog.html

@@ -4,24 +4,26 @@ layout: default
 
 <main class="blog">
 
-  <ol class="blog__breadcrumb">
-    <li class="blog__breadcrumb__item"><a href="/">Home</a></li>
-    <li class="blog__breadcrumb__item abreadcrumb-item--active">{{ page.title | capitalize }}</li>
+  <div class="blog__content">
+
+  <ol class="blog__content__breadcrumb">
+    <li class="blog__content__breadcrumb__item"><a href="/">Home</a></li>
+    <li class="blog__content__breadcrumb__item--active">{{ page.title | capitalize }}</li>
   </ol>
 
-  <section class="blog__entries">
+  <section class="blog__content__entries">
       {%- if site.posts.size > 0 -%}
-      <div class="blog__entries__card">
+      <div class="blog__content__entries__card">
         {%- for post in paginator.posts -%}
-        <div class="blog__entries__card__item">
+        <div class="blog__content__entries__card__item">
             {%- assign date_format = site.date_format | default: "%b %-d, %Y" -%}
             {%- if post.image -%}
-            <a href="{{ post.url | relative_url }}"><img class="blog__entries__card__item__image" src="{{ post.image }}" alt="{{ post.title | escape }}"></a>
+            <a href="{{ post.url | relative_url }}"><img class="blog__content__entries__card__item__image" src="{{ post.image }}" alt="{{ post.title | escape }}"></a>
             {%- endif -%}
-            <a href="{{ post.url | relative_url }}"><h4 class="blog__entries__card__item__title">{{ post.title | escape }}</h4></a>
-            <p class="blog__entries__card__item__date">{{ post.date | date: date_format }}</p>
+            <a href="{{ post.url | relative_url }}"><h4 class="blog__content__entries__card__item__title">{{ post.title | escape }}</h4></a>
+            <p class="blog__content__entries__card__item__date">{{ post.date | date: date_format }}</p>
             {%- if site.show_excerpts -%}
-            <p class="blog__entries__card__item__excerpt">{{ sponsor.excerpt }}</p>
+            <p class="blog__content__entries__card__item__excerpt">{{ sponsor.excerpt }}</p>
             {%- endif -%}
           </div>
         {% endfor %}
@@ -29,25 +31,8 @@ layout: default
       {%- endif -%}
   </section>
 
-  <nav class="blog__navbar">
-    {% if paginator.previous_page %}
-    <div class="blog__navbar__newer">
-    {% else %}
-    <div class="blog__navbar__newer--disabled">
-    {% endif %}
-    <a href="{{ paginator.previous_page_path }}"><button type="button" class="btn btn-light" data-toggle="tooltip" data-placement="top" title="Newer Posts"><i class="fas fa-arrow-left"></i></button></a>
-    </div>
-    <div class="blog__navbar__feeds">
-      <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>
-    {% if paginator.next_page %}
-    <div class="blog__navbar__older">
-    {% else %}
-    <div class="blog__navbar__older--disabled">
-    {% endif %}
-    <a href="{{ paginator.next_page_path }}"><button type="button" class="btn btn-light" data-toggle="tooltip" data-placement="top" title="Older Posts"><i class="fas fa-arrow-right"></i></button></a>
-    </div>
+  {% include post-nav-explorer.html %}
+
   </div>
-  </nav>
 
 </main>

data/_layouts/download-mirror.html

@@ -8,9 +8,12 @@
   {% include navbar.html -%}
   {% include header.html -%}
 
-  <main class="download">
-    {% include breadcrumbs.html %}
+  <main id="main" class="download">
     <article class="download__content">
+      <div class="download__content__nav">
+        {% include breadcrumbs.html %}
+        {% include toc.html html=content %}
+      </div>
       {{ content }}
     </article>
   </main>

data/_layouts/home.html

@@ -9,8 +9,10 @@
   {% include header.html -%}
 
   <main class="home">
-    {% include home/news-and-sponsors.html -%}
-    {% include home/around.html -%}
+    <div class="home__content">
+      {% include home/news-and-sponsors.html -%}
+      {% include home/around.html -%}
+    </div>
   </main>
 
   {% include footer.html -%}

data/_layouts/page.html

@@ -4,13 +4,17 @@ layout: default
 
 <main class="page">
 
-  {% include breadcrumbs.html %}
-  {% include toc.html html=content %}
-
   <article class="page__content">
+    <div class="page__content__nav">
+      {% include breadcrumbs.html %}
+      {% include toc.html html=content %}
+    </div>
+
     {{ content }}
-  </article>
 
-  {% include top.html %}
+    <nav class="page__content__nav">
+      {% include top.html %}
+    </nav>
+  </article>
   
 </main>

data/_layouts/post.html

@@ -4,39 +4,26 @@ layout: default
 
 <main class="post">
 
-  <section class="post__content">
+  <article class="post__content">
+
+    <nav class="post__content__nav">
+      {% include breadcrumbs.html %}
+      {% include toc.html html=content %}
+    </nav>
+
     {% if page.image %}
-    <figure>
-      <img class="figure-img img-fluid" src="{{ page.image }}" alt="{{ page.title | escape }}">
-    </figure>
+    <figure><img class="figure-img img-fluid" src="{{ page.image }}" alt="{{ page.title | escape }}"></figure>
     {% endif %}
+
     {{ content }}
-  </section>
 
-  <aside class="post__content__nav">
-    {% include breadcrumbs.html %}
-    {% include toc.html html=content %}
-    {% include top.html %}
+    <nav class="post__content__nav">
+      {% include post-nav-explorer.html %}
+    </nav>
+  </article>
+
+  <aside class="post__nav">
+    {% include post-nav.html %}
   </aside>
 
-  <nav class="post__navbar">
-    {% if page.previous.url %}
-    <div class="post__navbar__newer">
-    {% else %}
-    <div class="post__navbar__newer--disabled">
-    {% endif %}
-    <a href="{{ page.previous.url }}"><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>
-    <div class="blog__navbar_entries">
-      <a href="{{ "/blog.html" | relative_url }}"><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__navbar__older">
-    {% else %}
-    <div class="post__navbar__older--disabled">
-    {% endif %}
-    <a href="{{ page.next.url }}"><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>
-  
 </main>

data/_layouts/search.html

@@ -4,10 +4,15 @@ layout: default
 
 <main class="search">
 
-  {% include breadcrumbs.html %}
+  <div class="search__content">
+    <div class="search__content__nav">
+      {% include breadcrumbs.html %}
+      {% include toc.html html=content %}
+    </div>
 
-  <section class="search__results">
-    {{ content }}
-  </section>
+    <div class="search__results">
+      {{ content }}
+    </div>
+  </div>
   
 </main>

data/_layouts/sponsors.html

@@ -4,10 +4,13 @@
 
 <main class="sponsors">
 
-  {% include breadcrumbs.html %}
-
   <div class="sponsors__content">
 
+    <div class="sponsors__content__nav">
+      {% include breadcrumbs.html %}
+      {% include toc.html html=content %}
+    </div>
+
     {{ content }}
 
     <div class="sponsors__content__card">

data/_sass/centos/_footer.scss

@@ -22,7 +22,6 @@
   text-shadow: 0 0 5px $black;
 
   scroll-margin-top: $scroll-margin-top;
-  margin-top: $heading-margin-top;
 
 	ul {
 		padding: 0;

data/_sass/centos/_header.scss

@@ -9,14 +9,14 @@
   text-shadow: 0 0 5px $black;
 
   &__home {
-    padding-top: 4rem;
-    padding-bottom: 3rem;
-    margin-top: 60px;
-
     display: flex;
     justify-content: center;
     flex-direction: column;
 
+    padding-top: 6rem;
+    padding-bottom: 12rem;
+    margin-top: calc(#{$navbar-brand-height});
+
     &__title, &__description, &__preamble {
       @extend .container;
     }
@@ -28,19 +28,17 @@
     &__worklines {
       @extend .container;
       .btn {
-        @extend .btn, .btn-outline-light;
+        @extend .btn, .btn-light;
+        text-shadow: none;
         margin-bottom: 1rem;
         margin-right: 1rem;
-        &:hover {
-          text-shadow: none;
-        }
       }
     }
   }
 
   &__page {
-    padding-top: 4rem;
-    padding-bottom: 3rem;
+    padding-top: 2rem;
+    padding-bottom: 8rem;
     margin-top: 60px;
 
     display: flex;
@@ -58,8 +56,8 @@
   }
 
   &__blog, &__post {
-    padding-top: 4rem;
-    padding-bottom: 3rem;
+    padding-top: 2rem;
+    padding-bottom: 8rem;
     margin-top: 60px;
 
     display: flex;

data/_sass/centos/_main.scss

@@ -1,138 +1,125 @@
 .home, .page, .blog, .aside, .download, .sponsors, .search, .post {
   @extend .container;
   min-height: calc(30vh);
-  padding-top: $paragraph-margin-bottom;
-  padding-bottom: $paragraph-margin-bottom;
 }
 
 .home {
-  @include content;
-
-  &__news-and-sponsors {
-    @extend .row;
-    &__news {
-      @extend .col;
-      @include link-list;
-    }
-    &__sponsors {
-      @extend .col-4;
-      .card {
-        margin: 1em;
-        margin-left: 0;
-        border: none;
+  &__content {
+    @extend .col-sm-12;
+    @include content;
+    &__news-and-sponsors {
+      @extend .row;
+      &__news {
+        @extend .col-sm-12, .col-xl-8;
+        @include link-list;
       }
-      img {
-        width: auto;
-        height: 50px;
+      &__sponsors {
+        @extend .col-sm-12, .col-xl-4;
+        .card {
+          margin: 1em;
+          margin-left: 0;
+          border: none;
+        }
+        img {
+          width: auto;
+          height: 50px;
+        }
       }
     }
+    &__around {
+      @include link-list;
+    }
   }
-  &__around {
-    @include link-list;
-  }
+
 }
 
 .aside {
   display: flex;
   align-items: flex-start;
-  flex-wrap: wrap;
 
   &__nav {
     @include aside-nav;
   }
 
   &__content {
-    @extend .col-xl-8;
+    @extend .col-sm-12, .col-md-12, .col-lg-8, .col-xl-8;
     @include content;
-    padding-left: 0;
+    @include content-nav;
   }
 }
 
 .page {
   &__content {
+    @extend .col-sm-12;
     @include content;
+    @include content-nav;
   }
 }
 
 .blog {
-  &__breadcrumb {
-    @extend .breadcrumb;
-    &__item {
-      @extend .breadcrumb-item;
-      &--active {
-        @extend .active;
-      }
-    }
-  }
 
-  &__navbar {
-    display: flex;
-    justify-content: space-between;
-    flex-direction: row;
+  &__content {
+    @extend .col-sm-12;
+    @include content;
 
-    &__newer, &__older, &__feeds {
-      &--disabled {
-        opacity: 0;
+    &__breadcrumb {
+      @extend .breadcrumb;
+      &__item {
+        @extend .breadcrumb-item;
+        &--active {
+          @extend .breadcrumb-item;
+        }
       }
     }
-  }
 
-  &__entries {
-    margin-top: 1rem;
-    margin-bottom: 1rem;
-    &__card {
-      display: flex;
-      justify-content: space-between;
-      flex-direction: row;
-      flex-wrap: wrap;
+    &__entries {
+      margin-top: 1rem;
+      margin-bottom: 1rem;
+      &__card {
+        display: flex;
+        justify-content: space-between;
+        flex-direction: row;
+        flex-wrap: wrap;
 
-      border: none;
+        border: none;
 
-      &__item {
-        @extend .col-lg-6;
-        &__image {
-          @extend .img-fluid;
-          padding-bottom: 1em;
+        &__item {
+          @extend .col-lg-6;
+          a {
+            color: $body-color;
+            &:hover {
+              color: $body-color;
+            }
+          }
+          &__image {
+            @extend .img-fluid;
+            padding-bottom: 1em;
+          }
         }
       }
     }
-    border-bottom: 1px solid $body-color;
+
+    &__nav {
+      @include post-nav-explorer;
+    }
   }
 }
 
 .post {
   display: flex;
-  justify-content: space-between;
-  flex-direction: row;
-  flex-wrap: wrap;
-
-  &__navbar {
-    @extend .col-lg-8;
-    display: flex;
-    justify-content: space-between;
-    flex-direction: row;
-
-    &__newer, &__older {
-      &--disabled {
-        opacity: 0;
-      }
-    }
-    &__newer {
-      margin-right: 0;
-    }
-    &__older {
-      margin-left: 0;
-    }
+  align-items: flex-start;
+
+  &__nav {
+    @include aside-nav;
+    @include post-nav-explorer;
   }
 
   &__content {
-    @extend .col-lg-8;
+    @extend .col-sm-12, .col-md-12, .col-lg-8, .col-xl-8;
     @include content;
-
-    &__nav {
-      @include aside-nav;
-    }
+    @include content-nav;
   }
+
 }
 
 .search {
@@ -170,6 +157,9 @@
 
 .sponsors {
   &__content {
+    @extend .col-sm-12, .col-md-12, .col-lg-12, .col-xl-12;
+    @include content;
+
     &__card {
       display: flex;
       flex-wrap: wrap;

data/_sass/centos/_mixins.scss

@@ -1,3 +1,6 @@
 @import "mixins/_content";
+@import "mixins/_content-nav";
 @import "mixins/_aside-nav";
 @import "mixins/_link-list";
+
+@import "mixins/_post-nav-explorer"

data/_sass/centos/_nav.scss

@@ -1,3 +1,6 @@
 .navbar {
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
+  &-dark {
+    background: $black;
+  }
 }

data/_sass/centos/_variables.scss

@@ -7,7 +7,7 @@
 // Color system
 $white:                             #fff;
 $black:                             #000;
-$dark:                              $black;
+$dark:                              #343a40;
 
 /* ----------------------------------------------------------------------
  * CentOS Identity
@@ -51,7 +51,7 @@ $nord-color-15:                     #b48ead;
 //
 // Settings for the `<body>` element.
 
-$body-bg:                           $white;
+$body-bg:                           #f0f0f0;
 $body-color:                        #212529;
 
 // Paragraphs
@@ -80,3 +80,7 @@ $dropdown-link-hover-bg:            rgba($white, .2);
 // Breadcrumbs
 $breadcrumb-bg:                     transparent;
 $breadcrumb-padding-x:              0;
+
+//
+$component-active-color:            $white;
+$component-active-bg:               $dark;

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

@@ -1,26 +1,37 @@
 @mixin aside-nav {
-  @extend .col-xl-4;
   font-size: small;
+  margin-top: 15px;
+  margin-left: 15px;
+  margin-bottom: $paragraph-margin-bottom;
 
-  border-left: 1px solid #eee;
+  align-self: start;
+  position: sticky;
+  top: calc(#{$navbar-brand-height + $paragraph-margin-bottom} + 10px);
 
-  @include media-breakpoint-up(xl) {
-    align-self: start;
-    position: sticky;
-    top: 90px;
+  &__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 {
-      @include media-breakpoint-up(xl) {
-        flex-direction: column;
-        max-height: 70vh;
-        overflow-y: auto;
-      }
+      flex-direction: column;
+      max-height: 65vh;
+      overflow-y: auto;
     }
   }
 
-  .top {
-    margin-top: $paragraph-margin-bottom;
+  @include media-breakpoint-up(xm) {
+    display: none;
   }
+
+  @include media-breakpoint-up(lg) {
+    display: block;
+  }
+
 }

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

@@ -0,0 +1,11 @@
+@mixin content-nav {
+  &__nav {
+    margin: 0;
+    @include media-breakpoint-up(xm) {
+      display: block;
+    }
+    @include media-breakpoint-up(lg) {
+      display: none;
+    }
+  }
+}

data/_sass/centos/mixins/_content.scss

@@ -1,8 +1,13 @@
 @mixin content {
 
+  background: #fff;
+  padding: 2.75rem;
+  margin-top: -120px;
+  min-height: 430px;
+
   h1, h2, h3, h4, h5, h6 {
     scroll-margin-top: $scroll-margin-top + 2.5;
-    &:first-child {
+    &:first-of-type {
       margin-top: 0;
       padding-top: 0;
     }
@@ -15,6 +20,7 @@
 
   img {
     @extend .img-fluid;
+    width: 100%;
   }
 
   pre {
@@ -77,5 +83,5 @@
     @extend .embed-responsive, .embed-responsive-16by9;
     margin-bottom: $line-height-base * 1em;
   }
-}
 
+}

data/_sass/centos/mixins/_post-nav-explorer.scss

@@ -0,0 +1,21 @@
+@mixin post-nav-explorer {
+  &__explorer {
+    &__newer, &__older {
+      &--disabled {
+        display: none;
+      }
+    }
+
+    &__newer {
+      margin-right: 0;
+    }
+
+    &__older {
+      margin-left: 0;
+    }
+
+    .top {
+      margin-top: 0;
+    }
+  }
+}

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-theme-centos
 version: !ruby/object:Gem::Version
-  version: 0.3.0
+  version: 0.4.0
 platform: ruby
 authors:
 - Alain Reguera Delgado
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-03-27 00:00:00.000000000 Z
+date: 2021-03-29 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -99,6 +99,8 @@ files:
 - _includes/page/alert-warning.html
 - _includes/page/figure.html
 - _includes/page/video.html
+- _includes/post-nav-explorer.html
+- _includes/post-nav.html
 - _includes/search.html
 - _includes/toc.html
 - _includes/top.html
@@ -215,8 +217,10 @@ files:
 - _sass/centos/centos.scss
 - _sass/centos/fonts/_montserrat.scss
 - _sass/centos/mixins/_aside-nav.scss
+- _sass/centos/mixins/_content-nav.scss
 - _sass/centos/mixins/_content.scss
 - _sass/centos/mixins/_link-list.scss
+- _sass/centos/mixins/_post-nav-explorer.scss
 - _sass/fontawesome/_animated.scss
 - _sass/fontawesome/_bordered-pulled.scss
 - _sass/fontawesome/_core.scss