Codeblock: Refactored codeblock to handle all cases

Author: lamATnginx

assets/css/v2/style.css

@@ -2292,6 +2292,8 @@ a:has(code:not(pre code)) {
 .code-block {
   position: relative;
   margin: var(--margin-codeblock); /* Expand into the gutter */
+  display: flex;
+  flex-direction: column;
 
   tr::after {
     display: none;
@@ -2303,20 +2305,38 @@ a:has(code:not(pre code)) {
   }
 
   .code-type {
-    display: inline-block;
-    height: 1.5rem;
-    border-top: 1px solid oklch(var(--color-codeblock-border));
-    border-left: 1px solid oklch(var(--color-codeblock-border));
-    border-right: 1px solid oklch(var(--color-codeblock-border));
+    position: relative;
+    border: none;
     text-transform: uppercase;
-    padding: 0.15rem 0.5rem;
     font-size: 0.75rem;
-    box-sizing: border-box;
+    display: flex;
+
+    &::after {
+      content: "";
+      display: block;
+      flex: 1;
+      height: auto;
+      border-bottom: 1px solid oklch(var(--color-codeblock-border));
+    }
+
+    .title {
+      display: inline-block;
+      padding: 0.15rem 0.5rem;
+      border-top: 1px solid oklch(var(--color-codeblock-border));
+      border-left: 1px solid oklch(var(--color-codeblock-border));
+      border-right: 1px solid oklch(var(--color-codeblock-border));
+      border-bottom: none;
+    }
+
+    /* Hide the top border only if code-type exists in code-block */
+    & + .code-container {
+      border-top: none;
+    }
   }
 
   .code-container {
     box-shadow: 3px 3px 0px oklch(var(--color-shadow));
-    margin-block-start: -1px;
+    border: 1px solid oklch(var(--color-codeblock-border));
 
     &:hover {
       .code-copy-button {
@@ -2350,7 +2370,6 @@ a:has(code:not(pre code)) {
     }
 
     .code-content {
-      border: 1px solid oklch(var(--color-codeblock-border));
       box-sizing: border-box;
       overflow-x: scroll;
       scrollbar-width: none;

layouts/_default/_markup/render-codeblock.html

@@ -15,7 +15,7 @@
 {{- else -}}
 <div class="code-block">
     {{- if and (ne .Type "") (ne .Type "none") -}}
-        <span class="code-type chroma">{{ .Type }}</span>
+        <figcaption class="code-type"><span class="title chroma">{{ .Type }}</span></figcaption>
     {{- end -}}
     <div class="code-container chroma">
         <button onclick="copyToClipBoard(this, {{ $codeBlockId }})" class="code-copy-button multi-line" type="button">Copy</button>