Merge pull request #1542 from gethinode/radius

Radius
Merge branch 'main' into radius
2025-10-17 15:03:20 +00:00 · 2025-08-22 11:40:51 +02:00 · 2025-08-22 11:32:52 +02:00 · 2025-08-22 11:32:02 +02:00 · 2025-08-22 11:19:22 +02:00 · 2025-08-22 11:17:39 +02:00
32 changed files with 246 additions and 115 deletions
--- a/assets/scss/app-dart.scss
+++ b/assets/scss/app-dart.scss
@@ -24,8 +24,10 @@
@import "components/carousel.scss";
@import "components/clipboard.scss";
@import "components/command.scss";
+@import "components/docs.scss";
@import "components/feature.scss";
@import "components/footer.scss";
+@import "components/kbd.scss";
@import "components/nav.scss";
@import "components/navbar.scss";
@import "components/img.scss";
@@ -35,6 +37,7 @@
@import "components/sidebar.scss";
@import "components/syntax-dart.scss"; // note: modified for dart-sass
@import "components/table.scss";
+@import "components/toast.scss";
@import "components/timeline.scss";
@import "components/toc.scss";
@import "components/video.scss";
--- a/assets/scss/app.scss
+++ b/assets/scss/app.scss
@@ -22,8 +22,10 @@
@import "components/carousel.scss";
@import "components/clipboard.scss";
@import "components/command.scss";
+@import "components/docs.scss";
@import "components/feature.scss";
@import "components/footer.scss";
+@import "components/kbd.scss";
@import "components/nav.scss";
@import "components/navbar.scss";
@import "components/img.scss";
@@ -33,6 +35,7 @@
@import "components/sidebar.scss";
@import "components/syntax.scss";
@import "components/table.scss";
+@import "components/toast.scss";
@import "components/timeline.scss";
@import "components/toc.scss";
@import "components/video.scss";
--- a/assets/scss/common/_styles.scss
+++ b/assets/scss/common/_styles.scss
@@ -14,6 +14,10 @@ a:active {
    text-decoration: none;
 }

+div.rounded, img.rounded {
+    --bs-border-radius: #{$theme-border-radius};
+}
+
 //
 // Ensure main page is rendered to full viewport height
 //
--- a/assets/scss/common/_variables-dart.scss
+++ b/assets/scss/common/_variables-dart.scss
@@ -16,12 +16,12 @@ $font-weight-normal:            300 !default;
 $font-weight-bold:              600 !default;
 $font-weight-bolder:            bolder !default;

-$theme-border-radius:           1rem;
-
 strong {
    font-weight:                600 if($enable-important-utilities, !important, null);
 }

+$theme-border-radius:           0.375rem;
+
 $navbar-height:                 h.$navbar-height;
 $navbar-offset:                 h.$navbar-offset;
 $navbar-offset-xs:              h.$navbar-offset-xs;
--- a/assets/scss/common/_variables.scss
+++ b/assets/scss/common/_variables.scss
@@ -17,13 +17,13 @@ $font-weight-normal:            300 !default;
 $font-weight-bold:              600 !default;
 $font-weight-bolder:            bolder !default;

-$theme-border-radius:           1rem;
-
 strong {
    font-weight:                600 if($enable-important-utilities, !important, null);
 }
 // scss-docs-end font

+$theme-border-radius:           0.375rem;
+
 $white:                       #fff !default;
 $black:                       #000 !default;
 $body-bg:                     #fff !default;
--- a/assets/scss/components/_button.scss
+++ b/assets/scss/components/_button.scss
@@ -52,3 +52,7 @@ a.btn {
 .btn-xs {
  @include button-size($btn-padding-y-xs, $btn-padding-x-xs, $btn-font-size-xs, $btn-border-radius-xs);
 }
+
+.btn {
+    --bs-border-radius: #{$theme-border-radius};
+}
--- a/assets/scss/components/_card.scss
+++ b/assets/scss/components/_card.scss
@@ -6,6 +6,9 @@
 }

 .card {
+    --bs-card-border-radius: #{$theme-border-radius};
+    --bs-card-inner-border-radius: #{$theme-border-radius};
+    --bs-border-radius: #{$theme-border-radius};
    --bs-card-bg: transparent;
 }

