From c2fdbc7e7e90da9978e54a0606d4ee4b6a636abb Mon Sep 17 00:00:00 2001
From: 0xfff <0xfff@protonmail.com>
Date: Mon, 14 Nov 2016 00:28:47 +0100
Subject: [PATCH] =?UTF-8?q?[Update]=C2=A0Merchants:=20Add=20grid=20and=20s?=
 =?UTF-8?q?tyles=20(WIP)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 _includes/merchant-list.html | 18 ++++----
 _includes/nav-desktop.html   |  4 +-
 merchants/index.html         | 20 ++++-----
 src/scss/_member.scss        | 25 +++++++++--
 src/scss/_merchant.scss      | 87 ++++++++++++++++++++++++++++++++++++
 src/scss/_section.scss       |  8 ++++
 6 files changed, 138 insertions(+), 24 deletions(-)
 create mode 100644 src/scss/_merchant.scss

diff --git a/_includes/merchant-list.html b/_includes/merchant-list.html
index 16e4c6b..828bf63 100644
--- a/_includes/merchant-list.html
+++ b/_includes/merchant-list.html
@@ -1,23 +1,23 @@
 <li class="member" data-mh="merchant">
 
-	<div class="merchant__avatar">
+	<div class="member__avatar">
 		{% if merchant.image %}
-		<div class="merchant__image-wrapper">
-			<a href="{{ merchant.url }}" target="_blank" class="ctabox__link">
-				<img class="merchant__image" src="/assets/img/merchants/{{ merchant.image }}" alt="{{ merchant.name }}">
+		<div class="member__image-wrapper">
+			<a href="{{ merchant.url }}" target="_blank" class="member__link">
+				<img class="member__image" src="/assets/img/merchants/{{ merchant.image }}" alt="{{ merchant.name }}">
 			</a>
 		</div>
 		{% else %}
-		<div class="merchant__image-wrapper">
-			<a href="{{ merchant.url }}" target="_blank" class="ctabox__link">
-				<img class="merchant__image" src="/assets/img/merchant_generic_logo.png" alt="{{ merchant.name }}">
+		<div class="member__image-wrapper">
+			<a href="{{ merchant.url }}" target="_blank" class="member__link">
+				<img class="member__image" src="/assets/img/merchant_generic_logo.png" alt="{{ merchant.name }}">
 			</a>
 		</div>
 		{% endif %}
 	</div>
 
-	<div class="merchant__name" data-mh="merchant-name">{{ merchant.name }}</div>
+	<div class="member__name" data-mh="merchant-name">{{ merchant.name }}</div>
 	{% if merchant.title %}
-	<div class="merchant__title" data-mh="merchant-title">{{ merchant.title }}</div>
+	<div class="member__title" data-mh="merchant-title">{{ merchant.title }}</div>
 	{% endif %}
 </li>
diff --git a/_includes/nav-desktop.html b/_includes/nav-desktop.html
index 4e7c1b5..d44e422 100644
--- a/_includes/nav-desktop.html
+++ b/_includes/nav-desktop.html
@@ -27,12 +27,12 @@
 
             {% if page.layout != 'post' %}
             <li class="nav__item nav__item--languages">
-                <a href="#" class="nav__link" style="text-transform:uppercase;">{{site.lang}} <span class="flag {% if 'en' == site.lang %}us{% else %}{{site.lang}}{% endif %}"></span></a>
+                <a href="#" class="nav__link" style="text-transform:uppercase;">{{site.lang}} <span class="flag {% if 'en' == site.lang %}gb{% else %}{{site.lang}}{% endif %}"></span></a>
                 <ul class="nav__sublist">
                     <!-- TODO: dynamically generate this list -->
 
                     <li class="nav__subitem">
-                        <a href="{{ page.url }}" class="nav__link {% if site.lang == 'en' %}is-active{% endif %}">English <span class="flag us"></span></a>
+                        <a href="{{ page.url }}" class="nav__link {% if site.lang == 'en' %}is-active{% endif %}">English <span class="flag gb"></span></a>
                     </li>
                     <li class="nav__subitem">
                         <a href="/es{{ page.url  }}" class="nav__link {% if site.lang == 'es' %}is-active{% endif %}">Español <span class="flag es"></span></a>
diff --git a/merchants/index.html b/merchants/index.html
index bdffbfd..9e352c4 100644
--- a/merchants/index.html
+++ b/merchants/index.html
@@ -8,7 +8,7 @@ description: pages.merchants.description
 
 <div class="page page--team">
 
-	<section class="section section--intro-lead">
+	<section class="section section--intro-lead section--merchants">
 		<div class="section__content content">
 			<div class="section__intro">
 				<h2 class="section__title">{% t pages.merchants.cards-heading %}<!-- <a class="permalink" title="Permalink" id="social"></a> --></h1>
@@ -21,7 +21,7 @@ description: pages.merchants.description
 		</div>
 	</section>
 
-	<section class="section section--intro-lead">
+	<section class="section section--intro-lead section--merchants">
 		<div class="section__content content">
 			<div class="section__intro">
 				<h2 class="section__title">{% t pages.merchants.email-heading %}</h1>
@@ -34,7 +34,7 @@ description: pages.merchants.description
 		</div>
 	</section>
 
-	<section class="section section--intro-lead">
+	<section class="section section--intro-lead section--merchants">
 		<div class="section__content content">
 			<div class="section__intro">
 				<h2 class="section__title">{% t pages.merchants.vpn-heading %}</h1>
@@ -47,7 +47,7 @@ description: pages.merchants.description
 		</div>
 	</section>
 
