Skip to content

Commit 2e7e927

Browse files
author
Lukas Gentele
authored
Merge pull request #495 from devspace-cloud/revert-492-revert-487-new-docs-design
header change
2 parents c404e7b + 1a13735 commit 2e7e927

File tree

2 files changed

+94
-27
lines changed

2 files changed

+94
-27
lines changed

‎docs/website/siteConfig.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,11 @@ const siteConfig = {
1717

1818
// For no header links in the top nav bar -> headerLinks: [],
1919
headerLinks: [
20-
// {href: 'http://devspace.cloud/products', label: 'Products'},
20+
{href: 'http://devspace.cloud/pricing', label: 'Pricing'},
21+
{href: 'http://devspace.cloud/about', label: 'About'},
2122
{doc: 'getting-started/installation', label: 'Docs'},
22-
// {href: 'http://devspace.cloud/', label: 'FAQ'},
23-
{doc: 'getting-started/installation', label: 'GET STARTED'},
23+
{href: 'http://devspace.cloud/help', label: 'Help'},
24+
{doc: 'getting-started/installation', label: 'Login'},
2425
{href: '#', label: ''},
2526
],
2627

‎docs/website/static/css/header.css‎

Lines changed: 90 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,17 @@
33
}
44

55
.navPusher {
6-
padding-top: 75px;
6+
padding-top: 100px;
77
}
88

99
.fixedHeaderContainer {
1010
padding: 0;
11+
position: absolute;
1112
}
1213

1314
.fixedHeaderContainer .headerWrapper {
14-
height: 76px;
15-
padding: 0 5%;
15+
/* height: 76px; */
16+
padding: 30px 5%;
1617
}
1718

