@mindful-web/marko-web-theme-monorail 1.0.0

package/scss/components/_newsletter-signup-modal.scss

@@ -0,0 +1,133 @@
+$theme-signup-modal-bg: $gray-200 !default;
+
+.popup-modal-wrapper {
+  $self: &;
+  &--display-overlay {
+    ~ .site-footer {
+      display: none;
+      margin-bottom: 0;
+    }
+    ~ .document-container {
+      height: 0;
+      overflow: hidden;
+    }
+  }
+  &__overlay {
+    z-index: 1499;
+    position: fixed;
+    background-color: rgba(0, 0, 0, .7);
+    top: 0;
+    bottom: 0;
+    width: 100%;
+    visibility: visible;
+    transition: visibility 0s, opacity 0.5s linear;
+    display: flex;
+    align-items: center;
+    .newsletter-signup-modal-button {
+      align-self: flex-end;
+    }
+  }
+}
+.popup-modal-wrapper__overlay {
+  #newsletter-signup-modal-center-column-inner {
+    position: absolute;
+    top: -12px;
+    right: -12px;
+    height: 40px;
+    width: 40px;
+    border-radius: 20px;
+    background-color: $white;
+  }
+  .newsletter-signup-banner {
+    background-color: $theme-signup-modal-bg;
+    display: flex;
+    flex-direction: row;
+    margin-top: 0;
+    padding: 3rem;
+    border: 5px solid $gray-800;
+    @include media-breakpoint-down(md) {
+      padding: 1.5rem;
+    }
+  }
+  .newsletter-signup-modal-center-column-outer {
+    position: relative;
+    margin-right: auto;
+    margin-left: auto;
+    width: 640px;
+    @include media-breakpoint-down(md) {
+      width: 320px;
+      max-width: calc(100 - $marko-web-document-container-gutter);
+    }
+  }
+}
+
+#newsletter-signup-modal {
+  display: none;
+}
+
+.newsletter-signup-banner {
+  $self: &;
+  &--modal {
+
+    #{ $self }__name {
+      @include skin-typography($style: "header-1");
+      margin-bottom: map-get($spacers, 2);
+      @include media-breakpoint-down(md) {
+        line-height: 1.25;
+      }
+    }
+
+    #{ $self }__description {
+      @include skin-typography($style: "teaser-text-1");
+      margin-bottom: map-get($spacers, block);
+    }
+
+    #{ $self }__left-col {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      @include media-breakpoint-down(md) {
+        display: none;
+      }
+    }
+    label[for="sign-on-email"] {
+      display: none;
+    }
+  }
+}
+
+.newsletter-signup-modal-fade-in {
+  display: block !important;
+  // PUT AT SAME LEVEL AS HEADER SO IT SITS ON TOP
+  z-index: 15000;
+  animation: fadeIn 0.5s;
+  -webkit-animation: fadeIn 0.5s;
+  -moz-animation: fadeIn 0.5s;
+  -o-animation: fadeIn 0.5s;
+  -ms-animation: fadeIn 0.5s;
+}
+
+@keyframes fadeIn {
+  0% { opacity: 0; }
+  100% { opacity: 1; }
+}
+
+@-moz-keyframes fadeIn {
+  0% { opacity: 0; }
+  100% { opacity: 1; }
+}
+
+@-webkit-keyframes fadeIn {
+  0% { opacity: 0; }
+  100% { opacity: 1; }
+}
+
+@-o-keyframes fadeIn {
+  0% { opacity: 0; }
+  100% { opacity: 1; }
+}
+
+@-ms-keyframes fadeIn {
+  0% { opacity: 0; }
+  100% { opacity: 1; }
+}

package/scss/components/_node-list.scss

@@ -0,0 +1,26 @@
+.node-list {
+  @include theme-card();
+
+  &__header,
+  &__footer {
+    &:first-child {
+      @include border-top-radius($theme-item-list-border-radius);
+    }
+
+    &:last-child {
+      @include border-bottom-radius($theme-item-list-border-radius);
+    }
+  }
+
+  &__header {
+    @include theme-card-header();
+    margin-bottom: 0;
+    &:empty {
+      display: none;
+    }
+
+    a {
+      @include theme-card-header-link();
+    }
+  }
+}

package/scss/components/_node.scss

