jekyll-theme-pirati 5.3.1 → 6.0.0

data/_sass/components/typography.scss

@@ -1,54 +1,72 @@
 @mixin emphasizedAnchor {
   text-decoration: underline;
 
-  &:hover,
   &.active {
-    background-color: $primary-color;
-    color: $secondary-color;
+    font-weight: bold;
   }
 
 }
 
 @mixin headlineAnchor {
-  text-decoration: underline;
+  // &:hover {
+  //   text-decoration: underline;
+  // }
 }
 
-// Makes classes for each headline style that can be used to override the looks:
-// t-h1, t-h2, ...
-@each $size, $headers in $header-sizes {
-  @include breakpoint($size) {
-    @each $header, $font-size in $headers {
-      .t-#{$header} {
-        font-size: rem-calc($font-size);
+@mixin headerStyle($header, $type: main) {
+  $settings: map-get($headers, $type);
+
+  @each $breakpointSize, $headers in map-get($settings, sizes) {
+    @include breakpoint($breakpointSize) {
+      font-family: #{map-get($settings, family)};
+      font-size: rem-calc(map-get($headers, $header));
+      font-weight: map-get($settings, weight);
+
+      $letter-spacing: map-get($settings, letter-spacing);
+
+      @if ($letter-spacing) {
+        letter-spacing: $letter-spacing;
       }
     }
   }
 }
 
+@function getHeaderSettings($prop, $type: main) {
+  $settings: map-get($headers, $type);
+  @return map-get($settings, $prop);
+}
+
+@mixin fontFeatures() {
+  font-feature-settings: "kern", "onum", "liga";
+  font-kerning: auto;
+  text-rendering: optimizeLegibility;
+}
+
 .t-subheader {
   font-weight: normal;
   color: $dark-gray;
 }
 
-.t-h {
-  font-family: $header-font-family;
-}
-
 // Special page title header
 .c-page-title {
-  font-size: 2.55rem;
-  margin-bottom: 0.85em;
+  margin-bottom: 0;
 
-  @include breakpoint(640px down) {
-    padding-top: 0.7em;
-  }
+  @include headerStyle('h2', super);
 }
 
 // Page header section with provided whitespace for clean separation from the content
 .c-page-header {
+  padding-top: 2rem;
   padding-bottom: 2rem;
 }
 
+.c-top-sub-nav + .page-content .o-section,
+.c-top-sub-nav + .page-content .c-page-header {
+  @include breakpoint(medium) {
+    padding-top: 0;
+  }
+}
+
 // The block will have larger text for better readability. Often used with
 // conjuction to .c-content-block
 .c-emphasized-text {
@@ -63,3 +81,6 @@
   @include headlineAnchor();
 }
 
+.t-font-features {
+  @include fontFeatures();
+}

data/_sass/components/vertical-navigation.scss

@@ -11,8 +11,9 @@ $vn-ns: '';
 }
 
 .#{$vn-ns}c-vertical-navigation .#{$vn-ns}c-vertical-navigation__title {
-  font-weight: 500;
-  font-size: 1.3rem;
+  text-transform: uppercase;
+
+  @include headerStyle('h5', sub);
 }
 
 .#{$vn-ns}c-vertical-navigation .#{$vn-ns}c-vertical-navigation-items {

data/_sass/components/widget-accordion.scss

@@ -1,6 +1,6 @@
 .c-widget-accordion {
   @include accordion-container;
-  background: $primary-color;
+  background: $light-gray;
 }
 
 .c-widget-accordion + .c-widget-accordion {
@@ -8,27 +8,22 @@
 }
 
 .c-widget-accordion-link {
-  position: relative;
-  font-family: $header-font-family-sub;
-  font-size: 1.5rem;
-  padding: 0;
-  padding-left: 1rem;
-  display: table;
-  height: 50px;
-  min-height: 50px;
-  line-height: 1;
+  display: block;
   width: 100%;
-  background: $primary-color !important;
+  padding: .5rem 1rem;
+  background-color: $medium-gray;
+  overflow: hidden;
+  @include headerStyle('h3', alt);
 
   &:before {
-    position: absolute;
-    right: 1rem;
-    top: 50%;
-    content: '\f196';
-    font-family: 'FontAwesome';
-    font-size: 1.4rem;
-    margin-top: -0.7rem;
-    color: $white;
+    display: none;
+  }
+
+  &--nofill {
+    background: $body-background;
+    padding-left: 0;
+
+    @include headerStyle('h2', alt);
   }
 }
 
@@ -37,68 +32,28 @@
     content: '\f147';
   }
 
