Merge branch 'main' into remove-comments-oncopy

Author: nginx-jack

assets/css/v2/style.css

@@ -502,7 +502,6 @@ atomic-search-layout atomic-layout-section[section="search"] {
   background-color: white;
   border: black 1px solid;
   box-shadow: 3px 3px 0px var(--color-shadow);
-  z-index: 9999;
 }
 
 .product-selector p {
@@ -707,7 +706,10 @@ atomic-search-layout atomic-layout-section[section="search"] {
   position: relative;
 }
 
-.sidebar .sidebar-navigation .parent-collapsible-content::before {
+.sidebar
+  .sidebar-navigation
+  .parent-collapsible-content
+  li:not(:only-child)::before {
   content: "";
   position: absolute;
   border-left: black 1px solid;
@@ -717,7 +719,11 @@ atomic-search-layout atomic-layout-section[section="search"] {
 }
 
 /* First Sidebar Nav Horizontal Lines */
-.sidebar .sidebar-navigation .parent-collapsible-content .parent-box::before {
+.sidebar
+  .sidebar-navigation
+  .parent-collapsible-content
+  li:not(:only-child)
+  .parent-box::before {
   content: "";
   display: block;
   border-top: black 1px solid;
@@ -767,7 +773,12 @@ p {
 .breadcrumb ol {
   list-style: none;
   padding: 0;
-  display: flex;
+  display: block;
+
+  > * {
+    display: inline;
+    line-height: 25px;
+  }
 }
 
 .breadcrumb li:after {
@@ -894,16 +905,33 @@ blockquote.side-callout {
 }
 
 /* Tabs */
-
 .tabs-container {
-  position: relative;
-  z-index: -1;
-  border-bottom: 1px solid black;
+  /* border-bottom: 1px solid black; */
   white-space: nowrap;
 
   /* Lines extend 1rem into gutter on both sides */
   width: calc(100% + 2rem);
   margin-left: -1rem;
+
+  display: flex;
+  flex-direction: row;
+  align-items: end;
+
+  * {
+    flex-grow: 0;
+  }
+
+  & > :last-child {
+    /* Extend the last child */
+    flex-grow: 1;
+  }
+}
+
+.tabs-line {
+  display: block;
+  background-color: white;
+  border-bottom: 1px solid black;
+  width: 2rem;
 }
 
 .nav-tabs {
@@ -915,7 +943,7 @@ blockquote.side-callout {
   list-style: none;
   display: flex;
   justify-content: start;
-  margin: 0 1rem;
+  margin: 0;
   padding: 0;
 
   > :not(:last-child) {
@@ -925,9 +953,8 @@ blockquote.side-callout {
 
 .nav-item {
   border: 1px solid var(--color-tabs-divider);
-  border-bottom: none;
+  border-bottom: 1px solid black;
   padding: 10px;
-  position: relative;
 
   a {
     text-decoration: none;
@@ -942,22 +969,12 @@ blockquote.side-callout {
   /* Change the border colors of li that is has a child with a class "active" */
   border-top: 1px solid black;
   border-left: 1px solid black;
+  border-bottom: none;
 
   /* Change the border of next child */
   + li {
     border-left: 1px solid black;
   }
-
-  &::after {
-    content: "";
-    position: absolute;
-    display: block;
-    border-bottom: 1px solid white;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    z-index: 9999;
-  }
 }
 
 .nav-item:last-child:has(.active) {
@@ -967,10 +984,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;
+  margin-left: calc(-1 * var(--overflow-gutter-extension));
 
   .tab-pane {
     display: none;
@@ -979,10 +993,6 @@ blockquote.side-callout {
     margin-left: 1rem;
   }
 
-  .tab-pane * {
-    margin-left: 0;
-  }
-
   .active {
     display: block !important;
   }
@@ -1001,22 +1011,20 @@ blockquote.side-callout {
 }
 
 .code-block {
-  grid-column: 1;
+  position: static;
 }
 
-.icon-code-copy {
-  background-color: #f2f2f2;
-  border: none;
-  padding: 5px 10px;
-  cursor: pointer;
-  font-family: "JetBrains Mono", monospace;
-  font-size: 12px;
-  color: #000;
+.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;
 }
 
 .highlight-v2 {
-  padding: 0 1rem 0 0;
-  margin: 0 -1rem 1rem -1rem;
   border-top: 1px solid #cccccc;
   border-bottom: 1px solid #cccccc;
   overflow-x: scroll;
@@ -1026,10 +1034,8 @@ blockquote.side-callout {
 .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)));
 }
 
 .code-header {
@@ -1043,12 +1049,18 @@ blockquote.side-callout {
 
 .code-type {
   text-transform: uppercase;
-  border: 1px solid #cccccc;
-  border-bottom: 1px solid white;
-  padding: .25rem 1rem; /* Padding for button content */
+  padding: .25rem 0.25rem; /* Padding for button content */
   font-size: 12px; /* Font size */
   z-index: 9999;
-  margin-bottom: -1px;
+  position: absolute;
+  background-color: white;
+  margin: -12px 0 0 1rem;
+}
+
+.code-container:hover {
+  .code-copy-button {
+    display: block;
+  }
 }
 
 .code-copy-button {
@@ -1059,6 +1071,10 @@ blockquote.side-callout {
   font-family: "JetBrains Mono", monospace;
   font-size: 12px;
   color: #000;
+  display: none;
+  position: absolute;
+  right: calc(25% + 2rem);
+  margin-top: 8px;
 }
 
 .code-copy-button:hover {
@@ -1081,9 +1097,11 @@ figure {
   margin: 0;
 }
 
+img,
 .figure-bitmap {
   margin-bottom: 0.625rem;
   display: inline-block;
+  width: 100%;
   max-width: 100%;
 }
 

layouts/_default/_markup/render-codeblock.html

@@ -5,27 +5,23 @@
 
 {{- if $isSingleLine  -}}
 <div class="code-block" data-mf="true" style="display: none;">
-    <div class="code-header no-lang">
+    <div class="code-container">
         <button onclick="copyToClipBoard(this)" data-id-codeblock="{{ $codeBlockId }}" class="code-copy-button" type="button">Copy</button>
-    </div>
-    <div class="highlight-v2 single-line" id="{{ $codeBlockId }}">
-        {{ $result.Wrapped }}
+        <div class="highlight-v2 single-line" id="{{ $codeBlockId }}">
+            {{ $result.Wrapped }}
+        </div>
     </div>
 </div>
 {{- else -}}
 <div class="code-block" data-mf="true" style="display: none;">
     {{- if and (ne .Type "") (ne .Type "none") -}}
-    <div class="code-header">
         <span class="code-type">{{ .Type }}</span>
-        <button onclick="copyToClipBoard(this)" data-id-codeblock="{{ $codeBlockId }}" class="code-copy-button" type="button">Copy</button>
-    </div>
-    {{- else -}}
-    <div class="code-header no-lang">
-        <button onclick="copyToClipBoard(this)" data-id-codeblock="{{ $codeBlockId }}" class="code-copy-button" type="button">Copy</button>
-    </div>
     {{- end -}}
-    <div class="highlight-v2" id="{{ $codeBlockId }}">
-        {{ $result.Wrapped }}
+    <div class="code-container">
+        <button onclick="copyToClipBoard(this)" data-id-codeblock="{{ $codeBlockId }}" class="code-copy-button multi-line" type="button">Copy</button>
+        <div class="highlight-v2" id="{{ $codeBlockId }}">
+            {{ $result.Wrapped }}
+        </div>
     </div>
 </div>
 {{- end -}}

layouts/shortcodes/tabs.html

@@ -3,6 +3,7 @@
 {{- $tabs := .Scratch.Get "tabs" -}}
 {{- if .Inner -}}{{- /* We don't use the inner content, but Hugo will complain if we don't reference it. */ -}}{{- end -}}
 <div class="tabs-container">
+	<span class="tabs-line"></span>
 	<ul class="nav nav-tabs" id="{{ $tab_set_id }}" role="tablist">
 		{{- range $i, $e := $tabs -}}
 		{{- $id := printf "%s-%d" $tab_set_id $i -}}
@@ -13,6 +14,7 @@
 		{{- end -}}
 	{{- end -}}
 	</ul>
+	<span class="tabs-line"></span>
 </div>
 <div class="tab-content" id="{{ $tab_set_id }}">
 {{- range $i, $e := $tabs -}}