fix: docs styling - addressing QA feedback

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}}">

theme/css/colors.css

@@ -24,4 +24,5 @@
   /* Text Colors */
   --text-black: #292321;
   --text-red: #A30000;
-}
+  --alternate-red: #d00000;
+}

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;
 }
 

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;
-}
+}

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;

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 {

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;
 }