From 574a3a02a4b230ff9d3a0b1dad81bfcea3ede5fa Mon Sep 17 00:00:00 2001
From: elisejakob <hei@elisejakob.no>
Date: Mon, 20 May 2024 23:16:45 +0200
Subject: [PATCH] more image gallery styling, add arrow icons

---
 web/public/assets/icons/circle-arrow-left.svg |  4 +
 .../assets/icons/circle-arrow-right.svg       |  4 +
 .../blocks/imageSliderBlock.module.scss       |  2 +
 web/src/components/blocks/swiper.scss         | 74 ++++++-------------
 4 files changed, 31 insertions(+), 53 deletions(-)
 create mode 100644 web/public/assets/icons/circle-arrow-left.svg
 create mode 100644 web/public/assets/icons/circle-arrow-right.svg

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 @@
+<svg width="309" height="309" viewBox="0 0 309 309" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M154.2 309C69.0376 309 -9.15527e-05 239.962 -9.15527e-05 154.8C-9.15527e-05 69.6377 69.0376 0.600006 154.2 0.600006C239.362 0.600006 308.4 69.6377 308.4 154.8C308.4 239.962 239.362 309 154.2 309Z" fill="#720328"/>
+<path d="M66.9599 154.8L125.66 227.62L146.56 209.99L112.96 169.93H241.44V139.67H112.96L146.56 99.61L125.66 81.99L66.9599 154.8Z" fill="#E5E2D7"/>
+</svg>
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 @@
+<svg width="309" height="309" viewBox="0 0 309 309" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M154.2 309C239.362 309 308.4 239.962 308.4 154.8C308.4 69.6377 239.362 0.600006 154.2 0.600006C69.0377 0.600006 0 69.6377 0 154.8C0 239.962 69.0377 309 154.2 309Z" fill="#720328"/>
+<path d="M241.44 154.8L182.74 227.62L161.84 209.99L195.44 169.93H66.96V139.67H195.44L161.84 99.61L182.74 81.99L241.44 154.8Z" fill="#E5E2D7"/>
+</svg>
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