Update to bootstrap 5: adapt shortcode 'cardpane'

Author: deining

CHANGELOG.md

@@ -21,6 +21,9 @@ For a list of issues targeted for the next release, see the [23Q1][] milestone.
     - Dropped `$primary-light`.
     - Dropped `color-diff()`.
 
+- **[Adaptation of shortcode 'cardpane'][1376]. renamed CSS class `td-card-deck`
+  to `td-card-group`.
+
 **Other changes**:
 
 - Non-breaking changes that result from the Bootstrap v5 upgrade:

assets/scss/shortcodes/cards-pane.scss

@@ -1,4 +1,4 @@
-.td-card-deck.card-deck {
+.td-card-group.card-group {
   @extend .td-max-width-on-larger-screens;
 }
 
@@ -8,6 +8,7 @@
 
     .highlight {
       border: none;
+      margin: 0;
     }
   }
 

layouts/shortcodes/card-code.html

@@ -1,4 +1,4 @@
-<div class="td-card card">
+<div class="td-card card border me-4">
   {{ $lang := "" }}
   {{ with $.Get "lang" }}
     {{ $lang = $.Get "lang" }}
@@ -12,7 +12,7 @@
       {{- $.Get "header" | markdownify -}}
     </div>
   {{end}}
-  <div class="card-body code p-l0 m-0">
+  <div class="card-body code p-0 m-0">
       {{ with $.Inner }}
         {{- highlight $.Inner $lang $highlight -}}
       {{ end }}

layouts/shortcodes/card.html

@@ -1,4 +1,4 @@
-<div class="td-card card mb-4">
+<div class="td-card card border me-4">
   {{ with $.Get "header" }}
     <div class="card-header">
       {{ if eq $.Page.File.Ext "md" }}
@@ -19,7 +19,7 @@ <h5 class="card-title">
       </h5>
     {{ end }}
     {{ with $.Get "subtitle" }}
-      <h6 class="card-title mb-2 text-muted">
+      <h6 class="card-title ms-2 text-muted">
         {{ if eq $.Page.File.Ext "md" }}
           {{ $.Get "subtitle" | markdownify }}
         {{ else }}

layouts/shortcodes/cardpane.html

@@ -1,3 +1,3 @@
-<div class="td-card-deck card-deck mb-4">
+<div class="td-card-group card-group p-0 mb-4">
 {{- .Inner -}}
-</div>
+</div>