Skip to content

Commit bb9429c

Browse files
peterkospeterkos
authored
Leadershp spacing tweaks (#1012)
* Tweak leadership position spacing Signed-off-by: Peter Kos <pkos91@icloud.com> * Some minor tweaks for leadership Signed-off-by: Peter Kos <pkos91@icloud.com> * Test remove director name Signed-off-by: Peter Kos <pkos91@icloud.com> * Padding and container tweaks for leadership Signed-off-by: Peter Kos <pkos91@icloud.com>
1 parent e253d57 commit bb9429c

2 files changed

Lines changed: 104 additions & 77 deletions

File tree

‎index.html‎

Lines changed: 63 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -277,76 +277,69 @@ <h1>Frequently Asked Questions</h1>
277277
</div>
278278
</section>
279279
<section id="leadership">
280-
<h1>Leadership Team</h1>
281-
<div id="leaders">
282-
<div class="leader">
283-
<div class="leader-tape"></div>
284-
<img src="./assets/leadership/michael.jpg" alt="Michael's photo"/>
285-
<p>Michael</p>
286-
<p>Van Leeuwen</p>
287-
<p>President</p>
288-
</div>
289-
<div class="leader">
290-
<div class="leader-tape"></div>
291-
<img src="./assets/leadership/abhaya.jpg" alt="Abhaya's photo"/>
292-
<p>Abhaya Tamrakar</p>
293-
<p>BrickHack</p>
294-
<p>Director</p>
295-
</div>
296-
<div class="leader">
297-
<div class="leader-tape"></div>
298-
<img src="./assets/leadership/may.jpg" alt="May's photo"/>
299-
<p>May Ren</p>
300-
<p>Design</p>
301-
<p>Director</p>
302-
</div>
303-
<div class="leader">
304-
<div class="leader-tape"></div>
305-
<img src="./assets/leadership/peter.jpg" alt="Peter's photo"/>
306-
<p>Peter Kos</p>
307-
<p>Engineering</p>
308-
<p>Director</p>
309-
</div>
310-
<div class="leader">
311-
<div class="leader-tape"></div>
312-
<img src="./assets/leadership/mark.jpg" alt="Mark's photo"/>
313-
<p>Mark Maluenda</p>
314-
<p>Community</p>
315-
<p>Outreach Director</p>
316-
</div>
317-
<div class="leader">
318-
<div class="leader-tape"></div>
319-
<img src="./assets/leadership/olivia.jpg" alt="Olivia's photo"/>
320-
<p>Olivia Simmons</p>
321-
<p>Logistics</p>
322-
<p>Co-Director</p>
323-
</div>
324-
<div class="leader">
325-
<div class="leader-tape"></div>
326-
<img src="./assets/leadership/makenna.jpg" alt="Makenna's photo"/>
327-
<p>Makenna M.</p>
328-
<p>Logistics</p>
329-
<p>Co-Director</p>
330-
</div>
331-
<div class="leader">
332-
<div class="leader-tape"></div>
333-
<img src="./assets/leadership/mira.jpg" alt="Mira's photo"/>
334-
<p>Mira Antolovich</p>
335-
<p>Logistics</p>
336-
<p>Co-Director</p>
337-
</div>
338-
<div class="leader">
339-
<div class="leader-tape"></div>
340-
<img src="./assets/leadership/kevin.jpg" alt="Kevin's photo"/>
341-
<p>Kevin Zhou</p>
342-
<p>Treasurer</p>
343-
</div>
344-
<div class="leader">
345-
<div class="leader-tape"></div>
346-
<img src="./assets/leadership/pardeep.jpg" alt="Pardeep's photo"/>
347-
<p>Pardeep Singh</p>
348-
<p>Sponsorship</p>
349-
<p>Director</p>
280+
<div id="leadership-content">
281+
<h1>Leadership Team</h1>
282+
<div id="leaders">
283+
<div class="leader">
284+
<div class="leader-tape"></div>
285+
<img src="./assets/leadership/michael.jpg" alt="Michael's photo"/>
286+
<p>Michael Van Leeuwen</p>
287+
<p>President</p>
288+
</div>
289+
<div class="leader">
290+
<div class="leader-tape"></div>
291+
<img src="./assets/leadership/abhaya.jpg" alt="Abhaya's photo"/>
292+
<p>Abhaya Tamrakar</p>
293+
<p>BrickHack</p>
294+
</div>
295+
<div class="leader">
296+
<div class="leader-tape"></div>
297+
<img src="./assets/leadership/may.jpg" alt="May's photo"/>
298+
<p>May Ren</p>
299+
<p>Design</p>
300+
</div>
301+
<div class="leader">
302+
<div class="leader-tape"></div>
303+
<img src="./assets/leadership/peter.jpg" alt="Peter's photo"/>
304+
<p>Peter Kos</p>
305+
<p>Engineering</p>
306+
</div>
307+
<div class="leader">
308+
<div class="leader-tape"></div>
309+
<img src="./assets/leadership/mark.jpg" alt="Mark's photo"/>
310+
<p>Mark Maluenda</p>
311+
<p>Community Outreach</p>
312+
</div>
313+
<div class="leader">
314+
<div class="leader-tape"></div>
315+
<img src="./assets/leadership/olivia.jpg" alt="Olivia's photo"/>
316+
<p>Olivia Simmons</p>
317+
<p>Logistics</p>
318+
</div>
319+
<div class="leader">
320+
<div class="leader-tape"></div>
321+
<img src="./assets/leadership/makenna.jpg" alt="Makenna's photo"/>
322+
<p>Makenna M.</p>
323+
<p>Logistics</p>
324+
</div>
325+
<div class="leader">
326+
<div class="leader-tape"></div>
327+
<img src="./assets/leadership/mira.jpg" alt="Mira's photo"/>
328+
<p>Mira Antolovich</p>
329+
<p>Logistics</p>
330+
</div>
331+
<div class="leader">
332+
<div class="leader-tape"></div>
333+
<img src="./assets/leadership/kevin.jpg" alt="Kevin's photo"/>
334+
<p>Kevin Zhou</p>
335+
<p>Treasurer</p>
336+
</div>
337+
<div class="leader">
338+
<div class="leader-tape"></div>
339+
<img src="./assets/leadership/pardeep.jpg" alt="Pardeep's photo"/>
340+
<p>Pardeep Singh</p>
341+
<p>Sponsorship</p>
342+
</div>
350343
</div>
351344
</div>
352345
</section>

‎sass/main.scss‎

Lines changed: 41 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,12 @@ $nav-height: 90px;
1515
$section-padding: 140px;
1616

1717
$img-border-radius: 20px;
18-
$leadership-size: 220px;
1918

2019
$wire-height: 15px;
2120

21+
$leadership-size: 220px;
22+
$leadership-size-mobile: 180px;
23+
2224
// Just to make it more semantic
2325
$font-extrabold: 700;
2426
$font-bold: 600;
@@ -557,32 +559,33 @@ nav {
557559
}
558560

559561
#leadership {
560-
padding: $section-padding;
561562
background-color: $light-blue;
562563

563564
h1 {
564565
font-size: $title-size;
565566
}
566567

568+
#leadership-content {
569+
padding: $section-padding;
570+
}
571+
567572
#leaders {
568573
// Grid is easier than flex here
569574
display: grid;
570575
grid-template-columns: repeat(5, $leadership-size);
571-
gap: 30px;
576+
gap: 50px;
572577
justify-items: center;
573578
justify-content: center;
574-
575579
margin-top: 40px;
576580

