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

package/routes/taxonomy.js

@@ -0,0 +1,29 @@
+const { asyncRoute } = require('@mindful-web/utils');
+const gql = require('graphql-tag');
+const createError = require('http-errors');
+const template = require('../templates/taxonomy');
+
+const query = gql`
+  query WithTaxonomy($input: TaxonomyQueryInput!) {
+    taxonomy(input: $input) {
+      id
+      name
+      type
+      description
+    }
+  }
+`;
+
+module.exports = (app) => {
+  app.get('/t/:id(\\d+)', asyncRoute(async (req, res) => {
+    const { apollo } = res.locals;
+    const id = parseInt(req.params.id, 10);
+    const input = { id };
+    const variables = { input };
+    const { data } = await apollo.query({ query, variables });
+    const { taxonomy } = data;
+    if (!taxonomy) throw createError(404, `No taxonomy term was found for ID '${id}'`);
+
+    return res.marko(template, { ...taxonomy });
+  }));
+};

package/scss/_functions.scss

@@ -0,0 +1,164 @@
+@use "sass:math";
+
+@import "bootstrap/scss/functions";
+
+@function get-line-height($font-size-px, $line-height-px) {
+  @if $line-height-px < $font-size-px {
+    @return 1;
+  }
+  @return math.div($line-height-px, $font-size-px);
+}
+
+@function navbar-link-color($navbar-type, $color-type) {
+  @if $navbar-type == dark {
+    @return map-get($theme-site-navbar-dark-colors, $color-type);
+  }
+  @return map-get($theme-site-navbar-light-colors, $color-type);
+}
+
+@function list-remove($list, $index) {
+  $new-list: ();
+  @for $i from 1 through length($list) {
+    @if $i != $index {
+      $new-list: append($new-list, nth($list, $i), "space");
+    }
+  }
+  @return $new-list;
+}
+
+@function list-sort($list, $direction: asc) {
+  $sorted-list: ();
+  @while length($list) > 0 {
+    $value: nth($list, 1);
+    @each $item in $list {
+      @if $direction == desc {
+        @if $item > $value {
+          $value: $item;
+        }
+      } @else {
+        @if $item < $value {
+          $value: $item;
+        }
+      }
+    }
+    $sorted-list: append($sorted-list, $value, "space");
+    $list: list-remove($list, index($list, $value));
+  }
+  @return $sorted-list;
+}
+
+@function sort-map-by-values($map, $direction: asc) {
+  $values: ();
+  $new-map: ();
+  @each $key, $val in $map {
+    $values: append($values, $val);
+  }
+  $sorted-values: list-sort($values, $direction);
+
+  @each $val in $sorted-values {
+    $keys: get-map-keys($map, $val);
+    @each $key in $keys {
+      $new-map: map-merge($new-map, ($key: $val));
+    }
+  }
+  @return $new-map;
+}
+
+@function get-map-keys($map, $value) {
+  $keys: ();
+  @each $key, $val in $map {
+    @if $val == $value {
+      $keys: append($keys, $key);
+    }
+  }
+  @return $keys;
+}
+
+@function get-navbar-breakpoints-for($target) {
+  $target-size: map-get($theme-site-header-breakpoints, $target);
+  $elgible-breakpoints: [];
+  @if $target-size == null {
+    @return $elgible-breakpoints;
+  }
+  @each $name, $size in $theme-site-header-breakpoints {
+    @if $size >= $target-size {
+      $elgible-breakpoints: append($elgible-breakpoints, $name);
+    }
+  }
+  @return $elgible-breakpoints;
+}
+
+@function calculate-navbar-height-for($target-breakpoint, $additional-padding: 0) {
+  $breakpoints: get-navbar-breakpoints-for($target-breakpoint);
+
+  // Variable defaults.
+  $logo-height: $theme-site-navbar-logo-height;
+  $primary-font-size: $theme-site-navbar-primary-font-size * $theme-site-navbar-primary-line-height;
+  $primary-link-padding: $theme-site-navbar-primary-link-padding * 2;
+  // These are constant.
+  $brand-margin: $theme-site-navbar-brand-margin-y * 2;
+  $secondary-padding: $theme-site-navbar-secondary-padding-y * 2;
+
+  @if $logo-height == 0 {
+    $logo-height: 0px;
+  }
+  @if $primary-font-size == 0 {
+    $primary-font-size: 0px;
+  }
+  @if $brand-margin == 0 {
+    $brand-margin: 0px;
+  }
+  @if $primary-link-padding == 0 {
+    $primary-link-padding: 0px;
+  }
+  @if $secondary-padding == 0 {
+    $secondary-padding: 0px;
+  }
+  @if $additional-padding == 0 {
+    $additional-padding: 0px;
+  }
+
+  @if length($breakpoints) == 0 {
+    @return calc($logo-height + $primary-font-size + $brand-margin + $primary-link-padding + $secondary-padding + $additional-padding);
+  }
+  @if index($breakpoints, small-logo) != null {
+    $logo-height: $theme-site-navbar-logo-height-sm;
+  }
+  @if index($breakpoints, small-text-primary) != null {
+    $primary-font-size: $theme-site-navbar-primary-font-size-sm * $theme-site-navbar-primary-line-height-sm;
+  }
+  @if index($breakpoints, hide-primary) != null {
+    // Orverride font size again with hidden height and set padding to none
+    $primary-font-size: $theme-site-navbar-primary-height-sm;
+    $primary-link-padding: 0px;
+  }
+  @return calc($logo-height + $primary-font-size + $brand-margin + $primary-link-padding + $secondary-padding + $additional-padding);
+}
+
+@function map-deep-get($map, $keys...) {
+  @each $key in $keys {
+    $map: map-get($map, $key);
+  }
+  @return $map;
+}
+
+@function non-destructive-map-merge($parent-map, $child-map) {
+  $result: $parent-map;
+  @each $key, $value in $child-map {
+    @if (not map-has-key($result, $key)) or (type-of(map-get($result, $key)) != type-of($value)) or (not (type-of(map-get($result, $key)) == map and type-of($value) == map)) {
+      $result: map-merge($result, ($key: $value));
+    } @else {
+      $result: map-merge($result, ($key: non-destructive-map-merge(map-get($result, $key), $value)));
+    }
+  }
+  @return $result;
+}
+
+@function skin-typography-prop($style, $prop) {
+  @return map-deep-get($typography, $style, $prop);
+}
+
+@function skin-typography-link-prop($style, $link-style, $prop) {
+  $link: map-deep-get($typography-links, $style, $link-style);
+  @return map-get($link, $prop);
+}