@@ -28,6 +31,13 @@
    cursor: pointer;
 }

+.card-img-top {
+    --bs-border-radius: #{$theme-border-radius};
+
+    border-top-left-radius: var(--bs-border-radius) !important;
+    border-top-right-radius: var(--bs-border-radius) !important;
+}
+
 .card-img-wrap img {
    transition: transform 0.25s ease;
    width: 100%;
--- a/assets/scss/components/_carousel.scss
+++ b/assets/scss/components/_carousel.scss
@@ -1,3 +1,7 @@
+.carousel-inner {
+    border-radius: #{$theme-border-radius};
+}
+
 .gradient {
    width: 100%;
    height: 100%;
--- a/assets/scss/components/_docs.scss
+++ b/assets/scss/components/_docs.scss
@@ -0,0 +1,22 @@
+.docs-controls .nav-link,
+.file-controls .nav-link {
+    border-top-left-radius: #{$theme-border-radius};
+    border-top-right-radius: #{$theme-border-radius};
+    margin-left: #{$theme-border-radius};
+
+    &:hover,
+    &:focus {
+        border-bottom: 0;
+    }
+}
+
+.docs-panel,
+.file-panel {
+    border: 1px solid var(--#{$prefix}border-color);
+    overflow: hidden;
+}
+
+.docs-panel, .docs-panel .collapse,
+.file-panel, .file-panel .collapse {
+    border-radius: #{$theme-border-radius};
+}
--- a/assets/scss/components/_img.scss
+++ b/assets/scss/components/_img.scss
@@ -27,3 +27,7 @@
    width: 100vw;
    object-fit: cover;
 }
+
+.figure-caption {
+    margin-left: #{$theme-border-radius};
+}
--- a/assets/scss/components/_kbd.scss
+++ b/assets/scss/components/_kbd.scss
@@ -0,0 +1,3 @@
+kbd {
+    border-radius: #{$theme-border-radius};
+}
--- a/assets/scss/components/_nav.scss
+++ b/assets/scss/components/_nav.scss
@@ -84,6 +84,14 @@
    border-color: var(--#{$prefix}border-color);
 }

+.nav-callout, .pagination {
+    --bs-border-radius: #{$theme-border-radius};
+}
+
+.nav-callout .tab-content {
+    border-radius: #{$theme-border-radius};
+}
+
@if $enable-dark-mode {
    @include color-mode(dark) {
        .nav-callout, .tab-content {
--- a/assets/scss/components/_navbar.scss
+++ b/assets/scss/components/_navbar.scss
@@ -319,3 +319,7 @@
    position: absolute;
    z-index: $zindex-fixed;
 }
+
+.form-control.is-search {
+    border: 1px solid var(--bs-border-color) !important;
+}
--- a/assets/scss/components/_sidebar.scss
+++ b/assets/scss/components/_sidebar.scss
@@ -11,6 +11,12 @@
 }

 .sidebar-item {
+    --bs-border-radius: #{$theme-border-radius};
+    --bs-border-radius-sm: #{$theme-border-radius};
+    --bs-border-radius-lg: #{$theme-border-radius};
+    --bs-border-radius-xl: #{$theme-border-radius};
+    --bs-border-radius-xxl: #{$theme-border-radius};
+
    color: rgba(0, 0, 0, 0.65);
    margin-left: 0 !important;
    display: inline-block;
@@ -28,6 +34,8 @@
 }

 .sidebar-item-group {
+    border-radius: #{$theme-border-radius};
+
    &:hover,
    &:focus {
        color: $primary;
--- a/assets/scss/components/_syntax-dart.scss
+++ b/assets/scss/components/_syntax-dart.scss
@@ -16,6 +16,10 @@
    flex: 1;
 }

+.codeblock.syntax-highlight, .command.syntax-highlight {
+    border-radius: #{$theme-border-radius};
+}
+
 .syntax-highlight {
    background-color: var(--bs-light) if($enable-important-utilities, !important, null);
    overflow-x: auto;
--- a/assets/scss/components/_syntax.scss
+++ b/assets/scss/components/_syntax.scss
@@ -16,6 +16,10 @@
    flex: 1;
 }

+.codeblock.syntax-highlight, .command.syntax-highlight {
+    border-radius: #{$theme-border-radius};
+}
+
 .syntax-highlight {
    background-color: var(--bs-light) if($enable-important-utilities, !important, null);
    overflow-x: auto;
--- a/assets/scss/components/_timeline.scss
+++ b/assets/scss/components/_timeline.scss
@@ -26,6 +26,10 @@ $semi-circle-border: 0.2rem;

 // scss-docs-end timeline

+.timeline-container {
+    border-radius: #{$theme-border-radius}; 
+}
+
 .timeline, .timeline-sm {
    position: relative;
 }
--- a/assets/scss/components/_toast.scss
+++ b/assets/scss/components/_toast.scss
@@ -0,0 +1,4 @@
+.toast {
+    border-radius: #{$theme-border-radius};
+    overflow: hidden;
+}
--- a/assets/scss/components/_video.scss
+++ b/assets/scss/components/_video.scss
@@ -3,6 +3,7 @@
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
+    border-radius: #{$theme-border-radius};
 }

 .video-embedded > iframe {
@@ -11,7 +12,7 @@
    left: 0;
    width: 100%;
    height: 100%;
-    border:0;
+    border: 0;
 }

 // Adapted from https://github.com/gohugoio/hugo/tpl/tplimpl/embedded/templates/shortcodes/vimeo_simple.html
--- a/assets/scss/theme/fonts.scss
+++ b/assets/scss/theme/fonts.scss
@@ -10,7 +10,7 @@

 /* inter-200 - latin */
@font-face {
-    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-display: block; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 200;
@@ -23,7 +23,7 @@
  }
  /* inter-300 - latin */
  @font-face {
-    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-display: block; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300;
@@ -36,7 +36,7 @@
  }
  /* inter-regular - latin */
  @font-face {
-    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-display: block; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
@@ -49,7 +49,7 @@
  }
  /* inter-600 - latin */
  @font-face {
-    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-display: block; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
--- a/component-library/components/cta/cta.scss
+++ b/component-library/components/cta/cta.scss
@@ -2,6 +2,10 @@
    background-color: var(--#{$prefix}primary-bg-subtle);
 }

+.cta, .background-img-fluid  {
+    border-radius: #{$theme-border-radius} if($enable-important-utilities, !important, null);
+}
+
 .cta .contact-img {
    background-color: var(--#{$prefix}body-bg);
    border-radius: var(--bs-border-radius);
--- a/component-library/components/panels/panels.scss
+++ b/component-library/components/panels/panels.scss
@@ -1,3 +1,13 @@
 .panels .dropdown-toggle {
    text-decoration: none !important;
 }
+
+.panels .nav-tabs {
+    border-top-left-radius: #{$theme-border-radius};
+    border-top-right-radius: #{$theme-border-radius};
+    margin-left: #{$theme-border-radius};
+}
+
+.panels .tab-content {
+    border-radius: #{$theme-border-radius};
+}
--- a/component-library/components/video-message/video-message.bookshop.yml
+++ b/component-library/components/video-message/video-message.bookshop.yml
@@ -31,6 +31,7 @@ blueprint:
    media-id:
    autoplay:
    query-args:
+    color:
  cols:
  messages:
    - title:
--- a/component-library/components/video-message/video-message.hugo.html
+++ b/component-library/components/video-message/video-message.hugo.html
@@ -28,6 +28,7 @@
 	{{ $queryArgs := .queryArgs }}
 	{{ $border := .border }}
 	{{ $padding := .padding }}
+	{{ $color := .color }}

 	{{ if site.Params.env_bookshop_live }}
 		{{/* Define dummy content as we cannot retrieve video data in live mode */}}
@@ -36,7 +37,7 @@
 			"ratio" "21x9"
 			"wrapper" (printf "text-center mb-%d" $padding.y)) -}}
 	{{ else }}
-        <div class="video-container{{ if $border }} video-container-border{{ end}}">
+        <div class="video-container{{ if $border }} video-container-border{{ end}} {{ with $color }}bg-{{ . }}{{ end }}">
 			{{ partial "assets/video.html" (dict
 				"page"       page
 				"provider"   $provider
@@ -117,6 +118,7 @@
 				"query-args" .queryArgs
 				"border"     $.border
 				"padding"    $padding
+				"color"      .color
 			) -}}
 		{{ end }}
 		</div>
@@ -142,6 +144,7 @@
 							"query-args" .queryArgs
 							"border"     $.border
 							"padding"    $padding
+							"color"      .color
 						) -}}
 					{{ end }}
 				</div>
--- a/component-library/components/video-message/video-message.scss
+++ b/component-library/components/video-message/video-message.scss
@@ -2,6 +2,7 @@
    --bs-video-border-color: var(--bs-primary);
    --bs-video-border-width: 1rem;
    
+    border-radius: $theme-border-radius;
    position: relative;
 }

