feat: cf polishing related updates

source/_patterns/02-organisms/08-event-feed/event-feed.mustache

 <div class="space-y-px {{ classes }}">
-  <div class="bg-opacity-50 bg-yellow-100 border-orange-300 border-l-2 {{ itemPadding }}{{^ itemPadding }}p-3{{/ itemPadding }}">
+  <div class="bg-opacity-50 bg-yellow-100 border-orange-300 border-l-2 {{ itemPadding }}{{^ itemPadding }}px-4 py-2 lg:px-8 lg:py-3 {{/ itemPadding }} transition duration-500">
     <div class="flex items-center justify-between mb-2">
       <div class="space-x-2 flex items-center">
         <div class="font-bold text-sm">11:55</div>
@@ -18,7 +18,7 @@
     </div>
     <span class="leading-tight text-sm lg:text-base">{{ excerpt.short }}</span>
   </div>
-  <div class="bg-opacity-50 bg-yellow-100 border-green-400 border-l-2 {{ itemPadding }}{{^ itemPadding }}p-3{{/ itemPadding }}">
+  <div class="bg-opacity-50 bg-yellow-100 border-green-400 border-l-2 {{ itemPadding }}{{^ itemPadding }}px-4 py-2 lg:px-8 lg:py-3 {{/ itemPadding }} transition duration-500">
     <div class="flex items-center justify-between mb-2">
       <div class="space-x-2 flex items-center">
         <div class="font-bold text-sm">11:52</div>
@@ -37,7 +37,7 @@
     </div>
     <span class="leading-tight text-sm lg:text-base">{{ excerpt.short }}</span>
   </div>
-  <div class="bg-grey-50 bg-opacity-50 border-blue-300 border-l-2 {{ itemPadding }}{{^ itemPadding }}p-3{{/ itemPadding }}">
+  <div class="bg-grey-50 bg-opacity-50 border-blue-300 border-l-2 {{ itemPadding }}{{^ itemPadding }}px-4 py-2 lg:px-8 lg:py-3 {{/ itemPadding }} transition duration-500">
     <div class="flex items-center justify-between mb-2">
       <div class="space-x-2 flex items-center">
         <div class="font-bold text-sm">11:51</div>
@@ -59,7 +59,7 @@
     </div>
     <span class="leading-tight text-sm lg:text-base">{{ excerpt.short }}</span>
   </div>
-  <div class="bg-grey-50 bg-opacity-50 border-red-600 border-l-2 {{ itemPadding }}{{^ itemPadding }}p-3{{/ itemPadding }}">
+  <div class="bg-grey-50 bg-opacity-50 border-red-600 border-l-2 {{ itemPadding }}{{^ itemPadding }}px-4 py-2 lg:px-8 lg:py-3 {{/ itemPadding }} transition duration-500">
     <div class="flex items-center justify-between mb-2">
       <div class="space-x-2 flex items-center">
         <div class="font-bold text-sm">11:43</div>
@@ -82,7 +82,7 @@
     </div>
     <span class="leading-tight text-sm lg:text-base">{{ excerpt.short }}</span>
   </div>
-  <div class="bg-grey-50 bg-opacity-50 border-cyan-500 border-l-2 {{ itemPadding }}{{^ itemPadding }}p-3{{/ itemPadding }}">
+  <div class="bg-grey-50 bg-opacity-50 border-cyan-500 border-l-2 {{ itemPadding }}{{^ itemPadding }}px-4 py-2 lg:px-8 lg:py-3 {{/ itemPadding }} transition duration-500">
     <div class="flex items-center justify-between mb-2">
       <div class="space-x-2 flex items-center">
         <div class="font-bold text-sm">11:35</div>
@@ -104,7 +104,7 @@
     </div>
     <span class="leading-tight text-sm lg:text-base">{{ excerpt.short }}</span>
   </div>
-  <div class="bg-grey-50 bg-opacity-50 border-orange-300 border-l-2 {{ itemPadding }}{{^ itemPadding }}p-3{{/ itemPadding }}">
+  <div class="bg-grey-50 bg-opacity-50 border-orange-300 border-l-2 {{ itemPadding }}{{^ itemPadding }}px-4 py-2 lg:px-8 lg:py-3 {{/ itemPadding }} transition duration-500">
     <div class="flex items-center justify-between mb-2">
       <div class="space-x-2 flex items-center">
         <div class="font-bold text-sm">11:28</div>
@@ -123,7 +123,7 @@
     </div>
     <span class="leading-tight text-sm lg:text-base">{{ excerpt.short }}</span>
   </div>
-  <div class="bg-grey-50 bg-opacity-50 border-black border-l-2 {{ itemPadding }}{{^ itemPadding }}p-3{{/ itemPadding }}">
+  <div class="bg-grey-50 bg-opacity-50 border-black border-l-2 {{ itemPadding }}{{^ itemPadding }}px-4 py-2 lg:px-8 lg:py-3 {{/ itemPadding }} transition duration-500">
     <div class="flex items-center justify-between mb-2">
       <div class="space-x-2 flex items-center">
         <div class="font-bold text-sm">11:28</div>

