reodered pages, added chemin de fer, tranches, pages as doubles

css/dist/main.css

@@ -3,14 +3,33 @@ html, body {
   padding: 0;
   background-color: #1A1A1A; }
 
+#root {
+  height: 207.26mm;
+  margin: 0 auto;
+  position: relative;
+  width: 475.04741mm; }
+
 #header {
-  position: fixed;
+  display: absolute;
-  display: none; }
+  top: 0;
+  left: 0;
+  width: 15mm;
+  height: 100%;
+  background-color: white; }
+  #header h1 {
+    margin: 0;
+    padding: 0.3em;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    transform-origin: 0% 0%;
+    transform: rotate(270deg); }
 
 #main {
-  height: 207.26mm;
+  position: absolute;
-  width: 455.04741mm;
+  top: 0;
-  margin: 0 auto; }
+  right: 0;
+  width: 455.04741mm; }
   #main #page-left {
     float: left;
     background-position: right; }
@@ -44,3 +63,25 @@ html, body {
         cursor: pointer; }
     #main .page.page-6 .overlay {
       background-image: url("../../images/vectos/04_chance-RB.svg"); }
+  #main #railway {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    background-color: rgba(0, 0, 0, 0.7);
+    overflow: hidden;
+    text-align: center; }
+    #main #railway ul {
+      padding: 1mm; }
+      #main #railway ul li {
+        display: inline-block;
+        vertical-align: middle;
+        background-color: white;
+        width: 1mm;
+        height: 7mm;
+        margin-left: 0.5mm;
+        background-position: center;
+        background-size: cover; }
+        #main #railway ul li.active {
+          width: 7mm; }
+        #main #railway ul li.page-right {
+          margin-right: 1mm; }

css/main.scss

@@ -4,6 +4,7 @@ html,body{
 }
 
 $debug:false;
+$tranchew:15mm;
 $pw:227.41mm;
 $ph:207.26mm;
 $mt:1cm;
@@ -11,15 +12,33 @@ $mb:1cm;
 $me:1cm;
 $mi:1cm;
 
+#root{
+  height:$ph;
+  margin:0 auto;
+  position: relative;
+  width:$tranchew+5+2.001*$pw;
+}
+
 #header{
-  position: fixed;
+  display: absolute;
-  display: none;
+  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{
-  height:$ph;
+  position: absolute;
+  top:0; right:0;
   width:2.001*$pw;
-  margin:0 auto;
+
   #page-left{
     float:left;
     // padding:$mt $mi $mb $me;
@@ -75,6 +94,29 @@ $mi:1cm;
     }
   }
 
-
+  #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;
+        }
+      }
+    }
+  }
 
 }