Refactor home page layout (opensearch-project#6307)

* Refactor home page layout

Signed-off-by: Fanit Kolchina <[email protected]>

* Remove hover from last link

Signed-off-by: Fanit Kolchina <[email protected]>

---------

Signed-off-by: Fanit Kolchina <[email protected]>

Author: kolchfa-aws

_includes/banner.html

@@ -5,7 +5,7 @@
             <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>
+            <button id="contribute" 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/cards.html

@@ -5,30 +5,30 @@
       <a href="{{site.url}}{{site.baseurl}}/about/" class='card-link'></a>
         <p class="heading">OpenSearch and OpenSearch Dashboards</p>
         <p class="description">Learn how to power up your search</p>
-        <button class="last-link">Documentation &#x2192;</button>
+        <p class="last-link">Documentation &#x2192;</p>
       </div>
 
 
     <div class="card">
       <a href="{{site.url}}/docs/latest/data-prepper/" class='card-link'></a>
         <p class="heading">Data Prepper</p>
         <p class="description">Prepare your data for OpenSearch</p>
-        <button class="last-link" >Documentation &#x2192;</button>
+        <p class="last-link" >Documentation &#x2192;</p>
       </div>
 
     <div class="card">
       <a href="{{site.url}}/docs/latest/clients/" class='card-link'></a>
         <p class="heading">Clients</p>
         <p class="description">OpenSearch in your programming language</p>
-        <button class="last-link">Documentation &#x2192;</button>
+        <p class="last-link">Documentation &#x2192;</p>
       </div>
 
 
     <div class="card">
       <a href="{{site.url}}/docs/latest/benchmark/" class='card-link'></a>
         <p class="heading">Benchmark</p>
         <p class="description">Track OpenSearch performance</p>
-        <button class="last-link">Documentation &#x2192;</button>
+        <p class="last-link">Documentation &#x2192;</p>
       </div>  
   </div>
 

_layouts/home.html

@@ -31,6 +31,6 @@
 
   {% include footer.html %}
   <script src="{{ '/assets/js/search.js' | relative_url }}"></script>
-  <script src="{{ '/assets/js/listener.js' | relative_url }}"></script>
+  <script src="{{ '/assets/js/home-listener.js' | relative_url }}"></script>
 </body>
 </html>

_sass/_home.scss

@@ -61,7 +61,6 @@
             color: $blue-vibrant-300;
         }
         > .last-link {
-            transform: translateY(-1px);
             text-decoration: underline;
             text-underline-offset: 3px;
         }
@@ -145,7 +144,7 @@
   }
 
   .banner-text-header {
-    font-size: 2.3rem;
+    font-size: 2.1rem;
     font-family: "Open Sans";
     font-weight: 300;
     @include mq(md) {
@@ -154,12 +153,12 @@
   }
 
   .banner-text-description {
-    font-size: 1.3rem;
+    font-size: 1rem;
     font-weight: 700;
     font-style: normal;
     line-height: 2.25rem;
     @include mq(md) {
-        font-size: 1rem;
+        font-size: 1.3rem;
     }
   }
 

assets/js/home-listener.js

@@ -0,0 +1,5 @@
+const contributeButton = document.getElementById('contribute');
+
+contributeButton.addEventListener('click', function(event) {
+    window.open('https://github.com/opensearch-project', '_blank');
+});

assets/js/listener.js

@@ -28,9 +28,6 @@ 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');
-    }
 });
 
 nav.addEventListener('scroll',(e)=>{