domain-jekyll 1.2.0 → 1.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ea067cfe0dffaaae93926b33b33e569387cafe0d28c930e85b5b3cc52a66f72a
-  data.tar.gz: 463e20bc1e9f3b09cc72eade44ec9580349e52657643d469c2fecf6387c0c4b3
+  metadata.gz: e4cbc2a56c167c10a0b1c9c6b6282729845fd5a525eef1d9530931fcdafb1cfe
+  data.tar.gz: 5edf25004405c83602f0b249feff653fbb2f155bd9a58d0fd51eccfdd2bd3cac
 SHA512:
-  metadata.gz: 52e18b850917a6d55e995ef7e30b9e4211ef79f4b935108e3d057757db51a92879b33aae37faa0a3dad538b6a3f9a1aec455baee876ed9c11426c68e037c1f11
-  data.tar.gz: f9936a8608d4d7fb8a74818784392a48215fa78a8f4355e14e4c68ac09aac3bb100edcbee33d781262aca692bbf2a150129e170c56c06e37448785c164424b71
+  metadata.gz: ec0a214a90f2762deca283e35914a4f04a7c66a8962c8096d4e416ab8a83b80a859a7fac5e51a97c996b6477341065fe7534bc76f5a2abce48c12a910bf8f80d
+  data.tar.gz: 8d706bdd34b072ec5c5365cde3e6c88003177f309159d25f6b7ff7c07ac28254536f56ac39d6e601fcf3f0740d1513ab688d91feac7f6c253102fe03ee97e89a

data/CHANGELOG.md

@@ -1,4 +1,6 @@
-## [1.1.0](https://github.com/lumunix/domain/releases/tag/1.2.0)
+## [1.3.0](https://github.com/lumunix/domain/releases/tag/1.3.0)
+## [1.2.1](https://github.com/lumunix/domain/releases/tag/1.2.1)
+## [1.2.0](https://github.com/lumunix/domain/releases/tag/1.2.0)
 ## [1.1.0](https://github.com/lumunix/domain/releases/tag/1.1.0)
 ## [1.0.4](https://github.com/lumunix/domain/releases/tag/1.0.4)
 ## [1.0.3](https://github.com/lumunix/domain/releases/tag/1.0.3)

data/_includes/Content.html

@@ -136,4 +136,5 @@
         {%- endif -%}
     </div>
   </div>
+  {%- include PreviousNext.html -%}
 </div>

data/_includes/Header.html

@@ -1,7 +1,7 @@
 <header>
   <div class="main-site-subheader menu disable-select">
     <a class="menu-item" href="{{site.baseurl}}/">
-      <svg class="menu-item-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 25 25" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <svg class="menu-item-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 25 25" fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
         <path d="M20 9v11a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V9"/>
         <path d="M9 22V12h6v10M2 10.6L12 2l10 8.6"/>
       </svg>
@@ -12,41 +12,48 @@
                   xmlns="http://www.w3.org/2000/svg">
                   <path
                       d="M20.9777 21.6138V19.6138C20.9777 18.553 20.5563 17.5356 19.8061 16.7854C19.056 16.0353 18.0386 15.6138 16.9777 15.6138H8.97768C7.91682 15.6138 6.8994 16.0353 6.14926 16.7854C5.39911 17.5356 4.97768 18.553 4.97768 19.6138V21.6138"
-                      stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                      stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
                   <path
                       d="M12.9777 11.6138C15.1868 11.6138 16.9777 9.82298 16.9777 7.61385C16.9777 5.40471 15.1868 3.61385 12.9777 3.61385C10.7685 3.61385 8.97768 5.40471 8.97768 7.61385C8.97768 9.82298 10.7685 11.6138 12.9777 11.6138Z"
-                      stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                      stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
               </svg>
               <p class="menu-item-text">About</p>
       </a>
       <a class="menu-item" href="{{site.baseurl}}/posts">
             <svg class="menu-item-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 24 25" fill="none"
-                stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
                <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
                <line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line>
                <line x1="3" y1="10" x2="21" y2="10"></line>
             </svg>
             <p class="menu-item-text">Posts</p>
       </a>
+      <a class="menu-item" href="{{site.baseurl}}/tutorials">
+            <svg class="menu-item-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 24 24">
+              <path d="M4 17.162l-2 .838v-12.972l12-5.028v2.507l-10 4.19v10.465zm16-8.156v8.635l-8 3.352v-8.635l8-3.352zm2-3.006l-12 5.028v12.972l12-5.028v-12.972zm-14 3.697l10-4.19v-2.507l-12 5.028v12.972l2-.838v-10.465z"
+              stroke-width="0" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+            <p class="menu-item-text">Tutorials</p>
+      </a>
       <a class="menu-item" href="{{site.baseurl}}/tags">
               <svg class="menu-item-icon" width="18" height="19" viewBox="0 0 24 25" fill="none"
                   xmlns="http://www.w3.org/2000/svg">
