123 lines
2.2 KiB
SCSS
123 lines
2.2 KiB
SCSS
html,body{
|
|
margin:0; padding:0;
|
|
background-color: #1A1A1A;
|
|
}
|
|
|
|
$debug:false;
|
|
$tranchew:15mm;
|
|
$pw:227.41mm;
|
|
$ph:207.26mm;
|
|
$mt:1cm;
|
|
$mb:1cm;
|
|
$me:1cm;
|
|
$mi:1cm;
|
|
|
|
#root{
|
|
height:$ph;
|
|
margin:0 auto;
|
|
position: relative;
|
|
width:$tranchew+5+2.001*$pw;
|
|
}
|
|
|
|
#header{
|
|
display: absolute;
|
|
top: 0; left:0;
|
|
width: $tranchew; height: 100%;
|
|
background-color: white;
|
|
|
|
h1{
|
|
margin: 0; padding:0.3em;
|
|
position: absolute;
|
|
bottom:0; left:0;
|
|
transform-origin: 0% 0%;
|
|
transform: rotate(270deg);
|
|
}
|
|
}
|
|
|
|
#main{
|
|
position: absolute;
|
|
top:0; right:0;
|
|
width:2.001*$pw;
|
|
|
|
#page-left{
|
|
float:left;
|
|
// padding:$mt $mi $mb $me;
|
|
// background-image: url("../../images/pages/01_anan.jpeg");
|
|
background-position: right;
|
|
}
|
|
#page-right{
|
|
float: right;
|
|
// padding:$mt $me $mb $mi;
|
|
// background-image: url("../../images/pages/02_TH.jpeg");
|
|
background-position: left;
|
|
}
|
|
.page{
|
|
position: relative;
|
|
@if $debug {
|
|
background-color: green;
|
|
}
|
|
width:$pw;
|
|
height:$ph;
|
|
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
|
|
.overlay{
|
|
position: relative;
|
|
width:100%; height:100%;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
z-index: 1;
|
|
|
|
@if $debug {
|
|
border: 1px solid blue;
|
|
}
|
|
|
|
// img{max-width: 100%;}
|
|
}
|
|
|
|
.maps{
|
|
position:absolute;
|
|
top:0; left:0;
|
|
width:100%; height:100%;
|
|
z-index: 2;
|
|
.map{
|
|
position: absolute;
|
|
background-color: rgba(50, 50, 50, 0.8);
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
&.page-6 .overlay{
|
|
background-image: url("../../images/vectos/04_chance-RB.svg")
|
|
}
|
|
}
|
|
|
|
#railway{
|
|
position:absolute;
|
|
bottom:0; width:100%; // height:2cm;
|
|
background-color: rgba(0, 0, 0, 0.7);
|
|
overflow: hidden;
|
|
text-align: center;
|
|
ul{
|
|
padding:1mm;
|
|
li{
|
|
display: inline-block; vertical-align: middle;
|
|
background-color: white;
|
|
width:1mm; height:7mm;
|
|
margin-left: 0.5mm;
|
|
background-position: center;
|
|
background-size: cover;
|
|
&.active{
|
|
width:7mm;
|
|
}
|
|
&.page-right{
|
|
margin-right: 1mm;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|