%PDF- %PDF-
| Direktori : /home/c/a/s/casasmonvl/newges4t.old/wp-content/themes/ges4t/scss/ |
| Current File : /home/c/a/s/casasmonvl/newges4t.old/wp-content/themes/ges4t/scss/_grid.scss |
// Column width: 94px, Gutter width: 24px
#masthead, #colophon, #full-footer, #primary.homepage-primary .wp-block-columns, .wp-block-columns.use-grid {
margin: 0 24px;
text-align: center;
@media (min-width: $breakpoint-lg) {
text-align: left;
margin: 0 auto;
display:-ms-grid;
display: grid;
-ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-columns: repeat(12, [col-start] 1fr);
column-gap: 24px;
// nested columns
.wp-block-columns {
display: flex;
}
}
@media (min-width: $breakpoint-lg) {
max-width: 960px;
}
@media (min-width: $breakpoint-xl) {
max-width: 1170px;
}
@media (min-width: $breakpoint-xxl) {
max-width: 1392px;
}
}
// default: flex
body.page-template-default {
.wp-block-columns {
display: flex;
.wp-block-column {
flex: 1;
}
}
}
#primary.homepage-primary .wp-block-columns, .wp-block-columns.use-grid {
display:-ms-grid;
display: grid;
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
row-gap: 48px;
@media screen and (min-width: $breakpoint-lg) {
-ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-columns: repeat(12, [col-start] 1fr);
column-gap: 24px;
.wp-block-column:nth-child(odd) {
-ms-grid-column: 2;
-ms-grid-column-span: 4;
grid-column: col-start 2 / span 4;
@media (min-width: $breakpoint-xl) {
-ms-grid-column: 2;
-ms-grid-column-span: 3;
grid-column: col-start 2 / span 3;
}
}
.wp-block-column:nth-child(even) {
-ms-grid-column: 6;
-ms-grid-column-span: 6;
grid-column: col-start 6 / span 6;
}
}
&.layout-alt {
@media screen and (min-width: $breakpoint-lg) {
.wp-block-column:nth-child(odd) {
-ms-grid-column: 2;
-ms-grid-column-span: 3;
grid-column: col-start 2 / span 3;
}
.wp-block-column:nth-child(even) {
-ms-grid-column: 5;
-ms-grid-column-span: 7;
grid-column: col-start 5 / span 7;
}
}
}
&.has-3-columns {
@media screen and (min-width: $breakpoint-lg) {
row-gap: 0;
.wp-block-column:nth-child(3n+1) {
-ms-grid-column: 2;
-ms-grid-column-span: 3;
grid-column: col-start 2 / span 3;
}
.wp-block-column:nth-child(3n+2) {
-ms-grid-column: 5;
-ms-grid-column-span: 4;
grid-column: col-start 5 / span 4;
}
.wp-block-column:nth-child(3n) {
-ms-grid-column: 9;
-ms-grid-column-span: 3;
grid-column: col-start 9 / span 3;
}
}
}
&.cards .wp-block-column, &.card-centered .wp-block-column:nth-child(2) {
max-width: 236px;
background: $white;
color: $gray;
border-radius: 4px;
padding: 40px 24px 10px;
margin: 12px;
flex: 1;
text-align: center;
@media (max-width: 991px) {
margin: 12px auto;
}
[class^="icon-"] {
display: block;
margin: 0 auto 32px;
color: $primary;
background: $white-alt;
border-radius: 50%;
height: 84px;
width: 84px;
line-height: 84px;
text-align: center;
font-size: 26px;
}
}
&.cards .wp-block-column {
@media (min-width: $breakpoint-xl) {
min-height: 310px;
margin: 60px 24px 57px -12px;
}
@media (min-width: $breakpoint-xxl) {
min-height: 324px;
margin: 100px 24px 90px -12px;
}
}
&.card-centered .wp-block-column:nth-child(2) {
@media (min-width: $breakpoint-lg) {
min-height: 324px;
margin: 6px 12px;
}
@media (min-width: $breakpoint-xl) {
margin: 50px 24px 40px -24px;
}
@media (min-width: $breakpoint-xxl) {
margin: 90px 24px 90px -12px;
}
}
&.card-review {
p {
text-align: center;
}
img {
display: block;
border-radius: 50%;
width: 85px;
height: auto;
margin: 0 auto 32px;
}
.wp-block-column:nth-child(2)::after {
content: "";
width: 80px;
height: 20px;
background-image: url('../img/star.svg'), url('../img/star.svg'), url('../img/star.svg'), url('../img/star.svg');
background-repeat: no-repeat;
display: block;
margin: 24px auto;
background-position: 0 0, 20px 0, 40px 0, 60px 0;
}
}
}
.wp-block-columns.cards-with-shadow {
display: flex;
flex-direction: column;
justify-content: center;
background: $white-alt;
color: $gray;
padding: 20px 0 100px;
.wp-block-column {
width: 330px;
background: $white;
margin: 24px;
text-align: center;
padding: 56px;
box-shadow: 16px 12px 24px rgba(37,37,37,0.16);
[class^="icon-"] {
display: block;
margin: 0 auto 32px;
color: $primary;
background: $white-alt;
border-radius: 50%;
height: 84px;
width: 84px;
line-height: 84px;
text-align: center;
font-size: 26px;
}
}
@media (min-width: $breakpoint-lg) {
flex-direction: row;
}
}
.wp-block-columns.fullpage-section {
@media (min-width: $breakpoint-lg) {
min-height: 100vh;
}
.wp-block-column {
padding-top: 0 !important;
display: flex;
justify-content: center;
flex-direction: column;
}
.wp-block-column:nth-child(odd) {
-ms-grid-column: 2;
-ms-grid-column-span: 5;
grid-column: col-start 2 / span 5;
}
.wp-block-column:nth-child(even) {
-ms-grid-column: 7;
-ms-grid-column-span: 5;
grid-column: col-start 7 / span 5;
}
}
.white-centered {
background:$white;
color: $gray;
padding: 90px 0;
overflow: hidden;
h3 {
color: $primary;
}
}
.white-centered-alt {
background: $white-alt;
color: $gray;
padding: 80px 0 0;
overflow: hidden;
text-align: center;
h3 {
color: $primary;
}
}
.pink-centered {
background:$primary;
color: $white;
padding: 90px 0;
overflow: hidden;
}
.wp-block-cover, .white-centered {
width: 100%;
p, h1, h2, h3, h4, h5, h6, strong, div {
margin: 30px auto;
max-width: 86%;
@media (min-width: $breakpoint-lg) {
max-width: 573px;
}
@media (min-width: $breakpoint-xl) {
max-width: 684px;
}
@media (min-width: $breakpoint-xxl) {
max-width: 684px;
}
}
}
.wp-block-cover {
position: relative;
overflow: hidden;
z-index: 0;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
text-align: center;
&.quote {
padding: 60px 20px 80px;
p {
font-size: 24px;
line-height: 30px;
font-weight: 300;
}
.h3 {
font-weight: 500;
}
&::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba($darkblue, 0.72);
z-index: -1;
}
}
}
.wp-block-columns.use-grid.half-width-right {
margin: 20px 0 0;
width: 100%;
max-width: none;
display: flex;
flex-direction: column;
.wp-block-column {
width: 100%;
}
.wp-block-cover {
width: 100%;
height: 100%;
}
@media screen and (min-width: $breakpoint-lg) {
margin: 0;
flex-direction: row;
.wp-block-column:nth-child(odd) {
width: 50%;
padding-top: 96px;
@media (min-width: $breakpoint-lg) {
padding-left: calc(50% - (960px/2) + 82px);
padding-right: 82px;
}
@media (min-width: $breakpoint-xl) {
padding-left: calc(50% - (1170px/2) + 106px);
padding-right: 106px;
}
@media (min-width: $breakpoint-xxl) {
padding-left: calc(50% - (1392px/2) + 118px);
padding-right: 118px;
}
}
.wp-block-column:nth-child(even) {
width: 50%;
overflow: hidden;
-ms-grid-column: 7;
-ms-grid-column-span: 6;
grid-column: col-start 7 / span 6;
}
}
}
body.page-template-default .entry-content,
body.post-template-default #content,
body.search #content {
margin-left: 24px;
margin-right: 24px;
@media (min-width: $breakpoint-lg) {
margin: 0 auto;
max-width: 960px;
}
@media (min-width: $breakpoint-xl) {
max-width: 1170px;
}
@media (min-width: $breakpoint-xxl) {
max-width: 1392px;
}
}
body.post-template-default,
body.search {
#content {
margin-top: 40px;
margin-bottom: 40px;
@media (min-width: $breakpoint-lg) {
display: flex;
#primary {
width: 63%;
margin-right: 9%;
}
#secondary {
width: 28%;
}
}
}
}