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

package/scss/components/_page-wrapper.scss

@@ -0,0 +1,146 @@
+.page-wrapper {
+  $self: &;
+
+  @include border-radius($theme-page-border-radius);
+  @include box-shadow($theme-page-box-shadow);
+
+  padding-top: 0;
+  padding-bottom: 0;
+
+  @include media-breakpoint-down($theme-responsive-text-breakpoint) {
+    padding-right: .75rem;
+    padding-left: .75rem;
+  }
+
+  @include media-breakpoint-down(md) {
+    padding-right: 16px;
+    padding-left: 16px;
+  }
+
+  &__content-name {
+    @include skin-typography($style: "header-1");
+  }
+
+  &__title {
+    @include theme-apply-fonts(
+      $font-family: $theme-page-title-font-family,
+      $font-size-sm: $theme-page-title-font-size-sm,
+      $font-size: $theme-page-title-font-size,
+      $font-weight: $theme-page-title-font-weight,
+      $line-height-sm: $theme-page-title-line-height-sm,
+      $line-height: $theme-page-title-line-height,
+    );
+    color: $theme-page-title-color;
+  }
+
+  &__deck {
+    @include theme-apply-fonts(
+      $font-family: $theme-page-deck-font-family,
+      $font-size-sm: $theme-page-deck-font-size-sm,
+      $font-size: $theme-page-deck-font-size,
+      $font-weight: $theme-page-deck-font-weight,
+      $line-height-sm: $theme-page-deck-line-height-sm,
+      $line-height: $theme-page-deck-line-height,
+    );
+    color: $theme-page-deck-color;
+  }
+
+  &__description {
+    @include theme-apply-fonts(
+      $font-family: $theme-page-description-font-family,
+      $font-size-sm: $theme-page-description-font-size-sm,
+      $font-size: $theme-page-description-font-size,
+      $font-weight: $theme-page-description-font-weight,
+      $line-height-sm: $theme-page-description-line-height-sm,
+      $line-height: $theme-page-description-line-height,
+    );
+    color: $theme-page-description-color;
+  }
+
+  &__website-section-name {
+    margin-bottom: 20px;
+    @include skin-typography($style: "section-header");
+  }
+
+  &__website-section-subhead {
+    margin-bottom: 20px;
+    @include skin-typography($style: "section-header-small");
+  }
+
+  &__website-section-description {
+    font-size: 20px;
+  }
+
+  &__section {
+    margin-bottom: 30px;
+    @include media-breakpoint-up(md) {
+      margin-bottom: 60px;
+    }
+
+    &--user-form {
+      max-width: 1000px;
+      margin-right: auto;
+      margin-left: auto;
+    }
+
+    &--content-page-body {
+      max-width: $skin-content-body-max-width;
+      margin-right: auto;
+      margin-left: auto;
+    }
+
+    &--break-container {
+      margin-right: $marko-web-page-wrapper-padding * -1;
+      margin-left: $marko-web-page-wrapper-padding * -1;
+      background-color: $gray-100;
+      @media (min-width: $marko-web-document-container-max-width) {
+        $margin: calc((((100vw - $marko-web-document-container-max-width) / 2) + $marko-web-page-wrapper-padding) * -1);
+        margin-right: $margin;
+        margin-left: $margin;
+
+        > * {
+          max-width: $marko-web-document-container-max-width;
+          margin-right: auto;
+          margin-left: auto;
+        }
+      }
+    }
+
+    &--first-sm {
+      margin-bottom: 30px;
+    }
+
+    &--first {
+      margin-bottom: 40px;
+    }
+
+    &--content-header,
+    &--nativex-story-header {
+      margin-bottom: 20px;
+      @include media-breakpoint-up(md) {
+        margin-bottom: 30px;
+      }
+    }
+
+    &--content-body {
+      margin-bottom: 2rem;
+    }
+
+    &--nativex-story-header {
+      padding-top: 30px;
+    }
+
+    &--no-spacer {
+      margin-bottom: 0;
+    }
+  }
+
+  &--no-padding-x {
+    padding-right: 0;
+    padding-left: 0;
+  }
+
+  .col > :last-child {
+    margin-bottom: 0;
+  }
+}

package/scss/components/_page.scss

