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

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: none;
+  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{
-  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;
+        }
+      }
+    }
+  }
 
 }