sfc-utils 1.3.25 → 1.3.26

package/example/src/styles/modules/newsletter.module.less

@@ -0,0 +1,147 @@
+@import (less) '../values.less';
+
+// newsletter signup ----------------------------------------------
+
+.container {
+  max-width: 96vw;
+  padding: 0;
+  margin: @step-3 auto;
+  @media (orientation: landscape) {
+    max-width: 80ch;
+  }
+}
+
+.wrapper {
+  padding-bottom: calc(@step--2 / 2);
+  margin-top: @step--2;
+
+  margin-bottom: @step-0;
+  padding: @step--2 @step-1;
+  border-radius: 5px;
+  border: 1px solid #eaeaea;
+  border-top: 5px solid @brand;
+  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.08);
+  overflow: hidden;
+}
+
+.output-text {
+  text-align: right;
+
+  p {
+    margin: calc(@step--2 / 2) 0;
+    font-family: @sans-book;
+    font-size: @step--2;
+
+    &.red {
+      color: @red;
+    }
+  }
+}
+
+.content-wrapper {
+  display: flex;
+  justify-content: space-between;
+  height: 40px;
+
+  @media @tablet {
+    display: block;
+    height: auto;
+    margin: 0 auto;
+  }
+}
+
+.content {
+  display: flex;
+  align-items: center;
+
+  .headshot {
+    height: 40px;
+    width: 40px;
+    margin-right: @step--1;
+    flex-shrink: 0;
+
+    img {
+      width: 100%;
+      border-style: none;
+      display: block;
+    }
+  }
+  .newsletter-headline {
+    width: 100%;
+    max-width: 100%;
+    font-family: @sans-med;
+    font-size: @step-0;
+    line-height: 1.2;
+    margin: 0 0 calc(@step--2 / 4) 0;
+    text-align: left;
+  }
+}
+
+.form-wrapper {
+  display: block;
+}
+
+.input-wrapper {
+  margin-top: calc(@step--2 / 4);
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+
+  input {
+    width: 220px;
+    font-size: @step--1;
+    height: 24px;
+    border: none;
+    padding: 0;
+    border-bottom: 1px solid #979797;
+    font-family: 'National Light', 'Source Sans Pro', Arial, Helvetica,
+      sans-serif;
+    line-height: 1.5;
+    margin-right: @step-0;
+    overflow: visible;
+
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAkCAYAAADo6zjiAAAAAXNSR…XF8MaClwaeROWRA7nk+tUnyzGvZrKg0/40gdME/t8EvgG0/NOS6v9NHQAAAABJRU5ErkJggg==);
+    background-repeat: no-repeat;
+    background-attachment: scroll;
+    background-size: 16px 18px;
+    background-position: 98% 50%;
+    cursor: pointer;
+    @media @tablet {
+      width: calc(100% - 135px);
+    }
+  }
+}
+
+.submit-button {
+  height: 30px;
+  width: 88px;
+  padding: calc(@step--2 / 2);
+  font-size: @step--1;
+  border: none;
+  border-radius: 3px;
+  background-color: #1b1b1b;
+  color: #fff;
+  font-family: 'National Medium', 'Source Sans Pro', Arial, Helvetica,
+    sans-serif;
+  text-transform: uppercase;
+  text-align: center;
+  line-height: 1;
+  letter-spacing: 0.05em;
+  cursor: pointer;
+
+  img {
+    margin: auto;
+  }
+}
+
+.disclaimer {
+  max-width: 100%;
+  color: #777;
+  font-family: @sans-book;
+  font-size: @step--2;
+  line-height: 1.2;
+  margin: @step--1 0 0 0;
+  padding-top: @step--2;
+  border-top: 0.5px solid #e3e3e3;
+  max-width: 100%;
+}

package/example/src/styles/modules/relatedlink.module.less

@@ -0,0 +1,28 @@
+@import (less) "../values.less";
+
+.container {
+  width: 100%;
+  padding: 0 @step--1;
+  @media (orientation: portrait) {
+    margin-bottom: @step-0;
+  }
+}
+
+.image {
+  &:hover {
+    opacity: .8;
+  }
+
+  @media (orientation: portrait) {
+    width: 100%;
+  }
+}
+
+.text {
+  margin: 0;
+  padding: 0;
+  font-size: @step--1;
+  @media (orientation: portrait) {
+    max-width: 100%;
+  }
+}

package/example/src/styles/modules/relatedrow.module.less

@@ -0,0 +1,8 @@
+@import (less) "../values.less";
+
+.links {
+  display: flex;
+  @media @tablet {
+    flex-direction: column;
+  }
+}

package/example/src/styles/modules/relatedsection.module.less

@@ -0,0 +1,19 @@
+@import (less) "../values.less";
+
+.section {
+  padding: @step--2 0;
+  border-top: 1px solid @gray;
+  border-bottom: 1px solid @gray;
+  max-width: 960px;
+  margin: @step-3 auto;
+}
+
+.hed {
+  font-family: @sans-med;
+  font-size: @step-1;
+  color: @dark-gray;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin: @step-0 auto;
+  text-align: center;
+}