-  .c-widget-accordion-link.c-widget-accordion-link--fb:before {
-    content: '\f09a';
-    margin-right: 0.5rem;
-  }
+  .c-widget-accordion-link.c-widget-accordion-link--fb {
+    background: $facebook-color;
 
-  .c-widget-accordion-link.c-widget-accordion-link--twitter:before {
-    content: '\f099';
-    margin-right: 0.5rem;
+    .c-widget-accordion__title {
+      color: $white;
+    }
   }
 
-  .c-widget-accordion-link.c-widget-accordion-link--fb:hover,
-  .c-widget-accordion-link.c-widget-accordion-link--twitter:hover {
-    background: #2785ce !important;
-    cursor: default;
+  .c-widget-accordion-link.c-widget-accordion-link--cal {
+    background: #df3a3f;
+
+    .c-widget-accordion__title {
+      color: $white;
+    }
   }
 }
 
-.c-widget-accordion .c-widget-accordion__icon,
 .c-widget-accordion .c-widget-accordion__title {
-  display: table-cell;
-  vertical-align: middle;
-  line-height: normal;
-  color: $white;
+  color: $primary-color;
   white-space: nowrap;
 }
 
-.c-widget-accordion .c-widget-accordion__title--noicon {
-  width: 100%;
-}
-
-.c-widget-accordion .c-widget-accordion__title--plain {
-  font-family: $body-font-family;
-  font-weight: 600;
-  font-size: 1.15rem;
-}
-
-.c-widget-accordion .c-widget-accordion__icon {
-  opacity: 0.2;
-  font-size: 2rem;
-  padding-left: 1rem;
-  line-height: 0;
-
-  i.fa-lg {
-    font-size: 3rem;
-  }
-}
-
-.c-widget-accordion
-.c-widget-accordion__icon.c-widget-accordion__icon--bottom {
-  vertical-align: bottom;
-}
-
-.c-widget-accordion
-.c-widget-accordion__icon.c-widget-accordion__icon--bottomPulled i {
-  margin-bottom: -0.2em;
-}
-
-.c-widget-accordion
-.c-widget-accordion__icon.c-widget-accordion__icon--top {
-  vertical-align: top;
-}
-
 .c-widget-accordion span:last-child {
   white-space: nowrap;
   width: 100%;
@@ -106,8 +61,6 @@
 
 .c-widget-accordion .c-widget-accordion-content {
   padding: 1rem;
-  background: $white;
-  border: 3px $primary-color solid;
 
   &.c-widget-accordion-content--nopad {
     padding: 0;

data/_sass/objects/section.scss

@@ -1,10 +1,10 @@
 $section-ns: '';
 
 .#{$section-ns}o-section {
-  padding: 35px 0;
+  padding: 2rem 0;
 
   @include breakpoint(mobile down) {
-    padding: 10px 0;
+    padding: 1rem 0;
   }
 }
 
@@ -137,20 +137,21 @@ $section-ns: '';
 }
 
 .#{$section-ns}o-section.#{$section-ns}o-section--smaller {
-  padding: 10px 0;
+  padding: 1rem 0;
 }
 
 
 .#{$section-ns}o-section.#{$section-ns}o-section--bigger {
   @include breakpoint(mobile down) {
-    padding: 20px 0;
+    padding: 1rem 0;
   }
 }
 
 .#{$section-ns}o-section--noSpaceBottom {
   padding-bottom: 0;
+
   @include breakpoint(mobile down) {
-    padding: 20px 0;
+    padding: 1rem 0;
   }
 }
 
@@ -159,21 +160,20 @@ $section-ns: '';
 }
 
 .#{$section-ns}o-section.#{$section-ns}o-section--spaceBot {
-
-  padding-bottom: 50px;
+  padding-bottom: 3rem;
 
   @include breakpoint(large down) {
-    padding-bottom: 20px;
+    padding-bottom: 2rem;
   }
 
   @include breakpoint(mobile down) {
-    padding-bottom: 15px;
+    padding-bottom: 1rem;
   }
 
 }
 
 .#{$section-ns}o-section.#{$section-ns}o-section--darker {
-  background: lighten($primary-color, 20%);
+  background: $ternary-color;
 }
 
 .#{$section-ns}o-section-inner--leftBlock {
@@ -193,29 +193,19 @@ $section-ns: '';
 .#{$section-ns}o-section .#{$section-ns}o-section-header {
   position: relative;
   color: $primary-color;
-  border-bottom: 3px solid $primary-color;
-  margin-top: 6px;
-  padding-bottom: 2px;
-  margin-bottom: -2px;
-}
 
