Zobrazení seznamu pracovníků do dvou sloupců

sass/main.scss

@@ -120,10 +120,8 @@ main {
 	margin: 0 auto;
 	padding: 1rem;
 
-	&.index {
-		max-width: 1200px;
-		h1 { margin: 2em 0 1em 0 }
-	}
+	&.fullwidth, &.index { max-width: 1200px }
+	&.index h1 { margin: 2em 0 1em 0 }
 
 	h1, h2, h3, h4, h5, h6 {
 		font-weight: bold;
@@ -288,40 +286,50 @@ main {
 
 	.people-list {
 
-		h1 { margin-bottom: 0 }
+		h1 { margin-bottom: -1em }
 		h2 {
-			margin: 3rem 0;
+			margin: 5rem 0 4rem 0;;
 			font-size: 1.4rem;
 			text-align: center;
 			color: #4C566A;
 		}
 
+		.group {
+			display: grid;
+			grid-template-columns: 1fr 1fr;
+			row-gap: 4rem;
+			column-gap: 2rem;
+		}
+
 		article {
 			display: flex;
-			align-items: center;
-			height: 8em;
-			margin-bottom: 3em;
+			align-items: flex-start;
 			text-align: left;
+			padding-top: 2em;
+			border-top: 5px solid #D8DEE9;
 
 			img {
-				display: block;
-				height: 100%;
+				width: 8rem;
 				margin-right: 2.5em;
 				border-radius: 50%;
 			}
 
 			.info {
-				height: 70%;
 				display: flex;
 				flex-direction: column;
-				justify-content: space-between;
 
 				.name a {
 					display: block;
 					font-weight: bold;
-					font-size: 1.5em;
+					font-size: 1.3em;
 					margin-bottom: .3em;
 				}
+				.other {
+					flex-direction: column;
+					margin-top: 1em;
+
+					div { margin-bottom: .5em }
+				}
 			}
 		}
 	}

templates/macros.html

@@ -107,24 +107,26 @@
 {% endmacro %}
 
 {% macro list_people(group) %}
-	{% for page in section.pages %}
-		{% if page.extra.group and page.extra.group == group %}
-			<article>
-				{{ macro::profile_picture(profile=page) }}
-				<div class="info">
-					<div>
-						<div class="name"><a href="{{ page.permalink }}">{{ page.title }}</a></div>
-						{% if page.extra.role %}
-							<div class="role">{{ page.extra.role }}</div>
-						{% endif %}
+	<div class="group">
+		{% for page in section.pages %}
+			{% if page.extra.group and page.extra.group == group %}
+				<article>
+					{{ macro::profile_picture(profile=page) }}
+					<div class="info">
+						<div>
+							<div class="name"><a href="{{ page.permalink }}">{{ page.title }}</a></div>
+							{% if page.extra.role %}
+								<div class="role">{{ page.extra.role }}</div>
+							{% endif %}
+						</div>
+						<div class="other">
+							{{ macro::profile_info(profile=page) }}
+						</div>
 					</div>
-					<div class="other">
-						{{ macro::profile_info(profile=page) }}
-					</div>
-				</div>
-			</article>
-		{% endif %}
-	{% endfor %}
+				</article>
+			{% endif %}
+		{% endfor %}
+	</div>
 {% endmacro %}
 
 {% macro print_profile() %}

templates/people-list.html

@@ -5,7 +5,7 @@
 {% endblock %}
 
 {% block content %}
-	<main>
+	<main class="fullwidth">
 		<section class="centering people-list">
 			<h1>{{ section.title }}</h1>
 			{{ section.content | safe }}