Add leadership images and tweak sizing

index.html

@@ -142,69 +142,69 @@ <h1>Leadership Team</h1>
         <div id="leaders">
             <div class="leader">
                 <div class="leader-tape"></div>
-                <img src="https://via.placeholder.com/150.png"/>
+                <img src="./assets/leadership/michael.jpg" alt="Michael's photo"/>
                 <p>Michael</p>
                 <p>Van Leeuwen</p>
                 <p>President</p>
             </div>
             <div class="leader">
                 <div class="leader-tape"></div>
-                <img src="https://via.placeholder.com/150.png"/>
+                <img src="./assets/leadership/abhaya.jpg" alt="Abhaya's photo"/>
                 <p>Abhaya Tamrakar</p>
                 <p>BrickHack</p>
                 <p>Director</p>
             </div>
             <div class="leader">
                 <div class="leader-tape"></div>
-                <img src="https://via.placeholder.com/150.png"/>
+                <img src="./assets/leadership/may.jpg" alt="May's photo"/>
                 <p>May Ren</p>
                 <p>Design</p>
                 <p>Director</p>
             </div>
             <div class="leader">
                 <div class="leader-tape"></div>
-                <img src="https://via.placeholder.com/150.png"/>
+                <img src="./assets/leadership/peter.jpg" alt="Peter's photo"/>
                 <p>Peter Kos</p>
                 <p>Engineering</p>
                 <p>Director</p>
             </div>
             <div class="leader">
                 <div class="leader-tape"></div>
-                <img src="https://via.placeholder.com/150.png"/>
+                <img src="./assets/leadership/mark.jpg" alt="Mark's photo"/>
                 <p>Mark Maluenda</p>
                 <p>Community</p>
                 <p>Outreach Director</p>
             </div>
             <div class="leader">
                 <div class="leader-tape"></div>
-                <img src="https://via.placeholder.com/150.png"/>
+                <img src="./assets/leadership/olivia.jpg" alt="Olivia's photo"/>
                 <p>Olivia Simmons</p>
                 <p>Logistics</p>
                 <p>Co-Director</p>
             </div>
             <div class="leader">
                 <div class="leader-tape"></div>
-                <img src="https://via.placeholder.com/150.png"/>
+                <img src="./assets/leadership/makenna.jpg" alt="Makenna's photo"/>
                 <p>Makenna M.</p>
                 <p>Logistics</p>
                 <p>Co-Director</p>
             </div>
             <div class="leader">
                 <div class="leader-tape"></div>
-                <img src="https://via.placeholder.com/150.png"/>
+                <img src="./assets/leadership/mira.jpg" alt="Mira's photo"/>
                 <p>Mira Antolovich</p>
                 <p>Logistics</p>
                 <p>Co-Director</p>
             </div>
             <div class="leader">
                 <div class="leader-tape"></div>
-                <img src="https://via.placeholder.com/150.png"/>
+                <img src="./assets/leadership/kevin.jpg" alt="Kevin's photo"/>
                 <p>Kevin Zhou</p>
                 <p>Treasurer</p>
             </div>
             <div class="leader">
                 <div class="leader-tape"></div>
-                <img src="https://via.placeholder.com/150.png"/>
+                <img src="./assets/leadership/pardeep.jpg" alt="Pardeep's photo"/>
                 <p>Pardeep Singh</p>
                 <p>Sponsorship</p>
                 <p>Director</p>

sass/main.scss

@@ -14,6 +14,9 @@ $nav-height: 90px;
 
 $section-padding: 140px;
 
+$img-border-radius: 20px;
+$leadership-size: 220px;
+
 $wire-height: 15px;
 
 // Just to make it more semantic
@@ -211,13 +214,6 @@ nav {
         margin: 0 auto;
         padding-top: $section-padding;
 
-        // Temp for debugging numbers
-        // FIXME: Dont pull a byebug :)
-        h2 {
-            text-align: center;
-            margin-top: -20px;
-        }
-
         .slick-list {
             // Slider depends on having the overflow-x hidden,
             // CSS (per spec) doesn't allow separate overflow-y and x.
@@ -366,7 +362,7 @@ nav {
     #leaders {
         // Grid is easier than flex here
         display: grid;
-        grid-template-columns: repeat(5, 150px);
+        grid-template-columns: repeat(5, $leadership-size);
         gap: 30px;
         justify-items: center;
         justify-content: center;
@@ -375,21 +371,23 @@ nav {
 
         .leader {
 
-            width: 150px;
+            width: $leadership-size;
             text-align: center;
             margin-left: auto;
             margin-right: auto;
 
             img {
                 border-radius: 20px;
+                width: $leadership-size;
+                height: $leadership-size;
             }
 
             .leader-tape {
                 position: relative;
                 margin: 0px auto -10px auto;
                 height: 20px;
                 width: 50%;
-                background-color: rgba($red, 50%);
+                background-color: rgba($red, 60%);
             }
         }
     }