Issue 5 team

_data/team.yml

@@ -1,24 +1,24 @@
 - name: Kelsey Krach
-  image: default-headshot.jpg
+  image: kelsey-200.jpg
   email: kelsey@codeforbaltimore.org
   role: Brigade Co-Captain
 
 - name: Mike Fried
-  image: default-headshot.jpg
+  image: mike-200.jpg
   email: mike@codeforbaltimore.org
   role: Brigade Co-Captain
 
 - name: Byran Connor
-  image: default-headshot.jpg
+  image: bryan-200.jpg
   email: bryan@codeforbaltimore.org
   role: Delivery Lead
 
 - name: Sean Astro
-  image: default-headshot.jpg
+  image: sean-200.jpg
   email: hello@codeforbaltimore.org
   role: Tech Lead
 
 - name: Angelina Millare
-  image: default-headshot.jpg
+  image: angelina-200.jpg
   email: angelina@codeforbaltimore.org
   role: Community Manager

_includes/pages-list.html

@@ -2,7 +2,7 @@
     <ul>
 	    {% assign pagelist = site.pages | sort: 'order'  %}
         {% for page in pagelist %}
-          {% if page.title and page.type == 'inNavBar' %}
+	        {% if page.title and page.type == 'inNavBar' %}
             <li>
 	            {% if page.nav_highlight %}
 	            <a class="btn-primary btn--small" href="{{ page.url | prepend: site.baseurl }}">{{ page.title }}</a>
@@ -11,7 +11,8 @@
 	            <a class="page-link" href="{{ page.url | prepend: site.baseurl }}">{{ page.title }}</a>
 	            {% endif %}
                           </li>
-          {% endif %}
+	        {% endif %}
+
         {% endfor %}
     </ul>
 </nav>

_includes/team-grid.html

@@ -1,5 +1,9 @@
 <ul class="team-grid">
   {% for member in site.data.team %}
-  <li><img src="{{ '/img/team/' | prepend: site.baseurl }}{{member.image}}" alt="{{member.name}}">{{member.role}}: {{member.name}}</li>
+  <li>
+	  <img src="{{ '/img/team/' | prepend: site.baseurl }}{{member.image}}" alt="{{member.name}}">
+	  <div class="team-grid__name">{{member.name}}</div>
+	  <div class="team-grid__role">{{member.role}}</div>
+  </li>
   {% endfor %}
 </ul>

_sass/_components.scss

@@ -190,19 +190,27 @@
   margin: 0 auto;
   text-align: center;
   li {
-    width: 10%;
+    width: 200px;
     display: inline-block;
     vertical-align: top;
-    text-align: left;
+    text-align: center;
     line-height: 1.2;
-    @media (max-width: 700px) {
-      width: 20%;
-    }
-    @media (max-width: 500px) {
-      width: 30%;
-    }
+	  margin: 10px;
+
   }
   img {
     padding-bottom: 0.25em;
+	  padding-top: 1em;
   }
+
+	&__name {
+		font-size: 1.2rem;
+		padding-bottom: 0.25em;
+		font-weight: bold;
+	}
+	&__role {
+		font-size: 0.938rem;
+		color: $purple-color;
+	}
+
 }