bvandevliet/Vandevliet.AerialShots.Website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Better readable carousel captions.

Browse source
This commit is contained in:
Bob Vandevliet 2024-12-07 12:22:37 +01:00
parent 427a6de376
commit 95c050561b
2 changed files with 34 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

24
public/index.html
View file

@ -111,32 +111,32 @@
</p> </p>
</div> </div>
<div class="col-md mt-0"> <div class="col-md mt-0">
<div id="carouselExampleCaptions" class="carousel slide"> <div id="carouselMyDrones" class="carousel slide">
<div class="carousel-indicators"> <div class="carousel-inner">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
</div>
<div class="carousel-inner text-shadow">
<div class="carousel-item active"> <div class="carousel-item active">
<img class="d-block img-fluid" src="assets/static/DSC_4615.png" alt="Afbeelding van mijn 7-inch FPV drone met GoPro actiecamera."> <img class="img-fluid" src="assets/static/DSC_4615.png" alt="Afbeelding van mijn 7-inch FPV drone met GoPro actiecamera.">
<div class="carousel-caption d-block"> <div class="carousel-caption">
<!-- <h3>First slide label</h3> --> <!-- <h3>First slide label</h3> -->
<p>Mijn 7-inch FPV drone met GoPro actiecamera,<br>ideaal voor outdoor vliegen en lange afstanden.</p> <p>Mijn 7-inch FPV drone met GoPro actiecamera,<br>ideaal voor outdoor vliegen en lange afstanden.</p>
</div> </div>
</div> </div>
<div class="carousel-item"> <div class="carousel-item">
<img class="d-block img-fluid" src="assets/static/20240815_184226.png" alt="Afbeelding van mijn 3.5-inch cinewhoop met Caddx Walnut camera."> <img class="img-fluid" src="assets/static/20240815_184226.png" alt="Afbeelding van mijn 3.5-inch cinewhoop met Caddx Walnut camera.">
<div class="carousel-caption d-block"> <div class="carousel-caption">
<!-- <h3>Second slide label</h3> --> <!-- <h3>Second slide label</h3> -->
<p>Mijn 3.5-inch cinewhoop met Caddx Walnut camera,<br>ideaal voor indoor vliegen en dichtbij personen.</p> <p>Mijn 3.5-inch cinewhoop met Caddx Walnut camera,<br>ideaal voor indoor vliegen en dichtbij personen.</p>
</div> </div>
</div> </div>
</div> </div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev"> <div class="carousel-indicators">
<button type="button" data-bs-target="#carouselMyDrones" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselMyDrones" data-bs-slide-to="1" aria-label="Slide 2"></button>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselMyDrones" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span> <span class="visually-hidden">Previous</span>
</button> </button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next"> <button class="carousel-control-next" type="button" data-bs-target="#carouselMyDrones" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span> <span class="visually-hidden">Next</span>
</button> </button>

23
src/scss/styles.scss
View file

@ -17,7 +17,7 @@ $primary: $red; // Default: $blue
// Include any default map overrides here // Include any default map overrides here
$carousel-dark-indicator-active-bg: $white; $carousel-dark-indicator-active-bg: $white;
$carousel-dark-caption-color: $white; $carousel-dark-caption-color: $white;
$carousel-dark-control-icon-filter: unset; $carousel-dark-control-icon-filter: unset;
// Include remainder of required parts // Include remainder of required parts
@ -300,6 +300,27 @@ img.grayscale-effect {
height: 100%; height: 100%;
} }
.carousel-caption {
right: unset;
left: unset;
bottom: 0;
// @extend .text-shadow;
}
.carousel-indicators {
position: unset;
border-bottom-left-radius: var(--bs-border-radius);
border-bottom-right-radius: var(--bs-border-radius);
}
.carousel-caption,
.carousel-indicators {
width: 100%;
background-color: rgba(22, 23, 25, 0.6) !important;
@extend .m-0;
@extend .p-0;
}
.list-group-item { .list-group-item {
background-color: inherit; background-color: inherit;
border: solid var(--bs-body-bg); border: solid var(--bs-body-bg);