--- a/exampleSite/content/en/blocks/video-message.md
+++ b/exampleSite/content/en/blocks/video-message.md
@@ -29,6 +29,7 @@ The `video` content block renders a horizontal line to separate sections. The se
    provider: vimeo
    media-id: "55073825"
    autoplay: true
+    color: black
  messages:
    - title: First Message
      icon: fas 1
--- a/exampleSite/hugo_stats.json
+++ b/exampleSite/hugo_stats.json
@@ -98,6 +98,7 @@
      "ball",
      "bg-bg-body-tertiary",
      "bg-bg-primary-subtle",
+      "bg-black",
      "bg-body",
      "bg-body-tertiary",
      "bg-danger",
@@ -110,9 +111,7 @@
      "border-0",
      "border-1",
      "border-bottom",
-      "border-end",
      "border-none",
-      "border-start",
      "border-top",
      "bottom-0",
      "bottom-bar",
@@ -191,6 +190,7 @@
      "col-sm-6",
      "collapse",
      "collapsed",
+      "command",
      "contact-img",
      "container",
      "container-fluid",
@@ -223,6 +223,9 @@
      "display-1",
      "display-4",
      "display-6",
+      "docs",
+      "docs-controls",
+      "docs-panel",
      "dropdown",
      "dropdown-divider-bg",
      "dropdown-item",
