Skip to content

Commit 9529254

Browse files
leebyronleebyron
committed
toying with typography
1 parent 0d840dd commit 9529254

File tree

5 files changed

+63
-34
lines changed

5 files changed

+63
-34
lines changed

‎site/_core/DocsSidebar.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,9 @@ var React = require('react');
1111
var DocsSidebar = React.createClass({
1212
render: function() {
1313
return <div className="nav-docs">
14+
<div className="algolia-search-wrapper">
15+
<input id="algolia-doc-search" type="text" placeholder="Search docs..." />
16+
</div>
1417
{getCategories(this.props.site).map((category) =>
1518
<div className="nav-docs-section" key={category.name}>
1619
<h3>{category.name}</h3>

‎site/_core/HeaderLinks.js

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@ var HeaderLinks = React.createClass({
1414
{section: 'code', text: 'Code', href: '/code/' },
1515
{section: 'help', text: 'Community', href: '/help/' },
1616
{section: 'blog', text: 'Blog', href: '/blog/' },
17-
],
18-
linksExternal: [
17+
// ],
18+
// linksExternal: [
1919
{section: 'spec', text: 'Spec', href: 'http://facebook.github.io/graphql/' },
2020
],
2121

@@ -41,13 +41,9 @@ var HeaderLinks = React.createClass({
4141
{this.renderLinks(this.linksInternal)}
4242
</ul>
4343

44-
<div className="algolia-search-wrapper">
45-
<input id="algolia-doc-search" type="text" placeholder="Search docs..." />
46-
</div>
47-
48-
<ul className="nav-site nav-site-external">
44+
{/*<ul className="nav-site nav-site-external">
4945
{this.renderLinks(this.linksExternal)}
50-
</ul>
46+
</ul>*/}
5147
</div>
5248
);
5349
}

‎site/_core/Site.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ var Site = React.createClass({
2828
<link rel="shortcut icon" href="/img/favicon.png" />
2929
<link rel="home" type="application/rss+xml" href="/blog/rss.xml" title="GraphQL Team Blog" />
3030
<link rel="stylesheet" href="/css/graphql.css" />
31-
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rubik|Roboto|Roboto+Mono:%3Cspan%20class="x x-first x-last">400,400i,700" />
31+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rubik%3Cspan%20class="x x-first x-last">:300|Roboto:300|Roboto+Mono:300,300i,500" />
3232
<link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css" />
3333
</head>
3434
<body>
@@ -37,7 +37,7 @@ var Site = React.createClass({
3737
<div className="nav-main">
3838
<div className="wrap">
3939
<a className="nav-home" href={'/'}>
40-
<img className="nav-logo" src={'/img/logo.svg'} width="40" height="40" />
40+
<img className="nav-logo" src={'/img/logo.svg'} width="30" height="30" />
4141
GraphQL
4242
</a>
4343
<HeaderLinks section={this.props.section} />

‎site/css/graphql.css

Lines changed: 44 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
html {
22
font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
3-
color: #484848;
4-
font-size: 16px;
5-
line-height: 24px;
3+
font-weight: 300;
4+
color: #202020;
5+
font-size: 18px;
6+
line-height: 28px;
67
}
78

89
body {
@@ -22,6 +23,7 @@ em {
2223

2324
h1, h2, h3, h4, h5, h6 {
2425
font-family: 'Rubik', 'Helvetica Neue', Helvetica, Arial, sans-serif;
26+
font-weight: 300;
2527
margin: 10px 0;
2628
color: inherit;
2729
text-rendering: optimizelegibility;
@@ -197,12 +199,12 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li
197199
.nav-main {
198200
font-family: 'Rubik', 'Helvetica Neue', Helvetica, Arial, sans-serif;
199201
*zoom: 1;
200-
background: #222;
201-
color: #fafafa;
202+
color: #606060;
202203
position: fixed;
203204
top: 0;
204205
height: 50px;
205-
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
206+
background: white;
207+
box-shadow: inset 0 -1px 0 0px rgba(0, 0, 0, 0.1);
206208
width: 100%;
207209
z-index: 100;
208210
}
@@ -217,22 +219,23 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li
217219
}
218220

219221
.nav-main a {
220-
color: #e9e9e9;
221222
text-decoration: none;
223+
transition: color 0.1s ease-out
222224
}
223225

224226
.nav-main .nav-site-wrapper {
225227
display: inline;
226228
}
227229

228230
.nav-main .nav-site-internal {
231+
float: right;
229232
margin: 0 0 0 20px;
230233
}
231234

232-
.nav-main .nav-site-external {
235+
/*.nav-main .nav-site-external {
233236
float: right;
234237
margin: 0;
235-
}
238+
}*/
236239

237240
.nav-main .nav-site li {
238241
margin: 0;
@@ -249,11 +252,11 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li
249252
}
250253

251254
.nav-main .nav-site a:hover {
252-
color: #fafafa;
255+
color: #0f0f0f;
253256
}
254257

255258
.nav-main .nav-site a.active {
256-
color: #fafafa;
259+
color: #0f0f0f;
257260
border-bottom: 3px solid #E10098;
258261
background: #333;
259262
}
@@ -269,28 +272,45 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li
269272
}
270273

271274
.nav-home img {
272-
vertical-align: -17px;
275+
vertical-align: -9px;
273276
margin-right: 4px;
274-
width: 40px;
275-
height: 50px;
277+
width: 30px;
278+
height: 30px;
276279
}
277280

278-
.nav-main ul {
281+
.nav-site-wrapper ul {
279282
display: inline;
280283
}
281284

282-
.nav-main li {
285+
.nav-site-wrapper li {
283286
display: inline;
284287
}
285288

286289
.hero {
287-
background: #2d2d2d;
290+
background: #222;
288291
color: #f8f8f8;
289292
height: 80vh;
290293
display: flex;
291294
align-items: center;
292295
justify-content: center;
293296
flex-direction: column;
297+
position: relative;
298+
z-index: 101;
299+
margin-top: -50px;
300+
padding-top: 50px;
301+
}
302+
303+
.nav-main.hero-nav {
304+
position: absolute;
305+
top: 0;
306+
height: 50px;
307+
width: 1020px;
308+
background: none;
309+
box-shadow: none;
310+
}
311+
312+
.hero-nav .nav-site-wrapper {
313+
float: right;
294314
}
295315

296316
.hero .content {
@@ -319,14 +339,13 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li
319339
}
320340

321341
.hero h2.minitext {
322-
font-weight: normal;
323342
line-height: inherit;
324343
margin: 0;
325344
}
326345

327346
.hero strong {
328347
color: #E10098;
329-
font-weight: 400;
348+
font-weight: 300;
330349
}
331350

332351
.buttons-unit {
@@ -440,7 +459,7 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li
440459
.marketing-col h3 {
441460
color: #2d2d2d;
442461
font-size: 24px;
443-
font-weight: normal;
462+
font-weight: 300;
444463
text-transform: uppercase;
445464
}
446465

@@ -455,7 +474,7 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li
455474
#examples h3, .home-presentation h3 {
456475
color: #2d2d2d;
457476
font-size: 24px;
458-
font-weight: normal;
477+
font-weight: 300;
459478
margin-bottom: 5px;
460479
}
461480

@@ -754,6 +773,7 @@ p code {
754773
background-color: #f6f5f5;
755774
color: #333;
756775
font-family: 'Roboto Mono', Menlo, Monaco, monospace;
776+
font-weight: 300;
757777
font-size: 14px;
758778
line-height: 20px;
759779
padding: 4px 4px 2px;
@@ -2014,11 +2034,11 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {
20142034
div.algolia-search-wrapper {
20152035
display: inline-block;
20162036
vertical-align: top;
2017-
margin-left: 15px;
2037+
/*margin-left: 15px;*/
20182038
}
20192039

20202040
.algolia-autocomplete .aa-dropdown-menu {
2021-
margin-left: -110px;
2041+
/*margin-left: -110px;*/
20222042
margin-top: -4px;
20232043
}
20242044

@@ -2034,7 +2054,7 @@ input#algolia-doc-search {
20342054

20352055
padding: 0 10px;
20362056
padding-left: 35px;
2037-
margin-top: 12px;
2057+
margin-top: 9px;
20382058
height: 30px;
20392059
font-size: 16px;
20402060
line-height: 20px;

‎site/index.html.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,23 @@
11
var React = require('react');
22
var Site = require('./_core/Site');
33
var SiteData = require('./_core/SiteData');
4+
var HeaderLinks = require('./_core/HeaderLinks');
45
var Marked = require('./_core/Marked');
56

67
var index = React.createClass({
78
render: function() {
89
return (
910
<Site>
1011
<div className="hero">
12+
<div className="hero-nav nav-main">
13+
<div className="wrap">
14+
<div className="algolia-search-wrapper">
15+
<input id="algolia-doc-search" type="text" placeholder="Search docs..." />
16+
</div>
17+
<HeaderLinks section={this.props.section} />
18+
</div>
19+
</div>
20+
1121
<div className="content">
1222
<img className="main-logo" src={'/img/logo.svg'} width="240" height="240" />
1323
<h1 className="text"><strong>GraphQL</strong></h1>

0 commit comments

Comments
 (0)