summaryrefslogtreecommitdiffstats
path: root/site/content/docs/5.3/examples/features
diff options
context:
space:
mode:
Diffstat (limited to '')
-rw-r--r--site/content/docs/5.3/examples/features/features.css (renamed from site/content/docs/5.2/examples/features/features.css)10
-rw-r--r--site/content/docs/5.3/examples/features/index.html (renamed from site/content/docs/5.2/examples/features/index.html)145
-rw-r--r--site/content/docs/5.3/examples/features/unsplash-photo-1.jpg (renamed from site/content/docs/5.2/examples/features/unsplash-photo-1.jpg)bin10451 -> 10451 bytes
-rw-r--r--site/content/docs/5.3/examples/features/unsplash-photo-2.jpg (renamed from site/content/docs/5.2/examples/features/unsplash-photo-2.jpg)bin113018 -> 113018 bytes
-rw-r--r--site/content/docs/5.3/examples/features/unsplash-photo-3.jpg (renamed from site/content/docs/5.2/examples/features/unsplash-photo-3.jpg)bin40607 -> 40607 bytes
5 files changed, 69 insertions, 86 deletions
diff --git a/site/content/docs/5.2/examples/features/features.css b/site/content/docs/5.3/examples/features/features.css
index b5d658f..debc263 100644
--- a/site/content/docs/5.2/examples/features/features.css
+++ b/site/content/docs/5.3/examples/features/features.css
@@ -4,16 +4,6 @@
border-radius: .75rem;
}
-.icon-link > .bi {
- margin-top: .125rem;
- margin-left: .125rem;
- fill: currentcolor;
- transition: transform .25s ease-in-out;
-}
-.icon-link:hover > .bi {
- transform: translate(.25rem);
-}
-
.icon-square {
width: 3rem;
height: 3rem;
diff --git a/site/content/docs/5.2/examples/features/index.html b/site/content/docs/5.3/examples/features/index.html
index c134a0a..02fad75 100644
--- a/site/content/docs/5.2/examples/features/index.html
+++ b/site/content/docs/5.3/examples/features/index.html
@@ -25,9 +25,6 @@ body_class: ""
<path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
<path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
</symbol>
- <symbol id="grid" viewBox="0 0 16 16">
- <path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zM2.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"/>
- </symbol>
<symbol id="collection" viewBox="0 0 16 16">
<path d="M2.5 3.5a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-11zm2-2a.5.5 0 0 1 0-1h7a.5.5 0 0 1 0 1h-7zM0 13a1.5 1.5 0 0 0 1.5 1.5h13A1.5 1.5 0 0 0 16 13V6a1.5 1.5 0 0 0-1.5-1.5h-13A1.5 1.5 0 0 0 0 6v7zm1.5.5A.5.5 0 0 1 1 13V6a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-.5.5h-13z"/>
</symbol>
@@ -35,9 +32,6 @@ body_class: ""
<path d="M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z"/>
<path d="M6.5 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
</symbol>
- <symbol id="chat-quote-fill" viewBox="0 0 16 16">
- <path d="M16 8c0 3.866-3.582 7-8 7a9.06 9.06 0 0 1-2.347-.306c-.584.296-1.925.864-4.181 1.234-.2.032-.352-.176-.273-.362.354-.836.674-1.95.77-2.966C.744 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7zM7.194 6.766a1.688 1.688 0 0 0-.227-.272 1.467 1.467 0 0 0-.469-.324l-.008-.004A1.785 1.785 0 0 0 5.734 6C4.776 6 4 6.746 4 7.667c0 .92.776 1.666 1.734 1.666.343 0 .662-.095.931-.26-.137.389-.39.804-.81 1.22a.405.405 0 0 0 .011.59c.173.16.447.155.614-.01 1.334-1.329 1.37-2.758.941-3.706a2.461 2.461 0 0 0-.227-.4zM11 9.073c-.136.389-.39.804-.81 1.22a.405.405 0 0 0 .012.59c.172.16.446.155.613-.01 1.334-1.329 1.37-2.758.942-3.706a2.466 2.466 0 0 0-.228-.4 1.686 1.686 0 0 0-.227-.273 1.466 1.466 0 0 0-.469-.324l-.008-.004A1.785 1.785 0 0 0 10.07 6c-.957 0-1.734.746-1.734 1.667 0 .92.777 1.666 1.734 1.666.343 0 .662-.095.931-.26z"/>
- </symbol>
<symbol id="cpu-fill" viewBox="0 0 16 16">
<path d="M6.5 6a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"/>
<path d="M5.5.5a.5.5 0 0 0-1 0V2A2.5 2.5 0 0 0 2 4.5H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2A2.5 2.5 0 0 0 4.5 14v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14a2.5 2.5 0 0 0 2.5-2.5h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14A2.5 2.5 0 0 0 11.5 2V.5a.5.5 0 0 0-1 0V2h-1V.5a.5.5 0 0 0-1 0V2h-1V.5a.5.5 0 0 0-1 0V2h-1V.5zm1 4.5h3A1.5 1.5 0 0 1 11 6.5v3A1.5 1.5 0 0 1 9.5 11h-3A1.5 1.5 0 0 1 5 9.5v-3A1.5 1.5 0 0 1 6.5 5z"/>
@@ -74,33 +68,33 @@ body_class: ""
<div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">
<svg class="bi" width="1em" height="1em"><use xlink:href="#collection"/></svg>
</div>
- <h3 class="fs-2">Featured title</h3>
+ <h3 class="fs-2 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
- <a href="#" class="icon-link d-inline-flex align-items-center">
+ <a href="#" class="icon-link">
Call to action
- <svg class="bi" width="1em" height="1em"><use xlink:href="#chevron-right"/></svg>
+ <svg class="bi"><use xlink:href="#chevron-right"/></svg>
</a>
</div>
<div class="feature col">
<div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">
<svg class="bi" width="1em" height="1em"><use xlink:href="#people-circle"/></svg>
</div>
- <h3 class="fs-2">Featured title</h3>
+ <h3 class="fs-2 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
- <a href="#" class="icon-link d-inline-flex align-items-center">
+ <a href="#" class="icon-link">
Call to action
- <svg class="bi" width="1em" height="1em"><use xlink:href="#chevron-right"/></svg>
+ <svg class="bi"><use xlink:href="#chevron-right"/></svg>
</a>
</div>
<div class="feature col">
<div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">
<svg class="bi" width="1em" height="1em"><use xlink:href="#toggles2"/></svg>
</div>
- <h3 class="fs-2">Featured title</h3>
+ <h3 class="fs-2 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
- <a href="#" class="icon-link d-inline-flex align-items-center">
+ <a href="#" class="icon-link">
Call to action
- <svg class="bi" width="1em" height="1em"><use xlink:href="#chevron-right"/></svg>
+ <svg class="bi"><use xlink:href="#chevron-right"/></svg>
</a>
</div>
</div>
@@ -112,11 +106,11 @@ body_class: ""
<h2 class="pb-2 border-bottom">Hanging icons</h2>
<div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
<div class="col d-flex align-items-start">
- <div class="icon-square text-bg-light d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
+ <div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
<svg class="bi" width="1em" height="1em"><use xlink:href="#toggles2"/></svg>
</div>
<div>
- <h3 class="fs-2">Featured title</h3>
+ <h3 class="fs-2 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
<a href="#" class="btn btn-primary">
Primary button
@@ -124,11 +118,11 @@ body_class: ""
</div>
</div>
<div class="col d-flex align-items-start">
- <div class="icon-square text-bg-light d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
+ <div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
<svg class="bi" width="1em" height="1em"><use xlink:href="#cpu-fill"/></svg>
</div>
<div>
- <h3 class="fs-2">Featured title</h3>
+ <h3 class="fs-2 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
<a href="#" class="btn btn-primary">
Primary button
@@ -136,11 +130,11 @@ body_class: ""
</div>
</div>
<div class="col d-flex align-items-start">
- <div class="icon-square text-bg-light d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
+ <div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
<svg class="bi" width="1em" height="1em"><use xlink:href="#tools"/></svg>
</div>
<div>
- <h3 class="fs-2">Featured title</h3>
+ <h3 class="fs-2 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
<a href="#" class="btn btn-primary">
Primary button
@@ -228,58 +222,58 @@ body_class: ""
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4 py-5">
<div class="col d-flex align-items-start">
- <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#bootstrap"/></svg>
+ <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#bootstrap"/></svg>
<div>
- <h3 class="fw-bold mb-0 fs-4">Featured title</h3>
+ <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading.</p>
</div>
</div>
<div class="col d-flex align-items-start">
- <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#cpu-fill"/></svg>
+ <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#cpu-fill"/></svg>
<div>
- <h3 class="fw-bold mb-0 fs-4">Featured title</h3>
+ <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading.</p>
</div>
</div>
<div class="col d-flex align-items-start">
- <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#calendar3"/></svg>
+ <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#calendar3"/></svg>
<div>
- <h3 class="fw-bold mb-0 fs-4">Featured title</h3>
+ <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading.</p>
</div>
</div>
<div class="col d-flex align-items-start">
- <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#home"/></svg>
+ <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#home"/></svg>
<div>
- <h3 class="fw-bold mb-0 fs-4">Featured title</h3>
+ <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading.</p>
</div>
</div>
<div class="col d-flex align-items-start">
- <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#speedometer2"/></svg>
+ <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#speedometer2"/></svg>
<div>
- <h3 class="fw-bold mb-0 fs-4">Featured title</h3>
+ <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading.</p>
</div>
</div>
<div class="col d-flex align-items-start">
- <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#toggles2"/></svg>
+ <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#toggles2"/></svg>
<div>
- <h3 class="fw-bold mb-0 fs-4">Featured title</h3>
+ <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading.</p>
</div>
</div>
<div class="col d-flex align-items-start">
- <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#geo-fill"/></svg>
+ <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#geo-fill"/></svg>
<div>
- <h3 class="fw-bold mb-0 fs-4">Featured title</h3>
+ <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading.</p>
</div>
</div>
<div class="col d-flex align-items-start">
- <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#tools"/></svg>
+ <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#tools"/></svg>
<div>
- <h3 class="fw-bold mb-0 fs-4">Featured title</h3>
+ <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading.</p>
</div>
</div>
@@ -292,54 +286,53 @@ body_class: ""
<h2 class="pb-2 border-bottom">Features with title</h2>
<div class="row row-cols-1 row-cols-md-2 align-items-md-center g-5 py-5">
- <div class="d-flex flex-column align-items-start gap-2">
- <h3 class="fw-bold">Left-aligned title explaining these awesome features</h3>
- <p class="text-muted">Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
+ <div class="col d-flex flex-column align-items-start gap-2">
+ <h2 class="fw-bold text-body-emphasis">Left-aligned title explaining these awesome features</h2>
+ <p class="text-body-secondary">Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
<a href="#" class="btn btn-primary btn-lg">Primary button</a>
</div>
- <div class="row row-cols-1 row-cols-sm-2 g-4">
- <div class="d-flex flex-column gap-2">
- <div
- class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
- <svg class="bi" width="1em" height="1em">
- <use xlink:href="#collection" />
- </svg>
+
+ <div class="col">
+ <div class="row row-cols-1 row-cols-sm-2 g-4">
+ <div class="col d-flex flex-column gap-2">
+ <div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
+ <svg class="bi" width="1em" height="1em">
+ <use xlink:href="#collection" />
+ </svg>
+ </div>
+ <h4 class="fw-semibold mb-0 text-body-emphasis">Featured title</h4>
+ <p class="text-body-secondary">Paragraph of text beneath the heading to explain the heading.</p>
</div>
- <h4 class="fw-semibold mb-0">Featured title</h4>
- <p class="text-muted">Paragraph of text beneath the heading to explain the heading.</p>
- </div>
- <div class="d-flex flex-column gap-2">
- <div
- class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
- <svg class="bi" width="1em" height="1em">
- <use xlink:href="#gear-fill" />
- </svg>
+ <div class="col d-flex flex-column gap-2">
+ <div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
+ <svg class="bi" width="1em" height="1em">
+ <use xlink:href="#gear-fill" />
+ </svg>
+ </div>
+ <h4 class="fw-semibold mb-0 text-body-emphasis">Featured title</h4>
+ <p class="text-body-secondary">Paragraph of text beneath the heading to explain the heading.</p>
</div>
- <h4 class="fw-semibold mb-0">Featured title</h4>
- <p class="text-muted">Paragraph of text beneath the heading to explain the heading.</p>
- </div>
- <div class="d-flex flex-column gap-2">
- <div
- class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
- <svg class="bi" width="1em" height="1em">
- <use xlink:href="#speedometer" />
- </svg>
+ <div class="col d-flex flex-column gap-2">
+ <div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
+ <svg class="bi" width="1em" height="1em">
+ <use xlink:href="#speedometer" />
+ </svg>
+ </div>
+ <h4 class="fw-semibold mb-0 text-body-emphasis">Featured title</h4>
+ <p class="text-body-secondary">Paragraph of text beneath the heading to explain the heading.</p>
</div>
- <h4 class="fw-semibold mb-0">Featured title</h4>
- <p class="text-muted">Paragraph of text beneath the heading to explain the heading.</p>
- </div>
- <div class="d-flex flex-column gap-2">
- <div
- class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
- <svg class="bi" width="1em" height="1em">
- <use xlink:href="#table" />
- </svg>
+ <div class="col d-flex flex-column gap-2">
+ <div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
+ <svg class="bi" width="1em" height="1em">
+ <use xlink:href="#table" />
+ </svg>
+ </div>
+ <h4 class="fw-semibold mb-0 text-body-emphasis">Featured title</h4>
+ <p class="text-body-secondary">Paragraph of text beneath the heading to explain the heading.</p>
</div>
- <h4 class="fw-semibold mb-0">Featured title</h4>
- <p class="text-muted">Paragraph of text beneath the heading to explain the heading.</p>
</div>
</div>
</div>
diff --git a/site/content/docs/5.2/examples/features/unsplash-photo-1.jpg b/site/content/docs/5.3/examples/features/unsplash-photo-1.jpg
index ed2e36a..ed2e36a 100644
--- a/site/content/docs/5.2/examples/features/unsplash-photo-1.jpg
+++ b/site/content/docs/5.3/examples/features/unsplash-photo-1.jpg
Binary files differ
diff --git a/site/content/docs/5.2/examples/features/unsplash-photo-2.jpg b/site/content/docs/5.3/examples/features/unsplash-photo-2.jpg
index b66864a..b66864a 100644
--- a/site/content/docs/5.2/examples/features/unsplash-photo-2.jpg
+++ b/site/content/docs/5.3/examples/features/unsplash-photo-2.jpg
Binary files differ
diff --git a/site/content/docs/5.2/examples/features/unsplash-photo-3.jpg b/site/content/docs/5.3/examples/features/unsplash-photo-3.jpg
index c411b17..c411b17 100644
--- a/site/content/docs/5.2/examples/features/unsplash-photo-3.jpg
+++ b/site/content/docs/5.3/examples/features/unsplash-photo-3.jpg
Binary files differ
generated by cgit v1.2.3 (git 2.39.1) at 2024-07-02 05:38:26 +0000