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

package/scss/variables/_inputs.scss

@@ -0,0 +1,24 @@
+$input-bg: #f8f8f8 !default;
+$input-border-color: $gray-500 !default;
+$custom-select-border-radius: $input-border-radius;
+$input-border-width: 1px !default;
+$input-box-shadow: none !default;
+$input-color: $gray-800 !default;
+$input-font-family: $skin-font-family-primary !default;
+$input-font-size: 16px !default;
+$input-font-weight: $font-weight-normal !default;
+$input-line-height: 1 !default;
+$input-padding-y: .9375rem;
+$input-padding-x: 1.125rem;
+$input-placeholder-color: $gray-700 !default;
+
+$input-focus-border-color: $blue !default;
+$input-focus-box-shadow: 0 0 0 1px $blue !default;
+
+// custom
+$skin-input-letter-spacing: .25px !default;
+$skin-input-hover-border-color: $gray-900 !default;
+
+$custom-select-focus-box-shadow: $input-focus-box-shadow !default;
+
+$custom-control-indicator-size: 1.25rem !default;

package/scss/variables/_typography.scss

@@ -0,0 +1,525 @@
+$typography: () !default;
+$typography: non-destructive-map-merge(
+  (
+    "header-1": (
+      "color": $gray-800,
+      "font-family": $skin-font-family-secondary,
+      "font-weight": $font-weight-bold,
+      "font-size": 40px,
+      "font-size-mobile": 28px,
+      "line-height": 1.15,
+      "line-height-mobile": 1.15,
+      "letter-spacing": .5px,
+      "text-transform": none,
+    ),
+    "header-2": (
+      "color": $gray-800,
+      "font-family": $skin-font-family-secondary,
+      "font-weight": $font-weight-bold,
+      "font-size": 22px,
+      "font-size-mobile": 22px,
+      "line-height": 1.27,
+      "line-height-mobile": 1.27,
+      "letter-spacing": .5px,
+      "text-transform": none,
+    ),
+    "header-3": (
+      "color": $gray-800,
+      "font-family": $skin-font-family-secondary,
+      "font-weight": $font-weight-bold,
+      "font-size": 18px,
+      "font-size-mobile": 18px,
+      "line-height": 1.33,
+      "line-height-mobile": 1.33,
+      "letter-spacing": .25px,
+      "text-transform": none,
+    ),
+    "article-text": (
+      "color": $gray-800,
+      "font-family": $skin-font-family-primary,
+      "font-weight": $font-weight-normal,
+      "font-size": 20px,
+      "font-size-mobile": 18px,
+      "line-height": 1.5,
+      "line-height-mobile": 1.44,
+      "letter-spacing": .25px,
+      "text-transform": none,
+    ),
+    "small-body-text": (
+      "color": $gray-800,
+      "font-family": $skin-font-family-primary,
+      "font-weight": $font-weight-normal,
+      "font-size": 16px,
+      "font-size-mobile": 16px,
+      "line-height": 1.5,
+      "line-height-mobile": 1.5,
+      "letter-spacing": .25px,
+      "text-transform": none,
+    ),
+    "credit-disclaimer": (
+      "color": $gray-700,
+      "font-family": $skin-font-family-primary,
+      "font-weight": $font-weight-normal,
+      "font-size": 14px,
+      "font-size-mobile": 14px,
+      "line-height": 1.28,
+      "line-height-mobile": 1.28,
+      "letter-spacing": .25px,
+      "text-transform": none,
+    ),
+    "section-header": (
+      "color": $gray-800,
+      "font-family": $skin-font-family-primary,
+      "font-weight": $font-weight-bold,
+      "font-size": 32px,
+      "font-size-mobile": 28px,
+      "line-height": 1.13,
+      "line-height-mobile": 1.14,
+      "letter-spacing": 1px,
+      "text-transform": uppercase,
+    ),
+    "section-header-small": (
+      "color": $gray-800,
+      "font-family": $skin-font-family-primary,
+      "font-weight": $font-weight-bold,
+      "font-size": 22px,
+      "font-size-mobile": 22px,
+      "line-height": 1.27,
+      "line-height-mobile": 1.27,
+      "letter-spacing": .75px,
+      "text-transform": uppercase,
+    ),
+    "slug-medium": (
+      "color": $primary,
+      "font-family": $skin-font-family-primary,
+      "font-weight": $font-weight-semibold,
+      "font-size": 18px,
+      "font-size-mobile": 18px,
+      "line-height": 1,
+      "line-height-mobile": 1,
+      "letter-spacing": .5px,
+      "text-transform": uppercase,
+    ),
+    "slug-small": (
+      "color": $primary,
+      "font-family": $skin-font-family-primary,
+      "font-weight": $font-weight-semibold,
+      "font-size": 14px,
+      "font-size-mobile": 14px,
+      "line-height": 1,
+      "line-height-mobile": 1,
+      "letter-spacing": .5px,
+      "text-transform": uppercase,
+    ),
+    "sponsored-by": (
+      "color": $blue,
+      "font-family": $skin-font-family-primary,
+      "font-weight": $font-weight-medium,
+      "font-size": 14px,
+      "font-size-mobile": 14px,
+      "line-height": 1,
+      "line-height-mobile": 1,
+      "letter-spacing": .5px,
+      "text-transform": uppercase,
+    ),
+    "input-label": (
+      "color": $gray-800,
+      "font-family": $skin-font-family-primary,
+      "font-weight": $font-weight-medium,
+      "font-size": 16px,
+      "font-size-mobile": 16px,
+      "line-height": 1,
+      "line-height-mobile": 1,
+      "letter-spacing": .25px,
+      "text-transform": none,
+    ),
+    "date": (
+      "color": $gray-700,
+      "font-family": $skin-font-family-primary,
+      "font-weight": $font-weight-medium,
+      "font-size": 14px,
+      "font-size-mobile": 14px,
+      "line-height": 1,
+      "line-height-mobile": 1,
+      "letter-spacing": .25px,
+      "text-transform": uppercase,
+    ),
+    // added
+    "date-content-page": (
+      "color": $gray-700,
+      "font-family": $skin-font-family-primary,
+      "font-weight": $font-weight-normal,
+      "font-size": 16px,
+      "font-size-mobile": 16px,
+      "line-height": 1.3125,
+      "line-height-mobile": 1.3125,
+      "letter-spacing": .25px,
+      "text-transform": none,
+    ),
+    "author-content-page": (
+      "color": $gray-800,
+      "font-family": $skin-font-family-primary,
+      "font-weight": $font-weight-medium,
+      "font-size": 16px,
+      "font-size-mobile": 16px,
+      "line-height": 1.3125,
+      "line-height-mobile": 1.3125,
+      "letter-spacing": .25px,
+      "text-transform": none,
+    ),
+    "author-name-list": (
+      "color": $gray-800,
+      "font-family": $skin-font-family-primary,
+      "font-weight": $font-weight-semibold,
+      "font-size": 16px,
+      "font-size-mobile": 16px,
+      "line-height": 1,
+      "line-height-mobile": 1,
+      "letter-spacing": .5px,
+      "text-transform": none,
+    ),
+    "author-title-list": (
+      "color": $gray-800,
+      "font-family": $skin-font-family-primary,
+      "font-weight": $font-weight-normal,
+      "font-size": 16px,
+      "font-size-mobile": 16px,
+      "line-height": 1,
+      "line-height-mobile": 1,
+      "letter-spacing": .25px,
+      "text-transform": none,
+    ),
+    "view-more": (
+      "color": $primary,
+      "font-family": $skin-font-family-primary,
+      "font-weight": $font-weight-bold,
+      "font-size": 14px,
+      "font-size-mobile": 14px,
+      "line-height": 1,
+      "line-height-mobile": 1,
+      "letter-spacing": .5px,
+      "text-transform": uppercase,
+    ),
+    "footer-header-1": (
+      "color": $white,
+      "font-family": $skin-font-family-primary,
+      "font-weight": $font-weight-bold,
+      "font-size": 18px,
+      "font-size-mobile": 18px,
+      "line-height": 1.33,
+      "line-height-mobile": 1.33,
+      "letter-spacing": .5px,
+      "text-transform": none,
+    ),
+    "footer-text": (
+      "color": $white,
+      "font-family": $skin-font-family-primary,
+      "font-weight": $font-weight-normal,
+      "font-size": 16px,
+      "font-size-mobile": 16px,
+      "line-height": 1.5,
+      "line-height-mobile": 1.5,
+      "letter-spacing": .25px,
+      "text-transform": none,
+    ),
+    "teaser-text-1": (
+      "color": $gray-800,
+      "font-family": $skin-font-family-primary,
+      "font-weight": $font-weight-normal,
+      "font-size": 18px,
+      "font-size-mobile": 18px,
+      "line-height": 1.44,
+      "line-height-mobile": 1.44,
+      "letter-spacing": .25px,
+      "text-transform": none,
+    ),
+    "header-1.5": (
+      "color": $gray-800,
+      "font-family": $skin-font-family-secondary,
+      "font-weight": $font-weight-bold,
+      "font-size": 24px,
+      "font-size-mobile": 18px,
+      "line-height": 1.2,
+      "line-height-mobile": 1.33,
+      "letter-spacing": .5px,
+      "text-transform": none,
+    ),
+    "section-header-xs": (
+      "color": $gray-800,
+      "font-family": $skin-font-family-primary,
+      "font-weight": $font-weight-bold,
+      "font-size": 18px,
+      "font-size-mobile": 18px,
+      "line-height": 1,
+      "line-height-mobile": 1,
+      "letter-spacing": .75px,
+      "text-transform": uppercase,
+    ),
+    "social-follow-header": (
+      "color": $gray-800,
+      "font-family": $skin-font-family-primary,
+      "font-weight": $font-weight-bold,
+      "font-size": 18px,
+      "font-size-mobile": 18px,
+      "line-height": 1,
+      "line-height-mobile": 1,
+      "letter-spacing": .5px,
+      "text-transform": none,
+    ),
+    "menu-item-primary": (
+      "color": $gray-800,
+      "font-family": $skin-font-family-primary,
+      "font-weight": $font-weight-semibold,
+      "font-size": 20px,
+      "font-size-mobile": 20px,
+      "line-height": 1,
+      "line-height-mobile": 1,
+      "letter-spacing": .25px,
+      "text-transform": none,
+    ),
+    "menu-item-primary-header": (
+      "color": $gray-800,
+      "font-family": $skin-font-family-primary,
+      "font-weight": $font-weight-bold,
+      "font-size": 24px,
+      "font-size-mobile": 24px,
+      "line-height": 1,
+      "line-height-mobile": 1,
+      "letter-spacing": .5px,
+      "text-transform": none,
+    ),
+    "menu-item-secondary": (
+      "color": $gray-800,
+      "font-family": $skin-font-family-primary,
+      "font-weight": $font-weight-medium,
+      "font-size": 16px,
+      "font-size-mobile": 16px,
+      "line-height": 1,
+      "line-height-mobile": 1,
+      "letter-spacing": .25px,
+      "text-transform": none,
+    ),
+    "menu-item-secondary-header": (
+      "color": $gray-800,
+      "font-family": $skin-font-family-primary,
+      "font-weight": $font-weight-bold,
+      "font-size": 18px,
+      "font-size-mobile": 18px,
+      "line-height": 1,
+      "line-height-mobile": 1,
+      "letter-spacing": .5px,
+      "text-transform": none,
+    ),
+    "overlay-header-2": (
+      "color": $white,
+      "font-family": $skin-font-family-secondary,
+      "font-weight": $font-weight-bold,
+      "font-size": 22px,
+      "font-size-mobile": 22px,
+      "line-height": 1.27,
+      "line-height-mobile": 1.27,
+      "letter-spacing": .5px,
+      "text-transform": none,
+    ),
+    "pib-title": (
+      "color": $gray-800,
+      "font-family": $skin-font-family-primary,
+      "font-weight": $font-weight-bold,
+      "font-size": 40px,
+      "font-size-mobile": 40px,
+      "line-height": 1.1,
+      "line-height-mobile": 1.1,
+      "letter-spacing": .5px,
+      "text-transform": none,
+    ),
+    "pib-description": (
+      "color": $gray-800,
+      "font-family": $skin-font-family-primary,
+      "font-weight": $font-weight-bold,
+      "font-size": 22px,
+      "font-size-mobile": 22px,
+      "line-height": 1.1,
+      "line-height-mobile": 1.1,
+      "letter-spacing": .5px,
+      "text-transform": none,
+    ),
+    "pib-partners": (
+      "color": $gray-800,
+      "font-family": $skin-font-family-secondary,
+      "font-weight": $font-weight-bold,
+      "font-size": 15px,
+      "font-size-mobile": 15px,
+      "line-height": 1.33,
+      "line-height-mobile": 1.33,
+      "letter-spacing": .25px,
+      "text-transform": uppercase,
+    ),
+    "content-meter-header": (
+      "color": $white,
+      "font-family": $skin-font-family-secondary,
+      "font-weight": $font-weight-bold,
+      "font-size": 28px,
+      "font-size-mobile": 28px,
+      "line-height": 1,
+      "line-height-mobile": 1.15,
+      "letter-spacing": .3px,
+      "text-transform": none,
+    ),
+    "content-meter-cta": (
+      "color": $white,
+      "font-family": $skin-font-family-secondary,
+      "font-weight": $font-weight-medium,
+      "font-size": 22px,
+      "font-size-mobile": 20px,
+      "line-height": 1,
+      "line-height-mobile": 1.1,
+      "letter-spacing": .24px,
+      "text-transform": none,
+    ),
+  ),
+  $typography
+);
+
+$typography-links: () !default;
+$typography-links: non-destructive-map-merge(
+  (
+    "header-1": (
+      "primary": (
+        "max-lines": 4,
+        "text-decoration": none,
+        "hover-text-decoration": underline,
+      ),
+    ),
+    "header-2": (
+      "primary": (
+        "max-lines": 3,
+        "text-decoration": none,
+        "hover-text-decoration": underline,
+      ),
+    ),
+    "overlay-header-2": (
+      "primary": (
+        "max-lines": 2,
+        "text-decoration": none,
+        "hover-text-decoration": underline,
+      ),
+    ),
+    "header-3": (
+      "primary": (
+        "max-lines": 3,
+        "text-decoration": none,
+        "hover-text-decoration": underline,
+      ),
+    ),
+    "section-header-small": (
+      "primary": (
+        "max-lines": false,
+        "text-decoration": none,
+        "hover-color": $primary,
+        "hover-text-decoration": none,
+      ),
+    ),
+    "article-text": (
+      "primary": (
+        "max-lines": 3,
+        "text-decoration": none,
+        "hover-color": map-deep-get($typography, "article-text", "color"),
+        "hover-text-decoration": none,
+      ),
+      "content-body": (
+        "max-lines": false,
+        "text-decoration": underline,
+        "color": $primary,
+        "hover-color": $skin-primary-hover-color,
+        "hover-text-decoration": underline,
+      ),
+    ),
+    "small-body-text": (
+      "primary": (
+        "max-lines": 3,
+        "text-decoration": none,
+        "hover-color": map-deep-get($typography, "small-body-text", "color"),
+        "hover-text-decoration": none,
+      ),
+      "with-hover-color": (
+        "max-lines": 3,
+        "text-decoration": underline,
+        "color": $primary,
+        "hover-color": $skin-primary-hover-color,
+        "hover-text-decoration": underline,
+      ),
+    ),
+    "slug-medium": (
+      "primary": (
+        "max-lines": false,
+        "text-decoration": none,
+        "hover-color": $skin-primary-hover-color,
+        "hover-text-decoration": none,
+      ),
+    ),
+    "slug-small": (
+      "primary": (
+        "max-lines": false,
+        "text-decoration": none,
+        "hover-color": $skin-primary-hover-color,
+        "hover-text-decoration": none,
+      ),
+    ),
+    "author-name-list": (
+      "primary": (
+        "max-lines": false,
+        "text-decoration": none,
+        "hover-color": $primary,
+        "hover-text-decoration": none,
+      ),
+    ),
+    "author-content-page": (
+      "primary": (
+        "max-lines": false,
+        "text-decoration": none,
+        "hover-color": $primary,
+        "hover-text-decoration": none,
+      ),
+    ),
+    "view-more": (
+      "primary": (
+        "max-lines": false,
+        "text-decoration": none,
+        "hover-color": $skin-primary-hover-color,
+        "hover-text-decoration": none,
+      ),
+    ),
+    "teaser-text-1": (
+      "primary": (
+        "max-lines": 3,
+        "text-decoration": none,
+        "hover-color": map-deep-get($typography, "teaser-text-1", "color"),
+        "hover-text-decoration": none,
+      ),
+    ),
+    "header-1.5": (
+      "primary": (
+        "max-lines": 3,
+        "text-decoration": none,
+        "hover-text-decoration": underline,
+      ),
+    ),
+    "menu-item-primary": (
+      "primary": (
+        "max-lines": false,
+        "text-decoration": none,
+        "hover-color": $primary,
+        "hover-text-decoration": none,
+      ),
+    ),
+    "menu-item-secondary": (
+      "primary": (
+        "max-lines": false,
+        "text-decoration": none,
+        "hover-color": $primary,
+        "hover-text-decoration": none,
+      ),
+    ),
+  ),
+  $typography-links,
+);

