@appartmint/mint 0.9.1 → 0.9.6

package/dist/css/mint.css

@@ -108,7 +108,8 @@ p .mint-pill {
 .mint-card {
   display: flex;
   flex-direction: column;
-  margin: 3rem 0;
+  height: 100%;
+  margin: 0;
   border-radius: 1rem;
   box-shadow: 0 0 2rem -0.5rem var(--mint-glow-2);
   overflow: hidden;
@@ -171,63 +172,72 @@ p .mint-pill {
     width: 50%;
   }
 }
-.mint-card .mint-content {
-  padding: 1.5rem;
-  background: var(--mint-black-2);
-}
 @media (min-width: 768px) {
-  .mint-card .mint-content {
+  .mint-card > .mint-image + .mint-content, .mint-card > mint-image .mint-image + .mint-content {
     width: 50%;
   }
 }
+.mint-card .mint-content {
+  padding: 1.5rem;
+  background: var(--mint-black-2);
+  width: 100%;
+}
 .mint-card .mint-content :first-child {
   margin-top: 0;
 }
 .mint-card .mint-content :last-child {
   margin-bottom: 0;
 }
-.mint-card .mint-content .mint-title {
+.mint-card .mint-title {
   display: flex;
   align-items: center;
   justify-content: flex-start;
+  height: 100%;
 }
-.mint-card .mint-content .mint-title > .mint-image, .mint-card .mint-content .mint-title > mint-image {
+.mint-card .mint-title > .mint-image, .mint-card .mint-title > mint-image {
   width: 100%;
   height: 100%;
   max-width: 4rem;
   max-height: 4rem;
-  margin-right: 1rem;
+  margin-right: 1.5rem;
 }
-.mint-card .mint-content .mint-title > .mint-image img, .mint-card .mint-content .mint-title > mint-image img {
+.mint-card .mint-title > .mint-image img, .mint-card .mint-title > mint-image img {
   display: block;
   width: 100%;
   height: 100%;
 }
-.mint-card .mint-content .mint-title div {
+.mint-card .mint-title i {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 4rem;
+  max-width: 4rem;
+  margin-right: 1.5rem;
+  font-size: 3rem;
+}
+.mint-card .mint-title > div {
   width: 100%;
 }
-.mint-card .mint-content .mint-title div > * {
+.mint-card .mint-title > div > * {
   margin: 0;
 }
 
-: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;
+app-footer {
+  display: flex;
+  flex-direction: column;
+}
+app-footer::before {
+  content: "";
+  display: flex;
+  flex-grow: 1;
+  height: 100%;
+  background: css-var(trans);
 }
 
-.mint-sr-only {
-  position: absolute !important;
-  width: 1px !important;
-  height: 1px !important;
-  padding: 0 !important;
-  margin: -1px !important;
-  overflow: hidden !important;
-  clip: rect(0, 0, 0, 0) !important;
-  border: 0 !important;
+:root {
+  --mint-header-height: 4rem;
+  --mint-header-bg: var(--mint-brand-4);
+  --mint-header-fg: var(--mint-back);
 }
 
 #mint-header {
@@ -235,15 +245,15 @@ p .mint-pill {
   flex-direction: column;
   position: relative;
   width: 100%;
-  color: var(--mint-fg);
+  color: var(--mint-header-fg);
   background-color: var(--mint-header-bg);
-  z-index: 1000;
+  z-index: 10000;
 }
 #mint-header.mint-js {
   align-items: center;
   flex-direction: row;
-  height: var(--mint-height);
-  padding: calc((var(--mint-height) - var(--mint-btn-height)) / 2);
+  height: var(--mint-header-height);
+  padding: calc(var(--mint-header-height) / 2);
 }
 #mint-header.mint-js [aria-controls=mint-wrapper] {
   display: inline-block;
@@ -270,7 +280,7 @@ p .mint-pill {
   overflow: auto;
 }
 #mint-header.mint-right #mint-wrapper {
-  top: var(--mint-height);
+  top: var(--mint-header-height);
   right: -100%;
   left: unset;
 }
@@ -285,7 +295,7 @@ p .mint-pill {
   bottom: 0;
 }
 #mint-header.mint-left #mint-wrapper {
-  top: var(--mint-height);
+  top: var(--mint-header-height);
   left: -100%;
 }
 #mint-header.mint-left #mint-wrapper.mint-open {
@@ -297,7 +307,7 @@ p .mint-pill {
   top: 0;
   left: 0;
   width: 100%;
-  height: var(--mint-height);
+  height: var(--mint-header-height);
   background: var(--mint-header-bg);
   z-index: -1;
 }
@@ -314,15 +324,26 @@ p .mint-pill {
 #mint-header a, #mint-header button {
   display: flex;
   align-items: center;
-  padding: calc((var(--mint-height) - var(--mint-btn-height)) / 2);
+  width: 100%;
+  margin: 0;
+  border: 0;
+  color: var(--mint-header-fg);
+  background: var(--mint-trans);
+}
+#mint-header h1 {
+  display: flex;
+  white-space: nowrap;
+  margin: 0;
+}
+#mint-header .mint-logo {
+  text-decoration: none;
+}
+#mint-header .mint-logo img {
+  max-width: var(--mint-header-height);
 }
 #mint-header [aria-controls=mint-wrapper] {
   display: none;
 }
-#mint-header #mint-logo {
-  margin: calc((var(--mint-height) - var(--mint-btn-height)) / 2);
-  padding: 0;
-}
 #mint-header #mint-wrapper {
   display: flex;
   flex-direction: column;
