diff --git a/web/public/assets/icons/circle-arrow-left.svg b/web/public/assets/icons/circle-arrow-left.svg
new file mode 100644
index 0000000..41128c9
--- /dev/null
+++ b/web/public/assets/icons/circle-arrow-left.svg
@@ -0,0 +1,4 @@
+
diff --git a/web/public/assets/icons/circle-arrow-right.svg b/web/public/assets/icons/circle-arrow-right.svg
new file mode 100644
index 0000000..5c0207d
--- /dev/null
+++ b/web/public/assets/icons/circle-arrow-right.svg
@@ -0,0 +1,4 @@
+
diff --git a/web/src/components/blocks/imageSliderBlock.module.scss b/web/src/components/blocks/imageSliderBlock.module.scss
index 00597a5..a69f84d 100644
--- a/web/src/components/blocks/imageSliderBlock.module.scss
+++ b/web/src/components/blocks/imageSliderBlock.module.scss
@@ -7,6 +7,8 @@
figure {
width: 100%;
height: 100%;
+ max-width: 1920px;
+ margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
diff --git a/web/src/components/blocks/swiper.scss b/web/src/components/blocks/swiper.scss
index bc4e972..5138f73 100644
--- a/web/src/components/blocks/swiper.scss
+++ b/web/src/components/blocks/swiper.scss
@@ -3,24 +3,22 @@
height: 100%;
}
-.swiper-slide {}
-
.swiper-button-next,
.swiper-button-prev {
&:before {
- content: "→";
+ content: "";
display: block;
- padding: var(--spacing-sitepadding-inline);
- font-size: var(--font-size-h3);
position: absolute;
- color: var(--color-goldenBeige);
+ width: 3rem;
+ height: 3rem;
+ background-size: 100%;
}
}
.swiper-button-next {
&:before {
- content: "→";
- right: 0;
+ background-image: url("/assets/icons/circle-arrow-right.svg");
+ right: var(--spacing-sitepadding);
}
&:after {
@@ -31,8 +29,8 @@
.swiper-button-prev {
&:before {
- content: "←";
- left: 0;
+ background-image: url("/assets/icons/circle-arrow-left.svg");
+ left: var(--spacing-sitepadding);
}
&:after {
@@ -42,57 +40,27 @@
}
.swiper-pagination {
- padding-top: var(--spacing-sitepadding-inline);
- padding-left: calc(var(--spacing-sitepadding-inline) + var(--size-col-1));
+ display: inline-block;
+ width: auto;
+ margin: var(--spacing-sitepadding);
+ padding: 0 .5rem;
+ border-radius: 2rem;
+ background: rgba(0, 0, 0, 0.6);
position: absolute;
top: 0;
+ right: 0;
+ left: auto;
bottom: auto;
- text-align: left;
-}
-
-@media (max-width: 1100px) {
-
- .swiper-button-next,
- .swiper-button-prev {
- &:before {
- padding: 1rem;
- font-size: var(--font-size-h5);
- }
- }
+ font-size: var(--font-size-caption);
}
@media (max-width: 800px) {
- .swiper-button-next,
- .swiper-button-prev {
- bottom: 1rem;
- top: auto;
-
- &:before {
- padding: 1rem;
- font-size: var(--font-size-h5);
- }
+ .swiper-button-next:before {
+ right: 10px;
}
- .swiper-pagination {
- padding-top: 1.75rem;
- }
-
- .swiper-slide {
-
- figure {
- width: 100vw;
- height: 60vh;
- margin-bottom: 2rem;
-
- figcaption {
- position: absolute;
- bottom: 5rem;
- left: 50%;
- transform: translateX(-50%);
- width: 100%;
- padding: 0 2rem;
- }
- }
+ .swiper-button-prev:before {
+ left: 10px;
}
}
\ No newline at end of file