sfc-utils 1.3.66 → 1.3.68

package/example/src/pages/index.js

@@ -12,6 +12,7 @@ import Newsletter from '../components/sfc/newsletter'
 import NavTop from '../components/sfc/navtop'
 import Byline from '../../../components/byline.mjs'
 import Topper2 from '../../../components/topper2.mjs'
+import OgPubDate from '../../../components/ogpubdate.mjs'
 
 let rawCredits;
 try {
@@ -101,6 +102,7 @@ const IndexPage = ({ data }) => {
       </main>
 
       <RelatedSection links={related_links} />
+      <OgPubDate />
       {rawCredits && <CreditsSection creditsData={rawCredits}/>}
     </Layout>
   )

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sfc-utils",
-  "version": "1.3.66",
+  "version": "1.3.68",
   "author": "ewagstaff <evanjwagstaff@gmail.com>",
   "dependencies": {
     "archieml": "^0.4.2",

package/settings.js

@@ -14,7 +14,7 @@ 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"}}
+		let settings = {PROJECT : {DATE: "January 1, 1900 9:00 AM", MOD_DATE: "January 1, 1901 9:00 AM"}} // Making this demo date SUPER wrong so we can catch it
 		return (
 			settings
 		)

package/styles/brandStylesCommon.less

@@ -1,6 +1,6 @@
 .hed, .deck{
   text-align: center;
-  margin: @s8 0;
+  margin: @s16 0;
   &.left {
     text-align: left;
   }
@@ -10,6 +10,10 @@
   }
 }
 
+h1 {
+  font-size: 4rem;
+  font-family: @hed;
+}
 //could the next three classes be moved into byline module?
 .byline-wrapper {
   max-width: @lg;
@@ -155,10 +159,32 @@ a {
   }
 }
 
-.dropcap:first-letter {
-  font-family: @hed;
-  font-size: @s112;
-  float: left;
-  line-height: 0.75;
-  margin: 0.75rem 0.5rem 0 0.25rem;
-}
+/* Gift button mods */
+.byline-wrapper {
+  overflow: auto;
+}
+.byline-wrapper .devhub .givegift {
+  padding: 1px 0px !important;
+  border-radius: 30px;
+  font-size: 16px;
+}
+.byline-wrapper .giftarticle.devhub {
+  margin-top: 0 !important;
+  margin-right: 4px !important;
+}
+.byline-wrapper .articleHeader--shareTools {
+  align-items: center;
+}
+.giftarticle svg {
+  padding-top: 1px;
+}
+@media (max-width: 420px){
+  .byline-wrapper .devhub .givegift {
+    font-size: 14px;
+  }
+  .giftarticle svg {
+    padding-top: 3px;
+    margin-right: 4px !important; 
+  }
+}
+/* End gift button mods */

package/styles/modules/imageslideshow.module.less

@@ -21,6 +21,19 @@
   }
 }
 
+.container-side-by-side {
+  padding-bottom: calc(50vw*2/3);
+  width: 50%;
+  height: 100%;
+
+  @media (max-width: @lg) {
+    margin: 0 auto;
+    width: auto;
+    white-space: nowrap;
+    padding-bottom: calc(100vw * (2/3));
+  }
+}
+
 .image-wrapper-stacked {
   position: absolute;
   width: 100%;
@@ -37,6 +50,38 @@
   }
 }
 
+.image-wrapper-side-by-side {
+  position: absolute;
+  width: calc(50vw);
+  height: calc(50vw*2/3);
+
+  @media (max-width: @lg) {
+    width: 100%;
+    height: calc(100vw*2/3);
+  }
+}
+
+.image-wrapper-side-by-side-portrait {
+  position: absolute;
+  width: calc(90vh*2/3);
+  height: calc(90vh);
+  min-height: calc(600px + 32px);
+
+  @media (max-width: @lg) {
+    height: calc(90vh);
+    min-height: unset;
+  }
+
+  @media @mobile {
+    width: 90vw;
+    height: calc(90vw*3/2);
+  }
+}
+
+.side-by-side-portrait-margin-left {
+  margin-left: clamp(0px, calc(50vw - 32px - 90vh * 2/3), calc(600px - 90vh * 2/3))
+}
+
 /* enter animation */
 .fade-enter {
   opacity: 0;

package/styles/modules/topper2.module.less

@@ -3,6 +3,8 @@
 :root {
   --headerDek-vertical-offset: 0px;
   --headerDek-horizontal-offset: 0px;
+  --container-background-color: none;
+  --side-by-side-text-color: black;
 }
 
 .topperContainerFullScreen {
@@ -20,6 +22,40 @@
   }
 }
 
