Merge pull request #3305 from kaimmej/homepage-redesign

Mobile Nav - Blog Button
opensearch-project · Sep 19, 2024 · 6e51e2a · 6e51e2a
2 parents 80f2d34 + d87e2e0
commit 6e51e2a
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 16 deletions.
diff --git a/_data/header_navmenu_datafile.json b/_data/header_navmenu_datafile.json
@@ -10,7 +10,7 @@
             "collapse-data-target": "collapse-data-target-platform",
             "SubNav": [
                 {
-                    "Name": "OpenSearch",
+                    "Name": "OpenSearch Core",
                     "URL": "https://opensearch.org/docs/latest/"
                 },
                 {
@@ -245,7 +245,7 @@
                     "ClassValue": "drawer-content-header-link",
                     "URL": "/blog/",
                     "TableHeading": "Most Recent Articles",
-                    "NumberPostsShown": 7
+                    "NumberPostsShown": 10
                 }
             ],
 

diff --git a/_includes/navbar.html b/_includes/navbar.html
@@ -50,15 +50,15 @@
 
 
                     <!-- TOP-NAV DROP DOWN  -->
-                    <div class="container mobile-nav-contentSection-accordion accordion accordion-flush" id="mobile-nav-contentSection-accordion">
+                    <div class="container mobile-nav-contentSection-accordion accordion accordion-flush mb-4" id="mobile-nav-contentSection-accordion">
 
 
                         <!-- CONTENT SECTION ACCORDION -->
 
                         {% for sub_category in data_mobile_nav %}
                             <div class="accordion-item">
                                 <h2 class="accordion-header row">
-                                    <div class="col-3 px-0 ms-4 me-0 pt-3 icon-div-box-mobile">
+                                    <div class="col-3 px-0 ms-1 me-0 pt-3 icon-div-box-mobile">
                                         {% include icons_navbar.html type=sub_category.Icon %} 
                                     </div>
                                     <div class="col">
@@ -73,7 +73,7 @@ <h2 class="accordion-header row">
 
                                         {% for nav_link in sub_category.SubNav %}
                                             <div class="row">
-                                                <a href='{{ nav_link.URL }}' class="ms-5 mobile-content-text-link">{{ nav_link.Name }}</a>
+                                                <a href='{{ nav_link.URL }}' class="ms-4 pb-3 mobile-content-text-link">{{ nav_link.Name }}</a>
                                             </div>
                                         {% endfor %}
 
@@ -87,6 +87,13 @@ <h2 class="accordion-header row">
 
                     </div>
 
+                    <!-- BLOG BUTTON -->
+                    <div class="row px-4">
+                        <a type="button" href="/blog/" class="btn button-dark rounded-pill mx-auto">
+                            Visit the OpenSearch Blog
+                        </a>
+                    </div>
+
 
 
 
@@ -102,7 +109,7 @@ <h2 class="accordion-header row">
 
 
 <!-- DESKTOP MENU -->
-<div class="nav-drawer accordion mb-5 d-none d-lg-block" id="accordion-megamenu">
+<div class="nav-drawer accordion mb-3 d-none d-lg-block" id="accordion-megamenu">
 
 
     <nav class="navbar top-nav-desktop navbar-expand-lg">

diff --git a/_sass/_navbar.scss b/_sass/_navbar.scss
@@ -1,7 +1,7 @@
 // Navbar
 
 .mobile-nav-topLevel-wrapper {
-
+    overflow-x: hidden;
 
     .mobile-nav-topLevel-accordion {
 
@@ -33,7 +33,8 @@
     } 
 }
 .mobile-nav-contentSection-accordion {
-
+    overflow-x: hidden;
+
     --bs-accordion-btn-bg: #003551;                   // (BUTTON) Background color of the top accordion header
     --bs-accordion-active-bg: #003551;                // (BUTTON) (When active) Background color of the top accordion header
     --bs-accordion-btn-focus-box-shadow: none;
@@ -72,28 +73,32 @@
     }
     .mobile-content-text-link {
         color: $primary-open-sky-t3;
-        font-size: 24px;
+        font-size: 18px;
         font-weight: 400;
-        line-height: 48px;
+        line-height: 27px;
         text-decoration: none;
     }
 
 } 
 
 
 .button-dark {
-    background-color: #F4F8FB;
-    border-radius: 6px;
-    border-color: #B9D9EB;
-    color: #006D97;
-    font-size: 15px;
+    // --bs-btn-color: $secondary-sanfrancisco-fog-t1;
+    --bs-btn-padding-y: 15px;
+    --bs-btn-padding-x: 15px;
+    background-color: $primary-open-sky-s2;
+    border-radius: 0px;
+    border-color: $secondary-sanfrancisco-fog-t1;
+    color: $secondary-sanfrancisco-fog-t1 !important;
+
+    font-size: 18px;
     font-weight: 700;
     line-height: 24px;
 
     &:hover {
         border-color: #006D97;
         color: #003551; 
-        background-color: #C7DFEE;
+        // background-color: #C7DFEE;
     }  
 }