feat: responsive styles for homepage collections

Author: danielgolden

src/components/HomepageCollection.module.scss

@@ -11,17 +11,6 @@
     transform: skewY(-2deg) translateY(-55px);
     z-index:-1;
   }
-
-  // &:after {
-  //   background-image: linear-gradient(0deg, var(--color-neutrals-100) 70%, rgba(255,255,255, 0));
-  //   content: '';
-  //   position: absolute;
-  //   left: 0;
-  //   right: 0;
-  //   transform: skewY(-2deg) translateY(-250px);
-  //   display: block;
-  //   height: 200px;
-  // }
 }
 
 .title {
@@ -31,16 +20,17 @@
   font-family: var(--secondary-font-family);
   text-align: center;
   line-height: 25px;
-  margin-bottom: 6px;
+  margin-bottom: 4px;
   font-weight: 400;
 }
 
 .description {
   position: relative;
   z-index:100;
   margin: 0 0 30px 0;
+  padding: 0 28px;
   font-size: 16px;
-  line-height: 19px;
+  line-height: 24px;
   color: var(--color-neutrals-600);
   text-align: center;
 
@@ -81,14 +71,15 @@
   height: 105px;
   flex-shrink: 0;
   margin-right: 20px;
-  animation-duration: 50s;
+  animation-duration: 60s;
   animation-name: project-slide;
   animation-iteration-count: infinite;
   animation-direction: alternate;
   animation-timing-function: linear;
   position: relative;
   z-index: 100;
   box-shadow: 0px 0.913195px 0.802504px rgba(4, 22, 22, 0.00562291), 0px 2.19453px 1.92853px rgba(4, 22, 22, 0.00807786), 0px 4.13211px 3.63125px rgba(4, 22, 22, 0.01), 0px 7.37098px 6.47753px rgba(4, 22, 22, 0.0119221), 0px 13.7866px 12.1155px rgba(4, 22, 22, 0.0143771), 0px 33px 29px rgba(4, 22, 22, 0.02);
+  pointer-events: none;
 
   &:last-child {
     margin-right: 0;
@@ -98,7 +89,7 @@
     filter: blur(4px);
     animation-play-state: paused;
     opacity: .6;
-  }
+  }  
 }
 
 @keyframes project-slide {
@@ -119,9 +110,11 @@
   transition: transform .2s ease-out, opacity .2s;
   box-shadow: 0px 1.85406px 2.60122px rgba(5, 35, 39, 0.0562291), 0px 4.45557px 6.2511px rgba(5, 35, 39, 0.0807786), 0px 8.38944px 11.7703px rgba(5, 35, 39, 0.1), 0px 14.9653px 20.9961px rgba(5, 35, 39, 0.119221), 0px 27.991px 39.271px rgba(5, 35, 39, 0.143771);
   opacity: 0;
-
+  pointer-events: none;
+  
   .projects-hovered & {
     opacity: 1;
+    pointer-events: inherit;
     transform: translate(-50%, 35px);
     transition: transform .08s ease-out;
 
@@ -133,4 +126,28 @@
       transform: translate(-50%, 36px);
     }
   }
+}
+
+// ==============================================================
+// Responsive styles
+// ==============================================================
+
+@media screen and (max-width: 900px) {
+  .projects-container:before,
+  .projects-container:after {
+    display: none;
+  }    
+}
+
+@media screen and (max-width: 600px) {
+  .project h4 {
+    max-width: 19ch;
+    white-space: nowrap;
+  }   
+}
+
+@media screen and (max-width: 480px) {
+  .project {
+    animation-duration: 30s;
+  }    
 }