Add dynamic layout for Hallitus page

4 files changed, 85 insertions, 61 deletions

diff --git a/_layouts/hallitus.html b/_layouts/hallitus.html
new file mode 100644
index 0000000..8a5ed85
--- /dev/null
+++ b/_layouts/hallitus.html
@@ -0,0 +1,43 @@
+---
+layout: page
+---
+
+<section>
+    {{ content }}
+
+    <div class="contact">
+        <div>
+            {% if site.data.hallitus.people[0] %}
+                {% assign i = 0 %}
+                {% for person in site.data.hallitus.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>
+                        </div>
+                    {% if columnI == 1 %}
+                        </div>
+                    {% endif %}
+                    {% assign i = i | plus: 1 %}
+                {% endfor %}
+            {% endif %}
+        </div>
+    </div>
+</section>
diff --git a/_sass/_contacts.scss b/_sass/_contacts.scss
new file mode 100644
index 0000000..173c93f
--- /dev/null
+++ b/_sass/_contacts.scss
@@ -0,0 +1,38 @@
+$contact-internal-vgap: 4px;
+$contact-vspacing: 2em;
+
+.contact {
+    text-align: center;
+}
+
+.contact h3 {
+    margin-top: 0.2em;
+    margin-bottom: 0;
+}
+
+.contact h4 {
+    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 {
+    margin-top: $contact-internal-vgap;
+}
+
+.contact-inline-spacer {
+    border-top: 3px solid $brand-color;
+    width: 20%;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.img-circle {
+    border-radius: 50%;
+}
diff --git a/css/main.scss b/css/main.scss
index 6d7ed9c..737a708 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -145,5 +145,6 @@ $font-serif: 'Sintony', sans-serif;
         "layout",
         "as-theme",
         "special",
-        "syntax-highlighting"
+        "syntax-highlighting",
+        "contacts"
 ;
diff --git a/kilta/hallitus.md b/kilta/hallitus.md
index 8c4b2d1..71f3000 100644
--- a/kilta/hallitus.md
+++ b/kilta/hallitus.md
@@ -1,63 +1,5 @@
 ---
-layout: page
+layout: hallitus
 title: Hallitus
 ---
-<style>
-
-.contact {
-    text-align: center;
-}
-.contact h4 {
-    margin-top:10px;
-    margin-bottom: 10px !important;
-}
-.contact-inline {
-    display: inline-block;
-    margin: 10px;
-}
-.img-circle {
-    border-radius: 50%;
-}
-</style>
- <section>
- <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id venenatis risus. Nulla gravida laoreet ligula, quis varius augue finibus a. Aliquam rutrum sodales enim, eget eleifend justo auctor viverra. Donec pharetra, mauris non scelerisque mattis, elit ante maximus nunc, ornare commodo nulla ante vel tortor. Curabitur metus nisl</div>
- <br>
- <div class="contact">
- <div class="contact-inline">
- <h3>Puheenjohtaja</h3>
- <img class="img-circle" style="max-height:200px; margin: 0 auto;" src="https://media.licdn.com/mpr/mpr/shrinknp_200_200/AAEAAQAAAAAAAAejAAAAJDM2YTY5YmI4LTVhOWEtNGQzNy1hOWIyLWY4NjNhMjZkZGEyNw.jpg" alt="">
-<span><h4>Titta Saari</h4>
-        titta.saari@as.fi<br>puhelinumero</span>
-</div>
- <div class="contact-inline">
- <h3>Puheenjohtaja</h3>
- <img class="img-circle" style="max-height:200px; margin: 0 auto;" src="https://media.licdn.com/mpr/mpr/shrinknp_200_200/AAEAAQAAAAAAAAejAAAAJDM2YTY5YmI4LTVhOWEtNGQzNy1hOWIyLWY4NjNhMjZkZGEyNw.jpg" alt="">
-      <span><h4>Titta Saari</h4>
-        titta.saari@as.fi<br>puhelinumero</span>
-</div>
-<div class="contact-inline">
- <h3>Puheenjohtaja</h3>
- <img class="img-circle" style="max-height:200px; margin: 0 auto;" src="https://media.licdn.com/mpr/mpr/shrinknp_200_200/AAEAAQAAAAAAAAejAAAAJDM2YTY5YmI4LTVhOWEtNGQzNy1hOWIyLWY4NjNhMjZkZGEyNw.jpg" alt="">
-        <span><h4>Titta Saari</h4>
-        titta.saari@as.fi<br>puhelinumero</span>
-</div>
-<div class="contact-inline">
- <h3>Puheenjohtaja</h3>
- <img class="img-circle" style="max-height:200px; margin: 0 auto;" src="https://media.licdn.com/mpr/mpr/shrinknp_200_200/AAEAAQAAAAAAAAejAAAAJDM2YTY5YmI4LTVhOWEtNGQzNy1hOWIyLWY4NjNhMjZkZGEyNw.jpg" alt="">
-        <span><h4>Titta Saari</h4>
-        titta.saari@as.fi<br>puhelinumero</span>
-</div>
-<div class="contact-inline">
- <h3>Puheenjohtaja</h3>
- <img class="img-circle" style="max-height:200px; margin: 0 auto;" src="https://media.licdn.com/mpr/mpr/shrinknp_200_200/AAEAAQAAAAAAAAejAAAAJDM2YTY5YmI4LTVhOWEtNGQzNy1hOWIyLWY4NjNhMjZkZGEyNw.jpg" alt="">
-        <span><h4>Titta Saari</h4>
-        titta.saari@as.fi<br>puhelinumero</span>
-</div>
-<div class="contact-inline">
- <h3>Puheenjohtaja</h3>
- <img class="img-circle" style="max-height:200px; margin: 0 auto;" src="https://media.licdn.com/mpr/mpr/shrinknp_200_200/AAEAAQAAAAAAAAejAAAAJDM2YTY5YmI4LTVhOWEtNGQzNy1hOWIyLWY4NjNhMjZkZGEyNw.jpg" alt="">
-        <span><h4>Titta Saari</h4>
-        titta.saari@as.fi<br>puhelinumero</span>
-</div>
-</div> 
-</section>
\ No newline at end of file
+Hallituksen jäsenten sähköpostiosoitteet ovat muotoa hallitusvirka@as.fi. Koko hallituksen tavoittaa sähköpostiosoitteesta hallitus ät as.fi.