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

@media home

Browse Source
This commit is contained in:
ouidade
2023-07-13 13:18:44 +02:00
parent cf892433b4
commit 654fd62898
3 changed files with 103 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/themes/custom/eql/scss/pages/_home.scss
+56 -15
View File
@@ -9,6 +9,12 @@
height: 600px;
border-bottom: 5px solid $blue-light;
background: $background-actus;
@media(max-width:792px){
max-height: 500px;
}
@media(max-width:724px){
max-height: 470px;
}
div{
height: 100%;
.view-actus-blocks-pages{
@@ -18,37 +24,58 @@
// flex-basis: auto;
height: 90%;
@media (max-width: 479px){
display: flex;
flex-direction: column;
width: 80%;
}
// @media (max-width: 479px){
// display: flex;
// flex-direction: column;
// width: 80%;
// }
.views-row{
// width: 80%;
// margin: auto;
.node-type-actualite{
color: $black;
line-height: 1.5rem;
width: 80%;
height: 600px;
margin: auto;
// background-color: burlywood;
@media (max-width: 680px){
width: 65%;
}
div:first-child{ // block actu dans le bandeau
// display: flex;
// flex-direction: column;
// flex-wrap: wrap;
display: grid;
grid-template-columns: 1fr repeat(9, 1fr) 1fr;
@media (max-width: 680px){
display: flex;
flex-direction: column;
height: fit-content;
}
.field--name-field-images {
order: 1;
grid-column: 1 /span 9;
grid-row: 1 / span 6;
.field__item img{
width: inherit;
max-height: 550px;
object-fit: cover;
padding-left: 1rem;
@media(max-width:852px){
max-height: 500px;
}
@media(max-width:792px){
max-height: 450px;
}
@media(max-width:724px){
max-height: 400px;
}
@media (max-width: 680px){
height: 200px;
object-fit: contain;
max-width: 70vw;
margin: auto;
padding-left: 0;
padding-bottom: 1rem;
}
}
}
@@ -94,6 +121,12 @@
&::before{
content: " | ";
margin-right: 2rem;
@media (max-width: 534px){
display: none;
}
}
@media (max-width: 534px){
order: 2;
}
}
@@ -257,6 +290,9 @@
}
.field--name-field-images{
// grid-column: 2 / 4;
@media (max-width: 479px) {
width: 100%;
}
.field__item{
img{
width: 15rem;
@@ -271,9 +307,14 @@
flex: 1 1 50px;
// grid-column: 4 / 9;
padding-left: 1rem;
@media (max-width: 534px){
padding-left: 0em;
flex: 1 1 100%;
padding-right: 1rem;
}
@media (max-width: 479px){
padding-left: 0em;
padding-left: 0em;
}
p{
background-color: $white;