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

package/scss/components/_site-menu.scss

@@ -0,0 +1,327 @@
+// prevents the page from scrolling when the nav is open
+// stylelint-disable-next-line
+body.site-menu--open {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+.site-menu {
+  $self: &;
+
+  position: fixed;
+  top: calculate-navbar-height-for(default);
+  bottom: 0;
+  z-index: $theme-site-header-z-index - 1;
+
+  width: $theme-site-navbar-menu-width;
+  max-width: $theme-site-navbar-menu-max-width;
+
+  overflow-x: auto;
+  overflow-y: scroll;
+
+  font-family: $theme-site-navbar-menu-font-family;
+
+  will-change: visibility;
+  visibility: hidden;
+
+  background-color: $theme-site-navbar-menu-bg-color;
+  opacity: 1;
+
+  transition: transform .25s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .25s;
+  transform: translateX(-#{$theme-site-navbar-menu-width});
+
+  @media (min-width: $skin-desktop-menu-breakpoint) {
+    position: absolute;
+    bottom: auto;
+    background-color: $gray-100;
+    transition: transform .25s cubic-bezier(.4, 0, .2, 1), visibility 0s linear 0s;
+    transform: translateY(-#{$theme-site-navbar-menu-width});
+
+    &--open {
+      width: 100%;
+      transition: transform .25s cubic-bezier(.4, 0, .2, 1), visibility 0s linear 0s;
+      transform: translateY(0);
+    }
+  }
+
+  @each $breakpoint, $width in sort-map-by-values($theme-site-header-breakpoints, desc) {
+    @media (max-width: $width) {
+      top: calculate-navbar-height-for($breakpoint);
+      max-height: calc(100vh - calculate-navbar-height-for($breakpoint));
+    }
+  }
+
+  &--open {
+    visibility: visible;
+    box-shadow: $theme-site-navbar-menu-box-shadow;
+    transition: transform .25s cubic-bezier(.4, 0, .2, 1), visibility 0s linear 0s;
+    transform: translateX(0);
+  }
+
+  &__link {
+    display: block;
+    padding: $theme-site-navbar-menu-link-padding-x $theme-site-navbar-menu-link-padding-y;
+    color: $theme-site-navbar-menu-link-color;
+    &:hover {
+      color: $theme-site-navbar-menu-link-hover-color;
+      text-decoration: none;
+      background-color: $theme-site-navbar-menu-hover-background-color;
+    }
+    &--active {
+      font-weight: $theme-site-navbar-menu-active-item-font-weight;
+      background-color: $theme-site-navbar-menu-hover-background-color;
+    }
+  }
+
+  &__link-wrapper {
+    display: flex;
+    justify-content: space-between;
+    #{ $self }-items__toggler {
+      background-color: transparent;
+      border: none;
+      outline: none;
+      min-width: 40px;
+    }
+  }
+
+  &__item {
+    font-size: $theme-site-navbar-menu-item-font-size;
+    font-weight: $theme-site-navbar-menu-item-font-weight;
+    border-bottom: 1px solid $theme-site-navbar-menu-item-border-color;
+    &--with-children {
+      > #{ $self }__items {
+        display: none;
+        &[class$="-open"] {
+          display: block;
+        }
+        #{ $self }__link {
+          font-size: .75em;
+          font-weight: $font-weight-normal;
+        }
+      }
+    }
+  }
+
+  &__items {
+    display: flex;
+    flex-direction: column;
+    padding-left: 0;
+    margin-bottom: 0;
+    list-style: none;
+  }
+
+  &__contents {
+    width: 100%;
+    height: 100%;
+    padding: $theme-site-navbar-menu-padding-x $theme-site-navbar-menu-padding-y;
+  }
+
+  &__contents-mobile {
+    width: 100%;
+    height: 100%;
+    padding: 24px;
+
+    @media (min-width: $skin-desktop-menu-breakpoint) {
+      display: none;
+    }
+  }
+
+  &__contents-desktop {
+    display: none;
+    max-width: $marko-web-document-container-max-width;
+    padding-top: 28px;
+    padding-right: $marko-web-page-wrapper-padding;
+    padding-bottom: 28px;
+    padding-left: $marko-web-page-wrapper-padding;
+    margin-right: auto;
+    margin-left: auto;
+
+    @media (min-width: $marko-web-document-container-max-width) {
+      padding-right: 0;
+      padding-left: 0;
+    }
+
+    @media (min-width: $skin-desktop-menu-breakpoint) {
+      display: block;
+    }
+  }
+
+  &__header {
+    padding: 0;
+    font-weight: 600;
+    color: $black;
+    letter-spacing: normal;
+    background-color: $gray-100;
+    border-bottom: none;
+  }
+
+  &__section {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    word-wrap: break-word;
+    background-color: transparent;
+    background-clip: border-box;
+
+    &--primary {
+      padding-top: $theme-site-navbar-menu-link-padding-x + 4px;
+      padding-bottom: $theme-site-navbar-menu-link-padding-x + 4px;
+      border-bottom: 1px solid $gray-200;
+
+      @media (min-width: $skin-desktop-menu-breakpoint) {
+        padding-top: 0;
+        padding-bottom: 0;
+        border-width: 0;
+      }
+
+      #{ $self } {
+        &__header {
+          @include skin-typography($style: "menu-item-primary-header");
+          margin-bottom: 12px;
+        }
+        &__item {
+          @include skin-typography($style: "menu-item-primary");
+          @media (min-width: $skin-desktop-menu-breakpoint) {
+            font-size: 18px;
+            line-height: 1.22;
+          }
+        }
+
+        &__link {
+          @include skin-typography-link($style: "menu-item-primary", $link-style: "primary");
+          @media (min-width: $skin-desktop-menu-breakpoint) {
+            padding-top: 8px;
+            padding-bottom: 8px;
+          }
+          &--active {
+            // stylelint-disable-next-line
+            font-weight: skin-typography-prop("menu-item-primary", "font-weight");
+            color: skin-typography-link-prop("menu-item-primary", "primary", "hover-color");
+          }
+        }
+      }
+    }
+
+    &--secondary {
+      padding-top: $theme-site-navbar-menu-link-padding-x + 4px;
+      padding-bottom: $theme-site-navbar-menu-link-padding-x + 4px;
+
+      @media (min-width: $skin-desktop-menu-breakpoint) {
+        padding-top: 0;
+        padding-bottom: 0;
+      }
+
+      #{ $self } {
+        &__header {
+          @include skin-typography($style: "menu-item-secondary-header");
+          margin-bottom: 6px;
+        }
+
+        &__item {
+          @include skin-typography($style: "menu-item-secondary");
+          @media (min-width: $skin-desktop-menu-breakpoint) {
+            font-size: 18px;
+            font-weight: $font-weight-normal;
+          }
+        }
+
+        &__link {
+          @include skin-typography-link($style: "menu-item-secondary", $link-style: "primary");
+          @media (min-width: $skin-desktop-menu-breakpoint) {
+            padding-top: 10px;
+            padding-bottom: 10px;
+          }
+          &--active {
+            // stylelint-disable-next-line
+            font-weight: skin-typography-prop("menu-item-secondary", "font-weight");
+            color: skin-typography-link-prop("menu-item-secondary", "primary", "hover-color");
+          }
+        }
+      }
+    }
+
+    &--search {
+      padding-bottom: $theme-site-navbar-menu-link-padding-x * 2 + 4px;
+
+      .input-group {
+        .form-control {
+          border-top-right-radius: 0;
+          border-bottom-right-radius: 0;
+        }
+        .btn {
+          padding-right: 18px;
+          padding-left: 18px;
+          border-top-left-radius: 0;
+          border-bottom-left-radius: 0;
+        }
+        .search-sponsor__logo {
+          margin-left: 1rem;
+        }
+      }
+    }
+
+    &--social-icons {
+      flex-direction: row;
+      padding: $theme-site-navbar-menu-link-padding-x $theme-site-navbar-menu-link-padding-y;
+
+      > .social-icon-link {
+        margin-right: .75rem;
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+    }
+
+    &--user {
+      padding-top: 0;
+      padding-bottom: 4px;
+      margin-bottom: 12px;
+      border-bottom: 1px solid $gray-200;
+
+      #{ $self } {
+        &__header {
+          @include skin-typography($style: "menu-item-secondary-header");
+          background-color: transparent;
+          margin-bottom: 6px;
+        }
+
+        &__item {
+          @include skin-typography($style: "menu-item-secondary");
+          @media (min-width: $skin-desktop-menu-breakpoint) {
+            font-size: 18px;
+            font-weight: $font-weight-normal;
+          }
+        }
+
+        &__link {
+          @include skin-typography-link($style: "menu-item-secondary", $link-style: "primary");
+          @media (min-width: $skin-desktop-menu-breakpoint) {
+            padding-top: 10px;
+            padding-bottom: 10px;
+          }
+          &--active {
+            // stylelint-disable-next-line
+            font-weight: skin-typography-prop("menu-item-secondary", "font-weight");
+            color: skin-typography-link-prop("menu-item-secondary", "primary", "hover-color");
+          }
+        }
+      }
+    }
+  }
+}
+
+.social-follow {
+  $self: &;
+
+  &--site-menu {
+    padding-bottom: $theme-site-navbar-menu-link-padding-x * 2 + 4px;
+    border-bottom: 1px solid $gray-200;
+    @media (min-width: $skin-desktop-menu-breakpoint) {
+      border-width: 0;
+    }
+  }
+}