@@ -0,0 +1,173 @@
+.node {
+  $self: &;
+
+  &__header {
+    font-family: $theme-item-header-font-family;
+    font-size: $theme-item-header-font-size;
+    font-weight: $theme-item-header-font-weight;
+    line-height: $theme-item-header-line-height;
+    color: $theme-item-header-color;
+    letter-spacing: $theme-item-header-letter-spacing;
+
+    a {
+      color: $theme-item-header-link-color;
+      text-decoration: $theme-item-header-link-decoration;
+      &:hover {
+        color: $theme-item-header-link-hover-color;
+        text-decoration: $theme-item-header-link-hover-decoration;
+      }
+    }
+  }
+
+  &__title {
+    @include theme-apply-fonts(
+      $font-family: $theme-item-title-font-family,
+      $font-size-sm: $theme-item-title-font-size-sm,
+      $font-size: $theme-item-title-font-size,
+      $font-weight: $theme-item-title-font-weight,
+      $letter-spacing: $theme-item-title-letter-spacing,
+      $line-height-sm: $theme-item-title-line-height-sm,
+      $line-height: $theme-item-title-line-height
+    );
+    margin-bottom: $theme-item-title-margin;
+    color: $theme-item-title-color;
+
+    a {
+      @include theme-max-lines(
+        $font-size: $theme-item-title-font-size,
+        $font-size-sm: $theme-item-title-font-size-sm,
+        $line-height: $theme-item-title-line-height,
+        $line-height-sm: $theme-item-title-line-height-sm,
+        $num: $theme-item-title-max-lines
+      );
+      color: $theme-item-title-link-color;
+      text-decoration: $theme-item-title-link-decoration;
+      &:hover {
+        color: $theme-item-title-link-hover-color;
+        text-decoration: $theme-item-title-link-hover-decoration;
+      }
+    }
+
+    &--large {
+      @include theme-apply-fonts(
+        $font-family: $theme-item-title-font-family,
+        $font-size-sm: $theme-item-title-large-font-size-sm,
+        $font-size: $theme-item-title-large-font-size,
+        $font-weight: $theme-item-title-large-font-weight,
+        $letter-spacing: $theme-item-title-large-letter-spacing,
+        $line-height-sm: $theme-item-title-large-line-height-sm,
+        $line-height: $theme-item-title-large-line-height
+      );
+
+      a {
+        @include theme-max-lines(
+          $font-size: $theme-item-title-large-font-size,
+          $font-size-sm: $theme-item-title-large-font-size-sm,
+          $line-height: $theme-item-title-large-line-height,
+          $line-height-sm: $theme-item-title-large-line-height-sm,
+          $num: $theme-item-title-large-max-lines
+        );
+      }
+    }
+
+    &--locked {
+      a::before {
+        content: $theme-item-title-locked-content;
+      }
+    }
+  }
+
+  &__text {
+    &--teaser {
+      @include theme-apply-fonts(
+        $font-family: $theme-item-description-font-family,
+        $font-size-sm: $theme-item-description-font-size-sm,
+        $font-size: $theme-item-description-font-size,
+        $font-weight: $theme-item-description-font-weight,
+        $line-height-sm: $theme-item-description-line-height-sm,
+        $line-height: $theme-item-description-line-height
+      );
+      margin-bottom: $theme-item-description-margin;
+      color: $theme-item-description-color;
+
+      a {
+        @include theme-max-lines(
+          $font-size: $theme-item-description-font-size,
+          $font-size-sm: $theme-item-description-font-size-sm,
+          $line-height: $theme-item-description-line-height,
+          $line-height-sm: $theme-item-description-line-height-sm,
+          $num: $theme-item-description-max-lines
+        );
+        color: $theme-item-description-link-color;
+        text-decoration: $theme-item-description-link-decoration;
+        &:hover {
+          color: $theme-item-description-link-hover-color;
+          text-decoration: $theme-item-description-link-hover-decoration;
+        }
+      }
+    }
+  }
+
+  &__footer {
+    font-family: $theme-item-footer-font-family;
+    font-size: $theme-item-footer-font-size;
+    font-weight: $theme-item-footer-font-weight;
+    line-height: $theme-item-footer-line-height;
+    color: $theme-item-footer-color;
+    text-transform: $theme-item-footer-text-transform;
+  }
+
+
+  &__image-inner-wrapper {
+    @include border-radius($theme-item-image-border-radius);
+    @include box-shadow($theme-item-image-box-shadow);
+  }
+
+  &__image {
+    @include border-radius($theme-item-image-border-radius);
+  }
+
+  &__content-starts + &__content-ends,
+  &__content-start-date + &__content-end-date {
+    &::before {
+      margin-right: map-get($spacers, 1);
+      margin-left: map-get($spacers, 1);
+      content: "\2014";
+    }
+  }
+
+  &__content-embed-code {
+    @include theme-embed-responsive($theme-primary-media-video-aspect-ratio-x, $theme-primary-media-video-aspect-ratio-y);
+
+    iframe,
+    embed,
+    object,
+    video {
+      @include theme-embed-responsive-item();
+    }
+  }
+
+  &--card {
+    @include theme-card();
+  }
+
+  &--video-content-type {
+    #{ $self } {
+      &__image-inner-wrapper {
+        &::after {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          width: 50px;
+          height: 50px;
+          content: "";
+          background-image: url("data:image/png;base64,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");
+          filter: brightness(0) invert(1) drop-shadow(2px 2px 2px rgba(0, 0, 0, .5));
+          background-size: contain;
+          opacity: .6;
+          transform: translate(-50%, -50%);
+        }
+      }
+    }
+  }
+}

