Skip to content

Commit e21ac8d

Browse files
alandefreitasalandefreitas
committed
responsive grid layout for the team section
1 parent bdbce51 commit e21ac8d

3 files changed

Lines changed: 59 additions & 66 deletions

File tree

‎_sass/modules/card.scss‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,5 +35,10 @@
3535

3636
.card-title {
3737
margin-bottom: $spacing--xxs;
38+
text-align: center;
3839
}
39-
}
40+
41+
.card-subtitle {
42+
text-align: center;
43+
}
44+
}

‎_sass/pages/homepage.scss‎

Lines changed: 36 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -203,7 +203,7 @@
203203
}
204204

205205
.team {
206-
background: $color--black;
206+
background: $color--gray-dark; // align with other image blocks while easing the heavy contrast
207207
padding: 75px $spacing--l 50px;
208208

209209
@include breakpoint($desktop-small) {
@@ -214,6 +214,40 @@
214214
padding: 220px 245px 185px;
215215
}
216216

217+
.grid {
218+
display: grid;
219+
grid-template-columns: 1fr;
220+
gap: $spacing--l;
221+
222+
@include breakpoint($tablet) {
223+
grid-template-columns: repeat(2, minmax(0, 1fr));
224+
}
225+
226+
@include breakpoint($desktop-small) {
227+
grid-template-columns: repeat(3, minmax(0, 1fr));
228+
}
229+
230+
@include breakpoint($desktop-medium) {
231+
grid-template-columns: repeat(4, minmax(0, 1fr));
232+
}
233+
234+
@include breakpoint($desktop-large) {
235+
grid-template-columns: repeat(5, minmax(0, 1fr));
236+
}
237+
238+
@media (min-width: 2000px) {
239+
grid-template-columns: repeat(6, minmax(0, 1fr));
240+
gap: $spacing--l;
241+
}
242+
}
243+
244+
.grid .col-third {
245+
width: 100%;
246+
margin: 0;
247+
padding: 0;
248+
display: block;
249+
}
250+
217251
.section-title {
218252
margin-bottom: $spacing--l;
219253

@@ -367,4 +401,4 @@
367401
max-width: 1345px;
368402
}
369403
}
370-
}
404+
}

‎index.html‎