package/scss/components/_site-navbar-b.scss

@@ -0,0 +1,128 @@
+@if $navbarStyle == "navbar-b" {
+  .site-navbar {
+    $self: &;
+    &__container {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      max-width: $marko-web-document-container-max-width;
+      @include media-breakpoint-up(xl, $grid-breakpoints) {
+        max-width: $marko-web-document-container-max-width;
+      }
+    }
+    &__logo {
+      filter: none;
+      width: auto;
+    }
+    &__brand {
+      margin: 0;
+    }
+    &--top {
+      width: 100%;
+      @media (max-width: map-get($theme-site-header-breakpoints, small-logo)) {
+        height: 58px;
+      }
+      background-color: $theme-site-navbar-secondary-bg-color;
+      #{ $self } {
+        &__container {
+          height: $theme-site-navbar-logo-height + 30px;
+          @media (max-width: map-get($theme-site-header-breakpoints, small-logo)) {
+            height: $theme-site-navbar-logo-height-sm + 20px;
+          }
+        }
+        &__left {
+          align-self: flex-end;
+          padding-left: 0;
+          @media (max-width: map-get($theme-site-header-breakpoints, small-logo)) {
+            display: none;
+          }
+        }
+        &__center {
+          display: flex;
+          @media (min-width: map-get($theme-site-header-breakpoints, small-logo)) {
+            justify-content: center;
+          }
+        }
+        &__center.col-lg-6 {
+          justify-content: flex-start;
+          padding-left: 0;
+        }
+        &__right {
+          display: flex;
+          justify-content: flex-end;
+          @media (min-width: map-get($theme-site-header-breakpoints, hide-primary)) {
+            padding-right: 0;
+          }
+          .btn,
+          #{ $self }__toggler {
+            width: 40px;
+            height: 40px;
+            padding: 0;
+            margin: 0 0 0 12px;
+            font-size: 1rem;
+            background-color: $gray-100;
+            border-radius: 4px;
+          }
+        }
+      }
+      .subscribe-box {
+        display: flex;
+        &--cover-image {
+          align-self: flex-end;
+        }
+        &--call-to-action {
+          align-self: center;
+          .btn-primary {
+            padding: 8px;
+            margin-left: 16px;
+            font-size: 12px;
+            text-transform: initial;
+          }
+          &:only-child {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            height: $theme-site-navbar-logo-height + 30px;
+            @media (max-width: map-get($theme-site-header-breakpoints, small-logo)) {
+              height: $theme-site-navbar-logo-height-sm + 20px;
+            }
+            .btn-primary {
+              @media (min-width: map-get($theme-site-header-breakpoints, hide-primary)) {
+                margin-left: 0;
+              }
+            }
+          }
+        }
+      }
+    }
+    &--primary {
+      background-color: $theme-site-navbar-primary-bg-color;
+      border-top: 1px solid $gray-400;
+      #{ $self } {
+        &__link {
+          color: $theme-site-navbar-primary-link-color;
+          text-transform: initial;
+          &--active {
+            color: $theme-site-navbar-primary-link-active-color;
+            font-weight: 700;
+            text-decoration: none;
+            text-shadow: none;
+          }
+        }
+        &__items {
+          justify-content: space-between;
+        }
+      }
+      .site-navbar {
+        &__item {
+          flex-grow: unset;
+          padding-right: 0;
+          padding-left: 0;
+        }
+      }
+    }
+    .magazine-cover {
+      height: 78px;
+    }
+  }
+}

