This is an automated email from the ASF dual-hosted git repository.
twice pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/kvrocks-website.git
The following commit(s) were added to refs/heads/main by this push:
new 103de34b Enhance Navigation Bar UI/UX for Desktop and Mobile Views
(#284)
103de34b is described below
commit 103de34b36db58d15e903c1fc0c7c3126efd62ff
Author: Vivek W <[email protected]>
AuthorDate: Sat Mar 15 19:31:41 2025 +0530
Enhance Navigation Bar UI/UX for Desktop and Mobile Views (#284)
* Add dark mode support
* fix: improve logo visibility in light and dark themes
This commit addresses two logo visibility issues:
1. User logos are now displayed on a white background in dark theme
to provide proper contrast
2. Feature icons on the homepage (particularly namespace logo) now
have a subtle drop shadow to improve visibility against light
backgrounds
* feat(ui): Enhance navigation bar for desktop and mobile views
Improve the website's navigation bar with modern styling and better
responsiveness
---
docusaurus.config.js | 1 +
src/css/custom.css | 161 +++++++++++++++++++++++++++++++++++++++++++++++++++
2 files changed, 162 insertions(+)
diff --git a/docusaurus.config.js b/docusaurus.config.js
index b3768ab0..27311edc 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -104,6 +104,7 @@ const config = {
],
},
],
+ hideOnScroll: true,
},
footer: {
style: 'dark',
diff --git a/src/css/custom.css b/src/css/custom.css
index efc833c7..acde1c86 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -78,3 +78,164 @@
background:
url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3NzMuMTIgNzczLjEyIj48bGluZWFyR3JhZGllbnQgaWQ9ImEiIHgxPSIwIiB5MT0iMCIgeDI9IjAiIHkyPSIxIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiM1MGFkZmYiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM3ODc3ZmMiLz48L2xpbmVhckdyYWRpZW50PjxjaXJjbGUgY3g9IjM4Ni41NiIgY3k9IjM4Ni41NiIgcj0iMzg2LjU2IiBmaWxsPSJ1cmwoI2EpIi8+PHBhdGggZD0iTTU2Ni42NiA1MjcuMjVjMCAzMy4wMy0yNC4yMyA2MC4wNS01My44NCA2MC4wNUgyNjAuMjl
[...]
no-repeat;
}
+
+/* Navbar styling */
+.navbar {
+ box-shadow: 0 2px 5px 0 rgba(0,0,0,0.1);
+ transition: all 0.3s ease;
+ padding: 0.5rem 1rem;
+}
+
+.navbar__logo {
+ height: 2.5rem;
+ margin-right: 0.5rem;
+ transition: transform 0.2s ease;
+}
+
+.navbar__logo:hover {
+ transform: scale(1.05);
+}
+
+.navbar__brand {
+ font-weight: 600;
+}
+
+.navbar__link {
+ font-weight: 500;
+ position: relative;
+ transition: all 0.2s ease;
+}
+
+.navbar__link:hover {
+ color: var(--ifm-color-primary);
+}
+
+.navbar__link:after {
+ content: '';
+ position: absolute;
+ width: 0;
+ height: 2px;
+ bottom: -4px;
+ left: 0;
+ background-color: var(--ifm-color-primary);
+ transition: width 0.3s ease;
+}
+
+.navbar__link:hover:after {
+ width: 100%;
+}
+
+/* Dropdown menu styling */
+.navbar__item.dropdown .navbar__link {
+ display: flex;
+ align-items: center;
+}
+
+.navbar__item.dropdown .navbar__link:after {
+ content: '';
+ width: 0;
+ height: 0;
+ border-left: 5px solid transparent;
+ border-right: 5px solid transparent;
+ border-top: 5px solid var(--ifm-navbar-link-color);
+ margin-left: 6px;
+ transition: transform 0.2s ease;
+}
+
+.navbar__item.dropdown:hover .navbar__link:after {
+ transform: rotate(180deg);
+}
+
+.dropdown__menu {
+ min-width: 200px;
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+ border-radius: 6px;
+ padding: 0.5rem 0;
+ border: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+[data-theme='dark'] .dropdown__menu {
+ background-color: #2a2e33;
+ border: 1px solid rgba(255, 255, 255, 0.05);
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+}
+
+.dropdown__link {
+ padding: 0.75rem 1.25rem;
+ font-weight: 500;
+ transition: all 0.2s ease;
+ position: relative;
+ display: flex;
+ align-items: center;
+}
+
+.dropdown__link:hover {
+ background-color: var(--ifm-color-primary-lightest);
+ color: var(--ifm-color-primary-darkest);
+}
+
+[data-theme='dark'] .dropdown__link:hover {
+ background-color: rgba(78, 147, 205, 0.15);
+ color: var(--ifm-color-primary-lightest);
+}
+
+/* Mobile navbar styling */
+@media (max-width: 996px) {
+ .navbar__toggle {
+ margin-right: 0.5rem;
+ }
+
+ .navbar-sidebar {
+ box-shadow: 0 0 15px rgba(0,0,0,0.2);
+ }
+
+ .navbar-sidebar__brand {
+ padding: 0.75rem 1rem;
+ }
+
+ .navbar-sidebar__items {
+ padding: 0.5rem 0;
+ }
+
+ .navbar-sidebar__item {
+ padding: 0.75rem 1.5rem;
+ }
+
+ .navbar-sidebar__back {
+ background-color: var(--ifm-color-primary-lightest);
+ color: var(--ifm-color-primary-darkest);
+ padding: 0.75rem 1.5rem;
+ font-weight: 600;
+ border-radius: 4px;
+ margin: 0.5rem 1rem;
+ }
+
+ .menu__link {
+ border-radius: 4px;
+ transition: all 0.2s ease;
+ }
+
+ .menu__link:hover {
+ background-color: var(--ifm-color-primary-lightest);
+ }
+
+ /* Mobile dropdown styling */
+ .navbar-sidebar .navbar__item.dropdown .menu__link {
+ padding: 0.75rem 1.5rem;
+ }
+
+ .navbar-sidebar .navbar__item.dropdown .menu {
+ padding-left: 1rem;
+ }
+
+ .navbar-sidebar .dropdown__menu {
+ box-shadow: none;
+ border: none;
+ padding: 0;
+ }
+
+ .navbar-sidebar .dropdown__link {
+ border-radius: 4px;
+ margin: 0.25rem 0;
+ }
+}
