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

going on with home display

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2019-07-16 10:29:30 +02:00
parent cb3eb2c2fa
commit 68a7084deb
8 changed files with 358 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -249,31 +249,62 @@ aside.messages{
// }
// front
// __ _
// / _|_ _ ___ _ _| |_
// | _| '_/ _ \ ' \ _|
// |_| |_| \___/_||_\__|
%part-centered-layout{
padding:1.5em 0;
background-color: #fff;
>div:nth-child(1){
width:80%;
margin: 0 auto;
text-align: center;
.field__label{
font-size: 3em;
}
.field__item{
font-size: 0.9em;
line-height: 1.3;
}
}
}
%part-columned-layout{
display:grid;
grid-template-columns: 300px 1fr;
grid-column-gap: 2em;
padding:2em 1em;
>div:nth-child(1){
color: #fff;
grid-column: 1;
.field__label{
font-size: 3em;
line-height: 0.9
}
.field__item{
font-size: 0.9em;
line-height: 1.3;
}
}
>div:nth-child(2){
grid-column: 2;
}
}
article.node--type-frontpage{
.node__content{
&>section{
padding:1em;
&.home-intro{
padding:0;
background-color: #fff;
@extend %part-centered-layout;
}
&.home-database{
background-color: #69cdcf;
display:grid;
// $c: 300px;
// grid-template-columns: $c calc(100% - #{$c});
grid-template-columns: 300px 1fr;
grid-column-gap: 1em;
// grid-template-rows: min-content;
color: #fff;
.field--name-field-a-database{
grid-column: 1;
// outline: 1px solid green;
}
@extend %part-columned-layout;
.field--name-field-a-database{}
.cards-list-home{
grid-column: 2;
position: relative;
// max-height: (130px*1.4)*3;
max-height: 580px;
@ -282,11 +313,10 @@ article.node--type-frontpage{
width:100%;
margin:0; padding:0;
display: grid;
justify-content: center;
grid-template-columns: repeat(auto-fill, minmax(50px, 130px));
grid-template-rows: 1fr;
grid-gap: 1em;
// justify-content:start;
justify-content:start;
li{
position: relative;
list-style: none;
@ -309,22 +339,51 @@ article.node--type-frontpage{
}
&.home-showrooms{
background-color: #50aa3c;
display:grid;
// $c: 300px;
// grid-template-columns: $c calc(100% - #{$c});
grid-template-columns: 300px 1fr;
grid-column-gap: 1em;
@extend %part-columned-layout;
.field--name-field-showrooms{
grid-column: 1;
}
.field--name-computed-showrooms-reference{
grid-column: 2;
}
}
&.home-blabla{
background-color: #9458aa;
@extend %part-columned-layout;
.cards-list-home{
position: relative;
// max-height: 580px;
// overflow-y: hidden;
ul{
width:100%;
margin:0; padding:0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(80px, 220px));
// grid-template-rows: 1fr;
grid-gap: 1em;
justify-content:start;
li{
position: relative;
list-style: none;
margin:0; padding:0;
padding-top: 140%;
overflow: hidden;
.card{
position:absolute;
top:0; bottom:0;
left:0; right:0;
width: auto;
height: auto;
.field--name-title{
font-size: 0.756em;
line-height: 0.9;
}
}
}
}
}
}
&.home-pricing{
@extend %part-centered-layout;
}
}