Copy btn on code blocks, tweaked code block styling

_sass/_base.scss

@@ -151,71 +151,6 @@ blockquote {
   }
 }
 
-/**
- * Code formatting
- */
-pre,
-code {
-  font-size: 0.9375em;
-  border: 1px solid hsla(0, 0%, 100%, 0.1);
-  padding: 3em;
-  // background-color: var(--background-color);
-}
-
-code {
-  padding: 1px 5px;
-  background-color: rgba(255, 168, 106, 0.2);
-  color: var(--brand-color);
-  margin: 0 2px;
-  padding: 1px 6px;
-  border: none;
-}
-
-pre {
-  padding: 8px 12px;
-  padding: 1.25em;
-  overflow-x: auto;
-
-  > code {
-    background-color: unset;
-    border: 0;
-    padding-right: 0;
-    padding-left: 0;
-  }
-}
-
-.highlight {
-  position: relative;
-}
-
-.highlight > button {
-  all: unset;
-  opacity: 0;
-  position: absolute;
-  top: 1rem;
-  right: 1rem;
-  z-index: 100;
-  cursor: pointer;
-
-  background: hsla(0, 0%, 87.8%, 0.2) !important;
-  border-radius: 0 !important;
-  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2) !important;
-  color: #bbb !important;
-  font-size: 0.8em !important;
-  margin: 6px !important;
-  padding: 10px !important;
-  transition: opacity 0.5s ease;
-}
-
-.highlight:hover > button {
-  opacity: 1;
-}
-
-.highlight > button:active,
-.highlight > button:focus {
-  opacity: 1;
-}
-
 /**
  * Clearfix
  */

_sass/_header.scss

@@ -44,9 +44,9 @@
   @include media-query($on-palm) {
     position: absolute;
     top: 9px;
-    right: calc(var(--spacing-unit) / 2);
+    right: 0;
     background-color: $background-color;
-    border: 1px solid $grey-color-light;
+    border: 1px solid rgba(254, 168, 106, 0.6);
     border-radius: 5px;
     text-align: right;
 
@@ -67,9 +67,12 @@
       line-height: 0;
       padding-top: 10px;
       text-align: center;
+      -webkit-user-select: none;
+      user-select: none;
 
       > svg {
         fill: $grey-color-dark;
+        fill: var(--brand-color);
       }
     }
 

_sass/_post.scss

@@ -0,0 +1,68 @@
+/**
+ * Code formatting
+ */
+pre,
+code {
+  font-size: 0.9375em;
+  border: 1px solid hsla(0, 0%, 100%, 0.1);
+  padding: 3em;
+  // background-color: var(--background-color);
+}
+
+code {
+  padding: 1px 5px;
+  background-color: rgba(255, 168, 106, 0.2);
+  color: var(--brand-color);
+  margin: 0 2px;
+  padding: 1px 6px;
+  border: none;
+}
+
+pre {
+  padding: 8px 12px;
+  padding: 1.25em;
+  overflow-x: auto;
+
+  > code {
+    background-color: unset;
+    border: 0;
+    padding-right: 0;
+    padding-left: 0;
+  }
+}
+
+div.highlight {
+  position: relative;
+}
+
+.highlight > button {
+  all: unset;
+  opacity: 0;
+  position: absolute;
+  top: 0.3rem;
+  right: 1rem;
+  z-index: 100;
+  cursor: pointer;
+
+  background: hsla(0, 0%, 87.8%, 0.8) !important;
+  border-radius: 0 !important;
+  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.8) !important;
+  color: black;
+  font-size: 0.8em !important;
+  margin: 6px !important;
+  padding: 10px !important;
+  transition: all 0.5s ease;
+}
+
+.highlight:hover > button {
+  opacity: 1;
+}
+
+.highlight > button:active,
+.highlight > button:focus {
+  opacity: 1;
+}
+
+.changelog {
+  float: right;
+}

_sass/main.scss

@@ -74,4 +74,5 @@ $on-laptop: 800px !default;
 @import "tags";
 @import "syntax-highlighting.scss";
 @import "header.scss";
+@import "post.scss";
 

assets/scripts/copyCode.js

@@ -1,6 +1,6 @@
 // This assumes that you're using Rouge; if not, update the selector
 // const codeBlocks = document.querySelectorAll('.code-header + .highlighter-rouge');
-const codeBlocks = document.querySelectorAll('.highlight');
+const codeBlocks = document.querySelectorAll('div.highlight');
 const copyCodeButtons = document.querySelectorAll('.copy-code-button');
 
 codeBlocks.forEach((codeBlock) => {