Skip to content

Commit 1d40870

Browse files
leebyronleebyron
authored
Add a page outlining brand guidelines (graphql#1084)
Updates assets in use and links into brand
1 parent 63d343e commit 1d40870

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

56 files changed

+958
-698
lines changed

‎gatsby-config.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
module.exports = {
22
siteMetadata: {
3-
title: "A query language for your API",
3+
title: "GraphQL",
44
description:
5-
"GraphQL provides a complete description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.",
5+
"A query language for your API — GraphQL provides a complete description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.",
66
siteUrl: "http://graphql.org/",
77
},
88

‎src/Containers/Sections/Hero/index.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { Link } from "gatsby"
22
import React from "react"
33
import HeaderLinks from "../../../components/HeaderLinks"
4+
import Logo from "../../../components/Logo"
45
import Search from "../../../components/Search"
56
import Prism from "../../../components/Prism"
67

@@ -16,7 +17,7 @@ const Hero = () => {
1617
</header>
1718
<section className="intro">
1819
<div className="named-logo">
19-
<img src="/img/logo.svg" alt="GraphQL Logo" />
20+
<Logo />
2021
<h1>GraphQL</h1>
2122
</div>
2223

‎src/assets/css/_css/brand.less

Lines changed: 256 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,256 @@
1+
.brand-link {
2+
position: fixed;
3+
z-index: 100;
4+
background: white;
5+
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
6+
padding: 1em;
7+
}
8+
9+
.brand {
10+
p,
11+
li {
12+
max-width: 60ch;
13+
}
14+
15+
.dos-donts {
16+
display: flex;
17+
flex-wrap: wrap;
18+
margin: 1em 0;
19+
20+
ul {
21+
flex: 1;
22+
flex-basis: 400px;
23+
min-width: 350px;
24+
margin: 0 0 0 2em;
25+
26+
ul {
27+
margin-top: 1em;
28+
}
29+
}
30+
31+
.do li:before {
32+
background-image: url(http://github.com/%3Cspan%20class=%22pl-s%22%3E%3Cspan%20class=%22pl-pds%22%3E"%3C/span%3E/img/brand/do.svg%3Cspan%20class=%22pl-pds%22%3E"%3C/span%3E%3C/span%3E);
33+
}
34+
.dont li:before {
35+
background-image: url(http://github.com/%3Cspan%20class=%22pl-s%22%3E%3Cspan%20class=%22pl-pds%22%3E"%3C/span%3E/img/brand/dont.svg%3Cspan%20class=%22pl-pds%22%3E"%3C/span%3E%3C/span%3E);
36+
}
37+
.do li li:before {
38+
background-image: url(http://github.com/%3Cspan%20class=%22pl-s%22%3E%3Cspan%20class=%22pl-pds%22%3E"%3C/span%3E/img/brand/do-example.svg%3Cspan%20class=%22pl-pds%22%3E"%3C/span%3E%3C/span%3E);
39+
}
40+
.dont li li:before {
41+
background-image: url(http://github.com/%3Cspan%20class=%22pl-s%22%3E%3Cspan%20class=%22pl-pds%22%3E"%3C/span%3E/img/brand/dont-example.svg%3Cspan%20class=%22pl-pds%22%3E"%3C/span%3E%3C/span%3E);
42+
}
43+
li {
44+
list-style: none;
45+
position: relative;
46+
&:before {
47+
content: "";
48+
position: absolute;
49+
left: -1.25em;
50+
top: 0.325em;
51+
background-repeat: no-repeat;
52+
width: 0.825em;
53+
height: $width;
54+
background-size: $width;
55+
user-select: none;
56+
}
57+
}
58+
}
59+
60+
.samples {
61+
display: flex;
62+
flex-wrap: wrap;
63+
gap: 1em;
64+
65+
.rhodamine-sample,
66+
.rubik-sample {
67+
font-family: "Rubik";
68+
font-weight: 300;
69+
padding: 1em;
70+
width: max-content;
71+
background: #f3f4f7;
72+
73+
.sample {
74+
font-size: 2em;
75+
word-wrap: break-word;
76+
line-height: 1.2;
77+
}
78+
79+
a {
80+
color: inherit;
81+
}
82+
83+
dl {
84+
margin: 0.5em 0;
85+
font-size: 0.8em;
86+
line-height: 1.5;
87+
display: grid;
88+
grid-template-columns: 1fr 3fr;
89+
dt {
90+
grid-column-start: 1;
91+
padding-right: 2em;
92+
}
93+
dd {
94+
grid-column-start: 2;
95+
}
96+
}
97+
}
98+
99+
.rhodamine-sample {
100+
background: @rhodamine-color;
101+
color: white;
102+
}
103+
}
104+
105+
.logoGrid {
106+
font-family: "Rubik";
107+
font-weight: 300;
108+
color: rgba(0, 0, 0, 0.25);
109+
display: flex;
110+
max-width: 850px;
111+
div {
112+
background: #f3f4f7;
113+
}
114+
&,
115+
& * {
116+
user-select: none;
117+
pointer-events: none;
118+
}
119+
img {
120+
display: block;
121+
}
122+
123+
.square {
124+
position: relative;
125+
&:before {
126+
display: block;
127+
content: "";
128+
width: 100%;
129+
padding-top: 100%;
130+
}
131+
> div {
132+
position: absolute;
133+
top: 0;
134+
right: 0;
135+
bottom: 0;
136+
left: 0;
137+
}
138+
}
139+
}
140+
141+
.img-examples {
142+
display: flex;
143+
flex-wrap: wrap;
144+
gap: 0 3em;
145+
li {
146+
display: flex;
147+
flex: 1;
148+
max-width: initial;
149+
flex-basis: 450px;
150+
span {
151+
flex: 1;
152+
max-width: 34ch;
153+
margin-right: 1em;
154+
}
155+
img {
156+
display: block;
157+
}
158+
& > img,
159+
& > .dont-effect {
160+
user-select: none;
161+
pointer-events: none;
162+
margin: -0.25em 0 0 0.5em;
163+
background: #f3f4f7;
164+
padding: 1.25em;
165+
height: 5em;
166+
box-sizing: border-box;
167+
}
168+
.dont-effect {
169+
width: 5em;
170+
img {
171+
height: 220%;
172+
margin: -2.5%;
173+
transform-origin: top left;
174+
transform: scale(0.5);
175+
}
176+
}
177+
}
178+
}
179+
180+
.color-combos {
181+
background: #f3f4f7;
182+
padding: 25px;
183+
display: flex;
184+
flex-wrap: wrap;
185+
gap: 25px;
186+
max-width: max-content;
187+
user-select: none;
188+
pointer-events: none;
189+
img {
190+
height: 100px;
191+
padding: 25px;
192+
border-radius: 100px;
193+
display: block;
194+
}
195+
.filter {
196+
height: 200px;
197+
padding: 50px;
198+
transform: scale(0.5);
199+
margin: -50px;
200+
}
201+
}
202+
203+
.agree-actions {
204+
user-select: none;
205+
label {
206+
display: block;
207+
cursor: pointer;
208+
margin: 0 auto;
209+
max-width: max-content;
210+
}
211+
input {
212+
margin-right: 1em;
213+
}
214+
a {
215+
background-color: white;
216+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
217+
color: @rhodamine-color;
218+
cursor: pointer;
219+
display: inline-block;
220+
font-family: "Rubik", "Helvetica Neue", Helvetica, Arial, sans-serif;
221+
font-weight: 300;
222+
margin: 1em;
223+
padding: 0.8em 1.2em;
224+
text-decoration: none;
225+
transition: 0.2s ease-in-out box-shadow, 0.2s ease-in-out color;
226+
white-space: nowrap;
227+
&.disabled {
228+
color: rgba(0, 0, 0, 0.25);
229+
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
230+
}
231+
&:not(.disabled):hover {
232+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
233+
}
234+
}
235+
}
236+
237+
.agree-actions-container {
238+
background: #f3f4f7;
239+
text-align: center;
240+
241+
&.top {
242+
@media (max-width: 800px) {
243+
display: none;
244+
}
245+
float: right;
246+
max-width: 33%;
247+
padding: 3% 1em;
248+
margin-left: 2em;
249+
}
250+
251+
&.bottom {
252+
max-width: none;
253+
padding: 6% 1em;
254+
}
255+
}
256+
}

‎src/assets/css/_css/docs.less

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -173,7 +173,7 @@
173173
border-radius: 3px;
174174

175175
.line-highlight {
176-
background-color: lighten(desaturate(@rhodamine-color, 50%), 50%);
176+
background-color: #f8e9f3;
177177
left: 0;
178178
line-height: inherit;
179179
margin-top: 5px;

‎src/assets/css/_css/foundation.less

Lines changed: 21 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,31 @@
11
.foundation {
22
.foundation-hero {
33
background: url(http://github.com/%3Cspan%20class=%22pl-s%22%3E/img/graphql_foundation-hero.jpg%3C/span%3E) top left;
4-
height: 35vmin;
5-
position: relative;
6-
width: 100%;
74

85
.foundation-hero-inner-content {
9-
background-color: rgba(221,23,151,0.75);
10-
height: 35vmin;
11-
width: 100%;
12-
position: absolute;
13-
}
6+
padding: 6% 1em;
7+
background-color: rgba(225, 0, 152, 0.75);
148

15-
img {
16-
padding: 4vmin 0 1vmin;
17-
height: 20vmin;
18-
display: block;
19-
margin: 0 auto;
20-
}
9+
img {
10+
user-select: none;
11+
pointer-events: none;
12+
width: 50%;
13+
min-width: 300px;
14+
display: block;
15+
margin: 6% auto;
16+
}
2117

22-
h2 {
23-
color: #FFF;
24-
display: block;
25-
margin: auto;
26-
padding: 2vmin 5vmin;
27-
height: 15vmin;
28-
width: 100%;
29-
text-align: center;
30-
font-size: 2.5vmin;
31-
line-height: 3vmin;
18+
div {
19+
max-width: 50ch;
20+
font-family: "Rubik", "Helvetica Neue", Helvetica, Arial, sans-serif;
21+
font-weight: 300;
22+
font-size: ~"clamp(1em, 2.5vw, 1.5em)";
23+
color: #fff;
24+
display: block;
25+
margin: auto;
26+
text-align: center;
27+
line-height: 1.4;
28+
}
3229
}
3330
}
3431
}

‎src/assets/css/_css/graphql.less

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -316,18 +316,6 @@ footer {
316316
}
317317
}
318318

319-
.fbOpenSource {
320-
display: block;
321-
margin: 1em auto;
322-
opacity: 0.4;
323-
transition: opacity 0.15s ease-in-out;
324-
width: 170px;
325-
326-
&:hover {
327-
opacity: 1;
328-
}
329-
}
330-
331319
.copyright {
332320
color: rgba(255, 255, 255, 0.4);
333321
text-align: center;

‎src/assets/css/_css/index.less

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -228,7 +228,7 @@ div.index {
228228
}
229229

230230
.darkWash {
231-
background: #3d464f;
231+
background: #2a3746;
232232
box-shadow:
233233
inset 0 30px 30px -30px rgba(0,0,0,0.35),
234234
inset 0 -20px 30px -30px rgba(0,0,0,0.35);
@@ -481,10 +481,6 @@ div.index {
481481
margin: 0 auto;
482482
max-width: 575px;
483483
text-align: center;
484-
485-
a {
486-
color: lighten(@rhodamine-color, 30%);
487-
}
488484
}
489485

490486
.graphiqlVid {

0 commit comments

Comments
 (0)