Improve collapsable code to be reusable

themes/maik-blog/assets/scss/_buttons.scss

@@ -71,31 +71,3 @@ a.button {
         padding: 14px 24px;
     }
 }
-
-.code-toolbar {
-    margin-bottom: 20px;
-
-    .toolbar-item a {
-        position: relative;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        padding: 3px 8px;
-        margin-bottom: 5px;
-        background: $light-background-secondary;
-        text-decoration: none;
-        text-align: center;
-        font-size: 13px;
-        font-weight: 500;
-        border-radius: 8px;
-        border: 1px solid transparent;
-        appearance: none;
-        cursor: pointer;
-        outline: none;
-
-        .dark-theme & {
-            background: $dark-background-secondary;
-            color: inherit;
-        }
-    }
-}

themes/maik-blog/assets/scss/_collapsible-block.scss

@@ -1,4 +1,4 @@
-.collapsable-code {
+.collapsible-block {
     position: relative;
     width: 100%;
     margin: 40px 0;
@@ -8,41 +8,50 @@
         visibility: hidden;
     }
 
-    .highlight,
-    .code-toolbar .highlight {
+    &__content {
         max-height: 80vh;
         overflow: auto;
 
-        transition: max-height 0.15s ease;
+        transition: max-height 0.15s ease, padding-top 0.15s ease,
+            padding-bottom 0.15s ease;
 
         border-bottom-left-radius: 10px;
         border-bottom-right-radius: 10px;
+
+        background-color: lighten($light-background-secondary, 5%);
+
+        .dark-theme & {
+            background-color: darken($dark-background-secondary, 6%);
+        }
+
+        padding: 0 1em;
+
+        &:has(> :last-child:nth-child(1)),
+        &:not(:has(*)) {
+            padding: 1em;
+        }
+
+        &:has(.highlight) {
+            padding: 0 !important;
+        }
     }
 
     input[type="checkbox"]:checked {
-        ~ .highlight,
-        ~ .code-toolbar .highlight {
+        ~ .collapsible-block__content {
             max-height: 0;
 
-            padding: 0;
+            padding-top: 0;
+            padding-bottom: 0;
             border-top: none;
             overflow: hidden;
         }
 
-        ~ .code-toolbar {
-            padding: 0;
-            border-top: none;
-
-            .toolbar {
-                display: none;
-            }
-        }
-
         ~ label {
             border-radius: 10px;
+            transition: border-radius 0.15s ease 0.1s;
         }
 
-        ~ label .collapsable-code__toggle:after {
+        ~ label .collapsible-block__toggle:after {
             content: attr(data-label-expand);
         }
     }
@@ -59,6 +68,7 @@
         min-height: 30px;
         margin: 0;
         cursor: pointer;
+        transition: border-radius 0s ease 0s;
 
         .dark-theme & {
             background: $dark-background-secondary;
@@ -79,7 +89,7 @@
         }
     }
 
-    &__language {
+    &__badge {
         background: $light-background;
         color: $light-color;
         border-radius: 10px;
@@ -112,8 +122,4 @@
         margin-bottom: 0;
         border-radius: 0;
     }
-
-    .code-toolbar {
-        margin: 0;
-    }
 }

themes/maik-blog/assets/scss/_main.scss

@@ -304,8 +304,9 @@ pre {
 }
 
 blockquote {
+    position: relative;
     border-left: 2px solid;
-    margin: 40px;
+    margin: 20px 40px;
     padding: 10px 20px;
 
     @media #{$media-size-phone} {
@@ -315,12 +316,12 @@ blockquote {
 
     &:before {
         content: "”";
-        font-family: Georgia, serif;
+        // font-family: Georgia, serif;
         font-display: auto;
         font-size: 3.875rem;
         position: absolute;
         left: -40px;
-        top: -20px;
+        top: -13px;
     }
 
     p:first-of-type {

themes/maik-blog/assets/scss/main.scss

@@ -16,5 +16,5 @@
 @import "portfolios";
 @import "footer";
 @import "sharing-buttons";
-@import "code";
+@import "collapsible-block";
 @import "masonry";