From 0a1407e8dcec7a92011db9b253430d249aafd0c2 Mon Sep 17 00:00:00 2001
From: Maciej Manista <maciej.manista@bynd.com>
Date: Thu, 6 Mar 2025 18:16:13 +0100
Subject: [PATCH] fix: docs styling - addressing QA feedback

---
 theme/base.html              | 58 +++++++++++++++++-------------------
 theme/css/colors.css         |  3 +-
 theme/css/docs.css           | 17 +++++------
 theme/css/icons.css          |  8 ++---
 theme/css/index.css          | 17 -----------
 theme/css/landing.css        |  3 +-
 theme/css/nav.css            | 35 ++++++++++++++++++----
 theme/icons/search-color.svg |  3 ++
 8 files changed, 76 insertions(+), 68 deletions(-)
 create mode 100644 theme/icons/search-color.svg

diff --git a/theme/base.html b/theme/base.html
index 0921b73cc6..f7a582d5a3 100644
--- a/theme/base.html
+++ b/theme/base.html
@@ -70,6 +70,20 @@
   <!-- End Google Tag Manager (noscript) -->
 
   <div class="k-page">
+    <div class="hidden">
+      {% set related_nav_urls_map = {
+        "/api/": ["/2.18/api/"],
+        "/2.18/api/": ["/api/"],
+        "/keras_tuner/": ["/keras_hub/"],
+        "/keras_hub/": ["/keras_tuner/"],
+      } %}
+      {% set vars = {'related_urls': [], 'active_url': ''} %}
+      {% for item in nav %}
+        {% if item.active %}
+          {{ vars.update({'related_urls': related_nav_urls_map[item.url], 'active_url': item.url}) }}
+      {% endif %}
+      {% endfor %}
+    </div>
     <nav class="nav__container">
       <div class="nav__wrapper">
         <div class="nav__controls--mobile">
@@ -112,25 +126,24 @@
           </div>
         </div>
 
-        <img class="nav__logo nav__logo--desktop" src="{{base_url}}img/logo.png" />
+        <a href="{{base_url}}">
+          <img class="nav__logo nav__logo--desktop" src="{{base_url}}img/logo.png" alt="keras.io logo" />
+        </a>
         <div class="nav__menu">
+          {% set main_nav_items = {
+          '/getting_started/': 'Get started',
+          '/about/': 'About',
+          '/guides/': 'Guides',
+          '/api/': 'API Docs',
+          '/examples/': 'Examples',
+          '/keras_hub/': 'KerasHub',
+          } %}
           <ul class="nav__item--container">
+            {% for key, value in main_nav_items.items() %}
             <li class="nav__item">
-              <a class="nav__link" href="{{base_url}}getting_started/">GET STARTED</a>
-            </li>
-            <li class="nav__item">
-              <a class="nav__link" href="{{base_url}}about/">ABOUT</a>
-            </li>
-            <li class="nav__item">
-              <a class="nav__link" href="{{base_url}}guides/">GUIDES</a>
-            </li>
-            <li class="nav__item">
-              <a class="nav__link" href="{{base_url}}api/">API DOCS</a>
+              <a class="nav__link{% if key == vars['active_url'] or key in vars['related_urls'] %} nav__link--active{% endif %}" href="{{ key }}">{{ value }}</a>
             </li>
-            <li class="nav__item">
-              <a class="nav__link" href="{{base_url}}examples/">EXAMPLES</a>
-            </li>
-            <li class="nav__item"><a class="nav__link" href="{{base_url}}keras_hub/">KERASHUB</a></li>
+            {% endfor %}
           </ul>
 
           <form class="nav__search">
@@ -150,22 +163,7 @@
 
     <div class="page__container flex__container">
       <div class="nav__side-nav" id="nav-menu">
-        <!-- version with just the active item visible -->
         <div class="nav flex-column nav-pills" role="tablist" aria-orientation="vertical">
-          <div class="hidden">
-            {% set related_nav_urls_map = {
-              "/api/": ["/2.18/api/"],
-              "/2.18/api/": ["/api/"],
-              "/keras_tuner/": ["/keras_hub/"],
-              "/keras_hub/": ["/keras_tuner/"],
-            } %}
-            {% set vars = {'related_urls': []} %}
-            {% for item in nav %}
-              {% if item.active %}
-                {{ vars.update({'related_urls': related_nav_urls_map[item.url]}) }}
-              {% endif %}
-            {% endfor %}
-          </div>
           {% for item in nav %}
             {% if (item.active and item.children|length > 0) or item.url in vars['related_urls'] %}
             <a class="nav-link{% if item.active %} active{% endif %}" href="{{item.url}}" role="tab" aria-selected="{{item.selected}}">
diff --git a/theme/css/colors.css b/theme/css/colors.css
index f8ace94133..12e621ade2 100644
--- a/theme/css/colors.css
+++ b/theme/css/colors.css
@@ -24,4 +24,5 @@
   /* Text Colors */
   --text-black: #292321;
   --text-red: #A30000;
-}
\ No newline at end of file
+  --alternate-red: #d00000;
+}
diff --git a/theme/css/docs.css b/theme/css/docs.css
index d8c5bb1d59..ad06f521eb 100644
--- a/theme/css/docs.css
+++ b/theme/css/docs.css
@@ -1,13 +1,6 @@
 @import url("nav.css");
 @import url("icons.css");
