Improve candidate listing styles

source/_data/data.json

@@ -49,10 +49,11 @@
     "last": "Koolen",
     "lasti": "K",
     "occupation": "Software company manager and open-source software expert",
-    "email": "example@example.com",
+    "email": "someone.from.the.party@pirati.cz",
     "claim": "Evropská unie není vzdálená instituce žijící svým životem – jsme to my všichni. Přesto máme někdy problém se orientovat či přímo angažovat v evropské politice.",
     "party": "Pirátská strana",
     "age": "30",
+    "city": "Valašské Meziříčí",
     "position": "1"
   },
   "organization": {

source/_patterns/01-molecules/03-candidate-card/candidate-card.mustache

@@ -7,8 +7,9 @@
       </div>
       <div class="candidate-card__bio">
         <h1 class="head-heavy-xs"><a href="#" data-href="{{ link.templates-candidate-detail }}">{{ person.first }} {{ person.last }}</a></h1>
-        <a href="#" class="block font-light mb-4">{{ person.email }}</a>
-        <h2 class="head-allcaps-4xs md:head-allcaps-3xs">{{ person.occupation }}</h2>
+        <a href="#" class="candidate-card__bio-item block mb-4">{{ person.email }}</a>
+        <h2 class="candidate-card__bio-item">{{ person.occupation }}</h2>
+        <h2 class="head-allcaps-4xs mt-4">{{ person.city }}</h2>
       </div>
       <div class="candidate-card__affiliation">
         <div>{{ person.age }} let</div>

source/_patterns/01-molecules/03-candidate-table-row/candidate-table-row.mustache

@@ -2,7 +2,7 @@
   <div class="candidate-table-row__position head-allcaps-heavy-2xs text-right">{{ person.position }}</div>
   {{> atoms-basic-avatar(classes: "candidate-table-row__avatar") }}
   <div class="candidate-table-row__name head-heavy-2xs font-bold">{{ person.first }} {{ person.last }}</div>
-  <div class="candidate-table-row__bio head-allcaps-3xs">{{ person.age }} let, {{ person.occupation }}</div>
+  <div class="candidate-table-row__bio font-condensed">{{ person.age }} let, {{ person.occupation }}, {{ person.city }}</div>
   <div class="candidate-table-row__affiliation">
     {{> atoms-basic-avatar(classes: "w-6 mr-2") }}
     <span class="font-bold font-condensed">{{ person.party }}</span>

source/css/molecules/candidate-card.pcss

@@ -24,6 +24,10 @@
   @apply p-4;
 }
 
+.candidate-card__bio-item {
+  @apply font-light font-condensed;
+}
+
 .candidate-card__affiliation {
   /* No vertical padding, proper spacing guaranteed by leading-10 - we do not expect line breaks here. */
   @apply text-sm bg-grey-50 flex border-t border-b border-grey-125 leading-10;