package/scss/components/_page-attribution.scss

@@ -0,0 +1,102 @@
+.page-attribution {
+  $self: &;
+  font-family: $theme-content-attribution-font-family;
+  font-size: $theme-content-attribution-font-size;
+  font-weight: $theme-content-attribution-font-weight;
+  line-height: $theme-content-attribution-line-height;
+  color: $theme-content-attribution-color;
+  text-transform: $theme-content-attribution-text-transform;
+
+  &__content-authors {
+    &::before {
+      margin-right: $theme-content-attribution-prefix-margin;
+      font-weight: $theme-content-attribution-prefix-font-weight;
+      content: "By";
+    }
+  }
+
+  &__content-byline {
+    &::before {
+      margin-right: $theme-content-attribution-prefix-margin;
+      font-weight: $theme-content-attribution-prefix-font-weight;
+      content: "By";
+    }
+  }
+
+  &__content-company-name {
+    &::before {
+      margin-right: $theme-content-attribution-prefix-margin;
+      font-weight: $theme-content-attribution-prefix-font-weight;
+      content: "From";
+    }
+  }
+
+  &__content-contributors {
+    &::before {
+      margin-right: $theme-content-attribution-prefix-margin;
+      font-weight: $theme-content-attribution-prefix-font-weight;
+      content: "Contributor";
+    }
+  }
+
+  &__content-photographers {
+    &::before {
+      margin-right: $theme-content-attribution-prefix-margin;
+      font-weight: $theme-content-attribution-prefix-font-weight;
+      content: "Photographer";
+    }
+  }
+
+  &__content-source {
+    &::before {
+      margin-right: $theme-content-attribution-prefix-margin;
+      font-weight: $theme-content-attribution-prefix-font-weight;
+      content: "Source";
+    }
+  }
+
+  &__content-sponsors {
+    &::before {
+      margin-right: $theme-content-attribution-prefix-margin;
+      font-weight: $theme-content-attribution-prefix-font-weight;
+      content: "Sponsor";
+    }
+  }
+
+  &__content-authors,
+  &__content-byline,
+  &__content-company-name,
+  &__content-contributors,
+  &__content-photographers,
+  &__content-source,
+  &__content-sponsors {
+    #{ $self } {
+      &__content-name {
+        &:first-child {
+          &::before {
+            margin-right: $theme-content-attribution-prefix-margin-after;
+            font-weight: $theme-content-attribution-prefix-spacer-font-weight;
+            content: $theme-content-attribution-prefix-spacer-content;
+          }
+        }
+      }
+    }
+  }
+
+  &__content-name {
+    margin-right: $theme-content-attribution-name-margin;
+    &::after {
+      display: inline-block;
+      content: $theme-content-attribution-name-content;
+    }
+    &:last-child {
+      margin-right: 0;
+      &::after {
+        content: "";
+      }
+    }
+  }
+  div:last-child {
+    margin-bottom: $theme-content-attribution-name-margin;
+  }
+}