@@ -243,6 +246,9 @@
      "fa-activity",
      "fa-address-card",
      "fa-angle-left",
+      "fa-angle-right",
+      "fa-angles-left",
+      "fa-angles-right",
      "fa-arrow-left",
      "fa-arrow-right",
      "fa-bootstrap",
@@ -298,6 +304,9 @@
      "faq",
      "fas",
      "figure-caption",
+      "file",
+      "file-controls",
+      "file-panel",
      "fixed-top",
      "flex-column",
      "flex-fill",
@@ -551,6 +560,7 @@
      "timeline-bg-primary-subtle",
      "timeline-connector-end",
      "timeline-connector-start",
+      "timeline-container",
      "timeline-description-text-end",
      "timeline-description-text-start",
      "timeline-dot",
@@ -644,11 +654,11 @@
      "docs",
      "documentation",
      "dropdown-nav-0",
-      "dropdown-panel-084bf092239e5f25a71841b46134e2b5",
-      "dropdown-panel-09e05d29554c47c7d092c3c332e8ab42",
-      "dropdown-panel-5acf6806020477b731604b7c3506126d",
-      "dropdown-panel-6bdf123559ba44e375634c7e5392b912",
-      "dropdown-panel-d09398439fd994d4aafbc4a3a9c28bf2",
+      "dropdown-panel-559429f8ed9abd968d8178a39c12161e",
+      "dropdown-panel-83b60f1acfc59ebca2632e49adc142ea",
+      "dropdown-panel-905f7532046e86d10df934d0bb7e6973",
+      "dropdown-panel-96d18c1dcc343600bc916fe2c37fa4aa",
+      "dropdown-panel-f6ad6d3ba9fb32a749be0499120c5f22",
      "elements-type",
      "entity-relationship-diagram",
      "example",
@@ -666,16 +676,19 @@
      "fab-medium",
      "fab-whatsapp",
      "fab-x-twitter",
