Merge pull request #572 from danielgolden/feat/add-collections-to-hom…

…epage feat: add collections to homepage + collections landing page
newrelic · Jul 30, 2020 · 07809e7 · 07809e7
2 parents 68244b5 + b6b4c08
commit 07809e7
Show file tree

Hide file tree

Showing 15 changed files with 3,478 additions and 57 deletions.
diff --git a/src/components/HomePageHighlights.js b/src/components/HomePageHighlights.js
@@ -8,12 +8,14 @@ const HomePageHighlights = ({ data }) => {
   const projects = data;
   return (
     <div className={styles.featuredExternalProjects}>
-      <h4 className={styles.featuredExternalProjectsTitle}>
-        Projects that we support
-      </h4>
-      <p className={styles.featuredExternalProjectsDescription}>
-        New Relic contributes resources to the development of these projects.
-      </p>
+      <div className={styles.featuredExternalProjectsHeader}>
+        <h4 className={styles.featuredExternalProjectsTitle}>
+          Projects that we support
+        </h4>
+        <p className={styles.featuredExternalProjectsDescription}>
+          New Relic contributes resources to the development of these projects.
+        </p>
+      </div>
       <div className={styles.externalProjectsList}>
         {projects.map(project => {
           return <ProjectModule data={project} key={project.title} row />;

diff --git a/src/components/HomePageHighlights.module.scss b/src/components/HomePageHighlights.module.scss
@@ -1,59 +1,40 @@
 .featured-external-projects {
-  margin: 135px 0 160px;
-
-  &:before {
-    position: absolute;
-    left: 0;
-    content: "";
-    height: 360px;
-    background-color: var(--color-neutrals-100);
-    width: 100%;
-    transform: skewY(-2deg) translateY(-55px);
-    z-index:-1;
-  }
+  margin: 45px 0 160px;
+}
 
-  &: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;
-  }
+.featured-external-projects-header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  border-bottom: 1px dotted var(--color-neutrals-300);
+  margin-bottom: 30px;
 }
 
 .featured-external-projects-title {
+  margin-top: 0;
+  margin-bottom: 9px;
+  line-height: 40px;
   position: relative;
-  z-index:100;
-  font-size: 24px;
+  font-size: 30px;
+  color: var(--color-neutrals-900);
   font-family: var(--secondary-font-family);
-  text-align: center;
-  line-height: 25px;
-  margin-bottom: 6px;
+  text-align: left;
   font-weight: 400;
 }
 
 .featured-external-projects-description {
-  position: relative;
-  z-index:100;
-  margin: 0 0 30px 0;
+  margin-top: 0;
+  margin-bottom: 10px;
+  text-align: center;
   font-size: 16px;
-  line-height: 19px;
   color: var(--color-neutrals-600);
-  text-align: center;
-
-  a {
-    display: inline-block;
-  }
 }
 
 .external-projects-list {
   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;
 }
 
@@ -138,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) {
@@ -163,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;

diff --git a/src/components/HomePageInternalProjects.module.scss b/src/components/HomePageInternalProjects.module.scss
@@ -1,10 +1,20 @@
+
 .featured-internal-projects {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
   grid-template-rows: 1fr  auto;
   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));