jekyll-theme-centos 0.5.8 → 0.6.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: daceb5812e455c146d36dc268efeb1d088faad2e1942b78b16d3772446725691
-  data.tar.gz: f623690b8fdb873dda2447df495c6c8da099a9c41acaef300667dc44c5f6c64b
+  metadata.gz: 75c6ebb3390dab7cb7398c35ee2e6004e6bc58cef61725c55a7b20489cc854b9
+  data.tar.gz: 33e0aa7400fe52cfee092e83d4128a6a652c7b5eed8a704f9cfe73e36a59fbd2
 SHA512:
-  metadata.gz: 80f3567f9d5e3da5b22dc7918239179c2ed0a72f0f90112d83ac2e305623810da30b8789c69f2a429824badb568b7c9e78795083efe602db7bd99bd91a9b8398
-  data.tar.gz: 41cc1a3a9885f3dada9fda45ef17e99755a91fd7b044adfd92d3474f3583ca8043c5a9b5a7e43df39b61e9cdd927f9bd8a349bab1adddb95e8401a94ab26d025
+  metadata.gz: bada97657460f8099b01ed3b91be287e1fde2abbde4fd619a9660adee880272d0e5ec2f7a7fa8ef3754bc960e5caaf65221b7abf7811b6a06989a657b7e06f96
+  data.tar.gz: 3c2b26425790408acb7301995e50c855417da0d52ed3d4446a2e1cee8aed1ef81928110eb8400d55fe5c4e3d26e2a8c39cd772f42a34f9fae3f16df3486343d8

data/README.md

@@ -32,13 +32,12 @@ Or install it yourself as:
 
 ## Usage
 
-TODO: Write usage instructions here. Describe your available layouts, includes,
-sass and/or assets.
+Usage documentation is available at https://gitlab.com/areguera/jekyll-theme-centos-styleguide/.
 
 ## Contributing
 
 Bug reports and pull requests are welcome on GitHub at
-https://github.com/areguera/jekyll-theme-centos. This project is intended to be
+https://gitlab.com/areguera/jekyll-theme-centos. This project is intended to be
 a safe, welcoming space for collaboration, and contributors are expected to
 adhere to the [Contributor Covenant](http://contributor-covenant.org) code of
 conduct.

data/_includes/download/header.html

@@ -2,8 +2,8 @@
 <thead>
   <tr>
     <th scope="col"><i class="fas fa-microchip"></i> Architectures</th>
-    <th scope="col"><i class="fas fa-cubes"></i> Packages</th>
-    <th scope="col"><i class="fas fa-plus-circle"></i> Others</th>
+    <th scope="col">Packages</th>
+    <th scope="col">Others</th>
   </tr>
 </thead>
 <tbody>

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

@@ -6,7 +6,7 @@
   {% assign blog_posts = site.posts | where: "category", "news-and-events" %}
   {% for i in blog_posts limit:4 %}
   {%- assign date_format = site.date_format | default: "%b %-d, %Y" -%}
-    <li><a href="{{ i.url }}">{{ i.title }}</a> &mdash; <small>{{ i.date | date: date_format }}</small> {{ i.excerpt }}</li>
+  <li><a href="{{ i.url }}">{{ i.title }}</a><br>{{ i.date | date: date_format }} &mdash; {{ i.excerpt | strip_html }}</li>
   {% endfor %}
   </ul>
 

data/_includes/home/planet.html

@@ -1,4 +1,13 @@
 <section class="home__content__planet">
+
   <h2>Around CentOS</h2>
-  <div id="rss-feeds"></div>
+
+  <ul>
+  {% assign entries = site.data.centos.planet %}
+  {% for i in entries limit:8 %}
+  {%- 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>
+
 </section>

data/_includes/navbar.html

@@ -1,6 +1,6 @@
 <nav class="navbar fixed-top navbar-expand-lg navbar-dark">
     <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 }}"></a>
