bachir
/
materio-d9
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

responcive: home quite ok

This commit is contained in:
Bachir Soussi Chiadmi 2021-03-25 19:38:15 +01:00
parent 89286d2610
commit 63fdc0061f
4 changed files with 77 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
web/themes/custom/materiotheme/assets/dist/main.css vendored
View File

@ -19643,16 +19643,22 @@ header[role="banner"] {
align-self: flex-end; }
@media (max-width: 654px) {
header[role="banner"] #header-bottom {
flex-direction: column-reverse; }
flex-direction: column-reverse;
justify-content: center; }
header[role="banner"] #header-bottom #block-pagetitle {
width: max-content; } }
header[role="banner"] #block-pagetitle {
padding: 1em 0; }
@media (max-width: 654px) {
body.path-frontpage header[role="banner"] #block-pagetitle, body.path-home header[role="banner"] #block-pagetitle {
display: none; } }
header[role="banner"] #block-pagetitle h2 {
margin: 0;
font-size: 1.512em;
text-transform: capitalize;
font-weight: 300; }
body.path-home header[role="banner"] #block-pagetitle h2 {
display: none; }
body:not(.path-home) header[role="banner"] #block-pagetitle h2 {
padding: 0.5em 1em; }
body.path-blabla header[role="banner"] #block-pagetitle h2,
@ -19740,6 +19746,9 @@ aside.messages {
article.node--type-frontpage .node__content > section.home-intro > div:nth-child(1) .field__label, article.node--type-frontpage .node__content > section.home-pricing > div:nth-child(1) .field__label, article.node--type-frontpage .node__content > section.home-database > div:nth-child(1) .field__label, article.node--type-frontpage .node__content > section.home-showrooms > div:nth-child(1) .field__label, article.node--type-frontpage .node__content > section.home-blabla > div:nth-child(1) .field__label, article.node--type-frontpage .node__content > section.home-pricing > h3, article.node--type-frontpage .node__content > section.home-pricing .field--name-computed-products-reference > .field__item .field--name-title {
font-size: 3.5em;
line-height: 1; }
@media (max-width: 654px) {
article.node--type-frontpage .node__content > section.home-intro > div:nth-child(1) .field__label, article.node--type-frontpage .node__content > section.home-pricing > div:nth-child(1) .field__label, article.node--type-frontpage .node__content > section.home-database > div:nth-child(1) .field__label, article.node--type-frontpage .node__content > section.home-showrooms > div:nth-child(1) .field__label, article.node--type-frontpage .node__content > section.home-blabla > div:nth-child(1) .field__label, article.node--type-frontpage .node__content > section.home-pricing > h3, article.node--type-frontpage .node__content > section.home-pricing .field--name-computed-products-reference > .field__item .field--name-title {
font-size: 2em; } }
article.node--type-frontpage .node__content > section.home-intro > div:nth-child(1) .field__item, article.node--type-frontpage .node__content > section.home-pricing > div:nth-child(1) .field__item, article.node--type-frontpage .node__content > section.home-database > div:nth-child(1) .field__item, article.node--type-frontpage .node__content > section.home-showrooms > div:nth-child(1) .field__item, article.node--type-frontpage .node__content > section.home-blabla > div:nth-child(1) .field__item, article.node--type-frontpage .node__content > section.home-pricing .field--name-computed-products-reference > .field__item .field--name-body {
font-size: 0.9em;
@ -19752,6 +19761,11 @@ article.node--type-frontpage .node__content > section.home-intro, article.node--
width: 80%;
margin: 0 auto;
text-align: center; }
@media (max-width: 654px) {
article.node--type-frontpage .node__content > section.home-intro > div:nth-child(1), article.node--type-frontpage .node__content > section.home-pricing > div:nth-child(1) {
width: auto;
padding: 0 1em;
text-align: left; } }
article.node--type-frontpage .node__content > section.home-database, article.node--type-frontpage .node__content > section.home-showrooms, article.node--type-frontpage .node__content > section.home-blabla {
display: flex;
@ -19766,6 +19780,11 @@ article.node--type-frontpage .node__content > section.home-database, article.nod
flex: 1 1 auto;
box-sizing: border-box;
padding: 1em 0.5em; }
@media (max-width: 654px) {
article.node--type-frontpage .node__content > section.home-database, article.node--type-frontpage .node__content > section.home-showrooms, article.node--type-frontpage .node__content > section.home-blabla {
flex-direction: column; }
article.node--type-frontpage .node__content > section.home-database > div:nth-child(1), article.node--type-frontpage .node__content > section.home-showrooms > div:nth-child(1), article.node--type-frontpage .node__content > section.home-blabla > div:nth-child(1) {
flex: 0 0 auto; } }
article.node--type-frontpage > h2 {
display: none; }
@ -19777,6 +19796,9 @@ article.node--type-frontpage .node__content > section.home-intro .field__item {
article.node--type-frontpage .node__content > section.home-intro .field__item p {
flex: 0 0 410px;
padding: 1em; }
@media (max-width: 654px) {
article.node--type-frontpage .node__content > section.home-intro .field__item {
display: none; } }
article.node--type-frontpage .node__content > section.home-database {
background-color: #69cdcf; }
@ -19942,6 +19964,13 @@ article.node--type-frontpage .node__content > section.home-blabla {
article.node--type-frontpage .node__content > section.home-blabla .cards-list-home ul li .card .field--name-title {
font-size: 0.756em;
line-height: 0.9; }
@media (max-width: 654px) {
article.node--type-frontpage .node__content > section.home-blabla .cards-list-home {
max-height: 386px; }
article.node--type-frontpage .node__content > section.home-blabla .cards-list-home ul {
justify-content: space-around; }
article.node--type-frontpage .node__content > section.home-blabla .cards-list-home ul li {
flex: 0 3 45%; } }
article.node--type-frontpage .node__content > section.home-pricing > h3 {
text-align: center;

58
web/themes/custom/materiotheme/assets/dist/main.js vendored
View File

File diff suppressed because one or more lines are too long

2
web/themes/custom/materiotheme/assets/scripts/main.js
View File

@ -147,7 +147,7 @@ import { MA } from 'vuejs/api/ma-axios'
document.querySelector('body').classList.remove(...classes_to_rm)
// add new path classes to body
const classes = []
if (to.path == '/') {
if (to.name == 'home') {
classes.push('path-home')
} else {
const path_parts = to.path

46
web/themes/custom/materiotheme/assets/styles/main.scss
View File

@ -440,7 +440,7 @@ header[role="banner"]{
}
@include col-mediaquery-max(3){
flex-direction: column-reverse;
// justify-content: flex-start;
justify-content:center;
#block-pagetitle{
width: max-content;
}
@ -453,12 +453,21 @@ header[role="banner"]{
#block-pagetitle{
// float: left;
padding:1em 0;
@include col-mediaquery-max(3){
body.path-frontpage &, body.path-home & {
display: none;
}
}
h2{
margin:0;
font-size: 1.512em;
text-transform: capitalize;
font-weight: 300;
body.path-home & {
display: none;
}
body:not(.path-home) & {
padding:0.5em 1em;
}
@ -637,6 +646,9 @@ article.node--type-frontpage{
%front-col-field__label{
font-size: 3.5em;
line-height: 1;
@include col-mediaquery-max(3){
font-size: 2em;
}
}
%front-col-description{
font-size: 0.9em;
@ -650,6 +662,11 @@ article.node--type-frontpage{
width:80%;
margin: 0 auto;
text-align: center;
@include col-mediaquery-max(3){
width:auto;
padding:0 1em;
text-align: left;
}
.field__label{
@extend %front-col-field__label;
}
@ -700,6 +717,20 @@ article.node--type-frontpage{
box-sizing: border-box;
padding: 1em 0.5em;
}
@include col-mediaquery-max(3){
flex-direction: column;
>div:nth-child(1){
flex: 0 0 auto;
// box-sizing: border-box;
// padding: 1em;
}
>div:nth-child(2){
// flex: 1 1 auto;
// box-sizing: border-box;
// padding: 1em 0.5em;
}
}
}
>h2{
@ -719,6 +750,9 @@ article.node--type-frontpage{
flex: 0 0 $column_width * 2;
padding:1em;
}
@include col-mediaquery-max(3){
display: none;
}
}
}
&.home-database{
@ -952,6 +986,16 @@ article.node--type-frontpage{
}
}
}
@include col-mediaquery-max(3){
max-height: 386px;
ul{
justify-content: space-around;
li{
flex: 0 3 45%;
}
}
}
}
}
&.home-pricing{