@@ -330,18 +351,18 @@ p .mint-pill {
   top: -100%;
   left: 0;
   width: 100%;
-  height: calc(100vh - var(--mint-height));
+  height: calc(100vh - var(--mint-header-height));
   transition: none;
   z-index: -2;
 }
 #mint-header #mint-wrapper.mint-open {
-  top: var(--mint-height);
+  top: var(--mint-header-height);
 }
 #mint-header #mint-widgets {
   position: absolute;
   top: 0;
   right: 0;
-  height: var(--mint-height);
+  height: var(--mint-header-height);
 }
 #mint-header .mint-dropdown {
   background: var(--mint-header-bg);
@@ -350,12 +371,12 @@ p .mint-pill {
   display: flex;
   align-items: center;
   justify-content: center;
-  min-width: var(--mint-height);
-  height: var(--mint-height);
-  padding: calc((var(--mint-height) - var(--mint-btn-height)) / 2);
+  min-width: var(--mint-header-height);
+  height: var(--mint-header-height);
+  padding: calc(var(--mint-header-height) / 2);
 }
 #mint-header .mint-dropdown li {
-  padding: calc((var(--mint-height) - var(--mint-btn-height)) / 2);
+  padding: calc(var(--mint-header-height) / 2);
   line-height: 1;
   cursor: pointer;
 }
@@ -461,10 +482,6 @@ 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;
@@ -474,8 +491,21 @@ main {
   display: flex;
   flex-direction: column;
   position: relative;
+  width: 100%;
+  min-height: calc(100vh - var(--mint-header-height));
   z-index: 1000;
 }
+main > router-outlet + * {
+  width: 100%;
+  flex-grow: 1;
+}
+main router-outlet {
+  flex-grow: 0;
+}
+
+app-root {
+  display: block;
+}
 
 nav a {
   display: block;
@@ -518,6 +548,23 @@ img {
   box-shadow: none !important;
 }
 
+.mint-sr-only {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  border: 0 !important;
+}
+
+.mint-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
 .mint-pad {
   padding: 1rem;
 }
@@ -794,8 +841,45 @@ section.mint-bigger {
   text-align: center;
 }
 
+.mint-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 2rem;
+  margin: 2rem 0;
+}
+@media (min-width: 768px) {
+  .mint-grid.mint-2 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media (min-width: 768px) {
+  .mint-grid.mint-3 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media (min-width: 1200px) {
+  .mint-grid.mint-3 {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+@media (min-width: 768px) {
+  .mint-grid.mint-4 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media (min-width: 1200px) {
+  .mint-grid.mint-4 {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+@media (min-width: 1440px) {
+  .mint-grid.mint-4 {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
 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-family: sans-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";
   font-size: 1rem;
 }
 @media (min-width: 1024px) {
@@ -809,32 +893,32 @@ p {
 }
 
 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";
+  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 {
-  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";
+  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 {
-  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";
+  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 {
-  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";
+  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 {
-  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";
+  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 {
-  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";
+  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;
 }
 
@@ -962,14 +1046,14 @@ p, .mint-p {
   --mint-shadow-4: rgba(0, 0, 0, 0.4);
   --mint-shadow-5: rgba(0, 0, 0, 0.5);
   --mint-shadow-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-brand: #bada55;
+  --mint-brand-0: #edf5d3;
+  --mint-brand-1: #dceca9;
+  --mint-brand-2: #cbe37f;
+  --mint-brand-3: #bada55;
+  --mint-brand-4: #a8cf2d;
+  --mint-brand-5: #86a524;
+  --mint-brand-6: #647b1b;
   --mint-accent: #483d8b;
   --mint-accent-0: #9b92cf;
   --mint-accent-1: #7a6ec0;
@@ -1002,14 +1086,14 @@ p, .mint-p {
   --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;
+  --mint-info: #bada55;
+  --mint-info-0: #edf5d3;
+  --mint-info-1: #dceca9;
+  --mint-info-2: #cbe37f;
+  --mint-info-3: #bada55;
+  --mint-info-4: #a8cf2d;
+  --mint-info-5: #86a524;
+  --mint-info-6: #647b1b;
 }
 
 :root {
@@ -1095,8 +1179,5 @@ a:active .fa-ethereum, a.mint-active .fa-ethereum {
 a:active .fa-vimeo, a.mint-active .fa-vimeo {
   color: var(--mint-venmo);
 }
-a i {
-  transition: color 500ms;
-}
 
 /*# sourceMappingURL=mint.css.map*/