-      "faq-c3e9e2ab69a8c88825f39038d15bc04f",
-      "faq-c3e9e2ab69a8c88825f39038d15bc04f-heading-faq-c3e9e2ab69a8c88825f39038d15bc04f",
-      "faq-c3e9e2ab69a8c88825f39038d15bc04f-item-0",
-      "faq-c3e9e2ab69a8c88825f39038d15bc04f-item-1",
-      "faq-c3e9e2ab69a8c88825f39038d15bc04f-item-2",
+      "faq-106714aa77d6de0ac39f269ae5995985",
+      "faq-106714aa77d6de0ac39f269ae5995985-heading-faq-106714aa77d6de0ac39f269ae5995985",
+      "faq-106714aa77d6de0ac39f269ae5995985-item-0",
+      "faq-106714aa77d6de0ac39f269ae5995985-item-1",
+      "faq-106714aa77d6de0ac39f269ae5995985-item-2",
      "fas-1",
      "fas-2",
      "fas-3",
      "fas-address-card",
      "fas-angle-left",
+      "fas-angle-right",
+      "fas-angles-left",
+      "fas-angles-right",
      "fas-arrow-left",
      "fas-arrow-right",
      "fas-chevron-right",
@@ -762,11 +775,11 @@
      "nav-0-btn-1",
      "nav-0-btn-2",
      "nav-nav-0",
-      "nav-panel-084bf092239e5f25a71841b46134e2b5",
-      "nav-panel-09e05d29554c47c7d092c3c332e8ab42",
-      "nav-panel-5acf6806020477b731604b7c3506126d",
-      "nav-panel-6bdf123559ba44e375634c7e5392b912",
-      "nav-panel-d09398439fd994d4aafbc4a3a9c28bf2",
+      "nav-panel-559429f8ed9abd968d8178a39c12161e",
+      "nav-panel-83b60f1acfc59ebca2632e49adc142ea",
+      "nav-panel-905f7532046e86d10df934d0bb7e6973",
+      "nav-panel-96d18c1dcc343600bc916fe2c37fa4aa",
+      "nav-panel-f6ad6d3ba9fb32a749be0499120c5f22",
      "navbar",
      "navbar-0-collapse",
      "navbar-mode",
@@ -775,36 +788,36 @@
      "navigation",
      "notification",
      "overview",
