feat: new research jumbotron

content/research/_index.md

@@ -4,22 +4,15 @@ cascade:
   # header
   header_wrapper_class: "header-research-bg-img small-jumbotron-subtitle"
   headline: "Research @ Eclipse Foundation"
-  jumbotron_class: "col-sm-24"
-  custom_jumbotron_class: "col-sm-24"
+  jumbotron_class: "col-md-24"
+  custom_jumbotron_class: "research-custom-jumbotron col-sm-24"
   custom_jumbotron: |
-    <div class="home-custom-jumbotron row">
-      <p class="col-sm-14">
+    <div class="research-custom-jumbotron row">
+      <p class="col-md-14">
         Business-friendly open source and open innovation underpin
         exploitation, community building, and dissemination strategies for
         European projects
       </p>
-      <div class="research-logo-wrapper col-sm-10">
-        <img
-          class="research-logo"
-          src="/images/eclipse-research-logo-transparent.svg"
-          alt="Eclipse Research Logo"
-        />
-      </div>
     </div>
 
   hide_call_for_action : true
@@ -33,7 +26,6 @@ cascade:
 
   page_css_file: /public/css/research-styles.css
 date: 2019-09-10T15:50:25-04:00
-links: [[href: "#projects", text: "Research Projects"], [href: "#collaborations", text: "Collaborations"]]
 hide_page_title: true
 show_featured_story: false
 show_featured_footer: false

less/page_css_file/research/_variables.less

@@ -11,11 +11,12 @@
  * SPDX-License-Identifier: EPL-2.0
 */
 
-@white: #fff;
-@header-default-bg-img: url('images/research-jumbo-image.jpg');
-@mobile-menu-logo-max-width: 250px;
+// Colors
 @light-gray: #f0f2f2;
 @mid-gray: #dddbd8;
-@dark-blue: #000c2d;
 @dark-gray: #37474f;
 @mid-blue: #456e9d;
+@regal-blue: #004d66;
+
+// Backgrounds
+@header-default-bg-img: url('./images/home-jumbotron.jpg');

less/page_css_file/research/styles.less

@@ -12,7 +12,7 @@
  * SPDX-License-Identifier: EPL-2.0
 */
 
-@import (reference) '~eclipsefdn-solstice-assets/less/quicksilver/styles.less';
+@import (reference) '~eclipsefdn-solstice-assets/less/astro/main.less';
 @import '_variables.less';
 
 // layout styling
@@ -111,10 +111,77 @@ main {
 	}
 }
 
+.featured-jumbotron {
+  & &-headline {
+    margin-bottom: 10rem;
+    color: @white;
+    text-shadow: unset;
+    font-weight: 500;
+    text-align: center;
+  }
+}
+
+.research-custom-jumbotron {
+  margin-top: 20rem;
+}
+
 .header-research-bg-img .featured-jumbotron {
-	background-image: @header-default-bg-img;
-  background-size: cover;
-  background-repeat: no-repeat;
+  position: relative;
+  background-color: @regal-blue;
+
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 30%;
+    width: 100%;
+    height: 20rem;
+  }
+
+  &::before {
+    background: @header-default-bg-img;
+    background-repeat: no-repeat;
+    background-size: cover;
+  }
+
+  &::after {
+    background: linear-gradient(to bottom, @regal-blue 0%, transparent 35%, transparent 65%, @regal-blue 100%);
+  }
+}
+
+@media (min-width: @screen-sm-min) {
+  .research-custom-jumbotron {
+    margin-top: 13rem;
+  }
+}
+
+@media (min-width: @screen-md-min) {
+  .featured-jumbotron {
+    & &-headline {
+      text-align: left;
+      margin-bottom: 2rem;
+    }
+  }
+
+  .header-research-bg-img .featured-jumbotron {
+    &::before,
+    &::after {
+      top: 0;
+      left: 60%;
+      width: calc(100% - 60%);
+      height: 100%;
+    }
+
+    &::after {
+      background: linear-gradient(to right, @regal-blue 0%, transparent 35%);
+    }
+  }
+  
+  // Add gap between jumbotron content and image
+  .research-custom-jumbotron {
+    margin-top: unset;
+  }
 }
 
 .overflow-hidden {