Code Blocks Improvements

2 files changed, 36 insertions, 14 deletions

diff --git a/sass/_functions.scss b/sass/_functions.scss
index 13fd8be..2f4029a 100644
--- a/sass/_functions.scss
+++ b/sass/_functions.scss
@@ -61,6 +61,15 @@
   }
 }
 
+/**
+ * SVG Icons
+ * https://github.com/feathericons/feather
+ * https://github.com/tabler/tabler-icons/find/master
+ *
+ * https://yqnn.github.io/svg-path-editor/
+ * https://jakearchibald.github.io/svgomg/
+ * https://codepen.io/yoksel/pen/MWKeKK
+ */
 @function icon($icon-name,$stroke,$stroke-width:1,$fill:'none',$ic) {
   $sc:"%23888";//stroke color
   @if $ic {
@@ -115,6 +124,9 @@
     angr: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='m8 4 8 8-8 8'/%3E%3C/svg%3E",
     angrr: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='m4 4 8 8-8 8m9-16 8 8-8 8'/%3E%3C/svg%3E",
     angu: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='m4 16 8-8 8 8'/%3E%3C/svg%3E",
+    copy: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M11 1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1ZM7 9H3a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1v-4'/%3E%3C/svg%3E",
+    copy-yes: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E",
+    copy-err: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M1 12a1 1 0 0 0 22 0 1 1 0 0 0-22 0m11-7v9m0 5v-2'/%3E%3C/svg%3E",
     search: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Ccircle cx='9.5' cy='9.5' r='8'/%3E%3Cpath d='m23 23-9-9'/%3E%3C/svg%3E"
   );
   $icon: map-get($icons, $icon-name);
diff --git a/sass/abridge.scss b/sass/abridge.scss
index f5e623e..b50d2b6 100644
--- a/sass/abridge.scss
+++ b/sass/abridge.scss
@@ -58,6 +58,7 @@ $icon-angl: true !default;//pagination, goto previous page
 $icon-angr: true !default;//pagination, goto next page
 $icon-angrr: true !default;//pagination, goto last page
 $icon-angu: true !default;//back to top button, appears after scrolling down.
+$icon-copy: true !default;//copy to clipboard, for code blocks.
 
 $icon-ffolder: false !default;
 $icon-folder: false !default;// categories folder
@@ -859,6 +860,8 @@ $syntax: true !default;//syntax highlighting for code blocks
     padding: .3rem .2rem;
   }
   pre {
+    position: relative;
+    padding: 2rem .5rem .3rem;
     display: block;
     overflow-x: auto;
     -ms-overflow-style: scrollbar;
@@ -1158,27 +1161,29 @@ $syntax: true !default;//syntax highlighting for code blocks
   .rpad {padding-right: .2rem}
   .si {font-size: 1.5em}
   pre code[data-lang]::before {
+    content: attr(data-lang);
+    padding: .3rem;
+    display: block;
+    background-color: var(--c3);
     color: var(--h1);
+    width: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    padding-left: 1rem;
     text-transform: uppercase;
-    content: ' [' attr(data-lang) '] ' "\a\a";
-  }
-  // code copy wrapper
-  .ccw {
-    position: relative;
-  }
-  .ccw:hover {
-    .cc {
-      opacity: 1;
-    }
   }
   // code copy button
   .cc {
-    opacity: 0;
+    cursor: pointer;
     z-index: 9;
     position: absolute;
-    right: 9px;
-    top: 9px;
-    font-size: .8rem;
+    top: .3rem;
+    right: .5rem;
+  }
+  .cc:hover {
+    background: var(--a3);
+    opacity: 1;
   }
   // Table Override, this is used for Zola's linenos and hl_lines
   code {
@@ -1246,6 +1251,11 @@ $syntax: true !default;//syntax highlighting for code blocks
   @if $icon-angr {.angr { -webkit-mask: functions.icon(angr, "%23000", 3, "none", $ic) ; background: var(--f2) }}//angle right
   @if $icon-angrr {.angrr { -webkit-mask: functions.icon(angrr, "%23000", 3, "none", $ic) ; background: var(--f2) }}//angle right right
   @if $icon-angu {.angu { -webkit-mask: functions.icon(angu, "%23000", 3, "none", $ic) ; background: var(--f2) }}//angle up
+  @if $icon-copy {//copy icons for code blocks
+    .copy { -webkit-mask: functions.icon(copy, "%23000", 2, "none", $ic) ; background: var(--f2) }
+    .copy.yes { -webkit-mask: functions.icon(copy-yes, "%23000", 2, "none", $ic) ; background: var(--f2) }
+    .copy.err { -webkit-mask: functions.icon(copy-err, "%23000", 2, "none", $ic) ; background: var(--f2) }
+  }
   @if $icon-search {.search { -webkit-mask: functions.icon(search, "%23000", 3, "none", $ic) ; background: var(--f2) }}//search
   @if $icon-bitbucket {.bitbucket { background-image: functions.icon(bitbucket, "%2328f", 2, "none", $ic) }}
   @if $icon-buymeacoffee {.buymeacoffee { background-image: functions.icon(buymeacoffee, "%23777", 1, "%23fd0", $ic) }}