🚧 Review content layout with flex components
This commit is contained in:
parent
e8364a40ee
commit
dfbe807a61
11 changed files with 353 additions and 441 deletions
|
|
@ -84,10 +84,11 @@
|
|||
|
||||
.flex__item {
|
||||
padding: 0 !important;
|
||||
}
|
||||
.flex__item.flex__full {
|
||||
width: 100%;
|
||||
}
|
||||
[class*="flex__justify-"] .flex__item {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.flex__item-grow-1 {
|
||||
flex-grow: 1;
|
||||
|
|
@ -116,6 +117,9 @@
|
|||
.flex__item-grow-9 {
|
||||
flex-grow: 9;
|
||||
}
|
||||
[class*="flex__item-grow-"] {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.flex__item-shrink-1 {
|
||||
flex-shrink: 1;
|
||||
|
|
@ -144,54 +148,56 @@
|
|||
.flex__item-shrink-9 {
|
||||
flex-shrink: 9;
|
||||
}
|
||||
[class*="flex__item-shrink-"] {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.flex__item-width-10 {
|
||||
.flex__item-size-10 {
|
||||
flex: 0 0 10%;
|
||||
max-width: 10%;
|
||||
}
|
||||
.flex__item-width-20 {
|
||||
.flex__item-size-20 {
|
||||
flex: 0 0 20%;
|
||||
max-width: 20%;
|
||||
}
|
||||
.flex__item-width-25 {
|
||||
.flex__item-size-25 {
|
||||
flex: 0 0 25%;
|
||||
max-width: 25%;
|
||||
}
|
||||
.flex__item-width-33 {
|
||||
.flex__item-size-33 {
|
||||
flex: 0 0 33.3333%;
|
||||
max-width: 33.3333%;
|
||||
}
|
||||
.flex__item-width-40 {
|
||||
.flex__item-size-40 {
|
||||
flex: 0 0 40%;
|
||||
max-width: 40%;
|
||||
}
|
||||
.flex__item-width-50 {
|
||||
.flex__item-size-50 {
|
||||
flex: 0 0 60%;
|
||||
max-width: 50%;
|
||||
}
|
||||
.flex__item-width-60 {
|
||||
.flex__item-size-60 {
|
||||
flex: 0 0 60%;
|
||||
max-width: 60%;
|
||||
}
|
||||
.flex__item-width-66 {
|
||||
.flex__item-size-66 {
|
||||
flex: 0 0 66.6666%;
|
||||
max-width: 66.6666%;
|
||||
}
|
||||
.flex__item-width-75 {
|
||||
.flex__item-size-75 {
|
||||
flex: 0 0 75%;
|
||||
max-width: 75%;
|
||||
}
|
||||
.flex__item-width-80 {
|
||||
.flex__item-size-80 {
|
||||
flex: 0 0 80%;
|
||||
max-width: 80%;
|
||||
}
|
||||
.flex__item-width-90 {
|
||||
.flex__item-size-90 {
|
||||
flex: 0 0 90%;
|
||||
max-width: 90%;
|
||||
}
|
||||
.flex__item-fullwidth {
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
[class*="flex__item-size-"] {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.flex__item-offset-10 {
|
||||
|
|
@ -367,7 +373,7 @@
|
|||
}
|
||||
}
|
||||
/* X2K - Applies <= 2560px */
|
||||
@media screen and (max-width: 120rem) {
|
||||
@media screen and (max-width: 160rem) {
|
||||
.flex__row.bp__x2k {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -243,7 +243,7 @@
|
|||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.menu__nav .menu__header .menu__close {
|
||||
font-size: 2.25rem;
|
||||
|
|
|
|||
|
|
@ -3,43 +3,37 @@
|
|||
color: inherit;
|
||||
}
|
||||
|
||||
#welcome .hello-world,
|
||||
#welcome .welcome,
|
||||
#welcome .pagetop,
|
||||
#welcome .issues {
|
||||
padding: 1.6rem 5%;
|
||||
}
|
||||
#welcome .promo {
|
||||
padding: 0 5% 2rem;
|
||||
}
|
||||
#welcome .issues {
|
||||
padding-top: 0;
|
||||
margin: 3.2rem auto;
|
||||
}
|
||||
|
||||
#welcome [class$="-col-text"] > .flex__content {
|
||||
margin: 5% 5% 0;
|
||||
margin: 5%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#welcome [class$="-col-image"] > .flex__content {
|
||||
margin: 1rem 5%;
|
||||
}
|
||||
|
||||
#welcome .welcome {
|
||||
text-align: center;
|
||||
margin: 0 5%;
|
||||
}
|
||||
#welcome .welcome > .wrapper__content {
|
||||
padding: 2rem 1rem;
|
||||
#welcome .welcome > .flex__item {
|
||||
border-radius: 28px;
|
||||
background: url("/base/images/welcome.jpg") center center no-repeat;
|
||||
background-size: auto;
|
||||
background-size: cover;
|
||||
color: #fff;
|
||||
}
|
||||
#welcome .welcome > .wrapper__content > h2 {
|
||||
#welcome .welcome > .flex__item > .flex__content {
|
||||
margin: 2rem 1rem;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
}
|
||||
#welcome .welcome > .wrapper__content > h3 {
|
||||
#welcome .welcome > .flex__item > .flex__content > h2 {
|
||||
color: #fff;
|
||||
}
|
||||
#welcome .welcome > .flex__item > .flex__content > h3 {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
|
|
@ -53,39 +47,34 @@
|
|||
|
||||
/* BREAKPOINTS */
|
||||
|
||||
/* MD - Applies >= 768px */
|
||||
@media screen and (min-width: 48rem) {
|
||||
/* MD - Applies > 768px */
|
||||
@media screen and (min-width: 48.0625rem) {
|
||||
#welcome .hello-world {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
#welcome .promo-col-image > .flex__content {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#welcome .issues {
|
||||
padding-top: 1.6rem;
|
||||
}
|
||||
#welcome .issues-col-text > .flex__content {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
/* LG - Applies >= 992px */
|
||||
@media screen and (min-width: 62rem) {
|
||||
/* LG - Applies > 992px */
|
||||
@media screen and (min-width: 62.0625rem) {
|
||||
#welcome .hello-col-text > .flex__content {
|
||||
margin-top: 2rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#welcome .promo {
|
||||
padding: 0 15% 2rem;
|
||||
}
|
||||
|
||||
#welcome .promo-col-text > .flex__content {
|
||||
margin-right: 0;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
/* XL - Applies >= 1280px */
|
||||
@media screen and (min-width: 80rem) {
|
||||
/* XL - Applies > 1280px */
|
||||
@media screen and (min-width: 80.0625rem) {
|
||||
#welcome .hello-col-text > .flex__content {
|
||||
margin-top: 4rem;
|
||||
margin-left: 20%;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue