Merge pull request #485 from mirceanton/feature-482-mobile-classes-for-gallery

 Mobile classes for gallery and carousel
This commit is contained in:
Nuno Coração 2023-02-03 20:53:17 +00:00 committed by GitHub
commit 46d97160d5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 164 additions and 1 deletions

View file

@ -6186,6 +6186,8 @@ body:has(#menu-controller:checked) {
text-underline-offset: 4px; text-underline-offset: 4px;
} }
/* Gallery Specific Styles */
.grid-w10 { .grid-w10 {
width: calc(10% - 5px); width: calc(10% - 5px);
margin: 0px !important; margin: 0px !important;
@ -6291,6 +6293,115 @@ body:has(#menu-controller:checked) {
margin: 0px !important; margin: 0px !important;
} }
@media (min-width: 853px) {
.grid-w10 {
width: calc(10% - 5px);
margin: 0px !important;
}
.grid-w15 {
width: calc(15% - 5px);
margin: 0px !important;
}
.grid-w20 {
width: calc(20% - 5px);
margin: 0px !important;
}
.grid-w25 {
width: calc(25% - 5px);
margin: 0px !important;
}
.grid-w30 {
width: calc(30% - 5px);
margin: 0px !important;
}
.grid-w33 {
width: calc(33% - 5px);
margin: 0px !important;
}
.grid-w35 {
width: calc(35% - 5px);
margin: 0px !important;
}
.grid-w40 {
width: calc(40% - 5px);
margin: 0px !important;
}
.grid-w45 {
width: calc(45% - 5px);
margin: 0px !important;
}
.grid-w50 {
width: calc(50% - 5px);
margin: 0px !important;
}
.grid-w55 {
width: calc(55% - 5px);
margin: 0px !important;
}
.grid-w60 {
width: calc(60% - 5px);
margin: 0px !important;
}
.grid-w65 {
width: calc(65% - 5px);
margin: 0px !important;
}
.grid-w66 {
width: calc(66% - 5px);
margin: 0px !important;
}
.grid-w70 {
width: calc(70% - 5px);
margin: 0px !important;
}
.grid-w75 {
width: calc(75% - 5px);
margin: 0px !important;
}
.grid-w80 {
width: calc(80% - 5px);
margin: 0px !important;
}
.grid-w85 {
width: calc(85% - 5px);
margin: 0px !important;
}
.grid-w90 {
width: calc(90% - 5px);
margin: 0px !important;
}
.grid-w95 {
width: calc(95% - 5px);
margin: 0px !important;
}
.grid-w100 {
width: calc(100% - 5px);
margin: 0px !important;
}
}
/* Carousel Specific Styles */
.ratio-16-9 { .ratio-16-9 {
padding-top: 56.25%; padding-top: 56.25%;
} }
@ -6309,6 +6420,26 @@ body:has(#menu-controller:checked) {
/* 32:9 Aspect Ratio */ /* 32:9 Aspect Ratio */
@media (min-width: 853px) {
.ratio-16-9 {
padding-top: 56.25%;
}
/* 16:9 Aspect Ratio */
.ratio-21-9 {
padding-top: 42.85%;
}
/* 21:9 Aspect Ratio */
.ratio-32-9 {
padding-top: 28.125%;
}
/* 32:9 Aspect Ratio */
}
.first\:mt-8:first-child { .first\:mt-8:first-child {
margin-top: 2rem; margin-top: 2rem;
} }

View file

@ -448,6 +448,7 @@ body:has(#menu-controller:checked) {
text-underline-offset: 4px; text-underline-offset: 4px;
} }
/* Gallery Specific Styles */
.grid-w10 { width: calc(10% - 5px); margin: 0px !important; } .grid-w10 { width: calc(10% - 5px); margin: 0px !important; }
.grid-w15 { width: calc(15% - 5px); margin: 0px !important; } .grid-w15 { width: calc(15% - 5px); margin: 0px !important; }
.grid-w20 { width: calc(20% - 5px); margin: 0px !important; } .grid-w20 { width: calc(20% - 5px); margin: 0px !important; }
@ -470,6 +471,37 @@ body:has(#menu-controller:checked) {
.grid-w95 { width: calc(95% - 5px); margin: 0px !important; } .grid-w95 { width: calc(95% - 5px); margin: 0px !important; }
.grid-w100 { width: calc(100% - 5px); margin: 0px !important; } .grid-w100 { width: calc(100% - 5px); margin: 0px !important; }
@screen md {
.grid-w10 { width: calc(10% - 5px); margin: 0px !important; }
.grid-w15 { width: calc(15% - 5px); margin: 0px !important; }
.grid-w20 { width: calc(20% - 5px); margin: 0px !important; }
.grid-w25 { width: calc(25% - 5px); margin: 0px !important; }
.grid-w30 { width: calc(30% - 5px); margin: 0px !important; }
.grid-w33 { width: calc(33% - 5px); margin: 0px !important; }
.grid-w35 { width: calc(35% - 5px); margin: 0px !important; }
.grid-w40 { width: calc(40% - 5px); margin: 0px !important; }
.grid-w45 { width: calc(45% - 5px); margin: 0px !important; }
.grid-w50 { width: calc(50% - 5px); margin: 0px !important; }
.grid-w55 { width: calc(55% - 5px); margin: 0px !important; }
.grid-w60 { width: calc(60% - 5px); margin: 0px !important; }
.grid-w65 { width: calc(65% - 5px); margin: 0px !important; }
.grid-w66 { width: calc(66% - 5px); margin: 0px !important; }
.grid-w70 { width: calc(70% - 5px); margin: 0px !important; }
.grid-w75 { width: calc(75% - 5px); margin: 0px !important; }
.grid-w80 { width: calc(80% - 5px); margin: 0px !important; }
.grid-w85 { width: calc(85% - 5px); margin: 0px !important; }
.grid-w90 { width: calc(90% - 5px); margin: 0px !important; }
.grid-w95 { width: calc(95% - 5px); margin: 0px !important; }
.grid-w100 { width: calc(100% - 5px); margin: 0px !important; }
}
/* Carousel Specific Styles */
.ratio-16-9 { padding-top: 56.25%; } /* 16:9 Aspect Ratio */ .ratio-16-9 { padding-top: 56.25%; } /* 16:9 Aspect Ratio */
.ratio-21-9 { padding-top: 42.85%; } /* 21:9 Aspect Ratio */ .ratio-21-9 { padding-top: 42.85%; } /* 21:9 Aspect Ratio */
.ratio-32-9 { padding-top: 28.125%; } /* 32:9 Aspect Ratio */ .ratio-32-9 { padding-top: 28.125%; } /* 32:9 Aspect Ratio */
@screen md {
.ratio-16-9 { padding-top: 56.25%; } /* 16:9 Aspect Ratio */
.ratio-21-9 { padding-top: 42.85%; } /* 21:9 Aspect Ratio */
.ratio-32-9 { padding-top: 28.125%; } /* 32:9 Aspect Ratio */
}