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

package/scss/_variables.scss

@@ -0,0 +1,328 @@
+// Fonts
+//
+// Skin primary + secondary fonts. By default, set secondary to primary.
+$skin-font-family-primary: Arial, sans-serif !default;
+$skin-font-family-secondary: Arial, sans-serif !default;
+
+// Set bootstrap font to primary skin font
+$font-family-sans-serif: $skin-font-family-primary !default;
+
+// Set theme's font family and page title to primary skin font.
+$theme-font-family-sans-serif: $skin-font-family-primary !default;
+$theme-font-family-page-title: $skin-font-family-primary !default;
+$theme-item-description-font-family: $skin-font-family-secondary !default;
+
+// Use secondary font for content body headings, by default.
+$theme-heading-font-family: $skin-font-family-secondary !default;
+
+// Reduced the z-index to prevent overlaying the welcome ad.
+$theme-site-header-z-index: 15000 !default;
+
+// Low-Level Vars
+//
+// Disable rounding and shadows
+$enable-shadows: false !default;
+$enable-rounded: false !default;
+$border-radius: .25rem !default;
+$btn-border-radius: $border-radius !default;
+$input-border-radius: $border-radius !default;
+// Disable box shadow on button focus
+$btn-active-box-shadow: none !default;
+$btn-focus-width: 0 !default;
+// Override bredcrumb divider
+$breadcrumb-divider: "|" !default;
+// Set gutter and block spacer
+$grid-gutter-width: 20px !default;
+$block-spacer: 24px !default;
+$spacers: (
+  block-xl: $block-spacer * 2.5,
+  block-lg: $block-spacer * 1.5,
+  block: $block-spacer,
+  block-sm: $block-spacer * 0.5,
+  block-xs: $block-spacer * 0.25,
+);
+
+// Determine the response text breakpoint
+$theme-responsive-text-breakpoint: md !default;
+
+$hr-margin-y: $grid-gutter-width * 0.5 !default;
+
+// Marko Web Document and Page Settings
+//
+$marko-web-document-container-max-width: 1080px !default;
+$marko-web-document-container-gutter: 0 !default;
+$marko-web-page-wrapper-padding: 10px !default;
+$marko-web-page-padding: 0 !default;
+
+// Colors
+//
+// Set default grayscale
+$black:    #000 !default;
+$gray-900: #232325 !default;
+$gray-800: #3f4043 !default;
+$gray-700: #68686c !default;
+$gray-600: #8c8e97 !default;
+$gray-500: #91939c !default;
+$gray-400: #c4c6cb !default;
+$gray-300: #dee2e6 !default;
+$gray-200: #e3e4e5 !default;
+$gray-100: #f0f1f2 !default;
+$white:    #fff !default;
+
+// Set default body bg, font color, and primary/secondary color
+$body-bg: $white !default;
+$body-color: $gray-800 !default;
+$blue: #134f8c !default;
+// Primary/secondary
+$primary: $blue !default;
+$secondary: $gray-800 !default;
+// Default hover colors
+$skin-primary-hover-color: darken($primary, 13%) !default;
+$skin-secondary-hover-color: $gray-900 !default;
+// Newsletter signup colors
+$skin-newsletter-signup-inline-btn-color: $gray-900 !default;
+$skin-newsletter-signup-bg-color: $gray-100 !default;
+
+// Ad background colors
+$skin-ad-bg-color: $gray-100 !default;
+$skin-ad-label-color: $gray-700 !default;
+// HR color
+$hr-border-color: $gray-700 !default;
+
+$colors: (
+  "blue": $blue,
+  "tar-black": $gray-900,
+  "charcoal": $gray-800,
+  "smokey-gray": $gray-700,
+  "silver-fox": $gray-600,
+  "cloud": $gray-400,
+  "concrete": $gray-200,
+  "fog": $gray-100,
+  "sponsor-blue": $blue,
+);
+
+// Marko Web Nodes
+//
+$marko-web-node-padding: 20px !default;
+
+$marko-web-node-placeholder-image: none !default;
+$marko-web-node-placeholder-image-bg-color: transparent !default;
+
+$marko-web-node-overlay-image-text-shadow: none !default;
+$marko-web-node-overlay-image-gradient: linear-gradient(to top, rgba($gray-800, .1), rgba($gray-800, .1)) !default;
+
+// Marko Web Node Lists
+//
+$marko-web-node-list-padding: 16px !default;
+$marko-web-node-list-border-color: $gray-200 !default;
+
+// Font Weights
+//
+$font-weight-bold: 700 !default;
+$font-weight-semibold: 600 !default;
+$font-weight-medium: 500 !default;
+$font-weight-normal: 400 !default;
+
+// Buttons, Inputs, and Typography
+//
+@import "variables/buttons";
+@import "variables/inputs";
+@import "variables/typography";
+
+// Marko Icons
+$marko-web-icon-fill-dark: $gray-800 !default;
+$marko-web-icon-fill-light: $white !default;
+
+// Skin content body and image widths
+$skin-aligned-image-width: 300px !default;
+$skin-aligned-body-image-spacer: .75rem !default;
+$skin-content-body-max-width: 700px !default;
+$skin-content-primary-image-max-width: 880px !default;
+
+// Page
+$theme-page-title-font-weight: $font-weight-bold;
+
+// Header
+$navbarStyle: "navbar" !default;
+$theme-site-header-box-shadow: none !default;
+$theme-site-header-breakpoints: () !default;
+$theme-site-header-breakpoints: map-merge(
+  (
+    hide-primary: 100000px, // effectively always hide the primary nav
+    hide-secondary: 700px,
+    small-logo: 775px,
+    small-text-primary: 0,
+    small-text-secondary: 830px
+  ),
+  $theme-site-header-breakpoints
+);
+
+// Navbar
+$skin-desktop-menu-breakpoint: map-get($theme-site-header-breakpoints, hide-secondary) !default;
+$theme-site-navbar-brand-margin-x: 36px !default;
+
+$theme-site-navbar-logo-height: 46px !default;
+$theme-site-navbar-logo-height-sm: 35px !default;
+
+$theme-site-navbar-primary-link-color: $gray-800 !default;
+$theme-site-navbar-primary-link-active-color: $gray-800 !default;
+$theme-site-navbar-primary-link-hover-color: $gray-800 !default;
+$theme-site-navbar-primary-bg-color: $white !default;
+$theme-site-navbar-primary-height-sm: 0px !default;
+
+$theme-site-navbar-secondary-link-color: $gray-800 !default;
+$theme-site-navbar-secondary-bg-color: $white !default;
+$theme-site-navbar-secondary-font-size: 18px !default;
+$theme-site-navbar-secondary-font-size-sm: $theme-site-navbar-secondary-font-size - 2 !default;
+$theme-site-navbar-secondary-line-height: get-line-height($theme-site-navbar-secondary-font-size, 26px) !default;
+$theme-site-navbar-secondary-line-height-sm: get-line-height($theme-site-navbar-secondary-font-size-sm, 24px) !default;
+$theme-site-navbar-secondary-font-weight: $font-weight-semibold !default;
+$theme-site-navbar-secondary-padding-y: 15px !default;
+$theme-site-navbar-secondary-type: light !default;
+$theme-site-navbar-secondary-link-active-decoration: none !default;
+$theme-site-navbar-secondary-link-hover-decoration: none !default;
+
+$theme-site-navbar-secondary-link-color: $gray-800 !default;
+$theme-site-navbar-secondary-link-active-color: $primary !default;
+$theme-site-navbar-secondary-link-hover-color: $primary !default;
+$theme-site-navbar-secondary-link-padding: 15px !default;
+
+// Site Menu
+$theme-site-navbar-menu-width: 500px !default;
+$theme-site-navbar-menu-max-width: 100% !default;
+
+$theme-site-navbar-menu-box-shadow: 0 8px 8px 0 rgba(0, 0, 0, .1), 0 6px 20px 0 rgba(0, 0, 0, .15) !default;
+$theme-site-navbar-menu-padding-x: 24px !default;
+$theme-site-navbar-menu-padding-y: 24px !default;
+$theme-site-navbar-menu-bg-color: $white !default;
+$theme-site-navbar-menu-hover-background-color: transparent !default;
+
+$theme-site-navbar-menu-item-font-size: 24px !default;
+$theme-site-navbar-menu-item-font-weight: $font-weight-bold !default;
+$theme-site-navbar-menu-item-border-color: transparent !default;
+
+$theme-site-navbar-menu-active-item-font-weight: $font-weight-bold !default;
+
+$theme-site-navbar-menu-link-padding-x: 10px !default;
+$theme-site-navbar-menu-link-padding-y: 0 !default;
+$theme-site-navbar-menu-link-color: $black !default;
+$theme-site-navbar-menu-link-hover-color: $primary !default;
+
+// Site Footer
+$global-site-footer-color: $white !default;
+
+$theme-site-footer-font-size: 16px !default;
+$theme-site-footer-line-height: get-line-height($theme-site-footer-font-size, 30px) !default;
+
+$theme-site-footer-secondary-bg-color: $gray-800 !default;
+$theme-site-footer-primary-bg-color: $gray-900 !default;
+
+$theme-site-footer-copyright-color: $white !default;
+$theme-site-footer-copyright-font-size: $theme-site-footer-font-size !default;
+
+$theme-site-footer-spacer: 14px !default;
+$theme-site-footer-spacer-sm: 14px !default;
+
+$theme-site-footer-logo-height: 35px !default;
+$theme-site-footer-logo-height-sm: 35px !default;
+
+$theme-site-footer-corporate-logo-height: 30px !default;
+
+// Items/Nodes
+$theme-item-link-hover-decoration: none !default;
+
+$theme-item-header-color: $primary !default;
+$theme-item-header-font-family: $skin-font-family-primary !default;
+$theme-item-header-font-size: 15px !default;
+$theme-item-header-font-weight: $font-weight-bold !default;
+
+$theme-item-header-link-hover-color: $primary !default;
+
+$theme-item-title-link-hover-color: $primary !default;
+
+$theme-item-description-max-lines: 3 !default;
+$theme-item-description-margin: 10px !default;
+
+// Ads
+$theme-ad-box-shadow: none !default;
+
+// Cards and Card Headers
+$theme-card-header-background-color: transparent !default;
+$theme-card-header-color: $gray-800 !default;
+$theme-card-header-font-size: 22px !default;
+$theme-card-header-font-weight: $font-weight-bold !default;
+$theme-card-header-text-transform: none !default;
+$theme-card-header-border: none !default;
+
+$theme-card-header-link-color: $gray-800 !default;
+$theme-card-header-link-hover-color: $primary !default;
+$theme-card-header-link-hover-decoration: none !default;
+
+$marko-web-node-bg-color: transparent !default;
+$theme-card-background-color: transparent !default;
+
+// Pages
+$theme-page-body-font-family: $theme-font-family-sans-serif !default;
+
+$theme-page-body-font-size: 19px !default;
+$theme-page-body-font-size-sm: $theme-page-body-font-size !default;
+$theme-page-body-line-height: get-line-height($theme-page-body-font-size, 25px) !default;
+$theme-page-body-line-height-sm: $theme-page-body-line-height !default;
+
+// Caption / Credit / Media
+$theme-media-footer-font-size: 16px !default;
+
+$theme-media-footer-line-height: get-line-height($theme-media-footer-font-size, 22px) !default;
+$theme-media-caption-color: #474747 !default;
+$theme-media-credit-font-size: 14px !default;
+
+// Headings
+$theme-heading-large-font-size:       28px !default;
+$theme-heading-large-font-size-sm:    28px !default;
+$theme-heading-large-line-height:     1.2 !default;
+$theme-heading-large-line-height-sm:  1.2 !default;
+
+$theme-heading-h4-font-size:          24px !default;
+$theme-heading-h4-font-size-sm:       24px !default;
+$theme-heading-h4-line-height:        1.2 !default;
+$theme-heading-h4-line-height-sm:     1.2 !default;
+
+$theme-heading-h5-font-size:          24px !default;
+$theme-heading-h5-font-size-sm:       24px !default;
+$theme-heading-h5-line-height:        1.2 !default;
+$theme-heading-h5-line-height-sm:     1.2 !default;
+
+$theme-heading-h6-font-size:          20px !default;
+$theme-heading-h6-font-size-sm:       20px !default;
+$theme-heading-h6-line-height:        1.2 !default;
+$theme-heading-h6-line-height-sm:     1.2 !default;
+
+// Content Headings
+$theme-content-heading-large-margin-bottom:     1rem !default;
+$theme-content-heading-large-margin-bottom-sm:  1rem !default;
+
+$theme-content-heading-h2-margin-bottom:        1rem !default;
+$theme-content-heading-h2-margin-bottom-sm:     1rem !default;
+
+$theme-content-heading-h3-margin-bottom:        1rem !default;
+$theme-content-heading-h3-margin-bottom-sm:     1rem !default;
+
+$theme-content-heading-h4-margin-bottom:        1rem !default;
+$theme-content-heading-h4-margin-bottom-sm:     1rem !default;
+
+$theme-content-heading-h5-margin-bottom:        1rem !default;
+$theme-content-heading-h5-margin-bottom-sm:     1rem !default;
+
+$theme-content-heading-h6-margin-bottom:        1rem !default;
+$theme-content-heading-h6-margin-bottom-sm:     1rem !default;
+
+
+// Embedded media
+$theme-embedded-media-align-left-width: $skin-aligned-image-width !default;
+$theme-embedded-media-align-left-margin: $skin-aligned-body-image-spacer !default;
+
+$theme-embedded-media-align-right-width: $skin-aligned-image-width !default;
+$theme-embedded-media-align-right-margin: $skin-aligned-body-image-spacer !default;
+
+// FROM DEFAULT THEME
+@import "variables/default-theme";

