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

package/scss/components/blocks/_most-popular.scss

@@ -0,0 +1,70 @@
+$most-popular-position-size: 40px;
+
+.card-deck-flow {
+  $self: &;
+  &--most-popular {
+    #{ $self } {
+      &__node {
+        margin-bottom: 20px;
+        @include media-breakpoint-up(md) {
+          margin-top: 30px;
+          margin-bottom: 0;
+        }
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+}
+
+.most-popular {
+  &__header {
+    padding-bottom: 10px;
+    margin-bottom: 24px;
+
+    border-bottom: 1px solid $gray-700;
+    @include media-breakpoint-up(md) {
+      margin-bottom: 0;
+    }
+    @include skin-typography($style: "section-header");
+  }
+
+  &__card-wrapper {
+    display: flex;
+    flex-direction: row;
+  }
+
+  &__position {
+    $font-size: 30px;
+    position: absolute;
+    width: $most-popular-position-size;
+    height: $most-popular-position-size;
+    padding-top: 1px;
+    font-family: $skin-font-family-primary;
+    font-size: $font-size;
+    font-weight: $font-weight-bold;
+    line-height: 1;
+    color: $gray-800;
+    text-align: center;
+    border: 2px solid $gray-800;
+  }
+}
+
+.node {
+  $self: &;
+  &--most-popular {
+    margin-left: $most-popular-position-size + 20px;
+
+    #{ $self } {
+      &__title {
+        @include skin-typography($style: "header-3", $link-style: "primary");
+        margin-bottom: 0;
+      }
+      &__website-section-name {
+        @include skin-typography($style: "slug-small", $link-style: "primary");
+        margin-bottom: 1px;
+      }
+    }
+  }
+}

package/scss/components/blocks/_newsletter-signup-banner-large.scss

@@ -0,0 +1,51 @@
+.newsletter-signup-banner-large {
+  display: block;
+  flex-direction: column;
+  padding: 16px;
+  background-color: $gray-100;
+  border-radius: 4px;
+
+  &__form {
+    display: flex;
+    justify-content: center;
+    input {
+      display: inline;
+      max-width: 312px;
+      margin-right: $block-spacer * 0.5;
+    }
+  }
+
+  &__name {
+    @include skin-typography($style: "header-1.5");
+    margin-bottom: 6px;
+    text-align: center;
+  }
+
+  &__description {
+    @include skin-typography($style: "teaser-text-1");
+    max-width: 520px;
+    margin-right: auto;
+    margin-bottom: 14px;
+    margin-left: auto;
+    text-align: center;
+  }
+
+  &__button {
+    margin-right: auto;
+    margin-left: auto;
+  }
+
+  @media (max-width: 530px) {
+    &__name,
+    &__description {
+      text-align: left;
+    }
+
+    &__form {
+      display: block;
+      input {
+        margin-bottom: 1rem;
+      }
+    }
+  }
+}

package/scss/components/blocks/_newsletter-signup-banner.scss

@@ -0,0 +1,99 @@
+.newsletter-signup-banner {
+  display: block;
+  flex-direction: row;
+  justify-content: center;
+  width: 100%;
+  padding: 16px;
+  margin-top: 16px;
+  margin-bottom: 38px;
+  background-color: $gray-100;
+  border-radius: 4px;
+  @include skin-typography($style: "teaser-text-1");
+
+  &--large {
+    display: flex;
+    background-color: $gray-100;
+  }
+  &--footer {
+    color: $gray-400;
+    background-color: initial;
+    margin-top: 0;
+    padding-top: 0;
+  }
+
+  &__left-col {
+    margin-right: 1rem;
+  }
+
+  &__right-col {
+    &--large {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+    }
+  }
+
+  &__form {
+    display: flex;
+    input {
+      display: inline;
+      max-width: 312px;
+      margin-right: $block-spacer * 0.5;
+    }
+    &--large, &--footer {
+      justify-content: center;
+    }
+  }
+
+  &__name {
+    &--large {
+      @include skin-typography($style: "header-1.5");
+      margin-bottom: 6px;
+    }
+    &--footer {
+      @include skin-typography($style: "footer-header-1");
+      margin-bottom: 8px;
+    }
+  }
+
+  &__description {
+    &--large, &--footer {
+      @include skin-typography($style: "teaser-text-1");
+      max-width: 520px;
+      margin-bottom: 14px;
+    }
+    &--footer {
+      color: $gray-400;
+    }
+  }
+
+  &__button-wrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  &__form-wrapper {
+    &--footer {
+      label {
+        color: $gray-400;
+      }
+    }
+  }
+
+  .newsletter-name {
+    font-weight: $font-weight-bold;
+  }
+
+  @media (max-width: 530px) {
+    &__left-col {
+      display: none;
+    }
+    &__form {
+      display: block;
+      input {
+        margin-bottom: 1rem;
+      }
+    }
+  }
+}

package/scss/components/blocks/_newsletter-signup-site-footer.scss

@@ -0,0 +1,11 @@
+.site-footer-newsletter {
+  &__name {
+    @include skin-typography($style: "footer-header-1");
+    margin-bottom: 8px;
+  }
+  &__form {
+    input {
+      margin-bottom: 1rem;
+    }
+  }
+}

package/scss/components/blocks/_node-author.scss

@@ -0,0 +1,27 @@
+.node {
+  $self: &;
+  &--author {
+    padding-top: 16px;
+    background-color: transparent;
+
+    #{ $self } {
+      &__title {
+        @include skin-typography($style: "author-name-list", $link-style: "primary");
+        margin-bottom: 5px;
+      }
+
+      &__text {
+        @include skin-typography($style: "author-title-list");
+        text-transform: capitalize;
+      }
+
+      &__image {
+        border-radius: 50px;
+      }
+
+      &__image-wrapper + #{ $self}__body {
+        margin-left: 10px;
+      }
+    }
+  }
+}

