Port closed-source landing page over to gatsby + github pages
1
2.section-inner {
3 display: flex;
4 flex-direction: column;
5 width: 100%;
6 align-items: center;
7 max-width: 1300px;
8 padding: 75px 100px 75px 100px;
9 margin: 0px auto;
10}
11
12.section-inner > h2 {
13 margin-bottom: 50px;
14}
15
16.hero-content .title-letters {
17 display: flex;
18 flex-direction: row;
19 max-width: 100%;
20}
21
22.hero-content .title-letter {
23 margin-left: 10px;
24 margin-right: 10px;
25 height: 100px;
26}
27
28.hero-content p {
29 margin-top: 20px;
30 font-weight: 400;
31 font-size: 21px;
32 margin-bottom: 20px;
33 text-align: center;
34}
35
36.hero-content .badges {
37 display: flex;
38 flex-wrap: wrap;
39 justify-content: center;
40 margin-bottom: 75px;
41}
42
43.hero-content .badges > * {
44 margin-right: 10px;
45}
46
47.hero-content .badges:last-child {
48 margin-right: 0px;
49}
50
51.card-collection {
52 display: flex;
53 flex-direction: row;
54 justify-content: space-around;
55}
56
57.card-collection > * {
58 display: flex;
59 flex-direction: row;
60 margin-right: 10px;
61 margin-left: 10px;
62 max-width: 40%;
63 flex: 1;
64}
65
66.card-collection:first-child {
67 margin-left: 0px;
68}
69
70.card-collection:last-child {
71 margin-right: 0px;
72}
73
74.card-collection .card {
75 display: flex;
76 flex-direction: column;
77 background: white;
78 color: var(--color-dark);
79 box-shadow: 0 0 6px 0 var(--color-shadow);
80 border-radius: 10px;
81 padding: 25px;
82 flex: 1;
83}
84
85.card-collection .card h3 {
86 margin-bottom: 10px;
87}
88
89.card-collection .card span {
90 font-size: 15px;
91 line-height: 200%;
92}
93
94.card-collection .card span a {
95 color: var(--color-accent)
96}
97
98.button-group {
99 display: flex;
100 margin-top: 50px;
101 text-align: center;
102}
103
104.button-group > * {
105 margin-right: 20px;
106}
107
108.button-group:last-child {
109 margin-right: 0px;
110}
111
112.button-group .primary {
113 background-color: var(--color-dark);
114 color: white;
115 font-size: 14px;
116 border: 2px solid var(--color-dark);
117 border-radius: 8px;
118 font-weight: 700;
119 width: auto;
120 flex-shrink: 0;
121 text-transform: uppercase;
122 flex: 1;
123 margin-left: 0px;
124 margin-top: 10px;
125 padding: 15px 20px;
126}
127
128.button-group .secondary {
129 background-color: clear;
130 color: var(--color-dark);
131 font-size: 14px;
132 border: 2px solid var(--color-dark);
133 border-radius: 8px;
134 font-weight: 700;
135 width: auto;
136 flex-shrink: 0;
137 text-transform: uppercase;
138 flex: 1;
139 margin-left: 0px;
140 margin-top: 10px;
141 padding: 15px 20px;
142}
143
144section.featured-projects {
145 background-color: var(--color-light);
146}
147
148section.featured-projects > .section-inner {
149 align-items: stretch;
150}
151
152section.blog-posts {
153 background-color: white;
154 background-color: var(--color-light);
155}
156
157section.blog-posts > .section-inner {
158 align-items: stretch;
159 padding: 0px 100px 75px 100px;
160}
161
162section.cross-platform {
163 background-color: var(--color-dark);
164 color: white;
165}
166
167section.cross-platform > .section-inner {
168 align-items: stretch;
169 padding: 75px 100px 35px 100px;
170}
171
172section.cross-platform .section-inner > h2 {
173 margin-bottom: 10px;
174}
175
176.code-blocks {
177 display: flex;
178 flex-direction: row;
179 justify-content: space-around;
180 flex-wrap: wrap;
181}
182
183.code-blocks > * {
184 display: flex;
185 flex-direction: row;
186 margin: 40px 20px;
187 flex: 1;
188 min-width: 40%;
189}
190
191.code-blocks:first-child {
192 margin-left: 0px;
193}
194
195.code-blocks:last-child {
196 margin-right: 0px;
197}
198
199.code-blocks .code-block {
200 display: flex;
201 flex-direction: column;
202 background: white;
203 color: var(--color-dark);
204 box-shadow: 0 0 6px 0 var(--color-shadow);
205 border-radius: 10px;
206 overflow: hidden;
207}
208
209.code-blocks .code-block pre {
210 margin: 10px;
211 font-size: 14px;
212}
213
214.code-blocks .code-block > code {
215 background-color: var(--color-light);
216 padding: 10px;
217 padding-left: 18px;
218 font-size: 14px;
219 font-weight: bold;
220 border-bottom: 1px solid var(--color-medium);
221}
222
223
224@media (max-width: 850px) {
225 section .section-inner {
226 padding: 8.8% 10% 8.8% 10%;
227 flex-direction: column;
228 }
229
230 section.blog-posts > .section-inner {
231 padding: 0px 10% 8.8% 10%;
232 }
233
234 section.cross-platform > .section-inner {
235 padding: 8.8% 10% 8.8% 10%;
236 }
237
238 .hero-content .title-letter {
239 margin-left: 5px;
240 margin-right: 5px;
241 height: 50px;
242 }
243
244 .hero-content p {
245 font-size: 16px;
246 }
247
248 .card-collection {
249 flex-direction: column;
250 align-items: stretch;
251 }
252
253 .card-collection > * {
254 margin-right: 0px;
255 margin-left: 0px;
256 margin-top: 20px;
257 margin-bottom: 20px;
258 max-width: 100%;
259 }
260
261 .card-collection:first-child {
262 margin-top: 0px;
263 }
264
265 .card-collection:last-child {
266 margin-bottom: 0px;
267 }
268
269 .section-inner h2 {
270 margin-top: 8%;
271 margin-bottom: 5%;
272 }
273
274 .button-group {
275 align-self: stretch;
276 margin-top: 25px;
277 flex-direction: column;
278 }
279
280 .button-group > * {
281 margin-right: 0px;
282 margin-top: 20px;
283 }
284
285 .button-group:last-child {
286 margin-top: 0px;
287 }
288
289 .code-blocks > * {
290 margin: 20px 0px;
291 min-width: 100%;
292 }
293
294 .hero-content .badges {
295 margin-bottom: 8.8%;
296 }
297}