Skip to content

Commit 246699b

Browse files
shablitzelSherrie Hablitzeloliverhowell
authored
Kah UI ipdates (#264)
Updates to UI - navigation and home page --------- Co-authored-by: Sherrie Hablitzel <“[email protected]”> Co-authored-by: Oliver Howell <[email protected]>
1 parent 36844b6 commit 246699b

File tree

10 files changed

+774
-245
lines changed

10 files changed

+774
-245
lines changed

‎src/css/header.css‎

Lines changed: 263 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,71 @@
1+
/*! Hazelcast Docs UI - v1.0.0 */
2+
3+
/* ================================
4+
General Styles & Body
5+
================================ */
6+
17
body {
2-
/* important so the Kapa widget does not overwrite it */
8+
/* Important so the Kapa widget does not overwrite it */
39
padding-top: var(--navbar-height) !important;
410
}
511

12+
/* ================================
13+
Header
14+
================================ */
15+
16+
.header {
17+
position: fixed;
18+
top: 0;
19+
width: 100%;
20+
z-index: var(--z-index-navbar);
21+
background: var(--header-color);
22+
display: flex;
23+
align-items: center;
24+
justify-content: center;
25+
transition: height 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
26+
}
27+
28+
.header.shrink {
29+
height: 60px;
30+
}
31+
32+
/* ================================
33+
Navbar
34+
================================ */
35+
36+
.navbar {
37+
width: 100%;
38+
display: flex;
39+
align-items: center;
40+
justify-content: space-between;
41+
}
42+
43+
.navbar-brand {
44+
display: flex;
45+
align-items: center;
46+
justify-content: space-between;
47+
height: var(--navbar-height);
48+
padding: 0 10px;
49+
}
50+
51+
.navbar-item {
52+
color: var(--neutral-white);
53+
display: block;
54+
padding: 0 20px;
55+
}
56+
57+
.navbar-start,
58+
.navbar-end {
59+
display: flex;
60+
align-items: center;
61+
}
62+
63+
.navbar a {
64+
color: var(--neutral-white);
65+
text-decoration: none;
66+
letter-spacing: 1px;
67+
}
68+
669
.navbar .button.navbar-button {
770
background-color: var(--header-color);
871
border: 1px solid var(--neutral-white);
@@ -12,6 +75,21 @@ body {
1275
letter-spacing: 1px;
1376
}
1477

78+
.navbar-brand .navbar-item.navbar-logo-item {
79+
display: flex;
80+
align-items: center;
81+
justify-content: center;
82+
}
83+
84+
.navbar-logo-item-img {
85+
height: 1.375rem;
86+
width: 10.5625rem;
87+
}
88+
89+
/* ================================
90+
Filter Checkbox
91+
================================ */
92+
1593
.filter.checkbox {
1694
color: var(--neutral-white);
1795
font-size: 0.875em;
@@ -22,101 +100,233 @@ body {
22100
padding-bottom: 0;
23101
}
24102

25-
.navbar {
26-
background: var(--header-color);
27-
color: var(--neutral-white);
28-
font-family: var(--nav-font-family);
29-
height: var(--navbar-height);
30-
position: fixed;
31-
top: 0;
32-
width: 100%;
33-
word-wrap: break-word;
34-
z-index: var(--z-index-navbar);
103+
/* ================================
104+
Mega Menu
105+
================================ */
106+
107+
.mega-menu {
108+
display: flex;
109+
list-style: none;
110+
padding: 0;
111+
margin: 0;
112+
align-items: center;
35113
}
36114

37-
.navbar a {
38-
color: var(--neutral-white);
115+
.mega-menu-item {
116+
display: inline-block;
117+
margin: 0 15px;
118+
position: relative;
119+
}
120+
121+
.mega-menu-item a {
39122
text-decoration: none;
40-
letter-spacing: 1px;
123+
color: var(--neutral-white);
124+
padding: 10px 15px;
125+
display: inline-block;
126+
transition: color 0.3s ease-in-out, border-bottom 0.3s ease-in-out;
127+
border-bottom: 4px solid transparent;
128+
font-family: "PP Telegraf", Arial, Helvetica, sans-serif;
129+
font-weight: normal;
130+
font-size: 16px;
41131
}
42132

43-
.navbar-brand .navbar-item.navbar-logo-item {
133+
.mega-menu-item a:hover,
134+
.mega-menu-item > a.mega-menu-link:hover,
135+
.mega-menu-item-docs > a.mega-menu-link {
136+
border-bottom: 4px solid #c6ff3a !important;
137+
}
138+
139+
/* ================================
140+
Search
141+
================================ */
142+
143+
.mega-search {
144+
background-image: url(//hazelcast.com/wp-content/uploads/2023/08/search.svg);
145+
background-size: 24px 24px;
146+
background-repeat: no-repeat;
147+
width: 24px;
148+
height: 24px;
44149
display: flex;
45150
align-items: center;
46151
justify-content: center;
152+
text-align: center;
153+
line-height: 1;
47154
}
48155

49-
.navbar-logo-item-img {
50-
width: 180px;
51-
height: auto;
156+
li.mega-menu-item-search {
157+
display: flex;
158+
align-items: center;
159+
justify-content: center;
160+
height: 55px;
161+
padding: 0 15px;
52162
}
53163

54-
.navbar-logo-item-title {
55-
margin: 0;
56-
color: var(--accent);
164+
/* ================================
165+
Custom Button (custom-4)
166+
================================ */
167+
168+
nav .button.custom-4 {
169+
background-clip: padding-box;
170+
background-color: #c6ff3a;
171+
border: 1px solid transparent;
172+
color: #0b2b39;
173+
font-weight: 600;
174+
font-family: "PP Telegraf", Arial, Helvetica, sans-serif;
175+
font-size: 0.875rem !important;
176+
padding: 8px 22px;
177+
transition: all 0.4s ease-in-out;
57178
}
58179

59-
.get-hazelcast-link {
60-
display: flex;
180+
nav .button.custom-4:hover {
181+
background-image: linear-gradient(90deg, #c6ff3a, #00c5d1);
182+
}
183+
184+
/*! Hazelcast Docs UI - Mobile Menu Styles */
185+
186+
/* ================================
187+
Mobile Menu Styles (Global)
188+
================================ */
189+
190+
.navbar-burger {
191+
display: none;
192+
flex-direction: column;
193+
justify-content: center;
61194
align-items: center;
195+
gap: 5px;
196+
cursor: pointer;
197+
width: 40px;
198+
height: 40px;
199+
padding: 8px;
200+
background: transparent;
201+
border: none;
202+
z-index: var(--z-index-navbar);
62203
}
63204

64-
.navbar-brand {
205+
.navbar-burger span {
206+
width: 24px;
207+
height: 2px;
208+
background-color: var(--neutral-white);
209+
display: block;
210+
border-radius: 1px;
211+
}
212+
213+
#menu-holder.mobile-menu {
214+
display: none;
215+
position: fixed;
216+
top: 0;
217+
left: 0;
218+
height: 100vh;
219+
width: 100vw;
220+
background: var(--header-color);
221+
z-index: 999;
222+
padding: 20px 20px 20px; /* matches .header height */
223+
overflow-y: auto;
224+
}
225+
226+
.mobile-menu-header {
65227
display: flex;
66228
align-items: center;
67229
justify-content: space-between;
68-
height: var(--navbar-height);
69-
padding: 0 10px;
230+
padding: 20px;
70231
}
71232

72-
.navbar-start,
73-
.navbar-end {
74-
display: flex;
75-
align-items: center;
233+
.mobile-menu-logo img {
234+
height: 1.5rem;
76235
}
77236

78-
.navbar-app-title {
79-
font-size: 20px;
80-
border-left: 1px solid var(--neutral-white);
237+
#menu-holder.mobile-menu.active {
238+
display: block;
81239
}
82240

83-
.navbar-item {
241+
/* Close button inside mobile menu */
242+
.menu-close {
243+
position: absolute;
244+
top: 20px;
245+
right: 20px;
246+
background: transparent;
247+
border: none;
248+
font-size: 32px;
84249
color: var(--neutral-white);
250+
cursor: pointer;
251+
z-index: var(--z-index-navbar);
252+
}
253+
254+
/* Mobile Menu Links */
255+
#menu-holder.mobile-menu .mega-menu {
256+
list-style: none;
257+
margin: 0;
258+
padding: 0;
259+
display: flex;
260+
flex-direction: column;
261+
}
262+
263+
#menu-holder.mobile-menu .mega-menu-item {
264+
width: 100%;
265+
border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* subtle divider */
266+
}
267+
268+
#menu-holder.mobile-menu .mega-menu-link {
85269
display: block;
86-
padding: 0 20px;
270+
padding: 16px 20px;
271+
color: var(--neutral-white);
272+
text-decoration: none;
273+
font-size: 18px;
274+
text-align: left;
275+
width: 100%;
276+
transition: background 0.2s ease;
87277
}
88278

89-
@media (max-width: 930px) {
90-
.filter.checkbox {
91-
display: none;
92-
}
279+
#menu-holder.mobile-menu .mega-menu-link:hover {
280+
background: rgba(255, 255, 255, 0.05);
281+
}
282+
283+
/* Always highlight Docs link in mobile menu */
284+
.mega-menu-link.docs-highlight {
285+
color: #c6ff3a;
286+
border-left: 4px solid #c6ff3a;
287+
font-weight: bold;
93288
}
94289

95-
@media (max-width: 800px) {
96-
.DocSearch-Button-Keys,
290+
/* ================================
291+
Responsive Layout for Mobile
292+
Breakpoint: max-width 900px
293+
================================ */
294+
295+
@media (max-width: 1300px) {
296+
/* Show hamburger */
297+
.navbar-burger {
298+
display: flex;
299+
}
300+
97301
.DocSearch-Button-Placeholder {
302+
display: inline;
303+
}
304+
305+
/* Hide desktop nav */
306+
#desktop-holder,
307+
nav .mega-menu,
308+
.filter.checkbox,
309+
.navbar-app-title,
310+
.hazelcast-link {
98311
display: none;
99312
}
100313

314+
/* Adjust spacing for mobile */
101315
.navbar-item {
102316
padding: 0 10px;
103317
}
104-
}
105318

106-
@media (max-width: 750px) {
107-
.navbar-app-title {
108-
display: none;
319+
.navbar-end {
320+
display: flex;
321+
align-items: center;
322+
gap: 10px;
109323
}
110-
}
111324

112-
@media (max-width: 550px) {
113-
.hazelcast-link {
114-
display: none;
325+
.navbar-brand {
326+
justify-content: space-between;
115327
}
116-
}
117328

118-
@media (max-width: 480px) {
119-
.navbar-logo-item-img {
120-
width: 110px;
329+
.mega-menu-item-search {
330+
display: flex;
121331
}
122332
}

0 commit comments

Comments
 (0)