From c00f8c6aeeee90ac2e1eed105f07383b10e7af31 Mon Sep 17 00:00:00 2001
From: 0xfff <0xfff@protonmail.com>
Date: Sun, 6 Nov 2016 20:21:52 +0100
Subject: [PATCH] [Update] Merchants/Team: Style Sections / Add more rows for
 merchant member list

---
 merchants/index.html   | 17 ++++++++++-------
 src/scss/_member.scss  | 23 +++++++++++++++++++++--
 src/scss/_section.scss | 25 +++++++++++++++++++++++++
 team/index.html        | 10 +++++-----
 4 files changed, 61 insertions(+), 14 deletions(-)

diff --git a/merchants/index.html b/merchants/index.html
index d6dcb9c..6a2021d 100644
--- a/merchants/index.html
+++ b/merchants/index.html
@@ -8,24 +8,27 @@ description: pages.merchants.description
 
 <div class="page page--team">
 
-	<section class="section section--claim">
+	<section class="section section--intro-lead">
 
 		<div class="section__content content">
-			<div>
-				<h1>{% t pages.merchants.debit-cards-heading %}<a class="permalink" title="Permalink" id="social"></a></h1>
+			<div class="section__intro">
+				<h2 class="section__title">{% t pages.merchants.debit-cards-heading %}<!-- <a class="permalink" title="Permalink" id="social"></a> --></h1>
 			</div>
-			<ul class="member-list">
+
+			<ul class="member-list member-list--merchants">
 				{% for merchant in site.data.merchants-stores %}
 					{% include merchant-list.html %}
 				{% endfor %}
 			</ul>
 		</div>
+	</section>
+	<section class="section section--intro-lead">
 
 		<div class="section__content content">
-			<div>
-				<h1>{% t pages.merchants.stores-heading %}<a class="permalink" title="Permalink" id="social"></a></h1>
+			<div class="section__intro">
+				<h2 class="section__title">{% t pages.merchants.stores-heading %}<!-- <a class="permalink" title="Permalink" id="social"></a> --></h1>
 			</div>
-			<ul class="member-list">
+			<ul class="member-list member-list--merchants">
 				{% for merchant in site.data.merchants-stores %}
 					{% include merchant-list.html %}
 				{% endfor %}
diff --git a/src/scss/_member.scss b/src/scss/_member.scss
index 4950df0..039baad 100644
--- a/src/scss/_member.scss
+++ b/src/scss/_member.scss
@@ -21,11 +21,13 @@ $m: 'member';
 
 	&__name {
 		@include font-claim();
-		color: $color-blue;
+		// color: $color-blue;
+		margin-bottom: 5px;
 	}
 
 	&__title {
-		margin-bottom: 20px;
+		margin-bottom: 10px;
+		color: $color-gray-dark;
 	}
 
 	&__description {
@@ -61,5 +63,22 @@ $m: 'member';
 				width: 33.3%;
 			}
 		}
+
+		&--merchants {
+			.#{$m} {
+				@include mq($from: extrasmall) {
+					width: 50%;
+				}
+				@include mq($from: small) {
+					width: 33.3%;
+				}
+				@include mq($from: medium) {
+					width: 25%;
+				}
+				@include mq($from: large) {
+					width: 20%;
+				}
+			}
+		}
 	}
 }
diff --git a/src/scss/_section.scss b/src/scss/_section.scss
index e92b04e..a234f7b 100644
--- a/src/scss/_section.scss
+++ b/src/scss/_section.scss
@@ -11,6 +11,31 @@ $m: 'section';
 		margin: 0 auto;
 	}
 
+	&--intro-lead {
+		text-align: center;
+		.#{$m} {
+			&__icon {
+				display: inline-block;
+			}
+			&__title {
+				@include font-title-xlarge();
+				margin-bottom: 10px;
+			}
+			&__lead {
+				display: inline-block;
+				@include font-lead();
+				max-width: 500px;
+				color: $color-gray-dark;
+			}
+			&__intro {
+				margin-bottom: 50px;
+			}
+		}
+		.member-list {
+			margin-top: 40px;
+		}
+	}
+
 	&--claim {
 		text-align: center;
 		.#{$m} {
diff --git a/team/index.html b/team/index.html
index a6edeb8..3a1fa18 100644
--- a/team/index.html
+++ b/team/index.html
@@ -8,13 +8,13 @@ description: pages.team.description
 
 <div class="page page--team">
 
-	<section class="section section--claim">
+	<section class="section section--intro-lead">
 
 		<div class="section__content content">
-			<div>
-				<h1>{% t pages.team.core-heading %}<a class="permalink" title="Permalink" id="social"></a></h1>
+			<div class="section__intro">
+				<h1 class="section__title">{% t pages.team.core-heading %}<!-- <a class="permalink" title="Permalink" id="social"></a> --></h1>
 
-				{% tmd pages.team.core-text %}
+				<div class="section__lead">{% tmd pages.team.core-text %}</div>
 			</div>
 			<ul class="member-list">
 				{% for member in site.data.team %}
@@ -25,7 +25,7 @@ description: pages.team.description
 
 		<div class="section__content content">
 			<div>
-				<h2>{% t pages.community.social-heading %}<a class="permalink" title="Permalink" id="social"></a></h2>
+				<h2 class="section__title">{% t pages.community.social-heading %}<!-- <a class="permalink" title="Permalink" id="social"></a> --></h2>
 			</div>
 			<ul class="member-list">
 				{% for member in site.data.team %}