@appartmint/mint 4.0.8 → 4.0.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/css/mint.css +67 -71
  2. package/dist/css/mint.css.map +1 -1
  3. package/dist/css/mint.min.css +1 -1
  4. package/dist/css/mint.min.css.map +1 -1
  5. package/package.json +1 -1
  6. package/src/scss/imports/components/section/_grid.scss +64 -44
  7. package/src/scss/imports/util/_vars.scss +1 -1
package/dist/css/mint.css CHANGED
@@ -57,7 +57,7 @@
57
57
  .mint-footer {
58
58
  display: flex;
59
59
  flex-direction: column;
60
- margin: 0 clamp(-0.25rem, -1vw, -2rem);
60
+ margin: 0 clamp(-2rem, -1vw, -0.25rem);
61
61
  background: var(--mint-back);
62
62
  transition: transform 300ms;
63
63
  z-index: 999;
@@ -701,8 +701,8 @@ body.mint-fixed #mint-header {
701
701
  flex-direction: row;
702
702
  gap: 2rem;
703
703
  position: relative;
704
- top: clamp(-0.25rem, -1vw, -2rem);
705
- left: clamp(-0.25rem, -1vw, -2rem);
704
+ top: clamp(-2rem, -1vw, -0.25rem);
705
+ left: clamp(-2rem, -1vw, -0.25rem);
706
706
  width: clamp(100% + 0.5rem, 100% + 2vw, 100% + 4rem);
707
707
  min-height: calc(100vh - var(--mint-header-height) + 10rem);
708
708
  padding: clamp(0.25rem, 1vw, 2rem);
@@ -731,18 +731,12 @@ body.mint-fixed #mint-header {
731
731
  margin-top: 2rem;
732
732
  margin-bottom: 2rem;
733
733
  }
