@appartmint/mint 0.12.7 → 0.12.9

package/dist/css/mint.css

@@ -562,11 +562,6 @@ app-footer::before {
   z-index: 10000;
   height: var(--mint-header-height);
 }
-#mint-header.mint-fixed {
-  position: fixed;
-  top: 0;
-  left: 0;
-}
 #mint-header.mint-right #mint-wrapper {
   top: var(--mint-header-height);
   right: -100%;
@@ -609,20 +604,34 @@ app-footer::before {
   margin-bottom: 1rem;
   padding-left: 0;
 }
-#mint-header a, #mint-header button {
-  display: flex;
-  align-items: center;
+#mint-header a,
+#mint-header button {
   width: 100%;
   margin: 0;
   border: 0;
-  color: var(--mint-header-fg);
+  color: var(--mint-fore);
   background: var(--mint-trans);
 }
+#mint-header a:hover,
+#mint-header button:hover {
+  color: var(--mint-back);
+}
+#mint-header a:focus,
+#mint-header button:focus {
+  color: var(--mint-back);
+}
 #mint-header h1 {
   display: flex;
   white-space: nowrap;
   margin: 0;
 }
+#mint-header #mint-navbar {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex-direction: row;
+  height: 100%;
+}
 #mint-header .mint-logo {
   text-decoration: none;
   width: auto;
@@ -680,6 +689,7 @@ app-footer::before {
   left: 0;
   width: 100%;
   height: calc(100vh - var(--mint-header-height));
+  height: calc(100dvh - var(--mint-header-height));
   z-index: -2;
   background: var(--mint-header-bg);
   transition-duration: var(--mint-delay-default);
@@ -695,9 +705,40 @@ app-footer::before {
   overflow: auto;
   background-repeat: repeat;
 }
-#mint-header #mint-wrapper a, #mint-header #mint-wrapper button {
+#mint-header #mint-wrapper nav > :last-child {
+  margin-bottom: 0;
+}
+#mint-header #mint-wrapper a,
+#mint-header #mint-wrapper button {
   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" !important;
-  font-size: 4em;
+  font-size: 3em;
+  padding: 0.5rem;
+  text-align: center;
+}
+@media (min-width: 480px) {
+  #mint-header #mint-wrapper a,
+  #mint-header #mint-wrapper button {
+    font-size: 4em;
+  }
+}
+#mint-header #mint-wrapper a:hover,
+#mint-header #mint-wrapper button:hover {
+  background-color: var(--mint-shadow-5);
+}
+#mint-header #mint-wrapper a:focus,
+#mint-header #mint-wrapper button:focus {
+  background-color: var(--mint-shadow-5);
+}
+#mint-header #mint-wrapper a:active, #mint-header #mint-wrapper a.mint-active,
+#mint-header #mint-wrapper button:active,
+#mint-header #mint-wrapper button.mint-active {
+  text-decoration: underline;
+}
+#mint-header #mint-wrapper ul li:last-child {
+  margin-bottom: 0;
+}
+#mint-header #mint-wrapper ul li:last-child ul {
+  margin-bottom: 0;
 }
 #mint-header #mint-widgets {
   position: absolute;
@@ -732,13 +773,6 @@ app-footer::before {
   margin: 0;
 }
 
-#mint-navbar {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  flex-direction: row;
-}
-
 .mint-image.mint-error::after {
   content: "❌ Image failed to load. This is a placeholder.";
   position: absolute;
@@ -859,7 +893,8 @@ app-footer::before {
   box-sizing: border-box;
 }
 
-html, body {
+html,
+body {
   color: var(--mint-fore);
   background-color: var(--mint-back);
   overflow-x: hidden;
@@ -869,11 +904,22 @@ html, body {
   word-break: break-word;
 }
 @media (min-width: 480px) {
-  html, body {
+  html,
+  body {
     word-break: initial;
   }
 }
 
+body.mint-fixed #mint-header {
+  position: fixed;
+  top: 0;
+  left: 0;
+}
+body.mint-fixed main {
+  min-height: 100vh;
+  padding-top: var(--mint-header-height);
+}
+
 main {
   display: flex;
   flex-direction: column;
@@ -920,15 +966,18 @@ a i:last-child {
   margin-left: 0.25rem;
 }
 
-button, a[routerLink] {
+button,
+a[routerLink] {
   cursor: pointer;
 }
 
-a, button {
+a,
+button {
   font-size: inherit;
 }
 
-img, video {
+img,
+video {
   width: 100%;
   height: auto;
 }
@@ -2313,7 +2362,8 @@ p, .mint-p {
 
 a {
   color: var(--mint-brand-4);
-  transition: color var(--mint-delay-default);
+  transition-duration: var(--mint-delay-default);
+  transition-property: color, background-color;
 }
 a .fa-instagram {
   position: relative;
@@ -2340,7 +2390,8 @@ a .fa-instagram::after {
 a:hover {
   color: var(--mint-accent-2);
 }
-a:hover .fa-facebook, a:hover .fa-square-facebook {
+a:hover .fa-facebook,
+a:hover .fa-square-facebook {
   color: var(--mint-facebook);
 }
 a:hover .fa-instagram::after {
@@ -2379,7 +2430,8 @@ a:hover .fa-vimeo {
 a:focus {
   color: var(--mint-accent-2);
 }
-a:focus .fa-facebook, a:focus .fa-square-facebook {
+a:focus .fa-facebook,
+a:focus .fa-square-facebook {
   color: var(--mint-facebook);
 }
 a:focus .fa-instagram::after {
@@ -2418,7 +2470,9 @@ a:focus .fa-vimeo {
 a:active, a.mint-active {
   color: var(--mint-accent-2);
 }
-a:active .fa-facebook, a:active .fa-square-facebook, a.mint-active .fa-facebook, a.mint-active .fa-square-facebook {
+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 {