Skip to content

Commit b2f0b6d

Browse files
adamschwartzadamschwartz
committed
New unified "Cloudflare Developerd" nav
1 parent ff054d7 commit b2f0b6d

File tree

2 files changed

+78
-35
lines changed

2 files changed

+78
-35
lines changed

‎index.html‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,16 @@
1313
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js" type="text/javascript" charset="utf-8"></script>
1414
</head>
1515
<body>
16-
<header id="header" class="header">
17-
<div class="wrapper header-main">
18-
<a href="https://www.cloudflare.com" class="logo logo-header">Cloudflare</a>
19-
</div><!-- /.wrapper -->
20-
</header>
16+
<div class="navigation">
17+
<a href="https://cloudflare.com">
18+
<div class="logo">
19+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="70 70 744 257"><path d="M790.6 271.9c-3.4 0-6.1-2.7-6.1-6.1 0-3.3 2.7-6.1 6.1-6.1 3.3 0 6.1 2.7 6.1 6.1 0 3.3-2.8 6.1-6.1 6.1m0-11c-2.7 0-4.9 2.2-4.9 4.9s2.2 4.9 4.9 4.9 4.9-2.2 4.9-4.9-2.2-4.9-4.9-4.9m3.1 8.1h-1.4l-1.2-2.3h-1.6v2.3h-1.3v-6.7h3.2c1.4 0 2.3.9 2.3 2.2 0 1-.6 1.7-1.4 2l1.4 2.5zm-2.4-3.5c.5 0 1-.3 1-1 0-.8-.4-1-1-1h-2v2h2zm-636.2-6.4h15.6v42.5h27.1v13.6h-42.7zm58.8 28.2v-.2c0-16.1 13-29.2 30.3-29.2s30.1 12.9 30.1 29v.2c0 16.1-13 29.2-30.3 29.2s-30.1-12.9-30.1-29m44.6 0v-.2c0-8.1-5.8-15.1-14.4-15.1-8.5 0-14.2 6.9-14.2 15v.2c0 8.1 5.8 15.1 14.3 15.1 8.6 0 14.3-6.9 14.3-15m34.9 3.3v-31.5h15.8v31.2c0 8.1 4.1 11.9 10.3 11.9s10.3-3.7 10.3-11.5v-31.6h15.8v31.1c0 18.1-10.3 26-26.3 26-15.9 0-25.9-8-25.9-25.6m76-31.5H391c20 0 31.7 11.5 31.7 27.7v.2c0 16.2-11.8 28.2-32 28.2h-21.3v-56.1zm21.9 42.3c9.3 0 15.5-5.1 15.5-14.2v-.2c0-9-6.2-14.2-15.5-14.2H385v28.5h6.3v.1zm54-42.3h44.9v13.6h-29.4v9.6h26.6v12.9h-26.6v20h-15.5zm66.5 0h15.5v42.5h27.2v13.6h-42.7zm83.3-.4h15l23.9 56.5h-16.7l-4.1-10h-21.6l-4 10h-16.3l23.8-56.5zm13.7 34.4l-6.2-15.9-6.3 15.9h12.5zm45.2-34h26.5c8.6 0 14.5 2.2 18.3 6.1 3.3 3.2 5 7.5 5 13.1v.2c0 8.6-4.6 14.3-11.5 17.2l13.4 19.6h-18l-11.3-17h-6.8v17H654v-56.2zm25.8 26.9c5.3 0 8.3-2.6 8.3-6.6v-.2c0-4.4-3.2-6.6-8.4-6.6h-10.2V286h10.3zm46.4-26.9h45.1v13.2h-29.7v8.5h26.9v12.3h-26.9v8.9h30.1v13.2h-45.5zm-605.1 34.8c-2.2 4.9-6.8 8.4-12.8 8.4-8.5 0-14.3-7.1-14.3-15.1v-.2c0-8.1 5.7-15 14.2-15 6.4 0 11.3 3.9 13.3 9.3h16.4c-2.6-13.4-14.4-23.3-29.6-23.3C91 258 78 271.1 78 287.2v.2c0 16.1 12.8 29 30.1 29 14.8 0 26.4-9.6 29.4-22.4l-16.4-.1z" fill="#404041"></path><path d="M752.9 169.7L710 145.1l-7.4-3.2-175.5 1.2v89.1h225.8z" fill="#fff"></path><path d="M674.8 223.9c2.1-7.2 1.3-13.8-2.2-18.7-3.2-4.5-8.6-7.1-15.1-7.4l-123.1-1.6c-.8 0-1.5-.4-1.9-1s-.5-1.4-.3-2.2c.4-1.2 1.6-2.1 2.9-2.2l124.2-1.6c14.7-.7 30.7-12.6 36.3-27.2l7.1-18.5c.3-.8.4-1.6.2-2.4-8-36.2-40.3-63.2-78.9-63.2-35.6 0-65.8 23-76.6 54.9-7-5.2-15.9-8-25.5-7.1-17.1 1.7-30.8 15.4-32.5 32.5-.4 4.4-.1 8.7.9 12.7-27.9.8-50.2 23.6-50.2 51.7 0 2.5.2 5 .5 7.5.2 1.2 1.2 2.1 2.4 2.1h227.2c1.3 0 2.5-.9 2.9-2.2l1.7-6.1z" fill="#f38020"></path><path d="M714 145c-1.1 0-2.3 0-3.4.1-.8 0-1.5.6-1.8 1.4l-4.8 16.7c-2.1 7.2-1.3 13.8 2.2 18.7 3.2 4.5 8.6 7.1 15.1 7.4l26.2 1.6c.8 0 1.5.4 1.9 1s.5 1.5.3 2.2c-.4 1.2-1.6 2.1-2.9 2.2l-27.3 1.6c-14.8.7-30.7 12.6-36.3 27.2l-2 5.1c-.4 1 .3 2 1.4 2h93.8c1.1 0 2.1-.7 2.4-1.8 1.6-5.8 2.5-11.9 2.5-18.2 0-37-30.2-67.2-67.3-67.2" fill="#faae40"></path></svg>
20+
</div>
21+
</a>
22+
<a href="https://www.cloudflare.com/developers/"><span>Developers</span></a>
23+
<a href="https://cloudflare.github.io" class="active"><span>Github</span></a>
24+
<a href="https://cloudflare.com/fund"><span>Fund</span></a>
25+
</div>
2126
<!-- /#header -->
2227

