Skip to content

Commit c22ba1a

Browse files
leebyronleebyron
committed
Many small stylistic improvements
1 parent d0da962 commit c22ba1a

30 files changed

+162
-173
lines changed

‎site/_core/BlogLayout.js

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,11 @@ var BlogLayout = React.createClass({
1717
var site = this.props.site;
1818
return (
1919
<Site section="blog" title={page.title}>
20-
<section className="content documentationContent">
21-
<BlogSidebar site={site} page={page} />
22-
<BlogPost post={page} isPermalink={true} />
20+
<section>
21+
<div className="documentationContent">
22+
<BlogPost post={page} isPermalink={true} />
23+
<BlogSidebar site={site} page={page} />
24+
</div>
2325
</section>
2426
</Site>
2527
);

‎site/_core/CodeLayout.js

Lines changed: 0 additions & 42 deletions
This file was deleted.

‎site/_core/DocsLayout.js

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -19,16 +19,18 @@ var DocsLayout = React.createClass({
1919

2020
return (
2121
<Site section="docs" title={page.title}>
22-
<section className="content documentationContent">
23-
<div className="inner-content">
24-
<h1>{page.title}</h1>
25-
<Marked>{page.content}</Marked>
26-
<div className="docs-prevnext">
27-
{page.previous && <a className="docs-prev" href={path.resolve(page.url, page.previous)}>&larr; Prev</a>}
28-
{page.next && <a className="docs-next" href={path.resolve(page.url, page.next)}>Next &rarr;</a>}
22+
<section>
23+
<div className="documentationContent">
24+
<div className="inner-content">
25+
<h1>{page.title}</h1>
26+
<Marked>{page.content}</Marked>
27+
<div className="docs-prevnext">
28+
{page.previous && <a className="docs-prev" href={path.resolve(page.url, page.previous)}>&larr; Prev</a>}
29+
{page.next && <a className="docs-next" href={path.resolve(page.url, page.next)}>Next &rarr;</a>}
30+
</div>
2931
</div>
32+
<DocsSidebar site={site} page={page} />
3033
</div>
31-
<DocsSidebar site={site} page={page} />
3234
</section>
3335
</Site>
3436
);

‎site/_core/GraphQLJSLayout.js

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
/**
2+
* Copyright (c) 2016, Facebook, Inc.
3+
* All rights reserved.
4+
*
5+
* This source code is licensed under the license found in the
6+
* LICENSE file in the root directory of this source tree.
7+
*/
8+
9+
var path = require('path');
10+
var React = require('react');
11+
var Site = require('./Site');
12+
var Marked = require('./Marked');
13+
var DocsSidebar = require('./DocsSidebar');
14+
15+
var GraphQLJSLayout = React.createClass({
16+
render: function() {
17+
var page = this.props.page;
18+
var site = this.props.site;
19+
return (
20+
<Site title={page.title} category="GraphQL.js">
21+
<section>
22+
<div className="documentationContent">
23+
<div className="inner-content">
24+
<h1>{page.title}</h1>
25+
<Marked>{page.content}</Marked>
26+
<div className="docs-prevnext">
27+
{page.previous && <a className="docs-prev" href={path.resolve(page.url, page.previous)}>&larr; Prev</a>}
28+
{page.next && <a className="docs-next" href={path.resolve(page.url, page.next)}>Next &rarr;</a>}
29+
</div>
30+
</div>
31+
<DocsSidebar site={site} page={page} />
32+
</div>
33+
</section>
34+
</Site>
35+
);
36+
}
37+
});
38+
39+
module.exports = GraphQLJSLayout;

‎site/_core/Prism.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ export default function PrismComponent(props) {
2727
<div
2828
className="line-highlight"
2929
key={ii}
30-
style={{height: 20, top: 20 * (line - 1)}}
30+
style={{height: 21, top: 17 * (line - 1)}}
3131
/>
3232
);
3333
})}

‎site/_core/Site.js

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -54,12 +54,12 @@ var Site = React.createClass({
5454
<section className="sitemap">
5555
<a href="/" className="nav-home" />
5656
<div>
57-
<h5><a href="/learn">Learn</a></h5>
58-
<a>Introduction</a>
59-
<a>Query Language</a>
60-
<a>Type System</a>
61-
<a>How GraphQL Works</a>
62-
<a>Best Practices</a>
57+
<h5><a href="/learn/">Learn</a></h5>
58+
<a href="/learn/">Introduction</a>
59+
<a href="/learn/query/">Query Language</a>
60+
<a href="/learn/schema/">Type System</a>
61+
<a href="/learn/execution/">Execution</a>
62+
<a href="/learn/best-practices/">Best Practices</a>
6363
</div>
6464
<div>
6565
<h5><a href="/code">Code</a></h5>

‎site/_core/center.js

Lines changed: 0 additions & 22 deletions
This file was deleted.

‎site/_css/docs.less

Lines changed: 60 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,19 @@
22

33
.documentationContent {
44
margin-bottom: 8em;
5-
@media screen and (max-width: 1019px) {
6-
margin-bottom: 4em;
7-
}
5+
display: flex;
6+
width: 100%;
7+
justify-content: space-between;
88

9-
&:after {
10-
clear: both;
11-
content: " ";
12-
display: table;
9+
@media screen and (max-width: 740px) {
10+
margin-bottom: 4em;
11+
display: block;
1312
}
1413
}
1514

1615
.inner-content {
17-
float: left;
18-
max-width: 760px;
19-
margin-right: 210px;
16+
flex: 1;
17+
max-width: 720px;
2018
@media screen and (max-width: 740px) {
2119
margin-right: 0;
2220
}
@@ -47,6 +45,51 @@
4745
img {
4846
max-width: 100%;
4947
}
48+
49+
.prism {
50+
position: relative;
51+
box-shadow:
52+
inset 0 1px 0 rgba(0,0,0,0.08),
53+
inset 0 -1px 0 rgba(0,0,0,0.08),
54+
inset -1px 0 0 rgba(0,0,0,0.08),
55+
inset 4px 0 0 rgba(0,0,0,0.08);
56+
border-radius: 3px;
57+
58+
.line-highlight {
59+
background-color: lighten(desaturate(@rhodamine-color, 50%), 50%);
60+
left: 0;
61+
line-height: inherit;
62+
margin-top: 5px;
63+
pointer-events: none;
64+
position: absolute;
65+
right: 0;
66+
z-index: -1;
67+
}
68+
69+
@media print {
70+
text-shadow: none;
71+
}
72+
}
73+
74+
.prism + .prism {
75+
margin-top: -15px;
76+
}
77+
78+
.not(code) > pre.prism {
79+
text-shadow: 0 1px white;
80+
81+
&::-moz-selection, &::selection {
82+
text-shadow: none;
83+
}
84+
}
85+
86+
// Code blocks
87+
pre.prism {
88+
padding: 7px 14px;
89+
margin-left: -4px;
90+
margin-bottom: 10px;
91+
overflow: auto;
92+
}
5093
}
5194

5295
.docs-prevnext {
@@ -63,17 +106,14 @@
63106
}
64107

65108
.nav-docs {
66-
color: @text-color;
67-
float: right;
68-
font-size: 13px;
109+
.body-font(@size: 13px);
69110
margin: 1em 0 4em;
70-
width: 175px;
71-
margin-left: -210px;
111+
width: 195px;
112+
padding-left: 20px;
72113

73114
@media screen and (max-width: 740px) {
74-
float: none;
75115
width: auto;
76-
margin-left: 0;
116+
padding-left: 0;
77117
}
78118

79119
h3 {
@@ -88,12 +128,13 @@
88128

89129
li {
90130
margin: 0;
131+
line-height: 32px;
91132

92133
ul {
93-
margin-bottom: 10px;
134+
margin-bottom: 18px;
94135

95136
li {
96-
line-height: 24px;
137+
line-height: 21px;
97138
}
98139
}
99140
}

‎site/_css/prism.less

Lines changed: 0 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -20,55 +20,6 @@
2020
position: relative;
2121
}
2222

23-
// Used in docs, but not on index. todo: move.
24-
.inner-content {
25-
.prism {
26-
position: relative;
27-
background: white;
28-
box-shadow: inset 0 0 0 1px #EEE, inset 4px 0 0 #EEE;
29-
border-radius: 3px;
30-
31-
.line-highlight {
32-
background-color: rgba(229, 53, 171, 0.15);
33-
left: 0;
34-
line-height: inherit;
35-
margin-top: 5px;
36-
pointer-events: none;
37-
position: absolute;
38-
right: 0;
39-
}
40-
41-
@media screen and (max-width: 1020px) {
42-
padding: 4px 8px;
43-
margin-left: -12px;
44-
font-size: 11px;
45-
}
46-
47-
@media print {
48-
text-shadow: none;
49-
}
50-
}
51-
52-
.prism + .prism {
53-
margin-top: -15px;
54-
}
55-
56-
.not(code) > pre.prism {
57-
text-shadow: 0 1px white;
58-
59-
&::-moz-selection, &::selection {
60-
text-shadow: none;
61-
}
62-
}
63-
64-
// Code blocks
65-
pre.prism {
66-
padding: 7px 14px;
67-
margin-left: -4px;
68-
margin-bottom: 10px;
69-
overflow: auto;
70-
}
71-
}
7223

7324

7425

‎site/blog/index.html.js

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,11 +22,15 @@ var BlogIndex = React.createClass({
2222
.sort((a, b) => a.date < b.date);
2323
return (
2424
<Site section="blog" title="Blog">
25-
<section className="content documentationContent">
26-
<BlogSidebar site={site} />
27-
{posts.map(post =>
28-
<BlogPost post={post} isPermalink={false} key={post.permalink} />
29-
)}
25+
<section>
26+
<div className="documentationContent">
27+
<div>
28+
{posts.map(post =>
29+
<BlogPost post={post} isPermalink={false} key={post.permalink} />
30+
)}
31+
</div>
32+
<BlogSidebar site={site} />
33+
</div>
3034
</section>
3135
</Site>
3236
);

‎site/graphql-js/APIReference-Errors.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
title: graphql/error
3-
layout: ../_core/CodeLayout
3+
layout: ../_core/GraphQLJSLayout
44
category: API Reference
55
permalink: /docs/api-reference-errors/
66
sublinks: GraphQLError,syntaxError,locatedError,formatError

‎site/graphql-js/APIReference-Execution.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
title: graphql/execution
3-
layout: ../_core/CodeLayout
3+
layout: ../_core/GraphQLJSLayout
44
category: API Reference
55
permalink: /docs/api-reference-execution/
66
sublinks: execute

‎site/graphql-js/APIReference-ExpressGraphQL.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
title: express-graphql
3-
layout: ../_core/CodeLayout
3+
layout: ../_core/GraphQLJSLayout
44
category: API Reference
55
permalink: /docs/api-reference-express-graphql/
66
sublinks: graphqlHTTP

0 commit comments

Comments
 (0)