sfc-utils 1.3.54 → 1.3.55

package/example/src/styles/old css/footer.less

@@ -0,0 +1,345 @@
+@import (less) "values";
+
+.pageFooter {
+  background-color: #222;
+  overflow: auto;
+  padding: 30px 20px;
+  position: relative;
+
+  &.invert {
+    background-color: #ececec;
+    color: #000;
+  }
+}
+
+.pageFooter--left {
+  text-indent: -9999px;
+  margin-bottom: 15px;
+}
+
+.pageFooter--left-logo {
+  background-position: 0 0;
+  background-repeat: no-repeat;
+  background-size: contain;
+  border-bottom: none;
+  display: block;
+  height: 20px;
+  width: 100%;
+  min-width: 100px;
+
+  &.mobile {
+    display: none;
+  }
+
+  @media @mobile{
+    display: none;
+
+    &.mobile {
+      display: block;
+    }
+  }
+}
+
+
+
+.pageFooter--left-social {
+  float: left;
+  margin-top: 20px !important;
+  margin-bottom: 30px !important;
+  width: 100%;
+}
+
+.pageFooter--left-social li {
+  float: left;
+  height: 25px;
+  margin-right: 10px;
+  width: 25px;
+}
+
+.pageFooter--left-social a {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+.pageFooter--left-social .facebook a {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 1a19 19 0 1 0 19 19A18.954 18.954 0 0 0 20 1zm3.958 19h-2.691v9.5h-3.959V20h-1.9v-3.325h1.9v-2.217a3.707 3.707 0 0 1 3.325-3.958h3.642v3.325h-2.058a.748.748 0 0 0-.792.792v2.058h3.008z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-size: contain;
+  height: 25px;
+  width: 25px;
+}
+
+.pageFooter--left-social .facebook a:hover {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 1a19 19 0 1 0 19 19A18.954 18.954 0 0 0 20 1zm3.958 19h-2.691v9.5h-3.959V20h-1.9v-3.325h1.9v-2.217a3.707 3.707 0 0 1 3.325-3.958h3.642v3.325h-2.058a.748.748 0 0 0-.792.792v2.058h3.008z' fill='%233b5999'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+
+.pageFooter--left-social .twitter a {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 1A19 19 0 1 1 1 20 19.056 19.056 0 0 1 20 1zm9.025 15.833a14.671 14.671 0 0 0 2.217-2.216 6.636 6.636 0 0 1-2.375.633 4.045 4.045 0 0 0 1.9-2.375 13.697 13.697 0 0 1-2.692 1.108 3.986 3.986 0 0 0-3.167-1.425 4.257 4.257 0 0 0-4.275 4.275 2.008 2.008 0 0 0 .159.95 13.243 13.243 0 0 1-4.909-1.266 12.953 12.953 0 0 1-3.958-3.167 5.154 5.154 0 0 0-.633 2.217 3.798 3.798 0 0 0 1.9 3.483 4.216 4.216 0 0 1-1.9-.475 4.3 4.3 0 0 0 .95 2.692 3.733 3.733 0 0 0 2.533 1.425 2.695 2.695 0 0 1-1.108.158h-.792a4.053 4.053 0 0 0 1.583 2.058 4.785 4.785 0 0 0 2.534.792 8.285 8.285 0 0 1-5.384 1.9H10.5a11.934 11.934 0 0 0 6.492 1.9 10.23 10.23 0 0 0 4.275-.792 14.9 14.9 0 0 0 3.483-1.9 10.37 10.37 0 0 0 2.375-2.85 10.781 10.781 0 0 0 1.583-3.325 12.347 12.347 0 0 0 .475-3.483c-.158 0-.158-.158-.158-.317z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-size: contain;
+  height: 25px;
+  width: 25px;
+}
+
+.pageFooter--left-social .twitter a:hover {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 1A19 19 0 1 1 1 20 19.056 19.056 0 0 1 20 1zm9.025 15.833a14.671 14.671 0 0 0 2.217-2.216 6.636 6.636 0 0 1-2.375.633 4.045 4.045 0 0 0 1.9-2.375 13.697 13.697 0 0 1-2.692 1.108 3.986 3.986 0 0 0-3.167-1.425 4.257 4.257 0 0 0-4.275 4.275 2.008 2.008 0 0 0 .159.95 13.243 13.243 0 0 1-4.909-1.266 12.953 12.953 0 0 1-3.958-3.167 5.154 5.154 0 0 0-.633 2.217 3.798 3.798 0 0 0 1.9 3.483 4.216 4.216 0 0 1-1.9-.475 4.3 4.3 0 0 0 .95 2.692 3.733 3.733 0 0 0 2.533 1.425 2.695 2.695 0 0 1-1.108.158h-.792a4.053 4.053 0 0 0 1.583 2.058 4.785 4.785 0 0 0 2.534.792 8.285 8.285 0 0 1-5.384 1.9H10.5a11.934 11.934 0 0 0 6.492 1.9 10.23 10.23 0 0 0 4.275-.792 14.9 14.9 0 0 0 3.483-1.9 10.37 10.37 0 0 0 2.375-2.85 10.781 10.781 0 0 0 1.583-3.325 12.347 12.347 0 0 0 .475-3.483c-.158 0-.158-.158-.158-.317z' fill='%23429bd5'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+
+.pageFooter--left-social .linkedin a {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M39 20A19 19 0 1 1 20 1a18.823 18.823 0 0 1 16.625 9.975A17.881 17.881 0 0 1 39 20zm-9.658 8.708v-6.491a4.86 4.86 0 0 0-1.267-3.8 3.442 3.442 0 0 0-3.167-1.267 3.087 3.087 0 0 0-1.266.158l-.95.475c-.159.159-.475.317-.634.634-.158.158-.316.475-.475.633v-1.583h-3.8v11.4h3.8v-6.334a2.008 2.008 0 0 1 .159-.95 2.327 2.327 0 0 1 .791-.95 1.231 1.231 0 0 1 1.267-.316 1.543 1.543 0 0 1 1.425.633 4.216 4.216 0 0 1 .475 1.9v6.017zM15.25 15.25a2.358 2.358 0 0 0 .633-1.425 1.72 1.72 0 0 0-.633-1.425 2.033 2.033 0 0 0-1.583-.633 2.033 2.033 0 0 0-1.584.633 2.358 2.358 0 0 0-.633 1.425 1.72 1.72 0 0 0 .633 1.425 1.519 1.519 0 0 0 1.584.475 1.914 1.914 0 0 0 1.583-.475zm.317 13.458v-11.4h-3.8v11.4z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-size: contain;
+  height: 25px;
+  width: 25px;
+}
+
+.pageFooter--left-social .linkedin a:hover {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M39 20A19 19 0 1 1 20 1a18.823 18.823 0 0 1 16.625 9.975A17.881 17.881 0 0 1 39 20zm-9.658 8.708v-6.491a4.86 4.86 0 0 0-1.267-3.8 3.442 3.442 0 0 0-3.167-1.267 3.087 3.087 0 0 0-1.266.158l-.95.475c-.159.159-.475.317-.634.634-.158.158-.316.475-.475.633v-1.583h-3.8v11.4h3.8v-6.334a2.008 2.008 0 0 1 .159-.95 2.327 2.327 0 0 1 .791-.95 1.231 1.231 0 0 1 1.267-.316 1.543 1.543 0 0 1 1.425.633 4.216 4.216 0 0 1 .475 1.9v6.017zM15.25 15.25a2.358 2.358 0 0 0 .633-1.425 1.72 1.72 0 0 0-.633-1.425 2.033 2.033 0 0 0-1.583-.633 2.033 2.033 0 0 0-1.584.633 2.358 2.358 0 0 0-.633 1.425 1.72 1.72 0 0 0 .633 1.425 1.519 1.519 0 0 0 1.584.475 1.914 1.914 0 0 0 1.583-.475zm.317 13.458v-11.4h-3.8v11.4z' fill='%23017bb6'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+
+.pageFooter--left-social .instagram a {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 38.05A18.05 18.05 0 1 1 38.05 20 18.05 18.05 0 0 1 20 38.05zm4.061-27.827H15.94c-5.596 0-5.566 5.565-5.566 5.565v8.123c0 5.565 5.566 5.565 5.566 5.565h8.122c5.566 0 5.566-5.565 5.566-5.565v-8.123c0-5.565-5.566-5.565-5.566-5.565z'/%3E%3Cpath d='M27.822 23.76a3.595 3.595 0 0 1-3.911 3.911h-7.822a3.595 3.595 0 0 1-3.91-3.91v-7.822a3.595 3.595 0 0 1 3.91-3.911h7.822a3.595 3.595 0 0 1 3.91 3.91zM24.964 20A4.964 4.964 0 1 0 20 24.964 4.964 4.964 0 0 0 24.964 20zM20 23.31A3.31 3.31 0 1 1 23.31 20 3.324 3.324 0 0 1 20 23.31zm5.265-9.778a1.203 1.203 0 1 0 1.203 1.203 1.203 1.203 0 0 0-1.203-1.203z'/%3E%3Ccircle cx='20' cy='20' r='3.309' fill='none'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-size: contain;
+  height: 25px;
+  width: 25px;
+}
+
+.pageFooter--left-social .instagram a:hover {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 38.05A18.05 18.05 0 1 1 38.05 20 18.05 18.05 0 0 1 20 38.05zm4.061-27.827H15.94c-5.596 0-5.566 5.565-5.566 5.565v8.123c0 5.565 5.566 5.565 5.566 5.565h8.122c5.566 0 5.566-5.565 5.566-5.565v-8.123c0-5.565-5.566-5.565-5.566-5.565z' fill='%23c84274'/%3E%3Cpath d='M27.822 23.76a3.595 3.595 0 0 1-3.911 3.911h-7.822a3.595 3.595 0 0 1-3.91-3.91v-7.822a3.595 3.595 0 0 1 3.91-3.911h7.822a3.595 3.595 0 0 1 3.91 3.91zM24.964 20A4.964 4.964 0 1 0 20 24.964 4.964 4.964 0 0 0 24.964 20zM20 23.31A3.31 3.31 0 1 1 23.31 20 3.324 3.324 0 0 1 20 23.31zm5.265-9.778a1.203 1.203 0 1 0 1.203 1.203 1.203 1.203 0 0 0-1.203-1.203z' fill='%23c84274'/%3E%3Ccircle cx='20' cy='20' r='3.309' fill='none'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+
+.pageFooter--right {
+  float: left;
+}
+
+.pageFooter--right-topLine {
+  position: absolute;
+  right: 20px;
+  top: 30px;
+}
+
+.pageFooter--right-topLine .return {
+  margin-bottom: 13px;
+  text-transform: uppercase;
+  width: 38px;
+}
+
+.pageFooter--right-topLine .full {
+  display: none;
+}
+
+.pageFooter--right-links ul {
+  float: left;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  list-style: none;
+}
+
+.pageFooter--right-links li {
+  margin-bottom: 10px;
+  padding: 0;
+
+  a {
+    color: #fff;
+    text-decoration: none;
+    &:hover {
+      color: #ccc;
+    }
+    &:visited{
+      color: @gray;
+    }
+  }
+}
+
+.invert .pageFooter--right-links li { 
+  a {
+    color: #222;
+  }
+  a:hover {
+    color: @brand;
+  }
+  &:visited{
+    color: @gray;
+  }
+}
+
+.pageFooter--right-links .section {
+  -webkit-column-count: 2;
+  column-count: 2;
+  margin: 11px 0 18px;
+}
+
+.pageFooter--right-links .footer-title {
+  margin-bottom: 4px;
+  text-align: left;
+  text-transform: uppercase;
+}
+
+.pageFooter--branding {
+  border-top: 1px solid #999;
+  float: left;
+  padding-top: 17px;
+  width: 100%;
+  color: #fff;
+}
+
+.invert .pageFooter--branding {
+  color: #000;
+}
+
+.pageFooter--branding-logo {
+  height: 11px;
+  width: 114px;
+}
+
+.pageFooter--branding-copyright {
+  display: inline-block;
+  width: 100%;
+}
+@media (min-width:48rem) {
+  .pageFooter {
+    padding: 36px 64px;
+  }
+
+  .pageFooter--wrapper {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+  }
+
+  .pageFooter--left {
+    -webkit-box-flex: 1;
+    -ms-flex: 1 1 auto;
+    flex: 1 1 auto;
+    margin-right: 64px;
+  }
+
+  .pageFooter--right-topLine {
+    border-bottom: 1px solid #999;
+    margin-bottom: 14px;
+    position: static;
+    text-align: right;
+
+    a {
+      color: #222;
+    }
+  }
+
+  .pageFooter--right-topLine .full {
+    display: inline-block;
+  }
+
+  .pageFooter--right-links .wrapper {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+  }
+
+  .pageFooter--right-links .wrapper > li {
+    -webkit-box-flex: 0;
+    padding-bottom: 0;
+  }
+
+  .pageFooter--right-links .section {
+    -webkit-column-count: 1;
+    column-count: 1;
+    margin-bottom: 0;
+    margin-right: 5px;
+  }
+
+  .pageFooter--right-links .section > li:last-child {
+    padding-bottom: 0;
+  }
+
+  .pageFooter--branding {
+    border-top: none;
+    bottom: 36px;
+    position: absolute;
+    width: 216px;
+  }
+}
+@media (min-width:58rem) {
+  .pageFooter {
+    padding: 36px;
+  }
+
+  .pageFooter--right {
+    width: 600px;
+  }
+}
+@media (min-width:88.75rem) {
+  .pageFooter {
+    padding: 36px 0;
+  }
+
+  .pageFooter--branding {
+    bottom: 0;
+  }
+}
+
+.pageFooter {
+  font-family: @sans-light;
+  font-variant-numeric: lining-nums;
+  font-weight: 300;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  -webkit-text-stroke: 0.45px rgba(0,0,0,.1);
+  color: #000;
+  font-size: 12px;
+  line-height: 1.17;
+}
+
+.pageFooter .footer-title {
+  font-family: @sans-bold;
+  font-variant-numeric: lining-nums;
+  font-weight: 400;
+  -webkit-font-smoothing: antialiased;
+  letter-spacing: 1px;
+  color: #fff;
+}
+
+.pageFooter.invert .footer-title {
+  color: #000;
+}
+
+.pageFooter .footer-title,
+.pageFooter .return {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-stroke: 0.45px rgba(0,0,0,.1);
+}
+
+.pageFooter .return {
+  font-family: @sans-med;
+  font-variant-numeric: lining-nums;
+  font-weight: 400;
+  -webkit-font-smoothing: antialiased;
+  line-height: 1.5;
+}
+
+#scrollTop {
+  color: #222;
+  min-width: 120px;
+  cursor: pointer;
+  font-size: 12px;
+}
+@media (min-width: 88.75rem) {
+  .lock {
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    margin: 0 auto !important;
+    position: relative !important;
+    padding: 0 60px;
+    width: 1420px!important;
+  }
+}

package/example/src/styles/old css/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/old css/project.less

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

package/example/src/styles/old css/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/old css/seed.less

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

package/example/src/styles/old css/values.less

@@ -0,0 +1,74 @@
+//spacing, typography
+@step--2: var(--step--2);
+@step--1: var(--step--1);
+@step-0: var(--step-0);
+@step-1: var(--step-1);
+@step-2: var(--step-2);
+@step-3: var(--step-3);
+@step-4: var(--step-4);
+@step-5: var(--step-5);
+@step-6: var(--step-6);
+@step-7: var(--step-7);
+@step-8: var(--step-8);
+@step-9: var(--step-9);
+@step-10: var(--step-10);
+
+//media queries
+@mobile: ~"(max-width: 480px)";
+@tablet: ~"(max-width: 768px)";
+@tablet-horiz: ~"(max-width: 1024px)";
+@phone-horiz: ~"(max-width:670px)";
+@text-width: ~"(max-width: 730px)";
+@widthmax: ~"(max-width: 1000000px)";
+
+@vert: ~"(orientation: portrait)";
+@lscape: ~"(orientation: lanscape)";
+
+//serif
+@hed: "Tiempos Headline Light", Georgia, serif;
+@alt-hed: "Tiempos Headline Black", Georgia, serif;
+@serif-book: "Tiempos Regular", Georgia, serif;
+@serif-bold: "Tiempos Bold", Georgia, serif;
+@base-font-size: @step-0;
+
+//sansserif
+@sans-light: "National Light", Helvetica, sans-serif;
+@sans-book: "National Book", Helvetica, sans-serif;
+@sans-med: "National Medium", Helvetica, sans-serif;
+@sans-bold: "National Bold", Helvetica, sans-serif;
+
+
+//colors
+@brand: #2CB9BF;
+@primary: #388EF4;
+@white: #FFFFFF;
+@black: #000000;
+@text: #222222;
+@accent: #60849D;
+@off-white: #FCFCFC;
+@light-gray: #ECECEC;
+@gray: #999999;
+@dark-gray: #444444;
+@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;
+}

package/example/src/styles/project.less

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