🧑‍💻 Improve Flex components for content layout

This commit is contained in:
Manuel Cillero 2024-03-16 08:18:47 +01:00
parent 00eb831b43
commit 544b56af07
6 changed files with 219 additions and 178 deletions

View file

@ -73,36 +73,24 @@ a:active {
/* LAYOUT */
.body__wrapper {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
#header,
#pagetop,
.content__wrapper,
#footer {
width: 100%;
#body__wrapper > .flex__item {
max-width: var(--val-max-width);
background: var(--val-color--white);
}
#header > .region__content /*,
#pagetop > .region__content */ {
#header > .flex__content {
margin: var(--val-gap);
}
#footer {
#body__wrapper > #footer {
max-width: 100%;
background: linear-gradient(180deg, var(--val-color--gray-5) 0%, var(--val-color--gray-10) 100%);
}
#footer > .region__content {
width: 100%;
#footer > .flex__content {
max-width: var(--val-max-width);
margin: 0 auto;
color: var(--val-color--gray-65);
background: var(--val-color--gray-20);
padding: calc(3 * var(--val-gap)) 0 calc(12 * var(--val-gap));
}
#footer > .region__content a {
#footer > .flex__content a {
color: var(--val-color--white);
}