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

Compare commits

base: Antoine:9401e3f11052d9d7d587ace4441e9916a6c58770
Branches Tags
Antoine:main
..
compare: Antoine:d1e9d229b091e36ec368cdc47e64c40806325b88
Branches Tags
Antoine:main

3 Commits
9401e3f110 ... d1e9d229b0

Author SHA1 Message Date
Antoine M
d1e9d229b0 refining block reordering and padding chaining
All checks were successful
continuous-integration/drone/push Build is passing
Details
2025-02-06 16:18:44 +01:00
Antoine M
408d669e0c refining block reordering and padding chaining 2025-02-06 16:18:25 +01:00
Antoine M
743abd902b refining styling 2025-02-06 16:18:08 +01:00
3 changed files with 91 additions and 14 deletions
Show Stats Expand all files Collapse all files

71
css/app.css
View File

@ -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;
} }

25
resources/css/blocks/gallery-website-screens.css
View File

@ -1,18 +1,37 @@
.gallery-website-screens { .gallery-website-screens {
@apply bg-neutral-100 p-10 w-screen; @apply bg-neutral-100 p-10 w-screen;
&--padding-simple {
@apply py-10;
}
&--padding-double {
@apply py-16;
}
margin: 0 calc(50% - 50vw); margin: 0 calc(50% - 50vw);
ul {
&__screens-grid {
@apply gap-4 px-0 md:px-4 lg:px-12 justify-center list-none mx-auto; @apply gap-4 px-0 md:px-4 lg:px-12 justify-center list-none mx-auto;
&.is-grid { &.is-grid {
@apply grid grid-cols-2 lg:grid-cols-3; @apply grid grid-cols-2 lg:grid-cols-3;
} }
&.is-flex { &.is-flex {
@apply flex flex-nowrap; @apply flex flex-nowrap;
img {
@apply max-h-96;
}
} }
&.is-mobile-capture { &.is-mobile-capture {
@apply gap-24; @apply md:gap-6 xl:gap-12;
img { img {
@apply rounded-3xl max-w-60; @apply rounded-xl xl:rounded-3xl max-w-60;
}
}
.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 */
object-fit: cover; /* Évite les déformations */
} }
} }

7
resources/css/editor/editor.css
View File

@ -14,3 +14,10 @@
content: none; content: none;
} }
} }
.deligraph-blocks-chapter-section + .gallery-website-screens {
@apply mt-12;
}
.simple-screen--white + .gallery-website-screens {
@apply mt-32;
}