package/scss/components/_ad-container.scss

@@ -0,0 +1,237 @@
+.ad-container {
+  $self: &;
+  text-align: left;
+
+  $container-bottom-padding: 30px;
+  $wrapper-first-child-padding: 16px;
+  $label-bottom-padding: 4px;
+  $label-font-size: 10px;
+  $label-line-height: 1;
+  $container-height: $container-bottom-padding + $wrapper-first-child-padding + ($label-font-size * $label-line-height) + $label-bottom-padding;
+
+  $leaderboard-min-height-mobile: 50px !default;
+  $leaderboard-min-height-desktop: 90px !default;
+  $billboard-min-height-mobile: 210px !default;
+  $billboard-min-height-desktop: 596px !default;
+  $superstitial-min-height-mobile: 210px !default;
+  $superstitial-min-height-desktop: 596px !default;
+  $rotation-min-height-mobile: 50px !default;
+  $rotation-min-height-desktop: 90px !default;
+
+  $rail-ad-bg-color: $skin-ad-bg-color !default;
+
+  &--inter-block {
+    margin-right: -#{$marko-web-page-wrapper-padding};
+    margin-bottom: 0;
+    margin-left: -#{$marko-web-page-wrapper-padding};
+    background-color: $skin-ad-bg-color;
+    @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;
+    }
+
+    @include media-breakpoint-down(md) {
+      margin-right: -16px;
+      margin-left: -16px;
+    }
+
+    #{ $self } {
+      &__wrapper {
+        padding-bottom: $container-bottom-padding;
+        margin-right: auto;
+        margin-left: auto;
+        text-align: center;
+
+        @media (min-width: 970px) {
+          max-width: 970px;
+        }
+      }
+    }
+  }
+
+  &--inline {
+    margin-right: $marko-web-page-wrapper-padding * -1;
+    margin-bottom: 0;
+    margin-left: $marko-web-page-wrapper-padding * -1;
+    background-color: $skin-ad-bg-color;
+    @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;
+    }
+
+    @include media-breakpoint-down(md) {
+      margin-right: -16px;
+      margin-left: -16px;
+    }
+  }
+
+  &--inline-content {
+    margin-right: $marko-web-page-wrapper-padding * -1;
+    margin-bottom: 30px;
+    margin-left: $marko-web-page-wrapper-padding * -1;
+
+    clear: both;
+    background-color: $skin-ad-bg-color;
+
+    @media (min-width: $skin-content-body-max-width) {
+      $margin: calc(((100vw - $skin-content-body-max-width) / 2) * -1);
+      margin-right: $margin;
+      margin-left: $margin;
+    }
+
+    @include media-breakpoint-down(md) {
+      margin-right: -16px;
+      margin-left: -16px;
+    }
+  }
+
+  &--inline,
+  &--inline-content {
+    #{ $self } {
+      &__wrapper {
+        padding-bottom: $container-bottom-padding;
+      }
+    }
+  }
+
+  &--in-card {
+    display: flex;
+    justify-content: center;
+    min-height: 100%;
+    > div {
+      margin-top: auto;
+      margin-bottom: auto;
+    }
+  }
+
+  &--rail {
+    background-color: $rail-ad-bg-color;
+    > *:first-child {
+      padding-bottom: $container-bottom-padding;
+    }
+    @media (min-width: 980px) {
+      margin-bottom: 24px;
+    }
+  }
+
+  &--rail-mobile {
+    background-color: $rail-ad-bg-color;
+    > *:first-child {
+      padding-bottom: $container-bottom-padding;
+    }
+    @media (min-width: 300px) {
+      margin-bottom: 24px;
+    }
+    @media (min-width: 980px) {
+      margin-bottom: 0;
+    }
+  }
+
+  &--inline-feed {
+    background-color: $skin-ad-bg-color;
+    > *:first-child {
+      padding-bottom: $container-bottom-padding;
+    }
+  }
+
+  &--max-width-300 {
+    #{ $self } {
+      &__wrapper {
+        @media (min-width: 300px) {
+          max-width: 300px;
+        }
+      }
+    }
+  }
+
+  &--max-width-970 {
+    #{ $self } {
+      &__wrapper {
+        @media (min-width: 970px) {
+          max-width: 970px;
+        }
+      }
+    }
+  }
+
+  &--margin-auto-x {
+    #{ $self } {
+      &__wrapper {
+        margin-right: auto;
+        margin-left: auto;
+        text-align: center;
+      }
+    }
+  }
+
+  &--template-leaderboard {
+    min-height: $leaderboard-min-height-mobile + $container-height;
+    @media (min-width: 780px) {
+      min-height: $leaderboard-min-height-desktop + $container-height;
+    }
+  }
+
+  &--template-billboard {
+    min-height: $billboard-min-height-mobile + $container-height;
+    @media (min-width: 780px) {
+      min-height: $billboard-min-height-desktop + $container-height;
+    }
+  }
+
+  &--template-superstitial {
+    min-height: $superstitial-min-height-mobile + $container-height;
+    @media (min-width: 780px) {
+      min-height: $superstitial-min-height-desktop + $container-height;
+    }
+  }
+
+  &--template-rotation,
+  &--template-inline-content-desktop,
+  &--template-inline-content-mobile {
+    min-height: $rotation-min-height-mobile + $container-height;
+    @media (min-width: 780px) {
+      min-height: $rotation-min-height-desktop + $container-height;
+    }
+  }
+
+  &--inline-content#{&}--template-inline-content-desktop {
+    display: none;
+    @media (min-width: 780px) {
+      display: block;
+    }
+  }
+
+  &--inline-content#{&}--template-inline-content-mobile {
+    @media (min-width: 780px) {
+      display: none;
+    }
+  }
+
+  &--with-label {
+    > *:first-child {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding-top: $wrapper-first-child-padding;
+
+      &::before {
+        padding-bottom: $label-bottom-padding;
+        font-size: $label-font-size;
+        line-height: $label-line-height;
+        color: $skin-ad-label-color;
+        text-transform: uppercase;
+        content: "Advertisement";
+      }
+    }
+  }
+
+  &--top-of-page {
+    margin-bottom: $theme-ad-margin;
+  }
+
+  iframe {
+    box-shadow: $theme-ad-box-shadow;
+  }
+}