+.topperContainerSideBySide {
+  display: flex;
+  align-items: center;
+  background: var(--container-background-color);
+
+  @media (max-width: @lg) {
+    flex-direction: column;
+  }
+}
+
+.topperContainerSideBySidePortrait {
+  display: flex;
+  align-items: center;
+  max-width: @xl;
+  margin: auto;
+  margin-bottom: @s32;
+  min-height: 600px;
+
+  @media (max-width: @lg) {
+    flex-direction: column;
+    margin-bottom: 0;
+  }
+}
+
+.fullWidthContainer {
+  background: var(--container-background-color);
+  width: 100%;
+  padding-bottom: @s16;
+
+  @media (max-width: @lg) {
+    padding-bottom: 0px;
+  }
+}
+
 .imageFullScreen {
   top: 0 !important;
   width: 100%;
@@ -38,6 +74,66 @@
   }
 }
 
+.imageSideBySide {
+  width: 50%;
+  float: left;
+  padding: @s16;
+
+  @media (max-width: @lg) {
+    width: auto;
+    float: none;
+    padding-bottom: 0;
+  }
+}
+
+.imageSideBySideSlideshow {
+  width: 50%;
+  height: calc(50vw*2/3 + 10px);
+
+  @media (max-width: @lg) {
+    width: 100%;
+    height: calc(100vw*2/3 + 10px);
+  }
+}
+
+.imageSideBySidePortrait {
+  width: 50%;
+  height: 90vh;
+  min-height: calc(600px + 32px);
+  float: left;
+  padding: @s16;
+
+  @media (max-width: @lg) {
+    width: auto;
+    float: none;
+    height: auto;
+    padding-bottom: 0;
+    min-height: unset;
+  }
+}
+
+.imageSideBySidePortraitSlideshow {
+  width: 50%;
+  height: 90vh;
+  min-height: calc(600px + 32px);
+  float: left;
+  padding: @s16;
+
+  @media (max-width: @lg) {
+    width: calc(90vh*2/3);
+    float: none;
+    height: calc(90vh);
+    padding-bottom: 0;
+    min-height: unset;
+  }
+
+  @media @mobile {
+    width: 90vw;
+    height: calc(90vw*3/2 + @s16);
+    padding: 0;
+  }
+}
+
 .headerDekStacked {
   margin-left: auto;
   margin-right: auto;
@@ -63,6 +159,20 @@
   }
 }
 
+.headerDekSideBySide {
+  max-width: 50%;
+  float: right;
+  text-align: left;
+  color: var(--side-by-side-text-color);
+
+  @media (max-width: @lg) {
+    width: auto;
+    max-width: 100%;
+    float: none;
+    padding: 0;
+  }
+}
+
 .hedFullScreen {
   margin-top: 0px;
 }
@@ -170,4 +280,133 @@
   @media @tablet {
     padding-left: @s8;
   }
