Responsive candidate card

source/_patterns/00-atoms/01-text/headings.mustache

@@ -26,9 +26,11 @@
   <div>
     <h1 class="head-allcaps-2xs">{{ headline.short }}</h1>
     <h1 class="head-allcaps-3xs">{{ headline.short }}</h1>
+    <h1 class="head-allcaps-4xs">{{ headline.short }}</h1>
   </div>
   <div>
     <h1 class="head-allcaps-heavy-2xs">{{ headline.short }}</h1>
     <h1 class="head-allcaps-heavy-3xs">{{ headline.short }}</h1>
+    <h1 class="head-allcaps-heavy-4xs">{{ headline.short }}</h1>
   </div>
 </div>

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

-<div class="card candidate-card candidate-card--shift-lg {{ classes }} elevation-10">
-  {{> atoms-basic-avatar(classes: "avatar--2xl avatar--bordered candidate-card__avatar") }}
-  <div class="card__body">
-    <h1 class="head-sm-alt">{{ headline.short }}</h1>
-    <p>{{ excerpt.short }}</p>
-  </div>
-</div>

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

 <div class="candidate-card {{ classes }}">
-  <div class="candidate-card__wrapper">
+  <div class="candidate-card__wrapper {{ wrapperClasses }}">
     <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") }}
       </div>
-      <div class="card__body">
-        <h1 class="head-alt-sm">{{ person.first }} {{ person.last }}</h1>
+      <div class="candidate-card__bio">
+        <h1 class="head-alt-base md:head-alt-sm">{{ person.first }} {{ person.last }}</h1>
         <div class="font-light mb-2">{{ person.email }}</div>
-        <h2 class="head-allcaps-3xs">{{ person.occupation }}</h2>
+        <h2 class="head-allcaps-4xs md:head-allcaps-3xs">{{ person.occupation }}</h2>
       </div>
       <div class="candidate-card__affiliation">
         <div>{{ person.age }} let</div>
@@ -17,8 +17,8 @@
           <span class="font-bold font-condensed">{{ person.party }}</span>
         </div>
       </div>
-      <div class="card__body">
-        <p class="font-light text-sm leading-snug italic mb-2">{{ person.claim }}</p>
+      <div class="card__body candidate-card__social">
+        <p class="font-light text-sm leading-snug italic mb-2 hidden md:block">{{ person.claim }}</p>
         {{> molecules-basic-social-icon-group }}
       </div>
     </div>

source/_patterns/02-organisms/01-candidates/candidate-card-list.mustache

-<div class="candidate-card-list grid-cols-5">
-  {{> molecules-candidate-card(classes: "candidate-card-list__item") }}
-  {{> molecules-candidate-card(classes: "candidate-card-list__item") }}
-  {{> molecules-candidate-card(classes: "candidate-card-list__item") }}
-  {{> molecules-candidate-card(classes: "candidate-card-list__item") }}
-  {{> molecules-candidate-card(classes: "candidate-card-list__item candidate-card-list__item--last") }}
-  {{> molecules-candidate-card(classes: "candidate-card-list__item") }}
-  {{> molecules-candidate-card(classes: "candidate-card-list__item") }}
-  {{> molecules-candidate-card(classes: "candidate-card-list__item") }}
-  {{> molecules-candidate-card(classes: "candidate-card-list__item") }}
-  {{> molecules-candidate-card(classes: "candidate-card-list__item candidate-card-list__item--last") }}
+<div class="candidate-card-list grid-cols-1 md:grid-cols-5">
+  {{> molecules-candidate-card(wrapperClasses: "candidate-card-list__item-wrapper") }}
+  {{> molecules-candidate-card(wrapperClasses: "candidate-card-list__item-wrapper") }}
+  {{> molecules-candidate-card(wrapperClasses: "candidate-card-list__item-wrapper") }}
+  {{> molecules-candidate-card(wrapperClasses: "candidate-card-list__item-wrapper") }}
+  {{> molecules-candidate-card(wrapperClasses: "candidate-card-list__item-wrapper candidate-card-list__item-wrapper--last") }}
+  {{> molecules-candidate-card(wrapperClasses: "candidate-card-list__item-wrapper") }}
+  {{> molecules-candidate-card(wrapperClasses: "candidate-card-list__item-wrapper") }}
+  {{> molecules-candidate-card(wrapperClasses: "candidate-card-list__item-wrapper") }}
+  {{> molecules-candidate-card(wrapperClasses: "candidate-card-list__item-wrapper") }}
+  {{> molecules-candidate-card(wrapperClasses: "candidate-card-list__item-wrapper  candidate-card-list__item-wrapper--last") }}
 </div>

source/_patterns/03-templates/elections-main.mustache

@@ -25,14 +25,14 @@
 
   <h1 class="head-alt-md text-center pt-8 pb-4">Kandidátka do krajských voleb</h1>
 