577581
.leader {
578-
579582
width: $leadership-size;
580583
text-align: center;
581584
margin-left: auto;
582585
margin-right: auto;
583586

584587
img {
585-
border-radius: 20px;
588+
border-radius: $img-border-radius;
586589
width: $leadership-size;
587590
height: $leadership-size;
588591
}
@@ -594,6 +597,10 @@ nav {
594597
width: 50%;
595598
background-color: rgba($red, 60%);
596599
}
600+
601+
.nowrap {
602+
white-space: nowrap;
603+
}
597604
}
598605
}
599606
}
@@ -629,11 +636,38 @@ footer {
629636
}
630637
}
631638

632-
@media screen and (max-width: 1200px) {
639+
@media screen and (max-width: 1500px) {
640+
641+
section {
642+
// padding: $section-padding / 2;
643+
}
633644

634645
// Scaling idea, key is clip
635646
#shelf {
636647
width: 800px;
637648
overflow: clip;
638649
}
650+
651+
#leadership #leaders {
652+
justify-content: space-between;
653+
grid-template-columns: repeat(5, $leadership-size-mobile);
654+
width: 100%;
655+
gap: 30px;
656+
657+
.leader {
658+
width: $leadership-size-mobile;
659+
660+
img {
661+
width: $leadership-size-mobile;
662+
height: $leadership-size-mobile;
663+
}
664+
}
665+
}
666+
}
667+
668+
@media screen and (max-width: 1600px) {
669+
670+
#leadership #leaders {
671+
justify-content: space-between;
672+
}
639673
}

0 commit comments

Comments
 (0)