install swiper, start styling image gallery

2024-05-20 22:09:51 +02:00
parent 856f39bb58
commit e88aa5e142
6 changed files with 190 additions and 8 deletions
--- a/web/src/components/blocks/imageSliderBlock.module.scss
+++ b/web/src/components/blocks/imageSliderBlock.module.scss
@@ -0,0 +1,35 @@
+.imageSliderBlock {
+  height: 90vh;
+  background: var(--color-black);
+  color: var(--color-goldenBeige);
+  margin: calc(var(--spacing-sitepadding)*2) calc(var(--spacing-sitepadding)*-1);
+
+  figure {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+
+    img {
+      display: block;
+      height: 100%;
+      width: 100%;
+      object-fit: contain;
+      min-height: 0;
+    }
+
+    figcaption {
+      position: absolute;
+      bottom: 0;
+      max-width: var(--size-width-p);
+      margin: 0 auto;
+      padding: .75rem 1rem;
+      font-size: var(--font-size-caption);
+      line-height: 1.4;
+      background: rgba(0, 0, 0, .6);
+    }
+  }
+}