package/templates/ad-preview.marko

@@ -0,0 +1,79 @@
+import { get } from "@mindful-web/object-path";
+import converter from "../utils/convert-mindful-ad-preview";
+
+$ const { creativeId, namespace } = input;
+<theme-ad-preview-layout
+  creative-id=creativeId
+  namespace=namespace
+>
+  <@section|{creative}| >
+    $ const creativeNode = converter(creative);
+    <if(creative && get(creative, '_form.label') === 'Native Website')>
+      <div class="node-list node-list--latest-content-list node-list--flush-x">
+        <div class="node-list__header">Preview #1</div>
+      </div>
+      <theme-section-feed-flow nodes=[creativeNode]>
+        <@node-list inner-justified=false />
+        <@node with-dates=false with-section/>
+      </theme-section-feed-flow>
+      <hr>
+    </if>
+  </@section>
+
+  <@section|{creative}| >
+    $ const creativeNode = converter(creative);
+    <if(creative && get(creative, '_form.label') === 'Native Website')>
+      <div class="row">
+        <div class="col-lg-4" >
+          <theme-latest-content-list-block
+            title="Preview #2"
+            alias="home"
+            nodes=[creativeNode]
+          />
+        </div>
+      </div>
+      <hr>
+    </if>
+  </@section>
+
+  <@section|{creative}| >
+    $ const creativeNode = converter(creative);
+    <if(creative && get(creative, '_form.label') === 'Native Website')>
+      <div class="node-list node-list--latest-content-list node-list--flush-x">
+        <div class="node-list__header">Preview #3<span class="small">(with/without teaser)</span></div>
+      </div>
+      <theme-card-deck-flow
+        cols=3
+        nodes=[creativeNode, creativeNode]
+      >
+        <@slot|{ node, index }|>
+          <if(index === 0)>
+            <theme-content-node
+              node=node
+              with-teaser=true
+              image-position="top"
+              card=true
+              flush=true
+              modifiers=["section-tag"]
+            >
+              <@image fluid=true width=330 ar="3:2" />
+            </theme-content-node>
+          </if>
+          <else>
+            <theme-content-node
+              node=node
+              with-teaser=false
+              image-position="top"
+              card=true
+              flush=true
+              modifiers=["section-tag"]
+            >
+              <@image fluid=true width=330 ar="3:2" />
+            </theme-content-node>
+          </else>
+        </@slot>
+      </theme-card-deck-flow>
+    </if>
+  </@section>
+
+</theme-ad-preview-layout>