🚧 [minimal] Replace grid system by flexbox

This commit is contained in:
Manuel Cillero 2023-09-21 19:01:19 +02:00
parent 4b9b36ed6e
commit 156429beb0
13 changed files with 962 additions and 466 deletions

View file

@ -33,6 +33,9 @@ body.default-homepage [class$="-col-image"] {
display: inline-block;
vertical-align: middle;
}
#hello-world .hello-col-image {
padding-top: 3em;
}
#welcome > div.container {
padding: 2rem 1rem;
@ -53,25 +56,21 @@ body.default-homepage [class$="-col-image"] {
border-radius: 40px;
}
/* Responsiveness */
@media (min-width: 768px) {
/* BREAKPOINTS */
/* MD - Applies <= 768px */
@media screen and (min-width: 48em) {
body.default-homepage [class$="-col-image"] {
padding-top: 5%;
}
#hello-world .hello-col-text {
#reporting .reporting-col-text {
padding-left: 1rem;
padding-right: 1rem;
}
#hello-world .hello-col-image {
padding-top: 3rem;
text-align: left;
}
}
@media (min-width: 992px) {
body.default-homepage [class$="-col-image"] {
padding-top: 1rem;
}
/* LG - Applies >= 1024px */
@media screen and (min-width: 64em) {
#hello-world .hello-col-text {
padding-top: 2rem;
padding-left: 10%;
@ -86,18 +85,25 @@ body.default-homepage [class$="-col-image"] {
padding: 2rem 8rem;
}
#pagetop .pagetop-col-text {
padding-left: 2rem;
text-align: left;
}
#promo .promo-col-text {
padding-top: 1rem;
padding-right: 0;
text-align: right;
}
}
/* XL - Applies >= 1280px */
@media screen and (min-width: 80em) {
body.default-homepage [class$="-col-image"] {
padding-top: 1rem;
}
#reporting .reporting-col-text {
padding-left: 1rem;
#hello-world .hello-col-text {
padding-top: 4rem;
}
#pagetop .pagetop-col-text {
padding-top: 3rem;
padding-left: 3rem;
text-align: left;
}
}