@appartmint/mint 2.1.2 → 2.1.3

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 (11) hide show
  1. package/dist/css/mint.css +68 -41
  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/_landing.scss +29 -6
  7. package/src/scss/imports/components/_video.scss +10 -47
  8. package/src/scss/imports/global/_global.scss +1 -1
  9. package/src/scss/imports/util/_index.scss +1 -1
  10. package/src/scss/imports/util/_util.scss +38 -9
  11. package/src/scss/imports/util/_vars.scss +4 -0
package/dist/css/mint.css CHANGED
@@ -1099,11 +1099,10 @@ p .mint-pill, p .mint-btn, :root:root p [amplify-button], p .mint-select {
1099
1099
  }
1100
1100
 
1101
1101
  :root .mint-landing.swiper {
1102
- width: 100vw;
1103
1102
  max-width: 100vw;
1104
- }
1105
- :root .mint-landing.swiper {
1106
1103
  top: -4px;
1104
+ width: calc(100% + 8px);
1105
+ left: -4px;
1107
1106
  }
1108
1107
  @media (min-width: 480px) {
1109
1108
  :root .mint-landing.swiper {
@@ -1115,8 +1114,15 @@ p .mint-pill, p .mint-btn, :root:root p [amplify-button], p .mint-select {
1115
1114
  top: -16px;
1116
1115
  }
1117
1116
  }
1118
- :root .mint-landing.swiper {
1119
- left: -4px;
1117
+ @media (min-width: 480px) {
1118
+ :root .mint-landing.swiper {
1119
+ width: calc(100% + 8px + 24 * (100vw - 480px) / 288);
1120
+ }
1121
+ }
1122
+ @media (min-width: 768px) {
1123
+ :root .mint-landing.swiper {
1124
+ width: calc(100% + 32px);
1125
+ }
1120
1126
  }
1121
1127
  @media (min-width: 480px) {
1122
1128
  :root .mint-landing.swiper {
@@ -1131,8 +1137,32 @@ p .mint-pill, p .mint-btn, :root:root p [amplify-button], p .mint-select {
1131
1137
  :root .mint-landing.swiper .swiper-slide {
1132
1138
  padding: 0;
1133
1139
  }
1134
- :root .mint-landing .mint-video-bg {
1140
+
1141
+ .mint-landing .mint-video-bg {
1142
+ align-items: center;
1143
+ top: 0;
1144
+ width: 100%;
1135
1145
  margin: 0;
1146
+ min-height: calc(100vh - var(--mint-header-height));
1147
+ padding: 16px;
1148
+ }
1149
+ @media (min-width: 480px) {
1150
+ .mint-landing .mint-video-bg {
1151
+ padding: calc(16px + 48 * (100vw - 480px) / 288);
1152
+ }
1153
+ }
1154
+ @media (min-width: 768px) {
1155
+ .mint-landing .mint-video-bg {
1156
+ padding: 64px;
1157
+ }
1158
+ }
1159
+ .mint-landing .mint-video-bg iframe, .mint-landing .mint-video-bg video {
1160
+ position: absolute;
1161
+ }
1162
+ @media (min-width: 1200px) {
1163
+ .mint-landing .mint-video-bg iframe + * .mint-grid, .mint-landing .mint-video-bg video + * .mint-grid {
1164
+ margin-bottom: 0;
1165
+ }
1136
1166
  }
1137
1167
 
1138
1168
  .grecaptcha-badge {
@@ -1158,54 +1188,53 @@ p .mint-pill, p .mint-btn, :root:root p [amplify-button], p .mint-select {
1158
1188
  flex-direction: column;
1159
1189
  align-items: flex-end;
1160
1190
  justify-content: center;
1191
+ flex-direction: row;
1192
+ min-height: calc(100vh - var(--mint-header-height) + 10rem);
1161
1193
  gap: 2rem;
1162
1194
  position: relative;
1195
+ top: -4px;
1196
+ width: calc(100% + 8px);
1197
+ padding: 4px;
1163
1198
  }
1164
- @media (min-width: 1200px) {
1199
+ @media (min-width: 480px) {
1165
1200
  .mint-video-bg {
1166
- flex-direction: row;
1167
- min-height: calc(100vh - var(--mint-header-height));
1168
- margin-bottom: 15%;
1201
+ top: calc(-4px + -12 * (100vw - 480px) / 288);
1169
1202
  }
1170
1203
  }
1171
- @media (min-width: 1200px) {
1172
- .mint-video-bg > section {
1173
- margin-bottom: -15%;
1204
+ @media (min-width: 768px) {
1205
+ .mint-video-bg {
1206
+ top: -16px;
1174
1207
  }
1175
1208
  }
1176
- .mint-video-bg iframe, .mint-video-bg video {
1177
- width: 100%;
1178
- height: 100%;
1179
- object-fit: cover;
1180
- pointer-events: none;
1181
- }
1182
- @media (min-width: 1200px) {
1183
- .mint-video-bg iframe, .mint-video-bg video {
1184
- position: absolute;
1185
- width: 100vw;
1186
- border: none;
1187
- padding: 0;
1209
+ @media (min-width: 480px) {
1210
+ .mint-video-bg {
1211
+ width: calc(100% + 8px + 24 * (100vw - 480px) / 288);
1188
1212
  }
1189
1213
  }
1190
- @media (min-width: 1200px) {
1191
- .mint-video-bg iframe + * .mint-grid, .mint-video-bg video + * .mint-grid {
1192
- margin-bottom: -15%;
1214
+ @media (min-width: 768px) {
1215
+ .mint-video-bg {
1216
+ width: calc(100% + 32px);
1193
1217
  }
1194
1218
  }
1195
- .mint-video-bg.mint-overflow {
1196
- overflow: hidden;
1197
- margin-bottom: 0;
1219
+ @media (min-width: 480px) {
1220
+ .mint-video-bg {
1221
+ padding: calc(4px + 12 * (100vw - 480px) / 288);
1222
+ }
1198
1223
  }
1199
- @media (min-width: 1200px) {
1200
- .mint-video-bg.mint-overflow > section {
1201
- margin-bottom: 0;
1224
+ @media (min-width: 768px) {
1225
+ .mint-video-bg {
1226
+ padding: 16px;
1202
1227
  }
1203
1228
  }
1204
- .mint-video-bg.mint-overflow iframe, .mint-video-bg.mint-overflow video {
1205
- top: -10%;
1206
- left: -10%;
1207
- width: 120%;
1208
- height: 120%;
1229
+ .mint-video-bg iframe, .mint-video-bg video, .mint-video-bg .mint-image, .mint-video-bg .mint-embed {
1230
+ position: absolute;
1231
+ top: 0;
1232
+ padding: 0;
1233
+ width: 100%;
1234
+ height: calc(100vh - var(--mint-header-height));
1235
+ border: none;
1236
+ object-fit: cover;
1237
+ pointer-events: none;
1209
1238
  }
1210
1239
 
1211
1240
  @keyframes mint-stretch-in {
@@ -1441,8 +1470,6 @@ main > router-outlet {
1441
1470
  flex-grow: 1;
1442
1471
  width: 100%;
1443
1472
  padding: 0.25rem;
1444
- }
1445
- :root main > router-outlet + * {
1446
1473
  padding: 4px;
1447
1474
  }
1448
1475
  @media (min-width: 480px) {