diff --git a/src/components/HomePageHighlights.js b/src/components/HomePageHighlights.js index 428cc5eb74..59552c461a 100644 --- a/src/components/HomePageHighlights.js +++ b/src/components/HomePageHighlights.js @@ -8,12 +8,14 @@ const HomePageHighlights = ({ data }) => { const projects = data; return (
-

- Projects that we support -

-

- New Relic contributes resources to the development of these projects. -

+
+

+ Projects that we support +

+

+ New Relic contributes resources to the development of these projects. +

+
{projects.map(project => { return ; diff --git a/src/components/HomePageHighlights.module.scss b/src/components/HomePageHighlights.module.scss index 0761256f74..8042d0997b 100644 --- a/src/components/HomePageHighlights.module.scss +++ b/src/components/HomePageHighlights.module.scss @@ -1,52 +1,33 @@ .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 { diff --git a/src/components/HomePageInternalProjects.module.scss b/src/components/HomePageInternalProjects.module.scss index bb2906791b..1bf55d6564 100644 --- a/src/components/HomePageInternalProjects.module.scss +++ b/src/components/HomePageInternalProjects.module.scss @@ -1,3 +1,4 @@ + .featured-internal-projects { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); diff --git a/src/components/ProjectModule.module.scss b/src/components/ProjectModule.module.scss index 7fe26d5836..559bb81009 100644 --- a/src/components/ProjectModule.module.scss +++ b/src/components/ProjectModule.module.scss @@ -8,9 +8,10 @@ text-align: center; background-color: var(--color-background); position: relative; - border-radius: 4px; z-index: 100; - box-shadow: 0px 2.76726px 2.21381px rgba(0, 85, 90, 0.0168687), 0px 6.6501px 5.32008px rgba(0, 85, 90, 0.0242336), 0px 12.5216px 10.0172px rgba(0, 85, 90, 0.03), 0px 22.3363px 17.869px rgba(0, 85, 90, 0.0357664), 0px 41.7776px 33.4221px rgba(0, 85, 90, 0.0431313), 0px 100px 80px rgba(0, 85, 90, 0.06); + border: 1px solid var(--color-neutrals-300); + 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); + border-radius: 4px; transition: all .13s var(--ease-out-quad); &:last-child { diff --git a/src/components/SimpleProjectModule.module.scss b/src/components/SimpleProjectModule.module.scss index f7d748fb34..90e87f7e03 100644 --- a/src/components/SimpleProjectModule.module.scss +++ b/src/components/SimpleProjectModule.module.scss @@ -4,8 +4,8 @@ padding: 16px 20px; box-sizing: border-box; background: var(--color-background); - border: 1px solid var(--color-neutrals-300); box-sizing: border-box; + border: 1px solid var(--color-neutrals-300); 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); border-radius: 4px; transition: all .1s var(--ease-out-quad); diff --git a/src/pages/home-page.module.scss b/src/pages/home-page.module.scss index 7061c9fcc9..963a8fe967 100644 --- a/src/pages/home-page.module.scss +++ b/src/pages/home-page.module.scss @@ -343,6 +343,17 @@ img.play-button { .featured-internal-projects-container { margin-bottom: 40px; + + &:before { + position: absolute; + left: 0; + content: ""; + height: 500px; + background-color: var(--color-neutrals-100); + width: 100%; + transform: skewY(-2deg) translateY(-80px); + z-index:-1; + } } .responsive-video-container {