-                  <path d="M4 9.5H20" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
-                  <path d="M4 15.5H20" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
-                  <path d="M10 3.5L8 21.5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
-                  <path d="M16 3.5L14 21.5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                  <path d="M4 9.5H20" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
+                  <path d="M4 15.5H20" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
+                  <path d="M10 3.5L8 21.5" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
+                  <path d="M16 3.5L14 21.5" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
               </svg>
               <p class="menu-item-text">Tags</p>
       </a>
       <a class="menu-item" href="{{site.baseurl}}/feed.xml">
               <svg class="menu-item-icon" width="18" height="19" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                   <path d="M4 11.5C6.38695 11.5 8.67613 12.4482 10.364 14.136C12.0518 15.8239 13 18.1131 13 20.5"
-                      stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                      stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
                   <path d="M4 4.5C8.24346 4.5 12.3131 6.18571 15.3137 9.18629C18.3143 12.1869 20 16.2565 20 20.5"
-                      stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                      stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
                   <path
                       d="M5 20.5C5.55228 20.5 6 20.0523 6 19.5C6 18.9477 5.55228 18.5 5 18.5C4.44772 18.5 4 18.9477 4 19.5C4 20.0523 4.44772 20.5 5 20.5Z"
-                      stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                      stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
               </svg>
               <p class="menu-item-text">RSS</p>
       </a>

data/_includes/PreviousNext.html

@@ -0,0 +1,14 @@
+{% if page.tutorial_previous or page.tutorial_next %}
+  <nav class="previousnext">
+    {% if page.tutorial_previous %}
+      <a href="{{ page.tutorial_previous | relative_url }}" class="previousnext--pager">{{ "Previous" }}</a>
+    {% else %}
+      <a href="#" class="previousnext--pager disabled">{{ "Previous" }}</a>
+    {% endif %}
+    {% if page.tutorial_next %}
+      <a href="{{ page.tutorial_next | relative_url }}" class="previousnext--pager">{{ "Next" }}</a>
+    {% else %}
+      <a href="#" class="previousnext--pager disabled">{{ "Next" }}</a>
+    {% endif %}
+  </nav>
+{% endif %}

data/_includes/TwitterEmbed.html

@@ -0,0 +1,5 @@
+<blockquote class="twitter-tweet">
+  <a href="https://twitter.com/{{ include.id }}"></a>
+</blockquote>
+
+<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

data/_includes/YoutubeEmbed.html

@@ -0,0 +1,4 @@
+<div class="embed-container">
+  <iframe src="https://www.youtube.com/embed/{{ include.id }}" width="700" height="480" frameborder="0" allowfullscreen="true">
+  </iframe>
+</div>

data/_layouts/Default.html

@@ -4,7 +4,9 @@
 <body>
 
   <div class="wrapper">
-    {{ content }}
+    {% assign content_ = content | replace: '<table', '<div class="table-wrapper"><table' %}
+    {% assign content_ = content_ | replace: '</table>', '</table></div>' %}
+    {{ content_ }}
   </div>
 
 

data/_layouts/Home.html

@@ -1,4 +1,29 @@
 ---
-layout: Sidebar
+layout: Page
 ---
-{% include Postlist.html %}
+<div id="post-wrapper">
+{% for post in paginator.posts %}
+  <article class="post feed-title-excerpt-block disable-select" data-url="{{site.url}}{{site.baseurl}}{{post.url}}">
+    {% if post.thumbnail %}
+      <a class="post-thumbnail" style="background-image: url({{"" | prepend: site.baseurl | append : post.thumbnail}})" href="{{post.url | prepend: site.baseurl}}"></a>
+    {% else %}
+    {% endif %}
+    <div class="post-content">
+      <h2 class="post-title"><a href="{{post.url | prepend: site.baseurl}}">{{post.title}}</a></h2>
+      <p>{{ post.content | strip_html | truncatewords: 60 }}</p>
+      <span class="post-date">{{post.date | date: '%Y, %b %d'}}&nbsp;&nbsp;&nbsp;—&nbsp;</span>
+      <span class="post-words">{% capture words %}{{ post.content | number_of_words }}{% endcapture %}{% unless words contains "-" %}{{ words | plus: 250 | divided_by: 250 | append: " minute read" }}{% endunless %}</span>
+
+    </div>
+  </article>
+{% endfor %}
+</div>
+
+{% case site.preferences.pagination.system %}
+  {% when "infinitescroll" %}
+    {% include InfiniteScroll.html %}
+  {% when "pagination" %}
+    {% include Pagination.html %}
+  {% else %}
+    {% include InfiniteScroll.html %}
+{% endcase %}

