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

package/scss/components/blocks/_social-follow.scss

@@ -0,0 +1,28 @@
+.social-follow {
+  $self: &;
+  &__header {
+    margin-bottom: 12px;
+    @include skin-typography($style: "social-follow-header");
+  }
+
+  &__section {
+    > .social-icon-link {
+      margin-right: 15px;
+    }
+  }
+}
+
+.marko-web-icon {
+  &--social-follow {
+    svg {
+      width: 36px;
+      height: 36px;
+    }
+    @media (max-width: 1080px) {
+      svg {
+        width: 30px;
+        height: 30px;
+      }
+    }
+  }
+}

package/scss/components/blocks/_top-stories-menu.scss

@@ -0,0 +1,38 @@
+.node {
+  $self: &;
+
+  &--top-stories-menu {
+    #{ $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;
+      }
+    }
+  }
+}
+
+.node-list {
+  $self: &;
+  &--top-stories-menu {
+    #{ $self } {
+      &__header {
+        @include skin-typography($style: "menu-item-primary-header");
+        margin-bottom: 12px;
+      }
+
+      &__nodes {
+        padding-top: 0;
+      }
+
+      &__node {
+        padding-top: 8px;
+        padding-bottom: 16px;
+        border-bottom: none;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,179 @@
+.top-stories {
+  &__header {
+    margin-bottom: 24px;
+    @include media-breakpoint-up(md) {
+      margin-bottom: 30px;
+    }
+    @include skin-typography($style: "section-header");
+  }
+
+  &__row {
+    @include make-row();
+    margin-bottom: 16px;
+    @include media-breakpoint-up(md) {
+      margin-bottom: 0;
+    }
+  }
+
+  &__col {
+    @include make-col-ready();
+
+    &--hero {
+      @include media-breakpoint-up(md) {
+        @include make-col(6);
+      }
+      @include media-breakpoint-up(lg) {
+        @include make-col(7);
+      }
+    }
+
+    &--list {
+      @include media-breakpoint-up(md) {
+        @include make-col(6);
+      }
+      @include media-breakpoint-up(lg) {
+        @include make-col(5);
+      }
+    }
+  }
+}
+
+.node {
+  $self: &;
+
+  &--top-stories-hero-image {
+    margin-bottom: 14px;
+    @include media-breakpoint-up(md) {
+      margin-bottom: 0;
+    }
+  }
+
+  &--top-stories-hero {
+    padding-bottom: 20px;
+    @include marko-web-node-list-border(border-bottom);
+
+    @include media-breakpoint-up(md) {
+      padding-bottom: 0;
+      border-bottom: none;
+    }
+
+    #{ $self } {
+      &__header {
+        @include media-breakpoint-up(md) {
+          margin-bottom: 12px;
+        }
+      }
+
+      &__title {
+        width: 100%;
+        margin-bottom: 0;
+        @include skin-typography($style: "header-1", $link-style: "primary");
+      }
+
+      &__text--teaser {
+        margin-top: 10px;
+        margin-bottom: 0;
+        @include media-breakpoint-up(lg) {
+          margin-top: 16px;
+        }
+        @include skin-typography($style: "article-text", $link-style: "primary");
+      }
+
+      &__website-section-name {
+        @include skin-typography($style: "slug-small", $link-style: "primary");
+      }
+    }
+  }
+
+  &--top-stories-card {
+    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");
+      }
+    }
+  }
+}
+
+.card-deck-flow {
+  $self: &;
+  &--top-stories {
+    #{ $self } {
+      &__node {
+        @include media-breakpoint-up(md) {
+          margin-top: 16px;
+          margin-bottom: 0;
+        }
+        @include media-breakpoint-up(lg) {
+          margin-top: 20px;
+        }
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+}

package/scss/components/blocks/_white-papers.scss

@@ -0,0 +1,60 @@
+.white-papers {
+  height: 100%;
+  padding: 24px;
+  background-color: $gray-100;
+  border-radius: 4px;
+
+  &__header {
+    margin-bottom: 24px;
+    @include skin-typography($style: "section-header-small");
+  }
+
+  &__download-btn {
+    margin-right: 16px;
+  }
+}
+
+.marko-web-icon {
+  $self: &;
+  &--white-papers {
+    margin-right: 5px;
+    svg {
+      width: 20px;
+      height: 20px;
+      fill: map-deep-get($typography, "section-header-small", "color");
+    }
+  }
+}
+
+.node {
+  $self: &;
+
+  &--white-papers {
+    background-color: $gray-100;
+
+    #{ $self } {
+      &__title {
+        margin-bottom: 0;
+        @include skin-typography($style: "header-2", $link-style: "primary");
+      }
+
+      &__header {
+        margin-bottom: 10px;
+      }
+
+      &__contents--body {
+        margin-bottom: 24px;
+      }
+
+      &__text--teaser {
+        margin-top: 8px;
+        margin-bottom: 0;
+        @include skin-typography($style: "small-body-text", $link-style: "primary");
+      }
+
+      &__header-left--company-name {
+        @include skin-typography($style: "sponsored-by");
+      }
+    }
+  }
+}

package/scss/components/default-theme/site-navbar.scss

@@ -0,0 +1,187 @@
+.site-navbar {
+  $self: &;
+  &__container {
+    @include make-container();
+    @include media-breakpoint-up(xl, $grid-breakpoints) {
+      max-width: map-get($grid-breakpoints, xl);
+    }
+    display: flex;
+    flex-direction: row;
+    padding-right: 0;
+    padding-left: 0;
+  }
+
+  &__brand {
+    display: inline-block;
+    margin: $theme-site-navbar-brand-margin-y $theme-site-navbar-brand-margin-x;
+    white-space: nowrap;
+  }
+
+  &__logo {
+    height: $theme-site-navbar-logo-height;
+    filter: drop-shadow($theme-site-navbar-logo-drop-shadow);
+    @media (max-width: map-get($theme-site-header-breakpoints, small-logo)) {
+      height: $theme-site-navbar-logo-height-sm;
+    }
+  }
+
+  &__toggler {
+    @include theme-toggle-button();
+    padding: 0;
+    margin-top: auto;
+    margin-bottom: auto;
+
+    & > .marko-web-icon {
+      @include theme-navbar-link-color($theme-site-navbar-secondary-colors);
+    }
+  }
+
+  &__items {
+    display: flex;
+    flex-direction: row;
+    padding-left: 0;
+    margin-bottom: 0;
+    text-transform: uppercase;
+    list-style: none;
+
+    &--primary {
+      @include theme-hide-scrollbars();
+      width: 100%;
+      overflow: scroll;
+      font-family: $theme-site-navbar-primary-font-family;
+      font-size: $theme-site-navbar-primary-font-size;
+      font-weight: $theme-site-navbar-primary-font-weight;
+      line-height: $theme-site-navbar-primary-line-height;
+
+      @media (max-width: map-get($theme-site-header-breakpoints, small-text-primary)) {
+        font-size: $theme-site-navbar-primary-font-size-sm;
+        line-height: $theme-site-navbar-primary-line-height-sm;
+      }
+
+      @media (max-width: map-get($theme-site-header-breakpoints, hide-primary)) {
+        height: $theme-site-navbar-primary-height-sm;
+      }
+
+      #{ $self } {
+        &__item {
+          @include theme-navbar-link-background-color($theme-site-navbar-primary-background-colors);
+          flex-grow: 1;
+          padding: $theme-site-navbar-primary-link-padding;
+          text-align: center;
+
+          @media (max-width: map-get($theme-site-header-breakpoints, hide-primary)) {
+            display: none;
+          }
+        }
+
+        &__link {
+          @include theme-navbar-link-color($theme-site-navbar-primary-colors);
+          @include theme-navbar-link-decoration($theme-site-navbar-primary-decorations);
+        }
+      }
+    }
+
+    &--secondary {
+      @include theme-hide-scrollbars();
+      margin-top: auto;
+      overflow: scroll;
+      font-family: $theme-site-navbar-secondary-font-family;
+      font-size: $theme-site-navbar-secondary-font-size;
+      font-weight: $theme-site-navbar-secondary-font-weight;
+      line-height: $theme-site-navbar-secondary-line-height;
+
+      @media (max-width: map-get($theme-site-header-breakpoints, small-text-secondary)) {
+        font-size: $theme-site-navbar-secondary-font-size-sm;
+        line-height: $theme-site-navbar-secondary-line-height-sm;
+      }
+
+      @media (max-width: map-get($theme-site-header-breakpoints, small-logo)) {
+        margin-top: initial;
+      }
+
+      #{ $self } {
+        &__item {
+          @include theme-navbar-link-background-color($theme-site-navbar-secondary-background-colors);
+          @media (max-width: map-get($theme-site-header-breakpoints, hide-secondary)) {
+            display: none;
+          }
+        }
+        &__link {
+          @include theme-navbar-link-color($theme-site-navbar-secondary-colors);
+          @include theme-navbar-link-decoration($theme-site-navbar-secondary-decorations);
+          padding: $theme-site-navbar-secondary-link-padding;
+          padding-bottom: 0;
+        }
+      }
+    }
+
+    &--tertiary {
+      padding-left: $theme-site-navbar-padding-x;
+      margin-top: auto;
+      margin-left: auto;
+      font-family: $theme-site-navbar-secondary-font-family;
+      font-size: $theme-site-navbar-secondary-font-size;
+      font-weight: $theme-site-navbar-secondary-font-weight;
+      line-height: $theme-site-navbar-secondary-line-height;
+
+      @media (max-width: map-get($theme-site-header-breakpoints, small-text-secondary)) {
+        font-size: $theme-site-navbar-secondary-font-size-sm;
+        line-height: $theme-site-navbar-secondary-line-height-sm;
+      }
+
+      @media (max-width: map-get($theme-site-header-breakpoints, small-logo)) {
+        margin-top: initial;
+      }
+
+      #{ $self } {
+        &__item {
+          @include theme-navbar-link-background-color($theme-site-navbar-secondary-background-colors);
+          align-self: center;
+
+          @media (max-width: map-get($theme-site-header-breakpoints, hide-tertiary)) {
+            display: none;
+          }
+        }
+        &__link {
+          @include theme-navbar-link-color($theme-site-navbar-tertiary-colors);
+          @include theme-navbar-link-decoration($theme-site-navbar-secondary-decorations);
+          padding: $theme-site-navbar-secondary-link-padding;
+          padding-top: 0;
+          padding-bottom: 0;
+        }
+      }
+    }
+  }
+
+  &__item {
+    &:first-child a {
+      padding-left: 0;
+    }
+
+    &:last-child a {
+      padding-right: 0;
+    }
+  }
+
+  &__icon + &__label {
+    margin-left: .25rem;
+  }
+
+  &__link {
+    display: block;
+    white-space: nowrap;
+    transition: $theme-site-navbar-link-transition;
+  }
+
+  &--primary {
+    @include theme-navbar();
+    padding: $theme-site-navbar-primary-padding-y $theme-site-navbar-primary-padding-x;
+    background-color: $theme-site-navbar-primary-bg-color;
+  }
+
+  &--secondary {
+    @include theme-navbar();
+    padding: $theme-site-navbar-secondary-padding-y $theme-site-navbar-secondary-padding-x;
+    background-color: $theme-site-navbar-secondary-bg-color;
+  }
+}

