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

@@ -44,7 +44,7 @@
 }
 
 .candidate-table-row__affiliation {
-  @apply flex items-center justify-start whitespace-no-wrap py-1 pl-6 pr-4;
+  @apply flex items-center justify-start whitespace-nowrap py-1 pl-6 pr-4;
   grid-area: affiliation;
 }
 

source/css/molecules/chips.pcss

@@ -4,8 +4,7 @@
     py-2 px-3
     text-xs
     font-bold leading-none tracking-normal
-    cursor-pointer
-    whitespace-no-wrap;
+    whitespace-nowrap;
 }
 
 .chip--condensed {
@@ -36,6 +35,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;
 }

source/css/molecules/content-block.pcss

@@ -65,6 +65,10 @@
     @apply text-sm;
   }
 
+  pre {
+    line-height: 1;
+  }
+
   /* Contact lines are quite frequent so these are blacklisted for anchor style specifically. */
   a:not(.contact-line):not(.content-block--nostyle) {
     @apply underline;

source/css/molecules/form-field.pcss

@@ -14,24 +14,33 @@
     @apply absolute w-full h-full pointer-events-none;
 
     content: "";
-    box-shadow: inset 0 2px 6px 0 rgba(0,0,0,.1);
+    box-shadow: inset 0 2px 6px 0 rgba(0,0,0,.05);
   }
 
-  &,
-  &--row-items {
+  /* Allow bypass defualt positioning */
+  &:not(.form-field__wrapper--freeform) {
     .form-field__control + .form-field__control {
       @apply ml-4;
     }
   }
 
-  &--col-items {
+}
+
+.form-field__wrapper--row-items {
+  @apply flex-row;
+
+  .form-field__control + .form-field__control {
+    @apply ml-4 mt-0;
+  }
+}
+
+.form-field__wrapper--col-items {
   @apply flex-col;
 
   .form-field__control + .form-field__control {
     @apply ml-0 mt-4;
   }
 }
-}
 
 .form-field__error,
 .form-field__help-text {

source/css/molecules/modal.pcss

+.modal-blur {
+  /* Add the blur effect */
+  /* filter: blur(8px);
+  -webkit-filter: blur(8px); */
+}
+
+.modal__overlay {
+  @apply
+    fixed
+    top-0 left-0 bottom-0 right-0
+    z-50
+    flex items-center flex-row
+    bg-grey-125 bg-opacity-75
+    cursor-pointer overflow-auto;
+}
+
+.modal__content {
+  @apply
+    inline-block
+    flex flex-row flex-grow items-center justify-center
+    max-w-full
+    h-full
+    m-auto
+    cursor-auto pointer-events-none outline-none;
+}
+
+.modal__container {
+  @apply
+    h-auto
+    p-3
+    pointer-events-auto
+    md:p-0;
+
+  .modal__container-body {
+    @apply bg-white relative;
+  }
+}
+
+.modal__close {
+  @apply
+    absolute
+    right-0
+    top-0
+    h-8
+    w-8
+    flex
+    items-center
+    justify-center
+    z-50
+    m-auto
+    text-black
+    bg-white;
+}
+
+.ReactModal__Body--open {
+  @apply overflow-hidden;
+}

source/css/organisms/candidate-card-list.pcss

 .candidate-card-list {
-  @apply grid grid-flow-row gap-0 row-gap-4;
+  @apply grid grid-flow-row gap-0 gap-y-4;
 }
 
-@responsive {
 .candidate-card-list__item-wrapper {
   @apply px-2 border-r border-grey-100;
 }
@@ -14,4 +13,3 @@
 .candidate-card-list__item-wrapper--noborder {
   @apply border-0;
 }
-}

source/css/organisms/footer.pcss

@@ -22,12 +22,12 @@
     @apply gap-4;
 
     grid-template-areas: "brand main-links social";
-    grid-template-columns: 25% 1fr 25%;
+    grid-template-columns: 34% 1fr 25%;
   }
 }
 
 .footer-collapsible__toggle {
-  @apply flex items-center cursor-pointer;
+  @apply flex items-center cursor-pointer lg:cursor-auto;
 
   &:after {
     content: "\e925";
@@ -40,11 +40,7 @@
     transform: rotate(-180deg);
   }
 
-  @screen lg {
-    @apply cursor-auto;
-
   &:after {
-      @apply hidden;
-    }
+    @apply lg:hidden
   }
 }

