fix(explore-projects): updated styling for project description length. Closes #579

Author: Joel Worrall

src/pages/explore-projects.module.scss

@@ -15,12 +15,12 @@
   background-color: var(--color-background);
   border: 1px solid var(--color-neutrals-300);
   border-radius: 4px;
-  box-shadow: 
-    0px 0.249053px 0.553451px rgba(0, 0, 0, 0.00562291), 
-    0px 0.598509px 1.33002px rgba(0, 0, 0, 0.00807786), 
-    0px 1.12694px 2.50431px rgba(0, 0, 0, 0.01), 
-    0px 2.01027px 4.46726px rgba(0, 0, 0, 0.0119221), 
-    0px 3.75998px 8.35552px rgba(0, 0, 0, 0.0143771), 
+  box-shadow:
+    0px 0.249053px 0.553451px rgba(0, 0, 0, 0.00562291),
+    0px 0.598509px 1.33002px rgba(0, 0, 0, 0.00807786),
+    0px 1.12694px 2.50431px rgba(0, 0, 0, 0.01),
+    0px 2.01027px 4.46726px rgba(0, 0, 0, 0.0119221),
+    0px 3.75998px 8.35552px rgba(0, 0, 0, 0.0143771),
     0px 9px 20px rgba(0, 0, 0, 0.02);
 
   &:last-child {
@@ -58,6 +58,10 @@
   font-size: 14px;
   line-height: 20px;
   color: var(--color-neutrals-600);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
 }
 
 .featured-project-footer {
@@ -115,7 +119,7 @@
       color: var(--color-neutrals-900);
     }
   }
-  
+
   &:active {
     transform: translateY(1px);
     box-shadow: none;
@@ -276,7 +280,7 @@
     font-size: 18px;
     line-height: 24px;
   }
-  
+
   .featured-project-description {
     margin-top: 4px;
     padding: 0 16px;
@@ -290,7 +294,7 @@
   .featured-project-footer-link:last-child {
     display: none;
   }
-  
+
   .featured-project-footer-link:first-child {
     width: 100%;
     line-height: 30px;
@@ -322,19 +326,19 @@
   }
   .project-container:nth-child(-n+3) {
     display: flex;
-  }    
+  }
 }
 
 @media screen and (max-width: 724px) {
   .project-listing-container {
     grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-  }    
+  }
 }
 
 @media screen and (max-width: 480px) {
   .project-listing-container {
     grid-template-columns: minmax(0, 1fr);
-  }    
+  }
 
   .project-footer-meta:first-child {
     width: 50%;
@@ -367,11 +371,11 @@
     border-top: 1px dotted var(--color-neutrals-400);
     background-color: var(--color-neutrals-100);
   }
-  
+
   .featured-project-footer-link {
     color: var(--color-neutrals-600);
     opacity: .65;
-    
+
     &:first-child {
       border-color: var(--color-neutrals-500);
     }
@@ -383,18 +387,18 @@
 
     &:hover {
       border: 1px solid var(--color-neutrals-500);
-    }  
+    }
   }
 
   .project-footer {
     border-top: 1px dotted var(--color-neutrals-400);
     background-color: var(--color-neutrals-100);
   }
-  
+
   .project-footer-meta {
     color: var(--color-neutrals-600);
     opacity: .65;
-    
+
     &:first-child {
       border-color: var(--color-neutrals-500);
     }