diff --git a/content/research/_index.md b/content/research/_index.md index d119cc96dc2858b5481b3c62d7c80a97a2857547..670c05a1a9cf303065fa4e0591100823295f5d04 100644 --- a/content/research/_index.md +++ b/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 diff --git a/less/page_css_file/research/_variables.less b/less/page_css_file/research/_variables.less index 0db7b2510960484bcbd2745b49f33048f6c56b2c..abee6b5f0dfbd1684ffa98e446523d1d80f19814 100644 --- a/less/page_css_file/research/_variables.less +++ b/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'); diff --git a/less/page_css_file/research/images/home-jumbotron.jpg b/less/page_css_file/research/images/home-jumbotron.jpg new file mode 100644 index 0000000000000000000000000000000000000000..7ff34862779c2b29d56c4e19066face704a8fff1 Binary files /dev/null and b/less/page_css_file/research/images/home-jumbotron.jpg differ diff --git a/less/page_css_file/research/images/research-jumbo-image.jpg b/less/page_css_file/research/images/research-jumbo-image.jpg deleted file mode 100644 index 902377036de76cb1b2ee7a4adf2166ec536de933..0000000000000000000000000000000000000000 Binary files a/less/page_css_file/research/images/research-jumbo-image.jpg and /dev/null differ diff --git a/less/page_css_file/research/styles.less b/less/page_css_file/research/styles.less index 40a1530103f9f2ab35de191bb013cb9d8f34209f..bb6df9e740670a707618ecbea380375e39c004cb 100644 --- a/less/page_css_file/research/styles.less +++ b/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 {