jekyll-theme-pirati 5.3.1 → 6.0.0

data/_sass/components/program.scss

@@ -1,6 +1,6 @@
 $program-item-ns: '';
 
-.#{$program-item-ns}c-program-key-point-list {
+.c-program-key-point-list {
     dt:not(:first-of-type)::before {
         content: "\A";
         white-space: pre-wrap;
@@ -19,11 +19,11 @@ $program-item-ns: '';
     margin-top: 1.5rem;
 }
 
-.#{$program-item-ns}c-program-intro {
+.c-program-intro {
     padding: 1.25rem;
 }
 
-.#{$program-item-ns}c-program-items {
+.c-program-items {
     display: flex;
     flex-wrap: wrap;
     flex-direction: row;
@@ -33,18 +33,17 @@ $program-item-ns: '';
     }
 }
 
-.#{$program-item-ns}c-program-items__item {
+.c-program-items__item {
     display: flex;
     max-width: 100%;
 }
 
-.#{$program-item-ns}c-program-items__item-wrap {
+.c-program-items__item-wrap {
     display: flex;
     color: $white;
-    border: 3px $primary-color solid;
 }
 
-.#{$program-item-ns}c-program-items__item-inner {
+.c-program-items__item-inner {
     a:not(.button) {
         color: $black;
         // color: $white;
@@ -52,125 +51,100 @@ $program-item-ns: '';
     }
 }
 
-.#{$program-item-ns}c-program-items__item + .#{$program-item-ns}c-program-items__item {
+.c-program-items__item + .c-program-items__item {
   margin-top: 1.5rem;
 }
 
-.#{$program-item-ns}c-program-candidates {
+.c-program-candidates {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
 }
 
-.#{$program-item-ns}c-program-candidates__others {
+.c-program-candidate-badge {
+  display: flex; // keep the height uniform
   width: 100%;
-}
+  margin-bottom: 1.5rem;
 
-.#{$program-item-ns}c-program-candidates__row {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    margin-left: -0.75rem;
-    margin-right: -0.75rem;
-    margin-bottom: 1.5rem;
-}
-
-.#{$program-item-ns}c-program-candidate-badge {
-    display: flex; // keep the height uniform
-
-    .#{$program-item-ns}c-program-candidate-badge__body {
-      width: 100%;
-      display: flex;
-      flex-direction: column;
-      border: 3px $primary-color solid;
-
-      .#{$program-item-ns}c-program-candidate-badge__description {
-          padding: 1rem;
-      }
-
-      .#{$program-item-ns}c-program-candidate-badge__profession {
-          display: block;
-          margin-bottom: .25rem;
-          font-weight: 600;
-      }
-
-      .#{$program-item-ns}c-program-candidate-badge__bio {
-          margin-top: 1rem;
-          margin-bottom: 0;
-
-          @include breakpoint(medium down) {
-              display: none;
-          }
-      }
-    }
+}
 
-    .#{$program-item-ns}c-program-candidate-badge__avatar {
-        position: relative;
-        flex-shrink: 0;
-    }
+.c-program-candidate-badge__body {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  background: $light-gray;
+  position: relative;
 
-    .#{$program-item-ns}c-program-candidate-badge__rank {
-        display: block;
-        position: absolute;
-        right: 10px;
-        bottom: -20px;
-        background-color: $black;
-        border-radius: 50%;
-        width: 40px;
-        height: 40px;
-        line-height: 34px;
-        text-align: center;
-        font-size: 1.15em;
-        font-weight: bold;
-        color: $white;
-        border: 3px $white solid;
-
-        span {
-            // Compensate for the dot sign.
-            padding-left: 3px;
-        }
-    }
 }
 
-@mixin candidate-landscape {
+.c-program-candidate-badge__description {
+    padding: 1rem;
     width: 100%;
+    display: flex;
+    flex-direction: column;
+}
 
-    .#{$program-item-ns}c-program-candidate-badge__body {
-        flex-direction: row;
-    }
+.c-program-candidate-badge__name {
+  margin-top: auto;
+  margin-bottom: 0;
+  padding-right: 30px; // space for the rank circle
 
-    .#{$program-item-ns}c-program-candidate-badge__avatar {
-        width: calc(33.3333% - 0.75rem);
-    }
+  @include headerStyle('h6', super);
 
-    .#{$program-item-ns}c-program-candidate-badge__rank {
-        bottom: 10px;
-        right: -20px;
-    }
+  @include breakpoint(medium) {
+    padding-right: 45px; // space for the rank circle
 
-    .#{$program-item-ns}c-program-candidate-badge__description {
-        padding-left: 1.5rem;
-    }
+    @include headerStyle('h5', super);
+  }
 }
 