2328
<div class="hero-block text-center">

‎static/stylesheets/github.io.css‎

Lines changed: 68 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1823,14 +1823,6 @@ input[type="submit"].btn {
18231823
.js .menu-sidebar .active>.sub-menu {
18241824
display: block
18251825
}
1826-
.logo {
1827-
background: transparent url('../assets/icons-s73b196a6ae_2.png') 0 0 no-repeat;
1828-
display: inline-block;
1829-
overflow: hidden;
1830-
text-indent: -9999em;
1831-
height: 60px;
1832-
width: 240px
1833-
}
18341826
.close {
18351827
color: #888;
18361828
cursor: pointer;
@@ -1890,18 +1882,10 @@ input[type="submit"].btn {
18901882
(min--moz-device-pixel-ratio: 1.3),
18911883
(min-device-pixel-ratio: 1.3),
18921884
(min-resolution: 1.3dppx) {
1893-
.logo,
18941885
.cf-proxied,
18951886
.cf-unproxied {
18961887
background-image: url('../assets/icons-s73b196a6ae_2.png')
18971888
}
1898-
.logo {
1899-
background-position: 0 -122px;
1900-
-webkit-background-size: 100% auto;
1901-
-moz-background-size: 100% auto;
1902-
-o-background-size: 100% auto;
1903-
background-size: 100% auto
1904-
}
19051889
.cf-proxied {
19061890
background-position: 0 -380px;
19071891
-webkit-background-size: 55px, auto;
@@ -1938,11 +1922,6 @@ input[type="submit"].btn {
19381922
.header-main .btn {
19391923
font-size: 0.93333rem
19401924
}
1941-
.logo-header {
1942-
display: block;
1943-
margin: 0 auto;
1944-
background-position: 0 -60px
1945-
}
19461925
.header-navigation {
19471926
display: none;
19481927
font-size: 0.93333rem
@@ -1984,15 +1963,6 @@ input[type="submit"].btn {
19841963
top: 50%;
19851964
width: 100%
19861965
}
1987-
@media screen and (-webkit-min-device-pixel-ratio: 1.3),
1988-
(-o-min-device-pixel-ratio: 2.6 / 2),
1989-
(min--moz-device-pixel-ratio: 1.3),
1990-
(min-device-pixel-ratio: 1.3),
1991-
(min-resolution: 1.3dppx) {
1992-
.logo-header {
1993-
background-position: sprite-background-position(url('../assets/icons_2x-sc6e92cc69d_2.png'), logo-white)
1994-
}
1995-
}
19961966
@media screen and (min-width: 49.2em) {
19971967
.mobile-navigation {
19981968
display: none
@@ -2468,3 +2438,71 @@ hr.double,
24682438
margin-left: 2em
24692439
}
24702440
}
2441+
.navigation {
2442+
position: relative;
2443+
z-index: 10;
2444+
top: 0;
2445+
left: 0;
2446+
width: 100%;
2447+
display: -webkit-box;
2448+
display: -ms-flexbox;
2449+
display: flex;
2450+
-webkit-box-align: stretch;
2451+
-ms-flex-align: stretch;
2452+
align-items: stretch;
2453+
background: #fff;
2454+
-webkit-box-shadow: 0 1px rgba(0,0,0,0.2);
2455+
box-shadow: 0 1px rgba(0,0,0,0.2);
2456+
}
2457+
.navigation::before {
2458+
content: "";
2459+
position: absolute;
2460+
display: block;
2461+
height: 3px;
2462+
width: 100%;
2463+
background: #f38020;
2464+
}
2465+
.navigation > a {
2466+
display: -webkit-box;
2467+
display: -ms-flexbox;
2468+
display: flex;
2469+
-webkit-box-align: center;
2470+
-ms-flex-align: center;
2471+
align-items: center;
2472+
padding: 1rem;
2473+
padding-top: calc(1rem + 3px);
2474+
font-size: 13px;
2475+
text-transform: uppercase;
2476+
letter-spacing: 0.0625em;
2477+
text-decoration: none;
2478+
}
2479+
.navigation > a:not(:hover) {
2480+
color: #808285;
2481+
}
2482+
.navigation > a:hover {
2483+
background: rgba(243,128,32,0.1);
2484+
-webkit-box-shadow: 0 1px #fbc99e;
2485+
box-shadow: 0 1px #fbc99e;
2486+
color: #f38020;
2487+
}
2488+
.navigation > a.active {
2489+
color: #f38020;
2490+
}
2491+
.navigation > a:first-child {
2492+
padding-left: 2rem;
2493+
padding-top: 1rem;
2494+
}
2495+
@media (max-width: 48em) {
2496+
.navigation > a:not(:nth-child(1)):not(:nth-child(2)) {
2497+
display: none;
2498+
}
2499+
}
2500+
.navigation .logo {
2501+
width: 108px;
2502+
}
2503+
.navigation .logo svg {
2504+
display: block;
2505+
width: 100%;
2506+
height: 100%;
2507+
margin: auto;
2508+
}

0 commit comments

Comments
 (0)