+}
+
+.slideshowCaptionSideBySide {
+  padding-top: calc(50vw*2/3 - @s16);
+
+  @media (max-width: @lg) {
+    padding-top: calc(100vw*2/3 - @s16);
+  }
+}
+
+.slideshowCaptionSideBySidePortrait {
+  padding-top: clamp(584px, 88vh, 90vh);
+
+  @media (max-width: @lg) {
+    padding-top: calc(90vh - 37px - @s16);
+  }
+
+  @media @mobile {
+    padding-top: calc(90vw*3/2);
+  }
+}
+
+.captionSideBySide {
+  max-width: @lg;
+}
+
+.captionSideBySidePortrait {
+  width: clamp(0px, calc(50vw - 32px), calc(90vh * 2/3));
+  max-width: calc(50vw * 2/3 - 32px);
+  min-width: 400px;
+
+  @media (max-width: @lg) {
+    width: auto;
+    max-width: none;
+    min-width: 0px;
+  }
+}
+
+.reverseFlexbox {
+  flex-direction: row-reverse;
+
+  @media (max-width: @lg) {
+    flex-direction: column;
+  }
+}
+
+.captionTextColor {
+  color: var(--side-by-side-text-color);
+}
+
+.captionTextColorImportant {
+  color: var(--side-by-side-text-color) !important;
+}
+
+.largePaddingLeft {
+  padding: @s16 @s8 @s16 @s32;
+
+  @media (max-width: @lg) {
+    padding: 0;
+  }
+}
+
+.largePaddingRight {
+  padding: @s16 @s32 @s16 @s8;
+
+  @media (max-width: @lg) {
+    padding: 0;
+  }
+}
+
+.captionLargePaddingLeft {
+  padding-left: @s32;
+
+  @media (max-width: @lg) {
+    padding-left: @s16;
+  }
+}
+
+.captionSmallPaddingLeft {
+  padding-left: @s16;
+
+  @media (max-width: @lg) {
+    padding-left: @s16;
+  }
+
+  @media @mobile {
+    padding-left: 0;
+  }
+}
+
+.captionLargePaddingRight {
+  padding-left: @s8;
+
+  @media (max-width: @lg) {
+    padding-left: @s16;
+  }
+}
+
+.captionXLargePaddingRight {
+  padding-left: @s16;
+
+  @media (max-width: @lg) {
+    padding-left: @s16;
+  }
+}
+
+.captionSideBySidePortraitPadding {
+  padding-left: clamp(0px, calc(50vw - (90vh * 2/3) - @s16), calc(600px - 90vh *2/3 + @s16));
+
+  @media (max-width: @lg) {
+    padding-left: @s16;
+  }
+}
+
+.floatLeftWhenDesktop {
+  float: left;
+
+  @media (max-width: @lg) {
+    float: none;
+  }
+}
+
+.floatRightWhenDesktop {
+  float: right;
+  max-width: none;
+
+  @media (max-width: @lg) {
+    float: none;
+  }
 }

package/styles/modules/topperimage.module.less

@@ -3,6 +3,7 @@
 
 :root {
   --img-bottom-padding-ratio: "56.25%";
+  --img-height-viewport: "56.25vw";
 }
 
 .c-force-aspect-ratio {
@@ -30,6 +31,39 @@
   }
 }
 
+.c-img-slideshow-side-by-side {
+  object-fit: cover;
+  width: 100%;
+  height: calc(50vw * 2/3);
+  padding: @s16;
+
+  @media (max-width: @lg) {
+    height: calc(100vw*2/3);
+  }
+}
+
+.c-img-slideshow-side-by-side-portrait {
+  object-fit: cover;
+  width: 100%;
+  height: calc(90vh);
+  min-width: 400px;
+  min-height: 600px;
+  padding: @s16;
+
+  @media (max-width: @lg) {
+    height: calc(90vh - 37px);
+    width: calc(90vh*2/3);
+    min-height: unset;
+    min-width: unset;
+  }
+
+  @media @mobile {
+    width: 90vw;
+    height: calc(90vw*3/2);
+    padding: 0;
+  }
+}
+
 .c-img {
   display: block;
   position: relative;
@@ -50,6 +84,41 @@
   }
 }
 
+.c-container-side-by-side {
+  height: 100%;
+}
+
+.c-img-side-by-side {
+  object-fit: cover;
+  width: 50vw;
+  height: var(--img-height-viewport);
+
+  @media (max-width: @lg) {
+    width: 100vw;
+    height: calc(100vw*2/3);
+  }
+}
+
+.c-container-side-by-side-portrait {
+  float: left;
+  height: 100%;
+}
+
+.c-img-side-by-side-portrait {
+  object-fit: cover;
+  width: calc(90vh * 2/3);
+  height: 100%;
+  min-width: 400px;
+  min-height: 600px;
+
+  @media (max-width: @lg) {
+    width: 100vw;
+    height: auto;
+    min-height: unset;
+    min-width: unset;
+  }
+}
+
 .c-fig-hidden-when-desktop {
   display: none;
 
@@ -57,4 +126,20 @@
     display: block;
     padding-left: @s8;
   }
+}
+
+.c-large-padding-left {
+  padding: @s16 @s8 @s16 @s32;
+
+  @media (max-width: @lg) {
+    padding: @s16;
+  }
+}
+
+.c-large-padding-right {
+  padding: @s16 @s32 @s16 @s8;
+
+  @media (max-width: @lg) {
+    padding: @s16;
+  }
 }