Skip to content

Commit 05a83dd

Browse files
leebyronleebyron
committed
variables for common colors and fonts
1 parent e587495 commit 05a83dd

File tree

4 files changed

+62
-63
lines changed

4 files changed

+62
-63
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,3 +6,4 @@ node_modules
66
npm-debug.log
77

88
/build/
9+
.tmp.*

‎site/_core/Site.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,8 @@ 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="/style.css" />
31-
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rubik:300|Roboto:300|Roboto+Mono:400,400i,600" />
31+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rubik:300|Roboto:300" />
32+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,400i,600" />
3233
<link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css" />
3334
</head>
3435
<body>

‎site/_css/graphql.less

Lines changed: 34 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
1+
@import "variables.less";
2+
13
html {
2-
font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
3-
font-weight: 300;
4-
color: #202020;
5-
font-size: 18px;
6-
line-height: 28px;
4+
.body-font();
75
}
86

97
body {
@@ -22,8 +20,7 @@ em {
2220
}
2321

2422
h1, h2, h3, h4, h5, h6 {
25-
font-family: 'Rubik', 'Helvetica Neue', Helvetica, Arial, sans-serif;
26-
font-weight: 300;
23+
.headline-font();
2724
margin: 10px 0;
2825
color: inherit;
2926
text-rendering: optimizelegibility;
@@ -100,8 +97,7 @@ li {
10097
}
10198

10299
a {
103-
/* https://www.pantone.com/color-finder/Rhodamine-Red-C */
104-
color: #E10098;
100+
color: @rhodamine-color;
105101
text-decoration: none;
106102
}
107103

@@ -256,18 +252,18 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li
256252

257253
.nav-main .nav-site a.active {
258254
color: #0f0f0f;
259-
border-bottom: 3px solid #E10098;
255+
border-bottom: 3px solid @rhodamine-color;
260256
background: #333;
261257
}
262258

263259
.nav-main .nav-home {
264-
color: #E10098;
260+
color: @rhodamine-color;
265261
font-size: 24px;
266262
line-height: 50px;
267263
}
268264

269265
.nav-home a {
270-
color: #E10098;
266+
color: @rhodamine-color;
271267
}
272268

273269
.nav-home img {
@@ -343,7 +339,7 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li
343339
}
344340

345341
.hero strong {
346-
color: #E10098;
342+
color: @rhodamine-color;
347343
font-weight: 300;
348344
}
349345

@@ -358,7 +354,7 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li
358354

359355
.buttons-unit .button {
360356
font-size: 24px;
361-
background: #E10098;
357+
background: @rhodamine-color;
362358
color: #fafafa;
363359
}
364360

@@ -367,7 +363,7 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li
367363
}
368364

369365
.nav-docs {
370-
color: #2d2d2d;
366+
color: @text-color;
371367
font-size: 13px;
372368
float: left;
373369
width: 170px;
@@ -398,11 +394,11 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li
398394

399395
.nav-docs a:hover {
400396
text-decoration: none;
401-
color: #E10098;
397+
color: @rhodamine-color;
402398
}
403399

404400
.nav-docs a.active {
405-
color: #E10098;
401+
color: @rhodamine-color;
406402
}
407403

408404
.nav-docs .nav-docs-section {
@@ -456,7 +452,7 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li
456452
}
457453

458454
.marketing-col h3 {
459-
color: #2d2d2d;
455+
color: @text-color;
460456
font-size: 24px;
461457
font-weight: 300;
462458
text-transform: uppercase;
@@ -471,7 +467,7 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li
471467
}
472468

473469
#examples h3, .home-presentation h3 {
474-
color: #2d2d2d;
470+
color: @text-color;
475471
font-size: 24px;
476472
font-weight: 300;
477473
margin-bottom: 5px;
@@ -769,12 +765,9 @@ figure {
769765
small code,
770766
li code,
771767
p code {
772-
background-color: #f6f5f5;
773-
color: #333;
774-
font-family: 'Roboto Mono', Menlo, Monaco, monospace;
775-
font-weight: 400;
776-
font-size: 13px;
777-
line-height: 20px;
768+
.code-font(15px);
769+
background-color: #f8f8f8;
770+
border-radius: 2px;
778771
padding: 4px 4px 2px;
779772
margin: 0 -1px;
780773
}
@@ -809,7 +802,7 @@ p code {
809802
}
810803

811804
.playground-tab-active {
812-
color: #222;
805+
color: @text-color;
813806
}
814807

815808
.playgroundCode {
@@ -1019,7 +1012,7 @@ p + .apiIndex {
10191012
text-decoration: none;
10201013
}
10211014
.apiIndex li a:hover::before {
1022-
color: #E10098;
1015+
color: @rhodamine-color;
10231016
content: '#';
10241017
font-size: 16px;
10251018
left: -2em;
@@ -1107,11 +1100,8 @@ p + .apiIndex {
11071100
code[class*="language-"],
11081101
pre[class*="language-"],
11091102
.apiIndex pre {
1110-
color: #333;
1103+
.code-font();
11111104
text-shadow: 0 1px white;
1112-
font-family: 'Roboto Mono', Menlo, Monaco, monospace;
1113-
font-size: 13px;
1114-
line-height: 20px;
11151105
direction: ltr;
11161106
text-align: left;
11171107
white-space: pre;
@@ -1245,7 +1235,7 @@ pre[class*="language-"] {
12451235
code[class*="language-"],
12461236
pre[class*="language-"],
12471237
.apiIndex pre {
1248-
font-family: 'Roboto Mono', Menlo, Monaco, monospace;
1238+
.code-font();
12491239
white-space: pre-wrap;
12501240
}
12511241

@@ -1291,9 +1281,8 @@ pre[class*="language-"],
12911281

12921282
.CodeMirror {
12931283
/* Set height, width, borders, and global font properties here */
1294-
font-family: 'Roboto Mono', Menlo, Monaco, monospace;
12951284
height: 300px;
1296-
color: black;
1285+
.code-font();
12971286
}
12981287

12991288
/* PADDING */
@@ -1685,9 +1674,7 @@ span.CodeMirror-selectedtext { background: none; }
16851674
background-color: infobackground;
16861675
border: 1px solid black;
16871676
border-radius: 4px 4px 4px 4px;
1688-
color: infotext;
1689-
font-family: monospace;
1690-
font-size: 10pt;
1677+
.code-font();
16911678
overflow: hidden;
16921679
padding: 2px 5px;
16931680
position: fixed;
@@ -1760,9 +1747,7 @@ span.CodeMirror-selectedtext { background: none; }
17601747
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
17611748
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
17621749
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
1763-
font-family: 'Roboto Mono', Menlo, Monaco, monospace;
1764-
font-size: 13px;
1765-
line-height: 20px;
1750+
.code-font();
17661751
list-style: none;
17671752
margin: 0;
17681753
margin-left: -6px;
@@ -1829,12 +1814,9 @@ li.CodeMirror-hint-active {
18291814

18301815
.CodeMirror-hint-information .content {
18311816
-webkit-box-orient: vertical;
1832-
color: #333;
18331817
display: -webkit-box;
1834-
font-family: helvetica, arial, sans-serif;
1835-
font-size: 13px;
1818+
.body-font(@size: 15px);
18361819
-webkit-line-clamp: 3;
1837-
line-height: 16px;
18381820
max-height: 48px;
18391821
overflow: hidden;
18401822
text-overflow: -o-ellipsis-lastline;
@@ -1866,9 +1848,7 @@ div.CodeMirror-lint-tooltip {
18661848
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
18671849
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
18681850
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
1869-
font-family: helvetica, arial, sans-serif;
1870-
font-size: 13px;
1871-
line-height: 16px;
1851+
.body-font(@size: 15px);
18721852
padding: 6px 10px;
18731853
opacity: 0;
18741854
transition: opacity 0.15s;
@@ -1980,27 +1960,21 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {
19801960
/* CM override */
19811961

19821962
.CodeMirror {
1983-
font-size: 13px;
1984-
line-height: 17px;
1985-
font-family: 'Roboto Mono', Menlo, Monaco, monospace;
1963+
.code-font();
19861964
}
19871965

19881966
.miniGraphiQL {
19891967
margin: 28px 0;
19901968
color: #333;
19911969
/*background: #faf9f9;*/
1992-
/*border-left: 4px solid #E10098;*/
1970+
/*border-left: 4px solid @rhodamine-color;*/
19931971
width: 100%;
19941972
display: -webkit-flex;
19951973
display: flex;
19961974
-webkit-flex-direction: row;
19971975
flex-direction: row;
1998-
font-family: helvetica, arial, sans-serif;
1999-
font-size: 13px;
20001976
position: relative;
20011977

2002-
font-size: 13px;
2003-
line-height: 17px;
20041978
padding: 3px; /*7px 14px;*/
20051979
background: white;
20061980
box-shadow: inset 0 0 0 1px #EEE, inset 4px 0 0 #EEE;
@@ -2070,11 +2044,9 @@ input#algolia-doc-search {
20702044
padding-left: 35px;
20712045
margin-top: 9px;
20722046
height: 30px;
2073-
font-size: 16px;
2074-
line-height: 20px;
2047+
.body-font(@color: white);
20752048
background-color: #555;
20762049
border-radius: 4px;
2077-
color: white;
20782050
outline: none;
20792051
border: none;
20802052
width: 170px;
@@ -2089,13 +2061,13 @@ input#algolia-doc-search {
20892061
background-color: #B51780;
20902062
}
20912063
.algolia-docsearch-suggestion--highlight {
2092-
color: #E10098;
2064+
color: @rhodamine-color;
20932065
}
20942066
.algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--highlight {
2095-
background-color: #E10098;
2067+
background-color: @rhodamine-color;
20962068
}
20972069
.aa-cursor .algolia-docsearch-suggestion--content {
2098-
color: #E10098;
2070+
color: @rhodamine-color;
20992071
}
21002072
.aa-cursor .algolia-docsearch-suggestion {
21012073
background: #FEF6FB;
@@ -2106,5 +2078,5 @@ input#algolia-doc-search {
21062078
.algolia-docsearch-suggestion--subcategory-column {
21072079
border-right-color: #FEF6FB;
21082080
background-color: #FEF6FB;
2109-
color: #E10098;
2081+
color: @rhodamine-color;
21102082
}

‎site/_css/variables.less

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
/* https://www.pantone.com/color-finder/Rhodamine-Red-C */
2+
@rhodamine-color: #E10098;
3+
@text-color: #202020;
4+
5+
.headline-font() {
6+
font-family: 'Rubik', 'Helvetica Neue', Helvetica, Arial, sans-serif;
7+
font-weight: 300;
8+
color: @text-color;
9+
}
10+
11+
.body-font(@size: 18px, @color: @text-color) {
12+
font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
13+
font-weight: 300;
14+
color: @color;
15+
font-size: @size;
16+
line-height: @size * 1.6;
17+
}
18+
19+
.code-font(@size: 13px, @color: @text-color) {
20+
font-family: 'Roboto Mono', Menlo, Monaco, monospace;
21+
font-weight: 400;
22+
color: @color;
23+
font-size: @size;
24+
line-height: @size * 1.3;
25+
}

0 commit comments

Comments
 (0)