Codeblocks overflow (#179)

* Polish: Codeblocks overflow

* Polish: Add shadow to codeblock + fix images

Author: lamATnginx

assets/css/v2/style.css

@@ -973,11 +973,7 @@ blockquote.side-callout {
 }
 
 .tab-content {
-  border-bottom: 1px solid black;
-
-  /* Lines extend 1rem into gutter on both sides */
-  width: calc(100% + 2rem);
-  margin-left: -1rem;
+  position: relative;
 
   .tab-pane {
     display: none;
@@ -986,15 +982,21 @@ blockquote.side-callout {
     margin-left: 1rem;
   }
 
-  .tab-pane * {
-    margin-left: 0;
-  }
-
   .active {
     display: block !important;
   }
 }
 
+.tab-content::after {
+  /* Bottom Horizontal Line for Tabs */
+  content: "";
+  position: absolute;
+  border-bottom: 1px solid black;
+  left: calc(-1 * var(--overflow-gutter-extension));
+  bottom: 0;
+  width: calc(100% + (2 * var(--overflow-gutter-extension)));
+}
+
 /* Codeblocks */
 .highlight {
   padding: 0 1rem 0 1rem;
@@ -1011,6 +1013,16 @@ blockquote.side-callout {
   grid-column: 1;
 }
 
+.code-block .code-header:not(:has(.code-type)) {
+  /* Remove margin for codeblocks without a type */
+  margin-top: -1.5rem;
+}
+
+li .code-block {
+  /* For indented code blocks, move 1rem back to align code with text from heading */
+  margin-left: -1rem;
+}
+
 .icon-code-copy {
   background-color: #f2f2f2;
   border: none;
@@ -1022,21 +1034,29 @@ blockquote.side-callout {
 }
 
 .highlight-v2 {
-  padding: 0 1rem 0 0;
-  margin: 0 -1rem 1rem -1rem;
+  margin: 0 0 1rem 0;
   border-top: 1px solid #cccccc;
   border-bottom: 1px solid #cccccc;
   overflow-x: scroll;
   scrollbar-width: none;
+  width: calc(100% + var(--overflow-gutter-extension));
+
+  background-image: linear-gradient(to right, white, white),
+    linear-gradient(to right, white, white),
+    linear-gradient(to right, rgba(165, 165, 165, 0.25), rgba(255, 255, 255, 0)),
+    linear-gradient(to left, rgba(165, 165, 165, 0.25), rgba(255, 255, 255, 0));
+  background-position: left center, right center, left center, right center;
+  background-repeat: no-repeat;
+  background-size: 12px 100%, 12px 100%, 10px 100%, 10px 100%;
+  background-attachment: local, local, scroll, scroll;
 }
 
 .highlight-v2.single-line {
   display: flex;
   align-items: center;
-  padding: 0 1rem 0 0;
   border: 1px solid #cccccc;
   overflow-x: scroll;
-  width: calc(100% + (2 * var(--overflow-gutter-extension)));
+  width: calc(100% + var(--overflow-gutter-extension));
 }
 
 .code-header {
@@ -1088,9 +1108,11 @@ figure {
   margin: 0;
 }
 
+img,
 .figure-bitmap {
   margin-bottom: 0.625rem;
   display: inline-block;
+  width: 100%;
   max-width: 100%;
 }