package/scss/components/_author-bio-node.scss

@@ -0,0 +1,47 @@
+.node-list {
+  &--author-bios {
+    background-color: $gray-200;
+    padding-left: map-get($spacers, block);
+    padding-right: map-get($spacers, block);
+    margin-bottom: map-get($spacers, block);
+  }
+}
+.author-bio-node {
+  display: flex;
+  align-items: center;
+  margin-top: 17px;
+
+  &__image {
+    $size: 96px;
+    width: $size;
+    height: $size;
+    margin-right: 10px;
+    border-radius: $size;
+  }
+
+  &__content-name {
+    @include skin-typography($style: "author-content-page", $link-style: "primary");
+  }
+
+  &__content-teaser {
+    @include media-breakpoint-down(md) {
+      display: none;
+    }
+  }
+
+  &__cta {
+    margin-top: map-get($spacers, 2);
+  }
+}
+
+.inline-author-bio {
+  &__content-body {
+    margin-bottom: 18px;
+    font-size: 16px;
+    font-style: italic;
+
+    @include media-breakpoint-up(md) {
+      font-size: 18px;
+    }
+  }
+}

package/scss/components/_author-node.scss

@@ -0,0 +1,23 @@
+.author-node {
+  display: flex;
+  align-items: center;
+  margin-top: 16px;
+
+  &__image {
+    $size: 48px;
+    width: $size;
+    height: $size;
+    margin-right: 10px;
+    border-radius: $size;
+  }
+
+  &__content-name {
+    @include skin-typography($style: "author-name-list", $link-style: "primary");
+  }
+
+  &__content-title {
+    margin-top: 5px;
+    @include skin-typography($style: "author-title-list");
+    text-transform: capitalize;
+  }
+}