+      <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>
         <div class="collapse navbar-collapse" id="navcol-1">
             <ul class="nav navbar-nav ml-auto">

data/_includes/page/code-header.html

@@ -1,4 +1,10 @@
 <div class="code-header">
+  {% if include.icon and include.title %}
+  <div class="code-header--description-{{ include.icon }}">{{ include.title }}</div>
+  {% else %}
+  <div class="code-header--description-code">Code</div>
+  {% endif %}
+  <div class="code-header--button">
     <button class="copy-code-button" aria-label="Copy code to clipboard"></button>
+  </div>
 </div>
-

data/_includes/post-nav-explorer.html

@@ -4,20 +4,20 @@
   {% 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>
+  <a href="{{ page.previous.url }}"><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>
   </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>
+    <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>
   </div>
   <div class="post__nav__explorer__index">
-    <a href="/{{ site.pagination.indexpage }}/"><button type="button" class="btn btn-light" data-toggle="tooltip" data-placement="top" title="Blog posts"><i class="fas fa-th"></i></button></a>
+    <a href="/{{ site.pagination.indexpage }}.html"><button type="button" class="btn btn-primary" 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>
+  <a href="{{ page.next.url }}"><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>
   </div>
 </nav>

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-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-primary"><i class="fas fa-arrow-circle-up"></i></button></a>
 </div>

data/_layouts/home.html

@@ -31,19 +31,6 @@
 
   <script src="/assets/js/jquery.min.js"></script>
   <script src="/assets/js/bootstrap.min.js"></script>
-  <script src="/assets/js/moment.min.js"></script>
-  <script src="/assets/js/jquery.rss.js"></script>
-  <script>
-    jQuery(function($) {
-      $("#rss-feeds").rss("https://www.centos.org/assets/planet.rss", {
-        limit: 5,
-        ssl: true,
-        dateFormat: "MMM DD, YYYY",
-        entryTemplate: '<li><a href="{url}">{title}</a> &mdash; <small>{date}</small><br/>{shortBodyPlain}</li>'
-        },
-      )
-   })
-  </script>
 </body>
 
 </html>

data/_sass/centos/_fonts.scss

@@ -1 +1,2 @@
 @import "fonts/_montserrat";
+@import "fonts/_overpass";

data/_sass/centos/_footer.scss

@@ -7,8 +7,7 @@
     }
   }
 
-	background-image: url($background-image);
-	background-color: $black;
+	background-image: url($centos-img-motif);
 	background-size: cover;
   background-position: top right;
 
@@ -17,7 +16,7 @@
   }
 
 	color:            $white;
-	background-color: $black;
+	background-color: $dark;
   font-size:        $font-size-base * 0.9;
   text-shadow: 0 0 5px $black;
 

data/_sass/centos/_header.scss

