Antoine/Deligraph-V3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refining block reordering and padding chaining
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Antoine M 2025-02-06 16:18:44 +01:00
parent 408d669e0c
commit d1e9d229b0
1 changed files with 62 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
css/app.css
View File

@ -104,6 +104,14 @@
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,
.portfolio-single{
margin-left: auto;
@ -437,10 +445,23 @@
--tw-bg-opacity: 1;
background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1));
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);
}
.gallery-website-screens ul{
.gallery-website-screens__screens-grid{
margin-left: auto;
margin-right: auto;
list-style-type: none;
@ -451,45 +472,75 @@
}
@media (min-width: 782px){
.gallery-website-screens ul{
.gallery-website-screens__screens-grid{
padding-left: 1rem;
padding-right: 1rem;
}
}
@media (min-width: 960px){
.gallery-website-screens ul{
.gallery-website-screens__screens-grid{
padding-left: 3rem;
padding-right: 3rem;
}
}
.gallery-website-screens ul.is-grid{
.gallery-website-screens__screens-grid.is-grid{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@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));
}
}
.gallery-website-screens ul.is-flex{
.gallery-website-screens__screens-grid.is-flex{
display: flex;
flex-wrap: nowrap;
}
.gallery-website-screens ul.is-mobile-capture{
gap: 6rem;
.gallery-website-screens__screens-grid.is-flex img{
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;
border-radius: 1.5rem;
border-radius: 0.75rem;
}
.gallery-website-screens ul{
@media (min-width: 1280px){
.gallery-website-screens__screens-grid.is-mobile-capture img{
border-radius: 1.5rem;
}
}
.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;
}