customized code block scrollbars

assets/styles/layouts/_layout-article.scss

@@ -155,9 +155,10 @@
 
   pre {
     margin: 2rem 0 3rem;
-    padding: 1.5em;
+    padding: 1.5rem 1.5rem 1.25rem;
     border-radius: $border-radius;
-    overflow: scroll;
+    overflow-x: scroll;
+    overflow-y: hidden;
     code { padding: 0; }
   }
 
@@ -169,7 +170,8 @@
     border-spacing: 0;
     color: $article-text;
     max-width: 100%;
-    overflow-x: auto;
+    overflow-x: scroll;
+    overflow-y: hidden;
     box-shadow: 1px 3px 10px $article-shadow;
     border-radius: ($border-radius * 1.5);
 
@@ -327,6 +329,7 @@
   }
 
   ///////////////////////////////// Enterprise /////////////////////////////////
+
   #enterprise-msg {
     border-color: $article-enterprise-base;
     background: rgba($article-enterprise-base, .15);
@@ -516,6 +519,16 @@
     }
 	}
 
+  ///////////////////////////////// Scroll Bars //////////////////////////////////
+  pre {
+    @include scrollbar($article-code-bg, $article-code-scrollbar);
+  }
+  .note pre {
+    @include scrollbar($article-note-code-bg, $article-note-code-scrollbar);
+  }
+  .warn pre {
+    @include scrollbar($article-warn-code-bg, $article-warn-code-scrollbar);
+  }
 }
 
 

assets/styles/layouts/_layout-global.scss

@@ -38,7 +38,8 @@ a {
 
 ///  Styles for the placeholder homepage only viewalbe with running locally ///
 .home-placeholder {
-  max-width: 400px;
+  max-width: 480px;
+  padding: 0 1.5rem;
   margin: 20vh auto 0;
   color: $article-text;
   text-align:center;

assets/styles/styles-default.scss

@@ -2,7 +2,8 @@
 
 // Import Tools
 @import "tools/icomoon";
-@import "tools/media-query-mixins.scss";
+@import "tools/media-queries.scss";
+@import "tools/mixins.scss";
 
 // Import default dark theme
 @import "themes/theme-dark.scss";

assets/styles/themes/_theme-dark.scss

@@ -52,6 +52,7 @@ $article-code-accent6: $b-pool !default;
 $article-code-accent7: #e90 !default;
 $article-code-select: $b-pool !default;
 $article-code-hover: $g20-white !default;
+$article-code-scrollbar: $g7-graphite !default;
 
 // Article Tables
 $article-table-header-left: $p-planet !default;
@@ -75,6 +76,7 @@ $article-note-code-accent4: $o-ruby !default;
 $article-note-code-accent5: #ff6db0 !default;
 $article-note-code-accent6: $b-pool !default;
 $article-note-code-accent7: #e90 !default;
+$article-note-code-scrollbar: $gr-grass !default;
 
 $article-warn-base: $o-dreamsicle !default;
 $article-warn-heading: $g20-white !default;
@@ -92,6 +94,7 @@ $article-warn-code-accent4: $o-ruby !default;
 $article-warn-code-accent5: #ffb4fb !default;
 $article-warn-code-accent6: $b-pool !default;
 $article-warn-code-accent7: #e90 !default;
+$article-warn-code-scrollbar: #5f3535 !default;
 
 $article-enterprise-base: $p-star !default;
 $article-enterprise-text: $p-potassium !default;

assets/styles/themes/_theme-light.scss

@@ -51,6 +51,7 @@ $article-code-accent6: $b-ocean;
 $article-code-accent7: #e90;
 $article-code-select:  $b-pool;
 $article-code-hover: $b-sapphire;
+$article-code-scrollbar: $p-potassium;
 
 // Article Tables
 $article-table-header-left: $b-pool;
@@ -74,6 +75,7 @@ $article-note-code-accent4: $o-ruby;
 $article-note-code-accent5: #e24bbb;
 $article-note-code-accent6: #0084d6;
 $article-note-code-accent7: #e90;
+$article-note-code-scrollbar: #87DABE;
 
 $article-warn-base: $o-dreamsicle;
 $article-warn-heading: $o-fire;
@@ -91,6 +93,7 @@ $article-warn-code-accent4: $o-ruby;
 $article-warn-code-accent5: #6a0a6f;
 $article-warn-code-accent6: #357ae8;
 $article-warn-code-accent7: #e90;
+$article-warn-code-scrollbar: #FFB1B1;
 
 $article-enterprise-base: $p-comet;
 $article-enterprise-text: $p-star;

assets/styles/tools/media-queries.scss

@@ -0,0 +1,24 @@
+$small-max: 600px;
+$medium-min: ($small-max + 1);
+$medium-max: 800px;
+$large-min: ($medium-max + 1);
+$large-max: 1280px;
+$xlarge-min: 1290px;
+
+@mixin media($size) {
+  @if $size == small {
+    @media (max-width: $small-max) { @content ; }
+  }
+  @else if $size == medium {
+    @media (max-width: $medium-max) { @content ; }
+  }
+  @else if $size == large_min {
+    @media (min-width: $large-min) { @content ; }
+  }
+  @else if $size == large {
+    @media (max-width: $large-max) { @content ; }
+  }
+  @else if $size == xlarge {
+    @media (min-width: $xlarge-min) { @content ; }
+  }
+}

assets/styles/tools/media-query-mixins.scss

@@ -1,17 +0,0 @@
-@mixin media($size) {
-  @if $size == small {
-    @media (max-width: 600px) { @content ; }
-  }
-  @else if $size == medium {
-    @media (max-width: 800px) { @content ; }
-  }
-  @else if $size == large_min {
-    @media (min-width: 801px) { @content ; }
-  }
-  @else if $size == large {
-    @media (max-width: 1280px) { @content ; }
-  }
-  @else if $size == xlarge {
-    @media (min-width: 1690px) { @content ; }
-  }
-}

assets/styles/tools/mixins.scss

@@ -0,0 +1,15 @@
+@mixin scrollbar($bg-color, $thumb-color) {
+  &::-webkit-scrollbar {
+    background-color: rgba($bg-color, 0);
+    width: 12px;
+    height: 12px;
+  }
+  &::-webkit-scrollbar-track {
+    background-color: rgba($bg-color, 0);
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: $thumb-color;
+    border: 3px solid $bg-color;
+    border-radius: 6px;
+  }
+}