package/scss/components/_page-contact-details.scss

@@ -0,0 +1,23 @@
+.page-contact-details {
+  font-family: $theme-contact-details-font-family;
+  font-size: $theme-contact-details-font-size;
+  font-weight: $theme-contact-details-font-weight;
+  line-height: $theme-contact-details-line-height;
+  color: $theme-contact-details-color;
+
+  &__section {
+    margin-bottom: $theme-contact-details-section-margin;
+
+    &--social-links {
+      a {
+        margin-right: map-get($spacers, 2);
+      }
+    }
+  }
+
+  &__label {
+    margin-right: $theme-contact-details-label-margin;
+    margin-bottom: 0;
+    font-weight: $theme-contact-details-label-font-weight;
+  }
+}

package/scss/components/_page-dates.scss

@@ -0,0 +1,24 @@
+.page-dates {
+  &__content-published,
+  &__content-starts,
+  &__content-start-date,
+  &__content-ends,
+  &__content-end-date {
+    @include skin-typography($style: "date");
+    display: inline;
+    text-transform: none;
+  }
+
+  &__content-updated::before {
+    content: " | ";
+  }
+
+  &__content-starts + &__content-ends,
+  &__content-start-date + &__content-end-date {
+    &::before {
+      margin-right: map-get($spacers, 1);
+      margin-left: map-get($spacers, 1);
+      content: "\2014";
+    }
+  }
+}

package/scss/components/_page-image.scss

@@ -0,0 +1,92 @@
+.page-image {
+  $self: &;
+  &__image-caption {
+    @include theme-media-caption();
+  }
+
+  &__image-credit {
+    @include theme-media-credit();
+  }
+
+  &__image-display-name {
+    font-family: $theme-page-body-images-title-font-family;
+    font-size: $theme-page-body-images-title-font-size;
+    font-weight: $theme-page-body-images-title-font-weight;
+    line-height: $theme-page-body-images-title-line-height;
+  }
+
+  &__wrapper {
+    @include border-radius($theme-primary-media-border-radius);
+    @include box-shadow($theme-primary-media-box-shadow);
+  }
+
+  &__image {
+    @include border-radius($theme-primary-media-border-radius);
+  }
+
+  > :last-child:not(#{ $self }__wrapper) {
+    border-bottom: 1px solid #ccc;
+  }
+
+  @each $ar in $marko-web-node-image-aspect-ratios {
+    $x: nth($ar, 1);
+    $y: nth($ar, 2);
+
+    &--fluid-#{$x}by#{$y} {
+      #{ $self } {
+        &__wrapper {
+          @include marko-web-node-fluid-image($x, $y);
+        }
+        &__image {
+          @include marko-web-node-fluid-image-item();
+        }
+      }
+    }
+    // Add the inverse ratios (16by9 becomes 9by16, 4by3 becomes 3by4, etc)
+    @if $x != $y {
+      &--fluid-#{$y}by#{$x} {
+        #{ $self } {
+          &__wrapper {
+            @include marko-web-node-fluid-image($x, $y);
+          }
+          &__image {
+            @include marko-web-node-fluid-image-item();
+          }
+        }
+      }
+    }
+  }
+
+  &--primary-image-inline {
+    float: right;
+    max-width: 250px;
+    margin-top: calc(($theme-page-body-line-height - 1) * .5em);
+    margin-bottom: 0;
+    margin-left: .75rem;
+
+    @include media-breakpoint-down(xs) {
+      float: none;
+      margin: .75rem auto;
+    }
+
+    @include media-breakpoint-down($theme-responsive-text-breakpoint) {
+      margin-top: calc(($theme-page-body-line-height-sm - 1) * .5em);
+    }
+
+    #{ $self } {
+      &__wrapper {
+        border-radius: 0;
+        box-shadow: none;
+      }
+      &__image {
+        border-radius: 0;
+      }
+    }
+  }
+
+  &--primary-image-inline-left {
+    float: left;
+    margin-right: .75rem;
+    margin-left: 0;
+  }
+}

package/scss/components/_page-rail.scss

@@ -0,0 +1,7 @@
+.page-rail > * {
+  margin-bottom: map-get($spacers, block);
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}