docs: use a responsive image for bootstrap-logo-shadow.png (#39745)

3 files changed, 7 insertions, 1 deletions

diff --git a/site/layouts/partials/home/masthead.html b/site/layouts/partials/home/masthead.html
index ef89931b3..9509c84b4 100644
--- a/site/layouts/partials/home/masthead.html
+++ b/site/layouts/partials/home/masthead.html
@@ -5,7 +5,13 @@
         <strong class="d-sm-inline-block p-2 me-2 mb-2 mb-lg-0 rounded-3 masthead-notice">New in v5.3</strong>
         <span class="text-body-secondary">Color mode support, expanded color palette, and more!</span>
       </a>
-      <img src="/docs/{{ .Site.Params.docs_version }}/assets/brand/bootstrap-logo-shadow.png" width="200" height="165" alt="Bootstrap" class="d-none d-sm-block mx-auto mb-3">
+      <img class="d-none d-sm-block mx-auto mb-3"
+           srcset="/docs/{{ .Site.Params.docs_version }}/assets/brand/bootstrap-logo-shadow.png,
+                   /docs/{{ .Site.Params.docs_version }}/assets/brand/[email protected] 2x"
+           src="/docs/{{ .Site.Params.docs_version }}/assets/brand/bootstrap-logo-shadow.png"
+           alt="Bootstrap"
+           width="200"
+           height="165">
       <h1 class="mb-3 fw-semibold lh-1">Build fast, responsive sites with&nbsp;Bootstrap</h1>
       <p class="lead mb-4">
         Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.
diff --git a/site/static/docs/5.3/assets/brand/bootstrap-logo-shadow.png b/site/static/docs/5.3/assets/brand/bootstrap-logo-shadow.png
index cdd0c8a34..84ecffdb6 100644
--- a/site/static/docs/5.3/assets/brand/bootstrap-logo-shadow.png
+++ b/site/static/docs/5.3/assets/brand/bootstrap-logo-shadow.png
diff --git a/site/static/docs/5.3/assets/brand/[email protected] b/site/static/docs/5.3/assets/brand/[email protected]
new file mode 100644
index 000000000..cdd0c8a34
--- /dev/null
+++ b/site/static/docs/5.3/assets/brand/[email protected]