-	<section class="section section--intro-lead">
+	<section class="section section--intro-lead section--merchants">
 		<div class="section__content content">
 			<div class="section__intro">
 				<h2 class="section__title">{% t pages.merchants.hosting-heading %}</h1>
@@ -60,7 +60,7 @@ description: pages.merchants.description
 		</div>
 	</section>
 
-	<section class="section section--intro-lead">
+	<section class="section section--intro-lead section--merchants">
 		<div class="section__content content">
 			<div class="section__intro">
 				<h2 class="section__title">{% t pages.merchants.design-heading %}</h1>
@@ -73,7 +73,7 @@ description: pages.merchants.description
 		</div>
 	</section>
 
-	<section class="section section--intro-lead">
+	<section class="section section--intro-lead section--merchants">
 		<div class="section__content content">
 			<div class="section__intro">
 				<h2 class="section__title">{% t pages.merchants.gifts-heading %}</h1>
@@ -86,7 +86,7 @@ description: pages.merchants.description
 		</div>
 	</section>
 
-	<section class="section section--intro-lead">
+	<section class="section section--intro-lead section--merchants">
 		<div class="section__content content">
 			<div class="section__intro">
 				<h2 class="section__title">{% t pages.merchants.games-heading %}</h1>
@@ -99,7 +99,7 @@ description: pages.merchants.description
 		</div>
 	</section>
 
-	<section class="section section--intro-lead">
+	<section class="section section--intro-lead section--merchants">
 		<div class="section__content content">
 			<div class="section__intro">
 				<h2 class="section__title">{% t pages.merchants.casinos-heading %}</h1>
@@ -112,7 +112,7 @@ description: pages.merchants.description
 		</div>
 	</section>
 
-	<section class="section section--intro-lead">
+	<section class="section section--intro-lead section--merchants">
 		<div class="section__content content">
 			<div class="section__intro">
 				<h2 class="section__title">{% t pages.merchants.stores-heading %}</h1>
@@ -125,7 +125,7 @@ description: pages.merchants.description
 		</div>
 	</section>
 
-	<section class="section section--intro-lead">
+	<section class="section section--intro-lead section--merchants">
 		<div class="section__content content">
 			<div class="section__intro">
 				<h2 class="section__title">{% t pages.merchants.metals-heading %}</h1>
diff --git a/src/scss/_member.scss b/src/scss/_member.scss
index 039baad..8114624 100644
--- a/src/scss/_member.scss
+++ b/src/scss/_member.scss
@@ -23,6 +23,7 @@ $m: 'member';
 		@include font-claim();
 		// color: $color-blue;
 		margin-bottom: 5px;
+    	word-wrap: break-word;
 	}
 
 	&__title {
@@ -64,6 +65,9 @@ $m: 'member';
 			}
 		}
 
+		/**
+		 * Merchants (Merchantlist)
+		 */
 		&--merchants {
 			.#{$m} {
 				@include mq($from: extrasmall) {
@@ -72,11 +76,26 @@ $m: 'member';
 				@include mq($from: small) {
 					width: 33.3%;
 				}
-				@include mq($from: medium) {
+				// @include mq($from: medium) {
+				// 	width: 25%;
+				// }
+				@include mq($from: large) {
 					width: 25%;
 				}
-				@include mq($from: large) {
-					width: 20%;
+
+				margin-bottom: pxToRem(40px);
+
+				&__avatar {
+					width: 100%;
+					max-width: 100%;
+				}
+
+				&__image-wrapper {
+					padding-bottom: ((281/500)*100%);
+				}
+
+				&__name {
+					color: $color-gray-dark;
 				}
 			}
 		}
diff --git a/src/scss/_merchant.scss b/src/scss/_merchant.scss
new file mode 100644
index 0000000..53cb91e
--- /dev/null
+++ b/src/scss/_merchant.scss
@@ -0,0 +1,87 @@
+$m: 'member';
+
+.#{$m} {
+
+	margin-bottom: pxToRem(80px);
+
+	&__avatar {
+		display: inline-block;
+		width: 100%;
+		max-width: 140px;
+		margin-bottom: 20px;
+	}
+	&__image-wrapper {
+		@include overflow-image-wrapper();
+		padding-bottom: ((105/140)*100%);
+	}
+
+	&__image {
+		@include overflow-image();
+	}
+
+	&__name {
+		@include font-claim();
+		// color: $color-blue;
+		margin-bottom: 5px;
+	}
+
+	&__title {
+		margin-bottom: 10px;
+		color: $color-gray-dark;
+	}
+
+	&__description {
+		margin-bottom: 10px;
+		text-align: left;
+	}
+
+	&__detail {
+		text-align: left;
+	}
+
+	&-list {
+		font-size: 0;
+		margin: 0 pxToRem(-20px);
+		text-align: left;
+		@include mq($to: small) {
+			text-align:  left;
+		}
+
+		.#{$m} {
+			display: inline-block;
+			max-width: 500px;
+			width: 100%;
+			padding: 0 20px;
+			vertical-align: top;
+			text-align:  left;
+			font-size: $font-size-base;
+
+			@include mq($from: small) {
+				width: 50%;
+			}
+			@include mq($from: medium) {
+				width: 33.3%;
+			}
+		}
+
+		/**
+		 * Merchants (Merchantlist)
+		 */
+		&--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 328d5ab..dbb5ab7 100644
--- a/src/scss/_section.scss
+++ b/src/scss/_section.scss
@@ -36,6 +36,14 @@ $m: 'section';
 		}
 	}
 
+	&--merchants {
+		.#{$m} {
+			&__title {
+				color: $color-gray-dark;
+			}
+		}
+	}
+
 	&--claim {
 		text-align: center;
 		.#{$m} {