Adds documentation site banner (#2544)

* Adds documentation site banner

Signed-off-by: Fanit Kolchina <kolchfa@amazon.com>

* Makes adjustments for phone screens

Signed-off-by: Fanit Kolchina <kolchfa@amazon.com>

* Adds background image to banner

Signed-off-by: Fanit Kolchina <kolchfa@amazon.com>

* Adds background to image

Signed-off-by: Fanit Kolchina <kolchfa@amazon.com>

* Added centering

Signed-off-by: Fanit Kolchina <kolchfa@amazon.com>

* Lower contrast image

Signed-off-by: Fanit Kolchina <kolchfa@amazon.com>

---------

Signed-off-by: Fanit Kolchina <kolchfa@amazon.com>

_includes/banner.html

@@ -0,0 +1,11 @@
+<section class="os-banner">
+    <header class="banner-head" style="background-image: url('{{site.url}}{{site.baseurl}}/images/graphic-bg.jpg')">
+        <div class="banner-text-div">
+            <span class="banner-text-header">OpenSearch Documentation</span>
+            <p class="banner-text-description">Learn to use OpenSearch, the highly scalable and extensible open-source software suite for search, analytics, observability, and other data-intensive applications.</p>
+        </div>
+        <div>
+            <button class="btn-contribute"><span>Contribute<svg width="20" viewBox="0 0 24 24"><use xlink:href="#svg-arrow-right"></use></svg></span></button>
+        </div>
+    </header>
+</section>   

_includes/feedback.html

@@ -5,5 +5,5 @@
         <button id="no" type="button" value="no" class="feedback-button">&#10006; No</button>
         <p class="text-small text-grey-dk-100 hidden">Thank you for your feedback!</p>
     </div>
-    <p class="text-small text-grey-dk-100">See a problem? Submit <a class="feedback-issue" href="https://github.com/opensearch-project/documentation-website/issues">issues</a> or <a class="feedback-edit" href="https://github.com/opensearch-project/documentation-website/edit/main/{{ page.path }}">edit this page</a> on <a href="https://github.com/opensearch-project/documentation-website/">GitHub</a>.</p>
+    <p class="text-small text-grey-dk-100">Want to contribute? <a class="feedback-edit" target="_blank" href="https://github.com/opensearch-project/documentation-website/edit/main/{{ page.path }}">Edit this page</a> or <a class="feedback-issue" target="_blank" href="https://github.com/opensearch-project/documentation-website/issues/new?assignees=&labels=untriaged&template=issue_template.md&title=%5BDOC%5D">create an issue</a>.</p>
 </div>

_sass/custom/custom.scss

@@ -114,11 +114,15 @@ code {
   left: 0.25rem;
 }
 
-img {
+.panel {
   border-radius: $border-radius;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
 }
 
+img {
+  @extend .panel;
+}
+
 .no-border {
   border: none;
   box-shadow: none;
@@ -210,15 +214,13 @@ img {
   padding: 0.5rem 1rem;
   margin-left: 0.4rem;
   margin-right: 0.4rem;
-  transition: 0.3s;
   &:hover {
     &:not([disabled]) {
-      background-color: #EAF4F9;
+      background-color: $blue-lt-000;
       box-shadow: 1px 2px 4px $grey-lt-300;
       transform: translateY(-1px);
       text-decoration:underline;
       text-underline-offset: 2px;
-      display:inline-block;
     }
     &:active {
       transform: translateY(1px);
@@ -337,6 +339,63 @@ p.label {
   }
 }
 
+.os-banner {
+  @extend .panel;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  color: white;
+  background: linear-gradient(to right, $blue-dk-300, $blue-dk-200 80%); // fallback if image is not rendered
+}
+
+.banner-head {
+  @extend .panel;
+}
+
+.banner-text-div {
+  margin: 1rem 1rem 0 1.5rem;
+  padding: 0 1.5rem;
+  border-style: none none none solid;
+  border-color: $blue-lt-300;
+  border-width: 4px;
+  border-radius: 1px;
+  max-width: 47rem;
+  @include mq(sm) {  
+    margin: 2rem 4rem 0 4rem;
+  }
+}
+
+.banner-text-header {
+  font-size: 2rem;
+  font-weight: 700;
+  @include mq(sm) {
+    font-size: 2.5rem;
+  }
+}
+
+.banner-text-description {
+  font-size: 1rem;
+  font-weight: 500;
+}
+
+.btn-contribute {
+  @extend .btn-general;
+  margin-bottom: 2rem;
+  margin-right: 4rem;
+  float: right;
+  color: $blue-dk-300;
+  box-shadow: 2px 3px 5px #000000;
+  &:hover {
+    box-shadow: 2px 3px 5px $blue-dk-300 !important;
+  }
+}
+
+.btn-contribute span {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}
 
 // Modifies margins in xl layout to support TOC
 .side-bar {

assets/js/listener.js

@@ -12,6 +12,9 @@ document.addEventListener('click', function(event) {
     else if (target.matches('.copy-button')) {
         window.navigator.clipboard.writeText(target.getAttribute('data-text'));
     }
+    else if (target.matches('.btn-contribute')) {
+        window.open('https://github.com/opensearch-project', '_blank');
+    }
 });
 
 function sendFeedback(button) {
@@ -27,4 +30,4 @@ function sendFeedback(button) {
     // disable the feedback buttons
     button.disabled = true;
     button[button.id === 'yes' ? 'nextElementSibling' : 'previousElementSibling']?.setAttribute('disabled', true);
-}
+}

index.md

@@ -7,13 +7,9 @@ redirect_from: /404.html
 permalink: /
 ---
 
-# OpenSearch documentation
+{% include banner.html %}
 
-Welcome to the OpenSearch documentation! With this documentation, you’ll learn how to use OpenSearch —  the only 100% open-source search, analytics, and visualization suite.
-We have a dedicated and growing number of technical writers who are building our documentation library. We also welcome and encourage community input. To contribute, see the [Contributing](https://opensearch.org/source.html) file. A good place to start is by browsing  issues labeled “_good first issue_.”
-
-
-## Getting started
+# Getting started
 
 - [About OpenSearch]({{site.url}}{{site.baseurl}}/opensearch/)
 - [Quickstart]({{site.url}}{{site.baseurl}}/quickstart/)