Various responsivity improvements

source/_patterns/00-atoms/horizontal-rule/hr.mustache

-<hr />
+<div>
+  <hr />
+</div>
+
+<div>
+  <hr class="hr--condensed" />
+</div>
+

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

-<div class="candidate-card {{ classes }}">
+<div class="candidate-card container-padding--zero sm:container-padding--auto {{ classes }}">
   <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--md md:avatar--lg avatar--bordered") }}
+        {{> atoms-basic-avatar(classes: "avatar--sm sm:avatar--lg") }}
       </div>
       <div class="candidate-card__bio">
         <h1 class="head-heavy-xs">{{ person.first }} {{ person.last }}</h1>

source/_patterns/01-molecules/sharebox/sharebox.mustache

-<div class="sharebox card elevation-10 {{ classes }}">
-  <div class="card__body">
+<div class="sharebox md:card md:elevation-10 {{ classes }}">
+  <div class="md:card__body">
     <span class="head-alt-base md:head-alt-md">Sdílení je aktem lásky</span>
 
     <div class="flex w-full space-x-4 pt-4 md:pt-8 text-center text-white">

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

-<article class="card elevation-0 bg-grey-50">
-  <div class="card__body flex space-x-8 items-start">
+<article class="card elevation-0 bg-grey-50 container-padding--zero md:container-padding--auto">
+  <div class="card__body p-4 lg:p-8 flex space-x-8 items-start">
     <img src="/images/city-banner.png" />
     <div class="space-y-4 flex-grow">
       <div>

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

