activated overlays, commented page.js

css/dist/main.css

@@ -3,14 +3,34 @@ html, body {
   padding: 0;
   background-color: #1A1A1A; }
 
+#root {
+  position: relative;
+  width: 475.52246mm;
+  height: 237.26mm;
+  margin: 0 auto;
+  letter-spacing: -.25em; }
+  #root > * {
+    letter-spacing: normal; }
+
 #header {
-  position: fixed;
-  display: none; }
+  display: inline-block;
+  width: 15mm;
+  height: 207.26mm;
+  margin-right: 5mm;
+  background-color: white; }
+  #header h1 {
+    margin: 0 0 15mm 0;
+    padding: 0.3em;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    transform-origin: 0% 0%;
+    transform: rotate(270deg); }
 
 #main {
-  height: 207.26mm;
+  display: inline-block;
   width: 455.04741mm;
-  margin: 0 auto; }
+  overflow: hidden; }
   #main #page-left {
     float: left;
     background-position: right; }
@@ -40,7 +60,77 @@ html, body {
       z-index: 2; }
       #main .page .maps .map {
         position: absolute;
-        background-color: rgba(50, 50, 50, 0.8);
         cursor: pointer; }
-    #main .page.page-6 .overlay {
-      background-image: url("../../images/vectos/04_chance-RB.svg"); }
+        #main .page .maps .map[debug="true"] {
+          background-color: rgba(0, 0, 250, 0.4); }
+
+#navigation {
+  width: 455.04741mm;
+  height: 30mm;
+  overflow: hidden;
+  margin: 0 0 0 20mm;
+  padding: 0;
+  background-color: rgba(26, 26, 26, 0.7);
+  text-align: center;
+  transition: opacity .3s ease-in-out; }
+
+#pagination {
+  color: #fff;
+  font-size: 1em;
+  padding: 1mm 0;
+  letter-spacing: -.25em;
+  opacity: 0.3;
+  transition: opacity .3s ease-in-out; }
+  #pagination > * {
+    letter-spacing: normal; }
+  #pagination div {
+    display: inline-block;
+    width: 49.9%; }
+    #pagination div span.p {
+      display: inline-block;
+      vertical-align: middle;
+      min-width: 3em;
+      text-align: center; }
+    #pagination div span.l {
+      cursor: pointer;
+      line-height: -1em; }
+      #pagination div span.l.hidden {
+        visibility: hidden; }
+    #pagination div.wrapper-l {
+      left: 0;
+      text-align: right; }
+    #pagination div.wrapper-r {
+      right: 0;
+      text-align: left;
+      border-left: 1px solid white; }
+  #pagination:hover {
+    opacity: 1; }
+
+#railway ul {
+  padding: 1mm 0;
+  margin: 0;
+  text-align: justify;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-flow: row nowrap;
+  flex-flow: row nowrap;
+  -ms-flex-pack: justify;
+  justify-content: space-between; }
+  #railway ul li {
+    list-style: none;
+    opacity: 0.2;
+    transition: opacity 0.3s ease-in-out; }
+    #railway ul li.current, #railway ul li.active:hover {
+      opacity: 1; }
+    #railway ul li span {
+      display: inline-block;
+      background-color: white;
+      width: 1mm;
+      height: 7mm;
+      background-position: center;
+      background-size: cover; }
+      #railway ul li span.active {
+        width: 7mm;
+        cursor: pointer; }
+  #railway ul:hover span {
+    opacity: 1; }

css/main.scss

@@ -3,23 +3,46 @@ html,body{
   background-color: #1A1A1A;
 }
 
-$debug:false;
-$pw:227.41mm;
-$ph:207.26mm;
-$mt:1cm;
-$mb:1cm;
-$me:1cm;
-$mi:1cm;
+$tranche_w:15mm;
+$tranche_mr:5mm;
+$p_w:227.41mm;
+$p_h:207.26mm;
+$main_w:2.001*$p_w;
+$navh:30mm;
+// $mt:1cm;
+// $mb:1cm;
+// $me:1cm;
+// $mi:1cm;
+
+#root{
+  position: relative;
+  width:($tranche_w+$tranche_mr+$main_w)*1.001;
+  height:$p_h+$navh;
+  margin:0 auto;
+  letter-spacing:-.25em;
+  &>*{letter-spacing: normal;}
+}
 
 #header{