package/example/src/styles/modules/scrolldown.module.less

@@ -0,0 +1,31 @@
+@import (less) "../values.less";
+
+.arrow {
+  position: relative;
+  color: @white;
+  width: 50px;
+  bottom: 12vw;
+  left: 50%;
+  height: 0;
+  transform: translate(-50%, 0%);
+  cursor: pointer;
+  animation: bounce 2s ease-in-out infinite;
+
+  div {
+    margin: 0 auto;
+  }
+}
+
+@keyframes bounce {
+  0% {
+    bottom: 12vw;
+  }
+
+  66% {
+    bottom: 14vw;
+  }
+
+  100% {
+    bottom: 12vw;
+  }
+}

package/example/src/styles/modules/share.module.less

@@ -0,0 +1,22 @@
+@import (less) '../values.less';
+
+.wrapper {
+  display: flex;
+  align-items: center;
+  margin: 15px 0;
+}
+
+.link {
+  width: 30px;
+  height: 30px;
+  margin-right: 15px;
+}
+
+.svg {
+  width: 100%;
+  color: @white;
+
+  &:hover {
+    color: @brand;
+  }
+}

package/example/src/styles/modules/topper.module.less

@@ -0,0 +1,63 @@
+@import (less) "../values.less";
+
+.header {
+  width: 100%;
+  padding: 0 @step--1;
+  margin: @step-3 0;
+  height: auto;
+}
+
+.text-container {
+  margin: @step-0 auto;
+  font-kerning: normal;
+  font-variant-ligatures: normal;
+  text-rendering: geometricPrecision;
+  max-width: 900px;
+}
+
+.hed, .dek {
+  font-family: @hed;
+  font-size: @step-5;
+  margin-bottom: @step--2;
+  max-width: 900px;
+}
+
+.dek {
+  font-family: @serif-book;
+  font-size: @step-2;
+}
+
+.dateby {
+  font-size: @step-0;
+  font-family: @sans-light;
+  color: @black;
+  font-variant-numeric: lining-nums;
+}
+
+.figure {
+  position: relative;
+  width: 100%;
+  max-width: 100%;
+  padding: 0;
+  margin: 0;
+}
+
+.topcap {
+  margin-top: calc(@step--2 / 2);
+  font-family: @sans-book;
+  color: @dark-gray;
+  padding: 0 @step--1;
+  line-height: 1.2;
+}
+
+.topcred {
+  color: @gray;
+}
+
+.image {
+  display: block;
+  width: 100%;
+  height: auto;
+  margin: 0;
+  padding: 0;
+}

package/example/src/styles/modules/video.module.less

@@ -0,0 +1,27 @@
+@import (less) '../values.less';
+
+.responsive-container {
+  padding-bottom: 56.25%;
+  overflow: hidden;
+  position: relative;
+  height: 0;
+}
+
+.default {
+  display: block;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: auto;
+}
+
+.c-fig-cap {
+  margin-top: calc(@step--2 / 2);
+  font-family: @sans-book;
+  color: @dark-gray;
+  line-height: 1.2;
+}
+
+.c-fig-cred {
+  color: @gray;
+}

package/example/src/styles/modules/wcmimage.module.less

@@ -0,0 +1,20 @@
+@import (less) '../values';
+
+.c-img {
+  display: block;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: auto;
+}
+
+.c-fig-cap {
+  margin-top: calc(@step--2 / 2);
+  font-family: @sans-book;
+  color: @dark-gray;
+  line-height: 1.2;
+}
+
+.c-fig-cred {
+  color: @gray;
+}

package/example/src/styles/nav.less

