Skip to content

Commit 205977f

Browse files
committed
code typography
1 parent 9529254 commit 205977f

File tree

2 files changed

+37
-23
lines changed

2 files changed

+37
-23
lines changed

site/_core/Site.js

Lines changed: 1 addition & 1 deletion
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:300|Roboto:300|Roboto+Mono:%3Cspan%20class="x x-first x-last">300,300i,500" />
31+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rubik:300|Roboto:300|Roboto+Mono:%3Cspan%20class="x x-first x-last">400,400i,600" />
3232
<link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css" />
3333
</head>
3434
<body>

site/css/graphql.css

Lines changed: 36 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ h3 small {
7979
}
8080

8181
h4 small {
82-
font-size: 14px;
82+
font-size: 13px;
8383
}
8484

8585
ul, ol {
@@ -96,7 +96,6 @@ ul ul, ul ol, ol ol, ol ul {
9696
}
9797

9898
li {
99-
line-height: 20px;
10099
margin-bottom: 1em;
101100
}
102101

@@ -369,7 +368,7 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li
369368

370369
.nav-docs {
371370
color: #2d2d2d;
372-
font-size: 14px;
371+
font-size: 13px;
373372
float: left;
374373
width: 170px;
375374
}
@@ -389,7 +388,7 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li
389388

390389
.nav-docs h3 {
391390
text-transform: uppercase;
392-
font-size: 14px;
391+
font-size: 13px;
393392
}
394393

395394
.nav-docs a {
@@ -488,7 +487,7 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li
488487
}
489488

490489
#examples #todoExample {
491-
font-size: 14px;
490+
font-size: 13px;
492491
}
493492

494493
#examples #todoExample ul {
@@ -773,8 +772,8 @@ p code {
773772
background-color: #f6f5f5;
774773
color: #333;
775774
font-family: 'Roboto Mono', Menlo, Monaco, monospace;
776-
font-weight: 300;
777-
font-size: 14px;
775+
font-weight: 400;
776+
font-size: 13px;
778777
line-height: 20px;
779778
padding: 4px 4px 2px;
780779
margin: 0 -1px;
@@ -1111,7 +1110,7 @@ pre[class*="language-"],
11111110
color: #333;
11121111
text-shadow: 0 1px white;
11131112
font-family: 'Roboto Mono', Menlo, Monaco, monospace;
1114-
font-size: 14px;
1113+
font-size: 13px;
11151114
line-height: 20px;
11161115
direction: ltr;
11171116
text-align: left;
@@ -1253,11 +1252,13 @@ pre[class*="language-"],
12531252
code[class*="language-"],
12541253
pre[class*="language-"],
12551254
.apiIndex li {
1256-
font-size: 14px;
1257-
line-height: 20px;
1258-
border-left: 4px solid #E10098;
1255+
font-size: 13px;
1256+
line-height: 17px;
12591257
padding: 7px 14px;
1260-
background-color: #faf9f9;
1258+
background: white;
1259+
box-shadow: inset 0 0 0 1px #EEE, inset 4px 0 0 #EEE;
1260+
border-radius: 3px;
1261+
margin-left: -4px;
12611262
}
12621263

12631264
.prism + .prism {
@@ -1290,7 +1291,7 @@ pre[class*="language-"],
12901291

12911292
.CodeMirror {
12921293
/* Set height, width, borders, and global font properties here */
1293-
font-family: monospace;
1294+
font-family: 'Roboto Mono', Menlo, Monaco, monospace;
12941295
height: 300px;
12951296
color: black;
12961297
}
@@ -1760,7 +1761,7 @@ span.CodeMirror-selectedtext { background: none; }
17601761
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
17611762
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
17621763
font-family: 'Roboto Mono', Menlo, Monaco, monospace;
1763-
font-size: 14px;
1764+
font-size: 13px;
17641765
line-height: 20px;
17651766
list-style: none;
17661767
margin: 0;
@@ -1979,50 +1980,63 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {
19791980
/* CM override */
19801981

19811982
.CodeMirror {
1982-
font-size: 14px;
1983-
line-height: 20px;
1983+
font-size: 13px;
1984+
line-height: 17px;
19841985
font-family:
19851986
}
19861987

19871988
.miniGraphiQL {
19881989
margin: 28px 0;
19891990
color: #333;
1990-
background: #faf9f9;
1991-
border-left: 4px solid #E10098;
1991+
/*background: #faf9f9;*/
1992+
/*border-left: 4px solid #E10098;*/
19921993
width: 100%;
19931994
display: -webkit-flex;
19941995
display: flex;
19951996
-webkit-flex-direction: row;
19961997
flex-direction: row;
19971998
font-family: helvetica, arial, sans-serif;
1998-
font-size: 14px;
1999+
font-size: 13px;
19992000
position: relative;
2001+
2002+
font-size: 13px;
2003+
line-height: 17px;
2004+
padding: 3px; /*7px 14px;*/
2005+
background: white;
2006+
box-shadow: inset 0 0 0 1px #EEE, inset 4px 0 0 #EEE;
2007+
border-radius: 3px;
2008+
margin-left: -4px;
20002009
}
20012010

20022011
.query-editor .CodeMirror {
20032012
height: auto;
20042013
min-height: 100px;
20052014
margin: 0px 7px 28px;
2006-
background: #faf9f9;
2015+
/*background: #faf9f9;*/
20072016
}
20082017

20092018
.query-editor {
20102019
width: 50%;
20112020
}
20122021

20132022
.result-window {
2014-
background: #fbfafa;
2023+
/*background: #fbfafa;*/
20152024
box-shadow: inset 5px 0px 4px -3px rgba(0,0,0,0.2);
2025+
20162026
position: absolute;
20172027
left: 50%;
20182028
top: 0;
20192029
bottom: 0;
20202030
height: 100%;
20212031
right: 0;
2032+
2033+
box-shadow: inset 0 0 0 1px #EEE;
2034+
border-radius: 3px;
20222035
}
20232036

20242037
.result-window .CodeMirror {
2025-
background: #fbfafa;
2038+
/*background: #fbfafa;*/
2039+
background: transparent;
20262040
height: 100%;
20272041
margin: 0 7px;
20282042
-webkit-box-sizing: border-box;

0 commit comments

Comments
 (0)