package/scss/components/blocks/_opinion.scss

@@ -0,0 +1,76 @@
+.opinion {
+  background-color: $white;
+
+  @include media-breakpoint-up(md) {
+    padding-top: 50px;
+    padding-bottom: 50px;
+    background-color: $gray-100;
+  }
+
+  &__header {
+    padding-bottom: 10px;
+    margin-right: 10px;
+    margin-bottom: 24px;
+    margin-left: 10px;
+
+    border-bottom: 1px solid $gray-700;
+    @include media-breakpoint-up(md) {
+      margin-bottom: 30px;
+    }
+    a {
+      @include skin-typography($style: "section-header");
+    }
+  }
+}
+
+.node {
+  $self: &;
+  &--opinion {
+    padding-bottom: 16px;
+    background-color: $white;
+    @include marko-web-node-list-border(border-bottom);
+
+    @include media-breakpoint-up(md) {
+      padding-bottom: 0;
+      background-color: $gray-100;
+      border-bottom: none;
+    }
+
+    #{ $self } {
+      &__title {
+        @include skin-typography($style: "header-3", $link-style: "primary");
+        margin-bottom: 0;
+      }
+      &__website-section-name {
+        @include skin-typography($style: "slug-small", $link-style: "primary");
+      }
+    }
+  }
+}
+
+.card-deck-flow {
+  $self: &;
+  &--opinion {
+    margin-right: 0;
+    margin-left: 0;
+
+    background-color: $white;
+
+    @include media-breakpoint-up(md) {
+      background-color: $gray-100;
+    }
+
+    #{ $self } {
+      &__node {
+        margin-bottom: 16px;
+        @include media-breakpoint-up(md) {
+          margin-bottom: 0;
+        }
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+}

package/scss/components/blocks/_primary-image.scss

@@ -0,0 +1,98 @@
+$marko-web-primary-image-margin: 1.5rem !default;
+
+.primary-image {
+  $self: &;
+  margin-bottom: $marko-web-primary-image-margin;
+  clear: both;
+
+  &__image-caption {
+    @include theme-media-caption();
+  }
+
+  &__image-credit {
+    @include theme-media-credit();
+  }
+
+  // > :last-child:not(#{ $self }__wrapper) {
+  //   border-bottom: 1px solid #ccc;
+  // }
+
+  &--fluid {
+    #{ $self } {
+      &__image {
+        width: 100%;
+        height: auto;
+      }
+    }
+  }
+
+  &--aligned {
+    max-width: $skin-aligned-image-width;
+    margin-bottom: 0;
+    img {
+      max-width: $skin-aligned-image-width;
+    }
+
+    @include media-breakpoint-down(xs) {
+      max-width: 100%;
+      margin: $skin-aligned-body-image-spacer auto;
+      img {
+        max-width: 100%;
+      }
+
+      #{ $self } {
+        &__image {
+          width: 100%;
+          height: auto;
+        }
+      }
+    }
+  }
+
+  &--aligned-right {
+    float: right;
+    margin-left: $skin-aligned-body-image-spacer;
+    @include media-breakpoint-down(xs) {
+      float: none;
+      margin-left: auto;
+    }
+  }
+
+  &--aligned-left {
+    float: left;
+    margin-right: $skin-aligned-body-image-spacer;
+    @include media-breakpoint-down(xs) {
+      float: none;
+      margin-right: auto;
+    }
+  }
+
+  &--aligned-center {
+    @media (min-width: 900px) {
+      $margin: ($skin-content-primary-image-max-width - $skin-content-body-max-width) * 0.5 * -1;
+      position: relative;
+      width: $skin-content-primary-image-max-width;
+      margin-left: $margin;
+    }
+  }
+
+  &--forced-left {
+    margin-bottom: 1.5rem;
+  }
+
+  @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();
+        }
+      }
+    }
+  }
+}

