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

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

@@ -0,0 +1,102 @@
+.node {
+  $self: &;
+
+  &--related-stories {
+    padding-bottom: 16px;
+    @include marko-web-node-list-border(border-bottom);
+
+    @include media-breakpoint-up(md) {
+      padding-top: 16px;
+      padding-bottom: 0;
+      border-bottom: none;
+      @include marko-web-node-list-border(border-top);
+    }
+
+    @include media-breakpoint-up(lg) {
+      padding-top: 0;
+      border-top: none;
+    }
+
+    #{ $self } {
+      &__title {
+        width: 100%;
+        @include skin-typography($style: "header-3", $link-style: "primary");
+      }
+
+      &__contents {
+        flex-direction: row-reverse;
+        @include media-breakpoint-up(lg) {
+          flex-direction: column;
+        }
+      }
+
+      $image-size: 112px;
+      &__node-image {
+        width: $image-size;
+        height: $image-size;
+        @include media-breakpoint-up(lg) {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      &__image-inner-wrapper--fluid-3by2 {
+        width: $image-size;
+        min-width: $image-size;
+        height: $image-size;
+        @include media-breakpoint-up(lg) {
+          width: 100%;
+          min-width: 100%;
+          height: auto;
+        }
+
+        &::before {
+          // use bp-down (max-width) instead, since the padding is a calculated % at all widths by default
+          @include media-breakpoint-down(md) {
+            padding-top: 0;
+          }
+        }
+      }
+
+      &__image-wrapper + #{ $self }__body {
+        margin-top: 0;
+        margin-right: 15px;
+        @include media-breakpoint-up(lg) {
+          margin-top: 14px;
+          margin-right: 0;
+        }
+      }
+
+      &__website-section-name {
+        @include skin-typography($style: "slug-small", $link-style: "primary");
+      }
+    }
+  }
+}
+
+.related-stories {
+  &__header {
+    margin-bottom: 24px;
+    @include media-breakpoint-up(md) {
+      margin-bottom: 30px;
+    }
+    @include skin-typography($style: "section-header");
+  }
+}
+
+.card-deck-flow {
+  $self: &;
+  &--related-stories {
+    #{ $self } {
+      &__node {
+        margin-bottom: 16px;
+        @include media-breakpoint-up(md) {
+          margin-bottom: 0;
+        }
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+}

package/scss/components/blocks/_resource-library.scss

@@ -0,0 +1,79 @@
+.resource-library {
+  &__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: 24px;
+    @include media-breakpoint-up(md) {
+      display: none;
+    }
+  }
+
+  &__deck-wrapper {
+    margin-right: -#{$marko-web-page-wrapper-padding};
+    margin-left: -#{$marko-web-page-wrapper-padding};
+    overflow-x: scroll;
+    overflow-y: hidden;
+  }
+
+  &__row {
+    display: flex;
+    flex-wrap: nowrap;
+    min-width: 1000px;
+  }
+
+  &__col {
+    @include make-col-ready();
+    @include make-col(3);
+  }
+}
+
+.node {
+  $self: &;
+
+  &--resource-library {
+    #{ $self } {
+      &__title {
+        @include skin-typography($style: "overlay-header-2", $link-style: "primary");
+      }
+
+      &__body--overlay {
+        padding: 16px;
+      }
+
+      &__contents--body {
+        padding: 16px 10px;
+        text-align: center;
+        background-color: rgba($gray-900, .9);
+      }
+    }
+  }
+}

package/scss/components/blocks/_section-card-deck-featured.scss

@@ -0,0 +1,22 @@
+.section-card-deck-featured {
+  &__title {
+    padding-top: 20px;
+    margin-bottom: 20px;
+    @include skin-typography($style: "section-header");
+  }
+}
+
+.node {
+  $self: &;
+  &--section-card-deck-featured {
+    #{ $self } {
+      &__title {
+        @include skin-typography($style: "header-1.5", $link-style: "primary");
+      }
+
+      &__text--teaser {
+        @include skin-typography($style: "teaser-text-1", $link-style: "primary");
+      }
+    }
+  }
+}

package/scss/components/blocks/_section-card-list.scss

@@ -0,0 +1,81 @@
+.section-card-list {
+  &__row {
+    @include make-row();
+    margin-top: 24px;
+    @include media-breakpoint-up(lg) {
+      margin-top: 30px;
+    }
+  }
+
+  &__col {
+    @include make-col-ready();
+    @include media-breakpoint-up(md) {
+      @include make-col(4);
+    }
+  }
+
+  &__header {
+    @include skin-typography($style: "section-header");
+  }
+
+  &__description {
+    margin-top: 6px;
+    @include skin-typography($style: "article-text");
+  }
+
+  &__btn-wrapper {
+    padding-top: 24px;
+    margin-top: 16px;
+    @include marko-web-node-list-border($property: border-top);
+  }
+}
+
+.node {
+  $self: &;
+
+  &--section-card-list-hero-image {
+    margin-bottom: 16px;
+    @include media-breakpoint-up(md) {
+      margin-bottom: 0;
+    }
+  }
+
+  &--section-card-list-hero {
+    padding-bottom: 16px;
+    @include marko-web-node-list-border(border-bottom);
+
+    @include media-breakpoint-up(md) {
+      padding-bottom: 0;
+      border-bottom: none;
+    }
+
+    #{ $self } {
+      &__title {
+        margin-bottom: 0;
+        @include skin-typography($style: "header-2", $link-style: "primary");
+      }
+
+      &__text--teaser {
+        margin-top: 10px;
+        @include skin-typography($style: "teaser-text-1", $link-style: "primary", $max-lines: 4);
+      }
+    }
+  }
+
+  &--section-card-list-item {
+    #{ $self } {
+      &__title {
+        @include skin-typography($style: "header-3", $link-style: "primary");
+      }
+    }
+  }
+}
+
+.node-list {
+  &--section-card-list {
+    padding-top: 16px;
+    @include media-breakpoint-up(md) {
+      padding-top: 0;
+    }
+  }
+}