@@ -0,0 +1,3 @@
+.page {
+  background-color: $theme-page-bg-color;
+}

package/scss/components/_pagination-controls.scss

@@ -0,0 +1,38 @@
+.pagination-controls,
+.marko-web-search-pagination-controls {
+  display: flex;
+  align-items: center;
+  padding-top: map-get($spacers, block);
+
+  &__prev {
+    margin-right: map-get($spacers, block);
+  }
+
+  &__next {
+    margin-left: map-get($spacers, block);
+  }
+
+  &__before {
+    margin-right: map-get($spacers, block);
+    .btn {
+      margin-bottom: 12px;
+      &:first-child {
+        margin-right: map-get($spacers, block) * 0.5;
+      }
+    }
+  }
+
+  &__after {
+    .btn {
+      margin-bottom: 12px;
+      &:first-child {
+        margin-right: map-get($spacers, block) * 0.5;
+      }
+    }
+  }
+
+  &__pages {
+    @include skin-typography($style: "teaser-text-1");
+    line-height: 1;
+  }
+}

package/scss/components/_reveal-ad.scss

@@ -0,0 +1,28 @@
+// Prevent Reveal Ad from causing CLS
+#marko-web-reveal-ad-handler {
+  display: none;
+  // remove white default bg to allow for bg image to display correctly
+   ~ .document-container {
+    background-color: transparent;;
+   }
+}
+.reveal-ad {
+  height: 298px;
+}
+body .document-container > .page:first-of-type {
+  margin-top: 298px;
+  // excluded the following page types as they dont use reskin ads
+  &.page--search,
+  &.page--authenticate,
+  &.page--change-email,
+  &.page--login,
+  &.page--logout,
+  &.page--profile,
+  &.page--register {
+    margin-top: 60px;
+    margin-bottom: 60px;
+  }
+}
+body .document-container > .reveal-ad + .page {
+  margin-top: 0;
+}

package/scss/components/_search-page.scss

@@ -0,0 +1,188 @@
+.search-form {
+  &__group {
+    @include media-breakpoint-up(md) {
+      width: 50%;
+    }
+  }
+}
+
+.marko-web-search-sort-by {
+  @include media-breakpoint-down(lg) {
+    padding-top: 20px;
+    width: 50%
+  }
+}
+
+.page-wrapper {
+  &__section {
+    &--search-results {
+      padding-bottom: 16px;
+      margin-top: 16px;
+      margin-bottom: 16px;
+      @include marko-web-node-list-border(border-bottom);
+      @include skin-typography($style: "article-text");
+    }
+  }
+}
+
+.marko-web-search-filter-container {
+  &__website-section-name {
+    margin-bottom: 20px;
+    @include skin-typography($style: "section-header");
+  }
+
+  &__title {
+    margin-bottom: 18px;
+  }
+
+  &__sections {
+    display: none;
+    &--open {
+      display: block;
+    }
+  }
+
+  &--sticky {
+    @include media-breakpoint-up(lg) {
+      position: sticky;
+      top: 0;
+      bottom: 0;
+      height: 100vh;
+      overflow-y: auto;
+    }
+  }
+}
+
+.marko-web-search-toggle-filter-container {
+  @include theme-toggle-button();
+  @include skin-typography($style: "section-header-xs");
+  padding: 0;
+}
+
+.marko-web-search-toggle-filter {
+  @include theme-toggle-button();
+  @include skin-typography($style: "input-label");
+  padding: 0;
+  margin-bottom: 12px;
+  font-size: 17px;
+  font-weight: $font-weight-semibold;
+  color: $gray-800;
+  text-transform: uppercase;
+}
+
+.marko-web-search-filter {
+  $self: &;
+
+  &__clear-item {
+    color: $gray-800;
+    &:hover {
+      color: $gray-800;
+    }
+  }
+
+  &__item {
+    margin-bottom: 10px;
+
+    &--breadcrumbs {
+      :not(:first-child) {
+        &::before {
+          padding-right: 4px;
+          padding-left: 4px;
+          color: $gray-800;
+          content: ">";
+        }
+      }
+    }
+  }
+
+  &__items {
+    @include skin-typography($style: "teaser-text-1");
+    @include theme-apply-responsive-fonts(
+      $font-size: 18px,
+      $line-height: 1,
+      $breakpoint: $theme-responsive-text-breakpoint
+    );
+    display: none;
+    padding: 0;
+    margin-bottom: 0;
+    line-height: 1;
+    list-style: none;
+
+    &--open {
+      display: block;
+      margin-bottom: 24px;
+    }
+  }
+
+  &--children {
+    display: block;
+    margin-bottom: 8px;
+    #{ $self } {
+      &__items {
+        margin-left: 4px;
+        font-size: 16px;
+      }
+      &__item {
+        &::before {
+          padding-right: 6px;
+          font-size: 14px;
+          content: ">";
+        }
+      }
+    }
+  }
+}
+
+.marko-web-search-selected-filters {
+  margin-top: 4px;
+}
+
+.marko-web-search-selected-filter {
+  display: inline-flex;
+  align-items: center;
+  padding: 5px;
+  margin-right: 10px;
+  font-size: 16px;
+  line-height: 1;
+  background-color: $gray-100;
+  border: 1px solid $gray-400;
+  border-radius: 4px;
+
+  &__label {
+    margin-right: 4px;
+  }
+}
+
+.page-wrapper__website-section-name {
+  &--sponsored-search{
+    display: flex;
+    justify-content: space-between;
+  }
+}
+
+.search-sponsor {
+  display: flex;
+  align-items: center;
+  margin-top: 1rem;
+
+  &__label {
+    @include skin-typography($style: "input-label");
+    padding: 0;
+    margin-right: 1rem;
+    margin-bottom: 12px;
+    font-size: 12px;
+    font-weight: $font-weight-semibold;
+    color: $gray-800;
+    text-transform: uppercase;
+  }
+}
+
+.marko-web-search-form {
+  display: flex;
+  .search-form {
+    &__group {
+      margin-bottom: 0;
+      margin-right: 1rem;
+    }
+  }
+}

