[Update] Merchants/Team: Style Sections / Add more rows for merchant member list

This commit is contained in:
0xfff 2016-11-06 20:21:52 +01:00
parent ec2c4d6c29
commit c00f8c6aee
4 changed files with 61 additions and 14 deletions

View file

@ -8,24 +8,27 @@ description: pages.merchants.description
<div class="page page--team"> <div class="page page--team">
<section class="section section--claim"> <section class="section section--intro-lead">
<div class="section__content content"> <div class="section__content content">
<div> <div class="section__intro">
<h1>{% t pages.merchants.debit-cards-heading %}<a class="permalink" title="Permalink" id="social"></a></h1> <h2 class="section__title">{% t pages.merchants.debit-cards-heading %}<!-- <a class="permalink" title="Permalink" id="social"></a> --></h1>
</div> </div>
<ul class="member-list">
<ul class="member-list member-list--merchants">
{% for merchant in site.data.merchants-stores %} {% for merchant in site.data.merchants-stores %}
{% include merchant-list.html %} {% include merchant-list.html %}
{% endfor %} {% endfor %}
</ul> </ul>
</div> </div>
</section>
<section class="section section--intro-lead">
<div class="section__content content"> <div class="section__content content">
<div> <div class="section__intro">
<h1>{% t pages.merchants.stores-heading %}<a class="permalink" title="Permalink" id="social"></a></h1> <h2 class="section__title">{% t pages.merchants.stores-heading %}<!-- <a class="permalink" title="Permalink" id="social"></a> --></h1>
</div> </div>
<ul class="member-list"> <ul class="member-list member-list--merchants">
{% for merchant in site.data.merchants-stores %} {% for merchant in site.data.merchants-stores %}
{% include merchant-list.html %} {% include merchant-list.html %}
{% endfor %} {% endfor %}

View file

@ -21,11 +21,13 @@ $m: 'member';
&__name { &__name {
@include font-claim(); @include font-claim();
color: $color-blue; // color: $color-blue;
margin-bottom: 5px;
} }
&__title { &__title {
margin-bottom: 20px; margin-bottom: 10px;
color: $color-gray-dark;
} }
&__description { &__description {
@ -61,5 +63,22 @@ $m: 'member';
width: 33.3%; 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%;
}
}
}
} }
} }

View file

@ -11,6 +11,31 @@ $m: 'section';
margin: 0 auto; 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 { &--claim {
text-align: center; text-align: center;
.#{$m} { .#{$m} {

View file

@ -8,13 +8,13 @@ description: pages.team.description
<div class="page page--team"> <div class="page page--team">
<section class="section section--claim"> <section class="section section--intro-lead">
<div class="section__content content"> <div class="section__content content">
<div> <div class="section__intro">
<h1>{% t pages.team.core-heading %}<a class="permalink" title="Permalink" id="social"></a></h1> <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> </div>
<ul class="member-list"> <ul class="member-list">
{% for member in site.data.team %} {% for member in site.data.team %}
@ -25,7 +25,7 @@ description: pages.team.description
<div class="section__content content"> <div class="section__content content">
<div> <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> </div>
<ul class="member-list"> <ul class="member-list">
{% for member in site.data.team %} {% for member in site.data.team %}