package/scss/components/blocks/_section-feed.scss

@@ -0,0 +1,253 @@
+.section-feed-content-node {
+  $self: &;
+
+  @function ab($a, $b: null) {
+    @if $b != null {
+        @return $b;
+    }
+    @return $a;
+  }
+
+  $image-size: 112px ;
+  $image-mobile-width: null !default;
+  $image-mobile-height: null !default;
+  $image-width: ab($image-size, $image-mobile-width);
+  $image-height: ab($image-size, $image-mobile-height);
+
+  $image-desktop-width: 250px !default;
+  $image-desktop-height: 167px !default;
+
+
+  display: flex;
+  width: 100%;
+
+  @include media-breakpoint-up(md) {
+    flex-direction: row-reverse;
+    padding-bottom: 0;
+    border-bottom: none;
+  }
+
+  &__sponsored-by {
+    margin-bottom: 6px;
+    @include skin-typography($style: "sponsored-by");
+  }
+
+  &__contents {
+    width: 100%;
+  }
+
+  &__body {
+    @include media-breakpoint-up(md) {
+      max-width: 700px;
+    }
+  }
+
+  &__image-wrapper {
+    width: $image-width;
+    min-width: $image-width;
+    height: $image-height;
+    margin-left: 15px;
+    @include media-breakpoint-up(md) {
+      width: $image-desktop-width;
+      min-width: $image-desktop-width;
+      height: $image-desktop-height;
+      margin-right: 15px;
+      margin-left: 0;
+    }
+  }
+
+  &__image {
+    width: $image-width;
+    height: $image-height;
+    object-fit: cover;
+    object-position: left;
+    border: 1px solid rgba(239, 239, 239, .9);
+    @include media-breakpoint-up(md) {
+      width: $image-desktop-width;
+      height: $image-desktop-height;
+    }
+  }
+
+  &__website-section-name {
+    margin-bottom: 6px;
+    @include skin-typography($style: "slug-small", $link-style: "primary", $breakpoint: sm);
+  }
+
+  &__content-short-name {
+    width: 100%;
+    @include skin-typography($style: "header-1.5", $link-style: "primary", $breakpoint: sm);
+  }
+
+  &__content-teaser {
+    display: none;
+    margin-top: 6px;
+    margin-bottom: 0.25rem;
+    @include skin-typography($style: "teaser-text-1", $link-style: "primary", $breakpoint: sm);
+    @include media-breakpoint-up(md) {
+      display: block;
+    }
+  }
+
+  &__content-event-dates {
+    margin-top: 10px;
+    @include skin-typography($style: "teaser-text-1", $link-style: "primary", $breakpoint: sm);
+  }
+  &__content-start-date,
+  &__content-end-date {
+    &::before {
+      font-weight: $font-weight-bold;
+      content: "Date: ";
+    }
+  }
+  &__content-start-date + #{ $self }__content-end-date {
+    &::before {
+      font-weight: $font-weight-normal;
+      content: " -  ";
+    }
+  }
+
+  &__multidates {
+    display: flex;
+    flex-direction: row;
+  }
+
+  &__content-company {
+    font-weight: $theme-content-attribution-prefix-font-weight;
+    &::before {
+      margin-right: $theme-content-attribution-prefix-margin;
+      font-weight: $theme-content-attribution-prefix-font-weight;
+      content: "From";
+    }
+  }
+
+  &__content-authors {
+    font-weight: $theme-content-attribution-prefix-font-weight;
+  }
+
+  .btn-primary {
+    margin-top: 10px;
+  }
+
+  &__content-published {
+    margin-top: 10px;
+    @include skin-typography($style: "date");
+  }
+
+  &__content-sponsors {
+    #{ $self }__content-sponsors-label {
+      @include skin-typography($style: "teaser-text-1", $link-style: "primary", $breakpoint: sm);
+      font-weight: $font-weight-bold;
+    }
+    &--has-logo {
+      #{ $self }__content-sponsors {
+        display: flex;
+        flex-direction: column;
+        .content-sponsors-seporator {
+          display: none;
+        }
+      }
+    }
+  }
+
+  &--full-width-native-ad {
+    padding: 24px;
+    background-color: $gray-100;
+    border-radius: 4px;
+    #{ $self } {
+      &__content-teaser {
+        display: block;
+      }
+    }
+  }
+  &--video-content-type {
+    #{ $self } {
+      &__image-wrapper {
+        position: relative;
+        &::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%);
+        }
+      }
+    }
+  }
+}
+
+.node-list {
+  $self: &;
+  &--section-feed {
+    #{ $self } {
+      &__node {
+        padding-top: 20px;
+        padding-bottom: 20px;
+        border-bottom: none;
+        @include marko-web-node-list-border(border-bottom);
+        @include media-breakpoint-up(md) {
+          padding-top: 15px;
+          padding-bottom: 15px;
+          border-bottom: none;
+        }
+      }
+
+      &__nodes {
+        padding-top: 0;
+        padding-bottom: 0;
+        @include marko-web-node-list-border(border-top);
+        @include media-breakpoint-up(md) {
+          border-top: none;
+        }
+      }
+    }
+  }
+  &--company-related-feed,
+  &--company-categories-feed {
+    #{ $self } {
+      &__header {
+        @include skin-typography($style: "section-header");
+        padding-bottom: 10px;
+        margin-top: 20px;
+        font-size: 26px;
+        border-bottom: 1px solid $gray-700;
+      }
+    }
+    .section-feed-content-node {
+      @include media-breakpoint-up(md) {
+        flex-direction: row;
+      }
+    }
+  }
+  &--company-categories-feed {
+    #{ $self } {
+      &__node {
+        padding-top: .5rem;
+        padding-bottom: 0;
+      }
+    }
+  }
+  //@todo this should also be dependend on the image width/height differing from 112
+  @include media-breakpoint-down(sm) {
+    &--section-feed-mobile-cards {
+      .section-feed-content-node {
+        &:first-child {
+          border-top: none;
+        }
+        flex-direction: column-reverse;
+        .section-feed-content-node__image-wrapper {
+          margin-left: 0;
+          margin-bottom: map-get($spacers, block);
+        }
+        .section-feed-content-node__content-teaser {
+          display: initial;
+        }
+      }
+    }
+  }
+}

