3 files changed, 46 insertions, 10 deletions
diff --git a/content/assets/stylesheets/_variables.scss b/content/assets/stylesheets/_variables.scss
index c8441744..382618a0 100644
--- a/content/assets/stylesheets/_variables.scss
+++ b/content/assets/stylesheets/_variables.scss
@@ -18,6 +18,9 @@ $link-code-color: rgb(55, 119, 176);
 $code-color: rgb(95, 131, 65);
 $code-background-color: rgba(95, 131, 65, .1);
 
+//copy button bkg color == pre code color
+$pre-code-color: #2b303b;
+
 // Home page colors
 $landing-background: #34373c;
 $topic-border: rgb(215, 215, 215);
diff --git a/content/assets/stylesheets/highlight.scss b/content/assets/stylesheets/highlight.scss
index ec916705..ad7deb9a 100644
--- a/content/assets/stylesheets/highlight.scss
+++ b/content/assets/stylesheets/highlight.scss
@@ -8,16 +8,18 @@ pre.highlight {
   border: 1px solid rgba(0, 0, 0, 0.15);
   box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.15);
   border-radius: 3px;
-  overflow-x: auto;
+  overflow-x: hidden;
   margin: 20px 0;
   background: #2b303b;
   color: #eff1f5;
 
   // Code itself
   code {
+    display: block;
     border-color: transparent;
     color: inherit;
     background-color: transparent;
+    overflow-x: scroll;
   }
 
   .hll { background-color: #4f5b66 }
diff --git a/content/assets/stylesheets/stylesheet.scss b/content/assets/stylesheets/stylesheet.scss
index d4ef0b0a..395c180f 100644
--- a/content/assets/stylesheets/stylesheet.scss
+++ b/content/assets/stylesheets/stylesheet.scss
@@ -1,5 +1,5 @@
 ---
-version: 33
+version: 34
 ---
 
 @import "variables";
@@ -81,22 +81,48 @@ blockquote {
 
 pre {
   background-color: $pre-background-color;
+  position: relative;
 
   code {
+    color: $code-color;
+    background-color: $code-background-color;
     word-wrap: normal;
     word-break: normal;
     white-space: pre;
   }
-}
 
-hr {
-  border: 0;
-  border-top: 1px solid $hr-border-color;
-}
+  .clip-btn {
+    display: inline-block;
+    padding: 5px;
+    padding-left: 10px;
+    right: 5px;
+    top: 5px;
+    cursor: pointer;
+    position: absolute;
+    color: $white;
+    background-color: $pre-code-color;
+    border: 0;
+    outline: 0;
 
-code {
-  color: $code-color;
-  background-color: $code-background-color;
+    i {
+      opacity: .5;
+      transition: opacity .3s ease-in;
+    }
+
+    @media all and (max-width: $mobile-width) {
+      display: none;
+    }
+  }
+
+  &:hover {
+    .clip-btn {
+      background-color: $pre-code-color;
+
+      i {
+        opacity: 1;
+      }
+    }
+  }
 }
 
 code, code span {
@@ -112,6 +138,11 @@ a > code {
   color: $link-code-color;
 }
 
+hr {
+  border: 0;
+  border-top: 1px solid $hr-border-color;
+}
+
 // Make code in headers match the font size of the given header.
 h2, h3, h4, h5, h6 {
   border-bottom: solid 1px $h-border-bottom;