Skip to content

Commit 2c3c2e4

Browse files
author
Jake Blakeley
committed
initial layout
0 parents  commit 2c3c2e4

Some content is hidden

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

53 files changed

+6378
-0
lines changed

Diff for: ‎config.codekit

+963
Large diffs are not rendered by default.

Diff for: ‎css/.sass-cache/31f0a7cd5c859c76857b5e01a8c04d9b1e2895fa/main.scssc

119 KB
Binary file not shown.

Diff for: ‎css/.sass-cache/fcb648e69b68f438f08aa1c965ac765629efd721/main.scssc

297 KB
Binary file not shown.

Diff for: ‎css/main.css

+396
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,396 @@
1+
@font-face {
2+
font-family: 'alrightRegular';
3+
src: url("../fonts/ttfah-alrightsublpwebfontuseonly-regular-webfont.eot");
4+
src: url("../fonts/ttfah-alrightsublpwebfontuseonly-regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/ttfah-alrightsublpwebfontuseonly-regular-webfont.woff") format("woff"), url("../fonts/ttfah-alrightsublpwebfontuseonly-regular-webfont.ttf") format("truetype"), url("../fonts/ttfah-alrightsublpwebfontuseonly-regular-webfont.svg#alrightsublpwebfontuseonly-Rg") format("svg");
5+
font-weight: 300;
6+
font-style: normal; }
7+
@font-face {
8+
font-family: 'inputMono';
9+
src: url("../fonts/InputMono-Regular.eot");
10+
src: url("../fonts/InputMono-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/InputMono-Regular.woff") format("woff"), url("../fonts/InputMono-Regular.ttf") format("truetype");
11+
font-weight: normal;
12+
font-style: normal; }
13+
@font-face {
14+
font-family: 'din';
15+
src: url("../fonts/DIN17SBOP-Regular.eot");
16+
src: url("../fonts/DIN17SBOP-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/DIN17SBOP-Regular.woff") format("woff"), url("../fonts/DIN17SBOP-Regular.ttf") format("truetype");
17+
font-weight: normal;
18+
font-style: normal; }
19+
@font-face {
20+
font-family: 'alrightBold';
21+
src: url("../fonts/ttfah-alrightsublpwebfontuseonly-bold-webfont.eot");
22+
src: url("../fonts/ttfah-alrightsublpwebfontuseonly-bold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/ttfah-alrightsublpwebfontuseonly-bold-webfont.woff") format("woff"), url("../fonts/ttfah-alrightsublpwebfontuseonly-bold-webfont.ttf") format("truetype"), url("../fonts/ttfah-alrightsublpwebfontuseonly-bold-webfont.svg#alrightsublpwebfontuseonly-Bd") format("svg");
23+
font-weight: 700;
24+
font-style: normal; }
25+
* {
26+
box-sizing: border-box;
27+
text-rendering: optimizeLegibility; }
28+
29+
html, body {
30+
height: 100%;
31+
width: 100%;
32+
color: #333333;
33+
font-size: 100%;
34+
background: #ffffff;
35+
font-family: 'alrightRegular'; }
36+
37+
.container {
38+
max-width: 1020px;
39+
width: 100%;
40+
margin: 0 auto;
41+
position: relative; }
42+
43+
a {
44+
color: #169CEE;
45+
text-decoration: none;
46+
outline: 0;
47+
-webkit-transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1), text-shadow 0s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
48+
transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1), text-shadow 0s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
49+
position: relative; }
50+
a:focus {
51+
outline: 0; }
52+
a.white {
53+
color: #ffffff; }
54+
55+
/* Selection */
56+
::-moz-selection {
57+
background: #169CEE;
58+
color: #ffffff;
59+
text-shadow: none; }
60+
61+
::selection {
62+
background: #169CEE;
63+
color: #ffffff;
64+
text-shadow: none; }
65+
66+
h1 {
67+
font-size: 64px;
68+
font-family: 'alrightRegular';
69+
letter-spacing: 2px;
70+
line-height: 1.5; }
71+
@media screen and (max-width: 1020px) {
72+
h1 {
73+
font-size: 48px; } }
74+
@media screen and (max-width: 600px) {
75+
h1 {
76+
font-size: 32px; } }
77+
@media screen and (max-width: 480px) {
78+
h1 {
79+
font-size: 24px; } }
80+
81+
h2 {
82+
font-size: 20px;
83+
font-family: "alrightBold";
84+
letter-spacing: 0.2px;
85+
line-height: 24px; }
86+
@media screen and (max-width: 720px) {
87+
h2 {
88+
font-size: 16px; } }
89+
@media screen and (max-width: 480px) {
90+
h2 {
91+
font-size: 14px; } }
92+
93+
h3 {
94+
font-size: 24px;
95+
line-height: 32px;
96+
color: #169CEE;
97+
font-family: 'alrightRegular';
98+
letter-spacing: -0.2px;
99+
margin: 48px 0px 16px 0px; }
100+
h3 span {
101+
font-family: 'din';
102+
color: #E0E0EA;
103+
width: 32px;
104+
margin-right: 16px;
105+
margin-left: -48px; }
106+
107+
h4 {
108+
font-family: 'alrightRegular';
109+
font-size: 22px;
110+
letter-spacing: 0.3px;
111+
line-height: 32px;
112+
margin: 0px; }
113+
114+
h5 {
115+
font-family: 'din';
116+
font-size: 10px;
117+
text-transform: uppercase;
118+
letter-spacing: 1px;
119+
color: #ffffff;
120+
opacity: 0.6;
121+
margin-bottom: 12px;
122+
line-height: 12px; }
123+
124+
p {
125+
font-size: 16px;
126+
line-height: 24px;
127+
letter-spacing: 0.2px;
128+
margin: 0px 0px 24px 0px;
129+
color: #66637A;
130+
max-width: 720px; }
131+
132+
br {
133+
height: 24px; }
134+
135+
button, .button {
136+
font-family: "din";
137+
border-radius: 4px;
138+
outline: none;
139+
background: #169CEE;
140+
color: #ffffff;
141+
border: none;
142+
margin-right: 32px;
143+
font-size: 14px;
144+
padding: 0px 16px;
145+
height: 32px;
146+
line-height: 32px;
147+
-webkit-transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
148+
transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
149+
button.outline, .button.outline {
150+
background: transparent;
151+
border: 2px solid #169CEE;
152+
color: #169CEE; }
153+
button.outline:hover, .button.outline:hover {
154+
background: #169CEE;
155+
color: #ffffff; }
156+
157+
nav {
158+
position: absolute;
159+
z-index: 99;
160+
top: 24px;
161+
width: 100%;
162+
height: 80px;
163+
pointer-events: none; }
164+
nav .logo {
165+
height: 56px;
166+
width: 56px;
167+
margin: 12px 0px; }
168+
nav ul {
169+
float: right;
170+
margin: 0px;
171+
padding: 0px;
172+
pointer-events: all; }
173+
nav ul a {
174+
color: #ffffff;
175+
text-decoration: none; }
176+
nav ul li {
177+
font-family: "din";
178+
float: left;
179+
line-height: 80px;
180+
margin: 0px 32px 0px 0px;
181+
padding: 0px;
182+
list-style: none;
183+
color: #ffffff;
184+
font-size: 16px;
185+
cursor: pointer;
186+
letter-spacing: 0.3px; }
187+
nav ul li:last-of-type {
188+
margin: 0px; }
189+
nav ul ul {
190+
padding-left: 16px; }
191+
192+
.header {
193+
height: 480px;
194+
width: 100%;
195+
overflow: hidden; }
196+
.header .heroText {
197+
font-family: 'alrightRegular';
198+
color: #ffffff;
199+
position: fixed;
200+
top: 200px;
201+
left: 0px;
202+
text-align: center;
203+
width: 100%; }
204+
.header .heroText h1 {
205+
text-align: center;
206+
color: #ffffff; }
207+
.header .heroText h2 {
208+
font-family: 'alrightRegular';
209+
opacity: 0.6; }
210+
.header .heroText h2 .subheadSection {
211+
margin: 0px 32px; }
212+
@media screen and (max-width: 720px) {
213+
.header .heroText h2 .subheadSection {
214+
margin: 0px 24px; } }
215+
@media screen and (max-width: 480px) {
216+
.header .heroText h2 .subheadSection {
217+
margin: 0px 12px; } }
218+
.header .heroText h2 .icon {
219+
padding-right: 8px;
220+
position: relative;
221+
top: 4px;
222+
height: 24px;
223+
display: inline-block; }
224+
225+
svg {
226+
height: 100%;
227+
width: 100%; }
228+
svg g {
229+
width: 100%; }
230+
231+
.wrapper {
232+
width: 100%;
233+
background: #ffffff; }
234+
235+
section {
236+
margin-bottom: 16px;
237+
float: left;
238+
position: relative;
239+
width: 100%; }
240+
section:last-of-type {
241+
margin-bottom: 128px; }
242+
243+
.container {
244+
padding: 0px 32px; }
245+
246+
.repo {
247+
margin-bottom: 32px;
248+
background: #ffffff;
249+
float: left;
250+
border-radius: 4px;
251+
min-width: 240px;
252+
border: 1px solid #E0E0EA;
253+
width: 33.333333%;
254+
margin-right: 0px;
255+
width: calc(33.333333% - 24px);
256+
margin-right: calc(36px); }
257+
.repo:nth-of-type(3n) {
258+
margin-right: 0px; }
259+
@media screen and (max-width: 1020px) {
260+
.repo:nth-of-type(3n) {
261+
margin-right: 36px; } }
262+
.repo h4 {
263+
color: #66637A; }
264+
265+
.SDKLogo {
266+
height: 48px;
267+
position: absolute;
268+
top: 20px;
269+
right: 16px; }
270+
271+
.repoTitle {
272+
padding: 16px;
273+
background: rgba(22, 156, 238, 0.03);
274+
position: relative; }
275+
.repoTitle p {
276+
margin: 8px 0px 0px 0px;
277+
opacity: 0.45;
278+
font-size: 14px;
279+
font-family: "din";
280+
line-height: 16px; }
281+
.repoTitle p span {
282+
margin-right: 24px; }
283+
.repoTitle p img {
284+
height: 14px;
285+
margin-right: 4px;
286+
position: relative;
287+
top: 1px; }
288+
289+
.repoLink {
290+
height: 48px;
291+
border-top: 1px solid #E0E0EA;
292+
margin-top: -2px;
293+
position: relative;
294+
cursor: pointer; }
295+
.repoLink a {
296+
border-bottom: 1px solid #E0E0EA; }
297+
.repoLink:first-of-type {
298+
margin-top: 0px; }
299+
.repoLink p {
300+
line-height: 46px;
301+
padding: 0px 16px;
302+
color: #66637A; }
303+
.repoLink:hover:after {
304+
opacity: 1; }
305+
.repoLink:after {
306+
-webkit-transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
307+
transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
308+
content: "";
309+
position: absolute;
310+
right: 12px;
311+
top: 12px;
312+
width: 24px;
313+
height: 24px;
314+
background: url("../img/arrowRight.svg") no-repeat center;
315+
background-size: 100% auto;
316+
opacity: 0.18; }
317+
318+
.repoDescription {
319+
border-top: 1px solid #E0E0EA;
320+
border-bottom: 1px solid #E0E0EA;
321+
height: 104px;
322+
overflow: hidden;
323+
text-overflow: ellipsis;
324+
border-bottom: 16px #ffffff solid; }
325+
.repoDescription p {
326+
overflow: hidden;
327+
color: #66637A;
328+
padding: 16px;
329+
margin: 0px;
330+
opacity: 0.5; }
331+
332+
.repoButton {
333+
padding: 16px;
334+
background: rgba(22, 156, 238, 0.03);
335+
border-top: 1px solid #E0E0EA;
336+
margin-top: -1px; }
337+
.repoButton button {
338+
width: 100%; }
339+
340+
.community h3, .community p {
341+
text-align: center;
342+
max-width: 520px;
343+
margin-left: auto;
344+
margin-right: auto; }
345+
346+
footer {
347+
float: left;
348+
height: 240px;
349+
width: 100%; }
350+
footer svg {
351+
height: 240px; }
352+
footer .container {
353+
position: relative; }
354+
footer .socialLinks p, footer .needHelp p {
355+
margin-bottom: 0px;
356+
line-height: 32px; }
357+
footer .socialLinks {
358+
position: absolute;
359+
top: 56px;
360+
right: 32px;
361+
width: 50%;
362+
z-index: 3; }
363+
footer .socialLinks h5 {
364+
text-align: right; }
365+
footer .socialLinks .socialIcons {
366+
float: right;
367+
margin-top: 2px;
368+
margin-right: -8px; }
369+
footer .socialLinks .socialIcons img {
370+
cursor: pointer;
371+
margin-left: 2px;
372+
-webkit-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
373+
transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
374+
footer .socialLinks .socialIcons img:hover {
375+
-webkit-transform: scale(1.1);
376+
-ms-transform: scale(1.1);
377+
transform: scale(1.1); }
378+
@media screen and (max-width: 480px) {
379+
footer .socialLinks {
380+
top: 132px;
381+
left: 32px; }
382+
footer .socialLinks h5 {
383+
text-align: left; }
384+
footer .socialLinks .socialIcons {
385+
float: left;
386+
margin-right: 0px;
387+
margin-left: -6px; } }
388+
footer .needHelp {
389+
position: absolute;
390+
top: 56px;
391+
left: 32px;
392+
width: 50%;
393+
z-index: 3; }
394+
@media screen and (max-width: 480px) {
395+
footer .needHelp {
396+
top: 16px; } }

0 commit comments

Comments
 (0)