feat: more cf2021 related updates (animatiotns, buttons, iframe-container

source/_patterns/00-atoms/04-animations/ping.mustache

+<span class="inline-flex h-4 w-4 mr-4 relative">
+  <span class="animate-ping absolute inline-flex h-full w-full rounded-full opacity-75 bg-green-400"></span>
+  <span class="relative inline-flex rounded-full w-4 h-4 mr-4 bg-green-400" title="Online"></span>
+</span>

source/_patterns/01-molecules/20-dropdown-button/dropdown-button.mustache

-<button class="btn btn--icon {{ classes }}">
+<div class="btn btn--icon {{ classes }}">
   <div class="btn__body-wrap">
-    <div class="btn__body {{ bodyClasses }}">{{ cta }}</div>
-    <div class="btn__icon dropdown-button">
+    <button class="btn__body {{ bodyClasses }}">{{ cta }}</button>
+    <button class="btn__icon dropdown-button">
       <i class="ico--chevron-down"></i>
       <ul class="dropdown-button__choices bg-white text-black whitespace-no-wrap">
         <li class="dropdown-button__choice hover:bg-grey-125">
           <a class="block px-4 py-3" href="#">Navrhnout postup</a>
         </li>
       </ul>
-    </div>
+    </button>
   </div>
-</button>
+</div>

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

@@ -5,7 +5,16 @@
     <div class="flex items-center justify-between mb-4 lg:mb-8">
       <h1 class="head-alt-md lg:head-alt-lg mb-0">Bod č. 1: Programové priority Pirátské strany pro sněmovní volby 2021</h1>
     </div>
-    <iframe width="100%" height="500" src="https://www.youtube.com/embed/73jJLspL8o8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+    <div class="container-padding--zero md:container-padding--auto">
+      <div class="iframe-container">
+        <iframe width="100%" height="500" src="https://www.youtube.com/embed/73jJLspL8o8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+      </div>
+      <div class="bg-grey-50 flex space-x-4 leading-normal px-4 py-2 text-xs md:text-sm text-grey-300">
+        <div><strong>0</strong> <span>členů online</span></div>
+        <div><strong>0</strong> <span>online celkem</span></div>
+        <div class="flex-grow text-right hidden sm:block">Následuje: <a class="font-bold" href="#">Představení výsledků PK @ 09. 01. 12:05</a></div>
+      </div>
+    </div>
   </section>
 
   <section class="cf2021__notifications">

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

@@ -20,7 +20,16 @@
       </div>
     </div>
 
-    <iframe width="100%" height="500" src="https://www.youtube.com/embed/73jJLspL8o8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+    <div class="container-padding--zero md:container-padding--auto">
+      <div class="iframe-container">
+        <iframe width="100%" height="500" src="https://www.youtube.com/embed/73jJLspL8o8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+      </div>
+      <div class="bg-grey-50 flex space-x-4 leading-normal px-4 py-2 text-xs md:text-sm text-grey-300">
+        <div><strong>0</strong> <span>členů online</span></div>
+        <div><strong>0</strong> <span>online celkem</span></div>
+        <div class="flex-grow text-right hidden sm:block">Následuje: <a class="font-bold" href="#">Představení výsledků PK @ 09. 01. 12:05</a></div>
+      </div>
+    </div>
   </section>
 
   <section class="cf2021__notifications">

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

@@ -6,7 +6,16 @@
       <h1 class="head-alt-md lg:head-alt-lg mb-0">Bod č. 1: Programové priority Pirátské strany pro sněmovní volby 2021</h1>
     </div>
 
-    <iframe width="100%" height="500" src="https://www.youtube.com/embed/73jJLspL8o8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+    <div class="container-padding--zero md:container-padding--auto">
+      <div class="iframe-container">
+        <iframe width="100%" height="500" src="https://www.youtube.com/embed/73jJLspL8o8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+      </div>
+      <div class="bg-grey-50 flex space-x-4 leading-normal px-4 py-2 text-xs md:text-sm text-grey-300">
+        <div><strong>0</strong> <span>členů online</span></div>
+        <div><strong>0</strong> <span>online celkem</span></div>
+        <div class="flex-grow text-right hidden sm:block">Následuje: <a class="font-bold" href="#">Představení výsledků PK @ 09. 01. 12:05</a></div>
+      </div>
+    </div>
   </section>
 
   <section class="cf2021__notifications">

source/css/atoms/animations.pcss

+/* Obsolete with Tailwind 1.6, backported. */
+@keyframes animate-ping {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  75%, 100% {
+    transform: scale(2);
+    opacity: 0;
+  }
+}
+
+
+.animate-ping {
+  animation: animate-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+}

source/css/style.pcss

@@ -18,6 +18,7 @@
 /**
  * Custom components
  */
+@import "./atoms/animations.pcss";
 @import "./atoms/avatar.pcss";
 @import "./atoms/card.pcss";
 @import "./atoms/contact-line.pcss";
@@ -115,42 +116,13 @@ a.icon-link:hover {
   font-size: 0;
 }
 
-/* @keyframes btn-loading-spinner {
-  to {transform: rotate(360deg);}
-} */
-
-/* .btn--loading {
-  position: relative;
-} */
-
-/* .btn--loading::before {
-  pointer-events: none;
-  content: '';
-  position: absolute;
-  background-color: #000;
-  opacity: 0.7;
-  z-index: 2;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
+/* auto-size iframe according to aspect ratio while keeping the 100% height */
+.iframe-container {
+  @apply relative;
+  padding-bottom: 56.25%; /* 16:9 */
+  height: 0;
 }
 
-.btn--loading::after {
-  pointer-events: none;
-  content: '';
-  position: absolute;
-  z-index: 3;
-  top: 50%;
-  left: 50%;
-  width: 1.5rem;
-  height: 1.5rem;
-  margin-top: -0.75rem;
-  margin-left: -0.75rem;
-  border-radius: 50%;
-  border: 3px solid transparent;
-  border-top-color: theme("colors.cyan.200");
-  border-right-color: theme("colors.cyan.200");
-  border-bottom-color: theme("colors.cyan.200");
-  animation: btn-laoding-spinner 1s linear infinite;
-} */
+.iframe-container iframe {
+  @apply absolute top-0 left-0 w-full h-full;
+}

source/css/templates/cf2021.pcss

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

tailwind-plugins/buttons.js

@@ -128,7 +128,7 @@ module.exports = function (options) {
           bottom: '0',
           zIndex: '2',
           backgroundColor: theme('colors.black'),
-          opacity: '0.7',
+          opacity: '0.4',
         },
         '.btn--loading::after': {
           pointerEvents: 'none',