source/_patterns/02-organisms/10-loading-screen/loading-screen.mustache

+<div class="h-screen w-screen flex justify-center items-center">
+  <div class="text-center">
+    <img
+      src="/images/logo-round-black.svg"
+      class="w-24 mb-2 inline-block"
+      alt="Pirátská strana"
+    />
+    <h1 class="head-alt-lg mb-2">Název aplikace</h1>
+    <p class="text-lg">Načítám aplikaci ...</p>
+  </div>
+</div>

source/_patterns/03-templates/cf2021/anonymous.mustache

@@ -57,7 +57,7 @@
     </div>
 
     <div class="space-y-6 container-padding--zero lg:container-padding--auto">
-      <div class="flex items-start bg-yellow-100 bg-opacity-50 p-4 lg:p-2 lg:-m-2">
+      <div class="flex items-start bg-yellow-100 bg-opacity-50 p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
         <img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
         <div class="flex-1">
           <div class="mb-1">
@@ -80,7 +80,7 @@
           <p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
         </div>
       </div>
-      <div class="flex items-start p-4 lg:p-2 lg:-m-2">
+      <div class="flex items-start p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
         <img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
         <div class="flex-1">
           <div class="mb-1">
@@ -103,7 +103,7 @@
           <p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
         </div>
       </div>
-      <div class="flex items-start p-4 lg:p-2 lg:-m-2">
+      <div class="flex items-start p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
         <img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
         <div class="flex-1">
           <div class="mb-1">
@@ -127,7 +127,7 @@
           <p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
         </div>
       </div>
-      <div class="flex items-start p-4 lg:p-2 lg:-m-2 opacity-25 hover:opacity-100 transition-opacity duration-200">
+      <div class="flex items-start opacity-25 hover:opacity-100 p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
         <img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
         <div class="flex-1">
           <div class="mb-1">
@@ -151,7 +151,7 @@
           <p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
         </div>
       </div>
-      <div class="flex items-start p-4 lg:p-2 lg:-m-2 opacity-25 hover:opacity-100 transition-opacity duration-200">
+      <div class="flex items-start opacity-25 hover:opacity-100 p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
         <img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
         <div class="flex-1">
           <div class="mb-1">
@@ -176,7 +176,7 @@
           <p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
         </div>
       </div>
-      <div class="flex items-start p-4 lg:p-2 lg:-m-2 opacity-25 hover:opacity-100 transition-opacity duration-200">
+      <div class="flex items-start opacity-25 hover:opacity-100 p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
         <img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
         <div class="flex-1">
           <div class="mb-1">
@@ -201,7 +201,7 @@
           <p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
         </div>
       </div>
-      <div class="flex items-start p-4 lg:p-2 lg:-m-2 opacity-25 hover:opacity-100 transition-opacity duration-200">
+      <div class="flex items-start opacity-25 hover:opacity-100 p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
         <img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
         <div class="flex-1">
           <div class="mb-1">

source/_patterns/03-templates/cf2021/chairman.mustache

@@ -78,7 +78,7 @@
     </div>
 
     <div class="space-y-6 container-padding--zero lg:container-padding--auto">
-      <div class="flex items-start bg-yellow-100 bg-opacity-50 p-4 lg:p-2 lg:-m-2">
+      <div class="flex items-start bg-yellow-100 bg-opacity-50 p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
         <img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
         <div class="flex-1">
           <div class="mb-1">
@@ -114,7 +114,7 @@
           <p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
         </div>
       </div>
-      <div class="flex items-start p-4 lg:p-2 lg:-m-2">
+      <div class="flex items-start p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
         <img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
         <div class="flex-1">
           <div class="mb-1">
@@ -150,7 +150,7 @@
           <p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
         </div>
       </div>
-      <div class="flex items-start p-4 lg:p-2 lg:-m-2">
+      <div class="flex items-start p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
         <img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
         <div class="flex-1">
           <div class="mb-1">
@@ -190,7 +190,7 @@
           <p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
         </div>
       </div>
-      <div class="flex items-start p-4 lg:p-2 lg:-m-2">
+      <div class="flex items-start p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
         <img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
         <div class="flex-1">
           <div class="mb-1">
@@ -231,7 +231,7 @@
           <p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
         </div>
       </div>
-      <div class="flex items-start p-4 lg:p-2 lg:-m-2 opacity-25 hover:opacity-100 transition-opacity duration-200">
+      <div class="flex items-start opacity-25 hover:opacity-100 p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
         <img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
         <div class="flex-1">
           <div class="mb-1">
@@ -268,7 +268,7 @@
           <p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
         </div>
       </div>