data/_layouts/Post.html

@@ -1,5 +1,5 @@
 ---
-layout: Sidebar
+layout: Page
 ---
 <article class="article-page">
   <div class="page-content">

data/_layouts/Tutorial.html

@@ -0,0 +1,53 @@
+---
+layout: Page
+---
+<article class="article-page">
+  <div class="page-content">
+    {% if page.header %}
+    <div class="page-header-image">
+      <figure>
+        <img class="page-image" src={{ "" | prepend: site.baseurl | append : page.header}} alt="{{page.title}}">
+      </figure>
+    </div> <!-- End Page Cover Image -->
+    {% else %}
+    {% endif %}
+    <header class="header-page">
+      <h1 class="page-title">{{page.title}}</h1>
+    </header>
+      {%- include Content.html -%}
+      <div id="post-wrapper">
+        {% for tag in site.tags %}
+          {%- if tag[0] == page.tutorial_tag -%}
+            {% for post in tag[1] %}
+            <article class="post feed-title-excerpt-block disable-select" data-url="{{site.url}}{{site.baseurl}}{{post.url}}">
+              {% if post.thumbnail %}
+                <a class="post-thumbnail" style="background-image: url({{"" | prepend: site.baseurl | append : post.thumbnail}})" href="{{post.url | prepend: site.baseurl}}"></a>
+              {% else %}
+              {% endif %}
+              <div class="post-content">
+                <h2 class="post-title"><a href="{{post.url | prepend: site.baseurl}}">{{post.title}}</a></h2>
+                <p>{{ post.content | strip_html | truncatewords: 60 }}</p>
+                <span class="post-date">{{post.date | date: '%Y, %b %d'}}&nbsp;&nbsp;&nbsp;—&nbsp;</span>
+                <span class="post-words">{% capture words %}{{ post.content | number_of_words }}{% endcapture %}{% unless words contains "-" %}{{ words | plus: 250 | divided_by: 250 | append: " minute read" }}{% endunless %}</span>
+              </div>
+            </article>
+            {% endfor %}
+          {%- endif -%}
+        {% endfor %}
+      </div>
+
+      {%- include Footer.html -%}
+
+
+      {% if site.preferences.author.enabled %}
+      {% assign author = site.authors[page.author] %}
+        {% if page.author %}
+          {% include  Author.html %}
+        {% endif %}
+      {% endif %}
+
+      {% if page.comments %}
+        {%- include Comments.html -%}
+      {% endif %}
+  </div> <!-- End Page Content -->
+</article> <!-- End Article Page -->

data/_layouts/Tutorials.html

@@ -0,0 +1,20 @@
+---
+layout: Page
+---
+<div id="post-wrapper">
+{% for tutorial in site.tutorials %}
+  <article class="post feed-title-excerpt-block disable-select" data-url="{{site.url}}{{site.baseurl}}{{tutorial.url}}">
+    {% if tutorial.thumbnail %}
+      <a class="post-thumbnail" style="background-image: url({{"" | prepend: site.baseurl | append : tutorial.thumbnail}})" href="{{tutorial.url | prepend: site.baseurl}}"></a>
+    {% else %}
+    {% endif %}
+    <div class="post-content">
+      <h2 class="post-title"><a href="{{tutorial.url | prepend: site.baseurl}}">{{tutorial.title}}</a></h2>
+      <p>{{ tutorial.content | strip_html | truncatewords: 60 }}</p>
+      <span class="post-date">{{tutorial.date | date: '%Y, %b %d'}}&nbsp;&nbsp;&nbsp;—&nbsp;</span>
+      <span class="post-words">{% capture words %}{{ tutorial.content | number_of_words }}{% endcapture %}{% unless words contains "-" %}{{ words | plus: 250 | divided_by: 250 | append: " minute read" }}{% endunless %}</span>
+
+    </div>
+  </article>
+{% endfor %}
+</div>

data/_sass/domain/_author.scss

