From 407dcc8d22808d225feefa34f19dd27e368ef893 Mon Sep 17 00:00:00 2001
From: Kelly Dwan <ryelle@users.noreply.github.com>
Date: Sun, 27 Oct 2019 13:01:12 -0400
Subject: [PATCH] style badge grid into a grid.

---
 .../css/components/_team-badges.scss          | 36 +++++++++++++++----
 themes/wporg-5ftf/single-5ftf_pledge.php      |  2 +-
 2 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/themes/wporg-5ftf/css/components/_team-badges.scss b/themes/wporg-5ftf/css/components/_team-badges.scss
index 6316449..ecda2b5 100644
--- a/themes/wporg-5ftf/css/components/_team-badges.scss
+++ b/themes/wporg-5ftf/css/components/_team-badges.scss
@@ -2,10 +2,35 @@
  * Copied from the profiles.wordpress.org theme stylesheet.
  */
 
-.team-grid div.dashicons:before {
-	position: relative;
-	top: 2px;
-	font-size: 24px;
+.team-grid {
+	display: flex;
+	flex-wrap: wrap;
+	margin: 0;
+	list-style: none;
+	
+	li {
+		display: flex;
+		align-items: center;
+		margin: 0 0 1em;
+		width: 25%;
+		min-width: 10em;
+	}
+
+	div.dashicons {
+		margin-right: 0.5em;
+
+		&:before {
+			position: relative;
+			top: 2px;
+			font-size: 24px;
+		}
+	}
+
+	@include breakpoint( 0, $breakpoint-small ) {
+		li {
+			width: 100%;
+		}
+	}
 }
 
 .badge {
@@ -16,9 +41,6 @@
 	border-radius: 50%;
 	box-sizing: border-box;
 	position: relative;
-	//position: absolute;
-	//top: 8px;
-	//left: 0;
 }
 
 .badge-themes-reviewer {
diff --git a/themes/wporg-5ftf/single-5ftf_pledge.php b/themes/wporg-5ftf/single-5ftf_pledge.php
index c4f9520..548e7ef 100644
--- a/themes/wporg-5ftf/single-5ftf_pledge.php
+++ b/themes/wporg-5ftf/single-5ftf_pledge.php
@@ -71,7 +71,7 @@ get_header(); ?>
 							?>
 							<li>
 								<div class="badge item dashicons <?php echo esc_attr( implode( ' ', $badge_classes ) ); ?>"></div>
-								<?php echo esc_html( $team ); ?>
+								<span class="badge-label"><?php echo esc_html( $team ); ?></span>
 							</li>
 						<?php endforeach; ?>
 					</ul>