feat: cf2021 responsivness

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

@@ -16,7 +16,7 @@
         </div>
       {{/ withActionMenu }}
     </div>
-    <span class="leading-tight">{{ excerpt.short }}</span>
+    <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="flex items-center justify-between mb-2">
@@ -35,7 +35,7 @@
         </div>
       {{/ withActionMenu }}
     </div>
-    <span class="leading-tight">{{ excerpt.short }}</span>
+    <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="flex items-center justify-between mb-2">
@@ -57,7 +57,7 @@
         </div>
       {{/ withActionMenu }}
     </div>
-    <span class="leading-tight">{{ excerpt.short }}</span>
+    <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="flex items-center justify-between mb-2">
@@ -80,7 +80,7 @@
         </div>
       {{/ withActionMenu }}
     </div>
-    <span class="leading-tight mb-2">{{ excerpt.short }}</span>
+    <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="flex items-center justify-between mb-2">
@@ -102,7 +102,7 @@
         </div>
       {{/ withActionMenu }}
     </div>
-    <span class="leading-tight">{{ excerpt.short }}</span>
+    <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="flex items-center justify-between mb-2">
@@ -121,7 +121,7 @@
         </div>
       {{/ withActionMenu }}
     </div>
-    <span class="leading-tight">{{ excerpt.short }}</span>
+    <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="flex items-center justify-between mb-2">
@@ -140,6 +140,6 @@
         </div>
       {{/ withActionMenu }}
     </div>
-    <span class="leading-tight"><strong>{{ person.first }} {{ person.last }}</strong> byl zablokován.</span>
+    <span class="leading-tight text-sm lg:text-base"><strong>{{ person.first }} {{ person.last }}</strong> byl zablokován.</span>
   </div>
 </div>

source/css/style.pcss

@@ -62,6 +62,7 @@
 @import "./organisms/region-map.pcss";
 
 @import "./templates/candidate-detail.pcss";
+@import "./templates/cf2021.pcss";
 
 /**
 * This injects Tailwind's utility classes and any utility classes registered

source/css/templates/cf2021.pcss

+.cf2021 {
+  @apply grid gap-8;
+
+  grid-template-areas: "video"
+                       "notifications"
+                       "posts";
+
+  @screen lg {
+    grid-template-areas: "video notifications"
+                         "posts notifications";
+    /* Needs to match .candidate-card__avatar width */
+    grid-template-columns: theme("width.2/3") 1fr;
+  }
+}
+
+.cf2021__video {
+  grid-area: video;
+}
+
+.cf2021__notifications {
+  grid-area: notifications;
+}
+
+.cf2021__posts {
+  grid-area: posts;
+}