package/scss/components/blocks/_section-forbes.scss

@@ -0,0 +1,32 @@
+
+.section-forbes {
+  .top-story {
+    &__row {
+      padding-bottom: 2rem;
+      border-bottom: 1px solid #e3e4e5;
+    }
+  }
+  @include media-breakpoint-up(lg) {
+    .card-deck-flow {
+      &__node {
+        margin-bottom: 3rem;
+      }
+      .node {
+        &__title a {
+          font-size: 20px;
+          line-height: 1.3;
+        }
+      }
+    }
+    .col-lg-6 {
+      &.first {
+        border-right: 1px solid #e3e4e5;
+      }
+    }
+    .node-list {
+      &__node {
+        border-bottom: none;
+      }
+    }
+  }
+}

package/scss/components/blocks/_section-list.scss

@@ -0,0 +1,80 @@
+.node-list {
+  $self: &;
+  &--section-list {
+    #{ $self } {
+      &__header {
+        @include skin-typography($style: "section-header-small", $link-style: "primary");
+        margin-bottom: 16px;
+      }
+
+      &__nodes {
+        padding-top: 0;
+        padding-bottom: 16px;
+      }
+    }
+  }
+
+  &__footer {
+    &--view-more {
+      @include skin-typography($style: "view-more", $link-style: "primary");
+    }
+  }
+}
+
+.node {
+  $self: &;
+  &--section-list-card {
+    #{ $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");
+      }
+    }
+  }
+  &--section-cards {
+    #{ $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");
+      }
+    }
+  }
+  &--section-list-item {
+    #{ $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");
+      }
+    }
+  }
+}
+
+.section-list-deck {
+  &__row {
+    @include make-row();
+  }
+
+  &__col {
+    @include make-col-ready();
+    @include media-breakpoint-up(md) {
+      @include make-col(4);
+      margin-bottom: 0;
+    }
+    margin-bottom: 30px;
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}

package/scss/components/blocks/_section-search.scss

@@ -0,0 +1,40 @@
+.section-search {
+  position: relative;
+  &__title {
+    margin-bottom: 18px;
+    font-size: 18px;
+    font-weight: 800;
+    text-transform: uppercase;
+  }
+  .form-control {
+    display: block;
+    width: 100%;
+    height: calc(1.5em + .75rem + 2px);
+    padding: .375rem .75rem;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.5;
+    color: #495057;
+    background-color: #fff;
+    background-clip: padding-box;
+    border: 1px solid #ced4da;
+    border-radius: 0;
+    outline: none;
+    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+    &:focus {
+      border-color: #ebebeb;
+      box-shadow: none;
+    }
+  }
+  .list-group {
+    @include box-shadow($theme-card-box-shadow);
+    position: absolute;
+    z-index: 2;
+    width: 100%;
+    max-height: 10em;
+    padding: map-get($spacers, 2);
+    overflow: scroll;
+    background: $white;
+    border: 1px solid #ebebeb;
+  }
+}