Lines changed: 17 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -244,9 +244,7 @@ <h5 class='text-xs card-subtitle'>Staff Engineer</h5>
244244
<img class='card-img' src='{{ site.baseurl }}/images/people/joaquin.jpg' alt='Joaquín M López Muñoz'>
245245
</div>
246246
<span class='card-text'>
247-
<h4 class='text-m card-title'>
248-
<center>Joaquín M López Muñoz<center>
249-
</h4>
247+
<h4 class='text-m card-title'>Joaquín M López Muñoz</h4>
250248
<h5 class='text-xs card-subtitle'>Staff Engineer</h5>
251249
</span>
252250
</a>
@@ -258,9 +256,7 @@ <h5 class='text-xs card-subtitle'>Staff Engineer</h5>
258256
<img class='card-img' src='{{ site.baseurl }}/images/people/peter.jpg' alt='Peter Turcan'>
259257
</div>
260258
<span class='card-text'>
261-
<h4 class='text-m card-title'>
262-
<center>Peter Turcan<center>
263-
</h4>
259+
<h4 class='text-m card-title'>Peter Turcan</h4>
264260
<h5 class='text-xs card-subtitle'>Senior Technical Writer</h5>
265261
</span>
266262
</a>
@@ -272,9 +268,7 @@ <h5 class='text-xs card-subtitle'>Senior Technical Writer</h5>
272268
<img class='card-img' src='{{ site.baseurl }}/images/people/matt.jpg' alt='Matt Borland'>
273269
</div>
274270
<span class='card-text'>
275-
<h4 class='text-m card-title'>
276-
<center>Matt Borland<center>
277-
</h4>
271+
<h4 class='text-m card-title'>Matt Borland</h4>
278272
<h5 class='text-xs card-subtitle'>Staff Engineer</h5>
279273
</span>
280274
</a>
@@ -286,9 +280,7 @@ <h5 class='text-xs card-subtitle'>Staff Engineer</h5>
286280
<img class='card-img' src='{{ site.baseurl }}/images/people/ruben.jpg' alt='Ruben Perez'>
287281
</div>
288282
<span class='card-text'>
289-
<h4 class='text-m card-title'>
290-
<center>Ruben Perez<center>
291-
</h4>
283+
<h4 class='text-m card-title'>Ruben Perez</h4>
292284
<h5 class='text-xs card-subtitle'>Staff Engineer</h5>
293285
</span>
294286
</a>
@@ -300,9 +292,7 @@ <h5 class='text-xs card-subtitle'>Staff Engineer</h5>
300292
<img class='card-img' src='{{ site.baseurl }}/images/people/mohammad.jpg' alt='Mohammad Nejati'>
301293
</div>
302294
<span class='card-text'>
303-
<h4 class='text-m card-title'>
304-
<center>Mohammad Nejati<center>
305-
</h4>
295+
<h4 class='text-m card-title'>Mohammad Nejati</h4>
306296
<h5 class='text-xs card-subtitle'>Staff Engineer</h5>
307297
</span>
308298
</a>
@@ -314,10 +304,7 @@ <h5 class='text-xs card-subtitle'>Staff Engineer</h5>
314304
<img class='card-img' src='{{ site.baseurl }}/images/people/robert.jpg' alt='Robert Beeston'>
315305
</div>
316306
<span class='card-text'>
317-
<h4 class='text-m card-title'>
318-
<center>
319-
Robert Beeston<center>
320-
</h4>
307+
<h4 class='text-m card-title'>Robert Beeston</h4>
321308
<h5 class='text-xs card-subtitle'>Creative Director</h5>
322309
</span>
323310
</a>
@@ -329,10 +316,7 @@ <h5 class='text-xs card-subtitle'>Creative Director</h5>
329316
<img class='card-img' src='{{ site.baseurl }}/images/people/braden.jpg' alt='Braden Ganetsky'>
330317
</div>
331318
<span class='card-text'>
332-
<h4 class='text-m card-title'>
333-
<center>
334-
Braden Ganetsky<center>
335-
</h4>
319+
<h4 class='text-m card-title'>Braden Ganetsky</h4>
336320
<h5 class='text-xs card-subtitle'>Staff Engineer</h5>
337321
</span>
338322
</a>
@@ -343,10 +327,7 @@ <h5 class='text-xs card-subtitle'>Staff Engineer</h5>
343327
<img class='card-img' src='{{ site.baseurl }}/images/people/julio.jpg' alt='Julio Estrada'>
344328
</div>
345329
<span class='card-text'>
346-
<h4 class='text-m card-title'>
347-
<center>
348-
Julio Estrada<center>
349-
</h4>
330+
<h4 class='text-m card-title'>Julio Estrada</h4>
350331
<h5 class='text-xs card-subtitle'>Staff Engineer</h5>
351332
</span>
352333
</a>
@@ -357,10 +338,7 @@ <h5 class='text-xs card-subtitle'>Staff Engineer</h5>
357338
<img class='card-img' src='{{ site.baseurl }}/images/people/gennaro.jpg' alt='Gennaro'>
358339
</div>
359340
<span class='card-text'>
360-
<h4 class='text-m card-title'>
361-
<center>
362-
Gennaro Prota<center>
363-
</h4>
341+
<h4 class='text-m card-title'>Gennaro Prota</h4>
364342
<h5 class='text-xs card-subtitle'>Staff Engineer</h5>
365343
</span>
366344
</a>
@@ -371,10 +349,7 @@ <h5 class='text-xs card-subtitle'>Staff Engineer</h5>
371349
<img class='card-img' src='{{ site.baseurl }}/images/people/matheus.jpg' alt='Matheus Izvekov'>
372350
</div>
373351
<span class='card-text'>
374-
<h4 class='text-m card-title'>
375-
<center>
376-
Matheus Izvekov<center>
377-
</h4>
352+
<h4 class='text-m card-title'>Matheus Izvekov</h4>
378353
<h5 class='text-xs card-subtitle'>Staff Engineer</h5>
379354
</span>
380355
</a>
@@ -385,10 +360,7 @@ <h5 class='text-xs card-subtitle'>Staff Engineer</h5>
385360
<img class='card-img' src='{{ site.baseurl }}/images/people/mungo.jpg' alt='Mungo Gill'>
386361
</div>
387362
<span class='card-text'>
388-
<h4 class='text-m card-title'>
389-
<center>
390-
Mungo Gill<center>
391-
</h4>
363+
<h4 class='text-m card-title'>Mungo Gill</h4>
392364
<h5 class='text-xs card-subtitle'>Staff Engineer</h5>
393365
</span>
394366
</a>
@@ -399,10 +371,7 @@ <h5 class='text-xs card-subtitle'>Staff Engineer</h5>
399371
<img class='card-img' src='{{ site.baseurl }}/images/people/greg.jpg' alt='Greg Kal'>
400372
</div>
401373
<span class='card-text'>
402-
<h4 class='text-m card-title'>
403-
<center>
404-
Greg Kal<center>
405-
</h4>
374+
<h4 class='text-m card-title'>Greg Kal</h4>
406375
<h5 class='text-xs card-subtitle'>Staff Engineer</h5>
407376
</span>
408377
</a>
@@ -535,10 +504,7 @@ <h5 class='text-xs card-subtitle'>Staff Engineer</h5>
535504
<img class='card-img' src='{{ site.baseurl }}/images/people/spencer.jpg' alt='Spencer Strickland'>
536505
</div>
537506
<span class='card-text'>
538-
<h4 class='text-m card-title'>
539-
<center>
540-
Spencer Strickland<center>
541-
</h4>
507+
<h4 class='text-m card-title'>Spencer Strickland</h4>
542508
<h5 class='text-xs card-subtitle'>Staff Engineer</h5>
543509
</span>
544510
</a>
@@ -550,10 +516,7 @@ <h5 class='text-xs card-subtitle'>Staff Engineer</h5>
550516
<img class='card-img' src='{{ site.baseurl }}/images/people/kenneth.jpg' alt='Kenneth Reitz'>
551517
</div>
552518
<span class='card-text'>
553-
<h4 class='text-m card-title'>
554-
<center>
555-
Kenneth Reitz<center>
556-
</h4>
519+
<h4 class='text-m card-title'>Kenneth Reitz</h4>
557520
<h5 class='text-xs card-subtitle'>Staff Engineer</h5>
558521
</span>
559522
</a>
@@ -565,10 +528,7 @@ <h5 class='text-xs card-subtitle'>Staff Engineer</h5>
565528
<img class='card-img' src='{{ site.baseurl }}/images/people/sean.jpg' alt='Sean Baxter'>
566529
</div>
567530
<span class='card-text'>
568-
<h4 class='text-m card-title'>
569-
<center>
570-
Sean Baxter<center>
571-
</h4>
531+
<h4 class='text-m card-title'>Sean Baxter</h4>
572532
<h5 class='text-xs card-subtitle'>Staff Engineer</h5>
573533
</span>
574534
</a>
@@ -580,10 +540,7 @@ <h5 class='text-xs card-subtitle'>Staff Engineer</h5>
580540
<img class='card-img' src='{{ site.baseurl }}/images/people/fernando.jpg' alt='Fernando Pelliccioni'>
581541
</div>
582542
<span class='card-text'>
583-
<h4 class='text-m card-title'>
584-
<center>
585-
Fernando Pelliccioni<center>
586-
</h4>
543+
<h4 class='text-m card-title'>Fernando Pelliccioni</h4>
587544
<h5 class='text-xs card-subtitle'>Staff Engineer</h5>
588545
</span>
589546
</a>
@@ -606,10 +563,7 @@ <h5 class='text-xs card-subtitle'>Staff Engineer</h5>
606563
<img class='card-img' src='{{ site.baseurl }}/images/people/agustin.jpg' alt='Agustín Bergé'>
607564
</div>
608565
<span class='card-text'>
609-
<h4 class='text-m card-title'>
610-
<center>
611-
Agustín Bergé<center>
612-
</h4>
566+
<h4 class='text-m card-title'>Agustín Bergé</h4>
613567
<h5 class='text-xs card-subtitle'>Staff Engineer</h5>
614568
</span>
615569
</a>

0 commit comments

Comments
 (0)