@@ -0,0 +1,187 @@
+// sticky navigation bar-------------------------------
+@import (less) "values";
+
+.topper-nav-container {
+  height: 37px;
+  background-color: black;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+}
+
+.headroom--pinned,
+.headroom--unfixed {
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25), 0 2px 2px rgba(0, 0, 0, 0.2),
+    0 4px 4px rgba(0, 0, 0, 0.15), 0 8px 8px rgba(0, 0, 0, 0.1),
+    0 16px 16px rgba(0, 0, 0, 0.05);
+}
+
+.topper-nav-desk-logo,
+.topper-nav-mobile-logo {
+  max-height: 20px;
+  margin-left: 8px;
+  margin-right: 2px;
+}
+
+.topper-nav-desk-logo {
+  @media (max-width: 490px) {
+    display: none;
+  }
+}
+
+.topper-nav-mobile-logo {
+  display: none;
+
+  @media (max-width: 490px) {
+    display: block;
+  }
+}
+
+.topper-nav-left {
+  display: flex;
+  flex: 75;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.topper-nav-right {
+  display: none;
+  flex: 25;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+// Hide in the app
+.not-app .topper-nav-right {
+  display: flex;
+}
+
+.topper-nav-right .sub-box {
+  margin-right: 10px;
+  color: @brand;
+  border: 1px solid @brand;
+  border-radius: 3px;
+  padding: 3px 8px;
+  font-size: 14px;
+  text-decoration: none;
+  font-family: @sans-light;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+
+  &:hover {
+    background: @brand;
+    color: white;
+
+    & > div:hover {
+      color: white;
+    }
+  }
+}
+
+.topper-nav-social {
+  margin:0 12px;
+  padding-top: 4px;
+
+  #twitter-icon {
+    color: @brand;
+  }
+  a :hover {
+    color: white;
+  }
+}
+
+.topper-nav-container.invert {
+  background-color: #fff;
+
+  a :hover, .topper-nav-title:hover {
+    color: #999;
+  }
+}
+
+.topper-nav-title {
+  color: @brand;
+  font-family: @sans-book;
+  font-size: @step--1;
+  padding-left: 15px;
+  text-transform: uppercase;
+  text-decoration: none;
+  letter-spacing: 0.08em;
+  font-smooth: auto;
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
+
+  &:hover {
+    color: @white;
+  }
+}
+
+#topper-nav-twitter-icon,
+#topper-nav-mail-icon,
+#topper-nav-facebook-icon {
+  color: @brand;
+
+  &:hover {
+    color: @white;
+  }
+}
+
+/* Configure the nav array */
+
+.headroom li, .headroom ul {
+  font-family: @sans-book;
+  text-transform: uppercase;
+  font-size: 14px;
+  letter-spacing: .05em;
+  width: 100%;
+  margin: 0;
+}
+
+.headroom ul#subnav {
+  position: absolute;
+  top: 37px;
+  padding: 0;
+  border-top: 2px solid #ccc;
+  border-right: 2px solid #ccc;
+  width: 300px;
+  display: none;
+
+  @media @tablet {
+    border-right: none;
+    width: 100%;
+  }
+}
+
+.headroom .show-subnav ul#subnav {
+  display: block;
+}
+
+.headroom.headroom--unpinned .show-subnav ul#subnav {
+  display: none;
+}
+
+.headroom li {
+  display: block;
+  background-color: #fff;
+  border-bottom: 2px solid #ccc;
+
+  a {
+    padding: 10px;
+    display: inline-block;
+    width: 100%;
+  }
+
+  .arrow-bullet {
+    font-size: 10px;
+  }
+}
+
+.dropdown-icon {
+  margin-left: 5px;
+  display: inline-block;
+  transition: transform 0.2s;
+}
+
+.show-subnav .dropdown-icon {
+  transform: rotate(180deg);
+}
+

package/example/src/styles/project.less

@@ -0,0 +1 @@
+// Project CSS/Less goes below

package/example/src/styles/reset.css

@@ -0,0 +1,95 @@
+html {
+  /* remove 300ms click delay in Safari, the worst */
+  touch-action: manipulation;
+  font-size: 100%;
+}
+
+/* //accessibility styles from https://github.com/mike-engel/a11y-css-reset/ */
+*::after:focus:not(:focus-visible),
+*::before:focus:not(:focus-visible),
+*:focus:not(:focus-visible) {
+  outline: none;
+}
+
+/* prettier-ignore */
+@media(prefers-reduced-motion: reduce) {
+  *,
+  *::after,
+  *::before {
+    transition: none !important;
+    animation: none !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* https://hankchizljaw.com/wrote/a-modern-css-reset/ */
+/* Box sizing rules */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  /* Safari, AKA still the worst */
+  -webkit-tap-highlight-color: transparent;
+}
+
+/* Remove default padding */
+ul[class],
+ol[class] {
+  padding: 0;
+}
+
+/* Remove default margin */
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+ul[class],
+ol[class],
+li,
+figure,
+figcaption,
+blockquote,
+dl,
+dd {
+  margin: 0;
+}
+
+/* Set core body defaults */
+body {
+  min-height: 100%;
+  scroll-behavior: smooth;
+  text-rendering: optimizeSpeed;
+  line-height: 1.5;
+}
+
+/* Remove list styles on ul, ol elements with a class attribute */
+ul[class],
+ol[class] {
+  list-style: none;
+}
+
+/* A elements that don't have a class get default styles */
+a:not([class]) {
+  text-decoration-skip-ink: auto;
+}
+
+/* Make images easier to work with */
+img {
+  max-width: 100%;
+  display: block;
+}
+
+/* Natural flow and rhythm in articles by default */
+article > * + * {
+  margin-top: 1em;
+}
+
+/* Inherit fonts for inputs and buttons */
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}

package/example/src/styles/seed.less

@@ -0,0 +1,5 @@
+@import (css) "reset.css";
+@import (css) "typography.css";
+@import (less) "values";
+@import (less) "defaults";
+@import (less) "project";