@appartmint/mint 0.10.2 → 0.10.3

package/dist/css/mint.css

@@ -10,6 +10,16 @@
   z-index: -1;
 }
 
+.mint-btn,
+.mint-pill,
+.mint-btn-icon {
+  text-decoration: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  transition: color var(--mint-delay-default), background-color var(--mint-delay-default), border-color var(--mint-delay-default);
+}
+
 .mint-btn,
 .mint-pill {
   display: inline-block;
@@ -18,11 +28,6 @@
   background: var(--mint-brand-5);
   border: 0.125rem solid var(--mint-brand-3);
   text-align: center;
-  text-decoration: none;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-  transition: color var(--mint-delay-default), background-color var(--mint-delay-default), border-color var(--mint-delay-default);
 }
 @media (min-width: 480px) {
   .mint-btn,
@@ -74,6 +79,32 @@
 .mint-btn {
   padding: 0.5rem 1.75rem;
 }
+.mint-btn-icon {
+  display: block;
+  text-align: center;
+}
+.mint-btn-icon:hover i {
+  color: var(--mint-accent-2);
+}
+.mint-btn-icon:focus i {
+  color: var(--mint-accent-2);
+}
+.mint-btn-icon:active i, .mint-btn-icon.mint-active i {
+  color: var(--mint-accent-2);
+}
+@media (min-width: 480px) {
+  .mint-btn-icon {
+    display: inline-block;
+  }
+}
+.mint-btn-icon i {
+  margin: 0 !important;
+  color: var(--mint-brand-3);
+  font-size: 4rem;
+}
+.mint-btn-icon i::before {
+  transition: color var(--mint-delay-default);
+}
 
 .mint-pill {
   min-width: 5rem;
@@ -213,6 +244,9 @@ p .mint-pill {
   display: flex;
   align-items: center;
   justify-content: flex-start;
+  height: fit-content;
+}
+.mint-card .mint-title:only-child {
   height: 100%;
 }
 .mint-card .mint-title > .mint-image, .mint-card .mint-title > mint-image {
@@ -447,8 +481,8 @@ app-footer::before {
   left: 0;
   width: 100%;
   padding: 0 0.5rem 0.5rem 0.5rem;
-  background: rgba(0, 0, 0, 0.4);
-  box-shadow: 0 0 0.5rem 0.5rem rgba(0, 0, 0, 0.4);
+  background: var(--mint-glow-2);
+  box-shadow: 0 0 0.5rem 0.5rem var(--mint-glow-2);
   text-align: center;
 }
 .mint-image img {
@@ -955,32 +989,38 @@ p {
   line-height: 1.75;
 }
 
-h1, .mint-h1 {
+h1,
+.mint-h1 {
   font-family: serif, -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";
   line-height: 1;
 }
 
-h2, .mint-h2 {
+h2,
+.mint-h2 {
   font-family: serif, -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";
   line-height: 1;
 }
 
-h3, .mint-h3 {
+h3,
+.mint-h3 {
   font-family: serif, -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";
   line-height: 1;
 }
 
-h4, .mint-h4 {
+h4,
+.mint-h4 {
   font-family: serif, -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";
   line-height: 1;
 }
 
-h5, .mint-h5 {
+h5,
+.mint-h5 {
   font-family: serif, -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";
   line-height: 1;
 }
 
-h6, .mint-h6 {
+h6,
+.mint-h6 {
   font-family: serif, -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";
   line-height: 1;
 }
@@ -1060,9 +1100,12 @@ p, .mint-p {
   --mint-ethereum: #3C3C3D;
   --mint-venmo: #008CFF;
   --mint-facebook: #3b5998;
+  --mint-twitter: #1da1f2;
   --mint-youtube: #F00;
-  --mint-itunes: #DDD;
+  --mint-apple: #DDD;
   --mint-spotify: #84bd00;
+  --mint-soundcloud: #f26f23;
+  --mint-bandcamp: #629aa9;
   --mint-amazon-0: #F90;
   --mint-amazon-1: #146eb4;
   --mint-napster-0: #2ca6de;
@@ -1179,17 +1222,56 @@ p, .mint-p {
 a {
   color: var(--mint-brand);
 }
+a .fa-instagram {
+  position: relative;
+}
+a .fa-instagram::after {
+  content: "\f16d";
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  transition: opacity var(--mint-delay-default);
+  color: var(--mint-instagram-0);
+}
+@supports (-webkit-background-clip: text) and (-webkit-text-fill-color: transparent) {
+  a .fa-instagram::after {
+    background: var(--mint-instagram-0);
+    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+}
 a:hover {
   color: var(--mint-accent-0);
 }
-a:hover .fa-github {
-  color: var(--mint-white-1);
+a:hover .fa-facebook, a:hover .fa-square-facebook {
+  color: var(--mint-facebook);
+}
+a:hover .fa-instagram::after {
+  opacity: 1;
+}
+a:hover .fa-twitter {
+  color: var(--mint-twitter);
 }
 a:hover .fa-youtube {
   color: var(--mint-youtube);
 }
-a:hover .fa-instagram {
-  color: var(--mint-instagram-0);
+a:hover .fa-spotify {
+  color: var(--mint-spotify);
+}
+a:hover .fa-apple {
+  color: var(--mint-apple);
+}
+a:hover .fa-soundcloud {
+  color: var(--mint-soundcloud);
+}
+a:hover .fa-bandcamp {
+  color: var(--mint-bandcamp);
+}
+a:hover .fa-github {
+  color: var(--mint-white-1);
 }
 a:hover .fa-bitcoin {
   color: var(--mint-bitcoin);
@@ -1203,14 +1285,32 @@ a:hover .fa-vimeo {
 a:focus {
   color: var(--mint-accent-0);
 }
-a:focus .fa-github {
-  color: var(--mint-white-1);
+a:focus .fa-facebook, a:focus .fa-square-facebook {
+  color: var(--mint-facebook);
+}
+a:focus .fa-instagram::after {
+  opacity: 1;
+}
+a:focus .fa-twitter {
+  color: var(--mint-twitter);
 }
 a:focus .fa-youtube {
   color: var(--mint-youtube);
 }
-a:focus .fa-instagram {
-  color: var(--mint-instagram-0);
+a:focus .fa-spotify {
+  color: var(--mint-spotify);
+}
+a:focus .fa-apple {
+  color: var(--mint-apple);
+}
+a:focus .fa-soundcloud {
+  color: var(--mint-soundcloud);
+}
+a:focus .fa-bandcamp {
+  color: var(--mint-bandcamp);
+}
+a:focus .fa-github {
+  color: var(--mint-white-1);
 }
 a:focus .fa-bitcoin {
   color: var(--mint-bitcoin);
@@ -1224,14 +1324,32 @@ a:focus .fa-vimeo {
 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-facebook, a:active .fa-square-facebook, a.mint-active .fa-facebook, a.mint-active .fa-square-facebook {
+  color: var(--mint-facebook);
+}
+a:active .fa-instagram::after, a.mint-active .fa-instagram::after {
+  opacity: 1;
+}
+a:active .fa-twitter, a.mint-active .fa-twitter {
+  color: var(--mint-twitter);
 }
 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-spotify, a.mint-active .fa-spotify {
+  color: var(--mint-spotify);
+}
+a:active .fa-apple, a.mint-active .fa-apple {
+  color: var(--mint-apple);
+}
+a:active .fa-soundcloud, a.mint-active .fa-soundcloud {
+  color: var(--mint-soundcloud);
+}
+a:active .fa-bandcamp, a.mint-active .fa-bandcamp {
+  color: var(--mint-bandcamp);
+}
+a:active .fa-github, a.mint-active .fa-github {
+  color: var(--mint-white-1);
 }
 a:active .fa-bitcoin, a.mint-active .fa-bitcoin {
   color: var(--mint-bitcoin);