-<div class="candidate-card-list grid-cols-1 md:grid-cols-5">
+<div class="candidate-card-list grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
   {{> 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") }}

source/_patterns/02-organisms/01-candidates/candidate-table-fadeout.mustache

-<div class="candidate-table candidate-table--fadeout">
+<div class="candidate-table candidate-table--fadeout container-padding--zero lg:container-padding--auto">
   {{> molecules-candidate-table-row }}
   {{> molecules-candidate-table-row }}
   {{> molecules-candidate-table-row }}

source/_patterns/02-organisms/01-candidates/candidate-table.mustache

-<div class="candidate-table">
+<div class="candidate-table container-padding--zero lg:container-padding--auto">
   {{> molecules-candidate-table-row }}
   {{> molecules-candidate-table-row }}
   {{> molecules-candidate-table-row }}

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

 {{> organisms-header }}
 
-<div class="container container--default py-8 lg:py-24">
+<div class="container container--default pt-8 lg:py-24">
   <section>
     <h1 class="head-alt-md md:head-alt-lg max-w-5xl mb-4">Aktuální témata</h1>
 

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

@@ -14,7 +14,7 @@
         {{> 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="container-padding--zero lg:card lg:elevation-10 lg:container-padding--auto">
           <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") }}

source/_patterns/03-templates/contact.mustache

 {{> organisms-header }}
 
-<div class="container container--default py-8 lg:py-24">
-  <article class="space-y-16">
-    <div class="lg:flex mt-8 space-y-16 lg:space-y-0 lg:space-x-8 xl:space-x-16">
+<div class="container container--default pt-8 lg:py-24">
+  <article class="space-y-8 lg:space-y-16">
+    <div class="lg:flex lg:mt-8 space-y-16 lg:space-y-0 lg:space-x-8 xl:space-x-16">
       <section class="lg:w-3/5 xl:w-2/3">
         <h1 class="head-alt-md md:head-alt-lg max-w-5xl mb-8">Kontaktní informace</h1>
 
@@ -34,8 +34,8 @@
         </div>
       </section>
       <section class="lg:w-2/5 xl:w-1/3 lg:pt-0">
-        <div class="card elevation-10">
-          <div class="card__body content-block">
+        <div class="lg:card lg:elevation-10">
+          <div class="lg:card__body content-block">
             <h2>Základní údaje</h2>
             <div class="space-y-4">
               <div>
@@ -75,9 +75,9 @@
       </div>
     </section>
 
-    <div class="flex flex-col lg:flex-row space-y-4 lg:space-y-0 lg:space-x-8">
-      {{> atoms-super-button(cta: "Sledujte nás na Facebooku", icon: "fab fa-facebook", classes: "bg-brands-facebook text-white w-full") }}
-      {{> atoms-super-button(cta: "Sledujte naše fórum", icon: "fa fa-comments", classes: "bg-black text-white w-full") }}
+    <div class="flex flex-col lg:flex-row lg:space-x-8">
+      {{> atoms-super-button(cta: "Sledujte nás na Facebooku", icon: "fab fa-facebook", classes: "bg-brands-facebook text-white container-padding--zero lg:container-padding--auto lg:w-full") }}
+      {{> atoms-super-button(cta: "Sledujte naše fórum", icon: "fa fa-comments", classes: "bg-black text-white container-padding--zero lg:container-padding--auto lg:w-full") }}
     </div>
   </article>
 </div>

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

@@ -2,15 +2,15 @@
 
 <div class="container container--default py-8 lg:py-24">
   <main>
-    <div class="lg:flex mt-8 lg:space-x-8 xl:space-x-16">
+    <div class="lg:flex lg:mt-8 lg:space-x-8 xl:space-x-16">
       <section class="lg:w-3/5 xl:w-2/3">
         <h1 class="head-alt-md md:head-alt-lg max-w-5xl mb-4">Řízení a organizační struktura města</h1>
         <p class="font-bold text-lg leading-normal mb-8">{{ excerpt.medium }}</p>
         {{> molecules-content-block(classes: "w-full", noStartHeadline: true) }}
       </section>
       <section class="pt-8 lg:w-2/5 xl:w-1/3 lg:pt-0">
-        <div class="card elevation-10">
-          <div class="card__body">
+        <div class="lg:card lg:elevation-10">
+          <div class="lg:card__body">
             {{> molecules-condensed-badge(occupation: "Garant") }}
             <hr />
             <div class="content-block">

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

 {{> organisms-header }}
 {{> organisms-elections-hero }}
 
-<div class="container container--default pb-24 pt-24">
+<div class="container container--default pt-8 lg:py-24">
   <div class="text-center">
     {{> molecules-binary-switch(cta1: "Kandidáti", cta2: "Program") }}
   </div>
 
-  <h1 class="head-alt-md text-center pt-24 pb-8">Kandidátka do krajských voleb</h1>
+  <h1 class="head-alt-md text-center py-8 lg:pt-24 lg:pb-8">Kandidátka do krajských voleb</h1>
 
   <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") }}
@@ -16,10 +16,10 @@
     {{> 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)}}
+    {{> molecules-banner(color: "bg-black", fullwidthButton: true, classes: "container-padding--zero sm:container-padding--auto")}}
   </div>
 
-  <div class="candidate-table candidate-table--fadeout pt-8">
+  <div class="candidate-table candidate-table--fadeout pt-8 container-padding--zero lg:container-padding--auto">
     {{> molecules-candidate-table-row }}
     {{> molecules-candidate-table-row }}
     {{> molecules-candidate-table-row }}
@@ -36,9 +36,9 @@
     {{> atoms-icon-button(cta: "Zobrazit vše", classes: "text-xl btn--black btn--hoveractive", icon: "fas fa-chevron-right") }}
   </div>
 
-  <div class="flex flex-col pt-24 space-y-8 md:space-y-0 md:flex-row md:space-x-8">
-    {{> 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 class="flex flex-col pt-8 lg:pt-24 lg:flex-row lg:space-x-8">
+    {{> atoms-super-button(cta: "Povolební strategie", icon: "fa fa-chess", classes: "bg-grey-125 hover:bg-black hover:text-white lg:w-full container-padding--zero lg:container-padding--auto") }}
+    {{> atoms-super-button(cta: "Financování kampaně", icon: "fa fa-calculator", classes: "bg-black text-white hover:bg-grey-125 hover:text-black lg:w-full container-padding--zero lg:container-padding--auto") }}
   </div>
 </div>
 

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

 {{> organisms-header }}
 {{> organisms-elections-hero }}
 
-<div class="container container--default pb-24 pt-24">
+<div class="container container--default pt-8 lg:py-24">
   <div class="text-center">
     {{> molecules-binary-switch(cta1: "Kandidáti", cta2: "Program", secondActive: true) }}
   </div>
 
-  <h1 class="head-alt-md text-center pt-24 pb-8">Volební program</h1>
+  <h1 class="head-alt-md text-center py-8 lg:pt-24 lg:pb-8">Volební program</h1>
 
   <div class="candidate-card-list grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
     {{> molecules-image-card(classes: "card--hoveractive", bodyClasses: "p-4", title: "Otevřenost a zapojení občanů" )}}
@@ -19,9 +19,9 @@
     {{> molecules-image-card(classes: "card--hoveractive", bodyClasses: "p-4", title: "Kultura a volný čas" )}}
   </div>
 
-  <div class="flex flex-col pt-24 space-y-8 md:space-y-0 md:flex-row md:space-x-8">
-    {{> 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 class="flex flex-col pt-8 lg:pt-24 lg:flex-row lg:space-x-8">
+    {{> atoms-super-button(cta: "Povolební strategie", icon: "fa fa-chess", classes: "bg-grey-125 hover:bg-black hover:text-white lg:w-full container-padding--zero lg:container-padding--auto") }}
+    {{> atoms-super-button(cta: "Financování kampaně", icon: "fa fa-calculator", classes: "bg-black text-white hover:bg-grey-125 hover:text-black lg:w-full container-padding--zero lg:container-padding--auto") }}
   </div>
 </div>
 

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

@@ -14,7 +14,7 @@
   </div>
 </aside>
 
-<div class="container container--default py-16">
+<div class="container container--default pt-8 lg:pb-16">
   <article>
     <div class="lg:flex lg:space-x-8 xl:space-x-16">
       <div class="lg:w-3/5 xl:w-2/3 content-block">
@@ -72,8 +72,8 @@
         {{> atoms-icon-button(cta: "Další akce", icon: "fas fa-chevron-right", classes: "btn--red-100 btn--hoveractive btn--fullwidth md:btn--autowidth") }}
       </div>
       <div class="pt-8 lg:w-2/5 xl:w-1/3 lg:pt-0">
-        <div class="card elevation-10">
-          <div class="card__body content-block">
+        <div class="lg:card lg:elevation-10">
+          <div class="lg:card__body content-block">
             <h2>Kde to najdu?</h2>
             <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>
             <p>
@@ -90,9 +90,9 @@
           </div>
         </div>
 
-        <div class="flex flex-col pt-16 space-y-8">
-          {{> atoms-super-button(cta: "Sledujte nás na Facebooku", icon: "fab fa-facebook", classes: "bg-brands-facebook text-white w-full") }}
-          {{> atoms-super-button(cta: "Sledujte naše fórum", icon: "fa fa-comments", classes: "bg-black text-white w-full") }}
+        <div class="flex flex-col pt-8 lg:space-y-4">
+          {{> atoms-super-button(cta: "Sledujte nás na Facebooku", icon: "fab fa-facebook", classes: "bg-brands-facebook text-white container-padding--zero lg:container-padding--auto lg:w-full") }}
+          {{> atoms-super-button(cta: "Sledujte naše fórum", icon: "fa fa-comments", classes: "bg-black text-white container-padding--zero lg:container-padding--auto lg:w-full") }}
         </div>
       </div>
     </div>

source/css/atoms/card.pcss

-.card {
-  @apply elevation-2;
-}
+@responsive {
+  .card {
+    @apply elevation-2;
+  }
 
-.card__body {
-  @apply p-8;
+  .card__body {
+    @apply p-8;
+  }
 }
 
 .card--hoveractive {

source/css/atoms/container.pcss

@@ -13,7 +13,7 @@
 @responsive {
   /* Removes default container padding from the element. */
   /* @note: needs to be kept in sync with tailwind configuration */
-  .container-zeropad {
+  .container-padding--zero {
     margin-left: -1rem;
     margin-right: -1rem;
 
@@ -23,8 +23,8 @@
     }
   }
 
-  .container-autopad {
-    margin-left: auto;
-    margin-right: auto;
+  .container-padding--auto {
+    margin-left: 0;
+    margin-right: 0;
   }
 }

source/css/atoms/super-button.pcss

 .super-button {
-  @apply inline-flex font-alt text-4xl py-8 px-6 transition duration-200;
+  @apply inline-flex font-alt text-4xl py-8 px-4 transition duration-200;
 
   &:hover {
     @apply no-underline;
   }
+
+  @screen md {
+    @apply px-6;
+  }
 }
 
 .super-button__body {

source/css/molecules/banner.pcss

 .banner {
-  @apply p-8 flex flex-wrap flex-col;
+  @apply px-4 py-8 flex flex-wrap flex-col;
+
+  @screen lg {
+    @apply px-8;
+  }
 }
 
 .banner__icon {

source/css/molecules/candidate-card.pcss

@@ -7,7 +7,7 @@
 }
 
 .candidate-card__avatar {
-  @apply relative w-24 py-4;
+  @apply relative w-24 pl-4 py-4;
   grid-area: avatar;
 }
 
@@ -19,14 +19,14 @@
 }
 
 .candidate-card__bio {
-  @apply px-2 py-4;
+  @apply p-4;
 }
 
 .candidate-card__affiliation {
   @apply text-sm bg-grey-50 flex border-t border-b border-grey-150;
 
   > div {
-    @apply py-2 px-4 flex items-center justify-center;
+    @apply py-2 px-4 flex items-center;
 
     &:not(:first-child) {
       @apply border-l border-grey-150;
@@ -35,6 +35,18 @@
     &:last-child {
       flex: 1;
     }
+
+    &:first-child {
+      @apply w-24 justify-center;
+    }
+
+    @screen md {
+      @apply justify-center;
+
+      &:first-child {
+        @apply w-auto text-left;
+      }
+    }
   }
 }
 
@@ -47,8 +59,12 @@
 }
 
 .candidate-card__social {
-  @apply text-center p-4;
+  @apply p-4;
   grid-area: social;
+
+  @screen md {
+    @apply text-center;
+  }
 }
 
 @screen sm {

source/css/molecules/candidate-table-row.pcss

@@ -17,7 +17,7 @@
 }
 
 .candidate-table-row__position {
-  @apply px-6;
+  @apply pl-4 pr-6;
   grid-area: position;
 }
 
@@ -27,17 +27,17 @@
 }
 
 .candidate-table-row__name {
-  @apply px-6;
+  @apply pl-6 pr-4;
   grid-area: name;
 }
 
 .candidate-table-row__bio {
-  @apply truncate py-1 px-6;
+  @apply truncate py-1 pl-6 pr-4;
   grid-area: bio;
 }
 
 .candidate-table-row__affiliation {
-  @apply flex items-center justify-start whitespace-no-wrap px-6;
+  @apply flex items-center justify-start whitespace-no-wrap pl-6 pr-4;
   grid-area: affiliation;
 }