@appartmint/mint 0.10.25 → 0.10.27

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.
package/README.md CHANGED
@@ -1,2 +1,3 @@
1
1
  # npm-mint
2
2
  Front-end TS/SCSS framework of App/Art Mint
3
+
package/dist/css/mint.css CHANGED
@@ -314,20 +314,19 @@ p .mint-pill, p .mint-btn {
314
314
  }
315
315
  .mint-card.mint-stagger {
316
316
  position: relative;
317
+ width: calc(100% + 3rem);
317
318
  }
318
319
  @media (min-width: 768px) {
319
320
  .mint-card.mint-stagger {
320
- flex-direction: row-reverse;
321
+ flex-direction: row;
321
322
  border-radius: 0;
322
323
  box-shadow: none;
323
324
  overflow: visible;
324
325
  }
325
326
  .mint-card.mint-stagger > .mint-image, .mint-card.mint-stagger > mint-image .mint-image {
326
- position: absolute;
327
- top: 0;
328
- left: 0;
329
327
  width: 50%;
330
- height: calc(100% - 3rem);
328
+ height: fit-content;
329
+ margin-right: -3rem;
331
330
  border-radius: 1rem;
332
331
  box-shadow: 0 0 2rem -0.5rem var(--mint-glow-2);
333
332
  }
@@ -336,7 +335,8 @@ p .mint-pill, p .mint-btn {
336
335
  object-fit: cover;
337
336
  }
338
337
  .mint-card.mint-stagger > .mint-content {
339
- width: calc(50% + 3rem);
338
+ width: 50%;
339
+ height: fit-content;
340
340
  margin-top: 3rem;
341
341
  border-radius: 1rem;
342
342
  box-shadow: 0 0 2rem -0.5rem var(--mint-glow-2);
@@ -344,13 +344,13 @@ p .mint-pill, p .mint-btn {
344
344
  }
345
345
  @media (min-width: 768px) {
346
346
  .mint-card.mint-stagger.mint-reverse {
347
- flex-direction: row;
348
- }
349
- .mint-card.mint-stagger.mint-reverse > .mint-image, .mint-card.mint-stagger.mint-reverse > mint-image .mint-image {
350
- left: auto;
351
- right: 0;
347
+ flex-direction: row-reverse;
352
348
  }
353
349
  }
350
+ .mint-card.mint-stagger.mint-reverse > .mint-image, .mint-card.mint-stagger.mint-reverse > mint-image .mint-image {
351
+ margin-right: 3rem;
352
+ margin-left: -3rem;
353
+ }
354
354
  .mint-card > .mint-image:only-child, .mint-card > mint-image:only-child .mint-image {
355
355
  width: 100%;
356
356
  }
@@ -465,23 +465,45 @@ p .mint-pill, p .mint-btn {
465
465
 
466
466
  .mint-embed-bg {
467
467
  display: flex;
468
- align-items: center;
468
+ flex-direction: column;
469
+ align-items: flex-end;
469
470
  justify-content: center;
471
+ gap: 2rem;
470
472
  position: relative;
471
- min-height: 100vh;
473
+ }
474
+ @media (min-width: 1200px) {
475
+ .mint-embed-bg {
476
+ flex-direction: row;
477
+ min-height: 100vh;
478
+ margin-bottom: 15%;
479
+ }
480
+ }
481
+ @media (min-width: 1200px) {
482
+ .mint-embed-bg > section {
483
+ margin-bottom: -15%;
484
+ }
472
485
  }
473
486
  .mint-embed-bg iframe, .mint-embed-bg video {
474
- position: absolute;
475
487
  top: 0;
476
488
  left: 0;
477
489
  width: 100%;
478
490
  height: 100%;
479
- border: none;
480
491
  object-fit: cover;
481
492
  pointer-events: none;
482
493
  }
494
+ @media (min-width: 1200px) {
495
+ .mint-embed-bg iframe, .mint-embed-bg video {
496
+ position: absolute;
497
+ }
498
+ }
483
499
  .mint-embed-bg.mint-overflow {
484
500
  overflow: hidden;
501
+ margin-bottom: 0;
502
+ }
503
+ @media (min-width: 1200px) {
504
+ .mint-embed-bg.mint-overflow > section {
505
+ margin-bottom: 0;
506
+ }
485
507
  }
486
508
  .mint-embed-bg.mint-overflow iframe, .mint-embed-bg.mint-overflow video {
487
509
  top: -10%;