Make people_generic layout clearer

3 files changed, 64 insertions, 34 deletions

diff --git a/_layouts/people_generic.html b/_layouts/people_generic.html
index 28b73c1..515e437 100644
--- a/_layouts/people_generic.html
+++ b/_layouts/people_generic.html
@@ -8,40 +8,42 @@ layout: page
             {% assign committees = site.data[page.data].committees %}
             {% if committees[0] %}
                 {% for committee in committees %}
-                    <h2>{{ committee.name }}</h2>
-                    {% for position in committee.positions%}
-                        <h3 class="contact__position_name">{{ position.name }}</h3>
-                        <p>{{ position.description }}</p>
-                        <div>
-                            {% assign i = 0 %}
-                            {% for member in position.members %}
-                                {% assign columnI = i | modulo: 2 %}
-                                {% if columnI == 0 %}
-                                    <div class="section group">
-                                {% endif %}
-                                    <div class="contact col span_1_of_2">
-                                        {% if member.picture %}
-                                            {% assign picture_path = member.picture %}
-                                        {% else %}
-                                            {% assign picture_path = page.placeholder_img %}
-                                        {% endif %}
-                                        <img class="contact__photo" style="max-height:200px; margin: 0 auto;" src="{{ picture_path | absolute_url }}" alt="">
-                                        <h4 class="contact__person_name contact__person_name--generic">{{ member.name }}</h4>
-                                        {% if member.email %}
-                                            <div class="contact__section">
-                                                {% assign email_tokens = member.email | split: '@' %}
-                                                <i class="fa fa-envelope" aria-hidden="true"></i> <a href="mailto:{{ email_tokens[0] }}REMOVETHIS@{{ email_tokens[1] }}">{{ email_tokens[0] }}</a><br>
-                                            </div>
-                                        {% endif %}
-                                    </div>
-                                {% assign lastElement = position.members | size | minus: 1 %}
-                                {% if columnI == 1 or i == lastElement %}
-                                    </div>
-                                {% endif %}
-                                {% assign i = i | plus: 1 %}
-                            {% endfor %}
-                        </div>
-                    {% endfor %}
+                    <div class="contact_group">
+                        <h2>{{ committee.name }}</h2>
+                        {% for position in committee.positions%}
+                            <div class="contact_group__subgroup">
+                                <h3 class="contact__position_name">{{ position.name }}</h3>
+                                <p>{{ position.description }}</p>
+                                {% assign i = 0 %}
+                                {% for member in position.members %}
+                                    {% assign columnI = i | modulo: 4 %}
+                                    {% if columnI == 0 %}
+                                        <div class="section group">
+                                    {% endif %}
+                                        <div class="contact col span_1_of_4">
+                                            {% if member.picture %}
+                                                {% assign picture_path = member.picture %}
+                                            {% else %}
+                                                {% assign picture_path = page.placeholder_img %}
+                                            {% endif %}
+                                            <img class="contact__photo" style="max-height:200px; margin: 0 auto;" src="{{ picture_path | absolute_url }}" alt="">
+                                            <h4 class="contact__person_name contact__person_name--generic">{{ member.name }}</h4>
+                                            {% if member.email %}
+                                                <div class="contact__section">
+                                                    {% assign email_tokens = member.email | split: '@' %}
+                                                    <i class="fa fa-envelope" aria-hidden="true"></i> <a href="mailto:{{ email_tokens[0] }}REMOVETHIS@{{ email_tokens[1] }}">{{ email_tokens[0] }}</a><br>
+                                                </div>
+                                            {% endif %}
+                                        </div>
+                                    {% assign lastElement = position.members | size | minus: 1 %}
+                                    {% if columnI == 3 or i == lastElement %}
+                                        </div>
+                                    {% endif %}
+                                    {% assign i = i | plus: 1 %}
+                                {% endfor %}
+                            </div>
+                        {% endfor %}
+                    </div>
                 {% endfor %}
             {% endif %}
 </section>
diff --git a/_sass/_contacts.scss b/_sass/_contacts.scss
index c5ef86f..62a0a46 100644
--- a/_sass/_contacts.scss
+++ b/_sass/_contacts.scss
@@ -42,3 +42,11 @@ $contact-vspacing: 2em;
     width: 150px;
     height: 150px;
 }
+
+.contact_group {
+    margin-bottom: 3em;
+}
+
+.contact_group__subgroup {
+    margin-bottom: 1.5em;
+}
diff --git a/_sass/_grid.scss b/_sass/_grid.scss
index da3e2d9..a923e20 100644
--- a/_sass/_grid.scss
+++ b/_sass/_grid.scss
@@ -40,3 +40,23 @@
 @media only screen and (max-width: 480px) {
 	.span_2_of_2, .span_1_of_2 { width: 100%; }
 }
+
+/*  GRID OF FOUR  */
+.span_4_of_4 {
+	width: 100%;
+}
+.span_3_of_4 {
+	width: 74.6%;
+}
+.span_2_of_4 {
+	width: 49.2%;
+}
+.span_1_of_4 {
+	width: 23.8%;
+}
+
+/*  GO FULL WIDTH BELOW 480 PIXELS */
+@media only screen and (max-width: 480px) {
+	.col {  margin: 1% 0 1% 0%; }
+	.span_1_of_4, .span_2_of_4, .span_3_of_4, .span_4_of_4 { width: 100%; }
+}