package/scss/components/_author-published-node.scss

@@ -0,0 +1,43 @@
+.author-published-node {
+  display: flex;
+  align-items: center;
+  margin-top: 17px;
+
+  &__image {
+    $size: 48px;
+    width: $size;
+    height: $size;
+    margin-right: 10px;
+    border-radius: $size;
+  }
+
+  &__content-name {
+    @include skin-typography($style: "author-content-page", $link-style: "primary");
+  }
+
+  &__content-published,
+  &__content-updated {
+    @include skin-typography($style: "date-content-page");
+    display: inline;
+    margin-top: 2px;
+    text-transform: none;
+  }
+
+  &__content-updated {
+    &::before {
+      content: " | ";
+    }
+  }
+}
+
+.inline-author-bio {
+  &__content-body {
+    margin-bottom: 18px;
+    font-size: 16px;
+    font-style: italic;
+
+    @include media-breakpoint-up(md) {
+      font-size: 18px;
+    }
+  }
+}

package/scss/components/_bootstrap.scss

@@ -0,0 +1,19 @@
+// Include desired components...
+@import "bootstrap/scss/root";
+@import "bootstrap/scss/reboot";
+@import "bootstrap/scss/type";
+@import "bootstrap/scss/utilities";
+@import "bootstrap/scss/grid";
+@import "bootstrap/scss/buttons";
+@import "bootstrap/scss/forms";
+@import "bootstrap/scss/input-group";
+@import "bootstrap/scss/custom-forms";
+@import "bootstrap/scss/nav";
+@import "bootstrap/scss/navbar";
+@import "bootstrap/scss/images";
+
+@import "bootstrap/scss/tables";
+@import "bootstrap/scss/breadcrumb";
+@import "bootstrap/scss/alert";
+@import "bootstrap/scss/carousel";
+@import "bootstrap/scss/spinners";

package/scss/components/_breadcrumbs.scss

@@ -0,0 +1 @@
+@import "../../components/breadcrumbs/scss/breadcrumbs";