@appartmint/mint 0.0.6 → 0.0.8

package/dist/css/mint.css

@@ -1,4 +1,824 @@
 /*!**********************************************************************************************************************************************************************************************!*\
   !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/webpack-shebang-plugin/loader.js?{"shebangRegExp":{},"chmod":493}!./src/scss/mint.scss ***!
   \**********************************************************************************************************************************************************************************************/
+.mint-bg {
+  display: block;
+  opacity: 0;
+  height: 0;
+  width: 0;
+  z-index: -1;
+}
 
+.mint-pill {
+  display: inline-flex;
+  padding: 0 0.75rem;
+  border-radius: 1rem;
+  text-decoration: none;
+  color: var(--mint-fore);
+  background: var(--mint-brand-5);
+}
+.mint-pill:hover {
+  color: var(--mint-back);
+  background: var(--mint-brand-3);
+  outline-color: var(--mint-brand-0);
+}
+.mint-pill:focus {
+  color: var(--mint-back);
+  background: var(--mint-brand-3);
+  outline-color: var(--mint-brand-0);
+}
+.mint-pill:active, .mint-pill.mint-active {
+  color: var(--mint-back);
+  background: var(--mint-brand-3);
+  outline-color: var(--mint-brand-0);
+}
+.mint-pill.mint-alt {
+  color: var(--mint-brand-3);
+  background: var(--mint-trans);
+}
+.mint-pill.mint-alt:hover {
+  color: var(--mint-fore);
+  background: var(--mint-trans);
+  outline-color: var(--mint-accent-2);
+}
+.mint-pill.mint-alt:focus {
+  color: var(--mint-fore);
+  background: var(--mint-trans);
+  outline-color: var(--mint-accent-2);
+}
+.mint-pill.mint-alt:active, .mint-pill.mint-alt.mint-active {
+  color: var(--mint-fore);
+  background: var(--mint-trans);
+  outline-color: var(--mint-accent-2);
+}
+
+.mint-card {
+  display: flex;
+  flex-direction: column;
+  margin: 3rem 0;
+  border-radius: 1rem;
+  overflow: hidden;
+}
+@media (min-width: 768px) {
+  .mint-card {
+    flex-direction: row;
+  }
+  .mint-card.mint-reverse {
+    flex-direction: row-reverse;
+  }
+}
+.mint-card.mint-stagger {
+  position: relative;
+}
+@media (min-width: 768px) {
+  .mint-card.mint-stagger {
+    flex-direction: row-reverse;
+    border-radius: 0;
+  }
+  .mint-card.mint-stagger .mint-image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 50%;
+    height: calc(100% - 3rem);
+    border-radius: 1rem;
+  }
+  .mint-card.mint-stagger .mint-image img {
+    height: 100%;
+    object-fit: cover;
+  }
+  .mint-card.mint-stagger .mint-content {
+    width: calc(50% + 3rem);
+    margin-top: 3rem;
+    border-radius: 1rem;
+  }
+}
+@media (min-width: 768px) {
+  .mint-card.mint-stagger.mint-reverse {
+    flex-direction: row;
+  }
+  .mint-card.mint-stagger.mint-reverse .mint-image {
+    left: auto;
+    right: 0;
+  }
+}
+.mint-card .mint-image {
+  overflow: hidden;
+}
+@media (min-width: 768px) {
+  .mint-card .mint-image {
+    width: 50%;
+  }
+  .mint-card .mint-image:only-child {
+    width: 100%;
+  }
+}
+.mint-card .mint-image img {
+  display: block;
+}
+.mint-card .mint-content {
+  padding: 1.5rem;
+  background: var(--mint-black-2);
+}
+@media (min-width: 768px) {
+  .mint-card .mint-content {
+    width: 50%;
+  }
+}
+.mint-card .mint-content :first-child {
+  margin-top: 0;
+}
+.mint-card .mint-content :last-child {
+  margin-bottom: 0;
+}
+.mint-card .mint-content .mint-buttons {
+  display: flex;
+  align-items: center;
+}
+.mint-card .mint-content .mint-buttons > * {
+  margin-right: 0.5rem;
+}
+.mint-card .mint-content .mint-buttons :last-child {
+  margin-right: 0;
+}
+
+@keyframes instafade {
+  0% {
+    color: var(--mint-instagram-0);
+  }
+  16.6666666667% {
+    color: var(--mint-instagram-1);
+  }
+  33.3333333333% {
+    color: var(--mint-instagram-2);
+  }
+  50% {
+    color: var(--mint-instagram-3);
+  }
+  66.6666666667% {
+    color: var(--mint-instagram-4);
+  }
+  83.3333333333% {
+    color: var(--mint-instagram-5);
+  }
+  100% {
+    color: var(--mint-instagram-6);
+  }
+}
+:root {
+  --mint-delay-instant: 0ms;
+  --mint-delay-fast: 100ms;
+  --mint-delay-med-fast: 200ms;
+  --mint-delay-default: 300ms;
+  --mint-delay-med-slow: 400ms;
+  --mint-delay-slow: 500ms;
+}
+
+.mint-vp-fall-in {
+  opacity: 0;
+  transform: translateY(-100px);
+  transition: opacity 500ms, transform 500ms !important;
+  pointer-events: none;
+}
+.mint-vp-fall-in.visible {
+  opacity: 1;
+  transform: translateY(0%);
+  pointer-events: auto;
+}
+
+.mint-shine {
+  position: relative;
+  overflow: hidden;
+}
+.mint-shine:hover::after {
+  transition-duration: 300ms;
+  transform: translate(100%, -100%);
+}
+.mint-shine:focus::after {
+  transition-duration: 300ms;
+  transform: translate(100%, -100%);
+}
+.mint-shine:active::after, .mint-shine.mint-active::after {
+  transition-duration: 300ms;
+  transform: translate(100%, -100%);
+}
+.mint-shine::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform: translate(-100%, 100%);
+  background: linear-gradient(45deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 100%);
+  transition: transform 200ms ease-in;
+}
+
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+html, body {
+  color: var(--mint-fore);
+  background-color: var(--mint-back);
+  overflow-x: hidden;
+}
+
+html, body, main {
+  width: 100%;
+  min-height: 100vh;
+  margin: 0;
+  padding: 0;
+}
+
+main {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  z-index: 1000;
+}
+
+nav a {
+  display: block;
+  text-decoration: none;
+}
+nav ul {
+  display: flex;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+nav ul > li > ul {
+  flex-direction: column;
+}
+
+a[href^="tel:"], a[href^="mailto:"] {
+  white-space: nowrap;
+}
+
+button {
+  cursor: pointer;
+}
+
+a, button {
+  font-size: inherit;
+}
+
+img {
+  width: 100%;
+}
+
+.mint-pad {
+  padding: 1rem;
+}
+.mint-pad-xs {
+  padding: 0;
+}
+@media (min-width: 480px) {
+  .mint-pad-xs {
+    padding: 1rem;
+  }
+}
+.mint-pad-to-xs {
+  padding: 1rem;
+}
+@media (min-width: 480px) {
+  .mint-pad-to-xs {
+    padding: 0;
+  }
+}
+.mint-pad-sm {
+  padding: 0;
+}
+@media (min-width: 768px) {
+  .mint-pad-sm {
+    padding: 1rem;
+  }
+}
+.mint-pad-to-sm {
+  padding: 1rem;
+}
+@media (min-width: 768px) {
+  .mint-pad-to-sm {
+    padding: 0;
+  }
+}
+.mint-pad-md {
+  padding: 0;
+}
+@media (min-width: 1024px) {
+  .mint-pad-md {
+    padding: 1rem;
+  }
+}
+.mint-pad-to-md {
+  padding: 1rem;
+}
+@media (min-width: 1024px) {
+  .mint-pad-to-md {
+    padding: 0;
+  }
+}
+.mint-pad-lg {
+  padding: 0;
+}
+@media (min-width: 1200px) {
+  .mint-pad-lg {
+    padding: 1rem;
+  }
+}
+.mint-pad-to-lg {
+  padding: 1rem;
+}
+@media (min-width: 1200px) {
+  .mint-pad-to-lg {
+    padding: 0;
+  }
+}
+.mint-pad-xl {
+  padding: 0;
+}
+@media (min-width: 1440px) {
+  .mint-pad-xl {
+    padding: 1rem;
+  }
+}
+.mint-pad-to-xl {
+  padding: 1rem;
+}
+@media (min-width: 1440px) {
+  .mint-pad-to-xl {
+    padding: 0;
+  }
+}
+
+.mint-margin {
+  margin: 1rem;
+}
+.mint-margin-xs {
+  margin: 0;
+}
+@media (min-width: 480px) {
+  .mint-margin-xs {
+    margin: 1rem;
+  }
+}
+.mint-margin-to-xs {
+  margin: 1rem;
+}
+@media (min-width: 480px) {
+  .mint-margin-to-xs {
+    margin: 0;
+  }
+}
+.mint-margin-sm {
+  margin: 0;
+}
+@media (min-width: 768px) {
+  .mint-margin-sm {
+    margin: 1rem;
+  }
+}
+.mint-margin-to-sm {
+  margin: 1rem;
+}
+@media (min-width: 768px) {
+  .mint-margin-to-sm {
+    margin: 0;
+  }
+}
+.mint-margin-md {
+  margin: 0;
+}
+@media (min-width: 1024px) {
+  .mint-margin-md {
+    margin: 1rem;
+  }
+}
+.mint-margin-to-md {
+  margin: 1rem;
+}
+@media (min-width: 1024px) {
+  .mint-margin-to-md {
+    margin: 0;
+  }
+}
+.mint-margin-lg {
+  margin: 0;
+}
+@media (min-width: 1200px) {
+  .mint-margin-lg {
+    margin: 1rem;
+  }
+}
+.mint-margin-to-lg {
+  margin: 1rem;
+}
+@media (min-width: 1200px) {
+  .mint-margin-to-lg {
+    margin: 0;
+  }
+}
+.mint-margin-xl {
+  margin: 0;
+}
+@media (min-width: 1440px) {
+  .mint-margin-xl {
+    margin: 1rem;
+  }
+}
+.mint-margin-to-xl {
+  margin: 1rem;
+}
+@media (min-width: 1440px) {
+  .mint-margin-to-xl {
+    margin: 0;
+  }
+}
+.mint-margin-auto {
+  margin: auto;
+}
+.mint-margin-auto-v {
+  margin: 1rem auto;
+}
+.mint-margin-auto-v1 {
+  margin: 1rem auto;
+}
+.mint-margin-auto-v2 {
+  margin: 2rem auto;
+}
+.mint-margin-auto-v3 {
+  margin: 3rem auto;
+}
+.mint-margin-auto-v4 {
+  margin: 4rem auto;
+}
+.mint-margin-auto-v5 {
+  margin: 5rem auto;
+}
+.mint-margin-auto-v6 {
+  margin: 6rem auto;
+}
+.mint-margin-v {
+  margin: 1rem 0;
+}
+.mint-margin-v1 {
+  margin: 1rem 0;
+}
+.mint-margin-v2 {
+  margin: 2rem 0;
+}
+.mint-margin-v3 {
+  margin: 3rem 0;
+}
+.mint-margin-v4 {
+  margin: 4rem 0;
+}
+.mint-margin-v5 {
+  margin: 5rem 0;
+}
+.mint-margin-v6 {
+  margin: 6rem 0;
+}
+.mint-margin-h {
+  margin: 0 1rem;
+}
+.mint-margin-h1 {
+  margin: 0 1rem;
+}
+.mint-margin-h2 {
+  margin: 0 2rem;
+}
+.mint-margin-h3 {
+  margin: 0 3rem;
+}
+.mint-margin-h4 {
+  margin: 0 4rem;
+}
+.mint-margin-h5 {
+  margin: 0 5rem;
+}
+.mint-margin-h6 {
+  margin: 0 6rem;
+}
+
+section.mint-smaller {
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 480px;
+}
+section.mint-small {
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 768px;
+}
+section.mint-default {
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 1024px;
+}
+section.mint-big {
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 1200px;
+}
+section.mint-bigger {
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 1440px;
+}
+
+.mint-center {
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+
+html, body {
+  font-family: "Palanquin", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-size: 1rem;
+}
+@media (min-width: 1024px) {
+  html, body {
+    font-size: 1.125rem;
+  }
+}
+
+h1, .mint-h1 {
+  font-family: "JosefinSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}
+
+h2, .mint-h2 {
+  font-family: "JosefinSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}
+
+h3, .mint-h3 {
+  font-family: "JosefinSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}
+
+h4, .mint-h4 {
+  font-family: "JosefinSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}
+
+h5, .mint-h5 {
+  font-family: "JosefinSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}
+
+h6, .mint-h6 {
+  font-family: "JosefinSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}
+
+h1, .mint-h1 {
+  margin: 1rem 0;
+  font-size: 2.5rem;
+}
+@media (min-width: 1024px) {
+  h1, .mint-h1 {
+    font-size: 3rem;
+  }
+}
+
+h2, .mint-h2 {
+  margin: 1rem 0;
+  font-size: 2rem;
+}
+@media (min-width: 1024px) {
+  h2, .mint-h2 {
+    font-size: 2.5rem;
+  }
+}
+
+h3, .mint-h3 {
+  margin: 1rem 0;
+  font-size: 1.75rem;
+}
+@media (min-width: 1024px) {
+  h3, .mint-h3 {
+    font-size: 2rem;
+  }
+}
+
+h4, .mint-h4 {
+  margin: 1rem 0;
+  font-size: 1.5rem;
+}
+@media (min-width: 1024px) {
+  h4, .mint-h4 {
+    font-size: 1.75rem;
+  }
+}
+
+h5, .mint-h5 {
+  margin: 1rem 0;
+  font-size: 1.25rem;
+}
+@media (min-width: 1024px) {
+  h5, .mint-h5 {
+    font-size: 1.5rem;
+  }
+}
+
+h6, .mint-h6 {
+  margin: 1rem 0;
+  font-size: 1.125rem;
+}
+@media (min-width: 1024px) {
+  h6, .mint-h6 {
+    font-size: 1.25rem;
+  }
+}
+
+p, .mint-p {
+  margin: 1rem 0;
+  font-size: 1rem;
+}
+@media (min-width: 1024px) {
+  p, .mint-p {
+    font-size: 1.125rem;
+  }
+}
+
+:root {
+  --mint-bitcoin: #FF9900;
+  --mint-ethereum: #3C3C3D;
+  --mint-venmo: #008CFF;
+  --mint-facebook: #3b5998;
+  --mint-youtube: #F00;
+  --mint-itunes: #DDD;
+  --mint-spotify: #84bd00;
+  --mint-amazon-0: #F90;
+  --mint-amazon-1: #146eb4;
+  --mint-napster-0: #2ca6de;
+  --mint-napster-1: #fdb813;
+  --mint-google-play-0: #f55a34;
+  --mint-google-play-1: #ffd119;
+  --mint-google-play-2: #ff8c00;
+  --mint-instagram-0: #8a3ab9;
+  --mint-instagram-1: #4c68d7;
+  --mint-instagram-2: #cd486b;
+  --mint-instagram-3: #fbad50;
+  --mint-instagram-4: #fccc63;
+  --mint-instagram-5: #bc2a8d;
+  --mint-instagram-6: #e95950;
+  --mint-black: #000;
+  --mint-black-0: black;
+  --mint-black-1: #1a1a1a;
+  --mint-black-2: #333333;
+  --mint-black-3: #4d4d4d;
+  --mint-black-4: #666666;
+  --mint-black-5: gray;
+  --mint-black-6: #999999;
+  --mint-white: #fff;
+  --mint-white-0: white;
+  --mint-white-1: #e6e6e6;
+  --mint-white-2: #cccccc;
+  --mint-white-3: #b3b3b3;
+  --mint-white-4: #999999;
+  --mint-white-5: gray;
+  --mint-white-6: #666666;
+  --mint-trans: rgba(0, 0, 0, 0);
+  --mint-trans-0: rgba(0, 0, 0, 0);
+  --mint-trans-1: rgba(0, 0, 0, 0.1);
+  --mint-trans-2: rgba(0, 0, 0, 0.2);
+  --mint-trans-3: rgba(0, 0, 0, 0.3);
+  --mint-trans-4: rgba(0, 0, 0, 0.4);
+  --mint-trans-5: rgba(0, 0, 0, 0.5);
+  --mint-trans-6: rgba(0, 0, 0, 0.6);
+  --mint-brand: #4682b4;
+  --mint-brand-0: #b2cce1;
+  --mint-brand-1: #8db3d3;
+  --mint-brand-2: #699bc4;
+  --mint-brand-3: #4682b4;
+  --mint-brand-4: #38678f;
+  --mint-brand-5: #294d6b;
+  --mint-brand-6: #1b3246;
+  --mint-accent: #483d8b;
+  --mint-accent-0: #9b92cf;
+  --mint-accent-1: #7a6ec0;
+  --mint-accent-2: #5a4dae;
+  --mint-accent-3: #483d8b;
+  --mint-accent-4: #362d68;
+  --mint-accent-5: #231e44;
+  --mint-accent-6: #110e21;
+  --mint-success: #208a20;
+  --mint-success-0: #67dc67;
+  --mint-success-1: #3ed23e;
+  --mint-success-2: #2ab32a;
+  --mint-success-3: #208a20;
+  --mint-success-4: #166116;
+  --mint-success-5: #0d370d;
+  --mint-success-6: #030e03;
+  --mint-danger: #ff4d4d;
+  --mint-danger-0: #ffe6e6;
+  --mint-danger-1: #ffb3b3;
+  --mint-danger-2: #ff8080;
+  --mint-danger-3: #ff4d4d;
+  --mint-danger-4: #ff1a1a;
+  --mint-danger-5: #e60000;
+  --mint-danger-6: #b30000;
+  --mint-warning: #ffaa22;
+  --mint-warning-0: #ffe5bb;
+  --mint-warning-1: #ffd188;
+  --mint-warning-2: #ffbe55;
+  --mint-warning-3: #ffaa22;
+  --mint-warning-4: #ee9200;
+  --mint-warning-5: #bb7300;
+  --mint-warning-6: #885400;
+  --mint-info: #4682b4;
+  --mint-info-0: #b2cce1;
+  --mint-info-1: #8db3d3;
+  --mint-info-2: #699bc4;
+  --mint-info-3: #4682b4;
+  --mint-info-4: #38678f;
+  --mint-info-5: #294d6b;
+  --mint-info-6: #1b3246;
+}
+
+:root {
+  --mint-fore: #1a1a1a;
+  --mint-back: #e6e6e6;
+}
+
+.mint-dark {
+  --mint-fore: #e6e6e6;
+  --mint-back: #1a1a1a;
+  color: var(--mint-fore);
+}
+
+.mint-light {
+  --mint-fore: #1a1a1a;
+  --mint-back: #e6e6e6;
+  color: var(--mint-fore);
+}
+
+a {
+  color: var(--mint-brand);
+}
+a:hover {
+  color: var(--mint-accent-0);
+}
+a:hover .fa-github {
+  color: var(--mint-white-1);
+}
+a:hover .fa-youtube {
+  color: var(--mint-youtube);
+}
+a:hover .fa-instagram {
+  color: var(--mint-instagram-0);
+}
+a:hover .fa-bitcoin {
+  color: var(--mint-bitcoin);
+}
+a:hover .fa-ethereum {
+  color: var(--mint-ethereum);
+}
+a:hover .fa-vimeo {
+  color: var(--mint-venmo);
+}
+a:focus {
+  color: var(--mint-accent-0);
+}
+a:focus .fa-github {
+  color: var(--mint-white-1);
+}
+a:focus .fa-youtube {
+  color: var(--mint-youtube);
+}
+a:focus .fa-instagram {
+  color: var(--mint-instagram-0);
+}
+a:focus .fa-bitcoin {
+  color: var(--mint-bitcoin);
+}
+a:focus .fa-ethereum {
+  color: var(--mint-ethereum);
+}
+a:focus .fa-vimeo {
+  color: var(--mint-venmo);
+}
+a:active, a.mint-active {
+  color: var(--mint-accent-0);
+}
+a:active .fa-github, a.mint-active .fa-github {
+  color: var(--mint-white-1);
+}
+a:active .fa-youtube, a.mint-active .fa-youtube {
+  color: var(--mint-youtube);
+}
+a:active .fa-instagram, a.mint-active .fa-instagram {
+  color: var(--mint-instagram-0);
+}
+a:active .fa-bitcoin, a.mint-active .fa-bitcoin {
+  color: var(--mint-bitcoin);
+}
+a:active .fa-ethereum, a.mint-active .fa-ethereum {
+  color: var(--mint-ethereum);
+}
+a:active .fa-vimeo, a.mint-active .fa-vimeo {
+  color: var(--mint-venmo);
+}
+a i {
+  transition: color 500ms;
+}
+
+/*# sourceMappingURL=mint.css.map*/