@@ -1,7 +1,7 @@
 .header {
 
   color: $white;
-  background-image: url($background-image);
+  background-image: url($centos-img-motif);
   background-color: $black;
   background-size: cover;
   background-position: top right;

data/_sass/centos/_highlighter.scss

@@ -1,360 +1,171 @@
-.highlight {
-    color: $nord-color-4;
-    background-color: $nord-color-0;
-
-    /* Text.Whitespace */
-    .w {
-        background-color: $nord-color-11;
-    }
 
-    /* Error */
-    .err {
-        color: $nord-color-11;
-    }
+/*
+ * GitHub style for Pygments syntax highlighter, for use with Jekyll
+ * Courtesy of GitHub.com 
+ * 
+ * src: https://github.com/aahan/pygments-github-style
+ */
+
+.highlight pre, pre {
+  background-color: #f8f8f8;
+  border: 1px solid #ccc;
+  padding: 6px 10px;
+  border-radius: 0 0 3px 3px;
+}
 
-    /* Other */
+.highlight {
+  .hll {
+    background-color: #f8f8f8;
+    border: 1px solid #ccc;
+    padding: 6px 10px;
+    border-radius: 3px;
+  }
+  .c {
+    color: #999988;
+    font-style: italic;
+  }
+  .err {
+    color: #a61717;
+    background-color: #e3d2d2;
+  }
+  .k, .o {
+    font-weight: bold;
+  }
+  .cm {
+    color: #999988;
+    font-style: italic;
+  }
+  .cp {
+    color: #999999;
+    font-weight: bold;
+  }
+  .c1 {
+    color: #999988;
+    font-style: italic;
+  }
+  .cs {
+    color: #999999;
+    font-weight: bold;
+    font-style: italic;
+  }
+  .gd {
+    color: #000000;
+    background-color: #ffdddd;
     .x {
-        color: $nord-color-4;
-    }
-
-    /* Keyword */
-    .k {
-        color: $nord-color-9;
-    }
-
-    /* Keyword.Constant */
-    .kc {
-        color: $nord-color-11;
-    }
-
-    /* Keyword.Declaration */
-    .kd {
-        color: $nord-color-9;
-    }
-    /* Keyword.Namespace */
-    .kn {
-        color: $nord-color-9;
-    }
-
-    /* Keyword.Pseudo */
-    .kp {
-        color: $nord-color-9;
-    }
-
-    /* Keyword.Reserved */
-    .kr {
-        color: $nord-color-10;
-    }
-
-    /* Keyword.Type */
-    .kt {
-        color: $nord-color-9;
-    }
-
-    /* Name */
-    .n {
-        color: $nord-color-4;
-    }
-
-    /* Name.Attribute */
-    .na {
-        color: $nord-color-7;
-    }
-
-    /* Name.Builtin */
-    .nb {
-        color: $nord-color-9;
-    }
-
-    /* Name.Builtin.Pseudo */
-    .bp {
-        color: $nord-color-9;
-    }
-
-    /* Name.Class */
-    .nc {
-        color: $nord-color-7;
-    }
-
-    /* Name.Constant */
-    .no {
-        color: $nord-color-7;
-    }
-
-    /* Name.Decorator */
-    .nd {
-        color: $nord-color-7;
-    }
-
-    /* Name.Entity */
-    .ni {
-        color: $nord-color-12;
-    }
-
-    /* Name.Exception */
-    .ne {
-        color: $nord-color-12;
-    }
-
-    /* Name.Function */
-    .nf {
-        color: $nord-color-8;
-    }
-
-    /* Name.Property */
-    .py {
-        color: $nord-color-9;
-    }
-
-    /* Name.Label */
-    .nl {
-        color: $nord-color-8;
-    }
-
-    /* Name.Namespace */
-    .nn {
-        color: $nord-color-8;
-    }
-
-    /* Name.Other */
-    .nx {
-        color: $nord-color-8;
-    }
-
-    /* Name.Tag */
-    .nt {
-        color: $nord-color-9;
-    }
-
-    /* Name.Variable */
-    .nv {
-        color: $nord-color-4;
-    }
-
-    /* Name.Variable.Class */
-    .vc {
-        color: $nord-color-4;
-    }
-
-    /* Name.Variable.Global */
-    .vg {
-        color: $nord-color-4;
-    }
-
-    /* Name.Variable.Instance */
-    .vi {
-        color: $nord-color-4;
-    }
-
-    /* Literal */
-    .l {
-        color: $nord-color-9;
-    }
-
-    /* Literal.Date */
-    .ld {
-        color: $nord-color-9;
-    }
-
-    /* Literal.String */
-    .s {
-        color: $nord-color-14;
-    }
-
-    /* Literal.String.Backtick */
-    .sb {
-        color: $nord-color-14;
-    }
-
-    /* Literal.String.Char */
-    .sc {
-        color: $nord-color-14;
-    }
-
-    /* Literal.String.Doc */
-    .sd {
-        color: $nord-color-14;
-    }
-
-    /* Literal.String.Double */
-    .s2 {
-        color: $nord-color-14;
-    }
-
-    /* Literal.String.Escape */
-    .se {
-        color: $nord-color-12;
-    }
-
-    /* Literal.String.Heredoc */
-    .sh {
-        color: $nord-color-14;
-    }
-
-    /* Literal.String.Interpol */
-    .si {
-        color: $nord-color-14;
-    }
-
-    /* Literal.String.Other */
-    .sx {
-        color: $nord-color-14;
-    }
-
-    /* Literal.String.Regex */
-    .sr {
-        color: $nord-color-13;
-    }
-
-    /* Literal.String.Single */
-    .s1 {
-        color: $nord-color-14;
-    }
-
-    /* Literal.String.Symbol */
-    .ss {
-        color: $nord-color-14;
-    }
-
-    /* Literal.Number */
-    .m {
-        color: $nord-color-15;
-    }
-
-    /* Literal.Number.Float */
-    .mf {
-        color: $nord-color-15;
-    }
-
-    /* Literal.Number.Hex */
-    .mh {
-        color: $nord-color-15;
-    }
-
-    /* Literal.Number.Integer */
-    .mi {
-        color: $nord-color-15;
-    }
-
-    /* Literal.Number.Integer.Long */
-    .il {
-        color: $nord-color-15;
-    }
-
-    /* Literal.Number.Oct */
-    .mo {
-        color: $nord-color-15;
-    }
-
-    /* Literal.Number.Hex */
-    .mx {
-        color: $nord-color-15;
-    }
-
-    /* Literal.Number.Bin */
-    .mb {
-        color: $nord-color-15;
-    }
-
-    /* Operator */
-    .o {
-        color: $nord-color-4;
-    }
-
-    /* Operator.Word */
-    .ow {
-        color: $nord-color-9;
-    }
-
-    /* Punctuation */
-    .p {
-        color: $nord-color-4;
-    }
-
-    /* Comment */
-    .c {
-        color: $nord-color-3;
-    }
-
-    /* Comment.Multiline */
-    .cm {
-        color: $nord-color-3;
-    }
-
-    /* Comment.Preproc */
-    .cp {
-        color: $nord-color-10;
-    }
-
-    /* Comment.Single */
-    .c1 {
-        color: $nord-color-3;
-    }
-
-    /* Comment.Special */
-    .cs {
-        color: $nord-color-3;
-    }
-
-    /* Generic */
-    .g {
-        color: $nord-color-4;
-    }
-
-    /* Generic.Deleted */
-    .gd {
-        color: $nord-color-13;
-    }
-
-    /* Generic.Emph */
-    .ge {
-        color: $nord-color-4;
-        font-style: italic;
-    }
-
-    /* Generic.Error */
-    .gr {
-        color: $nord-color-11;
-    }
-
-    /* Generic.Heading */
-    .gh {
-        color: $nord-color-8;
-    }
-
-    /* Generic.Inserted */
-    .gi {
-        color: $nord-color-4;
-    }
-
-    /* Generic.Output */
-    .go {
-        color: $nord-color-4;
-    }
-
-    /* Generic.Prompt */
-    .gp {
-        color: $nord-color-4;
-    }
-
-    /* Generic.Strong */
-    .gs {
-        color: $nord-color-4;
-        font-weight: bold;
-    }
-
-    /* Generic.Subheading */
-    .gu {
-        color: $nord-color-9;
-    }
-
-    /* Generic.Traceback */
-    .gt {
-        color: $nord-color-13;
-    }
-
-    /* Generic.Lineno */
-    .gl {
-        color: $nord-color-2;
-    }
+      color: #000000;
+      background-color: #ffaaaa;
+    }
+  }
+  .ge {
+    font-style: italic;
+  }
+  .gr {
+    color: #aa0000;
+  }
+  .gh {
+    color: #999999;
+  }
+  .gi {
+    color: #000000;
+    background-color: #ddffdd;
+    .x {
+      color: #000000;
+      background-color: #aaffaa;
+    }
+  }
+  .go {
+    color: #888888;
+  }
+  .gp {
+    color: #555555;
+  }
+  .gs {
+    font-weight: bold;
+  }
+  .gu {
+    color: #800080;
+    font-weight: bold;
+  }
+  .gt {
+    color: #aa0000;
+  }
+  .kc, .kd, .kn, .kp, .kr {
+    font-weight: bold;
+  }
+  .kt {
+    color: #445588;
+    font-weight: bold;
+  }
+  .m {
+    color: #009999;
+  }
+  .s {
+    color: #dd1144;
+  }
+  .n {
+    color: #333333;
+  }
+  .na {
+    color: teal;
+  }
+  .nb {
+    color: #0086b3;
+  }
+  .nc {
+    color: #445588;
+    font-weight: bold;
+  }
+  .no {
+    color: teal;
+  }
+  .ni {
+    color: purple;
+  }
+  .ne, .nf {
+    color: #990000;
+    font-weight: bold;
+  }
+  .nn {
+    color: #555555;
+  }
+  .nt {
+    color: navy;
+  }
+  .nv {
+    color: teal;
+  }
+  .ow {
+    font-weight: bold;
+  }
+  .w {
+    color: #bbbbbb;
+  }
+  .mf, .mh, .mi, .mo {
+    color: #009999;
+  }
+  .sb, .sc, .sd, .s2, .se, .sh, .si, .sx {
+    color: #dd1144;
+  }
+  .sr {
+    color: #009926;
+  }
+  .s1 {
+    color: #dd1144;
+  }
+  .ss {
+    color: #990073;
+  }
+  .bp {
+    color: #999999;
+  }
+  .vc, .vg, .vi {
+    color: teal;
+  }
+  .il {
+    color: #009999;
+  }
+  .gc {
+    color: #999;
+    background-color: #EAF2F5;
+  }
 }

data/_sass/centos/_main.scss

@@ -27,6 +27,7 @@
       }
     }
     &__planet, &__news-and-events {
+      a { font-weight: bold; }
       @include link-list;
     }
   }
