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";

themes/maik-blog/layouts/shortcodes/code.html

@@ -1,17 +0,0 @@
-{{ $id := delimit (shuffle (seq 1 9)) "" }}
-
-{{ if .Get "language" }}
-<div class="collapsable-code">
-  <input id="{{ .Get "id" | default $id }}" type="checkbox" {{ if ( eq ( .Get "isCollapsed" ) "true" ) -}} checked
-    {{- end }} />
-  <label for="{{ .Get "id" | default $id }}">
-    <span class="collapsable-code__language">{{ .Get "language" }}</span>
-    {{ if .Get "title" }}<span class="collapsable-code__title">{{ .Get "title" | markdownify }}</span>{{ end }}
-    <span class="collapsable-code__toggle" data-label-expand="{{ .Get "expand" | default "△" }}"
-      data-label-collapse="{{ .Get "collapse" | default "▽" }}"></span>
-  </label>
-  {{ .Inner | markdownify }}
-</div>
-{{ else }}
-{{ errorf "If you want to use the \"collapsable code\" shortcode, you need to pass a mandatory \"language\" param. The issue occured in %q (%q)" .Page.File .Page.Permalink }}
-{{ end }}

themes/maik-blog/layouts/shortcodes/collapsible-block.html

@@ -0,0 +1,17 @@
+{{ $id := delimit (shuffle (seq 1 9)) "" }}
+
+<div class="collapsible-block">
+  <input id="{{ .Get "id" | default $id }}" type="checkbox" {{ if ( eq ( .Get "isCollapsed" ) "true" ) -}} checked
+    {{- end }} />
+  <label for="{{ .Get "id" | default $id }}">
+    {{- with .Get "badge" }}
+    <span class="collapsible-block__badge">{{ . }}</span>
+    {{- end }}
+    {{ if .Get "title" }}<span class="collapsible-block__title">{{ .Get "title" | markdownify }}</span>{{ end }}
+    <span class="collapsible-block__toggle" data-label-expand="{{ .Get "expand" | default "△" }}"
+      data-label-collapse="{{ .Get "collapse" | default "▽" }}"></span>
+  </label>
+  <div class="collapsible-block__content">
+    {{ .Inner | markdownify }}
+  </div>
+</div>