This is an automated email from the ASF dual-hosted git repository.
schofielaj pushed a commit to branch markdown
in repository https://gitbox.apache.org/repos/asf/kafka-site.git
The following commit(s) were added to refs/heads/markdown by this push:
new d5462a632 Multiple fixes for responsive rendering in mobile mode (#752)
d5462a632 is described below
commit d5462a63243a1805e1f761fdccb12d8a0d6f7bda
Author: Harish Vishwanath <[email protected]>
AuthorDate: Tue Nov 25 00:54:52 2025 -0800
Multiple fixes for responsive rendering in mobile mode (#752)
* Mobile menu bar - open/close animation and fixes
* Remove releases from mobile menu. Fix for expanding sub-menu items on
click
* fix extraneous border line on the home page in mobile mode
* Fix the download kafka button width and offsets in mobile mode
* Fix table header styling - transform to uppercase with slightly darker
background
---
assets/scss/_variables_project.scss | 663 +++++++++++++--------------
assets/scss/_variables_project_after_bs.scss | 209 ++++++++-
layouts/partials/hooks/head-end.html | 3 +-
layouts/partials/navbar.html | 502 +++++++++++---------
4 files changed, 801 insertions(+), 576 deletions(-)
diff --git a/assets/scss/_variables_project.scss
b/assets/scss/_variables_project.scss
index 2feb02b90..6655aa8b2 100644
--- a/assets/scss/_variables_project.scss
+++ b/assets/scss/_variables_project.scss
@@ -9,175 +9,175 @@ $primary: #ffffff;
// Layout
.l-container--padded {
- padding-top: 2rem;
- padding-bottom: 2rem;
- }
-
+ padding-top: 2rem;
+ padding-bottom: 2rem;
+}
+
.grid__item__logo {
+ margin: auto;
+ width: 100%;
+ max-width: 12rem;
+ height: 5rem;
+ display: block;
+ background-size: contain;
+ background-repeat: no-repeat;
+ background-position: center center;
+ border-radius: 0.25rem;
+ padding: 0.5rem;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+
+ &:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+ }
+}
+
+.c-testimonials {
+ margin-top: 4rem;
+ margin-bottom: 2rem;
+ padding-top: 2rem;
+}
+
+
+.c-testimonials__testimonial {
+ text-align: center;
+ margin-bottom: 2rem;
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+
+ a {
+ display: block;
+ margin-bottom: 0.75rem;
+ }
+
+ .c-testimonials__description {
+ font-size: 0.875rem;
+ line-height: 1.5;
+ margin-bottom: 0;
+ text-align: left;
+ flex-grow: 1;
+
+ a {
+ display: inline;
+ margin-bottom: 0;
+ color: #0066cc;
+ text-decoration: underline;
+
+ &:hover {
+ color: #0052a3;
+ }
+ }
+ }
+
+ // Responsive adjustments
+ @media (max-width: 576px) {
+ margin-bottom: 1.5rem;
+
+ .c-testimonials__description {
+ font-size: 0.8125rem;
+ }
+ }
+}
+
+.c-podcasts {
+ margin-top: 2rem;
+ margin-bottom: 2rem;
+ padding-top: 2rem;
+}
+
+.c-podcasts__podcast {
+ text-align: center;
+ margin-bottom: 3rem;
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+
+ .c-podcasts__link {
+ display: block;
+ margin-bottom: 1rem;
+ }
+
+ .c-podcasts__logo {
margin: auto;
width: 100%;
max-width: 12rem;
- height: 5rem;
+ height: 12rem;
display: block;
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
- border-radius: 0.25rem;
- padding: 0.5rem;
+ border-radius: 0.5rem;
+ padding: 1rem;
transition: transform 0.2s ease, box-shadow 0.2s ease;
-
+
&:hover {
- transform: translateY(-2px);
- box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+ transform: translateY(-4px);
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
-}
+ }
-.c-testimonials {
- margin-top: 4rem;
- margin-bottom: 2rem;
- padding-top: 2rem;
-}
+ .c-podcasts__title {
+ margin-top: 1rem;
+ margin-bottom: 0.75rem;
+ font-size: 1.125rem;
+ font-weight: 600;
-
-.c-testimonials__testimonial {
- text-align: center;
- margin-bottom: 2rem;
- display: flex;
- flex-direction: column;
- height: 100%;
-
a {
- display: block;
- margin-bottom: 0.75rem;
- }
-
- .c-testimonials__description {
- font-size: 0.875rem;
- line-height: 1.5;
- margin-bottom: 0;
- text-align: left;
- flex-grow: 1;
-
- a {
- display: inline;
- margin-bottom: 0;
- color: #0066cc;
+ color: #212529;
+ text-decoration: none;
+ transition: color 0.2s ease;
+
+ &:hover {
+ color: #007bff;
text-decoration: underline;
-
- &:hover {
- color: #0052a3;
- }
}
}
-
- // Responsive adjustments
- @media (max-width: 576px) {
- margin-bottom: 1.5rem;
-
- .c-testimonials__description {
- font-size: 0.8125rem;
+ }
+
+ .c-podcasts__description {
+ font-size: 0.875rem;
+ line-height: 1.6;
+ margin-bottom: 0;
+ text-align: left;
+ flex-grow: 1;
+ color: #495057;
+
+ a {
+ display: inline;
+ margin-bottom: 0;
+ color: #0066cc;
+ text-decoration: underline;
+
+ &:hover {
+ color: #0052a3;
}
}
-}
+ }
-.c-podcasts {
- margin-top: 2rem;
+ // Responsive adjustments
+ @media (max-width: 576px) {
margin-bottom: 2rem;
- padding-top: 2rem;
-}
-.c-podcasts__podcast {
- text-align: center;
- margin-bottom: 3rem;
- display: flex;
- flex-direction: column;
- height: 100%;
-
- .c-podcasts__link {
- display: block;
- margin-bottom: 1rem;
- }
-
.c-podcasts__logo {
- margin: auto;
- width: 100%;
- max-width: 12rem;
- height: 12rem;
- display: block;
- background-size: contain;
- background-repeat: no-repeat;
- background-position: center center;
- border-radius: 0.5rem;
- padding: 1rem;
- transition: transform 0.2s ease, box-shadow 0.2s ease;
-
- &:hover {
- transform: translateY(-4px);
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
- }
+ max-width: 10rem;
+ height: 10rem;
}
-
+
.c-podcasts__title {
- margin-top: 1rem;
- margin-bottom: 0.75rem;
- font-size: 1.125rem;
- font-weight: 600;
-
- a {
- color: #212529;
- text-decoration: none;
- transition: color 0.2s ease;
-
- &:hover {
- color: #007bff;
- text-decoration: underline;
- }
- }
+ font-size: 1rem;
}
-
+
.c-podcasts__description {
- font-size: 0.875rem;
- line-height: 1.6;
- margin-bottom: 0;
- text-align: left;
- flex-grow: 1;
- color: #495057;
-
- a {
- display: inline;
- margin-bottom: 0;
- color: #0066cc;
- text-decoration: underline;
-
- &:hover {
- color: #0052a3;
- }
- }
- }
-
- // Responsive adjustments
- @media (max-width: 576px) {
- margin-bottom: 2rem;
-
- .c-podcasts__logo {
- max-width: 10rem;
- height: 10rem;
- }
-
- .c-podcasts__title {
- font-size: 1rem;
- }
-
- .c-podcasts__description {
- font-size: 0.8125rem;
- }
+ font-size: 0.8125rem;
}
+ }
}
.used-by-logo {
- max-height: 4rem;
- max-width: 100%;
- }
+ max-height: 4rem;
+ max-width: 100%;
+}
// Responsive fixes for mobile and different devices
// Ensure proper viewport behavior
@@ -192,23 +192,24 @@ html {
background-color: #ffffff;
border-bottom: 1px solid #e9ecef;
padding: 0.5rem 1rem;
-
+
@media (max-width: 991px) {
padding: 0.75rem 1rem;
}
-
+
.container-fluid {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
-
+
@media (max-width: 991px) {
.navbar-brand {
max-width: 150px;
-
- svg, img {
+
+ svg,
+ img {
max-width: 100%;
height: auto;
}
@@ -216,50 +217,7 @@ html {
}
}
-// Mobile navbar toggler (hamburger menu) - FORCE VISIBLE
-.td-navbar .navbar-toggler,
-button.navbar-toggler {
- display: inline-block !important; // Nuclear option - force visible
- visibility: visible !important;
- opacity: 1 !important;
- padding: 0.5rem 0.75rem !important;
- font-size: 1.25rem;
- line-height: 1;
- background-color: #fff !important;
- border: 2px solid #000 !important; // Make it very obvious
- border-radius: 0.25rem;
- transition: box-shadow 0.15s ease-in-out;
- cursor: pointer;
- position: relative;
- z-index: 1050;
- min-width: 44px;
- min-height: 44px;
-
- &:focus {
- box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.25) !important;
- outline: none !important;
- }
-
- &:hover {
- background-color: #f8f9fa !important;
- }
-
- .navbar-toggler-icon {
- display: inline-block !important;
- width: 1.5em !important;
- height: 1.5em !important;
- vertical-align: middle;
- background-image: url("data:image/svg+xml,%3csvg
xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath
stroke='%23000' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3'
d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
- background-repeat: no-repeat;
- background-position: center;
- background-size: 100%;
- }
-
- // Hide on desktop only
- @media (min-width: 992px) {
- display: none !important;
- }
-}
+
// Mobile menu collapse - CRITICAL: Hide by default on mobile
.navbar-collapse {
@@ -277,33 +235,33 @@ button.navbar-toggler {
z-index: 1000;
max-height: calc(100vh - 60px);
overflow-y: auto;
-
+
// SHOW when expanded
&.show {
display: block !important;
}
-
+
&.collapsing {
display: block !important;
height: 0;
overflow: hidden;
transition: height 0.35s ease;
}
-
+
.navbar-nav {
flex-direction: column;
padding: 1rem 0;
- width: 100%;
-
- .nav-item {
width: 100%;
+
+ .nav-item {
+ width: 100%;
border-bottom: 1px solid #f8f9fa;
-
+
&:last-child {
border-bottom: none;
}
}
-
+
.nav-link {
padding: 0.75rem 1.5rem;
display: flex;
@@ -312,27 +270,28 @@ button.navbar-toggler {
width: 100%;
text-align: left;
text-transform: uppercase !important;
-
+
// Ensure text-transform applies to all children (like spans)
- &, span {
+ &,
+ span {
text-transform: uppercase !important;
}
-
+
// Explicitly target dropdown-toggle
&.dropdown-toggle {
text-transform: uppercase !important;
}
-
+
&:hover {
background-color: #f8f9fa;
}
-
+
// Show arrow for dropdown items
&.dropdown-toggle::after {
margin-left: auto;
}
}
-
+
.dropdown-menu {
position: static !important;
float: none;
@@ -343,29 +302,29 @@ button.navbar-toggler {
background-color: #f8f9fa;
width: 100%;
transform: none !important;
-
+
.dropdown-item {
padding: 0.75rem 2rem;
white-space: normal;
-
+
&:hover {
background-color: #e9ecef;
}
}
}
-
+
.dropdown {
.dropdown-menu {
display: none !important;
}
-
+
&.show .dropdown-menu {
display: block !important;
}
}
}
}
-
+
// Desktop - normal behavior
@media (min-width: 992px) {
display: flex !important;
@@ -380,12 +339,12 @@ button.navbar-toggler {
display: none !important;
}
}
-
+
// CRITICAL: Prevent horizontal display of nav items on mobile
.td-navbar .navbar-nav {
display: none !important;
}
-
+
.td-navbar .navbar-collapse.show .navbar-nav {
display: flex !important;
flex-direction: column;
@@ -395,7 +354,7 @@ button.navbar-toggler {
// Navbar itself needs to be positioned relative for absolute children
.td-navbar {
position: relative;
-
+
@media (max-width: 991px) {
overflow: visible !important;
}
@@ -408,12 +367,12 @@ button.navbar-toggler {
align-items: center;
justify-content: space-between;
position: relative;
-
+
@media (max-width: 991px) {
justify-content: flex-start;
-
+
// Ensure hamburger is visible and positioned correctly
- > .navbar-toggler {
+ >.navbar-toggler {
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
@@ -430,21 +389,22 @@ button.navbar-toggler {
align-items: center;
gap: 10px;
padding: 0.25rem 0;
-
- svg, img {
+
+ svg,
+ img {
max-height: 50px;
width: auto;
-
+
@media (max-width: 991px) {
max-height: 50px;
}
}
-
+
.navbar-brand__name {
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 1.25rem;
font-weight: 700;
-
+
@media (max-width: 991px) {
font-size: 1.125rem;
}
@@ -453,13 +413,14 @@ button.navbar-toggler {
// Navbar layout and spacing
.td-navbar {
+
// Proper spacing between logo and menu items
.navbar-brand {
@media (min-width: 992px) {
margin-right: 3rem;
}
}
-
+
// Menu items aligned to the right with auto margin
.navbar-nav.ms-auto {
@media (min-width: 992px) {
@@ -467,7 +428,7 @@ button.navbar-toggler {
flex-grow: 0;
}
}
-
+
// Gap between menu and search bar
.navbar-search {
@media (min-width: 992px) {
@@ -482,7 +443,7 @@ button.navbar-toggler {
@media (max-width: 576px) {
max-width: 100%;
}
-
+
@media (min-width: 992px) {
min-width: 200px;
}
@@ -505,13 +466,13 @@ button.navbar-toggler {
// Dropdown on hover for desktop
.td-navbar .nav-item.dropdown {
@media (min-width: 992px) {
- &:hover > .dropdown-menu {
+ &:hover>.dropdown-menu {
display: block;
margin-top: 0;
}
-
+
// Ensure dropdown trigger stays visible
- &:hover > .nav-link {
+ &:hover>.nav-link {
color: #007bff;
}
}
@@ -521,8 +482,9 @@ button.navbar-toggler {
.td-navbar .navbar-nav .nav-link,
.td-navbar .navbar-nav .nav-link.dropdown-toggle {
text-transform: uppercase !important;
-
- &, span {
+
+ &,
+ span {
text-transform: uppercase !important;
}
}
@@ -537,21 +499,22 @@ button.navbar-toggler {
transition: color 0.2s ease;
letter-spacing: 0.3px;
text-transform: uppercase !important;
-
+
// Ensure text-transform applies to all children (like spans)
- &, span {
+ &,
+ span {
text-transform: uppercase !important;
}
-
+
// Explicitly target dropdown-toggle to ensure uppercase
&.dropdown-toggle {
text-transform: uppercase !important;
-
+
&:hover {
color: #007bff;
}
}
-
+
&:hover,
&:focus {
color: #007bff;
@@ -560,7 +523,7 @@ button.navbar-toggler {
// Reduce menu font size
.td-navbar .nav-link {
- font-size: 0.875rem; // Reduced from 0.95rem
+ font-size: 0.875rem; // Reduced from 0.95rem
}
// Logo sizing - increased
@@ -568,7 +531,7 @@ button.navbar-toggler {
max-height: 70px;
width: auto;
display: block;
-
+
@media (max-width: 991px) {
max-height: 50px;
}
@@ -577,14 +540,14 @@ button.navbar-toggler {
// Navbar layout - move logo closer to menu
.td-navbar .navbar-brand {
@media (min-width: 992px) {
- margin-right: 1.5rem; // Reduced from 3rem
+ margin-right: 1.5rem; // Reduced from 3rem
}
}
// Gap between menu and search bar
.navbar-search {
@media (min-width: 992px) {
- margin-left: 2rem !important; // Reduced from 3rem
+ margin-left: 2rem !important; // Reduced from 3rem
}
}
@@ -602,18 +565,18 @@ button.navbar-toggler {
transition: all 0.3s ease;
color: #6c757d;
font-size: 1rem;
-
+
&:hover {
background-color: #f8f9fa;
border-color: #495057;
color: #495057;
}
-
+
&:focus {
outline: none;
box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.25);
}
-
+
i {
line-height: 1;
}
@@ -634,9 +597,9 @@ button.navbar-toggler {
transform: translateY(-10px);
transition: opacity 0.2s ease, transform 0.2s ease;
pointer-events: none;
-
+
// Override any default input background
- input,
+ input,
.td-search__input,
.form-control,
[type="search"] {
@@ -645,14 +608,14 @@ button.navbar-toggler {
border: 1px solid #dee2e6 !important;
transition: none !important;
}
-
+
// Ensure form groups and wrappers are also white
.form-group,
.input-group,
div {
background-color: transparent !important;
}
-
+
&.show {
opacity: 1;
transform: translateY(0);
@@ -669,11 +632,12 @@ button.navbar-toggler {
&.is-active {
animation: fadeIn 0.2s ease;
}
-
+
@keyframes fadeIn {
from {
opacity: 0;
}
+
to {
opacity: 1;
}
@@ -706,14 +670,14 @@ button.navbar-toggler {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
text-decoration: none !important;
display: inline-block;
-
+
&:hover {
background: linear-gradient(180deg, #5a6678 0%, #3d4d60 100%) !important;
transform: translateY(-2px) !important;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4) !important;
color: #ffffff !important;
}
-
+
&:focus {
outline: none !important;
box-shadow: 0 0 0 0.2rem rgba(45, 55, 72, 0.5) !important;
@@ -734,7 +698,7 @@ button.navbar-toggler {
max-height: 250px;
object-fit: cover;
object-position: center top;
-
+
// On mobile, show full image without cropping
@media (max-width: 767.98px) {
max-height: none;
@@ -743,19 +707,19 @@ button.navbar-toggler {
background-color: #f8f9fa;
}
}
-
+
.card-title {
font-weight: 600;
}
-
+
.card-text {
line-height: 1.4;
}
-
+
// Social icons spacing
a {
margin-right: 0.5rem;
-
+
&:last-child {
margin-right: 0;
}
@@ -769,14 +733,14 @@ button.navbar-toggler {
border: 1px solid rgba(0, 0, 0, 0.15);
background-color: #ffffff;
padding: 0.5rem 0;
-
+
@media (max-width: 991px) {
border: none;
box-shadow: none;
padding-left: 1rem;
background-color: transparent;
}
-
+
.dropdown-item {
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding: 0.75rem 1.5rem;
@@ -785,19 +749,20 @@ button.navbar-toggler {
font-weight: 400;
transition: all 0.2s ease;
text-transform: uppercase;
-
+
// Ensure text-transform applies to all children (like spans)
- &, span {
+ &,
+ span {
text-transform: uppercase;
}
-
+
&:hover,
&:focus {
background-color: #e9ecef;
color: #000;
text-decoration: none;
}
-
+
&.active {
background-color: #007bff;
color: #fff;
@@ -810,37 +775,37 @@ button.navbar-toggler {
.td-cover-block {
figure {
margin: 0 auto;
-
+
img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
-
+
// Desktop - full size
@media (min-width: 992px) {
max-width: 400px;
max-height: 500px;
}
-
+
// Tablet - medium size
@media (min-width: 768px) and (max-width: 991px) {
max-width: 300px;
max-height: 375px;
}
-
+
// Mobile landscape - smaller
@media (min-width: 576px) and (max-width: 767px) {
max-width: 250px;
max-height: 312px;
}
-
+
// Mobile portrait - smallest
@media (max-width: 575px) {
max-width: 200px;
max-height: 250px;
}
-
+
// Extra small phones
@media (max-width: 375px) {
max-width: 160px;
@@ -848,7 +813,7 @@ button.navbar-toggler {
}
}
}
-
+
// Ensure buttons stack nicely on mobile
.btn {
@media (max-width: 576px) {
@@ -858,7 +823,7 @@ button.navbar-toggler {
margin-right: 0 !important;
}
}
-
+
// Adjust lead text size on mobile
.lead {
@media (max-width: 768px) {
@@ -873,22 +838,22 @@ button.navbar-toggler {
padding-left: 1rem;
padding-right: 1rem;
margin-bottom: 2rem;
-
+
@media (min-width: 992px) {
padding-left: 0.75rem;
padding-right: 0.75rem;
margin-bottom: 1.5rem;
}
-
+
h4 {
font-size: 1.25rem;
margin-bottom: 0.75rem;
}
-
+
.mb-4 {
margin-bottom: 0.75rem !important;
}
-
+
.h1 {
font-size: 2rem;
}
@@ -899,7 +864,7 @@ button.navbar-toggler {
.td-box {
padding-top: 3rem;
padding-bottom: 3rem;
-
+
@media (max-width: 768px) {
padding-top: 2rem;
padding-bottom: 2rem;
@@ -918,7 +883,12 @@ body {
}
// Heading styles to match kafka.apache.org
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 700;
line-height: 1.2;
@@ -929,7 +899,7 @@ h1, h2, h3, h4, h5, h6 {
h1 {
font-size: 2.5rem;
font-weight: 700;
-
+
@media (max-width: 768px) {
font-size: 2rem;
}
@@ -938,32 +908,36 @@ h1 {
h2 {
font-size: 2rem;
font-weight: 700;
-
+
@media (max-width: 768px) {
font-size: 1.75rem;
}
}
-h3, .h3 {
+h3,
+.h3 {
font-size: 1.5rem;
font-weight: 600;
-
+
@media (max-width: 768px) {
font-size: 1.25rem;
}
}
-h4, .h4 {
+h4,
+.h4 {
font-size: 1.25rem;
font-weight: 600;
}
-h5, .h5 {
+h5,
+.h5 {
font-size: 1.125rem;
font-weight: 600;
}
-h6, .h6 {
+h6,
+.h6 {
font-size: 1rem;
font-weight: 600;
}
@@ -973,7 +947,7 @@ h6, .h6 {
font-size: 1.25rem;
font-weight: 300;
line-height: 1.7;
-
+
@media (max-width: 768px) {
font-size: 1.125rem;
}
@@ -1003,18 +977,18 @@ p {
.td-box--dark {
.col {
max-width: 100%;
-
+
.row {
margin-left: -0.75rem;
margin-right: -0.75rem;
-
+
@media (min-width: 992px) {
padding-left: 3rem;
padding-right: 3rem;
}
}
}
-
+
.col-lg-4 {
padding-left: 0.75rem;
padding-right: 0.75rem;
@@ -1030,11 +1004,11 @@ p {
border-radius: 0.375rem;
transition: all 0.3s ease;
letter-spacing: 0.3px;
-
+
&.btn-primary {
background-color: #007bff;
border-color: #007bff;
-
+
&:hover {
background-color: #0056b3;
border-color: #0056b3;
@@ -1042,11 +1016,11 @@ p {
box-shadow: 0 4px 12px rgba(0, 123, 255, 0.4);
}
}
-
+
&.btn-secondary {
background-color: #6c757d;
border-color: #6c757d;
-
+
&:hover {
background-color: #5a6268;
border-color: #5a6268;
@@ -1067,26 +1041,28 @@ p {
.td-box--dark,
.td-box--primary {
.blocks-feature {
- h4, .h4 {
- font-size: 1.1rem !important; // Reduced from 1.25rem
+
+ h4,
+ .h4 {
+ font-size: 1.1rem !important; // Reduced from 1.25rem
margin-bottom: 0.625rem;
}
-
+
p {
- font-size: 0.9rem !important; // Reduced from 1rem
+ font-size: 0.9rem !important; // Reduced from 1rem
line-height: 1.5;
}
-
+
.h1 {
- font-size: 1.75rem !important; // Reduced from 2rem
+ font-size: 1.75rem !important; // Reduced from 2rem
}
}
-
+
.col-lg-4 {
h4 {
font-size: 1.1rem !important;
}
-
+
p {
font-size: 0.9rem !important;
}
@@ -1095,7 +1071,7 @@ p {
// Feature descriptions consistent styling
.td-box--dark .mb-0 p {
- font-size: 0.9rem; // Reduced from 1rem
+ font-size: 0.9rem; // Reduced from 1rem
line-height: 1.6;
color: #f8f9fa;
}
@@ -1106,13 +1082,13 @@ p {
background-color: #007bff !important;
border-color: #007bff !important;
color: #ffffff !important;
-
+
&:hover {
background-color: #0056b3 !important;
border-color: #0056b3 !important;
color: #ffffff !important;
}
-
+
&:focus {
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5) !important;
}
@@ -1120,13 +1096,13 @@ p {
// Footer styling - Compact single row layout with full-width background
.td-footer {
- background-color: #f8f9fa; // Fair background (light gray)
+ background-color: #f8f9fa; // Fair background (light gray)
border-top: 1px solid #dee2e6;
- padding: 0.5rem 0 !important; // Minimal padding - top and bottom only
+ padding: 0.5rem 0 !important; // Minimal padding - top and bottom only
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
margin: 0;
min-height: auto !important;
-
+
// Full-width breakout
width: 100vw;
position: relative;
@@ -1134,100 +1110,100 @@ p {
right: 50%;
margin-left: -50vw !important;
margin-right: -50vw !important;
-
+
.container-fluid {
- max-width: 100%; // Use full width
+ max-width: 100%; // Use full width
padding-left: 2rem !important;
padding-right: 2rem !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
margin: 0 auto !important;
}
-
+
.row {
align-items: center;
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
-
+
// Remove all column spacing
- > [class*="col-"] {
+ >[class*="col-"] {
padding-top: 0 !important;
padding-bottom: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
}
-
+
.td-footer__social-icons {
display: flex;
gap: 1rem;
justify-content: center;
margin: 0 !important;
padding: 0 !important;
-
+
@media (min-width: 768px) {
justify-content: flex-start;
}
}
-
+
.td-footer__social-link {
color: #6c757d;
- font-size: 1.35rem; // Slightly reduced from 1.5rem
+ font-size: 1.35rem; // Slightly reduced from 1.5rem
transition: color 0.3s ease, transform 0.3s ease;
display: inline-block;
-
+
&:hover {
color: #212529;
transform: scale(1.15);
}
}
-
+
.td-footer__copyright {
- font-size: 0.7rem; // Reduced from 0.75rem
- line-height: 1.2; // Further reduced to tighten text
+ font-size: 0.7rem; // Reduced from 0.75rem
+ line-height: 1.2; // Further reduced to tighten text
color: #6c757d;
display: block;
- margin-bottom: 0 !important; // Remove all bottom margin
- margin-top: 0 !important; // Remove all top margin
- padding: 0 !important; // Remove all padding
-
+ margin-bottom: 0 !important; // Remove all bottom margin
+ margin-top: 0 !important; // Remove all top margin
+ padding: 0 !important; // Remove all padding
+
a {
- color: #6c757d; // Match text color
+ color: #6c757d; // Match text color
text-decoration: none;
-
+
&:hover {
- color: #6c757d; // Keep same color on hover
- text-decoration: underline; // Only underline on hover
+ color: #6c757d; // Keep same color on hover
+ text-decoration: underline; // Only underline on hover
}
}
}
-
+
.td-footer__links {
- font-size: 0.7rem; // Reduced from 0.75rem
+ font-size: 0.7rem; // Reduced from 0.75rem
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-top: 0 !important;
line-height: 1.2;
-
+
a {
- color: #6c757d; // Match text color
+ color: #6c757d; // Match text color
text-decoration: none;
white-space: nowrap;
-
+
&:hover {
- color: #6c757d; // Keep same color on hover
- text-decoration: underline; // Only underline on hover
+ color: #6c757d; // Keep same color on hover
+ text-decoration: underline; // Only underline on hover
}
}
}
-
+
// Responsive: stack on mobile
@media (max-width: 767px) {
- .row > div {
- margin-bottom: 0.35rem; // Further reduced from 0.75rem
-
+ .row>div {
+ margin-bottom: 0.35rem; // Further reduced from 0.75rem
+
&:last-child {
margin-bottom: 0;
}
@@ -1240,6 +1216,7 @@ p {
from {
transform: rotate(0deg);
}
+
to {
transform: rotate(360deg);
}
@@ -1252,7 +1229,7 @@ p {
height: auto;
opacity: 0.7;
transition: opacity 0.3s ease;
-
+
&:hover {
opacity: 1;
animation: spin-continuous 0.2s linear infinite;
@@ -1269,17 +1246,17 @@ p {
padding: 2rem 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
margin-top: 2rem;
-
+
nav {
display: flex;
justify-content: space-between;
gap: 1rem;
-
+
@media (max-width: 768px) {
flex-direction: column;
}
}
-
+
.pager-btn {
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
border: 2px solid #dee2e6 !important;
@@ -1290,7 +1267,7 @@ p {
text-decoration: none;
display: inline-flex;
align-items: center;
-
+
&:hover {
background-color: #f8f9fa !important;
border-color: #ced4da !important;
@@ -1298,12 +1275,12 @@ p {
transform: translateY(-2px);
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}
-
+
&:focus {
outline: 0 !important;
box-shadow: 0 0 0 0.2rem rgba(206, 212, 218, 0.5) !important;
}
-
+
@media (max-width: 768px) {
width: 100%;
justify-content: center;
@@ -1313,11 +1290,12 @@ p {
// Legacy support for .td-page-nav if used anywhere
.td-page-nav {
+
// Ensure prev/next links are responsive
@media (max-width: 768px) {
.nav-links {
flex-direction: column;
-
+
.nav-link-prev,
.nav-link-next {
width: 100%;
@@ -1325,19 +1303,19 @@ p {
}
}
}
-
+
// Better visual separation and styling
padding: 2rem 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
margin-top: 2rem;
-
+
.nav-link-prev,
.nav-link-next {
padding: 1rem;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 0.25rem;
transition: all 0.3s ease;
-
+
&:hover {
background-color: rgba(0, 0, 0, 0.05);
text-decoration: none;
@@ -1345,5 +1323,4 @@ p {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
}
-}
-
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/assets/scss/_variables_project_after_bs.scss
b/assets/scss/_variables_project_after_bs.scss
index 46adce648..5dd26c307 100644
--- a/assets/scss/_variables_project_after_bs.scss
+++ b/assets/scss/_variables_project_after_bs.scss
@@ -7,8 +7,8 @@ $custom-colors: (
$theme-colors: map-merge($theme-colors, $custom-colors);
.navbar-nav {
- --bs-nav-link-color: rgb(0,0,0);
- --bs-nav-link-hover-color: #427583;
+ --bs-nav-link-color: rgb(0, 0, 0);
+ --bs-nav-link-hover-color: #427583;
--bs-nav-link-disabled-color: rgba(105, 102, 102, 0.943);
--bs-nav-link-active-color: rgb(49, 12, 236);
--bs-navbar-active-color: rgb(49, 12, 236);
@@ -17,7 +17,8 @@ $theme-colors: map-merge($theme-colors, $custom-colors);
// Make the releases dropdown scrollable
ul.dropdown-menu {
- max-height: 600px; /* Adjust this value as needed */
+ max-height: 600px;
+ /* Adjust this value as needed */
overflow-y: scroll;
}
@@ -35,29 +36,38 @@ ul.dropdown-menu {
/* Pager button explicit neutral styling to avoid theme primary/orange
overrides */
.pager-btn {
- border: 3px solid #dee2e6 !important; /* gray-300 */
- color: #343a40 !important; /* text-dark */
- background-color: #ffffff !important; /* white background */
- box-shadow: 0 .25rem .5rem rgba(0,0,0,.05) !important; /* subtle */
+ border: 3px solid #dee2e6 !important;
+ /* gray-300 */
+ color: #343a40 !important;
+ /* text-dark */
+ background-color: #ffffff !important;
+ /* white background */
+ box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .05) !important;
+ /* subtle */
}
+
.pager-btn:hover {
- background-color: #f8f9fa !important; /* gray-100 */
- border-color: #ced4da !important; /* gray-400 */
+ background-color: #f8f9fa !important;
+ /* gray-100 */
+ border-color: #ced4da !important;
+ /* gray-400 */
text-decoration: none !important;
}
+
.pager-btn:focus {
outline: 0 !important;
- box-shadow: 0 0 0 .2rem rgba(206,212,218,.5) !important; /* gray focus ring
*/
+ box-shadow: 0 0 0 .2rem rgba(206, 212, 218, .5) !important;
+ /* gray focus ring */
}
.carousel-item {
min-height: 400px;
-
+
.youtube-video {
max-width: 800px;
margin: 0 auto;
}
-
+
h4 {
color: var(--td-body-text-color);
}
@@ -67,7 +77,7 @@ ul.dropdown-menu {
.carousel-control-next {
width: 5%;
opacity: 0.8;
-
+
&:hover {
opacity: 1;
}
@@ -81,6 +91,7 @@ ul.dropdown-menu {
padding: 1.1rem;
box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.15);
}
+
.carousel-control-prev:hover .carousel-control-prev-icon,
.carousel-control-next:hover .carousel-control-next-icon {
background-color: rgba(0, 0, 0, 0.85);
@@ -97,7 +108,8 @@ ul.dropdown-menu {
/* Match submenu font size to main menu */
.td-navbar .dropdown-menu .dropdown-item,
.navbar-nav .dropdown-menu .dropdown-item {
- font-size: 0.875rem !important; /* Match main menu size */
+ font-size: 0.875rem !important;
+ /* Match main menu size */
}
/* Keep gradient button text uppercase */
@@ -107,8 +119,9 @@ ul.dropdown-menu {
/* Make dropdowns show on hover on desktop, allowing top-level links to be
clickable */
@media (min-width: 992px) {
- .td-navbar .dropdown:hover > .dropdown-menu,
- .navbar-nav .dropdown:hover > .dropdown-menu {
+
+ .td-navbar .dropdown:hover>.dropdown-menu,
+ .navbar-nav .dropdown:hover>.dropdown-menu {
display: block;
margin-top: 0;
}
@@ -120,3 +133,167 @@ ul.dropdown-menu {
display: block;
}
}
+
+// Mobile navbar toggler (hamburger menu) - Custom animated icon
+.td-navbar .navbar-toggler,
+button.navbar-toggler {
+ display: inline-block !important;
+ visibility: visible !important;
+ opacity: 1 !important;
+ border: none !important;
+ padding: 0 !important;
+ width: 30px !important;
+ height: 30px !important;
+ position: relative;
+ outline: none !important;
+ box-shadow: none !important;
+ z-index: 1050;
+ /* Ensure it's above the menu */
+ background: transparent !important;
+ min-width: auto !important;
+ min-height: auto !important;
+
+ // Hide on desktop only
+ @media (min-width: 992px) {
+ display: none !important;
+ }
+}
+
+.hamburger-icon {
+ width: 24px;
+ height: 20px;
+ position: relative;
+ margin: 0 auto;
+ transform: rotate(0deg);
+ transition: .5s ease-in-out;
+ cursor: pointer;
+ pointer-events: none;
+}
+
+.hamburger-icon span {
+ display: block;
+ position: absolute;
+ height: 2px;
+ width: 100%;
+ background: var(--bs-navbar-color, rgba(0, 0, 0, 0.55));
+ border-radius: 2px;
+ opacity: 1;
+ left: 0;
+ transform: rotate(0deg);
+ transition: .25s ease-in-out;
+}
+
+/* Initial state (Hamburger) */
+.hamburger-icon span:nth-child(1) {
+ top: 0px;
+}
+
+.hamburger-icon span:nth-child(2) {
+ top: 9px;
+}
+
+.hamburger-icon span:nth-child(3) {
+ top: 18px;
+}
+
+/* Active state (X) - triggered when aria-expanded="true" on the button */
+.navbar-toggler[aria-expanded="true"] .hamburger-icon span:nth-child(1) {
+ top: 9px;
+ transform: rotate(135deg);
+}
+
+.navbar-toggler[aria-expanded="true"] .hamburger-icon span:nth-child(2) {
+ opacity: 0;
+ left: -60px;
+}
+
+.navbar-toggler[aria-expanded="true"] .hamburger-icon span:nth-child(3) {
+ top: 9px;
+ transform: rotate(-135deg);
+}
+
+// Remove bottom border from navbar
+.td-navbar {
+ border-bottom: none !important;
+}
+
+// Remove gap on home page
+.td-home {
+ header {
+ margin-bottom: 0 !important;
+ padding-bottom: 0 !important;
+ }
+
+ .td-navbar {
+ margin-bottom: 0 !important;
+ min-height: auto !important;
+ height: auto !important;
+
+ // Ensure the navbar container doesn't have extra height
+ .container-fluid {
+ min-height: auto !important;
+ height: auto !important;
+ }
+ }
+
+ .td-outer {
+ padding-top: 0 !important;
+ margin-top: 0 !important;
+ }
+
+ .td-main {
+ padding-top: 0 !important;
+ margin-top: 0 !important;
+
+ main {
+ padding-top: 0 !important;
+ margin-top: 0 !important;
+
+ >*:first-child {
+ margin-top: 0 !important;
+ padding-top: 0 !important;
+ }
+ }
+ }
+}
+
+// Ensure navbar collapse doesn't take up space when hidden
+@media (max-width: 991px) {
+ .navbar-collapse:not(.show) {
+ display: none !important;
+ height: 0 !important;
+ overflow: hidden !important;
+ min-height: 0 !important;
+ }
+
+ // Reset navbar height on mobile to avoid fixed height issues
+ .td-navbar {
+ height: auto !important;
+ min-height: auto !important;
+ }
+
+ // Refine "DOWNLOAD KAFKA" button on mobile
+ .download-btn-item {
+ .nav-link.btn-gradient-download {
+ width: 50% !important;
+ margin-left: 1.5rem !important;
+ margin-top: 1rem !important;
+ margin-bottom: 1.5rem !important;
+ text-align: center !important;
+ justify-content: center !important;
+ display: flex !important;
+ }
+ }
+}
+
+// Table Header Styling
+table {
+ th {
+ text-transform: uppercase;
+ background-color: #6c757d !important; // Lighter gray background
(secondary color)
+ color: #ffffff !important; // White text
+ font-weight: 600;
+ border-color: #dee2e6; // Lighter border
+ padding: 0.75rem; // Ensure decent padding
+ }
+}
\ No newline at end of file
diff --git a/layouts/partials/hooks/head-end.html
b/layouts/partials/hooks/head-end.html
index 3c85682a3..07ea99223 100644
--- a/layouts/partials/hooks/head-end.html
+++ b/layouts/partials/hooks/head-end.html
@@ -6,5 +6,4 @@
<!-- Additional mobile web app meta tags -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
-<meta name="apple-mobile-web-app-status-bar-style" content="black">
-
+<meta name="apple-mobile-web-app-status-bar-style" content="black">
\ No newline at end of file
diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html
index e984b952b..610c3f9c3 100644
--- a/layouts/partials/navbar.html
+++ b/layouts/partials/navbar.html
@@ -1,247 +1,319 @@
{{ $cover := .HasShortcode "blocks/cover" }}
<nav class="navbar td-navbar js-navbar-scroll {{ if $cover }} is-dark {{ end
}}" data-bs-theme="light">
-<div class="container-fluid">
- <!-- Mobile toggle button (left side on mobile) -->
- <button class="navbar-toggler order-0 d-lg-none" type="button"
data-bs-toggle="collapse" data-bs-target="#main_navbar"
aria-controls="main_navbar" aria-expanded="false" aria-label="Toggle
navigation">
- <span class="navbar-toggler-icon"></span>
- </button>
-
- <!-- Brand/Logo (center on mobile, left on desktop) -->
- <a class="navbar-brand order-1 order-lg-0 mx-auto mx-lg-0" href="{{
.Site.Home.RelPermalink }}">
- <img src="/logos/kafka_logo--simple.png" alt="Apache Kafka"
class="navbar-logo-img" />
- </a>
-
- <!-- Spacer for mobile to balance layout -->
- <div class="order-2 d-lg-none" style="width: 48px;"></div>
-
- <!-- Collapsible menu -->
- <div class="collapse navbar-collapse order-3 order-lg-1" id="main_navbar">
- <ul class="navbar-nav ms-auto">
- {{ $p := . }}
- {{ $latestVersion := .Site.Params.latest_version }}
-
- <!-- Render regular menu items (not DOWNLOAD KAFKA) -->
- {{ range .Site.Menus.main }}
- {{ if ne .Name "DOWNLOAD KAFKA" }}
- {{ $url := replace .URL "{{VERSION}}" (printf "/%s" $latestVersion) }}
- {{ $url = replace $url "{{PRIVACY}}" $.Site.Params.privacy_policy }}
- {{ $isExternal := or (hasPrefix $url "http://";) (hasPrefix $url
"https://";) }}
- <li class="nav-item{{ if .HasChildren }} dropdown{{ end }}{{ if
$p.IsMenuCurrent "main" . }} active{{ end }}">
- {{ if .HasChildren }}
- <a class="nav-link dropdown-toggle" href="{{ $url }}"{{ if
$isExternal }} target="_blank" rel="noopener"{{ end }} aria-haspopup="true"
aria-expanded="false">{{ .Name }}</a>
+ <div class="container-fluid">
+ <!-- Mobile toggle button (left side on mobile) -->
+ <button class="navbar-toggler order-0 d-lg-none" type="button"
aria-controls="main_navbar" aria-expanded="false"
+ aria-label="Toggle navigation">
+ <div class="hamburger-icon">
+ <span></span>
+ <span></span>
+ <span></span>
+ </div>
+ </button>
+
+ <!-- Brand/Logo (center on mobile, left on desktop) -->
+ <a class="navbar-brand order-1 order-lg-0 mx-auto mx-lg-0" href="{{
.Site.Home.RelPermalink }}">
+ <img src="/logos/kafka_logo--simple.png" alt="Apache Kafka"
class="navbar-logo-img" />
+ </a>
+
+ <!-- Spacer for mobile to balance layout -->
+ <div class="order-2 d-lg-none" style="width: 48px;"></div>
+
+ <!-- Collapsible menu -->
+ <div class="collapse navbar-collapse order-3 order-lg-1" id="main_navbar">
+ <ul class="navbar-nav ms-auto">
+ {{ $p := . }}
+ {{ $latestVersion := .Site.Params.latest_version }}
+
+ <!-- Render regular menu items (not DOWNLOAD KAFKA) -->
+ {{ range .Site.Menus.main }}
+ {{ if ne .Name "DOWNLOAD KAFKA" }}
+ {{ $url := replace .URL "{{VERSION}}" (printf "/%s" $latestVersion) }}
+ {{ $url = replace $url "{{PRIVACY}}" $.Site.Params.privacy_policy }}
+ {{ $isExternal := or (hasPrefix $url "http://";) (hasPrefix $url
"https://";) }}
+ <li class="nav-item{{ if .HasChildren }} dropdown{{ end }}{{ if
$p.IsMenuCurrent " main" . }} active{{ end }}">
+ {{ if .HasChildren }}
+ <a class="nav-link dropdown-toggle" href="{{ $url }}" {{ if
$isExternal }} target="_blank" rel="noopener" {{
+ end }} aria-haspopup="true" aria-expanded="false">{{ .Name }}</a>
<ul class="dropdown-menu">
{{ range .Children }}
- {{ $childUrl := replace .URL "{{VERSION}}" (printf "/%s"
$latestVersion) }}
- {{ $childUrl = replace $childUrl "{{PRIVACY}}"
$.Site.Params.privacy_policy }}
- {{ $childIsExternal := or (hasPrefix $childUrl "http://";)
(hasPrefix $childUrl "https://";) }}
- <li><a class="dropdown-item" href="{{ $childUrl }}"{{ if
$childIsExternal }} target="_blank" rel="noopener"{{ end }}>{{ .Name }}</a></li>
+ {{ $childUrl := replace .URL "{{VERSION}}" (printf "/%s"
$latestVersion) }}
+ {{ $childUrl = replace $childUrl "{{PRIVACY}}"
$.Site.Params.privacy_policy }}
+ {{ $childIsExternal := or (hasPrefix $childUrl "http://";)
(hasPrefix $childUrl "https://";) }}
+ <li><a class="dropdown-item" href="{{ $childUrl }}" {{ if
$childIsExternal }} target="_blank" rel="noopener"
+ {{ end }}>{{ .Name }}</a></li>
{{ end }}
</ul>
- {{ else }}
- <a class="nav-link" href="{{ $url }}"{{ if $isExternal }}
target="_blank" rel="noopener"{{ end }}><span>{{ .Name }}</span></a>
- {{ end }}
- </li>
- {{ end }}
- {{ end }}
-
- <!-- Releases menu -->
- {{ if .Site.Params.versions }}
- <li class="nav-item dropdown">
- <a class="nav-link dropdown-toggle" href="#" role="button"
data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{
.Site.Params.version_menu | default "Releases" }}</a>
- <ul class="dropdown-menu">
- {{ $p := . }}
- {{ range .Site.Params.versions }}
- <li><a class="dropdown-item{{ if eq .version
$p.Site.Params.version }} active{{ end }}" href="{{ .url }}">{{ .version
}}</a></li>
+ {{ else }}
+ <a class="nav-link" href="{{ $url }}" {{ if $isExternal }}
target="_blank" rel="noopener" {{ end }}><span>{{
+ .Name }}</span></a>
{{ end }}
- </ul>
- </li>
- {{ end }}
-
- <!-- DOWNLOAD KAFKA button (render last) -->
- {{ range .Site.Menus.main }}
- {{ if eq .Name "DOWNLOAD KAFKA" }}
- {{ $url := replace .URL "{{VERSION}}" (printf "/%s" $latestVersion) }}
- <li class="nav-item download-btn-item">
- <a class="nav-link btn-gradient-download" href="{{ $url }}"><span>{{
.Name }}</span></a>
- </li>
- {{ end }}
- {{ end }}
- </ul>
- </div>
-
- <!-- Search (desktop only) - Far right with gap -->
- <div class="d-none d-lg-flex order-2 navbar-search">
- <button class="search-toggle-btn" id="searchToggle" type="button"
aria-label="Toggle search">
- <i class="fas fa-search"></i>
- </button>
- <div class="search-input-wrapper" id="searchInputWrapper">
- {{ partial "search-input.html" . }}
+ </li>
+ {{ end }}
+ {{ end }}
+
+ <!-- Releases menu -->
+ {{ if .Site.Params.versions }}
+ <li class="nav-item dropdown d-none d-lg-block">
+ <a class="nav-link dropdown-toggle" href="#" role="button"
data-bs-toggle="dropdown" aria-haspopup="true"
+ aria-expanded="false">{{ .Site.Params.version_menu | default
"Releases" }}</a>
+ <ul class="dropdown-menu">
+ {{ $p := . }}
+ {{ range .Site.Params.versions }}
+ <li><a class="dropdown-item{{ if eq .version
$p.Site.Params.version }} active{{ end }}" href="{{ .url }}">{{
+ .version }}</a></li>
+ {{ end }}
+ </ul>
+ </li>
+ {{ end }}
+
+ <!-- DOWNLOAD KAFKA button (render last) -->
+ {{ range .Site.Menus.main }}
+ {{ if eq .Name "DOWNLOAD KAFKA" }}
+ {{ $url := replace .URL "{{VERSION}}" (printf "/%s" $latestVersion) }}
+ <li class="nav-item download-btn-item">
+ <a class="nav-link btn-gradient-download" href="{{ $url }}"><span>{{
.Name }}</span></a>
+ </li>
+ {{ end }}
+ {{ end }}
+ </ul>
+ </div>
+
+ <!-- Search (desktop only) - Far right with gap -->
+ <div class="d-none d-lg-flex order-2 navbar-search">
+ <button class="search-toggle-btn" id="searchToggle" type="button"
aria-label="Toggle search">
+ <i class="fas fa-search"></i>
+ </button>
+ <div class="search-input-wrapper" id="searchInputWrapper">
+ {{ partial "search-input.html" . }}
+ </div>
</div>
</div>
-</div>
</nav>
<script>
-// Toggle search input visibility with smooth animation
-document.addEventListener('DOMContentLoaded', function() {
- const searchToggle = document.getElementById('searchToggle');
- const searchInputWrapper = document.getElementById('searchInputWrapper');
-
- function showSearch() {
- if (searchInputWrapper) {
- searchInputWrapper.classList.add('show');
- // Focus on the input field after animation
- const input = searchInputWrapper.querySelector('input');
- if (input) {
- setTimeout(() => input.focus(), 200);
+ // Toggle search input visibility with smooth animation
+ document.addEventListener('DOMContentLoaded', function () {
+ const searchToggle = document.getElementById('searchToggle');
+ const searchInputWrapper = document.getElementById('searchInputWrapper');
+
+ function showSearch() {
+ if (searchInputWrapper) {
+ searchInputWrapper.classList.add('show');
+ // Focus on the input field after animation
+ const input = searchInputWrapper.querySelector('input');
+ if (input) {
+ setTimeout(() => input.focus(), 200);
+ }
}
}
- }
-
- function hideSearch() {
- if (searchInputWrapper) {
- searchInputWrapper.classList.remove('show');
- // Clear any search input
- const input = searchInputWrapper.querySelector('input');
- if (input) {
- input.value = '';
- input.blur();
+
+ function hideSearch() {
+ if (searchInputWrapper) {
+ searchInputWrapper.classList.remove('show');
+ // Clear any search input
+ const input = searchInputWrapper.querySelector('input');
+ if (input) {
+ input.value = '';
+ input.blur();
+ }
+ // Clear any search results
+ hideSearchResults();
}
- // Clear any search results
- hideSearchResults();
}
- }
-
- function hideSearchResults() {
- // Hide Docsy/Algolia search results
- const searchResults = document.querySelector('.td-search__results');
- if (searchResults) {
- searchResults.classList.remove('is-active');
- searchResults.style.display = 'none';
- searchResults.style.visibility = 'hidden';
- }
-
- // Hide DocSearch modal if it exists
- const docSearchModal = document.querySelector('.DocSearch-Modal');
- if (docSearchModal) {
- docSearchModal.style.display = 'none';
- const backdrop = document.querySelector('.DocSearch-Backdrop');
- if (backdrop) {
- backdrop.style.display = 'none';
+
+ function hideSearchResults() {
+ // Hide Docsy/Algolia search results
+ const searchResults = document.querySelector('.td-search__results');
+ if (searchResults) {
+ searchResults.classList.remove('is-active');
+ searchResults.style.display = 'none';
+ searchResults.style.visibility = 'hidden';
}
- }
-
- // Hide any other search overlays
- const searchOverlay = document.querySelector('.td-search-overlay');
- if (searchOverlay) {
- searchOverlay.style.display = 'none';
- }
-
- // Hide Algolia autocomplete
- const algoliaAutocomplete = document.querySelector('.algolia-autocomplete
.aa-dropdown-menu');
- if (algoliaAutocomplete) {
- algoliaAutocomplete.style.display = 'none';
- }
-
- // Hide Lunr search results container
- const lunrResults =
document.querySelector('#td-search__results-container');
- if (lunrResults) {
- lunrResults.style.display = 'none';
- }
-
- // Hide any modal overlay/backdrop
- const overlays = document.querySelectorAll('.modal-backdrop,
[class*="search"][class*="overlay"], [class*="search"][class*="backdrop"]');
- overlays.forEach(function(overlay) {
- overlay.style.display = 'none';
- overlay.style.visibility = 'hidden';
- if (overlay.classList.contains('show')) {
- overlay.classList.remove('show');
+
+ // Hide DocSearch modal if it exists
+ const docSearchModal = document.querySelector('.DocSearch-Modal');
+ if (docSearchModal) {
+ docSearchModal.style.display = 'none';
+ const backdrop = document.querySelector('.DocSearch-Backdrop');
+ if (backdrop) {
+ backdrop.style.display = 'none';
+ }
}
- });
-
- // Remove any body classes that prevent scrolling
- document.body.classList.remove('modal-open', 'search-open');
- document.body.style.overflow = '';
-
- // Try to click any close buttons in search results
- const closeButtons = document.querySelectorAll('.td-search__close,
[class*="search"][class*="close"], .modal-close');
- closeButtons.forEach(function(btn) {
- if (btn.offsetParent !== null) {
- btn.click();
+
+ // Hide any other search overlays
+ const searchOverlay = document.querySelector('.td-search-overlay');
+ if (searchOverlay) {
+ searchOverlay.style.display = 'none';
}
- });
-
- // If using Docsy's offline search, trigger close event
- const searchCloseEvent = new CustomEvent('td.search.close');
- document.dispatchEvent(searchCloseEvent);
- }
-
- if (searchToggle && searchInputWrapper) {
- // Toggle search on button click
- searchToggle.addEventListener('click', function(e) {
- e.stopPropagation();
- if (searchInputWrapper.classList.contains('show')) {
- hideSearch();
- } else {
- showSearch();
+
+ // Hide Algolia autocomplete
+ const algoliaAutocomplete =
document.querySelector('.algolia-autocomplete .aa-dropdown-menu');
+ if (algoliaAutocomplete) {
+ algoliaAutocomplete.style.display = 'none';
}
- });
-
- // Prevent clicks inside search wrapper from closing it
- searchInputWrapper.addEventListener('click', function(e) {
- e.stopPropagation();
- });
-
- // Close search when clicking outside
- document.addEventListener('click', function(e) {
- if (!e.target.closest('.navbar-search') &&
+
+ // Hide Lunr search results container
+ const lunrResults =
document.querySelector('#td-search__results-container');
+ if (lunrResults) {
+ lunrResults.style.display = 'none';
+ }
+
+ // Hide any modal overlay/backdrop
+ const overlays = document.querySelectorAll('.modal-backdrop,
[class*="search"][class*="overlay"], [class*="search"][class*="backdrop"]');
+ overlays.forEach(function (overlay) {
+ overlay.style.display = 'none';
+ overlay.style.visibility = 'hidden';
+ if (overlay.classList.contains('show')) {
+ overlay.classList.remove('show');
+ }
+ });
+
+ // Remove any body classes that prevent scrolling
+ document.body.classList.remove('modal-open', 'search-open');
+ document.body.style.overflow = '';
+
+ // Try to click any close buttons in search results
+ const closeButtons = document.querySelectorAll('.td-search__close,
[class*="search"][class*="close"], .modal-close');
+ closeButtons.forEach(function (btn) {
+ if (btn.offsetParent !== null) {
+ btn.click();
+ }
+ });
+
+ // If using Docsy's offline search, trigger close event
+ const searchCloseEvent = new CustomEvent('td.search.close');
+ document.dispatchEvent(searchCloseEvent);
+ }
+
+ if (searchToggle && searchInputWrapper) {
+ // Toggle search on button click
+ searchToggle.addEventListener('click', function (e) {
+ e.stopPropagation();
+ if (searchInputWrapper.classList.contains('show')) {
+ hideSearch();
+ } else {
+ showSearch();
+ }
+ });
+
+ // Prevent clicks inside search wrapper from closing it
+ searchInputWrapper.addEventListener('click', function (e) {
+ e.stopPropagation();
+ });
+
+ // Close search when clicking outside
+ document.addEventListener('click', function (e) {
+ if (!e.target.closest('.navbar-search') &&
!e.target.closest('.td-search__results') &&
!e.target.closest('.DocSearch-Modal') &&
!e.target.closest('.algolia-autocomplete')) {
- if (searchInputWrapper.classList.contains('show')) {
+ if (searchInputWrapper.classList.contains('show')) {
+ hideSearch();
+ } else {
+ hideSearchResults();
+ }
+ }
+ });
+
+ // Close search on ESC key
+ document.addEventListener('keydown', function (e) {
+ if (e.key === 'Escape' || e.key === 'Esc') {
hideSearch();
- } else {
- hideSearchResults();
}
- }
- });
-
- // Close search on ESC key
- document.addEventListener('keydown', function(e) {
- if (e.key === 'Escape' || e.key === 'Esc') {
- hideSearch();
- }
+ });
+ }
+
+ // Mobile dropdown toggle functionality
+ const dropdownToggles = document.querySelectorAll('.navbar-nav .dropdown >
.dropdown-toggle');
+
+ dropdownToggles.forEach(function (toggle) {
+ toggle.addEventListener('click', function (e) {
+ if (window.innerWidth < 992) {
+ e.preventDefault();
+ e.stopPropagation(); // Stop propagation to prevent immediate closing
+ const parentLi = this.parentElement;
+
+ // Close other open dropdowns
+ document.querySelectorAll('.navbar-nav
.dropdown.show').forEach(function (li) {
+ if (li !== parentLi) {
+ li.classList.remove('show');
+ const menu = li.querySelector('.dropdown-menu');
+ if (menu) menu.classList.remove('show');
+ }
+ });
+
+ // Toggle current dropdown
+ parentLi.classList.toggle('show');
+ const dropdownMenu = parentLi.querySelector('.dropdown-menu');
+ if (dropdownMenu) dropdownMenu.classList.toggle('show');
+ }
+ });
});
- }
-
- // Mobile dropdown toggle functionality
- const dropdownToggles = document.querySelectorAll('.navbar-nav .dropdown >
.dropdown-toggle');
-
- dropdownToggles.forEach(function(toggle) {
- toggle.addEventListener('click', function(e) {
- if (window.innerWidth < 992) {
- e.preventDefault();
- const parentLi = this.parentElement;
- const dropdownMenu = parentLi.querySelector('.dropdown-menu');
-
- document.querySelectorAll('.navbar-nav
.dropdown-menu.show').forEach(function(menu) {
- if (menu !== dropdownMenu) {
- menu.classList.remove('show');
- }
+
+ // Close dropdowns when clicking outside
+ document.addEventListener('click', function (e) {
+ if (!e.target.closest('.navbar-nav .dropdown')) {
+ document.querySelectorAll('.navbar-nav
.dropdown-menu.show').forEach(function (menu) {
+ menu.classList.remove('show');
});
-
- dropdownMenu.classList.toggle('show');
}
});
- });
-
- // Close dropdowns when clicking outside
- document.addEventListener('click', function(e) {
- if (!e.target.closest('.navbar-nav .dropdown')) {
- document.querySelectorAll('.navbar-nav
.dropdown-menu.show').forEach(function(menu) {
- menu.classList.remove('show');
+
+ // Close mobile menu when clicking outside or on the X
+ const mainNavbar = document.getElementById('main_navbar');
+ const navbarToggler = document.querySelector('.navbar-toggler');
+
+ if (mainNavbar && navbarToggler) {
+ // Function to close the menu
+ const closeMenu = () => {
+ if (typeof bootstrap !== 'undefined' && bootstrap.Collapse) {
+ const bsCollapse = bootstrap.Collapse.getInstance(mainNavbar) || new
bootstrap.Collapse(mainNavbar, { toggle: false });
+ bsCollapse.hide();
+ } else {
+ mainNavbar.classList.remove('show');
+ }
+ // Always update state for the icon animation
+ navbarToggler.setAttribute('aria-expanded', 'false');
+ navbarToggler.classList.add('collapsed');
+ };
+
+ // Function to open the menu
+ const openMenu = () => {
+ if (typeof bootstrap !== 'undefined' && bootstrap.Collapse) {
+ const bsCollapse = bootstrap.Collapse.getInstance(mainNavbar) || new
bootstrap.Collapse(mainNavbar, { toggle: false });
+ bsCollapse.show();
+ } else {
+ mainNavbar.classList.add('show');
+ }
+ // Always update state for the icon animation
+ navbarToggler.setAttribute('aria-expanded', 'true');
+ navbarToggler.classList.remove('collapsed');
+ };
+
+ document.addEventListener('click', function (e) {
+ const isMenuOpen = mainNavbar.classList.contains('show');
+ const isCollapsing = mainNavbar.classList.contains('collapsing');
+
+ if (isMenuOpen && !isCollapsing) {
+ // Case 1: Click outside the menu AND outside the toggler -> Close
menu
+ if (!mainNavbar.contains(e.target) &&
!navbarToggler.contains(e.target)) {
+ closeMenu();
+ }
+ }
+ });
+
+ // Explicit listener for the toggler to handle BOTH open and close
+ navbarToggler.addEventListener('click', function (e) {
+ e.preventDefault();
+ e.stopPropagation();
+
+ if (mainNavbar.classList.contains('show')) {
+ closeMenu();
+ } else {
+ openMenu();
+ }
});
}
});
-});
-</script>
+</script>
\ No newline at end of file