package/scss/components/blocks/_products.scss

@@ -0,0 +1,71 @@
+.products-block {
+  &__header {
+    @include skin-typography($style: "section-header");
+  }
+
+  &__description-wrapper {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    margin-top: 6px;
+    margin-bottom: 24px;
+    @include media-breakpoint-up(md) {
+      margin-bottom: 30px;
+    }
+  }
+
+  &__description {
+    @include skin-typography($style: "article-text");
+  }
+
+  &__view-more {
+    @include skin-typography($style: "view-more", $link-style: "primary");
+
+    display: none;
+    @include media-breakpoint-up(md) {
+      display: block;
+    }
+  }
+
+  &__view-more-bottom {
+    @include skin-typography($style: "view-more", $link-style: "primary");
+
+    display: block;
+    margin-top: 4px;
+    @include media-breakpoint-up(md) {
+      display: none;
+    }
+  }
+}
+
+.card-deck-flow {
+  $self: &;
+  &--products-block {
+    #{ $self } {
+      &__node {
+        margin-bottom: 20px;
+        @include media-breakpoint-up(md) {
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+}
+
+.node {
+  $self: &;
+
+  &--products-block {
+    padding: 16px;
+    background-color: $gray-100;
+    border-radius: 4px;
+    #{ $self } {
+      &__title {
+        @include skin-typography($style: "header-3", $link-style: "primary", $max-lines: 4);
+      }
+      &__website-section-name {
+        @include skin-typography($style: "slug-small", $link-style: "primary");
+      }
+    }
+  }
+}

package/scss/components/blocks/_promo-card.scss

@@ -0,0 +1,67 @@
+.promo-card {
+  height: 100%;
+  padding: 24px;
+  background-color: $gray-100;
+  border-radius: 4px;
+
+  &__header {
+    margin-bottom: 16px;
+    @include skin-typography($style: "section-header-small");
+  }
+
+  &__logo {
+    height: 48px;
+  }
+}
+
+.node {
+  $self: &;
+
+  &--promo-card {
+    background-color: $gray-100;
+
+    #{ $self } {
+      &__title {
+        margin-bottom: 0;
+        @include skin-typography($style: "header-2", $link-style: "primary");
+      }
+
+      &__contents--body {
+        margin-bottom: 24px;
+      }
+
+      &__text--teaser {
+        margin-top: 8px;
+        margin-bottom: 0;
+        @include skin-typography($style: "small-body-text", $link-style: "primary", $max-lines: 10);
+      }
+    }
+  }
+}
+
+.pib-page-card {
+  height: 100%;
+  padding: 24px;
+  background-color: $gray-100;
+  border-radius: 4px;
+
+  &__title {
+    margin-bottom: 8px;
+    @include skin-typography($style: "header-2");
+  }
+
+  &__description {
+    margin-bottom: 16px;
+    @include skin-typography($style: "small-body-text");
+  }
+
+  &__inner-wrapper {
+    display: flex;
+  }
+
+  &__issue-cover {
+    align-self: flex-start;
+    width: 120px;
+    margin-left: 24px;
+  }
+}

package/scss/components/blocks/_read-next.scss

@@ -0,0 +1,53 @@
+.node {
+  $self: &;
+
+  &--read-next {
+    #{ $self } {
+      &__title {
+        @include skin-typography($style: "header-3", $link-style: "primary");
+      }
+
+      &__website-section-name {
+        @include skin-typography($style: "slug-small", $link-style: "primary");
+      }
+
+      &__image-wrapper {
+        display: none;
+        @include media-breakpoint-up(md) {
+          display: block;
+        }
+      }
+
+      &__image-wrapper + #{$self}__body {
+        margin-left: 0;
+        @include media-breakpoint-up(md) {
+          margin-left: 20px;
+        }
+      }
+    }
+  }
+}
+
+.read-next {
+  $self: &;
+  margin-top: 1rem;
+  margin-bottom: 3rem;
+  &__header {
+    margin-bottom: 16px;
+    @include skin-typography($style: "section-header-xs");
+  }
+  &--featured {
+    #{ $self } {
+      &__footer {
+        text-transform: uppercase;
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-end;
+        border-top: 1px solid $gray-200;
+      }
+    }
+    .node__image-wrapper+.node__body {
+      margin-left: 0;
+    }
+  }
+}

package/scss/components/blocks/_related-native-x-stories.scss

@@ -0,0 +1,14 @@
+.page-wrapper {
+  $self: &;
+  &__section {
+   &--related-native-x-stories:last-child {
+    margin-bottom: 30px;
+    @include media-breakpoint-up(md) {
+      margin-bottom: 60px;
+    }
+    #{ $self }__website-section-name {
+      margin-bottom: 20px;
+    }
+   }
+  }
+}