-.#{$section-ns}o-section .#{$section-ns}o-section__heading {
-  font-size: 1.8rem;
-  color: $primary-color;
+  &--bordered {
+    border-bottom: 1px solid $ternary-color;
+  }
 
-  &.#{$section-ns}o-section__heading--small {
-    font-size: 1.5rem;
-    margin-bottom: 0.75rem;
+  &--indented {
+    margin-bottom: 2rem;
   }
 }
 
-.#{$section-ns}o-section .#{$section-ns}o-section-header .#{$section-ns}o-section__dateUpdated {
-  position: absolute;
-  bottom: 13px;
-  right: 0;
-  color: $body-font-color;
+.#{$section-ns}o-section__heading {
+  @include headerStyle('h3', super);
 
-  @include breakpoint(mobile down) {
-    display: none;
-  }
+  color: $primary-color;
+  margin-bottom: 0;
 }

data/_sass/pirati.scss

@@ -1,6 +1,5 @@
 @import 'settings';
 @import 'fonts';
-@import 'social-palette';
 
 @import "foundation-sites/scss/foundation";
 @include foundation-everything;
@@ -11,39 +10,46 @@
 // Import Components
 @import 'components/typography';
 
-@import 'components/program';
+@import 'components/academic-title';
 @import 'components/article-listing';
-@import 'components/Person';
-@import 'components/footer';
-@import 'components/vertical-navigation';
-@import 'components/icon';
+@import 'components/banner';
+@import 'components/blockquote';
+@import 'components/card';
 @import 'components/contact-bar';
+@import 'components/content-block';
+@import 'components/content-card';
 @import 'components/corner-ribbon';
+@import 'components/cta-button';
+@import 'components/footer';
 @import 'components/header-bar';
-@import 'components/top-bar';
-@import 'components/banner';
-@import 'components/top-sub-nav';
-@import 'components/widget-accordion';
-@import 'components/content-card';
-@import 'components/metadata-block';
-@import 'components/multicolumn';
 @import 'components/headline-media';
+@import 'components/hero';
 @import 'components/hp-banner';
-@import 'components/card';
+@import 'components/icon';
+@import 'components/intention-map';
+@import 'components/member-list';
+@import 'components/metadata-block';
+@import 'components/multicolumn';
+@import 'components/pagination';
+@import 'components/person';
+@import 'components/profile-badge';
+@import 'components/program';
+@import 'components/simple-accordion';
+@import 'components/Slider';
+@import 'components/suggest-improvement';
 @import 'components/tag';
 @import 'components/tile';
+@import 'components/top-bar';
+@import 'components/top-sub-nav';
+@import 'components/vertical-navigation';
+@import 'components/widget-accordion';
 @import 'components/widget-share-box';
 @import 'components/widget-simple-text';
-@import 'components/pagination';
-@import 'components/Slider';
-@import 'components/suggest-improvement';
-@import 'components/simple-accordion';
-@import 'components/hero';
-@import 'components/blockquote';
-@import 'components/cta-button';
-@import 'components/content-block';
 
 // Import Objects
 @import 'objects/section';
 @import 'objects/media';
 @import 'objects/space';
+
+// Import header styles -- these go last to be able to override things
+@import 'utilities/header-styles';

data/_sass/utilities/header-styles.scss

@@ -0,0 +1,16 @@
+@each $headingClass, $headingSettings in $headers {
+  @if ($headingClass == 'main') {
+    @each $variant in map-get($headingSettings, variants) {
+      #{$variant},
+      .t-#{$variant} {
+        @include headerStyle($variant, $headingClass);
+      }
+    }
+  } @else {
+    @each $variant in map-get($headingSettings, variants) {
+      .t-#{$variant}-#{$headingClass} {
+        @include headerStyle($variant, $headingClass);
+      }
+    }
+  }
+}

data/_sass/utilities/utilities.scss

@@ -41,6 +41,10 @@
   margin-right: 1rem;
 }
 
+.u-4margin--right {
+  margin-right: 4rem;
+}
+
 .u-1margin--top {
   margin-top: 1rem;
 }
@@ -99,19 +103,20 @@
 }
 
 .u-inverted {
-  color: $secondary-color !important;
-
-  a {
-    color: $secondary-color !important;
-  }
+  color: $dark-gray !important;
 
+  a,
   h1,
   h2,
   h3,
   h4,
   h5,
   h6 {
-    color: $secondary-color !important;
+    color: $dark-gray;
+  }
+
+  a:hover {
+    color: $secondary-color;
   }
 }