source/css/organisms/hero.pcss

 .hero {
-  @apply py-4;
-
-  @screen md {
-    @apply py-24;
+  @apply py-8 md:py-24;
 }
+
+.hero--condensed {
+  @apply py-8 md:py-16;
 }
 
 .hero--image {

source/css/organisms/navbar.pcss

@@ -59,7 +59,7 @@
 }
 
 .navbar-menu__submenu .navbar-menu__link {
-  @apply text-lg text-grey-200 font-body normal-case leading-normal pl-4 whitespace-no-wrap;
+  @apply text-lg text-grey-200 font-body normal-case leading-normal pl-4 whitespace-nowrap;
 }
 
 .navbar-menu__link,

source/css/organisms/subnav.pcss

@@ -8,19 +8,11 @@
 
 .subnav-aside__close,
 .subnav-aside__close:hover {
-  @apply hidden absolute text-3xl pr-8 cursor-pointer right-0 no-underline;
-
-  @screen xl {
-    @apply block;
-  }
+  @apply hidden absolute text-3xl pr-8 cursor-pointer right-0 no-underline xl:block;
 }
 
 .subnav-aside__item {
-  @apply absolute w-full opacity-0 pointer-events-none transition duration-500 py-4 bg-white elevation-21 z-50;
-
-  @screen lg {
-    @apply py-8;
-  }
+  @apply absolute w-full opacity-0 pointer-events-none transition duration-500 py-4 bg-white elevation-21 z-50 lg:py-8;
 }
 
 .subnav-aside__item--visible {

source/css/organisms/vertical-navbar.pcss

+.vertical-navbar {
+  @apply p-8 border-l border-grey-100 bg-grey-50 bg-opacity-50;
+}
+
+.vertical-navbar__items {
+  @apply h-allcaps leading-loose;
+}
+
+.vertical-navbar__item--active {
+  @apply font-bold bg-grey-125 block -mx-8 px-8;
+}

source/css/style.pcss

-@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Roboto+Condensed:wght@300;400;700&family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400&display=swap');
+@import url('https://gfonts.pirati.cz/css2?family=Bebas+Neue&family=Roboto+Condensed:wght@300;400;700&family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400&display=swap');
 
 /* Icons */
 @import "./atoms/icons.pcss";
@@ -15,9 +15,14 @@
 */
 @import "tailwindcss/components";
 
+/* Tippy.js styles */
+@import 'tippy.js/dist/tippy.css';
+
 /**
  * Custom components
  */
+@import "./atoms/animations.pcss";
+@import "./atoms/alert.pcss";
 @import "./atoms/avatar.pcss";
 @import "./atoms/card.pcss";
 @import "./atoms/contact-line.pcss";
@@ -30,10 +35,13 @@
 @import "./atoms/icons.pcss";
 @import "./atoms/list.pcss";
 @import "./atoms/paragraph.pcss";
+@import "./atoms/full-calendar.pcss";
 @import "./atoms/quotation.pcss";
 @import "./atoms/social-icon.pcss";
 @import "./atoms/super-button.pcss";
 @import "./atoms/table.pcss";
+@import "./atoms/text-shadow.pcss";
+@import "./atoms/tooltip.pcss";
 
 @import "./molecules/article-card.pcss";
 @import "./molecules/badge.pcss";
@@ -47,6 +55,7 @@
 @import "./molecules/dropdown-button.pcss";
 @import "./molecules/flip-clock.pcss";
 @import "./molecules/form-field.pcss";
+@import "./molecules/modal.pcss";
 @import "./molecules/pagination.pcss";
 @import "./molecules/program-point-list.pcss";
 @import "./molecules/social-icon-group.pcss";
@@ -59,8 +68,10 @@
 @import "./organisms/navbar.pcss";
 @import "./organisms/subnav.pcss";
 @import "./organisms/region-map.pcss";
+@import "./organisms/vertical-navbar.pcss";
 
 @import "./templates/candidate-detail.pcss";
+@import "./templates/cf2021.pcss";
 
 /**
 * This injects Tailwind's utility classes and any utility classes registered
@@ -70,12 +81,12 @@
 
 ::-moz-selection {
   color: theme("colors.white");
-  background: theme("colors.grey.500");
+  background: theme("colors.cyan.300");
 }
 
 ::selection {
   color: theme("colors.white");
-  background: theme("colors.grey.500");
+  background: theme("colors.cyan.300");
 }
 
 :root {
@@ -112,3 +123,14 @@ a.icon-link:hover {
   /* Avoid gaps between inline-block elements */
   font-size: 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;
+}
+
+.iframe-container iframe {
+  @apply absolute top-0 left-0 w-full h-full;
+}

source/css/templates/candidate-detail.pcss

-.candidate-detail__hero {
-  z-index: -1;
-}
-
 .candidate-detail__sidebar {
-  @apply bg-white;
+  @apply bg-white z-10;
 
   @screen lg {
     margin-top: -6rem;

source/css/templates/cf2021.pcss

+.cf2021 {
+  @apply grid gap-8;
+
+  grid-template-areas: "title"
+                       "video"
+                       "notifications"
+                       "posts";
+
+  @screen lg {
+    grid-template-areas: "title title"
+                         "video notifications"
+                         "posts notifications";
+    grid-template-rows: auto auto 1fr;
+    grid-template-columns: theme("width.7/12") 1fr;
+  }
+
+  @screen xl {
+    grid-template-columns: theme("width.2/3") 1fr;
+
+  }
+}
+
+.cf2021__title {
+  grid-area: title;
+}
+
+.cf2021__video {
+  grid-area: video;
+}
+
+.cf2021__notifications {
+  grid-area: notifications;
+}
+
+.cf2021__posts {
+  grid-area: posts;
+}

source/icons/demo-files/demo.css

@@ -147,19 +147,19 @@ p {
   font-size: 16px;
 }
 .fs1 {
-  font-size: 20px;
+  font-size: 32px;
 }
 .fs2 {
   font-size: 32px;
 }
 .fs3 {
-  font-size: 32px;
+  font-size: 24px;
 }
 .fs4 {
-  font-size: 32px;
+  font-size: 20px;
 }
 .fs5 {
-  font-size: 24px;
+  font-size: 32px;
 }
 .fs6 {
   font-size: 28px;