@appartmint/mint 2.7.3 → 2.7.5

package/dist/css/mint.css

@@ -163,6 +163,12 @@
   --mint-header-fore: var(--mint-fore);
 }
 
+body.mint-fixed #mint-header {
+  position: fixed;
+  top: 0;
+  left: 0;
+}
+
 #mint-header {
   position: relative;
   width: 100%;
@@ -314,6 +320,10 @@
   justify-content: flex-end;
   height: 100%;
 }
+#mint-header #mint-navbar > :not(.mint-buttons) a {
+  color: var(--mint-header-link-fore);
+  text-decoration: none;
+}
 #mint-header .mint-logo {
   display: flex;
   align-items: center;
@@ -1507,6 +1517,54 @@ p .mint-pill, p .mint-btn, :root:root p [amplify-button], p .mint-select {
   gap: 1rem;
 }
 
+body.mint-ready app-root {
+  opacity: 1;
+}
+
+router-outlet {
+  display: none;
+}
+
+app-root {
+  display: block;
+  position: relative;
+  opacity: 0;
+  transition: opacity 750ms ease-in;
+}
+
+:root main > router-outlet {
+  flex-grow: 0;
+}
+:root main > router-outlet + * {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex-grow: 1;
+  width: 100%;
+  padding: 0.25rem;
+}
+:root main > router-outlet + * {
+  padding: 4px;
+}
+@media (min-width: 480px) {
+  :root main > router-outlet + * {
+    padding: calc(4px + 12 * (100vw - 480px) / 288);
+  }
+}
+@media (min-width: 768px) {
+  :root main > router-outlet + * {
+    padding: 16px;
+  }
+}
+:root main > router-outlet + * + :not(mint-partial-footer) {
+  height: 0;
+  overflow: hidden;
+}
+:root main > router-outlet + mint-partial-footer {
+  transform: translateY(100vh);
+}
+
 @keyframes mint-stretch-in {
   0% {
     transform: scale(1);
@@ -1706,28 +1764,8 @@ body {
   scroll-behavior: smooth;
 }
 
-body.mint-fixed #mint-header {
-  position: fixed;
-  top: 0;
-  left: 0;
-}
 body.mint-fixed main {
-  min-height: 100vh;
-  padding-top: var(--mint-header-height);
-}
-body.mint-ready app-root {
-  opacity: 1;
-}
-
-router-outlet {
-  display: none;
-}
-
-app-root {
-  display: block;
-  position: relative;
-  opacity: 0;
-  transition: opacity 750ms ease-in;
+  margin-top: var(--mint-header-height);
 }
 
 main {
@@ -1736,42 +1774,23 @@ main {
   position: relative;
   width: 100%;
   min-height: calc(100vh - var(--mint-header-height));
+  min-height: calc(100dvh - var(--mint-header-height));
   overflow: hidden;
   z-index: 999;
 }
-main > router-outlet {
-  flex-grow: 0;
-}
-
-:root main > router-outlet + * {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  flex-grow: 1;
-  width: 100%;
-  padding: 0.25rem;
-}
-:root main > router-outlet + * {
+main {
   padding: 4px;
 }
 @media (min-width: 480px) {
-  :root main > router-outlet + * {
+  main {
     padding: calc(4px + 12 * (100vw - 480px) / 288);
   }
 }
 @media (min-width: 768px) {
-  :root main > router-outlet + * {
+  main {
     padding: 16px;
   }
 }
-:root main > router-outlet + * + :not(mint-partial-footer) {
-  height: 0;
-  overflow: hidden;
-}
-:root main > router-outlet + mint-partial-footer {
-  transform: translateY(100vh);
-}
 
 nav a {
   display: block;