-      "panel-084bf092239e5f25a71841b46134e2b5-0",
-      "panel-084bf092239e5f25a71841b46134e2b5-1",
-      "panel-084bf092239e5f25a71841b46134e2b5-2",
-      "panel-084bf092239e5f25a71841b46134e2b5-btn-0",
-      "panel-084bf092239e5f25a71841b46134e2b5-btn-1",
-      "panel-084bf092239e5f25a71841b46134e2b5-btn-2",
-      "panel-09e05d29554c47c7d092c3c332e8ab42-0",
-      "panel-09e05d29554c47c7d092c3c332e8ab42-1",
-      "panel-09e05d29554c47c7d092c3c332e8ab42-2",
-      "panel-09e05d29554c47c7d092c3c332e8ab42-btn-0",
-      "panel-09e05d29554c47c7d092c3c332e8ab42-btn-1",
-      "panel-09e05d29554c47c7d092c3c332e8ab42-btn-2",
-      "panel-5acf6806020477b731604b7c3506126d-0",
-      "panel-5acf6806020477b731604b7c3506126d-1",
-      "panel-5acf6806020477b731604b7c3506126d-2",
-      "panel-5acf6806020477b731604b7c3506126d-btn-0",
-      "panel-5acf6806020477b731604b7c3506126d-btn-1",
-      "panel-5acf6806020477b731604b7c3506126d-btn-2",
-      "panel-6bdf123559ba44e375634c7e5392b912-0",
-      "panel-6bdf123559ba44e375634c7e5392b912-1",
-      "panel-6bdf123559ba44e375634c7e5392b912-2",
-      "panel-6bdf123559ba44e375634c7e5392b912-btn-0",
-      "panel-6bdf123559ba44e375634c7e5392b912-btn-1",
-      "panel-6bdf123559ba44e375634c7e5392b912-btn-2",
-      "panel-d09398439fd994d4aafbc4a3a9c28bf2-0",
-      "panel-d09398439fd994d4aafbc4a3a9c28bf2-1",
-      "panel-d09398439fd994d4aafbc4a3a9c28bf2-2",
-      "panel-d09398439fd994d4aafbc4a3a9c28bf2-btn-0",
-      "panel-d09398439fd994d4aafbc4a3a9c28bf2-btn-1",
-      "panel-d09398439fd994d4aafbc4a3a9c28bf2-btn-2",
+      "panel-559429f8ed9abd968d8178a39c12161e-0",
+      "panel-559429f8ed9abd968d8178a39c12161e-1",
+      "panel-559429f8ed9abd968d8178a39c12161e-2",
+      "panel-559429f8ed9abd968d8178a39c12161e-btn-0",
+      "panel-559429f8ed9abd968d8178a39c12161e-btn-1",
+      "panel-559429f8ed9abd968d8178a39c12161e-btn-2",
+      "panel-83b60f1acfc59ebca2632e49adc142ea-0",
+      "panel-83b60f1acfc59ebca2632e49adc142ea-1",
+      "panel-83b60f1acfc59ebca2632e49adc142ea-2",
+      "panel-83b60f1acfc59ebca2632e49adc142ea-btn-0",
+      "panel-83b60f1acfc59ebca2632e49adc142ea-btn-1",
+      "panel-83b60f1acfc59ebca2632e49adc142ea-btn-2",
+      "panel-905f7532046e86d10df934d0bb7e6973-0",
+      "panel-905f7532046e86d10df934d0bb7e6973-1",
+      "panel-905f7532046e86d10df934d0bb7e6973-2",
+      "panel-905f7532046e86d10df934d0bb7e6973-btn-0",
+      "panel-905f7532046e86d10df934d0bb7e6973-btn-1",
+      "panel-905f7532046e86d10df934d0bb7e6973-btn-2",
+      "panel-96d18c1dcc343600bc916fe2c37fa4aa-0",
+      "panel-96d18c1dcc343600bc916fe2c37fa4aa-1",
+      "panel-96d18c1dcc343600bc916fe2c37fa4aa-2",
+      "panel-96d18c1dcc343600bc916fe2c37fa4aa-btn-0",
+      "panel-96d18c1dcc343600bc916fe2c37fa4aa-btn-1",
+      "panel-96d18c1dcc343600bc916fe2c37fa4aa-btn-2",
+      "panel-f6ad6d3ba9fb32a749be0499120c5f22-0",
+      "panel-f6ad6d3ba9fb32a749be0499120c5f22-1",
+      "panel-f6ad6d3ba9fb32a749be0499120c5f22-2",
+      "panel-f6ad6d3ba9fb32a749be0499120c5f22-btn-0",
+      "panel-f6ad6d3ba9fb32a749be0499120c5f22-btn-1",
+      "panel-f6ad6d3ba9fb32a749be0499120c5f22-btn-2",
      "persona",
      "pie-chart",
      "pills",
--- a/layouts/_markup/render-codeblock.html
+++ b/layouts/_markup/render-codeblock.html
@@ -1,4 +1,4 @@
-<div class="mb-3 syntax-highlight">
+<div class="codeblock syntax-highlight mb-3">
    {{- $result := transform.HighlightCodeBlock . -}}
    {{- $result.Wrapped -}}
 </div>
--- a/layouts/_partials/assets/timeline.html
+++ b/layouts/_partials/assets/timeline.html
@@ -111,7 +111,7 @@
    {{ end }}

    {{/* Render default timeline */}}
-    <div class="container p-0 d-none d-md-block {{ with $background }} timeline-{{ . }} {{ . }}{{ end }}{{ with $args.class }} {{ . }}{{ end }}">
+    <div class="timeline-container container p-0 d-none d-md-block {{ with $background }} timeline-{{ . }} {{ . }}{{ end }}{{ with $args.class }} {{ . }}{{ end }}">
        {{ $title | safeHTML }}
        {{ range $index, $item := $data }}
            <div class="row timeline timeline-{{ $item.color }} timeline-dot g-0 ">
@@ -137,7 +137,7 @@
    </div>

    {{/* Render timeline for smaller devices */}}
-    <div class="container p-0 d-block d-md-none small{{ with $background }} timeline-bg-{{ . }} bg-{{ . }}{{ end }}{{ with $args.class }} {{ . }}{{ end }}">
+    <div class="timeline-container container p-0 d-block d-md-none small{{ with $background }} timeline-bg-{{ . }} bg-{{ . }}{{ end }}{{ with $args.class }} {{ . }}{{ end }}">
        {{ range $index, $item := $data }}
            <div class="row timeline-sm timeline-{{ $item.color }} timeline-dot g-0">
                {{ partial "inline/timeline-icon.html" (dict "icon" $item.icon "direction" "end" "col" 3) }}