@@ -2,7 +2,8 @@
    Author
    ========================================================================== */
 .author {
-margin: 0px 50px 50px 0px;
+  margin: 0 50px 50px 0;
+
   .author-image {
     width: 100px;
     height: 150px;
@@ -10,7 +11,6 @@ margin: 0px 50px 50px 0px;
   }
 
   .author-social {
-
     float: right;
   }
 

data/_sass/domain/_backtotop.scss

@@ -1,7 +1,7 @@
 /* ==========================================================================
    Back To Top
    ========================================================================== */
-   #back-to-top {
-     background-color: $back-to-top-color;
-     z-index: 12;
-    }
+#back-to-top {
+  background-color: $back-to-top-color;
+  z-index: 12;
+}

data/_sass/domain/_codecopy.scss

@@ -1,44 +1,44 @@
 /* ==========================================================================
    Code Copy
    ========================================================================== */
+.code-header {
+  display: flex;
+  justify-content: flex-end;
+}
 
-   .code-header {
-     display: flex;
-     justify-content: flex-end;
-   }
+.copy-code-button {
+  display: grid;
+  margin: 0 0 -15px;
+  background-color: $secondary-bg-color;
+  grid-auto-flow: column;
+  align-items: center;
+  grid-column-gap: 4px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 1rem;
+  padding: 4px 8px;
 
-   .copy-code-button {
-     display: grid;
-     margin:0px 0px -15px 0px;
-     background-color: $secondary-bg-color;
-     grid-auto-flow: column;
-     align-items: center;
-     grid-column-gap: 4px;
-     border: none;
-     border-radius: 4px;
-     cursor: pointer;
-     font-size: 1rem;
-     padding: 4px 8px;
+  &::before {
+    content: "Copy";
+  }
 
-     &::before {
-       content: "Copy";
-     }
+  &::after {
+    content: "📋";
+    display: block;
+  }
 
-     &::after {
-       content: "📋";
-       display: block;
-     }
+  &.copied {
+    &::before {
+      content: "Copied!";
+    }
 
-     &.copied {
-       &::before {
-         content: "Copied!";
-       }
+    &::after {
+      content: "✔️";
+    }
+  }
 
-       &::after {
-         content: "✔️";
-       }
-     }
-     &:hover {
-          background-color: $quaternary-bg-color;
-     }
-   }
+  &:hover {
+    background-color: $quaternary-bg-color;
+  }
+}

data/_sass/domain/_content.scss