1819
.fixedHeaderContainer .headerWrapper header {
@@ -27,7 +28,7 @@
2728
.fixedHeaderContainer .headerWrapper header a {
2829
width: 270px;
2930
height: 40px;
30-
z-index: 11;
31+
z-index: 0;
3132
}
3233

3334
.fixedHeaderContainer .headerWrapper header .navigationWrapper .slidingNav .nav-site {
@@ -108,22 +109,28 @@
108109
}
109110

110111
/* GET STARTED BUTTON */
111-
.fixedHeaderContainer .headerWrapper header .navigationWrapper .slidingNav .nav-site li:nth-of-type(2) a {
112-
background-color: #00bdff;
112+
.fixedHeaderContainer .headerWrapper header .navigationWrapper .slidingNav .nav-site li:nth-of-type(5) a {
113+
/* background-color: #00bdff; */
113114
color: #fff;
114115
border-radius: 5px;
115116
margin-left: 15px;
116117
padding: 8px 18px;
117-
font-family: "Play", sans-serif;
118+
border: 2px solid white;
119+
border-radius: 5px;
120+
margin-left: 15px;
121+
padding: 7px 20px;
122+
color: white !important;
123+
font-family: 'Raleway', 'Play', sans-serif;
124+
font-weight: 600;
125+
text-transform: uppercase;
118126
}
119-
120-
.fixedHeaderContainer .headerWrapper header .navigationWrapper .slidingNav .nav-site li:nth-of-type(2) a:hover {
121-
border: none;
122-
background-color: #00bbffb2;
127+
.fixedHeaderContainer .headerWrapper header .navigationWrapper .slidingNav .nav-site li:nth-of-type(5) a:hover {
128+
background-color: white;
129+
color: #223366 !important;
123130
}
124131

125-
.fixedHeaderContainer .headerWrapper header .navigationWrapper .slidingNav .nav-site li:nth-of-type(2):hover {
126-
border-bottom: none;
132+
.fixedHeaderContainer .headerWrapper header .navigationWrapper .slidingNav .nav-site li:nth-of-type(5):hover {
133+
border: none;
127134
}
128135

129136
.fixedHeaderContainer {
@@ -184,31 +191,79 @@
184191
height: 100%;
185192
width: 100%;
186193
}
194+
195+
/* .burger-button {
196+
background-size: 20px;
197+
background-image: url(../../images/cross-close.svg);
198+
}
199+
} */
187200

188201
.navigationSlider.burger-open {
202+
height: 50vh;
189203
position: absolute;
190-
z-index: 10;
191-
width: 100%;
192-
height: 181px;
193-
top: 0px;
204+
top: 0;
194205
left: 0;
206+
background: #233366;
207+
padding: 18px 0;
208+
box-shadow: 0px 1px 3px 1px #21212194;
209+
width: 100%;
210+
}
211+
212+
/* ul */
213+
.fixedHeaderContainer .headerWrapper header .navigationWrapper .slidingNav .nav-site {
214+
display: flex;
215+
flex-direction: column;
216+
justify-content: space-evenly;
217+
align-items: center;
218+
width: 100%;
219+
height: 100%;
220+
}
221+
222+
/* li */
223+
.fixedHeaderContainer .headerWrapper header .navigationWrapper .slidingNav .nav-site {
224+
margin-top: 0;
225+
font-size: 24px;
226+
}
227+
228+
.fixedHeaderContainer .headerWrapper header .navigationWrapper .slidingNav .nav-site li:nth-of-type(5) {
229+
font-family: 'Raleway', 'Play', sans-serif;
230+
font-weight: 600;
231+
border: 2px solid white;
232+
border-radius: 5px;
233+
padding: 0;
234+
margin-top: 1px;
235+
margin-bottom: -9px;
236+
}
237+
.fixedHeaderContainer .headerWrapper header .navigationWrapper .slidingNav .nav-site li:nth-of-type(5) a {
238+
color: #233366 !important;
239+
background-color: white !important;
240+
margin-left: 0;
241+
text-transform: uppercase;
242+
height: 100%;
243+
width: 100%;
244+
padding: 7px 20px;
195245
}
196246

197247
header .burger-open nav.slidingNav .responsive-nav .hamburger-active {
198248
position: absolute;
199249
width: 20px;
200250
height: 20px;
201251
display: block;
202-
right: 40px;
203-
top: 30px;
252+
right: 39px;
253+
top: 23px;
204254
z-index: 15;
255+
padding: 0;
205256
}
206257

207258
.fixedHeaderContainer .headerWrapper header .navigationWrapper.burger-open .slidingNav .nav-site .hamburger-active a {
208259
background-image: url(/img/cross-close.svg);
209260
background-position: center;
210261
background-repeat: no-repeat;
211262
background-size: contain;
263+
border: none;
264+
}
265+
.fixedHeaderContainer .headerWrapper header .navigationWrapper.burger-open .slidingNav .nav-site .hamburger-active a:hover {
266+
border: none;
212267
}
213268

214269
header .burger-open .slidingNav ul.responsive-nav {
@@ -221,22 +276,28 @@
221276
background: #223366;
222277
padding-top: 34px;
223278
justify-content: flex-end;
224-
padding: 15px;
279+
padding: 0;
225280
}
226281

227282
header .burger-open .slidingNav ul.responsive-nav li {
228-
display: block;
283+
display: list-item;
229284
font-size: 24px;
230-
font-family: "Play", sans-serif;
231-
max-height: 28px;
232-
margin-bottom: 6px;
285+
font-family: "Raleway", sans-serif;
286+
/* padding: 5px 10px; */
287+
flex: none;
233288
}
234289

235290
header .burger-open .slidingNav ul.responsive-nav li a {
236291
font-size: 24px;
237292
height: 100%;
238293
width: 100%;
239294
padding: 0;
295+
border-bottom: 1px solid transparent;
296+
padding-bottom: 2px;
297+
}
298+
header .burger-open .slidingNav ul.responsive-nav li a:hover {
299+
border-bottom: 1px solid white;
300+
text-decoration: none;
240301
}
241302

242303
.fixedHeaderContainer .headerWrapper header {
@@ -249,6 +310,11 @@
249310
right: -4px;
250311
position: absolute;
251312
}
313+
314+
header .burger-open nav.slidingNav .responsive-nav .hamburger-active {
315+
right: 8px;
316+
top: 23px;
317+
}
252318
}
253319

254320
@media screen and (max-width: 1023px) {

0 commit comments

Comments
 (0)