123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108 |
- html,body{
- margin: 0;
- padding: 0;
- }
- @mixin layout-row{
- box-sizing: content-box;
- max-width: 1920px;
- margin: 0 auto;
- padding: 0 1rem;
- }
- #app {
- box-sizing: border-box;
- width: 100vw;
- height: 100vh;
- font-weight: normal;
- // display: flex;
- // flex-flow: column-reverse;
- }
- #header{
- // flex: 0 0 auto;
- position: absolute;
- bottom:0;
- left:0;
- width: 100vw;
- padding: 1rem 0;
- >.row{
- @include layout-row();
- }
- }
- #main-content{
- // flex: 1 1 auto;
- width:100vw;
- height:100vh;
- overflow-x: hidden;
- overflow-y: hidden;
- // padding: 1rem 0;
-
- #map-backgrounds{
- position: absolute;
- z-index: -1;
- top:0; left:0;
- width:100%;
- height:100%;
- >canvas.map-bg-canvas{
- position: absolute;
- // z-index: -1;
- top:0; left:0;
- width:100%;
- height:100%;
- }
- }
-
- #map-matter{
- position: absolute;
- z-index: -1;
- top:0; left:0;
- width:100%;
- height:100%;
- }
- #map-concernements{
- width:100%;
- height:100%;
- z-index: 1;
- }
-
- #map-nav{
- position: absolute;
- z-index: 2;
- top:0; left: 0;
- width:100vw;
- padding:1rem 0;
- >ul{
- @include layout-row();
- }
- }
- // >.row{
- // @include layout-row();
- // }
- #content{
- box-sizing: border-box;
- position: absolute;
- top:0; right:0;
- height:100vh;
- padding: 0.5rem;
- }
- #recit-player{
- box-sizing: border-box;
- position: absolute;
- bottom: 0; right: 0;
- padding: 0.5rem;
- z-index: 100;
- }
- }
|