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

STYLE enhance footer layout and responsiveness with updated spacing and image handling

Browse Source
This commit is contained in:
Antoine M 2025-06-03 10:35:40 +02:00
parent 88ab1e63d5
commit 874c85472d
1 changed files with 25 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
resources/css/layout/footer.css
View File

@ -1,7 +1,7 @@
footer { footer {
@apply mx-auto px-12; @apply w-full mx-auto px-12;
.branding { .branding {
@apply w-full mb-12 grid relative pt-64; @apply w-full mb-12 grid relative mt-24 md:mt-32 xl:mt-48;
z-index: -1; z-index: -1;
.square, .square,
.rectangle-rotated { .rectangle-rotated {
@ -17,12 +17,32 @@ footer {
} }
&__shapes { &__shapes {
@apply w-full grid gap-4 grid-cols-4 h-full absolute left-0; @apply w-full max-w-full grid gap-2 md:gap-24 xl:gap-32 2xl:gap-48 grid-cols-4 h-full absolute left-0;
top: 0px; top: 0px;
img { div.shape {
@apply h-64 shrink; @apply shrink flex flex-col w-full h-full;
/* background-color: rgba(219, 234, 254, 0.5); */
top: 0;
flex-shrink: 1; flex-shrink: 1;
aspect-ratio: 1/1;
justify-self: center;
transform-origin: bottom center;
position: relative;
bottom: 0;
}
div.square:first-child,
div.rectangle-rotated {
@apply justify-end;
}
img {
@apply w-full h-fit object-contain;
aspect-ratio: 1/1;
flex-grow: 0;
width: 100%;
}
img:last-child {
@apply object-right;
} }
} }