-      <div class="flex items-start p-4 lg:p-2 lg:-m-2 opacity-25 hover:opacity-100 transition-opacity duration-200">
+      <div class="flex items-start opacity-25 hover:opacity-100 p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
         <img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
         <div class="flex-1">
           <div class="mb-1">
@@ -303,7 +303,7 @@
           <p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
         </div>
       </div>
-      <div class="flex items-start p-4 lg:p-2 lg:-m-2 opacity-25 hover:opacity-100 transition-opacity duration-200">
+      <div class="flex items-start opacity-25 hover:opacity-100 p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
         <img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
         <div class="flex-1">
           <div class="mb-1">
@@ -338,7 +338,7 @@
           <p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
         </div>
       </div>
-      <div class="flex items-start p-4 lg:p-2 lg:-m-2 opacity-25 hover:opacity-100 transition-opacity duration-200">
+      <div class="flex items-start opacity-25 hover:opacity-100 p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
         <img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
         <div class="flex-1">
           <div class="mb-1">

source/_patterns/03-templates/cf2021/user.mustache

@@ -58,7 +58,7 @@
     </div>
 
     <div class="space-y-6 container-padding--zero lg:container-padding--auto">
-      <div class="flex items-start bg-yellow-100 bg-opacity-50 p-4 lg:p-2 lg:-m-2">
+      <div class="flex items-start bg-yellow-100 bg-opacity-50 p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
         <img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
         <div class="flex-1">
           <div class="mb-1">
@@ -81,7 +81,7 @@
           <p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
         </div>
       </div>
-      <div class="flex items-start p-4 lg:p-2 lg:-m-2">
+      <div class="flex items-start p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
         <img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
         <div class="flex-1">
           <div class="mb-1">
@@ -104,7 +104,7 @@
           <p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
         </div>
       </div>
-      <div class="flex items-start p-4 lg:p-2 lg:-m-2">
+      <div class="flex items-start p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
         <img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
         <div class="flex-1">
           <div class="mb-1">
@@ -128,7 +128,7 @@
           <p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
         </div>
       </div>
-      <div class="flex items-start p-4 lg:p-2 lg:-m-2 opacity-25 hover:opacity-100 transition-opacity duration-200">
+      <div class="flex items-start opacity-25 hover:opacity-100 p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
         <img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
         <div class="flex-1">
           <div class="mb-1">
@@ -152,7 +152,7 @@
           <p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
         </div>
       </div>
-      <div class="flex items-start p-4 lg:p-2 lg:-m-2 opacity-25 hover:opacity-100 transition-opacity duration-200">
+      <div class="flex items-start opacity-25 hover:opacity-100 p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
         <img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
         <div class="flex-1">
           <div class="mb-1">
@@ -177,7 +177,7 @@
           <p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
         </div>
       </div>
-      <div class="flex items-start p-4 lg:p-2 lg:-m-2 opacity-25 hover:opacity-100 transition-opacity duration-200">
+      <div class="flex items-start opacity-25 hover:opacity-100 p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
         <img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
         <div class="flex-1">
           <div class="mb-1">
@@ -202,7 +202,7 @@
           <p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
         </div>
       </div>
-      <div class="flex items-start p-4 lg:p-2 lg:-m-2 opacity-25 hover:opacity-100 transition-opacity duration-200">
+      <div class="flex items-start opacity-25 hover:opacity-100 p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
         <img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
         <div class="flex-1">
           <div class="mb-1">

source/css/molecules/modal.pcss

@@ -35,7 +35,7 @@
   }
 
   .modal__container-body {
-    @apply min-h-full bg-white;
+    @apply bg-white;
   }
 }
 

source/css/templates/cf2021.pcss

@@ -10,6 +10,7 @@
                          "posts notifications";
     /* Needs to match .candidate-card__avatar width */
     grid-template-columns: theme("width.2/3") 1fr;
+    grid-template-rows: auto 1fr;
   }
 }
 

tailwind.config.js

@@ -26,12 +26,16 @@ module.exports = {
         /^((sm|md|lg|xl)\:)?grid-cols-*/,
         /^((sm|md|lg|xl)\:)?col-span-*/,
         /^((sm|md|lg|xl)\:)?row-span-*/,
+        /^((sm|md|lg|xl)\:)?items-*/,
         /^((sm|md|lg|xl)\:)?float-*/,
+        /^((sm|md|lg|xl)\:)?flex-row-*/,
+        /^((sm|md|lg|xl)\:)?flex-col-*/,
+        /^((sm|md|lg|xl)\:)?text-*/,
         /^((sm|md|lg|xl)\:)?grid-flow-*/,
         /^((sm|md|lg|xl)\:)?head-*/,
         /^((sm|md|lg|xl)\:)?clearfix/,
         /opacity-*/,
-        /^text-*/,
+        /^duration-*/,
         /^max-w-*/,
         /ico--*/,
       ],