main.scss 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182
  1. html,body{
  2. margin:0; padding:0;
  3. background-color: #1A1A1A;
  4. }
  5. $tranche_w:15mm;
  6. $tranche_mr:5mm;
  7. $p_w:227.41mm;
  8. $p_h:207.26mm;
  9. $main_w:2.001*$p_w;
  10. $navh:30mm;
  11. // $mt:1cm;
  12. // $mb:1cm;
  13. // $me:1cm;
  14. // $mi:1cm;
  15. #root{
  16. position: relative;
  17. width:($tranche_w+$tranche_mr+$main_w)*1.001;
  18. height:$p_h+$navh;
  19. margin:0 auto;
  20. letter-spacing:-.25em;
  21. &>*{letter-spacing: normal;}
  22. }
  23. #header{
  24. display: inline-block;
  25. width: $tranche_w; height: $p_h;
  26. margin-right:$tranche_mr;
  27. background-color: white;
  28. h1{
  29. margin: 0 0 15mm 0; padding:0.3em;
  30. position: absolute;
  31. bottom:0; left:0;
  32. transform-origin: 0% 0%;
  33. transform: rotate(270deg);
  34. }
  35. }
  36. #main{
  37. display: inline-block;
  38. width:$main_w;
  39. overflow: hidden;
  40. // background-color: magenta;
  41. #page-left{
  42. float:left;
  43. // padding:$mt $mi $mb $me;
  44. // background-image: url("../../images/pages/01_anan.jpeg");
  45. background-position: right;
  46. }
  47. #page-right{
  48. float: right;
  49. // padding:$mt $me $mb $mi;
  50. // background-image: url("../../images/pages/02_TH.jpeg");
  51. background-position: left;
  52. }
  53. .page{
  54. position: relative;
  55. width:$p_w;
  56. height:$p_h;
  57. background-repeat: no-repeat;
  58. background-size: contain;
  59. .overlay{
  60. position: relative;
  61. width:100%; height:100%;
  62. background-position: center;
  63. background-repeat: no-repeat;
  64. background-size: contain;
  65. z-index: 1;
  66. // img{max-width: 100%;}
  67. }
  68. .maps{
  69. position:absolute;
  70. top:0; left:0;
  71. width:100%; height:100%;
  72. z-index: 2;
  73. .map{
  74. position: absolute;
  75. cursor: pointer;
  76. &[debug="true"]{
  77. background-color: rgba(0, 0, 250, 0.4);
  78. }
  79. }
  80. }
  81. }
  82. }
  83. #navigation{
  84. width:$main_w;
  85. height:$navh;
  86. overflow: hidden;
  87. $ml:$tranche_w + $tranche_mr;
  88. margin:0 0 0 $ml;
  89. padding:0;
  90. background-color: rgba(26, 26, 26, 0.7);
  91. // background-color: green;
  92. text-align: center;
  93. // opacity: 0;
  94. transition: opacity .3s ease-in-out;
  95. // &:hover{opacity: 1;}
  96. }
  97. #pagination{
  98. color:#fff;
  99. font-size: 1em;
  100. padding: 1mm 0;
  101. letter-spacing: -.25em;
  102. &>*{letter-spacing: normal;}
  103. div{
  104. display: inline-block;
  105. width:49.9%;
  106. span.p{
  107. display: inline-block;
  108. vertical-align: middle;
  109. min-width: 3em;
  110. text-align: center;
  111. }
  112. span.l{
  113. cursor: pointer;
  114. line-height: -1em;
  115. &.hidden{visibility: hidden;}
  116. }
  117. &.wrapper-l{
  118. left:0; text-align: right;
  119. // span.p{text-align: left;}
  120. }
  121. &.wrapper-r{
  122. right:0; text-align: left; border-left: 1px solid white;
  123. // span.p{text-align: right;}
  124. }
  125. }
  126. opacity: 0.3;
  127. transition: opacity .3s ease-in-out;
  128. &:hover{opacity: 1;}
  129. }
  130. #railway{
  131. // background-color: blue;
  132. ul{
  133. padding:1mm 0; margin:0;
  134. text-align: justify;
  135. display: flex;
  136. flex-flow: row nowrap;
  137. justify-content: space-between;
  138. li{
  139. // display: inline-block; vertical-align: middle;
  140. // display:
  141. list-style: none;
  142. opacity:0.2;
  143. transition: opacity 0.3s ease-in-out;
  144. &.current, &.active:hover{opacity: 1;}
  145. span{
  146. display: inline-block;
  147. background-color: white;
  148. width:1mm; height:7mm;
  149. // margin-left: 0.5mm;
  150. background-position: center;
  151. background-size: cover;
  152. &.active{
  153. width:7mm; cursor: pointer;
  154. }
  155. &.page-right{
  156. // margin-right: 1mm;
  157. }
  158. }
  159. }
  160. &:hover li{opacity: 1;}
  161. }
  162. }