package/scss/components/_site-navbar.scss

@@ -0,0 +1,107 @@
+@if $navbarStyle == "navbar" {
+  .site-navbar {
+    $self: &;
+
+    &__container {
+      max-width: $marko-web-document-container-max-width;
+      @include media-breakpoint-up(xl, $grid-breakpoints) {
+        max-width: $marko-web-document-container-max-width;
+      }
+    }
+
+    &__brand {
+      @media (max-width: map-get($theme-site-header-breakpoints, small-logo)) {
+        // reduce padding on small logo
+        margin-right: $theme-site-navbar-brand-margin-x * 0.5;
+        margin-left: $theme-site-navbar-brand-margin-x * 0.5;
+      }
+      &:first-child {
+        margin-left: $marko-web-page-wrapper-padding;
+      }
+    }
+
+    &__logo {
+      filter: none;
+      width: auto;
+    }
+
+    &__newsletter-toggler,
+    &__idx-newsletter-toggler {
+      @include theme-toggle-button();
+      padding: 0;
+      margin-top: auto;
+      margin-bottom: auto;
+
+      @media (min-width: map-get($theme-site-header-breakpoints, hide-secondary)) {
+        margin-left: auto;
+      }
+
+      & > .marko-web-icon {
+        @include theme-navbar-link-color($theme-site-navbar-secondary-colors);
+      }
+    }
+
+    &__icon-wrapper {
+      display: flex;
+      flex-wrap: nowrap;
+      margin-left: auto;
+      padding-left: 1rem;
+      #{ $self }__toggler {
+        margin-left: 1rem;
+      }
+    }
+
+    &__search {
+      &--sponsored {
+        padding-top: 0;
+        padding-bottom: 0;
+        display: flex;
+        align-self: center;
+        @media (max-width: map-get($theme-site-header-breakpoints, small-logo)) {
+          margin-top: 0;
+          margin-bottom: 0;
+        }
+        img {
+          margin-left: 12px;
+          max-height: 24px;
+        }
+      }
+    }
+
+    &--secondary {
+      #{ $self } {
+        &__container {
+          @media (max-width: map-get($theme-site-header-breakpoints, hide-secondary)) {
+            justify-content: space-between;
+          }
+        }
+      }
+    }
+
+    &__items {
+      text-transform: none;
+
+      &--secondary {
+        @media (max-width: map-get($theme-site-header-breakpoints, hide-secondary)) {
+          display: none;
+        }
+        margin-top: auto;
+        margin-bottom: auto;
+
+        // set letter spacing per design
+        letter-spacing: .5px;
+
+        #{ $self } {
+          &__link {
+            padding-top: 0;
+
+            @media (max-width: map-get($theme-site-header-breakpoints, small-text-secondary)) {
+              padding-right: 8px;
+              padding-left: 8px;
+            }
+          }
+        }
+      }
+    }
+  }
+}