feat: finish responsive styling homepage updates

Author: danielgolden

src/components/HomePageHighlights.module.scss

@@ -34,7 +34,7 @@
   position: relative;
   z-index:100;
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
   grid-gap: 20px;
 }
 
@@ -119,6 +119,27 @@
   .featured-external-projects {
     padding: 0 28px;
   }    
+
+  .external-projects-list {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@media screen and (max-width: 1024px) {
+  .featured-external-projects-header {
+    flex-direction: column;
+    text-align: center;
+    align-items: stretch;
+  }
+
+  .featured-external-projects-title {
+    text-align: center;
+    margin-bottom: 0;
+  }
+
+  .featured-external-projects-description {
+    margin-bottom: 24px;
+  }
 }
 
 @media screen and (max-width: 1150px) {
@@ -144,23 +165,18 @@
 
   .external-projects-list {
     grid-gap: 16px;
+    grid-template-columns: 1fr;
   }
 
   .featured-external-projects {
-    margin-top: 120px;
+    margin-top: 40px;
   }    
 
   .featured-external-projects-description {
     line-height: 23px;
   }
 }
 
-@media screen and (max-width: 480px) {
-  .external-projects-list {
-    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))
-  }    
-}
-
 @media screen and (max-width: 400px) {
   .featured-external-projects:before {
     height: 775px;

src/components/HomePageInternalProjects.module.scss

@@ -6,6 +6,15 @@
   grid-gap: 16px;
 }
 
+@media screen and (max-width: 1200px) {
+  .featured-internal-projects-container {
+    opacity: .1;
+    &:before {
+      height: 700px;
+    }
+  }
+}
+
 @media screen and (max-width: 480px) {
   .featured-internal-projects {
     grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

src/components/HomepageCollection.module.scss

@@ -140,6 +140,10 @@
 }
 
 @media screen and (max-width: 600px) {
+  .homepage-collection {
+    margin-top: 115px;
+  }
+
   .project h4 {
     max-width: 19ch;
     white-space: nowrap;

src/pages/home-page.module.scss

@@ -400,6 +400,10 @@ img.play-button {
     box-sizing: border-box;
     width: 100%;
     padding: 0 28px;
+
+    &:before {
+      height: 600px;
+    }
   }    
 }
 
@@ -425,6 +429,11 @@ img.play-button {
     }
   }
 
+  .featured-internal-projects-container:before {
+    height: 650px;
+    transform: skewY(-2deg) translateY(-60px)
+  }
+
   .featured-internal-projects-section {
     flex-direction: column;
     align-items: center;
@@ -437,6 +446,12 @@ img.play-button {
   }
 }
 
+@media screen and (max-width: 928px) {
+  .featured-internal-projects-container:before {
+    height: 770px;
+  }    
+}
+
 @media screen and (max-width: 900px) {
   .homepage-hero-video {
     display: none;
@@ -515,6 +530,20 @@ img.play-button {
     width: 100%;
     padding: 54.25% 28px 0 28px;
   }
+  
+  .featured-internal-projects-container:before {
+    height: 780px;
+  }    
+}
+
+@media screen and (max-width: 630px) {
+  .featured-internal-projects-container:before {
+    height: 700px;
+  } 
+  
+  .featured-internal-projects-container:before {
+    height: 1200px;
+  } 
 }
 
 @media screen and (max-width: 480px) {