sfc-utils 1.3.53 → 1.3.55

package/example/src/styles/reset.css

@@ -44,6 +44,8 @@ h1,
 h2,
 h3,
 h4,
+h5,
+h6,
 p,
 ul[class],
 ol[class],
@@ -82,9 +84,9 @@ img {
 }
 
 /* Natural flow and rhythm in articles by default */
-article > * + * {
+/* article > * + * {
   margin-top: 1em;
-}
+} */
 
 /* Inherit fonts for inputs and buttons */
 input,

package/example/src/styles/seed.less

@@ -1,5 +1,6 @@
 @import (css) "reset.css";
-@import (css) "typography.css";
-@import (less) "values";
-@import (less) "defaults";
+// @import (css) "typography.css";
+@import (less) "../../../styles/brandStylesCommon.less";
+@import (less) "../../../styles/variables.less";
+@import (less) "../../../styles/brandStylesCommon.less";
 @import (less) "project";

package/example/src/styles/values.less

@@ -52,6 +52,135 @@
 @med-gray: #777777;
 @red: #CB0024;
 
+// accessibility styles from https://github.com/mike-engel/a11y-css-reset/
+/* https://medium.com/@matuzo/writing-css-with-accessibility-in-mind-8514a0007939 */
+.visually-hidden() {
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  border: 0;
+  padding: 0;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  margin: -1px;
+}
+
+/* https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html */
+.plain-list() {
+  list-style: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E");
+  padding-left: 0;
+}
+
+@import (less) './variables.less';
+
+//sizing and spacing tachyons
+.text-width {
+    max-width: @md;
+    padding: 0 @s16;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.mb-xxs {margin-bottom: @s4;}
+.mb-xs {margin-bottom: @s8;}
+.mb-sm {margin-bottom: @s16;}
+.mb-md {margin-bottom: @s24;}
+.mb-lg {margin-bottom: @s32;}
+.mb-xl {margin-bottom: @s40;}
+.mb-xxl {margin-bottom: @s48;}
+.mb-auto {margin-bottom: auto;}
+
+.mt-xxs {margin-top: @s4;}
+.mt-xs {margin-top: @s8;}
+.mt-sm {margin-top: @s16;}
+.mt-md {margin-top: @s24;}
+.mt-lg {margin-top: @s32;}
+.mt-xl {margin-top: @s40;}
+.mt-xxl {margin-top: @s48;}
+.mt-auto {margin-top: auto;}
+
+.mr-xxs {margin-right: @s4;}
+.mr-xs {margin-right: @s8;}
+.mr-sm {margin-right: @s16;}
+.mr-md {margin-right: @s24;}
+.mr-lg {margin-right: @s32;}
+.mr-xl {margin-right: @s40;}
+.mr-xxl {margin-right: @s48;}
+.mr-auto {margin-right: auto;}
+
+.ml-xxs {margin-left: @s4;}
+.ml-xs {margin-left: @s8;}
+.ml-sm {margin-left: @s16;}
+.ml-md {margin-left: @s24;}
+.ml-lg {margin-left: @s32;}
+.ml-xl {margin-left: @s40;}
+.ml-xxl {margin-left: @s48;}
+.ml-auto {margin-left: auto;}
+
+.ma-xxs {margin: @s4;}
+.ma-xs {margin: @s8;}
+.ma-sm {margin: @s16;}
+.ma-md {margin: @s24;}
+.ma-lg {margin: @s32;}
+.ma-xl {margin: @s40;}
+.ma-xxl {margin: @s48;}
+.ma-auto {margin: auto;}
+
+//padding
+.pb-xxs {padding-bottom: @s4;}
+.pb-xs {padding-bottom: @s8;}
+.pb-sm {padding-bottom: @s16;}
+.pb-md {padding-bottom: @s24;}
+.pb-lg {padding-bottom: @s32;}
+.pb-xl {padding-bottom: @s40;}
+.pb-xxl {padding-bottom: @s48;}
+
+.pt-xxs {padding-top: @s4;}
+.pt-xs {padding-top: @s8;}
+.pt-sm {padding-top: @s16;}
+.pt-md {padding-top: @s24;}
+.pt-lg {padding-top: @s32;}
+.pt-xl {padding-top: @s40;}
+.pt-xxl {padding-top: @s48;}
+
+.pr-xxs {padding-right: @s4;}
+.pr-xs {padding-right: @s8;}
+.pr-sm {padding-right: @s16;}
+.pr-md {padding-right: @s24;}
+.pr-lg {padding-right: @s32;}
+.pr-xl {padding-right: @s40;}
+.pr-xxl {padding-right: @s48;}
+
+.pl-xxs {padding-left: @s4;}
+.pl-xs {padding-left: @s8;}
+.pl-sm {padding-left: @s16;}
+.pl-md {padding-left: @s24;}
+.pl-lg {padding-left: @s32;}
+.pl-xl {padding-left: @s40;}
+.pl-xxl {padding-left: @s48;}
+
+.pa-xxs {padding: @s4;}
+.pa-xs {padding: @s8;}
+.pa-sm {padding: @s16;}
+.pa-md {padding: @s24;}
+.pa-lg {padding: @s32;}
+.pa-xl {padding: @s40;}
+.pa-xxl {padding: @s48;}
+
+.mw-sm {max-width: @sm;}
+.mw-md {max-width: @md;}
+.mw-lg {max-width: @lg;}
+.mw-xl {max-width: @xl;}
+.mw-100 {max-width: 100%;}
+
+//alignment
+.center {text-align: center;}
+.left {text-align: left;}
+.right {text-align: right;}
+
+
 // accessibility styles from https://github.com/mike-engel/a11y-css-reset/
 /* https://medium.com/@matuzo/writing-css-with-accessibility-in-mind-8514a0007939 */
 .visually-hidden() {

package/example/src/styles/variables.less

@@ -0,0 +1,142 @@
+//sizing variables
+@s4: 0.25rem;
+@s8: 0.5rem;
+@s16: 1rem;
+@s24: 1.5rem;
+@s32: 2rem;
+@s40: 2.5rem;
+@s48: 3rem;
+@s56: 3.5rem;
+@s64: 4rem;
+@s72: 4.5rem;
+@s80: 5rem;
+@s88: 5.5rem;
+@s96: 6rem;
+@s104: 6.5rem;
+@s112: 7rem;
+@s120: 7.5rem;
+@s128: 8rem;
+@s136: 8.5rem;
+@s144: 9rem;
+@s152: 9.5rem;
+@s160: 10rem;
+
+//font-only variables
+@s12: 0.75rem;
+@s14: 0.875rem;
+@s18: 1.125rem;
+@s20: 1.25rem;
+
+//widths
+@sm: 400px;
+@md: 672px;
+@lg: 928px;
+@xl: 1200px;
+@w-text-width: 640px;
+@w-tablet: 768px;
+@w-mobile: 480px;
+
+//media queries
+@mobile: ~"(max-width: 480px)";
+@tablet: ~"(max-width: 768px)";
+@max: ~"(max-width: 1000000px)";
+
+@max-sm: ~"(max-width: 400px)";
+@max-tablet: ~"(max-width: 768px)";
+@max-text-width: ~"(max-width: 672px)";
+@max-desktop: ~"(max-width: 1200px)";
+
+@min-mobile: ~"(min-width: 480px)";
+@min-tablet: ~"(min-width: 768px)";
+@min-text-width: ~"(min-width: 672px)";
+@min-desktop: ~"(min-width: 1200px)";
+@max: ~"(max-width: 1000000px)";
+
+//color variables
+@white: #FFFFFF;
+@black: #111111;
+
+@grey-100: #3E3E3E;
+@grey-75: #676767;
+@grey-50: #909090;
+@grey-25: #C7C7C7;
+@grey-0: #E1E1E1;
+@grey-pale: #F4F4F4;
+
+//brights: best used as highlights or spot colors
+@red-bright: #D20C0E;
+@blue-bright: #1874CB;
+@pink-bright: #E94B73;
+@teal-bright: #26A0A5;
+@gold-bright: #FFBC30;
+@orange-bright: #FF7500;
+@green-bright: #7CA735;
+@purple-bright: #B87790;
+
+//pales: best used as backgrounds or large color blocks/screens
+@red-pale: #FBF5F5;
+@blue-pale: #EFF5FA;
+@pink-pale: #FCF2F3;
+@teal-pale: #EDF7F9;
+@gold-pale: #FCF9F0;
+@orange-pale: #FCF4EE;
+@green-pale: #F5F7F1;
+@purple-pale: #F8F5F8;
+
+//color scales - 100 is the base, higher values are darker, lower values are lighter
+@red-300: #7F0D0A;
+@red-100: #BA142D;
+@red-75: #D06566;
+@red-50: #D18786;
+@red-25: #DDABAA;
+@red-0: #F2E1E1;
+
+@blue-300: #003166;
+@blue-100: #025BAF;
+@blue-75: #428BCA;
+@blue-50: #67A2D4;
+@blue-25: #95C1E8;
+@blue-0: #CFE0EF;
+
+@pink-300: #951D3A;
+@pink-100: #D1365E;
+@pink-75: #DA5E7D;
+@pink-50: #E3879D;
+@pink-25: #ECAFBC;
+@pink-0: #F5D7DB;
+
+@teal-300: #00505A;
+@teal-100: #189196;
+@teal-75: #45A6AC;
+@teal-50: #71BBC2;
+@teal-25: #9ED1D8;
+@teal-0: #CAE6EE;
+
+@gold-300: #B17A00;
+@gold-200: #D39213;
+@gold-100: #E5A72C;
+@gold-75: #E8BD62;
+@gold-50: #EDCE87;
+@gold-25: #F1DEAD;
+@gold-0: #F6EED2;
+
+@orange-300: #B05A0C;
+@orange-100: #DF7821;
+@orange-75: #E4914B;
+@orange-50: #EAAB76;
+@orange-25: #F0C4A1;
+@orange-0: #F5DECB;
+
+@green-300: #5F7539;
+@green-100: #819958;
+@green-75: #99AC78;
+@green-50: #B1C097;
+@green-25: #C8D3B7;
+@green-0: #E0E6D6;
+
+@purple-300: #724C6C;
+@purple-100: #97668F;
+@purple-75: #AC84A5;
+@purple-50: #C1A3BC;
+@purple-25: #D6C1D3;
+@purple-0: #EBE0E9;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sfc-utils",
-  "version": "1.3.53",
+  "version": "1.3.55",
   "author": "ewagstaff <evanjwagstaff@gmail.com>",
   "dependencies": {
     "archieml": "^0.4.2",
@@ -9,6 +9,7 @@
     "html-entities": "1.3.1",
     "htmlparser2": "4.1.0",
     "opn": "^6.0.0",
+    "prop-types": "^15.8.1",
     "write": "^2.0.0"
   }
 }

package/settings.js

@@ -13,6 +13,12 @@ try {
 
 // Get settings off story_settings if it exists, otherwise fall back to projectConfig
 let getSettings = function(){
+	if (!projectConfig) {
+		let settings = {PROJECT : {DATE: "September 20, 2022 9:00 AM", MOD_DATE: "September 21, 2022 9:00 AM"}}
+		return (
+			settings
+		)
+	}
 	let projectSettings = projectConfig.PROJECT
 	let settings = projectConfig
 	// This needs to be set even if the "try" below fails
@@ -22,8 +28,11 @@ let getSettings = function(){
 	let fullAuthors = []
 	try {
     try {
-    	// Check for classic story_settings sheet
+		
     	[storySettings] = require("../../src/data/story_settings.sheet.json")
+		// Uncomment line below and comment out line above if testing from example folder in utils
+			// [storySettings] = require("./example/src/data/story_settings.sheet.json")
+			
 			// If we got story_settings, try structuring the AUTHORS object
 			let authorNames = []
 			let authorLinks = []

package/styles/brandStylesCommon.less

@@ -0,0 +1,164 @@
+.hed, .deck{
+  text-align: center;
+  margin: @s8 0;
+  &.left {
+    text-align: left;
+  }
+  @media (max-width: 960px) {
+    text-align: left;
+    padding: 0 @s16;
+  }
+}
+
+//could the next three classes be moved into byline module?
+.byline-wrapper {
+  max-width: @lg;
+  border-bottom: 1px solid @grey-75;
+  margin: @s16 auto @s24;
+  padding-bottom: @s8;
+  @media (max-width: 960px) {
+    margin: @s16 @s16 @s24;
+  }
+  @media (max-width: @md) {
+    border-bottom: none;  }
+}
+.byline-name {
+    font-weight: 700;
+}
+
+.byline {
+  text-align: left;
+  display: inline-block;
+  a, a:visited {
+    text-decoration: none;
+    color: @black;
+    &:hover {
+      color: @brand;
+    }
+  }
+}
+
+//move into share module?
+.articleHeader--shareTools {
+  display: inline-block;
+  text-align: right;
+  float: right;
+  a, a:visited {
+    color: @black;
+  }
+  @media (max-width: @md) {
+    display: block;
+    float: none;
+    margin: @s4 0;
+  }
+}
+
+.caption {
+  margin: @s4 auto @s24;
+}
+
+// Handle basic embed classes
+.inline-figure {
+  &.float-left, &.float-right {
+    max-width: @xl;
+    margin: 0 auto;
+    @media (max-width: @xl){
+      max-width: @md;
+      padding: 0 @s16;
+    }
+    figure {
+      max-width: @xs;
+      width: 100%;
+      @media (max-width: @xl){
+        max-width: @md;
+        float: none;
+        margin: @s24 auto;
+      }
+    }
+  }
+  &.float-left {
+    figure {
+      float: left;
+      margin-right: @s16;
+    }
+
+  }
+  &.float-right {
+    figure {
+      float: right;
+      margin-left: @s16;
+    }
+  }
+  &.full {
+    max-width: 100%;
+  }
+}
+
+// TO DO: Add support for side-by-side visuals
+
+.inline-figure.wide, .inline-figure.full, .inline-figure.large {
+  &.graphic-wrapper {
+    @media @max-desktop {
+      padding: 0 @s16;
+    }
+  }
+   .caption {
+    max-width: @w-text-width;
+    @media @max-text-width {
+      padding: 0 @s16;
+    }
+  }
+}
+
+.graphic-wrapper {
+  &.inline-figure.wide, &.inline-figure.full, &.inline-figure.large {
+    .caption {
+     max-width: 100%;
+     @media @max-text-width {
+       padding: 0;
+     }
+   }
+  }
+}
+
+.inline-figure.wide {
+  caption {
+    @media (max-width: @xl) {
+      padding: 0 @s16;
+    }
+  }
+}
+
+
+.topper-image {
+  .caption {
+    max-width: @lg;
+    margin-bottom: @s8;
+    @media (max-width: 960px) {
+      padding: 0 @s16;
+    }
+  }
+}
+a {
+  color: @black;
+  text-decoration: underline;
+  text-decoration-color: @brand;
+  text-decoration-skip-ink: auto;
+  outline: 0 !important;
+
+  &:hover {
+    color: @brand;
+  }
+
+  &:visited {
+    color: @grey-75;
+  }
+}
+
+.dropcap:first-letter {
+  font-family: @hed;
+  font-size: @s112;
+  float: left;
+  line-height: 0.75;
+  margin: 0.75rem 0.5rem 0 0.25rem;
+}

package/styles/modules/share.module.less

@@ -0,0 +1,25 @@
+@import (less) "../variables.less";
+
+.wrapper {
+  display: flex;
+  align-items: center;
+}
+
+.link {
+    width: 25px;
+    height: 25px;
+    margin: 0 2px;
+    border-radius: 25px;
+    border: 1px solid black;
+    padding: 5px;
+}
+
+.svg {
+  width: 100%;
+  height: 100%;
+  vertical-align: top;
+
+  &:hover {
+    color: @brand;
+  }
+}

package/styles/modules/topper2.module.less

@@ -0,0 +1,143 @@
+@import (less) "../variables.less";
+
+:root { 
+    --headerDek-vertical-offset: 0px;
+    --headerDek-horizontal-offset: 0px;
+}
+
+.topperContainerFullScreen {
+    max-width: 100%;
+    position: relative;
+}
+
+.imageFullScreen {
+    top: 0 !important;
+    width: 100%;
+}
+
+.imageStacked {
+    position: relative;
+    overflow: hidden;
+
+    @media @mobile {
+        width: 100%;
+    }
+}
+
+.headerDekStacked {
+  margin-left: auto;
+  margin-right: auto;
+  @media (max-width: 960px) {
+    margin-left: 0;
+    margin-right: 0;
+  }
+}
+.headerDekFullScreen {
+    position: absolute;
+    padding: @s24; 
+    width: @md;
+    @media @tablet {
+        width: @sm;
+        position: static;
+        transform: none;
+        margin: 0;
+        padding: 0;
+        width: 100%;
+    }
+}
+
+.hedFullScreen {
+  margin-top: 0px;
+}
+
+.deckFullScreen {
+  margin-bottom: 0px; 
+}
+
+.headerDekTop {
+  top: 0%;
+  margin-top: var(--headerDek-vertical-offset);
+  @media @tablet {
+      margin-top: 0px;
+  }
+}
+
+.headerDekBottom {
+  bottom: 0%;
+  margin-bottom: var(--headerDek-vertical-offset);
+  @media @tablet {
+      margin-bottom: 0px;
+  }
+}
+
+.headerDekLeft {
+  left: 0%;
+  margin-left: var(--headerDek-horizontal-offset);
+  @media @tablet {
+      margin-left: 0px;
+  }
+}
+
+.headerDekRight {
+  right: 0%;
+  margin-right: var(--headerDek-horizontal-offset);
+  @media @tablet {
+      margin-right: 0px;
+  }
+}
+
+.headerDekCenter {
+  left: 50%; 
+  transform: translate(-50%, 0%);
+  margin-left: var(--headerDek-horizontal-offset);
+
+  @media @tablet { 
+      transform: none;
+      top: 0%;
+      left: 0%;
+      margin-left: 0px;
+  }
+}
+
+.textAlignLeft {
+  text-align: left;
+}
+
+.textAlignCenter {
+  text-align: center;
+  @media @tablet {
+    text-align: left;
+  }
+}
+
+.whiteTextBlackBg {
+  color: @white;
+  background-color: rgba(0, 0, 0, 0.54);
+  @media @tablet {
+    color: @black;
+    background-color: transparent;
+  }
+}
+
+.blackTextWhiteBg {
+  color: @black;
+  background-color: rgba(255, 255, 255, 0.54);
+}
+
+.hideWhenMobile {
+  @media @mobile { 
+      display: none;
+  }
+}
+
+.hideWhenDesktop {
+  display: none;
+  @media @mobile {
+    display: block;
+    padding-left: @s8;
+  }
+}
+
+.smallPaddingLeft {
+  padding-left: @s8;
+}

package/styles/modules/wcmimage2.module.less

@@ -0,0 +1,32 @@
+@import (less) '../values';
+@import (less) "../variables.less";
+
+:root { 
+  --img-bottom-padding-ratio: "56.25%";
+}
+
+.c-img {
+  display: block;
+  position: relative;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: auto;
+}
+
+.c-img-fullscreen {
+  position: static;
+  object-fit: cover;
+  height: calc(100vh - 37px);
+  @media @tablet {
+    height: auto;
+  }
+}
+
+.c-fig-hidden-when-desktop {
+  display: none;
+  @media @mobile {
+    display: block;
+    padding-left: @s8;
+  }
+}