Zobrazení koordinátora dle grafického návrhu

sass/_mobile.scss

@@ -36,6 +36,15 @@ main {
 			.program { width: 100%; }
 			.program img { max-width: 100%; }
 		}
+
+		div.coordinator>div {
+			flex-direction: column;
+
+			&>div {
+				margin-top: 2em;
+				text-align: center;
+			}
+		}
 	}
 }
 

sass/style.scss

@@ -207,6 +207,30 @@ main {
 				}
 			}
 		}
+
+		div.coordinator {
+			width: 100%;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			margin-bottom: 8em;
+
+			&>div {
+				display: flex;
+				align-items: center;
+
+				img {
+					width: 10em;
+					margin: 0 2em;
+					border-radius: 50%;
+				}
+
+				ul {
+					padding: 0;
+					list-style-type: none;
+				}
+			}
+		}
 	}
 }
 

templates/shortcodes/coordinator.html

@@ -0,0 +1,19 @@
+<div class="coordinator">
+	<h3>Koordinátor</h3>
+	<div>
+		{% if image %}
+			<img src="/coordinators/{{ image }}" alt="Obrázek koordinátora">
+		{% else %}
+			<img src="/coordinators/placeholder.jpg" alt="Obrázek koordinátora">
+		{% endif %}
+		{% if email or phone %}
+			<div>
+				<strong>{{ name }}</strong>
+				<ul>
+					{% if email %}<li><a href="mailto:{{ email }}">{{ email }}</a></li>{% endif %}
+					{% if phone %}<li>{{ phone }}</li>{% endif %}
+				</ul>
+			</div>
+		{% endif %}
+	</div>
+</div>