153 lines
2.8 KiB
SCSS
153 lines
2.8 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")
|
|
}
|
|
}
|
|
|
|
#navigation{
|
|
position:absolute; z-index: 3;
|
|
bottom:0; width:100%; // height:2cm;
|
|
padding:2mm 0;
|
|
background-color: rgba(26, 26, 26, 0.7);
|
|
overflow: hidden;
|
|
text-align: center;
|
|
opacity: 0;
|
|
transition: opacity .3s ease-in-out;
|
|
&:hover{opacity: 1;}
|
|
}
|
|
|
|
#pagination{
|
|
color:#fff;
|
|
font-size: 1em;
|
|
padding: 0 0 2mm 0;
|
|
div{
|
|
display: inline-block;
|
|
width:49%;
|
|
&.wrapper-l{left:0; text-align: left;}
|
|
&.wrapper-r{right:0; text-align: right;}
|
|
span.p{
|
|
|
|
}
|
|
span.l{
|
|
cursor: pointer;
|
|
line-height: -1;
|
|
}
|
|
}
|
|
}
|
|
|
|
#railway{
|
|
ul{
|
|
padding:1mm; margin:0;
|
|
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; cursor: pointer;
|
|
}
|
|
&.page-right{
|
|
margin-right: 1mm;
|
|
}
|
|
opacity:0.2;
|
|
transition: opacity 0.3s ease-in-out;
|
|
&.current, &.active:hover{opacity: 1;}
|
|
}
|
|
&:hover li{opacity: 1;}
|
|
}
|
|
}
|
|
|
|
}
|