Skip to content

Commit c495db6

Browse files
MichaelDeBoeySaraVieira
MichaelDeBoey
authored and
SaraVieira
committed
Cleanup homepage templates (codesandbox#2511)
* Make Docs a function component * Cleanup hompage templates
1 parent 890136e commit c495db6

File tree

6 files changed

+423
-390
lines changed

6 files changed

+423
-390
lines changed

‎packages/homepage/src/templates/_docs.elements.js‎

Lines changed: 212 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,212 @@
1+
import styled, { css } from 'styled-components';
2+
3+
import media from '../utils/media';
4+
5+
export const Container = styled.div`
6+
color: rgba(255, 255, 255, 0.9);
7+
margin-bottom: 1rem;
8+
`;
9+
10+
const cardCSS = css`
11+
${({ theme }) => css`
12+
background-color: ${theme.background};
13+
padding: 1.5rem;
14+
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
15+
border-radius: 2px;
16+
margin-bottom: 1rem;
17+
`};
18+
`;
19+
20+
export const Article = styled.div`
21+
flex: 3;
22+
23+
padding-right: 1rem;
24+
25+
${media.phone`
26+
padding-right: 0;
27+
`};
28+
`;
29+
30+
export const DocsContainer = styled.div`
31+
display: flex;
32+
33+
${media.phone`
34+
flex-direction: column;
35+
`};
36+
`;
37+
38+
export const DocsNavigation = styled.div`
39+
flex: 1;
40+
min-width: 250px;
41+
`;
42+
43+
export const DocumentationContent = styled.div`
44+
${({ theme }) => css`
45+
line-height: 1.4;
46+
color: rgba(255, 255, 255, 0.8);
47+
font-feature-settings: normal;
48+
49+
iframe {
50+
display: block;
51+
margin: auto;
52+
border: 0;
53+
outline: 0;
54+
}
55+
56+
h2 {
57+
font-family: 'Poppins', sans-serif;
58+
margin: 1.5rem 0;
59+
font-weight: 400;
60+
color: white;
61+
62+
&:first-child {
63+
margin-top: 0;
64+
}
65+
}
66+
67+
h3 {
68+
font-weight: 400;
69+
font-size: 1.25rem;
70+
color: white;
71+
margin-top: 2rem;
72+
}
73+
74+
section {
75+
${cardCSS};
76+
overflow-x: auto;
77+
}
78+
79+
iframe {
80+
margin-bottom: 1rem;
81+
}
82+
83+
code {
84+
background-color: rgba(0, 0, 0, 0.3);
85+
padding: 0.2em 0.4em;
86+
font-size: 85%;
87+
margin: 0;
88+
border-radius: 3px;
89+
}
90+
91+
code,
92+
pre {
93+
font-family: source-code-pro, Menlo, Monaco, Consolas, Courier New,
94+
monospace;
95+
}
96+
97+
*:last-child {
98+
margin-bottom: 0;
99+
}
100+
101+
.anchor {
102+
fill: ${theme.secondary};
103+
}
104+
105+
.gatsby-highlight {
106+
background-color: rgba(0, 0, 0, 0.3);
107+
padding: 0.5rem;
108+
border-radius: 4px;
109+
margin-bottom: 1rem;
110+
111+
code {
112+
background-color: transparent;
113+
padding: 0;
114+
margin: 0;
115+
font-size: 100%;
116+
height: auto !important;
117+
line-height: 20px;
118+
white-space: pre-wrap;
119+
word-break: break-word;
120+
}
121+
}
122+
123+
.token.attr-name {
124+
color: ${theme.secondary};
125+
}
126+
127+
.token.tag {
128+
color: #ec5f67;
129+
}
130+
131+
.token.string {
132+
color: #99c794;
133+
}
134+
135+
.token.keyword {
136+
color: ${theme.secondary};
137+
}
138+
139+
.token.boolean,
140+
.token.function {
141+
color: #fac863;
142+
}
143+
144+
.token.property,
145+
.token.attribute {
146+
color: ${theme.secondary};
147+
}
148+
149+
.token.comment,
150+
.token.block-comment,
151+
.token.prolog,
152+
.token.doctype,
153+
.token.cdata {
154+
color: #626466;
155+
}
156+
`};
157+
`;
158+
159+
export const Edit = styled.a`
160+
transition: 0.3s ease color;
161+
display: flex;
162+
align-items: center;
163+
position: absolute;
164+
top: 2.5rem;
165+
right: 2.5rem;
166+
color: rgba(255, 255, 255, 0.9);
167+
font-weight: 500;
168+
font-size: 1rem;
169+
text-decoration: none;
170+
171+
${media.phone`
172+
display: none;
173+
`};
174+
175+
svg {
176+
font-size: 0.875rem;
177+
color: rgba(255, 255, 255, 0.75);
178+
margin-right: 0.5rem;
179+
}
180+
181+
&:hover {
182+
color: white;
183+
}
184+
`;
185+
186+
export const Heading = styled.div`
187+
${({ theme }) => css`
188+
${cardCSS};
189+
position: relative;
190+
191+
background-image: linear-gradient(
192+
-45deg,
193+
${theme.secondary.darken(0.1)()} 0%,
194+
${theme.secondary.darken(0.3)()} 100%
195+
);
196+
padding: 2rem 2rem;
197+
color: white;
198+
`};
199+
`;
200+
201+
export const Title = styled.h1`
202+
font-family: 'Poppins', sans-serif;
203+
font-size: 2rem;
204+
font-weight: 500;
205+
`;
206+
207+
export const Description = styled.p`
208+
font-size: 1.125rem;
209+
font-weight: 400;
210+
211+
margin-bottom: 0.25rem;
212+
`;

‎packages/homepage/src/templates/_job.elements.js‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { Button } from '@codesandbox/common/lib/components/Button';
2+
import styled, { css } from 'styled-components';
3+
4+
export const Title = styled.h1`
5+
${({ theme }) => css`
6+
font-weight: 600;
7+
font-family: 'Poppins', sans-serif;
8+
font-size: 36px;
9+
margin-bottom: 2em;
10+
margin-top: 1em;
11+
padding-bottom: 0;
12+
color: ${theme.lightText};
13+
`};
14+
`;
15+
16+
export const ContentBlock = styled.div`
17+
${({ theme }) => css`
18+
h2 {
19+
font-weight: 600;
20+
font-family: 'Poppins', sans-serif;
21+
font-size: 24px;
22+
margin-top: 36px;
23+
color: ${theme.lightText};
24+
}
25+
26+
font-family: 'Open Sans', sans-serif;
27+
font-weight: 400;
28+
font-size: 18px;
29+
line-height: 1.5;
30+
color: ${theme.lightText};
31+
margin-bottom: 36px;
32+
`};
33+
`;
34+
35+
export const ApplyButton = styled(Button)`
36+
display: inline-block;
37+
font-size: 14px;
38+
line-height: 1;
39+
margin-bottom: 50px;
40+
`;

0 commit comments

Comments
 (0)