Team page layout and style updates

_includes/member-list.html

@@ -15,23 +15,20 @@
 	<div class="member__name" data-mh="member-name">{{ member.name }}</div>
 	<div class="member__title" data-mh="member-title">{{ member.title }}</div>
 
-	<div class="member__description"></div>
-
 	{% if member.email %}
-	<div class="member__detail member__detail--email"><a href="mailto:{{ member.email }}">{{ member.email }}</a></div>
+	<a class="btn-icon" href="mailto:{{ member.email }}"><i class="fas fa-envelope"></i></a>
 	{% endif %}
 
 	{% if member.keybase %}
-	<div class="member__detail member__detail--pgp"><a href="{{ member.keybase }}"  target="_blank">Keybase Identity</a></div>
+	<a class="btn-icon" href="{{ member.keybase }}" target="_blank"><i class="fas fa-key"></i></a>
 	{% endif %}
 
 	{% if member.twitter %}
-	<div class="member__detail member__detail--twitter"><a href="{{ member.twitter }}" target="_blank">{{ member.twitter }}</a></div>
+	<a class="btn-icon" href="{{ member.twitter }}" target="_blank"><i class="fab fa-twitter"></i></a>
 	{% endif %}
 
 	{% if member.dashforum %}
-	<h5>{% t pages.team.forum-name %}</h5>
-	<div class="member__detail member__detail--dashforum"><a href="/forum/members{{ member.dashforum-link }}" target="_blank">{{ member.dashforum }}</a></div>
+	<a class="btn-icon" href="/forum/members{{ member.dashforum-link }}" target="_blank"><i class="fas fa-comments"></i></a>
 	{% endif %}
 
 

src/scss/_buttons.scss

@@ -88,3 +88,13 @@
 	color: $color-black !important;
 	border: 1px solid #b5b5b5
 }
+
+.btn-icon {
+	margin-right: 10px;
+	color: lighten($color-black, 40) !important;
+	transition: all .2s ease-in-out;
+	&:hover i {
+		color: lighten($color-black, 50) !important;
+		transform: scale(1.1);
+	}
+}

src/scss/_member.scss

@@ -7,7 +7,6 @@ $m: 'member';
 	&__avatar {
 		display: inline-block;
 		width: 100%;
-		max-width: 140px;
 		margin-bottom: 20px;
 	}
 	&__image-wrapper {
@@ -20,14 +19,12 @@ $m: 'member';
 	}
 
 	&__name {
-		@include font-claim();
-		// color: $color-blue;
-		margin-bottom: 5px;
-    	word-wrap: break-word;
+		font-size: $font-size-small;
+    		word-wrap: break-word;
 	}
 
 	&__title {
-		margin-bottom: 10px;
+		font-size: $font-size-micro;
 		color: $color-gray-dark;
 	}
 
@@ -55,16 +52,16 @@ $m: 'member';
 			display: inline-block;
 			max-width: 500px;
 			width: 100%;
-			padding: 0 20px;
+			padding: 20px;
 			vertical-align: top;
 			text-align:  left;
 			font-size: $font-size-base;
 
-			@include mq($from: small) {
+			@include mq($from: 500px) {
 				width: 50%;
 			}
 			@include mq($from: medium) {
-				width: 33.3%;
+				width: 25%;
 			}
 		}
 

src/scss/global/_typography.scss

@@ -3,6 +3,7 @@
 @import "../fonts/montserrat/regular";
 @import "../fonts/montserrat/medium";
 @import "../fonts/gunshipital/regular";
+@import "../icons/fontawesome-all";
 
 $font-family-body: 'Montserrat', Helvetica, Arial, "Microsoft Yahei","微软雅黑", STXihei, "华文细黑", sans-serif;
 $font-family-heading: $font-family-body;
@@ -15,6 +16,8 @@ $font-weight-medium: 500;
 $font-weight-bold: 700;
 
 $font-size-base: $font-size-base; // This is stored in the _variables.scss because it is required earlier
+$font-size-micro: 14px;
+$font-size-small: 16px;
 $font-size-base-plus: 19px;
 $font-size-medium: 24px;
 $font-size-large: 30px;