refining block reordering and padding chaining
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
This commit is contained in:
parent
408d669e0c
commit
d1e9d229b0
71
css/app.css
71
css/app.css
|
|
@ -104,6 +104,14 @@
|
||||||
content: none;
|
content: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.deligraph-blocks-chapter-section + .gallery-website-screens{
|
||||||
|
margin-top: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.simple-screen--white + .gallery-website-screens{
|
||||||
|
margin-top: 8rem;
|
||||||
|
}
|
||||||
|
|
||||||
.wp-admin.post-type-portfolio .is-root-container,
|
.wp-admin.post-type-portfolio .is-root-container,
|
||||||
.portfolio-single{
|
.portfolio-single{
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
|
|
@ -437,10 +445,23 @@
|
||||||
--tw-bg-opacity: 1;
|
--tw-bg-opacity: 1;
|
||||||
background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1));
|
background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1));
|
||||||
padding: 2.5rem;
|
padding: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-website-screens--padding-simple{
|
||||||
|
padding-top: 2.5rem;
|
||||||
|
padding-bottom: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-website-screens--padding-double{
|
||||||
|
padding-top: 4rem;
|
||||||
|
padding-bottom: 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-website-screens{
|
||||||
margin: 0 calc(50% - 50vw);
|
margin: 0 calc(50% - 50vw);
|
||||||
}
|
}
|
||||||
|
|
||||||
.gallery-website-screens ul{
|
.gallery-website-screens__screens-grid{
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
|
|
@ -451,45 +472,75 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 782px){
|
@media (min-width: 782px){
|
||||||
.gallery-website-screens ul{
|
.gallery-website-screens__screens-grid{
|
||||||
padding-left: 1rem;
|
padding-left: 1rem;
|
||||||
padding-right: 1rem;
|
padding-right: 1rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 960px){
|
@media (min-width: 960px){
|
||||||
.gallery-website-screens ul{
|
.gallery-website-screens__screens-grid{
|
||||||
padding-left: 3rem;
|
padding-left: 3rem;
|
||||||
padding-right: 3rem;
|
padding-right: 3rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.gallery-website-screens ul.is-grid{
|
.gallery-website-screens__screens-grid.is-grid{
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 960px){
|
@media (min-width: 960px){
|
||||||
.gallery-website-screens ul.is-grid{
|
.gallery-website-screens__screens-grid.is-grid{
|
||||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.gallery-website-screens ul.is-flex{
|
.gallery-website-screens__screens-grid.is-flex{
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: nowrap;
|
flex-wrap: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gallery-website-screens ul.is-mobile-capture{
|
.gallery-website-screens__screens-grid.is-flex img{
|
||||||
gap: 6rem;
|
max-height: 24rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gallery-website-screens ul.is-mobile-capture img{
|
@media (min-width: 782px){
|
||||||
|
.gallery-website-screens__screens-grid.is-mobile-capture{
|
||||||
|
gap: 1.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1280px){
|
||||||
|
.gallery-website-screens__screens-grid.is-mobile-capture{
|
||||||
|
gap: 3rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-website-screens__screens-grid.is-mobile-capture img{
|
||||||
max-width: 15rem;
|
max-width: 15rem;
|
||||||
|
border-radius: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1280px){
|
||||||
|
.gallery-website-screens__screens-grid.is-mobile-capture img{
|
||||||
border-radius: 1.5rem;
|
border-radius: 1.5rem;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.gallery-website-screens ul{
|
.gallery-website-screens__screens-grid .gallery-website-screens__single-screen img {
|
||||||
|
width: 100%;
|
||||||
|
/* Fixe la largeur max */
|
||||||
|
height: 100%;
|
||||||
|
/* Fixe la hauteur max */
|
||||||
|
max-height: 800px;
|
||||||
|
/* Ajuste selon ton besoin */
|
||||||
|
-o-object-fit: cover;
|
||||||
|
object-fit: cover;
|
||||||
|
/* Évite les déformations */
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-website-screens__screens-grid{
|
||||||
max-width: 1800px;
|
max-width: 1800px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user