entrouvert
/
publik-base-theme
15
1
Fork 1
Code Issues Pull Requests 8 Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
static/villeneuve-dascq/_custom.scss
View File

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