Adrien
a2728cfc0c
- Replace leaflet with openlayers - Add stop areas shape to map - Display stop destinations sub-panel on click
75 lines
1.3 KiB
SCSS
75 lines
1.3 KiB
SCSS
/* Idfm: 1860x1080px */
|
||
%widget {
|
||
aspect-ratio: 16/9;
|
||
--reverse-aspect-ratio: 9/16;
|
||
/* height is set according to the aspect-ratio, don´t touch it */
|
||
width: 100%;
|
||
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
/* Idfm: 1800x100px (margin: 17px 60px) */
|
||
%header {
|
||
width: calc(1800/1920*100%);
|
||
height: calc(100/1080*100%);
|
||
/*Percentage margin are computed relatively to the nearest block container's width, not height */
|
||
/* cf. https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom */
|
||
margin: calc(17/1080*var(--reverse-aspect-ratio)*100%) calc(60/1920*100%);
|
||
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
font-family: IDFVoyageur-bold;
|
||
}
|
||
|
||
.header {
|
||
@extend %header;
|
||
}
|
||
|
||
%title {
|
||
height: 50%;
|
||
width: 70%;
|
||
|
||
margin-right: auto;
|
||
}
|
||
|
||
/* Idfm: 1860x892px (margin: 0px 30px) */
|
||
%body {
|
||
width: calc(1860/1920*100%);
|
||
height: calc(892/1080*100%);
|
||
margin: 0 calc(30/1920*100%);
|
||
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
background-color: white;
|
||
|
||
border-collapse:separate;
|
||
// border:solid var(--idfm-black) 1px;
|
||
border-radius: calc(15/1920*100%);
|
||
}
|
||
|
||
|
||
/* Idfm: 1800x54px (margin: 0px 50px) */
|
||
%footer {
|
||
width: calc(1820/1920*100%);
|
||
height: calc(54/1080*100%);
|
||
margin: 0 calc(50/1920*100%);
|
||
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: right;
|
||
}
|
||
|
||
.footer {
|
||
@extend %footer;
|
||
}
|
||
|
||
.footer div {
|
||
aspect-ratio: 1;
|
||
height: 50%;
|
||
|
||
margin-left: calc(42/1920*100%);
|
||
}
|