-  <div class="candidate-card-list grid-cols-4">
-    {{> molecules-candidate-card(classes: "candidate-card-list__item") }}
-    {{> molecules-candidate-card(classes: "candidate-card-list__item") }}
-    {{> molecules-candidate-card(classes: "candidate-card-list__item") }}
-    {{> molecules-candidate-card(classes: "candidate-card-list__item candidate-card-list__item--last") }}
-    {{> molecules-candidate-card(classes: "candidate-card-list__item") }}
-    {{> molecules-candidate-card(classes: "candidate-card-list__item") }}
-    {{> molecules-candidate-card(classes: "candidate-card-list__item") }}
+  <div class="candidate-card-list grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+    {{> molecules-candidate-card(wrapperClasses: "sm:candidate-card-list__item-wrapper") }}
+    {{> molecules-candidate-card(wrapperClasses: "sm:candidate-card-list__item-wrapper sm:candidate-card-list__item-wrapper--noborder md:candidate-card-list__item-wrapper--border") }}
+    {{> molecules-candidate-card(wrapperClasses: "sm:candidate-card-list__item-wrapper md:candidate-card-list__item-wrapper--noborder lg:candidate-card-list__item-wrapper--border") }}
+    {{> molecules-candidate-card(wrapperClasses: "sm:candidate-card-list__item-wrapper sm:candidate-card-list__item-wrapper--noborder md:candidate-card-list__item-wrapper--border lg:candidate-card-list__item-wrapper--noborder") }}
+    {{> molecules-candidate-card(wrapperClasses: "sm:candidate-card-list__item-wrapper md:candidate-card-list__item-wrapper--border") }}
+    {{> molecules-candidate-card(wrapperClasses: "sm:candidate-card-list__item-wrapper sm:candidate-card-list__item-wrapper--noborder lg:candidate-card-list__item-wrapper--border") }}
+    {{> molecules-candidate-card(wrapperClasses: "sm:candidate-card-list__item-wrapper") }}
     {{> molecules-banner(color: "bg-black", fullwidthButton: true)}}
   </div>
 
@@ -53,7 +53,7 @@
     {{> atoms-icon-button(cta: "Zobrazit vše", classes: "text-xl btn--black btn--hoveractive", icon: "fas fa-chevron-right") }}
   </div>
 
-  <div class="flex space-x-4 pt-8">
+  <div class="flex flex-col pt-8 space-y-4 md:space-y-0 md:flex-row md:space-x-4">
     {{> atoms-super-button(cta: "Povolební strategie", icon: "fa fa-chess", classes: "bg-grey-125 hover:bg-black hover:text-white w-full") }}
     {{> atoms-super-button(cta: "Financování kampaně", icon: "fa fa-calculator", classes: "bg-black text-white hover:bg-grey-125 hover:text-black w-full") }}
   </div>

source/css/atoms/heading.pcss

@@ -73,6 +73,10 @@
     @apply text-base font-condensed uppercase leading-tight;
   }
 
+  .head-allcaps-4xs {
+    @apply text-sm font-condensed uppercase leading-tight;
+  }
+
 
 
 
@@ -83,5 +87,9 @@
   .head-allcaps-heavy-3xs {
     @apply text-base font-condensed font-bold uppercase leading-tight;
   }
+
+  .head-allcaps-heavy-4xs {
+    @apply text-sm font-condensed font-bold uppercase leading-tight;
+  }
 }
 

source/css/molecules/candidate-card.pcss

-.candidate-card {
-  @apply text-center;
-  padding-top: 3rem;
+.candidate-card__body {
+  @apply grid;
+
+  grid-template-areas: "avatar bio"
+                       "affiliation affiliation"
+                       "social social";
 }
 
 .candidate-card__avatar {
-  @apply inline-block relative;
-  margin-top: -3rem;
+  @apply relative w-8 py-2;
+  grid-area: avatar;
 }
 
 .candidate-card__position {
-  @apply w-5 h-5 absolute bg-black text-white rounded-full text-xl font-normal font-alt text-center;
-  top: 1.75rem;
-  left: -0.5rem;
-  line-height: 2.5rem;
+  @apply w-4 h-4 absolute bg-black text-white text-base rounded-full font-normal font-alt text-center;
+  top: 1rem;
+  left: 0.5rem;
+  line-height: 2rem;
+}
+
+.candidate-card__bio {
+  @apply px-1 py-2;
 }
 
 .candidate-card__affiliation {
@@ -31,11 +38,45 @@
   }
 }
 
+.candidate-card__bio {
+  grid-area: bio;
+}
+
+.candidate-card__affiliation {
+  grid-area: affiliation;
+}
+
+.candidate-card__social {
+  @apply text-center;
+  grid-area: social;
+}
+
+@screen sm {
+  .candidate-card {
+    padding-top: 3rem;
+  }
+
+  .candidate-card__body {
+    @apply text-center;
+    grid-template-areas: "avatar"
+                         "bio"
+                         "affiliation"
+                         "social";
+  }
 
-.candidate-card--shift-lg {
-  margin-top: 11rem;
+  .candidate-card__bio {
+    @apply p-2;
+  }
 
   .candidate-card__avatar {
-    margin-top: -11rem;
+    @apply inline-block relative m-auto w-9 py-0;
+    margin-top: -3rem;
+  }
+
+  .candidate-card__position {
+    @apply w-5 h-5 text-xl;
+    top: 1.75rem;
+    left: -0.5rem;
+    line-height: 2.5rem;
   }
 }

source/css/organisms/candidate-card-list.pcss

@@ -2,13 +2,16 @@
   @apply grid grid-flow-row gap-0 row-gap-2;
 }
 
-.candidate-card-list__item .candidate-card__wrapper {
+@responsive {
+  .candidate-card-list__item-wrapper {
     @apply px-1 border-r border-grey-100;
   }
 
-@responsive {
-  .candidate-card-list__item--last .candidate-card__wrapper {
+  .candidate-card-list__item-wrapper--border {
+    @apply border-r;
+  }
+
+  .candidate-card-list__item-wrapper--noborder {
     @apply border-0;
   }
 }
-