package/scss/components/_site-footer.scss

@@ -0,0 +1,247 @@
+.site-footer {
+  /*! critical */
+  $self: &;
+  position: relative;
+  z-index: 1500;
+  margin-top: 20px;
+
+  font-family: $theme-site-footer-font-family;
+  font-size: $theme-site-footer-font-size;
+  font-weight: $theme-site-footer-font-weight;
+  line-height: $theme-site-footer-line-height;
+  box-shadow: $theme-site-footer-box-shadow;
+  opacity: $theme-site-footer-opacity;
+
+  color: $white;
+
+  &__container {
+    /*! critical */
+    @include make-container();
+    padding-top: 28px;
+    padding-bottom: 28px;
+    text-align: left;
+
+    @include media-breakpoint-down($theme-responsive-text-breakpoint) {
+      padding-top: $theme-site-footer-spacer-sm;
+      padding-bottom: $theme-site-footer-spacer-sm;
+    }
+
+    &--secondary {
+      padding-bottom: 0;
+      background-color: $theme-site-footer-secondary-bg-color;
+    }
+
+    &--primary {
+      background-color: $theme-site-footer-primary-bg-color;
+    }
+  }
+
+  &__inner-container {
+    display: flex;
+    flex-direction: column;
+    max-width: $marko-web-document-container-max-width;
+    margin-right: auto;
+    margin-left: auto;
+  }
+
+  &__section {
+    margin-bottom: 32px;
+    @include make-col-ready();
+
+    @include media-breakpoint-up(md) {
+      @include make-col(4);
+    }
+  }
+
+  &__item {
+    margin: 0 $theme-site-footer-spacer;
+    @include media-breakpoint-down($theme-responsive-text-breakpoint) {
+      margin: 0 $theme-site-footer-spacer-sm;
+    }
+  }
+
+  &__items {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    padding-left: 0;
+    margin-bottom: $theme-site-footer-spacer;
+    list-style: none;
+    @include media-breakpoint-down($theme-responsive-text-breakpoint) {
+      margin-bottom: $theme-site-footer-spacer-sm;
+      font-size: $theme-site-footer-copyright-font-size;
+    }
+  }
+
+  &__link {
+    display: block;
+    padding: 0;
+    color: $global-site-footer-color;
+    &:hover {
+      color: $global-site-footer-color;
+    }
+  }
+
+  &__brand {
+    display: inline-block;
+    margin-right: auto;
+    margin-bottom: 33px;
+    margin-left: auto;
+  }
+
+  &__logo {
+    height: $theme-site-footer-logo-height;
+    filter: brightness(0) invert(1);
+    @include media-breakpoint-down($theme-responsive-text-breakpoint) {
+      height: $theme-site-footer-logo-height-sm;
+    }
+  }
+
+  &__copyright {
+    text-align: center;
+  }
+
+  &__copyright, &__copyright a {
+    font-size: $theme-site-footer-copyright-font-size;
+    font-weight: $theme-site-footer-copyright-font-weight;
+    line-height: $theme-site-footer-copyright-line-height;
+    color: $theme-site-footer-copyright-color;
+  }
+
+  &__corporate-link {
+    margin-right: auto;
+    margin-bottom: $theme-site-footer-spacer;
+    margin-left: auto;
+  }
+
+  &__corporate-logo {
+    height: $theme-site-footer-corporate-logo-height;
+  }
+
+  &__social-icons {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    margin-bottom: $theme-site-footer-spacer;
+    @include media-breakpoint-down($theme-responsive-text-breakpoint) {
+      margin-bottom: $theme-site-footer-spacer-sm;
+    }
+
+    a {
+      margin: 0 $theme-site-footer-spacer;
+      @include media-breakpoint-down($theme-responsive-text-breakpoint) {
+        margin: 0 $theme-site-footer-spacer-sm;
+      }
+    }
+  }
+
+  &__tagline {
+    margin-bottom: 33px;
+    font-size: 22px;
+    font-style: italic;
+    color: $white;
+    text-align: center;
+  }
+  .newsletter-form {
+    .btn-secondary {
+      background-color: $primary;
+      border-color: $primary;
+      color: $white;
+      &:hover {
+        color: $white;
+      }
+    }
+  }
+}
+
+.site-footer-nav {
+  &__header {
+    @include skin-typography($style: "footer-header-1");
+    margin-bottom: 8px;
+  }
+
+  &__items {
+    display: flex;
+    flex-direction: column;
+    padding-left: 0;
+    margin-bottom: 0;
+    list-style: none;
+  }
+
+  &__item {
+    @include skin-typography($style: "footer-text");
+    margin-bottom: 8px;
+  }
+
+  &__link {
+    color: $gray-100;
+    &:hover {
+      color: $gray-100;
+    }
+  }
+}
+
+.site-footer-newsletter {
+  padding-right: 20px;
+  &__header {
+    @include skin-typography($style: "footer-header-1");
+    margin-bottom: 8px;
+  }
+
+  &__description {
+    @include skin-typography($style: "footer-text");
+    margin-bottom: 16px;
+  }
+
+  label {
+    color: $white;
+  }
+}
+
+.breadcrumbs {
+  &--site-footer {
+    margin-bottom: $theme-site-footer-spacer;
+    text-transform: none;
+
+    @include media-breakpoint-down($theme-responsive-text-breakpoint) {
+      font-size: $theme-site-footer-font-size;
+    }
+
+    .breadcrumb {
+      justify-content: center;
+      padding: 0;
+      background-color: transparent;
+    }
+
+    a {
+      color: $global-site-footer-color;
+      &:hover {
+        color: $global-site-footer-color;
+      }
+    }
+
+    .breadcrumb-item + .breadcrumb-item {
+      &::before {
+        color: $global-site-footer-color;
+      }
+    }
+  }
+}
+
+.social-follow {
+  $self: &;
+  &--site-footer {
+    #{ $self } {
+      &__header {
+        color: skin-typography-prop("footer-header-1", "color");
+      }
+
+      &__section {
+        // stylelint-disable-next-line
+        > .social-icon-link {
+          margin-right: 16px;
+        }
+      }
+    }
+  }
+}

package/scss/components/_site-header.scss

@@ -0,0 +1,9 @@
+.site-header {
+  position: static;
+  right: 0;
+  left: 0;
+  z-index: $theme-site-header-z-index;
+  box-shadow: $theme-site-header-box-shadow;
+  opacity: $theme-site-header-opacity;
+  border-bottom: 1px solid $gray-400;
+}