add: misc carousel

gustaveWPM · Jun 10, 2023 · c667b33 · c667b33
1 parent b91a4ac
commit c667b33
Show file tree

Hide file tree

Showing 2 changed files with 101 additions and 5 deletions.
diff --git a/docs/assets/style.css b/docs/assets/style.css
@@ -28,8 +28,7 @@
  color: #fff;
  background-color: black;
  border-radius: 4px;
- background-image: linear-gradient(
- hsla(0, 0%, 100%, .2), hsla(0, 0%, 100%, 0) 30%,
+ background-image: linear-gradient(hsla(0, 0%, 100%, .2), hsla(0, 0%, 100%, 0) 30%,
  hsla(0, 0%, 0%, .3) 50%, hsla(0, 0%, 100%, .1));
  text-shadow:
  0 0 15px hsla(0, 0%, 100%, 1),
@@ -43,11 +42,51 @@
 }
 
 /*----------------------*/
-/* Not interesting CSS */
-/*--------------------*/
+/*  MISC  */
+/*----------------------*/
 
 :root {
- --navbar-height: 0;
+ --navbar-height: 65px;
+ --carousel-btns-bg-color: rgba(0, 0, 0, .20)
+}
+
+#carouselMauGallery img {
+ object-fit: cover;
+}
+
+#carouselMauGallery .carousel-inner {
+ --_computed_height: calc(100vh - var(--navbar-height));
+ min-height: var(--_computed_height);
+ height: var(--_computed_height);
+ width: auto;
+ min-width: auto;
+ transition: height .5s
+}
+
+#carouselMauGallery .carousel-control-next-icon,
+#carouselMauGallery .carousel-control-prev-icon {
+ padding: 15px;
+ border-radius: 25px;
+ background-color: var(--carousel-btns-bg-color);
+ filter: drop-shadow(0 0 .5rem rgba(0, 0, 0, .6));
+ border: .4rem solid transparent
+}
+
+#carouselMauGallery .carousel-indicators-container {
+ background-color: var(--carousel-btns-bg-color);
+ border-radius: 100%
+}
+
+#carouselMauGallery .carousel-control-next .carousel-control-next-icon,
+#carouselMauGallery .carousel-control-prev .carousel-control-prev-icon {
+ transition: all .25s ease-in
+}
+
+#carouselMauGallery .carousel-control-next:focus-within .carousel-control-next-icon,
+#carouselMauGallery .carousel-control-prev:focus-within .carousel-control-prev-icon {
+ transform: scale(1.8);
+ border: solid 2px #fff;
+ transition: all .25s ease-in
 }
 
 body,

diff --git a/docs/index.html b/docs/index.html
@@ -39,6 +39,62 @@ <h1><a href="#" class="trigger-navbar-collapse-onclick">Scroll to top</a></h1>
  </header>
 
  <main>
+ <div id="header">
+ <div id="carouselMauGallery" class="carousel slide" data-bs-keyboard="false" data-bs-ride="carousel"
+ data-bs-interval="7500">
+ <div class="carousel-inner">
+ <button aria-label="Previous photo" class="carousel-control-prev" type="button"
+ data-bs-target="#carouselMauGallery" data-bs-slide="prev">
+ <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+ </button>
+ <button aria-label="Next photo" class="carousel-control-next" type="button"
+ data-bs-target="#carouselMauGallery" data-bs-slide="next">
+ <span class="carousel-control-next-icon" aria-hidden="true"></span>
+ </button>
+ <div class="carousel-indicators">
+ <div class="carousel-indicators-container">
+ <button type="button" data-bs-target="#carouselMauGallery" data-bs-slide-to="0" class="active"
+ aria-current="true" aria-label="Slide 1"></button>
+ <button type="button" data-bs-target="#carouselMauGallery" data-bs-slide-to="1"
+ aria-label="Slide 2"></button>
+ <button type="button" data-bs-target="#carouselMauGallery" data-bs-slide-to="2"
+ aria-label="Slide 3"></button>
+ </div>
+ </div>
+ <div class="carousel-item active">
+ <picture>
+ <source srcset="./assets/img/gallery-pack/pexels-photo-539432-mobile-portrait.webp"
+ media="(max-width: 480px)">
+ <source srcset="./assets/img/gallery-pack/pexels-photo-539432-mobile-landscape.webp"
+ media="(max-width: 1000px)">
+ <img src="./assets/img/gallery-pack/pexels-photo-539432-desktop.webp" alt="Banner (coffee photo)"
+ class="d-block w-100" width="1920" height="1080">
+ </picture>
+ </div>
+ <div class="carousel-item">
+ <picture>
+ <source srcset="./assets/img/gallery-pack/pexels-photo-59523-mobile-portrait.webp"
+ media="(max-width: 480px)">
+ <source srcset="./assets/img/gallery-pack/pexels-photo-59523-mobile-landscape.webp"
+ media="(max-width: 1000px)">
+ <img src="./assets/img/gallery-pack/pexels-photo-59523-desktop.webp" alt="Banner (dog photo)"
+ class="d-block w-100" width="1920" height="1080" loading="lazy">
+ </picture>
+ </div>
+ <div class="carousel-item">
+ <picture>
+ <source srcset="./assets/img/gallery-pack/pexels-photo-247204-mobile-portrait.webp"
+ media="(max-width: 480px)">
+ <source srcset="./assets/img/gallery-pack/pexels-photo-247204-mobile-landscape.webp"
+ media="(max-width: 1000px)">
+ <img src="./assets/img/gallery-pack/pexels-photo-247204-desktop.webp" alt="Banner (girls photo)"
+ class="d-block w-100" width="1920" height="1080" loading="lazy">
+ </picture>
+ </div>
+ </div>
+ </div>
+ </div>
+
  <div class="jumbotron jumbotron-fluid bg-dark mb-0">
  <div class="container py-5 text-light">
  <h2 class="display-4">Enhanced Mau Gallery (Demo)</h2>
@@ -48,6 +104,7 @@ <h3 class="lead">
  <a class="btn btn-outline-light btn-lg" href="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/gustaveWPM/enhanced-mauGallery">GitHub</a>
  </div>
  </div>
+
  <div class="container py-3" id="gallery-one">
  <h2 class="mt-4">Boring pictures gallery</h2>
  <div id="maugallery" class="gallery">