villeneuve-dascq: improve "top-bandeau" layout on desktop (#44572)

* increase carrousel height,
* carrousel layout more responsive,
* vertical align for tracking-code-cell content,
This commit is contained in:
Thomas Jund 2020-07-01 11:29:34 +02:00 committed by Thomas NOËL
parent 2654010d8a
commit 60fabdc986
1 changed files with 10 additions and 5 deletions

View File

@ -200,7 +200,7 @@ div.cell {
}
}
div.carrousel-nav {
top: $theme-gutter-mobile*2;
top: $theme-gutter-mobile*3;
left: $theme-gutter-mobile*2;
width: auto;
@media ($min-desktop-viewport) {
@ -226,7 +226,7 @@ div.cell {
background-size: 1.5rem;
@include arrowIcon($property: background-image);
top: $theme-gutter;
top: $theme-gutter-mobile*2;
right: $theme-page-padding;
&::after {
content: none;
@ -664,11 +664,16 @@ div.gru-nav {
margin-right: $theme-gutter-mobile;
margin-left: $theme-gutter-mobile;
}
@media ($min-desktop-viewport) {
display: flex;
align-items: center;
}
}
.carrousel {
// stretch all flex space
@media ($min-desktop-viewport) {
position: relative;
padding-top: 38%;
> div {
position: absolute;
top: 0;
@ -684,9 +689,6 @@ div.gru-nav {
// Desktop layout
@media ($min-desktop-viewport) {
display: flex;
& > .cell:first-child {
flex: 1 0 auto;
}
& > .cell:last-child {
flex: 0 0 calc( (100% - #{$theme-gutter}) / 3 );
@media (min-width: $width + 1) {
@ -694,6 +696,9 @@ div.gru-nav {
}
}
& > .cell:first-child {
flex: 1 0 auto;
}
}
}