package/scss/components/flows/_card-deck.scss

@@ -0,0 +1,47 @@
+.card-deck-flow {
+  $self: &;
+  @include make-row();
+
+  &__node {
+    margin-bottom: map-get($spacers, block);
+    @include make-col-ready();
+  }
+
+  &--2-cols {
+    #{ $self } {
+      &__node {
+        @include media-breakpoint-up(md) {
+          @include make-col(6);
+        }
+      }
+    }
+  }
+
+  &--3-cols {
+    #{ $self } {
+      &__node {
+        @include media-breakpoint-up(md) {
+          @include make-col(6);
+        }
+        @include media-breakpoint-up(lg) {
+          @include make-col(4);
+        }
+      }
+    }
+  }
+  &--4-cols {
+    #{ $self } {
+      &__node {
+        @include media-breakpoint-up(sm) {
+          @include make-col(6);
+        }
+        @include media-breakpoint-up(md) {
+          @include make-col(4);
+        }
+        @include media-breakpoint-up(lg) {
+          @include make-col(3);
+        }
+      }
+    }
+  }
+}

package/scss/components/flows/_column-list.scss

@@ -0,0 +1,28 @@
+.column-list-flow {
+  @include make-row();
+
+  &__column {
+    margin-bottom: map-get($spacers, block);
+    @include make-col-ready();
+    @include media-breakpoint-up(lg) {
+      @include make-col(6);
+    }
+    @include media-breakpoint-up(xl) {
+      @include make-col(4);
+    }
+  }
+  &__list {
+    margin-bottom: map-get($spacers, block);
+    @include make-col-ready();
+    @include media-breakpoint-up(lg) {
+      @include make-col(6);
+    }
+    @include media-breakpoint-up(xl) {
+      @include make-col(8);
+    }
+  }
+
+  &--reverse {
+    flex-direction: row-reverse;
+  }
+}

