fix: fix theme slider breakpoints

ucsddesignco · Jun 2, 2024 · ea78c3a · ea78c3a
1 parent ad4c225
commit ea78c3a
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 4 deletions.
diff --git a/src/app/components/Navbar/Navbar.scss b/src/app/components/Navbar/Navbar.scss
@@ -24,7 +24,7 @@ nav {
     padding-block: $main-padding-mobile-block;
     width: 100vw;
     max-width: 400px;
-    background: rgb(255, 255, 255);
+    background: #fcfcfc;
     height: 100dvh;
     display: flex;
     flex-direction: column;

diff --git a/src/app/components/Overview/PastProjects/PastProjects.scss b/src/app/components/Overview/PastProjects/PastProjects.scss
@@ -25,7 +25,7 @@
           transition:
             background-color 0.3s,
             border-color 0.3s;
-          border: 2px solid $primary-black;
+          border: 1px solid $primary-black;
           background-color: $primary-black;
           border-radius: 4px;
           padding-block: 4px;

diff --git a/src/app/components/Testimonial/Testimonial.scss b/src/app/components/Testimonial/Testimonial.scss
@@ -44,7 +44,7 @@
   }
 
   .testimonials-modal-button {
-    border: 2px solid $primary-black;
+    border: 1px solid $primary-black;
     text-transform: uppercase;
     font-family: $p-font;
     font-size: $h3-size;

diff --git a/src/app/components/ThemesSlider/ThemesSlider.scss b/src/app/components/ThemesSlider/ThemesSlider.scss
@@ -9,6 +9,12 @@
     rgba(252, 252, 252, 0) 78.04%,
     $primary-white 100%
   );
+  $right-hide-slides-gradient: linear-gradient(
+    90deg,
+    rgba(252, 252, 252, 0) 0%,
+    rgba(252, 252, 252, 0) 78.04%,
+    $primary-white 100%
+  );
 
   border: 1px solid $outline-gray;
 
@@ -54,7 +60,7 @@
     .keen-slider::before {
       content: '';
       z-index: 1;
-      width: calc(100vw - 2 * clamp(50px, 25px + 1.8vw, 80px));
+      width: 100%;
       height: 100%;
       display: block;
       position: absolute;
@@ -69,6 +75,18 @@
     }
   }
 
+  @media ($mobile-breakpoint < width < 1400px) {
+    .keen-slider::before {
+      content: '';
+      z-index: 1;
+      width: 100%;
+      height: 100%;
+      display: block;
+      position: absolute;
+      background: $right-hide-slides-gradient;
+    }
+  }
+
   @media (min-width: $tablet-breakpoint) {
     height: 100%;
 

diff --git a/src/app/components/ThemesSlider/ThemesSlider.tsx b/src/app/components/ThemesSlider/ThemesSlider.tsx
@@ -34,6 +34,12 @@ export default function ThemesSlider({
         slides: { origin: 'center', perView: 1.5, spacing: 10 }
       },
       '(min-width: 979px)': {
+        slides: { perView: 1.5, spacing: 10 }
+      },
+      '(min-width: 1200px)': {
+        slides: { perView: 2.5, spacing: 20 }
+      },
+      '(min-width: 1400px)': {
         slides: { perView: 3, spacing: 20 }
       }
     },