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

started home styling

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2019-07-15 18:44:03 +02:00
parent d84750ef8f
commit cb3eb2c2fa
19 changed files with 1067 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1245,6 +1245,62 @@ header[role="banner"] {
aside.messages {
padding: 0; }
article.node--type-frontpage .node__content > section {
padding: 1em; }
article.node--type-frontpage .node__content > section.home-intro {
padding: 0;
background-color: #fff; }
article.node--type-frontpage .node__content > section.home-database {
background-color: #69cdcf;
display: grid;
grid-template-columns: 300px 1fr;
grid-column-gap: 1em;
color: #fff; }
article.node--type-frontpage .node__content > section.home-database .field--name-field-a-database {
grid-column: 1; }
article.node--type-frontpage .node__content > section.home-database .cards-list-home {
grid-column: 2;
position: relative;
max-height: 580px;
overflow-y: hidden; }
article.node--type-frontpage .node__content > section.home-database .cards-list-home ul {
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; }
article.node--type-frontpage .node__content > section.home-database .cards-list-home ul li {
position: relative;
list-style: none;
margin: 0;
padding: 0;
padding-top: 140%; }
article.node--type-frontpage .node__content > section.home-database .cards-list-home ul li .card {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: auto;
height: auto; }
article.node--type-frontpage .node__content > section.home-database .cards-list-home ul li .card .field--name-field-short-description {
font-size: 0.756em;
line-height: 0.9; }
article.node--type-frontpage .node__content > section.home-showrooms {
background-color: #50aa3c;
display: grid;
grid-template-columns: 300px 1fr;
grid-column-gap: 1em; }
article.node--type-frontpage .node__content > section.home-showrooms .field--name-field-showrooms {
grid-column: 1; }
article.node--type-frontpage .node__content > section.home-showrooms .field--name-computed-showrooms-reference {
grid-column: 2; }
article.node--type-frontpage .node__content > section.home-blabla {
background-color: #9458aa; }
article.node--type-frontpage .node__content .field--name-field-what-is-materio:not(:nth-child(1)),
article.node--type-frontpage .node__content .field--name-field-a-database:not(:nth-child(1)),
article.node--type-frontpage .node__content .field--name-field-showrooms:not(:nth-child(1)),
@@ -1300,9 +1356,9 @@ article.node--type-frontpage .node__content .field--name-computed-articles-refer
article.card {
position: relative;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
width: 210px;
height: 295px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); }
height: 295px; }
article.card header {
position: absolute;
bottom: 0;

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

@@ -252,6 +252,83 @@ aside.messages{
// front
article.node--type-frontpage{
.node__content{
&>section{
padding:1em;
&.home-intro{
padding:0;
background-color: #fff;
}
&.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;
}
.cards-list-home{
grid-column: 2;
position: relative;
// max-height: (130px*1.4)*3;
max-height: 580px;
overflow-y: hidden;
ul{
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;
li{
position: relative;
list-style: none;
margin:0; padding:0;
padding-top: 140%;
.card{
position:absolute;
top:0; bottom:0;
left:0; right:0;
width: auto;
height: auto;
.field--name-field-short-description{
font-size: 0.756em;
line-height: 0.9;
}
}
}
}
}
}
&.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;
.field--name-field-showrooms{
grid-column: 1;
}
.field--name-computed-showrooms-reference{
grid-column: 2;
}
}
&.home-blabla{
background-color: #9458aa;
}
&.home-pricing{
}
}
.field--name-field-what-is-materio,
.field--name-field-a-database,
.field--name-field-showrooms,
@@ -283,6 +360,7 @@ article.node--type-frontpage{
}
}
}
}
}
@@ -325,8 +403,11 @@ article.node--type-frontpage{
article.card{
position: relative;
width:$column_width; height:295px;
box-shadow: 0 0 5px rgba(0,0,0,0.2);
width:$column_width; height:295px;
// &.card-small{
// width:100px; height:140px;
// }
// focused
// box-shadow: 0 0 7px rgba(0,0,0,0.9);
header{