@appartmint/mint 2.7.9 → 2.8.0

package/dist/css/mint.css

@@ -329,6 +329,8 @@ body.mint-fixed #mint-header {
   align-items: center;
   gap: 1rem;
   width: auto;
+  height: var(--mint-header-height);
+  padding: 0.25rem;
   text-decoration: none;
   white-space: nowrap;
 }
@@ -342,8 +344,8 @@ body.mint-fixed #mint-header {
   }
 }
 #mint-header .mint-logo img {
-  max-height: var(--mint-header-height);
   width: auto;
+  height: 100%;
 }
 #mint-header [aria-controls=mint-wrapper] {
   display: inline-block;
@@ -631,61 +633,13 @@ body.mint-fixed #mint-header {
   align-items: flex-end;
   justify-content: center;
   flex-direction: row;
-  min-height: calc(100vh - var(--mint-header-height) + 10rem);
   gap: 2rem;
   position: relative;
-}
-.mint-section-full {
-  top: -4px;
-}
-@media (min-width: 480px) {
-  .mint-section-full {
-    top: calc(-4px + -12 * (100vw - 480px) / 288);
-  }
-}
-@media (min-width: 768px) {
-  .mint-section-full {
-    top: -16px;
-  }
-}
-.mint-section-full {
-  left: -4px;
-}
-@media (min-width: 480px) {
-  .mint-section-full {
-    left: calc(-4px + -12 * (100vw - 480px) / 288);
-  }
-}
-@media (min-width: 768px) {
-  .mint-section-full {
-    left: -16px;
-  }
-}
-.mint-section-full {
-  width: calc(100% + 8px);
-}
-@media (min-width: 480px) {
-  .mint-section-full {
-    width: calc(100% + 8px + 24 * (100vw - 480px) / 288);
-  }
-}
-@media (min-width: 768px) {
-  .mint-section-full {
-    width: calc(100% + 32px);
-  }
-}
-.mint-section-full {
-  padding: 4px;
-}
-@media (min-width: 480px) {
-  .mint-section-full {
-    padding: calc(4px + 12 * (100vw - 480px) / 288);
-  }
-}
-@media (min-width: 768px) {
-  .mint-section-full {
-    padding: 16px;
-  }
+  top: clamp(-0.25rem, -1vw, -2rem);
+  left: clamp(-0.25rem, -1vw, -2rem);
+  width: clamp(100% + 0.5rem, 100% + 2vw, 100% + 4rem);
+  min-height: calc(100vh - var(--mint-header-height) + 10rem);
+  padding: clamp(0.25rem, 1vw, 2rem);
 }
 .mint-section-full iframe, .mint-section-full video, .mint-section-full .mint-image, .mint-section-full .mint-embed {
   position: absolute;
@@ -711,43 +665,9 @@ body.mint-fixed #mint-header {
 }
 
 .mint-landing {
-  top: -4px;
-}
-@media (min-width: 480px) {
-  .mint-landing {
-    top: calc(-4px + -12 * (100vw - 480px) / 288);
-  }
-}
-@media (min-width: 768px) {
-  .mint-landing {
-    top: -16px;
-  }
-}
-.mint-landing {
-  left: -4px;
-}
-@media (min-width: 480px) {
-  .mint-landing {
-    left: calc(-4px + -12 * (100vw - 480px) / 288);
-  }
-}
-@media (min-width: 768px) {
-  .mint-landing {
-    left: -16px;
-  }
-}
-.mint-landing {
-  width: calc(100% + 8px);
-}
-@media (min-width: 480px) {
-  .mint-landing {
-    width: calc(100% + 8px + 24 * (100vw - 480px) / 288);
-  }
-}
-@media (min-width: 768px) {
-  .mint-landing {
-    width: calc(100% + 32px);
-  }
+  top: clamp(-0.25rem, -1vw, -2rem);
+  left: clamp(-0.25rem, -1vw, -2rem);
+  width: clamp(100% + 0.5rem, 100% + 2vw, 100% + 4rem);
 }
 .mint-landing .mint-border, .mint-landing .mint-frame {
   border: none;
@@ -760,19 +680,7 @@ body.mint-fixed #mint-header {
   width: 100%;
   margin: 0;
   min-height: calc(100vh - var(--mint-header-height));
-}
-.mint-landing .mint-section-full {
-  padding: 16px;
-}
-@media (min-width: 480px) {
-  .mint-landing .mint-section-full {
-    padding: calc(16px + 48 * (100vw - 480px) / 288);
-  }
-}
-@media (min-width: 768px) {
-  .mint-landing .mint-section-full {
-    padding: 64px;
-  }
+  padding: clamp(0.25rem, 1vw, 2rem);
 }
 .mint-landing .mint-section-full iframe, .mint-landing .mint-section-full video {
   position: absolute;
@@ -1542,20 +1450,7 @@ app-root {
   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;
-  }
+  padding: clamp(0.25rem, 1vw, 2rem);
 }
 :root main > router-outlet + * + :not(mint-partial-footer) {
   height: 0;
@@ -1777,22 +1672,11 @@ main {
   width: 100%;
   min-height: calc(100vh - var(--mint-header-height));
   min-height: calc(100dvh - var(--mint-header-height));
+  padding-left: clamp(0.25rem, 1vw, 2rem);
+  padding-right: clamp(0.25rem, 1vw, 2rem);
   overflow: hidden;
   z-index: 999;
 }
-main {
-  padding: 4px;
-}
-@media (min-width: 480px) {
-  main {
-    padding: calc(4px + 12 * (100vw - 480px) / 288);
-  }
-}
-@media (min-width: 768px) {
-  main {
-    padding: 16px;
-  }
-}
 
 nav a {
   display: block;