-.#{$program-item-ns}c-program-candidates__row .#{$program-item-ns}c-program-candidate-badge {
-    width: 33.3333333%;
-    padding-left: 0.75rem;
-    padding-right: 0.75rem;
+.c-program-candidate-badge__profession {
+    display: block;
+    font-weight: 300;
+}
 
-    @include breakpoint(small down) {
-        width: 100%;
-        margin-bottom: 1.5rem;
+.c-program-candidate-badge__bio {
+    margin-bottom: 0;
 
-        // note: match leader layout
-        @include candidate-landscape();
+    @include breakpoint(medium down) {
+        display: none;
     }
 }
 
-.#{$program-item-ns}c-program-candidate-badge.c-program-candidate-badge--leader {
-    @include candidate-landscape();
+.c-program-candidate-badge__avatar {
+    flex-shrink: 0;
+    max-width: calc(33.333% - 0.75rem);
+
+    @include breakpoint(medium) {
+      max-width: calc(225px - 0.75rem);
+    }
 }
 
-.#{$program-item-ns}c-program-candidate-badge.c-program-candidate-badge--leader + .#{$program-item-ns}c-program-candidates__others {
-    margin-top: 1.5rem;
+.c-program-candidate-badge__rank {
+    display: block;
+    position: absolute;
+    top: .5rem;
+    right: .5rem;
+    border-radius: 50%;
+    width: 30px;
+    height: 30px;
+    // Compensate for the font misalignment.
+    line-height: 31px;
+    text-align: center;
+    color: $black;
+    border: 2px $black solid;
+
+    @include headerStyle('h6', super);
+
+    @include breakpoint(medium) {
+      top: 1.5rem;
+      right: 1.5rem;
+      width: 45px;
+      height: 45px;
+      // Compensate for the font misalignment.
+      line-height: 45px;
+      border-width: 3px;
+
+      @include headerStyle('h5', super);
+    }
 }

data/_sass/components/simple-accordion.scss

@@ -49,6 +49,8 @@
 
 .c-simple-accordion__headline {
   margin: 0;
+
+  @include headerStyle('h2', alt);
 }
 
 .c-simple-accordion-content {

data/_sass/components/tile.scss

@@ -1,8 +1,8 @@
 .c-tile {
-  border: 3px $primary-color solid;
+  // border: 3px $primary-color solid;
 
   &.c-tile--fill {
-    background: $secondary-color;
+    background: $light-gray;
   }
 
   &.c-tile--inverted.c-tile--fill {

data/_sass/components/top-bar.scss

@@ -23,13 +23,14 @@
 .c-responsive-menu-toggle {
   display: inline-block;
   font-size: 1.15rem;
-  border: 1px solid $medium-gray;
+  border: 1px solid $dark-gray;
   transition: border .2s;
 }
   .c-responsive-menu-toogle__button {
     display: flex;
     align-items: center;
     padding: 0.7rem 1.25rem;
+    color: $dark-gray;
   }
 
   .c-responsive-menu-toggle__caption {
@@ -48,16 +49,7 @@
     z-index: 10;
     background: $light-gray;
     border-bottom: 3px $primary-color solid;
-
-    width: calc(100% + 2.5rem);
-    margin-left: -1.25rem;
-    margin-right: -1.25rem;
-  }
-
-  @include breakpoint(small down) {
-    width: calc(100% + 1.25rem);
-    margin-left: -0.625rem;
-    margin-right: -0.625rem;
+    width: 100%;
   }
 }
 
@@ -79,58 +71,45 @@
   }
 
   .c-responsive-menu__item a {
+    @include headerStyle('h5', sub);
+
     display: block;
     position: relative;
-    color: map-get($foundation-palette, dark);
-    text-transform: uppercase;
-    font-family: $header-font-family;
-    font-size: 1.25rem;
-    font-weight: 600;
-    margin: 0.7rem 1.25rem;
+    color: $dark-gray;
+    margin: 0.7rem 1rem 0;
     padding: 4px .25em 0; // 4px to compensate for font
+    transition: all .1s ease-in-out;
+    text-transform: uppercase;
+    letter-spacing: .01em;
 
     @include breakpoint(medium down) {
       padding: 1rem 1.8rem;
+      color: $primary-color;
     }
   }
 
   // Highlight active item in the menu.
-  .c-responsive-menu__item--active a,
-  .c-responsive-menu__item a:hover, {
-    color: $primary-color;
-  }
-
   .c-responsive-menu__item a:hover,
   .c-responsive-menu__item--active a {
-    background: $primary-color;
-    color: $secondary-color;
-  }
-
-  // Display '/' divider between menu items on desktop view.
-  .c-responsive-menu__item:not(.hide-for-medium):not(.hide-for-large) + .c-responsive-menu__item a {
     @include breakpoint(large) {
-      &:before {
-        content: '/';
-        width: 12px;
-        display: inline-block;
-        position: absolute;
-        top: -1px;
-        left: -27px;
-        font-size: 1.7rem;
-        color: $medium-gray;
-        border: 0px solid transparent;
-        margin-top: 0;
-      }
+      color: $secondary-color;
     }
   }
 
 .c-top-bar {
+  background: $ternary-color;
+  color: $secondary-color;
+  padding-bottom: .25rem;
   position: relative;
+}
+
+.c-top-bar__body {
   display: flex;
   align-items: center;
+  justify-content: space-between;
 
   @include breakpoint(medium down) {
-    padding: 1.5rem 0;
+    padding: 0 0 .5rem;
   }
 }
 
@@ -146,10 +125,10 @@
     @include breakpoint(medium down) {
       width: 115px;
     }
+  }
 
-    @include breakpoint(small down) {
-      display: none;
-    }
+  .c-top-bar__brand-image {
+    width: 100%;
   }
 
   // Responsive menu is second.
@@ -172,33 +151,48 @@
       margin-right: 1.5rem;
     }
 