package/scss/components/flows/_featured.scss

@@ -0,0 +1,29 @@
+.featured-flow {
+  @include make-row();
+
+  &__featured {
+    margin-bottom: map-get($spacers, block);
+    @include make-col-ready();
+    @include media-breakpoint-up(md) {
+      @include make-col(5);
+    }
+    @include media-breakpoint-up(lg) {
+      @include make-col(4);
+    }
+  }
+
+  &__list {
+    margin-bottom: map-get($spacers, block);
+    @include make-col-ready();
+    @include media-breakpoint-up(md) {
+      @include make-col(7);
+    }
+    @include media-breakpoint-up(lg) {
+      @include make-col(8);
+    }
+  }
+
+  &--reverse {
+    flex-direction: row-reverse;
+  }
+}

package/scss/components/flows/_hero.scss

@@ -0,0 +1,44 @@
+.hero-flow {
+  @include make-row();
+
+  &__hero {
+    margin-bottom: map-get($spacers, block);
+    @include make-col-ready();
+    @include media-breakpoint-up(lg) {
+      @include make-col(7);
+    }
+    @include media-breakpoint-up(xl) {
+      @include make-col(8);
+    }
+  }
+
+  &__list {
+    margin-bottom: map-get($spacers, block);
+    @include make-col-ready();
+    @include media-breakpoint-up(lg) {
+      @include make-col(5);
+    }
+    @include media-breakpoint-up(xl) {
+      @include make-col(4);
+    }
+  }
+
+  &__header {
+    @include theme-card-header();
+    margin-right: $grid-gutter-width * 0.5;
+    margin-bottom: $marko-web-node-list-padding;
+    margin-left: $grid-gutter-width * 0.5;
+
+    &:empty {
+      display: none;
+    }
+
+    a {
+      @include theme-card-header-link();
+    }
+  }
+
+  &--reverse {
+    flex-direction: row-reverse;
+  }
+}

package/scss/components/flows/_incremented-nodes.scss

@@ -0,0 +1,21 @@
+.node-list {
+  $self: &;
+  &--incremented-nodes {
+    #{ $self }__nodes {
+      counter-reset: nodeCount;
+      #{ $self }__node {
+        display: flex;
+        flex-direction: row;
+        &::before {
+          counter-increment: nodeCount;                  /* Increment the value of nodeCount counter by 1 */
+          content: counter(nodeCount);
+          font-weight: bold;
+          padding-right: map-get($spacers, 2);
+          padding-left: map-get($spacers, 2);
+          margin-right: map-get($spacers, 2);
+          white-space: nowrap;
+        }
+      }
+    }
+  }
+}