--- a/layouts/_shortcodes/command.html
+++ b/layouts/_shortcodes/command.html
@@ -72,7 +72,7 @@
        {{- $output = (replace $output "<span class=\"c\">#" "<span class=\"c\">" | safeHTML) -}}
    {{- end -}}

-    <div class="mb-3 syntax-highlight{{ with $args.class }} {{ . }}{{ end }}">
+    <div class="command syntax-highlight mb-3{{ with $args.class }} {{ . }}{{ end }}">
        {{- $output -}}
    </div>
 {{ end }}
--- a/layouts/_shortcodes/docs.html
+++ b/layouts/_shortcodes/docs.html
@@ -71,33 +71,35 @@
    {{- $match = replace $match $captureStart "" -}}
    {{- $match = replace $match $captureEnd "" -}}

-    <ul class="nav nav-tabs{{ with $args.class }} {{ . }}{{ end }}">
-        <li class="nav-item">
-            <a class="nav-link active font-monospace" 
-                href="#body-{{ $id }}" 
-                aria-current="page" 
-                data-bs-toggle="collapse" 
-                data-bs-target=".multi-{{ $id }}" 
-                aria-expanded="false" 
-                aria-controls="body-{{ $id }} footer-{{ $id }}">
-                <small>{{ if $args.full }}{{ strings.TrimPrefix "/" (strings.TrimPrefix $basePath $file) }}{{ else }}{{ path.Base $file }}{{ end }}</small>
-            </a>
-        </li>
-    </ul>
-    <div class="border-start border-end border-bottom mb-3">
-        <div class="collapse multi-{{ $id }}{{ if $args.show }} show{{ end }} syntax-highlight" id="body-{{ $id }}">
-            {{- highlight (trim $match "\r\n") $extension "" -}}
-        </div>
-        <div class="collapse multi-{{ $id }}{{ if not $args.show }} show{{ end }} p-3" id="footer-{{ $id }}">
-            <a class="nav-link active" 
-                href="#body-{{ $id }}" 
-                aria-current="page" 
-                data-bs-toggle="collapse" 
-                data-bs-target=".multi-{{ $id }}" 
-                aria-expanded="false" 
-                aria-controls="body-{{ $id }} footer-{{ $id }}">
-                <small><i>{{ T "clickToExpand" }}</i></small>
-            </a>
+    <div class="docs">
+        <ul class="docs-controls nav nav-tabs{{ with $args.class }} {{ . }}{{ end }}">
+            <li class="nav-item">
+                <a class="nav-link active font-monospace" 
+                    href="#body-{{ $id }}" 
+                    aria-current="page" 
+                    data-bs-toggle="collapse" 
+                    data-bs-target=".multi-{{ $id }}" 
+                    aria-expanded="false" 
+                    aria-controls="body-{{ $id }} footer-{{ $id }}">
+                    <small>{{ if $args.full }}{{ strings.TrimPrefix "/" (strings.TrimPrefix $basePath $file) }}{{ else }}{{ path.Base $file }}{{ end }}</small>
+                </a>
+            </li>
+        </ul>
+        <div class="docs-panel mb-3">
+            <div class="collapse multi-{{ $id }}{{ if $args.show }} show{{ end }} syntax-highlight" id="body-{{ $id }}">
+                {{- highlight (trim $match "\r\n") $extension "" -}}
+            </div>
+            <div class="collapse multi-{{ $id }}{{ if not $args.show }} show{{ end }} p-3" id="footer-{{ $id }}">
+                <a class="nav-link active" 
+                    href="#body-{{ $id }}" 
+                    aria-current="page" 
+                    data-bs-toggle="collapse" 
+                    data-bs-target=".multi-{{ $id }}" 
+                    aria-expanded="false" 
+                    aria-controls="body-{{ $id }} footer-{{ $id }}">
+                    <small><i>{{ T "clickToExpand" }}</i></small>
+                </a>
+            </div>
        </div>
    </div>
 {{- end -}}