734
- .mint-grid.mint-1 > * {
735
- grid-column: span 1 !important;
736
- }
737
734
  @media (min-width: 768px) {
738
735
  .mint-grid.mint-2 {
739
- grid-template-columns: repeat(12, 1fr);
740
- }
741
- .mint-grid.mint-2 > * {
742
- grid-column: span 6;
736
+ grid-template-columns: repeat(2, 1fr);
743
737
  }
744
- .mint-grid.mint-2 > :last-child:nth-child(odd) {
745
- grid-column: span 12;
738
+ .mint-grid.mint-2 > :last-child:nth-child(odd) .mint-card {
739
+ grid-column: span 2;
746
740
  width: 50%;
747
741
  margin-left: auto;
748
742
  margin-right: auto;
@@ -750,13 +744,10 @@ body.mint-fixed #mint-header {
750
744
  }
751
745
  @media (min-width: 768px) {
752
746
  .mint-grid.mint-3 {
753
- grid-template-columns: repeat(12, 1fr);
747
+ grid-template-columns: repeat(2, 1fr);
754
748
  }
755
- .mint-grid.mint-3 > * {
756
- grid-column: span 6;
757
- }
758
- .mint-grid.mint-3 > :last-child:nth-child(odd) {
759
- grid-column: span 12;
749
+ .mint-grid.mint-3 > :last-child:nth-child(odd) .mint-card {
750
+ grid-column: span 2;
760
751
  width: 50%;
761
752
  margin-left: auto;
762
753
  margin-right: auto;
@@ -764,34 +755,28 @@ body.mint-fixed #mint-header {
764
755
  }
765
756
  @media (min-width: 1200px) {
766
757
  .mint-grid.mint-3 {
767
- grid-template-columns: repeat(12, 1fr);
768
- }
769
- .mint-grid.mint-3 > * {
770
- grid-column: span 4;
758
+ grid-template-columns: repeat(3, 1fr);
771
759
  }
772
- .mint-grid.mint-3 > :last-child:nth-child(odd) {
773
- grid-column: span 4;
760
+ .mint-grid.mint-3 > :last-child:nth-child(odd) .mint-card {
761
+ grid-column: span 1;
774
762
  width: 100%;
775
763
  }
776
- .mint-grid.mint-3 > :last-child:nth-child(3n+1) {
777
- grid-column: 4/span 6;
764
+ .mint-grid.mint-3 > :last-child:nth-child(3n+1) .mint-card {
765
+ grid-column: 2;
778
766
  }
779
- .mint-grid.mint-3 > :last-child:nth-child(3n+2) {
780
- grid-column: 7/span 6;
767
+ .mint-grid.mint-3 > :last-child:nth-child(3n+2) .mint-card {
768
+ grid-column: 3;
781
769
  }
782
- .mint-grid.mint-3 > :nth-last-child(2):nth-child(3n+1) {
783
- grid-column: 1/span 6;
770
+ .mint-grid.mint-3 > :nth-last-child(2):nth-child(3n+1) .mint-card {
771
+ grid-column: 1;
784
772
  }
785
773
  }
786
774
  @media (min-width: 768px) {
787
775
  .mint-grid.mint-4 {
788
- grid-template-columns: repeat(12, 1fr);
776
+ grid-template-columns: repeat(2, 1fr);
789
777
  }
790
- .mint-grid.mint-4 > * {
791
- grid-column: span 6;
792
- }
793
- .mint-grid.mint-4 > :last-child:nth-child(odd) {
794
- grid-column: span 12;
778
+ .mint-grid.mint-4 > :last-child:nth-child(odd) .mint-card {
779
+ grid-column: span 2;
795
780
  width: 50%;
796
781
  margin-left: auto;
797
782
  margin-right: auto;
@@ -799,61 +784,72 @@ body.mint-fixed #mint-header {
799
784
  }
800
785
  @media (min-width: 1200px) {
801
786
  .mint-grid.mint-4 {
802
- grid-template-columns: repeat(12, 1fr);
803
- }
804
- .mint-grid.mint-4 > * {
805
- grid-column: span 4;
787
+ grid-template-columns: repeat(3, 1fr);
806
788
  }
807
- .mint-grid.mint-4 > :last-child:nth-child(odd) {
808
- grid-column: span 4;
789
+ .mint-grid.mint-4 > :last-child:nth-child(odd) .mint-card {
790
+ grid-column: span 1;
809
791
  width: 100%;
810
792
  }
811
- .mint-grid.mint-4 > :last-child:nth-child(3n+1) {
812
- grid-column: 4/span 6;
793
+ .mint-grid.mint-4 > :last-child:nth-child(3n+1) .mint-card {
794
+ grid-column: 2;
813
795
  }
814
- .mint-grid.mint-4 > :last-child:nth-child(3n+2) {
815
- grid-column: 7/span 6;
796
+ .mint-grid.mint-4 > :last-child:nth-child(3n+2) .mint-card {
797
+ grid-column: 3;
816
798
  }
817
- .mint-grid.mint-4 > :nth-last-child(2):nth-child(3n+1) {
818
- grid-column: 1/span 6;
799
+ .mint-grid.mint-4 > :nth-last-child(2):nth-child(3n+1) .mint-card {
800
+ grid-column: 1;
819
801
  }
820
802
  }
821
803
  @media (min-width: 1440px) {
822
804
  .mint-grid.mint-4 {
823
- grid-template-columns: repeat(12, 1fr);
805
+ grid-template-columns: repeat(4, 1fr);
824
806
  }
825
- .mint-grid.mint-4 > * {
826
- grid-column: span 3;
827
- }
828
- .mint-grid.mint-4 > :last-child:nth-child(odd), .mint-grid.mint-4 > :last-child:nth-child(3n+1), .mint-grid.mint-4 > :last-child:nth-child(3n+2), .mint-grid.mint-4 > :nth-last-child(2):nth-child(3n+1) {
829
- grid-column: span 3;
807
+ .mint-grid.mint-4 > :last-child:nth-child(odd) .mint-card, .mint-grid.mint-4 > :last-child:nth-child(3n+1) .mint-card, .mint-grid.mint-4 > :last-child:nth-child(3n+2) .mint-card, .mint-grid.mint-4 > :nth-last-child(2):nth-child(3n+1) .mint-card {
808
+ grid-column: span 1;
830
809
  width: 100%;
831
810
  }
832
- .mint-grid.mint-4 > :last-child:nth-child(4n+1) {
833
- grid-column: 4/span 6;
811
+ .mint-grid.mint-4 > :last-child:nth-child(4n+1) .mint-card {
812
+ grid-column: 2/span 2;
813
+ width: 50%;
814
+ margin-left: auto;
815
+ margin-right: auto;
834
816
  }
835
- .mint-grid.mint-4 > :last-child:nth-child(4n+2) {
836
- grid-column: 7/span 6;
817
+ .mint-grid.mint-4 > :last-child:nth-child(4n+2) .mint-card {
818
+ grid-column: 3/span 2;
819
+ width: 50%;
820
+ margin-left: auto;
821
+ margin-right: auto;
837
822
  }
838
- .mint-grid.mint-4 > :nth-last-child(2):nth-child(4n+1) {
839
- grid-column: 1/span 6;
823
+ .mint-grid.mint-4 > :nth-last-child(2):nth-child(4n+1) .mint-card {
824
+ grid-column: 1/span 2;
825
+ width: 50%;
826
+ margin-left: auto;
827
+ margin-right: auto;
840
828
  }
841
- .mint-grid.mint-4 > :last-child:nth-child(4n+3) {
842
- grid-column: 9/span 4;
829
+ .mint-grid.mint-4 > :last-child:nth-child(4n+3) .mint-card {
830
+ grid-column: 4;
843
831
  }
844
- .mint-grid.mint-4 > :nth-last-child(2):nth-child(4n+2) {
845
- grid-column: 5/span 4;
832
+ .mint-grid.mint-4 > :nth-last-child(2):nth-child(4n+2) .mint-card {
833
+ grid-column: 2/span 2;
834
+ width: 50%;
835
+ margin-left: auto;
836
+ margin-right: auto;
846
837
  }
847
- .mint-grid.mint-4 > :nth-last-child(3):nth-child(4n+1) {
848
- grid-column: 1/span 4;
838
+ .mint-grid.mint-4 > :nth-last-child(3):nth-child(4n+1) .mint-card {
839
+ grid-column: 1;
849
840
  }
850
841
  }
851
- .mint-grid .mint-portrait, .mint-grid > :has(.mint-portrait) {
842
+ .mint-grid .mint-portrait {
852
843
  grid-row: span 2;
853
844
  }
854
845
  @media (min-width: 768px) {
855
- .mint-grid .mint-landscape, .mint-grid > :has(.mint-landscape) {
856
- grid-column: span 12;
846
+ .mint-grid .mint-landscape {
847
+ grid-column: span 2;
848
+ }
849
+ }
850
+ @media (min-width: 1200px) {
851
+ .mint-grid .mint-landscape {
852
+ grid-column: span 3;
857
853
  }
858
854
  }
859
855
 
@@ -865,8 +861,8 @@ body.mint-fixed #mint-header {
865
861
  }
866
862
 
867
863
  .mint-landing {
868
- top: clamp(-0.25rem, -1vw, -2rem);
869
- left: clamp(-0.25rem, -1vw, -2rem);
864
+ top: clamp(-2rem, -1vw, -0.25rem);
865
+ left: clamp(-2rem, -1vw, -0.25rem);
870
866
  width: clamp(100% + 0.5rem, 100% + 2vw, 100% + 4rem);
871
867
  }
872
868
  .mint-landing .mint-border, .mint-landing .mint-frame {