@@ -249,7 +249,6 @@ pre code {
   overflow: auto !important;
   white-space: pre-wrap !important;
   word-wrap: break-word !important;
-
   vertical-align: middle;
   width: 100%;
   background-color: $secondary-bg-color;

data/_sass/domain/_contextmenu.scss

@@ -1,101 +1,101 @@
 /* ==========================================================================
    Context Menu
    ========================================================================== */
-   .context-menu-res {
-     display: none;
-     position: absolute;
-     z-index: 10;
-     padding: 12px 0;
-     width: 240px;
-     background-color: $primary-bg-color;
-     border: solid 1px $ternary-border-color;
-     border-radius: 5px;
-     box-shadow: 1px 1px 15px $secondary-box-shadow-color;
-   }
+.context-menu-res {
+  display: none;
+  position: absolute;
+  z-index: 10;
+  padding: 12px 0;
+  width: 240px;
+  background-color: $primary-bg-color;
+  border: solid 1px $ternary-border-color;
+  border-radius: 5px;
+  box-shadow: 1px 1px 15px $secondary-box-shadow-color;
+}
 
-   .context-menu-res li {
-     line-height: 0.8rem;
-     padding-left: 0.2rem;
-     padding-top: 0.3rem;
-     padding-bottom: 0.3rem;
-   }
+.context-menu-res li {
+  line-height: 0.8rem;
+  padding-left: 0.2rem;
+  padding-top: 0.3rem;
+  padding-bottom: 0.3rem;
+}
 
-   .context-menu-res--active {
-     display: block;
-   }
+.context-menu-res--active {
+  display: block;
+}
 
-   .context-menu-res li:hover {
-     color: $primary-text-color;
-     background-color: $secondary-bg-color;
-   }
+.context-menu-res li:hover {
+  color: $primary-text-color;
+  background-color: $secondary-bg-color;
+}
 
-   .context-menu-res li:hover > .context-menu-res__link {
-     font-weight: bold;
-   }
+.context-menu-res li:hover > .context-menu-res__link {
+  font-weight: bold;
+}
 
-   .context-menu-res__link {
-     color: $primary-text-color;
-     text-decoration: none;
-   }
-   /* context-menu styling */
-   .context-menu {
-     display: none;
-     position: absolute;
-     z-index: 10;
-     padding: 12px 0;
-     width: 177px;
-     background-color: $primary-bg-color;
-     border: solid 1px $ternary-border-color;
-     border-radius: 5px;
-     box-shadow: 1px 1px 15px $secondary-box-shadow-color;
-   }
+.context-menu-res__link {
+  color: $primary-text-color;
+  text-decoration: none;
+}
+/* context-menu styling */
+.context-menu {
+  display: none;
+  position: absolute;
+  z-index: 10;
+  padding: 12px 0;
+  width: 177px;
+  background-color: $primary-bg-color;
+  border: solid 1px $ternary-border-color;
+  border-radius: 5px;
+  box-shadow: 1px 1px 15px $secondary-box-shadow-color;
+}
 
-   .context-menu--active {
-     display: block;
-   }
+.context-menu--active {
+  display: block;
+}
 
-   .context-menu__items {
-     list-style: none;
-     margin: 0;
-     padding-left: 6px;
-     padding-right: 6px;
-   }
+.context-menu__items {
+  list-style: none;
+  margin: 0;
+  padding-left: 6px;
+  padding-right: 6px;
+}
 
-   .context-menu__item {
-     display: block;
-     margin-bottom: 4px;
-   }
+.context-menu__item {
+  display: block;
+  margin-bottom: 4px;
+}
 
-   .context-menu__item:last-child {
-     margin-bottom: 0;
-   }
+.context-menu__item:last-child {
+  margin-bottom: 0;
+}
 
-   .context-menu__link {
-     display: block;
-     padding: 4px 12px;
-     color: $primary-text-color;
-     text-decoration: none;
-     font-size: 12px;
-     font-family: $font-family !important;
-   }
+.context-menu__link {
+  display: block;
+  padding: 4px 12px;
+  color: $primary-text-color;
+  text-decoration: none;
+  font-size: 12px;
+  font-family: $font-family !important;
+}
 
-   .context-menu__link:hover {
-     color: $primary-text-color;
-     background-color: $secondary-bg-color;
-   }
+.context-menu__link:hover {
+  color: $primary-text-color;
+  background-color: $secondary-bg-color;
+}
 
-   .feed-title-excerpt-block {
-       width: 100%;
-       cursor: pointer;
-       border-top: 1px solid var(--primary-border-color);
-       border-bottom: 1px solid var(--primary-border-color);
-   }
+.feed-title-excerpt-block {
+  width: 100%;
+  cursor: pointer;
+  border-top: 1px solid var(--primary-border-color);
+  border-bottom: 1px solid var(--primary-border-color);
+}
 
-   .feed-title-excerpt-block:hover {
-       background-color: var(--secondary-bg-color);
-   }
+.feed-title-excerpt-block:hover {
+  background-color: var(--secondary-bg-color);
+}
 
-   .popup {
-     position: absolute;
-     display: none;
-   }
+.popup {
+  position: absolute;
+  display: none;
+}

data/_sass/domain/_embed.scss

@@ -0,0 +1,20 @@
+/* ==========================================================================
+   Embed
+   ========================================================================== */
+.embed-container {
+  position: relative;
+  padding-bottom: 50%;
+  height: 0;
+  overflow: hidden;
+  max-width: 100%;
+}
+
+.embed-container embed,
+.embed-container iframe,
+.embed-container object {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}

data/_sass/domain/_highlight.scss

@@ -1,31 +1,29 @@
 /* ==========================================================================
    Highlight
    ========================================================================== */
-   table.hljs-ln {
-     width: auto;
-     border-width: 0px;
-   }
-   table.hljs-ln td {
-     border-width: 0px;
-   }
+table.hljs-ln {
+  width: auto;
+  border-width: 0;
+}
 
-   /* for block of numbers */
-   .hljs-ln-numbers {
-     -webkit-touch-callout: none;
-     -webkit-user-select: none;
-     -khtml-user-select: none;
-     -moz-user-select: none;
-     -ms-user-select: none;
-     user-select: none;
-
-     text-align: center;
-     color: #ccc;
-     border-right: 1px solid #CCC !important;
-     vertical-align: top;
-   	padding-right: 5px !important;
-   }
-
-   /* for block of code */
-   .hljs-ln-code {
-     padding-left: 10px !important;
-   }
+table.hljs-ln td {
+  border-width: 0;
+}
+/* for block of numbers */
+.hljs-ln-numbers {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  text-align: center;
+  color: #ccc;
+  border-right: 1px solid #CCC !important;
+  vertical-align: top;
+  padding-right: 5px !important;
+}
+/* for block of code */
+.hljs-ln-code {
+  padding-left: 10px !important;
+}