package/scss/_mixins.scss

@@ -0,0 +1,503 @@
+@use "sass:math";
+
+@import "bootstrap/scss/mixins";
+
+@mixin theme-apply-responsive-fonts(
+  $font-size: $font-size-sm,
+  $line-height: $line-height-base,
+  $breakpoint: $theme-responsive-text-breakpoint
+) {
+  @include media-breakpoint-down($breakpoint) {
+    font-size: $font-size;
+    line-height: $line-height;
+  }
+}
+
+
+@mixin theme-line-height-crop($line-height) {
+  &::before {
+    display: block;
+    width: 0;
+    height: 0;
+    margin-top: calc((1 - #{$line-height}) * .5em);
+    content: "";
+  }
+}
+
+@mixin theme-apply-fonts(
+  $font-family: $font-family-sans-serif,
+  $font-size-sm: $font-size-sm,
+  $font-size: $font-size-base,
+  $font-weight: $font-weight-normal,
+  $letter-spacing: inherit,
+  $line-height-sm: $line-height-base,
+  $line-height: $line-height-base,
+  $sm-breakpoint: $theme-responsive-text-breakpoint
+) {
+  font-family: $font-family;
+  font-size: $font-size;
+  font-weight: $font-weight;
+  line-height: $line-height;
+  letter-spacing: $letter-spacing;
+
+  @include theme-apply-responsive-fonts(
+    $font-size: $font-size-sm,
+    $line-height: $line-height-sm,
+    $breakpoint: $sm-breakpoint
+  );
+}
+
+@mixin theme-card() {
+  @include border-radius($theme-card-border-radius);
+  @include box-shadow($theme-card-box-shadow);
+  background-color: $theme-card-background-color;
+  border: $theme-card-border;
+}
+
+@mixin theme-card-header() {
+  font-family: $theme-card-header-font-family;
+  font-size: $theme-card-header-font-size;
+  font-weight: $theme-card-header-font-weight;
+  color: $theme-card-header-color;
+  text-transform: $theme-card-header-text-transform;
+  letter-spacing: $theme-card-header-letter-spacing;
+  background-color: $theme-card-header-background-color;
+  border-bottom: $theme-card-header-border;
+}
+
+@mixin theme-card-header-link() {
+  color: $theme-card-header-link-color;
+  text-decoration: $theme-card-header-link-decoration;
+  &:hover {
+    color: $theme-card-header-link-hover-color;
+    text-decoration: $theme-card-header-link-hover-decoration;
+  }
+}
+
+@mixin theme-content-body() {
+  @include theme-apply-fonts(
+    $font-family: $theme-page-body-font-family,
+    $font-size-sm: $theme-page-body-font-size-sm,
+    $font-size: $theme-page-body-font-size,
+    $font-weight: $theme-page-body-font-weight,
+    $line-height-sm: $theme-page-body-line-height-sm,
+    $line-height: $theme-page-body-line-height,
+  );
+  color: $theme-page-body-color;
+  word-break: break-word;
+  h1 {
+    @include theme-apply-fonts(
+      $font-family: $theme-content-heading-h1-font-family,
+      $font-size-sm: $theme-content-heading-h1-font-size-sm,
+      $font-size: $theme-content-heading-h1-font-size,
+      $font-weight: $theme-content-heading-h1-font-weight,
+      $line-height-sm: $theme-content-heading-h1-line-height-sm,
+      $line-height: $theme-content-heading-h1-line-height
+    );
+    @include media-breakpoint-down($theme-responsive-text-breakpoint) {
+      margin-bottom: $theme-content-heading-h1-margin-bottom-sm;
+    }
+    margin-bottom: $theme-content-heading-h1-margin-bottom;
+  }
+  h2 {
+    @include theme-apply-fonts(
+      $font-family: $theme-content-heading-h2-font-family,
+      $font-size-sm: $theme-content-heading-h2-font-size-sm,
+      $font-size: $theme-content-heading-h2-font-size,
+      $font-weight: $theme-content-heading-h2-font-weight,
+      $line-height-sm: $theme-content-heading-h2-line-height-sm,
+      $line-height: $theme-content-heading-h2-line-height
+    );
+    @include media-breakpoint-down($theme-responsive-text-breakpoint) {
+      margin-bottom: $theme-content-heading-h2-margin-bottom-sm;
+    }
+    margin-bottom: $theme-content-heading-h2-margin-bottom;
+  }
+  h3 {
+    @include theme-apply-fonts(
+      $font-family: $theme-content-heading-h3-font-family,
+      $font-size-sm: $theme-content-heading-h3-font-size-sm,
+      $font-size: $theme-content-heading-h3-font-size,
+      $font-weight: $theme-content-heading-h3-font-weight,
+      $line-height-sm: $theme-content-heading-h3-line-height-sm,
+      $line-height: $theme-content-heading-h3-line-height
+    );
+    @include media-breakpoint-down($theme-responsive-text-breakpoint) {
+      margin-bottom: $theme-content-heading-h3-margin-bottom-sm;
+    }
+    margin-bottom: $theme-content-heading-h3-margin-bottom;
+  }
+  h4 {
+    @include theme-apply-fonts(
+      $font-family: $theme-content-heading-h4-font-family,
+      $font-size-sm: $theme-content-heading-h4-font-size-sm,
+      $font-size: $theme-content-heading-h4-font-size,
+      $font-weight: $theme-content-heading-h4-font-weight,
+      $line-height-sm: $theme-content-heading-h4-line-height-sm,
+      $line-height: $theme-content-heading-h4-line-height
+    );
+    @include media-breakpoint-down($theme-responsive-text-breakpoint) {
+      margin-bottom: $theme-content-heading-h4-margin-bottom-sm;
+    }
+    margin-bottom: $theme-content-heading-h4-margin-bottom;
+  }
+  h5 {
+    @include theme-apply-fonts(
+      $font-family: $theme-content-heading-h5-font-family,
+      $font-size-sm: $theme-content-heading-h5-font-size-sm,
+      $font-size: $theme-content-heading-h5-font-size,
+      $font-weight: $theme-content-heading-h5-font-weight,
+      $line-height-sm: $theme-content-heading-h5-line-height-sm,
+      $line-height: $theme-content-heading-h5-line-height
+    );
+    @include media-breakpoint-down($theme-responsive-text-breakpoint) {
+      margin-bottom: $theme-content-heading-h5-margin-bottom-sm;
+    }
+    margin-bottom: $theme-content-heading-h5-margin-bottom;
+  }
+  h6 {
+    @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
+    );
+    @include media-breakpoint-down($theme-responsive-text-breakpoint) {
+      margin-bottom: $theme-content-heading-h6-margin-bottom-sm;
+    }
+    margin-bottom: $theme-content-heading-h6-margin-bottom;
+  }
+  strong,
+  b {
+    font-weight: $theme-content-paragraph-strong-font-weight;
+  }
+  [data-embed-type="image"] img {
+    @include border-radius($theme-content-paragraph-image-border-radius);
+    @include box-shadow($theme-content-paragraph-image-box-shadow);
+  }
+  ol,
+  ul {
+    list-style-position: inside;
+  }
+  p,
+  ul,
+  table,
+  [data-oembed-type="video"],
+  [data-embed-type="image"],
+  ol {
+    margin-bottom: $theme-content-paragraph-margin-bottom;
+    @include media-breakpoint-down($theme-responsive-text-breakpoint) {
+      margin-bottom: $theme-content-paragraph-margin-bottom-sm;
+    }
+  }
+
+  p {
+    > [data-oembed-type="video"],
+    > [data-embed-type="image"] {
+      margin-bottom: 0;
+      + br {
+        display: none;
+      }
+    }
+  }
+}
+
+@mixin theme-embed-responsive($ratio-x, $ratio-y) {
+  position: relative;
+  display: block;
+  width: 100%;
+  padding: 0;
+  overflow: hidden;
+
+  &::before {
+    display: block;
+    content: "";
+    @if $ratio-y and $ratio-x {
+      padding-top: percentage(math.div($ratio-y, $ratio-x));
+    }
+  }
+}
+
+@mixin theme-embed-responsive-item() {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+}
+
+@mixin theme-hide-scrollbars() {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  &::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+}
+
+// stylelint-disable value-no-vendor-prefix, property-no-vendor-prefix
+@mixin theme-max-lines(
+  $font-size,
+  $font-size-sm,
+  $line-height,
+  $line-height-sm,
+  $num: 2,
+  $text-overflow: ellipsis,
+  $breakpoint: $theme-responsive-text-max-lines-breakpoint,
+) {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-line-clamp: $num;
+  -webkit-box-orient: vertical;
+}
+// stylelint-enable value-no-vendor-prefix, property-no-vendor-prefix
+
+@mixin theme-media-caption() {
+  @include theme-media-common-footer();
+  font-size: $theme-media-caption-font-size;
+  font-weight: $theme-media-caption-font-weight;
+  line-height: $theme-media-caption-line-height;
+  color: $theme-media-caption-color;
+}
+
+@mixin theme-media-credit() {
+  @include theme-media-common-footer();
+  font-size: $theme-media-credit-font-size;
+  font-style: $theme-media-credit-font-style;
+  font-weight: $theme-media-credit-font-weight;
+  line-height: $theme-media-credit-line-height;
+  color: $theme-media-credit-color;
+}
+
+@mixin theme-media-common-footer() {
+  display: block;
+  padding: $theme-media-footer-padding-y $theme-media-footer-padding-x;
+  margin: 0;
+  font-family: $theme-media-footer-font-family;
+  font-size: $theme-media-footer-font-size;
+  line-height: $theme-media-footer-line-height;
+  text-align: left;
+  letter-spacing: normal;
+}
+
+@mixin theme-navbar() {
+  position: relative;
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+@mixin theme-navbar-link-background-color($background-color-map) {
+  background-color: map-get($background-color-map, default);
+  &:hover {
+    background-color: map-get($background-color-map, hover);
+  }
+  &:active,
+  &--active {
+    background-color: map-get($background-color-map, active);
+  }
+}
+
+@mixin theme-navbar-link-color($color-map) {
+  $color: map-get($color-map, default);
+  $hover: map-get($color-map, hover);
+  $active: map-get($color-map, active);
+
+  color: $color;
+  svg {
+    fill: $color;
+  }
+  &:hover {
+    color: $hover;
+    svg {
+      fill: $hover;
+    }
+  }
+  &:active,
+  &--active {
+    color: $active;
+    svg {
+      fill: $active;
+    }
+  }
+}
+
+@mixin theme-navbar-link-decoration($decoration-map) {
+  text-decoration: map-get($decoration-map, default);
+  &:hover {
+    text-decoration: map-get($decoration-map, hover);
+  }
+  &:active,
+  &--active {
+    text-decoration: map-get($decoration-map, active);
+  }
+}
+
+// @todo handle small breaks for page-wrapper__section instead
+@mixin theme-page-body-spacing() {
+  padding-right: $theme-page-body-padding;
+  padding-left: $theme-page-body-padding;
+  margin-bottom: $theme-page-body-margin-bottom;
+  @include media-breakpoint-down($theme-responsive-text-breakpoint) {
+    padding-right: $theme-page-body-padding-sm;
+    padding-left: $theme-page-body-padding-sm;
+    margin-bottom: $theme-page-body-margin-bottom-sm;
+  }
+}
+
+@mixin theme-page-header-spacing() {
+  padding: $theme-page-header-padding;
+  @include media-breakpoint-down($theme-responsive-text-breakpoint) {
+    padding-top: $theme-page-header-padding-sm;
+    padding-right: $theme-page-header-padding-sm;
+    padding-left: $theme-page-header-padding-sm;
+  }
+}
+
+@mixin theme-toggle-button() {
+  cursor: pointer;
+  background-color: transparent;
+  border-color: transparent;
+  border-style: none;
+  &:focus {
+    outline: none;
+  }
+}
+
+@mixin skin-button($style) {
+  $vars: map-get($skin-buttons, $style);
+  $props: background-color, border-radius, color, font-family, font-weight, font-size, letter-spacing, line-height, padding, text-transform;
+
+  @each $prop in $props {
+    #{ $prop }: map-get($vars, $prop);
+  }
+
+  display: inline-block;
+  text-align: center;
+  vertical-align: middle;
+  user-select: none;
+
+  $border: map-get($vars, "border");
+  @if $border {
+    border: $border;
+  } @else {
+    border: none;
+  }
+
+  $hover-background-color: map-get($vars, "hover-background-color");
+  $hover-border: map-get($vars, "hover-border");
+  $hover-color: map-get($vars, "hover-color");
+
+  $focus-background-color: if(map-get($vars, "focus-background-color"), map-get($vars, "focus-background-color"), $hover-background-color);
+  $focus-color: if(map-get($vars, "focus-color"), map-get($vars, "focus-color"), $hover-color);
+  $focus-border: if(map-get($vars, "focus-border"), map-get($vars, "focus-border"), $hover-border);
+
+  $active-background-color: if(map-get($vars, "active-background-color"), map-get($vars, "active-background-color"), $focus-background-color);
+  $active-color: if(map-get($vars, "active-color"), map-get($vars, "active-color"), $focus-color);
+  $active-border: if(map-get($vars, "active-border"), map-get($vars, "active-border"), $focus-border);
+
+  &:hover {
+    @if $hover-border {
+      border: $hover-border;
+    }
+    color: $hover-color;
+    background-color: $hover-background-color;
+  }
+
+  &:focus,
+  &.focus {
+    @if $focus-border {
+      border: $focus-border;
+    }
+    color: $focus-color;
+    background-color: $focus-background-color;
+    outline: 0;
+  }
+
+  &:not(:disabled):not(.disabled):active,
+  &:not(:disabled):not(.disabled).active,
+  .show > &.dropdown-toggle {
+    @if $active-border {
+      border: $active-border;
+    }
+    color: $active-color;
+    background-color: $active-background-color;
+    outline: 0;
+  }
+
+  &.disabled,
+  &:disabled {
+    opacity: $btn-disabled-opacity;
+  }
+
+}
+
+@mixin skin-typography(
+  $style,
+  $link-style: false,
+  $max-lines: null,
+  $breakpoint: $theme-responsive-text-breakpoint
+) {
+  $vars: map-get($typography, $style);
+  $props: font-family, font-size, font-weight, line-height, color, text-transform, letter-spacing;
+
+  @each $prop in $props {
+    #{ $prop }: map-get($vars, $prop);
+  }
+
+  @include theme-apply-responsive-fonts(
+    $font-size: map-get($vars, font-size-mobile),
+    $line-height: map-get($vars, line-height-mobile),
+    $breakpoint: $breakpoint
+  );
+
+  @if $link-style {
+    $link: map-deep-get($typography-links, $style, $link-style);
+    a {
+      @include skin-typography-link($style, $link-style, $max-lines);
+    }
+  }
+}
+
+@mixin skin-typography-link(
+  $style,
+  $link-style,
+  $max-lines: null,
+  $breakpoint: $theme-responsive-text-breakpoint
+) {
+  $vars: map-get($typography, $style);
+  $link: map-deep-get($typography-links, $style, $link-style);
+
+  @if map-get($link, max-lines) or $max-lines {
+    @include theme-max-lines(
+      $font-size: map-get($vars, font-size),
+      $font-size-sm: map-get($vars, font-size-mobile),
+      $line-height: map-get($vars, line-height),
+      $line-height-sm: map-get($vars, line-height-mobile),
+      $num: if($max-lines, $max-lines, map-get($link, max-lines)),
+      $breakpoint: $breakpoint
+    );
+  }
+
+  // if no link color specified, fallback to the main color.
+  $link-color: if(map-get($link, "color"), map-get($link, "color"), map-get($vars, "color"));
+  color: $link-color;
+  text-decoration: map-get($link, text-decoration);
+  &:hover {
+    // if no hover color specified, fallback to the link color
+    $hover-color: if(map-get($link, "hover-color"), map-get($link, "hover-color"), $link-color);
+    color: $hover-color;
+    text-decoration: map-get($link, hover-text-decoration);
+  }
+}
+
+@mixin section-header-underline() {
+  margin-bottom: 30px;
+
+  @include skin-typography($style: "section-header");
+}