feat: add button to copy code blocks (#228)

BREAKING CHANGE: The `--code-max-height` formatting is applied only to code blocks that use syntax highlighting, see [documentation](https://geekdocs.de/features/code-blocks/).

src/sass/_base.scss

@@ -488,6 +488,45 @@ img {
       font-size: $font-size-20;
     }
   }
+
+  &__codecontainer {
+    position: relative;
+
+    &:hover > .gdoc-post__codecopy {
+      visibility: visible;
+    }
+  }
+
+  &__codecopy {
+    visibility: hidden;
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+
+    border: $border-2 solid var(--code-copy-border-color);
+    border-radius: $border-radius;
+    width: 2.2rem;
+    height: 2.2rem;
+
+    .icon {
+      top: 0;
+      width: $font-size-20;
+      height: $font-size-20;
+      color: var(--code-copy-font-color);
+    }
+
+    &:hover {
+      cursor: pointer;
+    }
+
+    &--success {
+      border-color: var(--code-copy-success-color);
+
+      .icon {
+        color: var(--code-copy-success-color);
+      }
+    }
+  }
 }
 
 .gdoc-footer {

src/sass/_chroma_base.scss

@@ -35,6 +35,9 @@
   }
 
   .highlight {
+    overflow: auto;
+    max-height: var(--code-max-height);
+
     pre.chroma {
       margin: 0;
     }

src/sass/_color_mode.scss

@@ -18,6 +18,10 @@
   --code-accent-color-lite: #{darken($code-background, 2)};
   --code-font-color: #{$code-font-color};
 
+  --code-copy-font-color: #{lighten($body-font-color, 24)};
+  --code-copy-border-color: #{lighten($body-font-color, 48)};
+  --code-copy-success-color: #{map.get($hint-colors, "ok")};
+
   --accent-color: #{$gray-200};
   --accent-color-lite: #{$gray-100};
 
@@ -61,6 +65,10 @@
   --code-accent-color-lite: #{darken($code-background-dark, 2)};
   --code-font-color: #{$code-font-color-dark};
 
+  --code-copy-font-color: #{lighten($body-font-color, 48)};
+  --code-copy-border-color: #{lighten($body-font-color, 32)};
+  --code-copy-success-color: #{map.get($hint-colors, "ok")};
+
   --accent-color: #{darken($body-background-dark, 4)};
   --accent-color-lite: #{darken($body-background-dark, 2)};
 
@@ -78,7 +86,8 @@
   }
 
   .gdoc-markdown {
-    .gdoc-hint {
+    .gdoc-hint,
+    .gdoc-post__codecopy--success {
       filter: saturate(2.5) brightness(0.85);
     }
   }

src/sass/_markdown.scss

@@ -180,8 +180,6 @@
     display: block;
     padding: 1rem;
     width: 100%;
-    overflow: auto;
-    max-height: var(--code-max-height);
   }
 
   &__align {

src/sass/_utils.scss

@@ -62,7 +62,7 @@
 }
 
 .hidden {
-  display: none;
+  display: none !important;
 }
 
 .svg-sprite {

src/sass/main.scss

@@ -1,3 +1,5 @@
+@use "sass:map";
+
 @import "_defaults";
 @import "_color_mode";
 @import "_chroma_base";