-
-:root {
-  --dark-grey: #3f3f3f;
-  --grey: #E7E7E7;
-  --light-grey: #F3F3F3;
-  --alternate-red: #d00000;
-  --text-red: #a30000;
-}
+@import url("colors.css");
 
 body {
   font-family: 'Montserrat', 'Open Sans', sans-serif;
@@ -443,7 +436,7 @@ td {
 }
 
 .keras_3 {
-  background: #188485;
+  background: #303841;
   color: white;
 }
 
@@ -452,9 +445,13 @@ td {
   color: black;
 }
 
+li::marker {
+  color: var(--alternate-red);
+}
+
 /* we include Bootstrap on this page, but the landing page has been created without it - we need to revert
 some changes to the navigation to make it look the same across both */
-nav.nav__container * {
+nav.nav__container *:not(input):not(button) {
   box-sizing: content-box;
 }
 
diff --git a/theme/css/icons.css b/theme/css/icons.css
index d88f07584a..d7fc682b2f 100644
--- a/theme/css/icons.css
+++ b/theme/css/icons.css
@@ -3,10 +3,10 @@ i {
 }
 
 .icon--search {
-  background-image: url("../icons/search.png");
+  background-image: url("../icons/search-color.svg");
   background-size: cover;
-  height: 12px;
-  width: 12px;
+  height: 16px;
+  width: 16px;
 }
 
 .icon__search--mobile {
@@ -42,4 +42,4 @@ i {
   background-size: cover;
   height: 20px;
   width: 20px;
-}
\ No newline at end of file
+}
diff --git a/theme/css/index.css b/theme/css/index.css
index 15265f5f29..4900d1e579 100644
--- a/theme/css/index.css
+++ b/theme/css/index.css
@@ -158,23 +158,6 @@ code[class*="language-"] * {
   background: inherit !important;
 }
 
-footer {
-  background: var(--grey);
-}
-
-footer a {
-  color: #000;
-  font-size: 16px;
-  line-height: 25.6px;
-  font-weight: 500;
-}
-
-.footer__container {
-  display: flex;
-  gap: 6px;
-  padding: 24px;
-}
-
 @media only screen and (max-width: 1199px) {
   h1 {
     font-weight: 700;
diff --git a/theme/css/landing.css b/theme/css/landing.css
index d6f7ae8616..8f23c41ca9 100755
--- a/theme/css/landing.css
+++ b/theme/css/landing.css
@@ -4,7 +4,7 @@
 html,
 body {
   overflow-x: hidden;
-  width: 100vw;
+  width: 100%;
 }
 
 .stack--container {
@@ -69,6 +69,7 @@ body {
   box-shadow: 0px 6px 10px 4px #00000026;
   margin: 40px 0 60px;
   position: relative;
+  z-index: 1; /* place the code element above the ::before shadow from another component */
 }
 
 .code__container--quickstart {
diff --git a/theme/css/nav.css b/theme/css/nav.css
index 02beca81f4..cb5553019d 100644
--- a/theme/css/nav.css
+++ b/theme/css/nav.css
@@ -47,10 +47,6 @@ nav {
   width: 100%;
 }
 
-.nav__search-form--mobile .nav__search--button {
-  top: 17px;
-}
-
 .nav__menu--button,
 .nav__menu--close {
   background: transparent;
@@ -106,7 +102,8 @@ nav {
   padding: 5px;
   position: absolute;
   right: 8px;
-  top: 6px;
+  top: 50%;
+  transform: translateY(-50%);
   width: fit-content;
 }
 
@@ -342,5 +339,33 @@ nav {
   .nav__link {
     color: var(--dark-grey);
     font-family: 'Montserrat', 'Open Sans', sans-serif;
+    text-transform: uppercase;
   }
+
+  .nav__link--active {
+    color: var(--text-red);
+  }
+
+  .footer__container {
+    margin: auto;
+    max-width: 1440px;
+    padding: 16px 64px;
+  }
+}
+
+footer {
+  background: var(--grey);
+}
+
+footer a {
+  color: var(--text-black);
+  font-size: 16px;
+  line-height: 25.6px;
+  font-weight: 500;
+}
+
+.footer__container {
+  display: flex;
+  gap: 6px;
+  padding: 24px;
 }
diff --git a/theme/icons/search-color.svg b/theme/icons/search-color.svg
new file mode 100644
index 0000000000..cdd37bf964
--- /dev/null
+++ b/theme/icons/search-color.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17" fill="#a30000">
+    <path d="M10.5033 10.0033H9.97659L9.78992 9.82335C10.4433 9.06335 10.8366 8.07668 10.8366 7.00335C10.8366 4.61001 8.89659 2.67001 6.50326 2.67001C4.10992 2.67001 2.16992 4.61001 2.16992 7.00335C2.16992 9.39668 4.10992 11.3367 6.50326 11.3367C7.57659 11.3367 8.56326 10.9433 9.32326 10.29L9.50326 10.4767V11.0033L12.8366 14.33L13.8299 13.3367L10.5033 10.0033ZM6.50326 10.0033C4.84326 10.0033 3.50326 8.66335 3.50326 7.00335C3.50326 5.34335 4.84326 4.00335 6.50326 4.00335C8.16326 4.00335 9.50326 5.34335 9.50326 7.00335C9.50326 8.66335 8.16326 10.0033 6.50326 10.0033Z"/>
+</svg>