@@ -177,16 +178,15 @@
         border: none;
         padding: 15px;
         text-align: left;
-        &__image {
-          img {
-            width: auto;
-            height: 50px;
-          }
+        img {
+          width: auto;
+          height: 50px;
         }
         &__body {
-          &__title {
+          &_title {
+            display: none;
           }
-          &__description {
+          &_description {
           }
         }
       }

data/_sass/centos/_nav.scss

@@ -1,6 +1,13 @@
 .navbar {
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
   &-dark {
-    background: $black;
+    background: $dark;
+  }
+  &-brand {
+    .manifestation {
+      color: white;
+      font-size: small;
+      padding-left: 5px;
+    }
   }
 }

data/_sass/centos/_toc.scss

@@ -20,7 +20,7 @@
     list-style: none;
     &:before {
       @extend .fas;
-      color: $secondary;
+      color: $primary;
       margin-right: 5px;
       content: fa-content($fa-var-angle-right);
     }

data/_sass/centos/_variables.scss

@@ -4,44 +4,28 @@
 // consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
 //
 
-//
 /* ----------------------------------------------------------------------
- * Color system
+ * CentOS identity
  * ---------------------------------------------------------------------- */
-$white:                             #fff;
-$black:                             #000;
-$dark:                              #343a40;
+$centos-color-0:                    #9ccd2a;
+$centos-color-1:                    #efa724;
+$centos-color-2:                    #a14f8c;
+$centos-color-3:                    #262577;
+$centos-img-logo:                   "/assets/img/logo.png";
+$centos-img-motif:                  "/assets/img/motif.png";
 
 /* ----------------------------------------------------------------------
- * Nord Identity
+ * Color system - based in the artistic motif palette and the number of
+ * occurrence each color has in the image.
  * ---------------------------------------------------------------------- */
-$nord-color-0:                      #2e3440;
-$nord-color-1:                      #3b4252;
-$nord-color-2:                      #434c5e;
-$nord-color-3:                      #4c566a;
-$nord-color-4:                      #d8dee9;
-$nord-color-5:                      #e5e9f0;
-$nord-color-6:                      #eceff4;
-$nord-color-7:                      #8fbcbb;
-$nord-color-8:                      #88c0d0;
-$nord-color-9:                      #81a1c1;
-$nord-color-10:                     #5e81ac;
-$nord-color-11:                     #bf616a;
-$nord-color-12:                     #d08770;
-$nord-color-13:                     #ebcb8b;
-$nord-color-14:                     #a3be8c;
-$nord-color-15:                     #b48ead;
+$white:                             #fff;
+$primary:                           #6226a9;
+$secondary:                         #0f1c4c;
+$dark:                              #05112b;
+
 /* ----------------------------------------------------------------------
- * CentOS Identity
+ * Header
  * ---------------------------------------------------------------------- */
-$color-0:                           #9ccd2a;
-$color-1:                           #efa724;
-$color-2:                           #a14f8c;
-$color-3:                           #262577;
-
-$logo-image:                        "/assets/img/logo.png";
-$background-image:                  "/assets/img/motif.png";
-
 $home-header-padding-top:           202px;
 $home-header-padding-bottom:        150px;
 $page-header-padding-top:           152px;
@@ -49,40 +33,40 @@ $page-header-padding-bottom:        100px;
 $heading-margin-top:                1rem;
 $scroll-margin-top:                 $heading-margin-top * 2.6;
 
-// Body
-//
-// Settings for the `<body>` element.
-
+/* ----------------------------------------------------------------------
+ * Body - settings for `<body>` element.
+ * ---------------------------------------------------------------------- */
 $body-bg:                           #f0f0f0;
-$body-color:                        #212529;
-
-// Paragraphs
-//
-// Style p element.
+$body-color:                        $dark;
 
+/* ----------------------------------------------------------------------
+ * Paragraphs
+ * ---------------------------------------------------------------------- */
 $paragraph-margin-bottom:           1.8rem;
 
-// Typography
-//
-// Font, line-height, and color for body text, headings, and more.
-
+/* ----------------------------------------------------------------------
+ * Typography - Font, line-height, and color for body text, headings, and more.
+ * ---------------------------------------------------------------------- */
 $font-family-sans-serif:            Montserrat;
 $line-height-base:                  1.75;
 $headings-line-height:              $line-height-base - 0.3;
 $headings-font-weight:              700;
 
-//
-// Dropdown menu container and contents.
-//
-$dropdown-bg:                       $black;
+/* ----------------------------------------------------------------------
+ * Dropdown menu container and contents.
+ * ---------------------------------------------------------------------- */
+$dropdown-bg:                       $dark;
 $dropdown-link-color:               $white;
 $dropdown-link-hover-color:         $white;
-$dropdown-link-hover-bg:            rgba($white, .2);
+$dropdown-link-hover-bg:            rgba($primary, .2);
 
-// Breadcrumbs
+/* ----------------------------------------------------------------------
+ * Breadcrumbs
+ * ---------------------------------------------------------------------- */
 $breadcrumb-bg:                     transparent;
 $breadcrumb-padding-x:              0;
 
-//
-//$component-active-color:            $white;
-//#$component-active-bg:               $dark;
+/* ----------------------------------------------------------------------
+ * Tables
+ * ---------------------------------------------------------------------- */
+$table-dark-bg:                     $dark;

data/_sass/centos/fonts/_overpass.scss

@@ -0,0 +1,45 @@
+$font-family-path: "../fonts/Overpass/";
+
+@font-face {
+  font-family: 'overpass-mono';
+  src: url('#{$font-family-path}overpass-mono-light.eot');
+  src: url('#{$font-family-path}overpass-mono-light.eot?#iefix') format('embedded-opentype'),
+       url('#{$font-family-path}overpass-mono-light.woff2') format('woff2'),
+       url('#{$font-family-path}overpass-mono-light.woff') format('woff'),
+       url('#{$font-family-path}overpass-mono-light.ttf')  format('truetype');
+       font-weight: 300;
+       font-style: normal;
+}
+
+@font-face {
+  font-family: 'overpass-mono';
+  src: url('#{$font-family-path}overpass-mono-regular.eot');
+  src: url('#{$font-family-path}overpass-mono-regular.eot?#iefix') format('embedded-opentype'),
+       url('#{$font-family-path}overpass-mono-regular.woff2') format('woff2'),
+       url('#{$font-family-path}overpass-mono-regular.woff') format('woff'),
+       url('#{$font-family-path}overpass-mono-regular.ttf')  format('truetype');
+       font-weight: 400;
+       font-style: normal;
+}
+
+@font-face {
+  font-family: 'overpass-mono';
+  src: url('#{$font-family-path}overpass-mono-semibold.eot');
+  src: url('#{$font-family-path}overpass-mono-semibold.eot?#iefix') format('embedded-opentype'),
+       url('#{$font-family-path}overpass-mono-semibold.woff2') format('woff2'),
+       url('#{$font-family-path}overpass-mono-semibold.woff') format('woff'),
+       url('#{$font-family-path}overpass-mono-semibold.ttf')  format('truetype');
+       font-weight: 500;
+       font-style: normal;
+}
+
+@font-face {
+  font-family: 'overpass-mono';
+  src: url('#{$font-family-path}overpass-mono-bold.eot');
+  src: url('#{$font-family-path}overpass-mono-bold.eot?#iefix') format('embedded-opentype'),
+       url('#{$font-family-path}overpass-mono-bold.woff2') format('woff2'),
+       url('#{$font-family-path}overpass-mono-bold.woff') format('woff'),
+       url('#{$font-family-path}overpass-mono-bold.ttf')  format('truetype');
+       font-weight: 600;
+       font-style: normal;
+}

data/_sass/centos/mixins/_code-header.scss

@@ -1,40 +1,60 @@
+/* code-header
+ */
 @mixin code-header {
 
   .code-header {
+    @extend .bg-light;
     display: flex;
-    justify-content: flex-end;
-    background: $black;
-  }
-
-  .copy-code-button {
-    @extend .btn, .btn-dark, .shadow-none;
-    border-radius: 0px;
-    display: grid;
-    grid-auto-flow: column;
+    justify-content: space-between;
     align-items: center;
-    grid-column-gap: 4px;
-    border: none;
-    cursor: pointer;
-    background-color: $black;
-    font-size: small;
+    padding-left: 10px;
+    font-size: small; 
 
-    &:before {
-      @extend .fas;
-      content: fa-content($fa-var-clipboard);
-    }
-    &:after {
-      content: "Copy";
-      display: block;
+    &--description {
+      &-code {
+        &:before { @extend .fas; content: fa-content($fa-var-code); padding-right: 5px; }
+      }
+      &-python {
+        &:before { @extend .fab; content: fa-content($fa-var-python); padding-right: 5px; }
+      }
+      &-terminal {
+        &:before { @extend .fas; content: fa-content($fa-var-terminal); padding-right: 5px; }
+      }
+      &-key {
+        &:before { @extend .fas; content: fa-content($fa-var-key); padding-right: 5px; }
+      }
     }
 
-    // This class will be toggled via JavaScript
-    &.copied {
-      &:before {
-        @extend .fas;
-        content: fa-content($fa-var-clipboard-check);
-      }
-      &:after {
-        content: "Copied!";
+    &--button {
+      .copy-code-button {
+        @extend .btn, .btn-light, .shadow-none, .btn-sm;
+        border-radius: 0px;
+        display: grid;
+        grid-auto-flow: column;
+        align-items: center;
+        grid-column-gap: 4px;
+        border: none;
+        cursor: pointer;
+        font-size: small;
+
+        &:before {
+          @extend .fas;
+          content: fa-content($fa-var-clipboard);
+        }
+        &:after {
+          content: "Copy";
+        }
+
+        // This class will be toggled via JavaScript
+        &.copied {
+          &:before {
+            @extend .fas;
+            content: fa-content($fa-var-clipboard-check);
+          }
+          &:after {
+            content: "Copied!";
+          }
+        }
       }
     }
   }

data/_sass/centos/mixins/_content.scss

@@ -3,7 +3,7 @@
   background: #fff;
   padding: 2.75rem;
   margin-top: -120px;
-  min-height: 430px;
+  min-height: 490px;
   box-shadow: 0px -2px 3px 0px rgba(50, 50, 50, 0.25);
 
   h1, h2, h3, h4, h5, h6 {
@@ -16,7 +16,7 @@
 
   h2 {
     margin-top: $scroll-margin-top;
-    border-bottom: 3px solid $body-color;
+    border-bottom: 3px solid $dark;
   }
 
   img {
@@ -25,8 +25,13 @@
   }
 
   pre {
+    font-family: "overpass-mono";
     @extend .highlight, .pre-scrollable;
-    padding: 1rem;
+    padding: 5px 10px;
+  }
+
+  code {
+    font-family: "overpass-mono";
   }
 
   table {

data/_sass/centos/mixins/_link-list.scss

@@ -7,9 +7,9 @@
       margin-left: 1em;
       &:before {
         @extend .fas;
-        color: $secondary;
         margin-right: 0.5em;
         margin-left: -1em;
+        color: $primary;
         content: fa-content($fa-var-angle-right);
       }
     }

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-theme-centos
 version: !ruby/object:Gem::Version
-  version: 0.5.8
+  version: 0.6.0
 platform: ruby
 authors:
 - Alain Reguera Delgado
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-04-11 00:00:00.000000000 Z
+date: 2021-05-09 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -217,6 +217,7 @@ files:
 - _sass/centos/_variables.scss
 - _sass/centos/centos.scss
 - _sass/centos/fonts/_montserrat.scss
+- _sass/centos/fonts/_overpass.scss
 - _sass/centos/mixins/_aside-nav.scss
 - _sass/centos/mixins/_code-header.scss
 - _sass/centos/mixins/_content-nav.scss
@@ -316,6 +317,22 @@ files:
 - assets/fonts/Montserrat/MontserratAlternates-ThinItalic.woff
 - assets/fonts/Montserrat/MontserratAlternates-ThinItalic.woff2
 - assets/fonts/Montserrat/README.MD
+- assets/fonts/Overpass/overpass-mono-bold.eot
+- assets/fonts/Overpass/overpass-mono-bold.ttf
+- assets/fonts/Overpass/overpass-mono-bold.woff
+- assets/fonts/Overpass/overpass-mono-bold.woff2
+- assets/fonts/Overpass/overpass-mono-light.eot
+- assets/fonts/Overpass/overpass-mono-light.ttf
+- assets/fonts/Overpass/overpass-mono-light.woff
+- assets/fonts/Overpass/overpass-mono-light.woff2
+- assets/fonts/Overpass/overpass-mono-regular.eot
+- assets/fonts/Overpass/overpass-mono-regular.ttf
+- assets/fonts/Overpass/overpass-mono-regular.woff
+- assets/fonts/Overpass/overpass-mono-regular.woff2
+- assets/fonts/Overpass/overpass-mono-semibold.eot
+- assets/fonts/Overpass/overpass-mono-semibold.ttf
+- assets/fonts/Overpass/overpass-mono-semibold.woff
+- assets/fonts/Overpass/overpass-mono-semibold.woff2
 - assets/fonts/fa-brands-400.eot
 - assets/fonts/fa-brands-400.svg
 - assets/fonts/fa-brands-400.ttf