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

package/scss/components/_content-page.scss

@@ -0,0 +1,351 @@
+.content-page-body {
+  max-width: $skin-content-body-max-width;
+  margin-right: auto;
+  margin-left: auto;
+  video {
+    max-width: 100%;
+  }
+}
+
+.content-page-header {
+  max-width: $skin-content-body-max-width;
+
+  &--full-width {
+    max-width: 100%;
+  }
+
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.content-page-header .details {
+  padding: map-get($spacers, block);
+  margin-bottom: map-get($spacers, block);
+  background-color: $gray-100;
+  &__image {
+    margin-bottom: map-get($spacers, block);
+  }
+  .page-contact-details {
+    &__content-website,
+    &__content-public-email {
+      display: inline;
+    }
+  }
+}
+
+.contact-page {
+  &__content-name {
+    margin-bottom: 16px;
+    @include skin-typography($style: "header-1");
+  }
+  &__wrapper {
+    display: flex;
+  }
+  &__image {
+    $size: 160px;
+    $size-small: 112px;
+    width: $size-small;
+    height: $size-small;
+    margin-right: 20px;
+    border-radius: $size-small;
+
+    @include media-breakpoint-up(md) {
+      width: $size;
+      height: $size;
+      border-radius: $size;
+    }
+  }
+}
+/*! purgecss start ignore */
+.page-contents {
+  $self: &;
+
+  &__content-body p {
+
+    [data-embed-type="image"][data-embed-align="right"] {
+      margin-bottom: 1rem;
+      @include media-breakpoint-up(md) {
+        text-align: right;
+      }
+    }
+
+    [data-embed-type="image"][data-embed-align="left"] {
+      margin-bottom: 1rem;
+      @include media-breakpoint-up(md) {
+        text-align: left;
+      }
+    }
+  }
+
+  &__content-body h2 {
+    font-size: 26px;
+    @include media-breakpoint-down(sm) {
+      font-size: 23px;
+    }
+  }
+
+  &__content-body h3 {
+    font-size: 24px;
+  }
+
+  &__content-body ol,
+  &__content-body ul {
+    list-style-position: initial;
+  }
+
+  .btn-transcript,
+  .btn-transcript:hover {
+    background-color: $gray-100;
+    border-radius: 10px;
+  }
+
+  &__content-transcript-title {
+    @include skin-typography($style: "article-text", $link-style: "content-body");
+    font-weight: 700;
+    margin-top: map-get($spacers, 2);
+    margin-bottom: map-get($spacers, 2);
+  }
+
+  &__content-body {
+    @include theme-content-body();
+
+    > :last-child {
+      margin-bottom: 0;
+    }
+
+    blockquote {
+      display: block;
+      padding: 20px;
+      border-left: 8px solid #d2d2d2;
+      background: #e3e3e3;
+      p {
+        margin-bottom: 0;
+      }
+    }
+
+    .pullquote {
+      position: relative;
+      float: right;
+      width: 50%;
+      max-width: 50%;
+      padding: 12px 0 12px 12px;
+      margin: 6px 0 6px 12px;
+      font-size: 18.75px;
+      color: #6f6f6f;
+      z-index: 0;
+      &::before {
+        position: absolute;
+        left: 0;
+        z-index: -1;
+        font-size: 8em;
+        line-height: .6em;
+        content: "“";
+        color: #dedede;
+      }
+    }
+
+    .drop-caps {
+      display: inherit;
+      &::first-letter {
+        float: left;
+        padding: 0;
+        margin: -.05em .125em 0 0;
+        font-size: 115px;
+        font-weight: 700;
+        line-height: .8;
+      }
+    }
+
+    p.footnote {
+      @include theme-apply-fonts(
+        $font-family: $theme-content-heading-h6-font-family,
+        $font-size-sm: $theme-content-heading-h6-font-size-sm,
+        $font-size: $theme-content-heading-h6-font-size,
+        $font-weight: $theme-content-heading-h6-font-weight,
+        $line-height-sm: $theme-content-heading-h6-line-height-sm,
+        $line-height: $theme-content-heading-h6-line-height
+      );
+    }
+  }
+
+  &__content-sidebar {
+    @include border-radius($theme-page-border-radius);
+    @include theme-content-body();
+    @include theme-page-body-spacing();
+    padding: map-get($spacers, 4);
+    background-color: $gray-100;
+    border-left: 8px solid $gray-300;
+  }
+
+  &__content-body,
+  &__content-profile,
+  &__content-sidebar,
+  &__content-transcript {
+    padding-bottom: map-get($spacers, block);
+    @include skin-typography($style: "article-text", $link-style: "content-body");
+
+    &:empty {
+      display: none;
+    }
+
+    .btn-primary {
+      color: map-deep-get($skin-buttons, "primary", "color");
+      text-decoration: none;
+      &:hover {
+        color: map-deep-get($skin-buttons, "primary", "hover-color");
+        text-decoration: none;
+      }
+    }
+
+    .btn-secondary {
+      color: map-deep-get($skin-buttons, "secondary", "color");
+      text-decoration: none;
+      &:hover {
+        color: map-deep-get($skin-buttons, "secondary", "hover-color");
+        text-decoration: none;
+      }
+    }
+    > .btn-transcript,
+    > .btn-transcript:hover {
+      background: transparent !important;
+      background-color: transparent;
+      font-weight: $font-weight-bold;
+    }
+    .node-list {
+      &--gray-background {
+        background-color: $gray-100;
+      }
+    }
+    .section-feed-content-node {
+      &__content-short-name {
+        font-size: 20px;
+        line-height: 1em;
+      }
+      &__image-wrapper {
+        width: 125px;
+        min-width: 125px;
+        height: 83px;
+        @include media-breakpoint-up(md) {
+          width: 198px;
+          min-width: 198px;
+          height: 131px;
+        }
+      }
+      &__image {
+        width: 125px;
+        height: 83px;
+        @include media-breakpoint-up(md) {
+          width: 198px;
+          height: 131px;
+        }
+      }
+    }
+
+    hr {
+      display: block;
+      clear: both;
+    }
+  }
+
+  &__content-embed-code {
+    @include theme-embed-responsive($theme-primary-media-video-aspect-ratio-x, $theme-primary-media-video-aspect-ratio-y);
+
+    iframe,
+    embed,
+    object,
+    video {
+      @include theme-embed-responsive-item();
+    }
+  }
+
+  > #{ $self }__content-transcript {
+    border-top: solid 3px $gray-200;
+  }
+
+  &--download-form {
+    padding: 22px;
+    background-color: $gray-100;
+    @include media-breakpoint-up(md) {
+      padding-right: 66px;
+      padding-left: 66px;
+    }
+  }
+
+  &--contact {
+    #{ $self } {
+      &__content-body {
+        max-width: 790px;
+      }
+    }
+  }
+
+  .primary-image {
+    &__image-caption,
+    &__image-credit {
+      display: inline;
+      margin-right: .5rem;
+    }
+    &__image-credit::before {
+      content: "Source: ";
+    }
+  }
+
+  [data-embed-type] .caption,
+  [data-embed-type] .credit {
+    display: inline-block;
+    margin-right: .5rem;
+  }
+
+  [data-embed-type] .credit::before {
+    content: "Source: ";
+  }
+}
+/*! purgecss end ignore */
+.social-sharing {
+  padding-bottom: map-get($spacers, block);
+  &__button {
+    margin-right: $block-spacer * 0.5;
+  }
+}
+
+.content-download {
+  &:not(&__link) {
+    padding-bottom: map-get($spacers, block);
+  }
+}
+
+.download-related {
+  &__wrapper {
+    & > p {
+      border-top: 1px solid #ccc;
+      padding-top: 1rem;
+    }
+  }
+  &__item {
+    display: flex;
+    margin-bottom: .5rem;
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+  &__title {
+    display: flex;
+    justify-content: space-between;
+  }
+  &__image {
+    max-width: 160px;
+    margin-right: 1rem;
+  }
+  &__title {
+    flex-direction: column;
+    display: flex;
+    justify-content: center;
+    flex-grow: 1;
+  }
+  &__button {
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+}

package/scss/components/_default-theme.scss

@@ -0,0 +1 @@
+@import "default-theme/site-navbar";

package/scss/components/_embedded-media.scss

@@ -0,0 +1,100 @@
+/*! purgecss start ignore */
+[data-embed-type] {
+  display: block;
+  width: 100%;
+  font-family: $theme-embedded-media-font-family;
+  font-size: $theme-embedded-media-font-size;
+  line-height: $theme-embedded-media-line-height;
+  color: $theme-embedded-media-color;
+  background: transparent;
+}
+
+.content-body-contents {
+  p:first-child [data-embed-type] {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+}
+
+p [data-embed-type] {
+  margin: $theme-embedded-media-margin;
+}
+
+[data-embed-type][data-embed-align="left"] {
+  float: left;
+  width: calc($theme-embedded-media-align-left-width - $theme-embedded-media-align-left-margin);
+  margin-right: $theme-embedded-media-align-left-margin;
+  @include media-breakpoint-down(sm) {
+    width: 100%;
+    margin-right: 0;
+  }
+}
+
+[data-embed-type][data-embed-align="right"] {
+  float: right;
+  width: calc($theme-embedded-media-align-right-width - $theme-embedded-media-align-right-margin);
+  margin-left: $theme-embedded-media-align-right-margin;
+  @include media-breakpoint-down(sm) {
+    width: 100%;
+    margin-left: 0;
+  }
+}
+
+[data-embed-type] img {
+  width: 100%;
+  max-width: 100%;
+  height: auto;
+}
+
+[data-embed-type] .caption {
+  @include theme-media-caption();
+}
+
+[data-embed-type] .credit {
+  @include theme-media-credit();
+}
+
+[data-embed-invalid] {
+  display: none;
+}
+
+
+[data-embed-type="image"] {
+  picture {
+    > :last-child:not(img) {
+      border-bottom: 1px solid #ccc;
+    }
+  }
+}
+
+[data-embed-type="image"] > :last-child:not(img) {
+  border-bottom: none;
+}
+
+[data-oembed-type="video"], [data-oembed-type="link"] {
+  position: relative;
+  display: block;
+  width: 100%;
+  padding: 0;
+  overflow: hidden;
+
+  &::before {
+    display: block;
+    content: "";
+    padding-top: 56.25%;
+  }
+
+  iframe,
+  embed,
+  object,
+  video {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: 0;
+  }
+}
+/*! purgecss end ignore */

package/scss/components/_identity-x.scss

@@ -0,0 +1,71 @@
+.page {
+  &--profile, &--authenticate {
+    .custom-control {
+      padding-left: 2rem;
+    }
+    .custom-control-label {
+      line-height: 1.4;
+    }
+    .boolean-questions-label {
+      @include skin-typography($style: "header-2", $link-style: "primary");
+      margin-bottom: map-get($spacers, 2)
+    }
+  }
+  form {
+    .custom-control-label::before {
+      border-radius: 4px;
+    }
+    .custom-control-label {
+      strong {
+        font-size: 18px;
+        line-height: 1.22;
+      }
+    }
+    .boolean-questions-label {
+      font-size: 18px;
+      margin-bottom: 1rem;
+    }
+    .csmulti-legend {
+      font-size: 1rem;
+    }
+    .csmulti-inner {
+      overflow-y: auto;
+      max-height: 132px;
+    }
+    .csmulti + .input-group {
+      margin-top: 0.5rem;
+    }
+    div.checkbox-group + fieldset.csmulti-group {
+      margin-top: 0.5rem;
+    }
+    .csmulti-wrapper {
+      max-height: 150px;
+      overflow: hidden;
+      border: $input-border-width solid $input-border-color;
+      @include border-radius($input-border-radius, 0);
+      background-color: #f8f8f8;
+    }
+    fieldset {
+      @include border-radius($input-border-radius, 0);
+    }
+  }
+  &--profile {
+    .success-message {
+      min-height: calc(60vh);
+      @include skin-typography($style: "article-text", $link-style: "content-body");
+      &__title {
+        @include skin-typography($style: "header-2", $link-style: "primary");
+        margin: 2rem 0;
+      }
+      button {
+        @include skin-typography($style: "article-text", $link-style: "primary");
+        color: $primary;
+        padding: 0;
+        margin: 0;
+        background: none;
+        border: none;
+        text-decoration: underline;
+      }
+    }
+  }
+}

package/scss/components/_lazyload.scss

@@ -0,0 +1,15 @@
+img {
+  // stylelint-disable-next-line selector-no-qualifying-type
+  &.lazyload:not([src]) {
+    visibility: hidden;
+  }
+  // stylelint-disable-next-line selector-no-qualifying-type
+  &.lazyloaded {
+    opacity: 1;
+    transition: $theme-lazyloaded-tranisition;
+  }
+}
+
+.lazyloading {
+  opacity: 0;
+}

package/scss/components/_load-more.scss

@@ -0,0 +1,65 @@
+.load-more-trigger > button {
+  display: inline-block;
+  font-family: $theme-load-more-button-font-family;
+  font-weight: $btn-font-weight;
+  color: $theme-load-more-button-color;
+  text-align: center;
+  text-decoration: if($link-decoration == none, null, none);
+  white-space: $btn-white-space;
+  vertical-align: middle;
+  user-select: none;
+  border: $btn-border-width solid transparent;
+
+  @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-line-height-lg, $btn-border-radius-lg);
+  @include transition($btn-transition);
+  @include button-variant($primary, $primary);
+
+  border-color: $theme-load-more-button-border-color;
+  background-color: $theme-load-more-button-background-color;
+
+  @include hover() {
+    color: $body-color;
+    text-decoration: none;
+  }
+
+  &:focus,
+  &.focus {
+    outline: 0;
+    box-shadow: $btn-focus-box-shadow;
+  }
+
+  // Disabled comes first so active can properly restyle
+  &.disabled,
+  &:disabled {
+    opacity: $btn-disabled-opacity;
+    @include box-shadow(none);
+  }
+
+  &:not(:disabled):not(.disabled) {
+    cursor: if($enable-pointer-cursor-for-buttons, pointer, null);
+
+    &:active,
+    &.active {
+      @include box-shadow($btn-active-box-shadow);
+
+      &:focus {
+        @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
+      }
+    }
+  }
+}
+
+.load-more-header {
+  margin-bottom: $theme-load-more-bottom-spacing;
+  font-family: $theme-load-more-header-font-family;
+  font-size: $theme-load-more-header-font-size;
+  font-weight: $theme-load-more-header-font-weight;
+  line-height: $theme-load-more-header-line-height;
+  color: $theme-load-more-header-color;
+  text-align: $theme-load-more-header-text-align;
+  text-transform: $theme-load-more-header-text-transform;
+  @include theme-apply-responsive-fonts(
+    $font-size: $theme-load-more-header-font-size-sm,
+    $line-height: $theme-load-more-header-line-height-sm
+  );
+}

package/scss/components/_magazine-publication-buttons.scss

@@ -0,0 +1,65 @@
+.magazine-publication-buttons {
+  $self: &;
+  &__button {
+    margin-right: $marko-web-node-spacer;
+    margin-bottom: $marko-web-node-spacer;
+
+    display: inline-block;
+    font-family: $btn-font-family;
+    font-weight: $btn-font-weight;
+    color: $body-color;
+    text-align: center;
+    text-decoration: if($link-decoration == none, null, none);
+    white-space: $btn-white-space;
+    vertical-align: middle;
+    user-select: none;
+    background-color: transparent;
+    border: $btn-border-width solid transparent;
+    @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-line-height-sm, $btn-border-radius-sm);
+    @include transition($btn-transition);
+    @include button-variant($primary, $primary);
+
+    @include hover() {
+      color: $body-color;
+      text-decoration: none;
+    }
+
+    &:focus,
+    &.focus {
+      outline: 0;
+      box-shadow: $btn-focus-box-shadow;
+    }
+
+    // Disabled comes first so active can properly restyle
+    &.disabled,
+    &:disabled {
+      opacity: $btn-disabled-opacity;
+      @include box-shadow(none);
+    }
+
+    &:not(:disabled):not(.disabled) {
+      cursor: if($enable-pointer-cursor-for-buttons, pointer, null);
+
+      &:active,
+      &.active {
+        @include box-shadow($btn-active-box-shadow);
+
+        &:focus {
+          @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
+        }
+      }
+    }
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+
+  &--bottom {
+    #{ $self } {
+      &__button {
+        margin-top: $marko-web-node-spacer;
+      }
+    }
+  }
+}