Candidate detail page, various fine tunings

source/_patterns/01-molecules/00-badge/basic-badge.mustache

@@ -2,7 +2,7 @@
   {{^ hideAvatar }}
     {{# avatarSizeXl }}
       {{> atoms-basic-avatar(classes: "avatar--xl badge__avatar") }}
-    {{/ avatarSizeXl}}
+    {{/ avatarSizeXl }}
     {{^ avatarSizeXl }}
       {{> atoms-basic-avatar(classes: "avatar--md badge__avatar") }}
     {{/ avatarSizeXl }}

source/_patterns/01-molecules/00-badge/condensed-badge.mustache

 <div class="badge badge--condensed {{ classes }}">
-  {{> atoms-basic-avatar(classes: "avatar--sm badge__avatar") }}
+  {{^ hideAvatar }}
+    {{# avatarSizeMd }}
+      {{> atoms-basic-avatar(classes: "avatar--md badge__avatar") }}
+    {{/ avatarSizeMd }}
+    {{^ avatarSizeMd }}
+      {{> atoms-basic-avatar(classes: "avatar--sm badge__avatar") }}
+    {{/ avatarSizeMd }}
+  {{/ hideAvatar }}
   <div class="badge__body">
-    <span class="head-heavy-xs badge__title">{{ person.first }} {{ person.last }}</span>
+    <span class="head-heavy-2xs badge__title">{{ person.first }} {{ person.last }}</span>
     {{^ hideOccupation }}
       <p class="badge__occupation">{{ occupation }}{{^ occupation }}{{ person.occupation }}{{/ occupation }}</p>
     {{/ hideOccupation }}

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

@@ -3,10 +3,10 @@
     <div class="card candidate-card__body elevation-0 hover:elevation-10 transition duration-200">
       <div class="candidate-card__avatar">
         <div class="candidate-card__position">{{ person.position }}</div>
-        {{> atoms-basic-avatar(classes: "avatar--xl avatar--bordered") }}
+        {{> atoms-basic-avatar(classes: "avatar--md md:avatar--lg avatar--bordered") }}
       </div>
       <div class="candidate-card__bio">
-        <h1 class="head-alt-base md:head-alt-sm">{{ person.first }} {{ person.last }}</h1>
+        <h1 class="head-heavy-xs">{{ person.first }} {{ person.last }}</h1>
         <div class="font-light mb-4">{{ person.email }}</div>
         <h2 class="head-allcaps-4xs md:head-allcaps-3xs">{{ person.occupation }}</h2>
       </div>

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

 <div class="candidate-table-row">
   <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-allcaps-heavy-2xs font-bold">{{ person.first }} {{ person.last }}</div>
+  <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__affiliation">
     {{> atoms-basic-avatar(classes: "w-6 mr-2") }}

source/_patterns/01-molecules/subsidiary-card/subsidiary-card.mustache

@@ -9,7 +9,7 @@
           {{> atoms-contact-line(icon: "fab fa-facebook-f text-brands-facebook", caption: "Svitavsko", classes: "font-light") }}
         </div>
       </div>
-      {{> molecules-basic-badge(hideAvatar: true, hideOccupation: true) }}
+      {{> molecules-condensed-badge(hideAvatar: true, hideOccupation: true) }}
     </div>
     <div class="hidden md:block">
       <a href="#"><i class="fas fa-chevron-right text-3xl"></i></a>

source/_patterns/02-organisms/people/people-list.mustache

-<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 row-gap-8 col-gap-8 lg:col-gap-16">
+<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 row-gap-8 col-gap-8">
   {{> molecules-basic-badge(occupation: "předseda krajského sdružení Pardubického kraje") }}
   {{> molecules-basic-badge(occupation: "1. místopředseda KS Pardubický kraj") }}
   {{> molecules-basic-badge(occupation: "2. místopředsedkyně KS Pardubický kraj") }}

source/_patterns/03-templates/article-detail.mustache

@@ -28,7 +28,7 @@
   <section class="mt-16 md:mt-24">
     <h1 class="head-alt-base md:head-alt-md pb-4">Další podobné články</h1>
     {{> organisms-article-card-list(onlyThree: true) }}
-    <div class="text-center mt-8">
+    <div class="text-center mt-8 md:mt-16">
       {{> atoms-icon-button(cta: "Zobrazit další", classes: "text-xl", icon: "fas fa-chevron-right") }}
     </div>
   </section>

source/_patterns/03-templates/candidate-detail.mustache

+{{> organisms-header }}
+
+<article class="hero hero--image pt-24 pb-24 lg:pt-40 pb-24 candidate-detail__hero {{ classes }}" style="--image-url: url({{ img.landscape-16x9-fullhd.src }})">
+  <div class="container container--default text-center lg:text-left">
+    <h1 class="head-alt-md md:head-alt-xl">{{ person.first }} {{ person.last }}</h1>
+    <h2 class="head-xs mt-2">{{ person.occupation }}</h2>
+  </div>
+</article>
+
+<div class="container container--default py-8 lg:pb-24">
+  <main>
+    <div class="flex flex-col lg:flex-row lg:space-x-8 xl:space-x-16">
+      <section class="lg:w-3/5 xl:w-2/3">
+        {{> molecules-content-block(classes: "w-full", noStartHeadline: true) }}
+      </section>
+      <section class="lg:w-2/5 xl:w-1/3 pt-8 lg:pt-0 order-first lg:order-last candidate-detail__sidebar">
+        <div class="container-zeropad lg:card lg:elevation-10 lg:container-autopad">
+          <div class="card__body p-4 lg:p-8">
+            <div class="text-center mb-8">
+              {{> atoms-basic-avatar(classes: "avatar--2xl lg:avatar--3xl avatar--bordered candidate-detail__avatar") }}
+            </div>
+            {{> molecules-basic-social-icon-group(classes: "text-lg") }}
+            <hr />
+            <div class="flex items-center">
+              {{> atoms-basic-avatar(classes: "w-6 mr-2") }}
+              <span class="font-bold font-condensed">{{ person.party }}</span>
+            </div>
+            <hr />
+            <div class="content-block">
+              <div class="space-y-4">
+                <div>
+                  <h4>Telefon</h4>
+                  {{> atoms-contact-line(icon: "fas fa-phone", cta: "+420 777 123 123") }}
+                </div>
+                <div>
+                  <h4>Email</h4>
+                  {{> atoms-contact-line(icon: "fas fa-envelope") }}
+                </div>
+              </div>
+              <hr />
+              <h2>Asistenti</h2>
+              <div class="space-y-4 mt-4">
+                {{> molecules-condensed-badge(occupation: "1. asistent", hideOccupation: true)}}
+                {{> molecules-condensed-badge(occupation: "2. asistent", hideOccupation: true)}}
+              </div>
+              <hr />
+              <h2>Kancelář</h2>
+              <h4>Poslanecká sněmovna</h4>
+              <p>
+                Jiřího náměstí 39, 290 33 Poděbrady
+              </p>
+              <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d82007.99920528589!2d15.688131074078123!3d50.034780639742856!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x470dc94b239307b5%3A0x12d59894ccf624ae!2sPardubice!5e0!3m2!1scs!2scz!4v1589382658695!5m2!1scs!2scz" width="100%" height="300" id="mapa-mobile" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
+              <h4>Otevírací doba</h4>
+              <p>Pondělí 14:00 - 18:00 objednat se přes: kancelář-podebrady@pirati.cz nebo 778 111 462.</p>
+              <!-- Mobile divider -->
+              <hr class="block lg:hidden" />
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  </main>
+</div>
+
+{{> organisms-footer }}

source/_patterns/03-templates/contact.mustache

@@ -39,15 +39,15 @@
             <h2>Základní údaje</h2>
             <div class="space-y-4">
               <div>
-                <h6>Emailová adresa</h6>
+                <h4>Emailová adresa</h4>
                 {{> atoms-contact-line(icon: "fas fa-envelope") }}
               </div>
               <div>
-                <h6>Podatelna</h6>
+                <h4>Podatelna</h4>
                 {{> atoms-contact-line(icon: "fas fa-envelope") }}
               </div>
               <div>
-                <h6>Telefon</h6>
+                <h4>Telefon</h4>
                 {{> atoms-contact-line(icon: "fas fa-phone", cta: "+420 777 123 123") }}
               </div>
             </div>

source/_patterns/03-templates/election-program-point.mustache

@@ -11,20 +11,20 @@
       <section class="pt-8 lg:w-2/5 xl:w-1/3 lg:pt-0">
         <div class="card elevation-10">
           <div class="card__body">
-            {{> molecules-basic-badge(occupation: "Garant") }}
-            <hr class="hr--condensed">
+            {{> molecules-condensed-badge(occupation: "Garant") }}
+            <hr />
             <div class="content-block">
               <h2>Volby</h2>
               <h3>Program na radnici</h3>
               {{> atoms-linked-unordered-list }}
-              <hr class="hr--condensed">
+              <hr />
               <h3>Program pro Pardubice V</h3>
               {{> atoms-linked-unordered-list }}
-              <hr class="hr--condensed">
+              <hr />
               <h3>Povolební strategie</h3>
               <p>Přečtěte si, jak se zachováme po volbách. Nemusíte volit zajíce v pytli.</p>
               {{> atoms-icon-button(cta: "Zjistit víc", icon: "fas fa-chevron-right", classes: "btn--black btn--hoveractive btn--fullwidth md:btn--autowidth") }}
-              <hr class="hr--condensed">
+              <hr />
               <h3>Financování kampaně</h3>
               <p>Transparentní financování kampaně je pro nás samozřejmost.</p>
               {{> atoms-icon-button(cta: "Zjistit víc", icon: "fas fa-chevron-right", classes: "btn--black btn--hoveractive btn--fullwidth md:btn--autowidth") }}

source/_patterns/03-templates/pirate-center.mustache

@@ -85,9 +85,8 @@
             <p><small>Vstup do pirátského centra naleznete z boku budovy T-STRING naproti „AFI paláci“, vedle kadeřnictví. Vchod je v prostoru vjezdu na parkoviště ve vnitrobloku.</small></p>
             <hr>
             <h2>Kontakt</h2>
-            {{> molecules-condensed-badge(occupation: "Správce coworku")}}
-            {{> molecules-condensed-badge(occupation: "Produkce a program akcí", classes: "mt-4")}}
-
+            {{> molecules-condensed-badge(occupation: "Správce coworku", avatarSizeMd: true)}}
+            {{> molecules-condensed-badge(occupation: "Produkce a program akcí", classes: "mt-4", avatarSizeMd: true)}}
           </div>
         </div>
 

source/css/atoms/avatar.pcss

@@ -6,23 +6,28 @@
   }
 }
 
-.avatar--xs {
-  @apply w-12;
-}
-.avatar--sm {
-  @apply w-16;
-}
-.avatar--md {
-  @apply w-24;
-}
-.avatar--lg {
-  @apply w-28;
-}
-.avatar--xl {
-  @apply w-36;
-}
-.avatar--2xl {
-  @apply w-48;
+@responsive {
+  .avatar--xs {
+    @apply w-12;
+  }
+  .avatar--sm {
+    @apply w-20;
+  }
+  .avatar--md {
+    @apply w-24;
+  }
+  .avatar--lg {
+    @apply w-28;
+  }
+  .avatar--xl {
+    @apply w-36;
+  }
+  .avatar--2xl {
+    @apply w-48;
+  }
+  .avatar--3xl {
+    @apply w-56;
+  }
 }
 
 .avatar--bordered {

source/css/atoms/container.pcss

+.container {
+}
+
 .container--default {
   @apply max-w-screen-xl;
 }
@@ -5,3 +8,23 @@
 .container--wide {
   max-width: 1430px;
 }
+
+
+@responsive {
+  /* Removes default container padding from the element. */
+  /* @note: needs to be kept in sync with tailwind configuration */
+  .container-zeropad {
+    margin-left: -1rem;
+    margin-right: -1rem;
+
+    @screen xl {
+      margin-left: -2rem;
+      margin-right: -2rem;
+    }
+  }
+
+  .container-autopad {
+    margin-left: auto;
+    margin-right: auto;
+  }
+}

source/css/molecules/content-block.pcss

@@ -13,11 +13,18 @@
 
   h1,
   h2,
-  h3,
+  h3 {
+    margin-bottom: .4em;
+
+    &:not(:first-child) {
+      margin-top: .95em;
+    }
+  }
+
   h4,
   h5,
   h6 {
-    margin-bottom: .5em;
+    margin-bottom: .3em;
 
     &:not(:first-child) {
       margin-top: .95em;

source/css/molecules/pagination.pcss

@@ -3,5 +3,5 @@
 }
 
 .pagination-container {
-  @apply text-center py-8;
+  @apply text-center pt-16 pb-8;
 }

source/css/organisms/footer.pcss

@@ -37,7 +37,7 @@
 }
 
 .footer-contacts {
-  @apply grid grid-cols-12;
+  @apply grid grid-cols-12 gap-4;
 }
 
 .footer-contacts .footer-contacts__item {

source/css/style.pcss

@@ -49,6 +49,8 @@
 @import "./organisms/navbar.pcss";
 @import "./organisms/subnav.pcss";
 
+@import "./templates/candidate-detail.pcss";
+
 /**
 * This injects Tailwind's utility classes and any utility classes registered
 * by plugins.

source/css/templates/candidate-detail.pcss

+.candidate-detail__hero {
+  z-index: -1;
+}
+
+.candidate-detail__sidebar {
+  @apply bg-white;
+
+  @screen lg {
+    margin-top: -6rem;
+  }
+}
+
+.candidate-detail__avatar {
+  margin-top: -9rem;
+
+  @screen lg {
+    margin-top: -11rem;
+  }
+}

tailwind.config.js

@@ -96,6 +96,7 @@ module.exports = {
     },
     container: {
       center: true,
+      /* @note: needs to be kept in sync with tailwind css/atoms/container.pcss */
       padding: {
         default: '1rem',
         xl: '2rem',