Codeblock: Fix codeblock types not overlapping in callout (#416)

Author: lamATnginx

assets/css/v2/style.css

@@ -2019,10 +2019,6 @@ blockquote {
     }
   }
 
-  .callout-content {
-    margin: 0;
-  }
-
   /* To help them align with text, side callouts should not have top margin*/
   &[data-grid="last-third"] {
     --margin-callout: 0 0 0 1rem;
@@ -2296,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;
@@ -2307,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;
-    z-index: 2;
-    margin: 0 0 -1px 0;
+    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));
+    border: 1px solid oklch(var(--color-codeblock-border));
 
     &:hover {
       .code-copy-button {
@@ -2354,7 +2370,7 @@ 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;
       line-height: 150%;

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>

layouts/partials/callout.html

@@ -52,12 +52,7 @@
 
 <blockquote class="{{ $class }} note" data-title="{{ $cleanTitle }}" data-grid="{{ $dataGrid }}">
   <div class="callout-content">
-    {{- with $icon -}}
-      <i class="{{ . }}"></i>
-    {{- end -}}
-    <div class="callout-content">
-    {{ .content | markdownify }}
-    </div>
+  {{ .content | markdownify }}
   </div>
 </blockquote>