Change contact SASS into BEM format and simplify hallitus layout

2 files changed, 44 insertions, 44 deletions

diff --git a/_layouts/hallitus.html b/_layouts/hallitus.html
index 937b718..974b430 100644
--- a/_layouts/hallitus.html
+++ b/_layouts/hallitus.html
@@ -5,40 +5,38 @@ layout: page
 <section>
     {{ content }}
 
-    <div class="contact">
-        <div>
-            {% assign people = site.data[page.data].people %}
-            {% if people[0] %}
-                {% assign i = 0 %}
-                {% for person in people %}
-                    {% assign columnI = i | modulo: 2 %}
-                    {% if columnI == 0 %}
-                        <div class="section group">
-                    {% endif %}
-                        <div class="contact-inline col span_1_of_2">
-                            <div class="contact-inline">
-                                <img class="img-circle" style="max-height:200px; margin: 0 auto;" src="{{ site.url | append: site.baseurl }}/{{ person.picture }}" alt="">
-                                <h3>{{ person.post_name }}</h3>
-                                <h4>{{ person.person_name }}</h4>
-                                <div class="contact-inline-section">
-                                    {% assign email_tokens = person.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>
-                                    <i class="fa fa-phone" aria-hidden="true"></i> {{ person.phone }}<br>
-                                    <i class="fa fa-telegram" aria-hidden="true"></i> @{{ person.username }}<br>
-                                </div>
-                                <div class="contact-inline-section contact-inline-spacer">
-                                </div>
-                                <div class="contact-inline-section">
-                                    {{ person.description }}
-                                </div>
+    <div>
+        {% assign people = site.data[page.data].people %}
+        {% if people[0] %}
+            {% assign i = 0 %}
+            {% for person in people %}
+                {% assign columnI = i | modulo: 2 %}
+                {% if columnI == 0 %}
+                    <div class="section group">
+                {% endif %}
+                    <div class="contact col span_1_of_2">
+                        <div class="contact-inline">
+                            <img class="contact__photo" style="max-height:200px; margin: 0 auto;" src="{{ site.url | append: site.baseurl }}/{{ person.picture }}" alt="">
+                            <h3 class="contact__position_name contact__position_name--hallitus">{{ person.post_name }}</h3>
+                            <h4 class="contact__person_name">{{ person.person_name }}</h4>
+                            <div class="contact__section">
+                                {% assign email_tokens = person.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>
+                                <i class="fa fa-phone" aria-hidden="true"></i> {{ person.phone }}<br>
+                                <i class="fa fa-telegram" aria-hidden="true"></i> @{{ person.username }}<br>
+                            </div>
+                            <div class="contact__section contact__section--spacer">
+                            </div>
+                            <div class="contact__section">
+                                {{ person.description }}
                             </div>
                         </div>
-                    {% if columnI == 1 %}
-                        </div>
-                    {% endif %}
-                    {% assign i = i | plus: 1 %}
-                {% endfor %}
-            {% endif %}
-        </div>
+                    </div>
+                {% if columnI == 1 %}
+                    </div>
+                {% endif %}
+                {% assign i = i | plus: 1 %}
+            {% endfor %}
+        {% endif %}
     </div>
 </section>
diff --git a/_sass/_contacts.scss b/_sass/_contacts.scss
index 173c93f..2c28ff8 100644
--- a/_sass/_contacts.scss
+++ b/_sass/_contacts.scss
@@ -3,36 +3,38 @@ $contact-vspacing: 2em;
 
 .contact {
     text-align: center;
+    display: inline-block;
+    width: $content-width/2.2;
+    margin: 0 0 $contact-vspacing 0;
+    padding: 0 1em 0 1em;
 }
 
-.contact h3 {
-    margin-top: 0.2em;
+.contact__position_name {
     margin-bottom: 0;
 }
 
-.contact h4 {
+.contact__position_name--hallitus {
+    margin-top: 0.2em;
+}
+
+.contact__person_name {
     margin-top: $contact-internal-vgap;
     margin-bottom: 0;
 }
 
-.contact-inline {
-    display: inline-block;
-    width: $content-width/2.2;
-    margin: 0 0 $contact-vspacing 0;
-    padding: 0 1em 0 1em;
 }
 
-.contact-inline-section {
+.contact__section {
     margin-top: $contact-internal-vgap;
 }
 
-.contact-inline-spacer {
+.contact__section--spacer {
     border-top: 3px solid $brand-color;
     width: 20%;
     margin-left: auto;
     margin-right: auto;
 }
 
-.img-circle {
+.contact__photo {
     border-radius: 50%;
 }