--- a/layouts/_shortcodes/file.html
+++ b/layouts/_shortcodes/file.html
@@ -58,33 +58,35 @@
    {{- $tmp := os.Stat $file -}}
    {{- $content := readFile $file -}}

-    <ul class="nav nav-tabs{{ with $args.class }} {{ . }}{{ end }}">
-        <li class="nav-item">
-            <a class="nav-link active font-monospace" 
-                href="#body-{{ $id }}" 
-                aria-current="page" 
-                data-bs-toggle="collapse" 
-                data-bs-target=".multi-{{ $id }}" 
-                aria-expanded="false" 
-                aria-controls="body-{{ $id }} footer-{{ $id }}">
-                <small>{{ if $args.full }}{{ strings.TrimPrefix $basePath $file }}{{ else }}{{ path.Base $file }}{{ end }}</small>
-            </a>
-        </li>
-    </ul>
-    <div class="border-start border-end border-bottom mb-3">
-        <div class="collapse multi-{{ $id }}{{ if $args.show }} show{{ end }} syntax-highlight" id="body-{{ $id }}">
-            {{- highlight (trim $content "\r\n") $lang (or $args.highlightOptions $args.options) -}}
-        </div>
-        <div class="collapse multi-{{ $id }}{{ if not $args.show }} show{{ end }} p-3" id="footer-{{ $id }}">
-            <a class="nav-link active" 
-                href="#body-{{ $id }}" 
-                aria-current="page" 
-                data-bs-toggle="collapse" 
-                data-bs-target=".multi-{{ $id }}" 
-                aria-expanded="false" 
-                aria-controls="body-{{ $id }} footer-{{ $id }}">
-                <small><i>{{ T "clickToExpand" }}</i></small>
-            </a>
+    <div class="file">
+        <ul class="file-controls nav nav-tabs{{ with $args.class }} {{ . }}{{ end }}">
+            <li class="nav-item">
+                <a class="nav-link active font-monospace" 
+                    href="#body-{{ $id }}" 
+                    aria-current="page" 
+                    data-bs-toggle="collapse" 
+                    data-bs-target=".multi-{{ $id }}" 
+                    aria-expanded="false" 
+                    aria-controls="body-{{ $id }} footer-{{ $id }}">
+                    <small>{{ if $args.full }}{{ strings.TrimPrefix $basePath $file }}{{ else }}{{ path.Base $file }}{{ end }}</small>
+                </a>
+            </li>
+        </ul>
+        <div class="file-panel mb-3">
+            <div class="collapse multi-{{ $id }}{{ if $args.show }} show{{ end }} syntax-highlight" id="body-{{ $id }}">
+                {{- highlight (trim $content "\r\n") $lang (or $args.highlightOptions $args.options) -}}
+            </div>
+            <div class="collapse multi-{{ $id }}{{ if not $args.show }} show{{ end }} p-3" id="footer-{{ $id }}">
+                <a class="nav-link active" 
+                    href="#body-{{ $id }}" 
+                    aria-current="page" 
+                    data-bs-toggle="collapse" 
+                    data-bs-target=".multi-{{ $id }}" 
+                    aria-expanded="false" 
+                    aria-controls="body-{{ $id }} footer-{{ $id }}">
+                    <small><i>{{ T "clickToExpand" }}</i></small>
+                </a>
+            </div>
        </div>
    </div>
 {{- end -}}
Author	SHA1	Message	Date
Mark Dumay	a44e5dcafc	Merge pull request #1542 from gethinode/radius Radius	2025-08-22 11:40:51 +02:00
Mark Dumay	8493154844	Merge branch 'main' into radius	2025-08-22 11:32:52 +02:00
Mark Dumay	8a8a644ccf	feat: support `theme-border-radius` for consistent styling	2025-08-22 11:32:02 +02:00
Mark Dumay	d390d2eb4e	fix: set font display to `block` to reduce layout shift	2025-08-22 11:19:22 +02:00
Mark Dumay	2e3bca1a34	fix: add border color to search input	2025-08-22 11:17:39 +02:00
Mark Dumay	9a00e6c4c1	feat: add video color argument to ease in frame content	2025-08-22 11:16:05 +02:00
Mark Dumay	3dcbe0b62c	feat: improve border radius consistency	2025-08-22 08:23:25 +02:00