-    .c-search {
+    @include breakpoint(small down) {
+      display: none;
+    }
+
+    .c-top-bar__search-container {
+      border-color: $dark-gray;
+      border-width: 1px;
+
       @include breakpoint(large) {
         margin: 1rem 0;
       }
 
       // On large screen, search confirm is at the very right of the container.
       // @see: order: 3.
-      .c-search__confirm {
+      .c-top-bar__search-confirm {
+        cursor: default;
+        color: $dark-gray;
+
         @include breakpoint(large) {
           padding-right: 0;
         }
       }
+
+      .c-top-bar__search-input {
+        background: $ternary-color;
+        appearance: textfield;
+        color: $white;
+
+        &::placeholder {
+          color: $dark-gray;
+          opacity: 1;
+        }
+
+        &:focus {
+          background: $ternary-color;
+        }
+      }
     }
   }
 
+
   .c-top-bar .c-responsive-menu-toggle {
     order: 4;
   }
 
-  // Divides top bar from the rest of the page.
-  .c-top-bar__divider {
-    clear: both;
-    display: block;
-    height: 5px;
-    margin-top: -3px;
-    background: $primary-color;
-    position: relative;
-    z-index: 9;
-  }
-

data/_sass/components/top-sub-nav.scss

@@ -1,29 +1,29 @@
 $tsb-ns: '';
 
-nav.#{$tsb-ns}c-top-sub-nav {
-  background: $light-gray;
-}
-
-.#{$tsb-ns}c-top-sub-nav .#{$tsb-ns}c-top-sub-nav-inner {
+.c-top-sub-nav .c-top-sub-nav-inner {
   display: flex;
-  padding-top: 2rem;
-  padding-bottom: 2rem;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
   overflow-y: hidden;
+  align-items: center;
 
   @include breakpoint(mobile down) {
     text-align: center;
     flex-direction: column;
   }
+
+  // This matches .o-section and .c-page-header padding which is stripped in this case.
+  @include breakpoint(medium) {
+    min-height: 4rem;
+  }
 }
 
-.#{$tsb-ns}c-top-sub-nav .#{$tsb-ns}c-top-sub-nav__heading {
-  font-size: 1.5rem;
-  font-weight: 500;
-  font-family: $header-font-family;
+.c-top-sub-nav .c-top-sub-nav__heading {
+
   margin: 0;
 }
 
-.#{$tsb-ns}c-top-sub-nav .#{$tsb-ns}c-top-sub-nav-divider {
+.c-top-sub-nav .c-top-sub-nav-divider {
   margin: 0 2rem;
 
   &:before {
@@ -42,16 +42,22 @@ nav.#{$tsb-ns}c-top-sub-nav {
   }
 }
 
-.#{$tsb-ns}c-top-sub-nav-items {
+.c-top-sub-nav .c-top-sub-nav__heading,
+.c-top-sub-nav .c-top-sub-nav__item {
+  font-size: 1.15rem;
+  font-weight: map-get(map-get($text, weight), default);
+  font-family: $body-font-family;
+}
+
+.c-top-sub-nav-items {
   list-style-type: none;
   margin-left: 0;
   margin-bottom: 0;
 }
 
-.#{$tsb-ns}c-top-sub-nav__item {
+.c-top-sub-nav__item {
   display: inline-block;
   margin-left: 0;
-  font-size: 1.15rem;
 
   a {
     text-decoration: underline;
@@ -61,8 +67,8 @@ nav.#{$tsb-ns}c-top-sub-nav {
     display: block;
   }
 }
-.#{$tsb-ns}c-top-sub-nav__item +
-.#{$tsb-ns}c-top-sub-nav__item {
+.c-top-sub-nav__item +
+.c-top-sub-nav__item {
   margin-left: 2rem;
 
   @include breakpoint(medium down) {