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

refactored home blabla article list

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2020-12-27 12:05:34 +01:00
parent a2773b1b20
commit 1ae54233af
8 changed files with 247 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1556,13 +1556,13 @@ article.node--type-frontpage .node__content > section.home-database {
flex-flow: row wrap;
justify-content: space-between; }
article.node--type-frontpage .node__content > section.home-database .cards-list-home ul li {
position: relative;
list-style: none;
margin: 0;
padding: 0 0 6.5px 0;
box-sizing: border-box;
width: 102.5px;
height: 147.5px; }
height: 147.5px;
position: relative;
list-style: none;
margin: 0; }
article.node--type-frontpage .node__content > section.home-database .cards-list-home ul li .card {
width: 100%;
height: 100%; }
@@ -1645,35 +1645,25 @@ article.node--type-frontpage .node__content > section.home-blabla {
color: #9458aa; }
article.node--type-frontpage .node__content > section.home-blabla .cards-list-home {
position: relative;
overflow-y: hidden; }
@media only screen and (max-width: 2538px) {
article.node--type-frontpage .node__content > section.home-blabla .cards-list-home {
max-height: 630px; } }
@media only screen and (min-width: 2539px) {
article.node--type-frontpage .node__content > section.home-blabla .cards-list-home {
max-height: 310px; } }
overflow-y: hidden;
max-height: 315px; }
article.node--type-frontpage .node__content > section.home-blabla .cards-list-home ul {
width: 100%;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(80px, 410px));
grid-gap: 1em;
justify-content: start; }
display: flex;
flex-flow: row wrap;
justify-content: space-between; }
article.node--type-frontpage .node__content > section.home-blabla .cards-list-home ul li {
padding: 0 0 13px 0;
box-sizing: border-box;
width: 205px;
position: relative;
list-style: none;
margin: 0;
padding: 0;
padding-top: 67.8%;
overflow: hidden; }
article.node--type-frontpage .node__content > section.home-blabla .cards-list-home ul li .card {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: auto;
width: 100%;
height: auto; }
article.node--type-frontpage .node__content > section.home-blabla .cards-list-home ul li .card .field--name-title {
font-size: 0.756em;

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

@@ -606,14 +606,14 @@ article.node--type-frontpage{
flex-flow: row wrap;
justify-content: space-between;
li{
position: relative;
list-style: none;
margin:0;
padding:0 0 $column_goutiere / 2 0;
box-sizing: border-box;
// padding-top: 140%;
width: $column_width / 2;
height: $card_height / 2;
position: relative;
list-style: none;
margin:0;
.card{
// position:absolute;
// top:0; bottom:0;
@@ -723,33 +723,42 @@ article.node--type-frontpage{
position: relative;
$bp: ($column_width*2 + $column_goutiere );
overflow-y: hidden;
max-height: 315px;
@media only screen and (max-width: $bp * 6){
max-height: 630px;
}
@media only screen and (min-width: ($bp * 6) + 1px){
max-height: 310px;
}
// @media only screen and (max-width: $bp * 6){
// max-height: 630px;
// }
// @media only screen and (min-width: ($bp * 6) + 1px){
// max-height: 310px;
// }
ul{
width:100%;
margin:0; padding:0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(80px, $column_width*2));
// grid-template-rows: 1fr;
grid-gap: 1em;
justify-content:start;
// display: grid;
// grid-template-columns: repeat(auto-fill, minmax(80px, $column_width*2));
// // grid-template-rows: 1fr;
// grid-gap: 1em;
// justify-content:start;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
li{
padding:0 0 $column_goutiere 0;
box-sizing: border-box;
// padding-top: 140%;
width: $column_width;
// height: $card_height / 2;
position: relative;
list-style: none;
margin:0; padding:0;
padding-top: 67.8%;
margin:0;
// padding-top: 67.8%;
overflow: hidden;
.card{
position:absolute;
top:0; bottom:0;
left:0; right:0;
width: auto;
// position:absolute;
// top:0; bottom:0;
// left:0; right:0;
width: 100%;
height: auto;
.field--name-title{
font-size: 0.756em;