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