Skip to content

Commit fa50b66

Browse files
bvaughnbvaughn
authored
Merge pull request facebook#2 from joecritch/gatsby
Added css and templates
2 parents e5534d6 + 5c43f9e commit fa50b66

32 files changed

Lines changed: 2258 additions & 0 deletions

‎docs/.ruby-version‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
2.3.0

‎www/src/css/_article.scss‎

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
.article {
2+
display: flex;
3+
margin-left: -40px;
4+
}
5+
6+
.article__main {
7+
width: calc((4.5/ 6 * 100%) + (0.5 / 6 * 100%));
8+
padding-left: 40px;
9+
}
10+
11+
.article__inner {
12+
// TODO -- calc the logic of this this magic number...
13+
padding-right: calc(8.93% + 40px);
14+
}
15+
16+
.article__header {
17+
display: flex;
18+
justify-content: space-between;
19+
align-items: baseline;
20+
}
21+
22+
.article__title {
23+
@include f-article_title;
24+
color: $c-dark;
25+
letter-spacing: -0.02em;
26+
padding-top: 80px;
27+
}
28+
29+
.article__edit_link {
30+
@include f-body;
31+
color: $c-subtle;
32+
border-color: $c-divider;
33+
transition: all 0.2s ease;
34+
transition-propery: color, border-color;
35+
36+
&::after {
37+
top: -5px;
38+
}
39+
40+
&:hover {
41+
color: $c-text;
42+
border-color: $c-text;
43+
}
44+
}
45+
46+
.article__sub {
47+
@include f-article_sub;
48+
color: $c-subtle;
49+
padding-top: 45px;
50+
}
51+
52+
.article__body {
53+
padding-top: 65px;
54+
padding-bottom: 120px;
55+
// padding-right: 40px;
56+
57+
p {
58+
@include f-panel;
59+
max-width: 590px;
60+
61+
&:not(:first-child) {
62+
padding-top: 30px;
63+
}
64+
}
65+
66+
h2 {
67+
@include f-h2;
68+
padding-top: 45px;
69+
}
70+
}
71+
72+
.article__editor {
73+
padding-top: 40px;
74+
margin-left: -35px;
75+
76+
.alt-design & {
77+
margin-right: -35px;
78+
}
79+
80+
+ p {
81+
padding-top: 35px;
82+
}
83+
}
84+
85+
.article__note {
86+
max-width: 650px;
87+
padding-top: 40px;
88+
margin-left: -25px;
89+
}
90+
91+
.article__traverse_nav {
92+
padding-right: 40px;
93+
margin-left: -999em;
94+
padding-left: 999em;
95+
background: $c-dark;
96+
color: #fff;
97+
border-color: rgba(#fff, 0.3);
98+
padding-top: 50px;
99+
padding-bottom: 50px;
100+
101+
102+
.alt-design & {
103+
margin-right: -999em;
104+
padding-right: 999em;
105+
position: relative;
106+
z-index: 1;
107+
}
108+
}
109+
110+
.article__nav {
111+
// Deduct the margin-left value from width
112+
width: calc((1.5 / 6 * 100%));
113+
// width: calc((2 / 6 * 100%) - ((0.5 / 6 * 100%) + 20px));
114+
// margin-left: calc((0.5 / 6 * 100%) + 20px);
115+
padding-left: calc((0.5 / 6 * 100%) - 20px);
116+
background-color: $c-darker;
117+
color: #fff;
118+
display: flex;
119+
align-items: stretch;
120+
121+
.alt-design & {
122+
color: inherit;
123+
background-color: transparent;
124+
}
125+
}
126+
127+
.article__nav_mid {
128+
background-color: inherit;
129+
color: inherit;
130+
margin-right: -999em;
131+
padding-right: 999em;
132+
display: flex;
133+
align-items: stretch;
134+
}
135+
136+
.article__nav_inner {
137+
padding-top: 120px;
138+
min-height: 100vh;
139+
}

‎www/src/css/_article_nav.scss‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
.article_nav {
2+
position: fixed;
3+
}
4+
5+
.article_nav__category_title {
6+
@include f-note;
7+
8+
& + & {
9+
padding-top: 30px;
10+
}
11+
}
12+
13+
.article_nav__category_title:not(.is-current) {
14+
a {
15+
color: rgba(#fff, 0.5);
16+
transition: color 0.2s ease;
17+
&:hover {
18+
color: #fff;
19+
}
20+
21+
.alt-design & {
22+
color: rgba(#1a1a1a, 0.6);
23+
24+
&:hover {
25+
color: #1a1a1a;
26+
}
27+
}
28+
}
29+
}
30+
31+
.article_nav__list {
32+
padding-top: 20px;
33+
34+
+ .article_nav__category_title {
35+
padding-top: 35px;
36+
}
37+
}

‎www/src/css/_aux_list.scss‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
.aux_list {
2+
display: flex;
3+
margin-left: -20px;
4+
}
5+
6+
.aux_list__item {
7+
padding-left: 20px;
8+
}
9+
10+
.aux_list__link {
11+
@include f-aux;
12+
padding: 5px 10px;
13+
}
14+
15+
.aux_list__btn {
16+
border-radius: 15px;
17+
background: rgba(#fff, 0.1);
18+
}

‎www/src/css/_below_nav.scss‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.below_nav {
2+
padding-top: 40px;
3+
4+
@include breakpoint("medium-to-xlarge") {
5+
padding-top: 50px;
6+
}
7+
8+
@include breakpoint("xxlarge") {
9+
padding-top: 60px;
10+
}
11+
}

‎www/src/css/_codemirror_theme.scss‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
.CodeMirror { height: auto !important; padding: 0 0 0 10px; }
2+
3+
.cm-s-react.CodeMirror { background: #ffffff; color: #777777; }
4+
.cm-s-react div.CodeMirror-selected { background: #e0e0e0; }
5+
.cm-s-react .CodeMirror-line::selection, .cm-s-react .CodeMirror-line > span::selection, .cm-s-react .CodeMirror-line > span > span::selection { background: #e0e0e0; }
6+
.cm-s-react .CodeMirror-line::-moz-selection, .cm-s-react .CodeMirror-line > span::-moz-selection, .cm-s-react .CodeMirror-line > span > span::-moz-selection { background: #e0e0e0; }
7+
.cm-s-react .CodeMirror-gutters { background: transparent; border-right: 0px; }
8+
.cm-s-react .CodeMirror-guttermarker { color: #777777; }
9+
.cm-s-react .CodeMirror-guttermarker-subtle { color: #767676; }
10+
.cm-s-react .CodeMirror-linenumber { color: #767676; margin-left: -10px; }
11+
.cm-s-react .CodeMirror-cursor { border-left: 1px solid #505050; }
12+
13+
.cm-s-react span.cm-comment { color: #8f5536; }
14+
.cm-s-react span.cm-atom { color: #aa759f; }
15+
.cm-s-react span.cm-number { color: #aa759f; }
16+
17+
.cm-s-react span.cm-attribute { }
18+
.cm-s-react span.cm-property { color: #007db8; }
19+
.cm-s-react span.cm-keyword { color: #777777; }
20+
.cm-s-react span.cm-string { color: #777777; }
21+
22+
.cm-s-react span.cm-variable { color: #d14355; }
23+
.cm-s-react span.cm-variable-2 { color: #6a9fb5; }
24+
.cm-s-react span.cm-def { color: #d14356; }
25+
.cm-s-react span.cm-bracket { color: #518400; }
26+
.cm-s-react span.cm-tag { color: #518400; }
27+
.cm-s-react span.cm-link { color: #aa759f; }
28+
.cm-s-react span.cm-error { background: #777777; color: #505050; }
29+
30+
.cm-s-react .CodeMirror-activeline-background { background: #DDDCDC; }
31+
.cm-s-react .CodeMirror-matchingbracket { text-decoration: underline; color: white !important; }
32+
33+
34+
.article .CodeMirror { height: auto !important; padding: 10px 10px 10px 0; font-size: 18px; line-height: 25px; }
35+
36+
// .article {
37+
38+
.cm-s-react.CodeMirror { background: #fff; color: inherit; }
39+
[data-readonly] .CodeMirror-linenumber { visibility: hidden; }
40+
41+
.alt-design {
42+
.article .CodeMirror { padding-top: 25px; padding-bottom: 25px; }
43+
44+
.CodeMirror::before {
45+
@include f-note;
46+
content: 'Code';
47+
display: block;
48+
background: $c-darker;
49+
color: #fff;
50+
padding: 8px 25px 7px;
51+
margin-left: -15px;
52+
position: relative;
53+
margin-right: -30px;
54+
}
55+
56+
.article .CodeMirror::before {
57+
top: -25px;
58+
}
59+
60+
61+
62+
.cm-s-react.CodeMirror { background: $c-dark; border-radius: 10px; color: #fff; -webkit-font-smoothing: antialiased; }
63+
64+
.CodeMirror-linenumber { color: #999; }
65+
.cm-s-react div.CodeMirror-selected { background: $c-darker; }
66+
.cm-s-react .CodeMirror-line::selection, .cm-s-react .CodeMirror-line > span::selection, .cm-s-react .CodeMirror-line > span > span::selection { background: $c-darker; }
67+
.cm-s-react .CodeMirror-line::-moz-selection, .cm-s-react .CodeMirror-line > span::-moz-selection, .cm-s-react .CodeMirror-line > span > span::-moz-selection { background: $c-darker; }
68+
.cm-s-react .CodeMirror-cursor { border-left: 4px solid $c-brand; }
69+
[data-readonly] > .CodeMirror .CodeMirror-cursor { display: none; }
70+
71+
// .cm-s-react span.cm-comment { color: #8f5536; }
72+
// .cm-s-react span.cm-atom { color: purple; }
73+
// .cm-s-react span.cm-number { color: #aa759f; }
74+
75+
.cm-s-react span.cm-attribute { }
76+
.cm-s-react span.cm-property { color: lighten($c-brand, 20); }
77+
.cm-s-react span.cm-keyword { color: #999; }
78+
.cm-s-react span.cm-string { color: #999; }
79+
80+
.cm-s-react span.cm-variable { color: darken($c-brand, 20); }
81+
.cm-s-react span.cm-variable-2 { color: #6a9fb5; }
82+
.cm-s-react span.cm-def { color: $c-brand; }
83+
.cm-s-react span.cm-bracket { color: #518400; }
84+
.cm-s-react span.cm-tag { color: #99c27c; }
85+
.cm-s-react span.cm-link { color: #aa759f; }
86+
.cm-s-react span.cm-error { background: #777777; color: #505050; }
87+
88+
}
89+
// }
90+
91+
92+
.home {
93+
94+
}

‎www/src/css/_cta_group.scss‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
.cta_group {
2+
display: flex;
3+
margin-left: -20px;
4+
5+
@include breakpoint("xlarge+") {
6+
margin-left: -40px;
7+
}
8+
}
9+
10+
.cta_group__item {
11+
width: 50%;
12+
padding-left: 20px;
13+
14+
@include breakpoint("xlarge+") {
15+
padding-left: 40px;
16+
}
17+
18+
&:first-child {
19+
text-align: right;
20+
}
21+
}

‎www/src/css/_cta_link.scss‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
.cta_link {
2+
@include f-btn;
3+
display: inline-block !important;
4+
color: $c-brand;
5+
padding-top: 10px;
6+
transition: color 0.2s ease-out;
7+
8+
img {
9+
margin-left: 4px;
10+
vertical-align: -1px;
11+
}
12+
13+
&:hover {
14+
color: #fff;
15+
}
16+
}

0 commit comments

Comments
 (0)