feat: improve color palette, cf2021 layout updates

source/_data/data.json

@@ -131,7 +131,8 @@
       "name": "Green",
       "variants": [
         {"cls": "green-200", "name": "Green 200", "hex": "#92c6ab"},
-        {"cls": "green-300", "name": "Green 300", "hex": "#77cea1"}
+        {"cls": "green-300", "name": "Green 300", "hex": "#76cc9f"},
+        {"cls": "green-400", "name": "Green 400", "hex": "#4ca971"}
       ]
     },
     {

source/_patterns/00-atoms/03-buttons/02-button-colors.mustache

@@ -7,7 +7,8 @@
     {{> atoms-basic-button(classes: "btn--white") }}
     {{> atoms-basic-button(classes: "btn--blue-300") }}
     {{> atoms-basic-button(classes: "btn--cyan-200") }}
-    {{> atoms-basic-button(classes: "btn--green-200") }}
+    {{> atoms-basic-button(classes: "btn--green-400") }}
+    {{> atoms-basic-button(classes: "btn--green-300") }}
     {{> atoms-basic-button(classes: "btn--orange-300") }}
     {{> atoms-basic-button(classes: "btn--violet-400") }}
     {{> atoms-basic-button(classes: "btn--violet-500") }}
@@ -21,7 +22,8 @@
     {{> atoms-icon-button(classes: "btn--white") }}
     {{> atoms-icon-button(classes: "btn--blue-300") }}
     {{> atoms-icon-button(classes: "btn--cyan-200") }}
-    {{> atoms-icon-button(classes: "btn--green-200") }}
+    {{> atoms-icon-button(classes: "btn--green-400") }}
+    {{> atoms-icon-button(classes: "btn--green-300") }}
     {{> atoms-icon-button(classes: "btn--orange-300") }}
     {{> atoms-icon-button(classes: "btn--violet-400") }}
     {{> atoms-icon-button(classes: "btn--violet-500") }}

source/_patterns/00-atoms/03-buttons/04-button-with-hover-effect.mustache

@@ -7,7 +7,8 @@
     {{> atoms-basic-button(classes: "btn--white btn--hoveractive") }}
     {{> atoms-basic-button(classes: "btn--blue-300 btn--hoveractive") }}
     {{> atoms-basic-button(classes: "btn--cyan-200 btn--hoveractive") }}
-    {{> atoms-basic-button(classes: "btn--green-200 btn--hoveractive") }}
+    {{> atoms-basic-button(classes: "btn--green-400 btn--hoveractive") }}
+    {{> atoms-basic-button(classes: "btn--green-300 btn--hoveractive") }}
     {{> atoms-basic-button(classes: "btn--orange-300 btn--hoveractive") }}
     {{> atoms-basic-button(classes: "btn--violet-400 btn--hoveractive") }}
     {{> atoms-basic-button(classes: "btn--violet-500 btn--hoveractive") }}
@@ -20,7 +21,8 @@
     {{> atoms-icon-button(classes: "btn--white btn--hoveractive") }}
     {{> atoms-icon-button(classes: "btn--blue-300 btn--hoveractive") }}
     {{> atoms-icon-button(classes: "btn--cyan-200 btn--hoveractive") }}
-    {{> atoms-icon-button(classes: "btn--green-200 btn--hoveractive") }}
+    {{> atoms-icon-button(classes: "btn--green-400 btn--hoveractive") }}
+    {{> atoms-icon-button(classes: "btn--green-300 btn--hoveractive") }}
     {{> atoms-icon-button(classes: "btn--orange-300 btn--hoveractive") }}
     {{> atoms-icon-button(classes: "btn--violet-400 btn--hoveractive") }}
     {{> atoms-icon-button(classes: "btn--violet-500 btn--hoveractive") }}

source/_patterns/00-atoms/03-buttons/button-hover-targets.mustache

@@ -7,7 +7,8 @@
     {{> atoms-basic-button(cta: "btn--to-white", classes: "btn--hoveractive btn--to-white") }}
     {{> atoms-basic-button(cta: "btn--to-blue-300", classes: "btn--hoveractive btn--to-blue-300") }}
     {{> atoms-basic-button(cta: "btn--to-cyan-200", classes: "btn--hoveractive btn--to-cyan-200") }}
-    {{> atoms-basic-button(cta: "btn--to-green-200", classes: "btn--hoveractive btn--to-green-200") }}
+    {{> atoms-basic-button(cta: "btn--to-green-400", classes: "btn--hoveractive btn--to-green-400") }}
+    {{> atoms-basic-button(cta: "btn--to-green-300", classes: "btn--hoveractive btn--to-green-300") }}
     {{> atoms-basic-button(cta: "btn--to-orange-300", classes: "btn--hoveractive btn--to-orange-300") }}
     {{> atoms-basic-button(cta: "btn--to-violet-400", classes: "btn--hoveractive btn--to-violet-400") }}
     {{> atoms-basic-button(cta: "btn--to-violet-500", classes: "btn--hoveractive btn--to-violet-500") }}
@@ -21,7 +22,8 @@
     {{> atoms-icon-button(cta: "btn--to-white", classes: "btn--hoveractive btn--to-white") }}
     {{> atoms-icon-button(cta: "btn--to-blue-300", classes: "btn--hoveractive btn--to-blue-300") }}
     {{> atoms-icon-button(cta: "btn--to-cyan-200", classes: "btn--hoveractive btn--to-cyan-200") }}
-    {{> atoms-icon-button(cta: "btn--to-green-200", classes: "btn--hoveractive btn--to-green-200") }}
+    {{> atoms-icon-button(cta: "btn--to-green-400", classes: "btn--hoveractive btn--to-green-400") }}
+    {{> atoms-icon-button(cta: "btn--to-green-300", classes: "btn--hoveractive btn--to-green-300") }}
     {{> atoms-icon-button(cta: "btn--to-orange-300", classes: "btn--hoveractive btn--to-orange-300") }}
     {{> atoms-icon-button(cta: "btn--to-violet-400", classes: "btn--hoveractive btn--to-violet-400") }}
     {{> atoms-icon-button(cta: "btn--to-violet-500", classes: "btn--hoveractive btn--to-violet-500") }}

source/_patterns/01-molecules/16-chips/chip-colors.mustache

@@ -8,6 +8,7 @@
     {{> molecules-chip(classes: "chip--cyan-200") }}
     {{> molecules-chip(classes: "chip--cyan-500") }}
     {{> molecules-chip(classes: "chip--green-300") }}
+    {{> molecules-chip(classes: "chip--green-400") }}
     {{> molecules-chip(classes: "chip--orange-300") }}
     {{> molecules-chip(classes: "chip--violet-400") }}
     {{> molecules-chip(classes: "chip--violet-500") }}

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

@@ -5,7 +5,7 @@
       <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="#">Přidat jako návrh postupu</a>
+          <a class="block px-4 py-3" href="#">Navrhnout postup</a>
         </li>
       </ul>
     </div>

source/_patterns/02-organisms/02-simplified-navbar/simplified-navbar-with-avatar.mustache

@@ -21,6 +21,7 @@
             <div class="flex items-center space-x-4">
               <span class="head-heavy-2xs">{{ person.first }} {{ person.last }}</span>
               {{> atoms-basic-avatar(classes: "avatar--2xs") }}
+              <button><i class="ico--log-out"></i></button>
             </div>
           </div>
         </div>

source/_patterns/02-organisms/08-event-feed/event-feed-with-action-menu.mustache

+{{> organisms-event-feed(withActionMenu: true) }}

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

-<div class="flex flex-col flex-1 overflow-hidden {{ classes }}{{^ classes }}h-64 max-w-lg{{/ classes }}">
-  <div class="overflow-hidden flex flex-1">
-    <div class="overflow-scroll h-full space-y-px">
+<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="flex items-center justify-between mb-2">
       <div class="space-x-2 flex items-center">
         <div class="font-bold text-sm">11:55</div>
         {{> molecules-chip(classes: "chip--orange-300 chip--condensed", cta: "Zamítnutý návrh postupu")}}
       </div>
-          {{# action }}
-            <a href="#" class="hover:no-underline"><i class="{{ action }} ml-auto text-sm text-grey-200 hover:text-black"></i></a>
-          {{/ action}}
+      {{# withActionMenu }}
+        <div class="dropdown dropdown--right">
+          <i class="ico--dots-three-horizontal cursor-pointer ml-auto text-sm text-grey-200 hover:text-black"></i>
+          <ul class="dropdown__content text-xs whitespace-no-wrap">
+            <li class="dropdown__content-item bg-white hover:bg-grey-125">
+              <a class="block px-3 py-3" href="#"><i class="ico--trashcan text-2xs mr-2"></i>Smazat</a>
+            </li>
+          </ul>
+        </div>
+      {{/ withActionMenu }}
     </div>
     <span class="leading-tight">{{ excerpt.short }}</span>
   </div>
-      <div class="bg-opacity-50 bg-yellow-100 border-green-300 border-l-2 {{ itemPadding }}{{^ itemPadding }}p-3{{/ itemPadding }}">
+  <div class="bg-opacity-50 bg-yellow-100 border-green-400 border-l-2 {{ itemPadding }}{{^ itemPadding }}p-3{{/ itemPadding }}">
     <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>
-            {{> molecules-chip(classes: "chip--green-300 chip--condensed", cta: "Schválený návrh postupu")}}
+        {{> molecules-chip(classes: "chip--green-400 chip--condensed", cta: "Schválený návrh postupu")}}
+      </div>
+      {{# withActionMenu }}
+        <div class="dropdown dropdown--right">
+          <i class="ico--dots-three-horizontal cursor-pointer ml-auto text-sm text-grey-200 hover:text-black"></i>
+          <ul class="dropdown__content text-xs whitespace-no-wrap">
+            <li class="dropdown__content-item bg-white hover:bg-grey-125">
+              <a class="block px-3 py-3" href="#"><i class="ico--trashcan text-2xs mr-2"></i>Smazat</a>
+            </li>
+          </ul>
         </div>
-          {{# action }}
-            <a href="#" class="hover:no-underline"><i class="{{ action }} ml-auto text-sm text-grey-200 hover:text-black"></i></a>
-          {{/ action}}
+      {{/ withActionMenu }}
     </div>
     <span class="leading-tight">{{ excerpt.short }}</span>
   </div>
@@ -31,9 +43,19 @@
         <div class="font-bold text-sm">11:51</div>
         {{> molecules-chip(classes: "chip--blue-300 chip--condensed", cta: "Přijatelný návrh postupu")}}
       </div>
-          {{# action }}
-            <a href="#" class="hover:no-underline"><i class="{{ action }} ml-auto text-sm text-grey-200 hover:text-black"></i></a>
-          {{/ action}}
+      {{# withActionMenu }}
+        <div class="dropdown dropdown--right">
+          <i class="ico--dots-three-horizontal cursor-pointer ml-auto text-sm text-grey-200 hover:text-black"></i>
+          <ul class="dropdown__content text-xs whitespace-no-wrap">
+            <li class="dropdown__content-item bg-white hover:bg-grey-125">
+              <a class="block px-3 py-3" href="#"><i class="ico--edit-pencil text-2xs mr-2"></i>Upravit</a>
+            </li>
+            <li class="dropdown__content-item bg-white hover:bg-grey-125">
+              <a class="block px-3 py-3" href="#"><i class="ico--trashcan text-2xs mr-2"></i>Smazat</a>
+            </li>
+          </ul>
+        </div>
+      {{/ withActionMenu }}
     </div>
     <span class="leading-tight">{{ excerpt.short }}</span>
   </div>
@@ -44,9 +66,19 @@
         {{> molecules-chip(classes: "chip--red-600 chip--condensed font-bold text-xs", cta: "Rozhodující hlasování")}}
         <a href="#" class="ml-auto p-1 text-xs text-red-600 font-bold">Hlasovat v Heliosu &raquo;</a>
       </div>
-          {{# action }}
-            <a href="#" class="hover:no-underline"><i class="{{ action }} ml-auto text-sm text-grey-200 hover:text-black"></i></a>
-          {{/ action}}
+      {{# withActionMenu }}
+        <div class="dropdown dropdown--right">
+          <i class="ico--dots-three-horizontal cursor-pointer ml-auto text-sm text-grey-200 hover:text-black"></i>
+          <ul class="dropdown__content text-xs whitespace-no-wrap">
+            <li class="dropdown__content-item bg-white hover:bg-grey-125">
+              <a class="block px-3 py-3" href="#"><i class="ico--edit-pencil text-2xs mr-2"></i>Upravit</a>
+            </li>
+            <li class="dropdown__content-item bg-white hover:bg-grey-125">
+              <a class="block px-3 py-3" href="#"><i class="ico--trashcan text-2xs mr-2"></i>Smazat</a>
+            </li>
+          </ul>
+        </div>
+      {{/ withActionMenu }}
     </div>
     <span class="leading-tight mb-2">{{ excerpt.short }}</span>
   </div>
@@ -56,9 +88,19 @@
         <div class="font-bold text-sm">11:35</div>
         {{> molecules-chip(classes: "chip--cyan-500 chip--condensed", cta: "Oznámení předsedajícího")}}
       </div>
-          {{# action }}
-            <a href="#" class="hover:no-underline"><i class="{{ action }} ml-auto text-sm text-grey-200 hover:text-black"></i></a>
-          {{/ action}}
+      {{# withActionMenu }}
+        <div class="dropdown dropdown--right">
+          <i class="ico--dots-three-horizontal cursor-pointer ml-auto text-sm text-grey-200 hover:text-black"></i>
+          <ul class="dropdown__content text-xs whitespace-no-wrap">
+            <li class="dropdown__content-item bg-white hover:bg-grey-125">
+              <a class="block px-3 py-3" href="#"><i class="ico--edit-pencil text-2xs mr-2"></i>Upravit</a>
+            </li>
+            <li class="dropdown__content-item bg-white hover:bg-grey-125">
+              <a class="block px-3 py-3" href="#"><i class="ico--trashcan text-2xs mr-2"></i>Smazat</a>
+            </li>
+          </ul>
+        </div>
+      {{/ withActionMenu }}
     </div>
     <span class="leading-tight">{{ excerpt.short }}</span>
   </div>
@@ -68,6 +110,16 @@
         <div class="font-bold text-sm">11:28</div>
         {{> molecules-chip(classes: "chip--orange-300 chip--condensed", cta: "Zamítnutý návrh postupu")}}
       </div>
+      {{# withActionMenu }}
+        <div class="dropdown dropdown--right">
+          <i class="ico--dots-three-horizontal cursor-pointer ml-auto text-sm text-grey-200 hover:text-black"></i>
+          <ul class="dropdown__content text-xs whitespace-no-wrap">
+            <li class="dropdown__content-item bg-white hover:bg-grey-125">
+              <a class="block px-3 py-3" href="#"><i class="ico--trashcan text-2xs mr-2"></i>Smazat</a>
+            </li>
+          </ul>
+        </div>
+      {{/ withActionMenu }}
     </div>
     <span class="leading-tight">{{ excerpt.short }}</span>
   </div>
@@ -77,12 +129,17 @@
         <div class="font-bold text-sm">11:28</div>
         {{> molecules-chip(classes: "chip--black chip--condensed", cta: "Zablokovaný účastník")}}
       </div>
-          {{# action }}
-            <a href="#" class="hover:no-underline"><i class="{{ action }} ml-auto text-sm text-grey-200 hover:text-black"></i></a>
-          {{/ action}}
-        </div>
-        <span class="leading-tight"><strong>{{ person.first }} {{ person.last }}</strong> byl zablokován.</span>
+      {{# withActionMenu }}
+        <div class="dropdown dropdown--right">
+          <i class="ico--dots-three-horizontal cursor-pointer ml-auto text-sm text-grey-200 hover:text-black"></i>
+          <ul class="dropdown__content text-xs whitespace-no-wrap">
+            <li class="dropdown__content-item bg-white hover:bg-grey-125">
+              <a class="block px-3 py-3" href="#"><i class="ico--trashcan text-2xs mr-2"></i>Smazat</a>
+            </li>
+          </ul>
         </div>
+      {{/ withActionMenu }}
     </div>
+    <span class="leading-tight"><strong>{{ person.first }} {{ person.last }}</strong> byl zablokován.</span>
   </div>
 </div>

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

@@ -2,12 +2,11 @@
 
 <div class="container container--wide pt-8 lg:py-24">
   <article>
-    <div class="flex items-center justify-between mb-8">
-      <h1 class="head-alt-lg mb-0 pt-1 pr-8">Bod č. 1: Grilování leadera</h1>
-    </div>
-
     <div class="grid grid-cols-3 gap-8">
       <div class="col-span-2 space-y-8">
+        <div class="flex items-center justify-between mb-8">
+          <h1 class="head-alt-lg mb-0 pt-1 pr-8">Bod č. 1: Programové priority Pirátské strany pro sněmovní volby 2021</h1>
+        </div>
         <iframe width="100%" height="610" src="https://www.youtube.com/embed/73jJLspL8o8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 
         <section>
@@ -44,7 +43,7 @@
 
           <div class="space-y-6">
             <div class="flex items-start bg-yellow-100 bg-opacity-50 p-2 -ml-2">
-              <img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
+              <img src="{{ img.avatar.src }}" class="w-14 h-14 rounded mr-3">
               <div class="flex-1 overflow-hidden">
                 <div class="mb-1">
                   <div class="flex justify-between">
@@ -61,7 +60,7 @@
               </div>
             </div>
             <div class="flex items-start p-2 -ml-2">
-              <img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
+              <img src="{{ img.avatar.src }}" class="w-14 h-14 rounded mr-3">
               <div class="flex-1 overflow-hidden">
                 <div class="mb-1">
                   <div class="flex justify-between">
@@ -78,7 +77,7 @@
               </div>
             </div>
             <div class="flex items-start p-2 -ml-2">
-              <img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
+              <img src="{{ img.avatar.src }}" class="w-14 h-14 rounded mr-3">
               <div class="flex-1 overflow-hidden">
                 <div class="mb-1">
                   <div class="flex justify-between">
@@ -96,7 +95,7 @@
               </div>
             </div>
             <div class="flex items-start p-2 -ml-2 opacity-25 hover:opacity-100 transition-opacity duration-200">
-              <img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
+              <img src="{{ img.avatar.src }}" class="w-14 h-14 rounded mr-3">
               <div class="flex-1 overflow-hidden">
                 <div class="mb-1">
                   <div class="flex justify-between">
@@ -114,7 +113,45 @@
               </div>
             </div>
             <div class="flex items-start p-2 -ml-2 opacity-25 hover:opacity-100 transition-opacity duration-200">
-              <img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
+              <img src="{{ img.avatar.src }}" class="w-14 h-14 rounded mr-3">
+              <div class="flex-1 overflow-hidden">
+                <div class="mb-1">
+                  <div class="flex justify-between">
+                    <div class="flex items-center">
+                      <span class="font-bold">{{ person.first }} {{ person.last }}</span>
+                      <span class="text-grey-200 text-sm ml-2">KS Pardubický kraj</span>
+                      <span class="text-grey-200 ml-1 text-sm">@ 11:30</span>
+                      {{> molecules-chip(classes: "chip--cyan-200 chip--condensed ml-2", cta: "Návrh postupu")}}
+                      {{> molecules-chip(classes: "chip--green-400 chip--condensed ml-2", cta: "Schválený")}}
+                      {{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Archivovaný")}}
+                    </div>
+                    {{> molecules-thumbs }}
+                  </div>
+                </div>
+                <p class="text-black leading-normal">{{ excerpt.medium }}</p>
+              </div>
+            </div>
+            <div class="flex items-start p-2 -ml-2 opacity-25 hover:opacity-100 transition-opacity duration-200">
+              <img src="{{ img.avatar.src }}" class="w-14 h-14 rounded mr-3">
+              <div class="flex-1 overflow-hidden">
+                <div class="mb-1">
+                  <div class="flex justify-between">
+                    <div class="flex items-center">
+                      <span class="font-bold">{{ person.first }} {{ person.last }}</span>
+                      <span class="text-grey-200 text-sm ml-2">KS Pardubický kraj</span>
+                      <span class="text-grey-200 ml-1 text-sm">@ 11:30</span>
+                      {{> molecules-chip(classes: "chip--cyan-200 chip--condensed ml-2", cta: "Návrh postupu")}}
+                      {{> molecules-chip(classes: "chip--red-600 chip--condensed ml-2", cta: "Zamítnutý")}}
+                      {{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Archivovaný")}}
+                    </div>
+                    {{> molecules-thumbs }}
+                  </div>
+                </div>
+                <p class="text-black leading-normal">{{ excerpt.medium }}</p>
+              </div>
+            </div>
+            <div class="flex items-start p-2 -ml-2 opacity-25 hover:opacity-100 transition-opacity duration-200">
+              <img src="{{ img.avatar.src }}" class="w-14 h-14 rounded mr-3">
               <div class="flex-1 overflow-hidden">
                 <div class="mb-1">
                   <div class="flex justify-between">
@@ -123,6 +160,7 @@
                       <span class="text-grey-200 text-sm ml-2">KS Pardubický kraj</span>
                       <span class="text-grey-200 ml-1 text-sm">@ 11:30</span>
                       {{> molecules-chip(classes: "chip--cyan-200 chip--condensed ml-2", cta: "Návrh postupu")}}
+                      {{> molecules-chip(classes: "chip--red-600 chip--condensed ml-2", cta: "Odmítnutý předsedajícím")}}
                       {{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Archivovaný")}}
                     </div>
                     {{> molecules-thumbs }}
@@ -136,10 +174,11 @@
       </div>
       <div>
         <div class="lg:card lg:elevation-10">
-          <div class="lg:card__body lg:pb-0">
-            <h2 class="head-heavy-sm mb-4">Oznámení</h2>
+          <div class="lg:card__body lg:py-6">
+            <h2 class="head-heavy-sm">Oznámení</h2>
           </div>
-          {{> organisms-event-feed(classes: "w-full", itemPadding: "px-8 py-3") }}
+
+          {{> organisms-event-feed(itemPadding: "px-8 py-3") }}
         </div>
       </div>
     </div>

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

@@ -2,9 +2,11 @@
 
 <div class="container container--wide pt-8 lg:py-24">
   <article>
-    <div class="flex items-center justify-between mb-8">
-      <h1 class="head-alt-lg mb-0 pt-1 pr-8">Bod č. 1: Grilování leadera</h1>
-      <div class="dropdown dropdown--right">
+    <div class="grid grid-cols-3 gap-8">
+      <div class="col-span-2 space-y-8">
+        <div class="flex items-start justify-between mb-8">
+          <h1 class="head-alt-lg mb-0 pt-1 pr-8">Bod č. 1: Programové priority Pirátské strany pro sněmovní volby 2021</h1>
+          <div class="dropdown dropdown--right mt-4">
             <i class="ico--dots-three-vertical cursor-pointer pl-2 text-lg"></i>
             <ul class="dropdown__content whitespace-no-wrap">
               <li class="dropdown__content-item bg-white hover:bg-grey-125">
@@ -20,8 +22,6 @@
           </div>
         </div>
 
-    <div class="grid grid-cols-3 gap-8">
-      <div class="col-span-2 space-y-8">
         <iframe width="100%" height="610" src="https://www.youtube.com/embed/73jJLspL8o8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 
         <section>
@@ -59,7 +59,7 @@
 
           <div class="space-y-6">
             <div class="flex items-start bg-yellow-100 bg-opacity-50 p-2 -ml-2">
-              <img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
+              <img src="{{ img.avatar.src }}" class="w-14 h-14 rounded mr-3">
               <div class="flex-1">
                 <div class="mb-1">
                   <div class="flex justify-between">
@@ -75,10 +75,10 @@
                         <i class="ico--dots-three-vertical cursor-pointer"></i>
                         <ul class="dropdown__content text-xs whitespace-no-wrap">
                           <li class="dropdown__content-item bg-white hover:bg-grey-125">
-                            <a class="block px-2 py-3" href="#"><i class="ico--lock mr-1"></i> Zablokovat uživatele</a>
+                            <a class="block px-2 py-3" href="#"><i class="ico--lock text-2xs mr-1"></i> Zablokovat uživatele</a>
                           </li>
                           <li class="dropdown__content-item bg-white hover:bg-grey-125">
-                            <a class="block px-2 py-3" href="#"><i class="ico--eye-off mr-1"></i>Skrýt příspěvek</a>
+                            <a class="block px-2 py-3" href="#"><i class="ico--eye-off text-2xs mr-1"></i>Skrýt příspěvek</a>
                           </li>
                         </ul>
                       </div>
@@ -89,7 +89,7 @@
               </div>
             </div>
             <div class="flex items-start p-2 -ml-2">
-              <img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
+              <img src="{{ img.avatar.src }}" class="w-14 h-14 rounded mr-3">
               <div class="flex-1">
                 <div class="mb-1">
                   <div class="flex justify-between">
@@ -105,10 +105,10 @@
                         <i class="ico--dots-three-vertical cursor-pointer"></i>
                         <ul class="dropdown__content text-xs whitespace-no-wrap">
                           <li class="dropdown__content-item bg-white hover:bg-grey-125">
-                            <a class="block px-2 py-3" href="#"><i class="ico--lock mr-1"></i> Zablokovat uživatele</a>
+                            <a class="block px-2 py-3" href="#"><i class="ico--lock text-2xs mr-1"></i> Zablokovat uživatele</a>
                           </li>
                           <li class="dropdown__content-item bg-white hover:bg-grey-125">
-                            <a class="block px-2 py-3" href="#"><i class="ico--eye-off mr-1"></i>Skrýt příspěvek</a>
+                            <a class="block px-2 py-3" href="#"><i class="ico--eye-off text-2xs mr-1"></i>Skrýt příspěvek</a>
                           </li>
                         </ul>
                       </div>
@@ -119,7 +119,7 @@
               </div>
             </div>
             <div class="flex items-start p-2 -ml-2">
-              <img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
+              <img src="{{ img.avatar.src }}" class="w-14 h-14 rounded mr-3">
               <div class="flex-1">
                 <div class="mb-1">
                   <div class="flex justify-between">
@@ -139,10 +139,10 @@
                             <a class="block px-2 py-3" href="#" id="js-announce-proposal"><i class="ico--bullhorn mr-1"></i> Vyhlásit procedurální návrh</a>
                           </li>
                           <li class="dropdown__content-item bg-white hover:bg-grey-125">
-                            <a class="block px-2 py-3" href="#"><i class="ico--thumbs-down mr-1"></i> Odmítnout procedurální návrh</a>
+                            <a class="block px-2 py-3" href="#"><i class="ico--thumbs-down text-2xs mr-1"></i> Odmítnout procedurální návrh</a>
                           </li>
                           <li class="dropdown__content-item bg-white hover:bg-grey-125">
-                            <a class="block px-2 py-3" href="#"><i class="ico--lock mr-1"></i> Zablokovat uživatele</a>
+                            <a class="block px-2 py-3" href="#"><i class="ico--lock text-2xs mr-1"></i> Zablokovat uživatele</a>
                           </li>
                         </ul>
                       </div>
@@ -154,7 +154,7 @@
             </div>
 
             <div class="flex items-start p-2 -ml-2">
-              <img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
+              <img src="{{ img.avatar.src }}" class="w-14 h-14 rounded mr-3">
               <div class="flex-1">
                 <div class="mb-1">
                   <div class="flex justify-between">
@@ -172,13 +172,13 @@
                         <i class="ico--dots-three-vertical cursor-pointer"></i>
                         <ul class="dropdown__content text-xs whitespace-no-wrap">
                           <li class="dropdown__content-item bg-white hover:bg-grey-125">
-                            <a class="block px-2 py-3" href="#"><i class="ico--thumbs-up mr-1"></i> Schválit</a>
+                            <a class="block px-2 py-3" href="#"><i class="ico--thumbs-up text-2xs mr-1"></i> Schválit</a>
                           </li>
                           <li class="dropdown__content-item bg-white hover:bg-grey-125">
-                            <a class="block px-2 py-3" href="#"><i class="ico--thumbs-down mr-1"></i> Zamítnout</a>
+                            <a class="block px-2 py-3" href="#"><i class="ico--thumbs-down text-2xs mr-1"></i> Zamítnout</a>
                           </li>
                           <li class="dropdown__content-item bg-white hover:bg-grey-125">
-                            <a class="block px-2 py-3" href="#"><i class="ico--lock mr-1"></i> Zablokovat uživatele</a>
+                            <a class="block px-2 py-3" href="#"><i class="ico--lock text-2xs mr-1"></i> Zablokovat uživatele</a>
                           </li>
                         </ul>
                       </div>
@@ -189,7 +189,7 @@
               </div>
             </div>
             <div class="flex items-start p-2 -ml-2 opacity-25 hover:opacity-100 transition-opacity duration-200">
-              <img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
+              <img src="{{ img.avatar.src }}" class="w-14 h-14 rounded mr-3">
               <div class="flex-1">
                 <div class="mb-1">
                   <div class="flex justify-between">
@@ -206,10 +206,10 @@
                         <i class="ico--dots-three-vertical cursor-pointer"></i>
                         <ul class="dropdown__content text-xs whitespace-no-wrap">
                           <li class="dropdown__content-item bg-white hover:bg-grey-125">
-                            <a class="block px-2 py-3" href="#"><i class="ico--lock mr-1"></i> Zablokovat uživatele</a>
+                            <a class="block px-2 py-3" href="#"><i class="ico--lock text-2xs mr-1"></i> Zablokovat uživatele</a>
                           </li>
                           <li class="dropdown__content-item bg-white hover:bg-grey-125">
-                            <a class="block px-2 py-3" href="#"><i class="ico--eye-off mr-1"></i>Skrýt příspěvek</a>
+                            <a class="block px-2 py-3" href="#"><i class="ico--eye-off text-2xs mr-1"></i>Skrýt příspěvek</a>
                           </li>
                         </ul>
                       </div>
@@ -220,7 +220,7 @@
               </div>
             </div>
             <div class="flex items-start p-2 -ml-2 opacity-25 hover:opacity-100 transition-opacity duration-200">
-              <img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
+              <img src="{{ img.avatar.src }}" class="w-14 h-14 rounded mr-3">
               <div class="flex-1">
                 <div class="mb-1">
                   <div class="flex justify-between">
@@ -229,7 +229,7 @@
                       <span class="text-grey-200 text-sm ml-2">KS Pardubický kraj</span>
                       <span class="text-grey-200 ml-1 text-sm">@ 11:40</span>
                       {{> molecules-chip(classes: "chip--cyan-200 chip--condensed ml-2", cta: "Návrh postupu")}}
-                      {{> molecules-chip(classes: "chip--green-300 chip--condensed ml-2", cta: "Schválený")}}
+                      {{> molecules-chip(classes: "chip--green-400 chip--condensed ml-2", cta: "Schválený")}}
                       {{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Archivovaný")}}
                     </div>
                     <div class="flex items-center space-x-4">
@@ -238,7 +238,7 @@
                         <i class="ico--dots-three-vertical cursor-pointer"></i>
                         <ul class="dropdown__content text-xs whitespace-no-wrap">
                           <li class="dropdown__content-item bg-white hover:bg-grey-125">
-                            <a class="block px-2 py-3" href="#"><i class="ico--lock mr-1"></i> Zablokovat uživatele</a>
+                            <a class="block px-2 py-3" href="#"><i class="ico--lock text-2xs mr-1"></i> Zablokovat uživatele</a>
                           </li>
                         </ul>
                       </div>
@@ -249,7 +249,7 @@
               </div>
             </div>
             <div class="flex items-start p-2 -ml-2 opacity-25 hover:opacity-100 transition-opacity duration-200">
-              <img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
+              <img src="{{ img.avatar.src }}" class="w-14 h-14 rounded mr-3">
               <div class="flex-1">
                 <div class="mb-1">
                   <div class="flex justify-between">
@@ -267,7 +267,36 @@
                         <i class="ico--dots-three-vertical cursor-pointer"></i>
                         <ul class="dropdown__content text-xs whitespace-no-wrap">
                           <li class="dropdown__content-item bg-white hover:bg-grey-125">
-                            <a class="block px-2 py-3" href="#"><i class="ico--lock mr-1"></i> Zablokovat uživatele</a>
+                            <a class="block px-2 py-3" href="#"><i class="ico--lock text-2xs mr-1"></i> Zablokovat uživatele</a>
+                          </li>
+                        </ul>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <p class="text-black leading-normal">{{ excerpt.medium }}</p>
+              </div>
+            </div>
+            <div class="flex items-start p-2 -ml-2 opacity-25 hover:opacity-100 transition-opacity duration-200">
+              <img src="{{ img.avatar.src }}" class="w-14 h-14 rounded mr-3">
+              <div class="flex-1">
+                <div class="mb-1">
+                  <div class="flex justify-between">
+                    <div class="flex items-center">
+                      <span class="font-bold">{{ person.first }} {{ person.last }}</span>
+                      <span class="text-grey-200 text-sm ml-2">KS Pardubický kraj</span>
+                      <span class="text-grey-200 ml-1 text-sm">@ 11:30</span>
+                      {{> molecules-chip(classes: "chip--cyan-200 chip--condensed ml-2", cta: "Návrh postupu")}}
+                      {{> molecules-chip(classes: "chip--red-600 chip--condensed ml-2", cta: "Odmítnutý předsedajícím")}}
+                      {{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Archivovaný")}}
+                    </div>
+                    <div class="flex items-center space-x-4">
+                      {{> molecules-thumbs }}
+                      <div class="dropdown dropdown--right">
+                        <i class="ico--dots-three-vertical cursor-pointer"></i>
+                        <ul class="dropdown__content text-xs whitespace-no-wrap">
+                          <li class="dropdown__content-item bg-white hover:bg-grey-125">
+                            <a class="block px-2 py-3" href="#"><i class="ico--lock text-2xs mr-1"></i> Zablokovat uživatele</a>
                           </li>
                         </ul>
                       </div>
@@ -290,11 +319,13 @@
       </div>
       <div>
         <div class="lg:card lg:elevation-10">
-          <div class="lg:card__body lg:pb-0">
-            <h2 class="head-heavy-sm mb-4">Oznámení</h2>
+          <div class="lg:card__body lg:py-6">
+            <h2 class="head-heavy-sm">Oznámení</h2>
           </div>
-          {{> organisms-event-feed(classes: "w-full", action: "ico--trashcan", itemPadding: "px-8 py-3") }}
-          <div class="lg:card__body">
+
+          {{> organisms-event-feed(withActionMenu: true, itemPadding: "px-8 py-3") }}
+
+          <div class="lg:card__body lg:py-6">
             {{> molecules-textarea-field(nolabel: true, placeholder: "Vyplňte text oznámení", rows: 3) }}
             {{> atoms-basic-button(cta: "Přidat oznámení", classes: "btn--black btn--hoveractive text-sm mt-2") }}
           </div>

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

@@ -2,12 +2,12 @@
 
 <div class="container container--wide pt-8 lg:py-24">
   <article>
+    <div class="grid grid-cols-3 gap-8">
+      <div class="col-span-2 space-y-8">
         <div class="flex items-center justify-between mb-8">
-      <h1 class="head-alt-lg mb-0 pt-1 pr-8">Bod č. 1: Grilování leadera</h1>
+          <h1 class="head-alt-lg mb-0 pt-1 pr-8">Bod č. 1: Programové priority Pirátské strany pro sněmovní volby 2021</h1>
         </div>
 
-    <div class="grid grid-cols-3 gap-8">
-      <div class="col-span-2 space-y-8">
         <iframe width="100%" height="610" src="https://www.youtube.com/embed/73jJLspL8o8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 
         <section>
@@ -44,7 +44,7 @@
 
           <div class="space-y-6">
             <div class="flex items-start bg-yellow-100 bg-opacity-50 p-2 -ml-2">
-              <img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
+              <img src="{{ img.avatar.src }}" class="w-14 h-14 rounded mr-3">
               <div class="flex-1 overflow-hidden">
                 <div class="mb-1">
                   <div class="flex justify-between">
@@ -61,7 +61,7 @@
               </div>
             </div>
             <div class="flex items-start p-2 -ml-2">
-              <img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
+              <img src="{{ img.avatar.src }}" class="w-14 h-14 rounded mr-3">
               <div class="flex-1 overflow-hidden">
                 <div class="mb-1">
                   <div class="flex justify-between">
@@ -78,7 +78,7 @@
               </div>
             </div>
             <div class="flex items-start p-2 -ml-2">
-              <img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
+              <img src="{{ img.avatar.src }}" class="w-14 h-14 rounded mr-3">
               <div class="flex-1 overflow-hidden">
                 <div class="mb-1">
                   <div class="flex justify-between">
@@ -96,7 +96,7 @@
               </div>
             </div>
             <div class="flex items-start p-2 -ml-2 opacity-25 hover:opacity-100 transition-opacity duration-200">
-              <img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
+              <img src="{{ img.avatar.src }}" class="w-14 h-14 rounded mr-3">
               <div class="flex-1 overflow-hidden">
                 <div class="mb-1">
                   <div class="flex justify-between">
@@ -114,7 +114,7 @@
               </div>
             </div>
             <div class="flex items-start p-2 -ml-2 opacity-25 hover:opacity-100 transition-opacity duration-200">
-              <img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
+              <img src="{{ img.avatar.src }}" class="w-14 h-14 rounded mr-3">
               <div class="flex-1 overflow-hidden">
                 <div class="mb-1">
                   <div class="flex justify-between">
@@ -123,6 +123,45 @@
                       <span class="text-grey-200 text-sm ml-2">KS Pardubický kraj</span>
                       <span class="text-grey-200 ml-1 text-sm">@ 11:30</span>
                       {{> molecules-chip(classes: "chip--cyan-200 chip--condensed ml-2", cta: "Návrh postupu")}}
+                      {{> molecules-chip(classes: "chip--green-400 chip--condensed ml-2", cta: "Schválený")}}
+                      {{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Archivovaný")}}
+                    </div>
+                    {{> molecules-thumbs }}
+                  </div>
+                </div>
+                <p class="text-black leading-normal">{{ excerpt.medium }}</p>
+              </div>
+            </div>
+            <div class="flex items-start p-2 -ml-2 opacity-25 hover:opacity-100 transition-opacity duration-200">
+              <img src="{{ img.avatar.src }}" class="w-14 h-14 rounded mr-3">
+              <div class="flex-1 overflow-hidden">
+                <div class="mb-1">
+                  <div class="flex justify-between">
+                    <div class="flex items-center">
+                      <span class="font-bold">{{ person.first }} {{ person.last }}</span>
+                      <span class="text-grey-200 text-sm ml-2">KS Pardubický kraj</span>
+                      <span class="text-grey-200 ml-1 text-sm">@ 11:30</span>
+                      {{> molecules-chip(classes: "chip--cyan-200 chip--condensed ml-2", cta: "Návrh postupu")}}
+                      {{> molecules-chip(classes: "chip--red-600 chip--condensed ml-2", cta: "Zamítnutý")}}
+                      {{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Archivovaný")}}
+                    </div>
+                    {{> molecules-thumbs }}
+                  </div>
+                </div>
+                <p class="text-black leading-normal">{{ excerpt.medium }}</p>
+              </div>
+            </div>
+            <div class="flex items-start p-2 -ml-2 opacity-25 hover:opacity-100 transition-opacity duration-200">
+              <img src="{{ img.avatar.src }}" class="w-14 h-14 rounded mr-3">
+              <div class="flex-1 overflow-hidden">
+                <div class="mb-1">
+                  <div class="flex justify-between">
+                    <div class="flex items-center">
+                      <span class="font-bold">{{ person.first }} {{ person.last }}</span>
+                      <span class="text-grey-200 text-sm ml-2">KS Pardubický kraj</span>
+                      <span class="text-grey-200 ml-1 text-sm">@ 11:30</span>
+                      {{> molecules-chip(classes: "chip--cyan-200 chip--condensed ml-2", cta: "Návrh postupu")}}
+                      {{> molecules-chip(classes: "chip--red-600 chip--condensed ml-2", cta: "Odmítnutý předsedajícím")}}
                       {{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Archivovaný")}}
                     </div>
                     {{> molecules-thumbs }}
@@ -144,10 +183,11 @@
       </div>
       <div>
         <div class="lg:card lg:elevation-10">
-          <div class="lg:card__body lg:pb-0">
-            <h2 class="head-heavy-sm mb-4">Oznámení</h2>
+          <div class="lg:card__body lg:py-6">
+            <h2 class="head-heavy-sm">Oznámení</h2>
           </div>
-          {{> organisms-event-feed(classes: "w-full", itemPadding: "px-8 py-4") }}
+
+          {{> organisms-event-feed(itemPadding: "px-8 py-4") }}
         </div>
       </div>
     </div>

source/css/molecules/chips.pcss

@@ -36,6 +36,9 @@
 .chip--green-300 {
   @apply bg-green-300 text-white;
 }
+.chip--green-400 {
+  @apply bg-green-400 text-white;
+}
 .chip--orange-300 {
   @apply bg-orange-200 text-white;
 }

tailwind.config.js

@@ -49,6 +49,7 @@ module.exports = {
       },
       spacing: {
         '0/5': '0.125rem',
+        '14': '3.5rem',
         '28': '7rem',
         '36': '9rem',
         '44': '11rem',
@@ -111,7 +112,8 @@ module.exports = {
       },
       'green': {
         '200': '#92c6ab',
-        '300': '#77cea1',
+        '300': '#76cc9f',
+        '400': '#4ca971',
       },
       'yellow': {
         '100': '#fff7bf',
@@ -237,9 +239,13 @@ module.exports = {
           text: 'white',
           background: 'cyan.200',
         },
-        'green-200': {
+        'green-300': {
           text: 'white',
-          background: 'green.200',
+          background: 'green.300',
+        },
+        'green-400': {
+          text: 'white',
+          background: 'green.400',
         },
         'orange-300': {
           text: 'white',