-  position: fixed;
-  display: none;
+  display: inline-block;
+  width: $tranche_w; height: $p_h;
+  margin-right:$tranche_mr;
+  background-color: white;
+
+  h1{
+    margin: 0 0 15mm 0; padding:0.3em;
+    position: absolute;
+    bottom:0; left:0;
+    transform-origin: 0% 0%;
+    transform: rotate(270deg);
+  }
 }
 
 #main{
-  height:$ph;
-  width:2.001*$pw;
-  margin:0 auto;
+  display: inline-block;
+  width:$main_w;
+  overflow: hidden;
+  // background-color: magenta;
   #page-left{
     float:left;
     // padding:$mt $mi $mb $me;
@@ -34,11 +57,8 @@ $mi:1cm;
   }
   .page{
     position: relative;
-    @if $debug {
-      background-color: green;
-    }
-    width:$pw;
-    height:$ph;
+    width:$p_w;
+    height:$p_h;
 
     background-repeat: no-repeat;
     background-size: contain;
@@ -50,11 +70,6 @@ $mi:1cm;
       background-repeat: no-repeat;
       background-size: contain;
       z-index: 1;
-
-      @if $debug {
-        border: 1px solid blue;
-      }
-
       // img{max-width: 100%;}
     }
 
@@ -65,16 +80,103 @@ $mi:1cm;
       z-index: 2;
       .map{
         position: absolute;
-        background-color: rgba(50, 50, 50, 0.8);
         cursor: pointer;
+        &[debug="true"]{
+          background-color: rgba(0, 0, 250, 0.4);
+        }
       }
     }
 
-    &.page-6 .overlay{
-      background-image: url("../../images/vectos/04_chance-RB.svg")
-    }
   }
 
-
-
+}
+
+#navigation{
+  width:$main_w;
+  height:$navh;
+  overflow: hidden;
+  $ml:$tranche_w + $tranche_mr;
+  margin:0 0 0 $ml;
+  padding:0;
+  background-color: rgba(26, 26, 26, 0.7);
+  // background-color: green;
+  text-align: center;
+  // opacity: 0;
+  transition: opacity .3s ease-in-out;
+  // &:hover{opacity: 1;}
+}
+
+#pagination{
+  color:#fff;
+  font-size: 1em;
+  padding: 1mm 0;
+  letter-spacing: -.25em;
+  &>*{letter-spacing: normal;}
+
+  div{
+    display: inline-block;
+    width:49.9%;
+    span.p{
+      display: inline-block;
+      vertical-align: middle;
+      min-width: 3em;
+      text-align: center;
+    }
+    span.l{
+      cursor: pointer;
+      line-height: -1em;
+      &.hidden{visibility: hidden;}
+    }
+
+    &.wrapper-l{
+      left:0; text-align: right;
+      // span.p{text-align: left;}
+    }
+    &.wrapper-r{
+      right:0; text-align: left; border-left: 1px solid white;
+      // span.p{text-align: right;}
+    }
+
+  }
+
+  opacity: 0.3;
+  transition: opacity .3s ease-in-out;
+  &:hover{opacity: 1;}
+}
+
+#railway{
+  // background-color: blue;
+  ul{
+    padding:1mm 0; margin:0;
+    text-align: justify;
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-between;
+
+    li{
+      // display: inline-block; vertical-align: middle;
+      // display:
+      list-style: none;
+
+      opacity:0.2;
+      transition: opacity 0.3s ease-in-out;
+      &.current, &.active:hover{opacity: 1;}
+
+      span{
+        display: inline-block;
+        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;
+        }
+      }
+    }
+    &:hover span{opacity: 1;}
+  }
 }