big refactoring

css/main.scss

@@ -3,30 +3,34 @@ html,body{
   background-color: #1A1A1A;
 }
 
-$debug:false;
-$tranchew:15mm;
-$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{
-  height:$ph;
-  margin:0 auto;
   position: relative;
-  width:$tranchew+5+2.001*$pw;
+  width:($tranche_w+$tranche_mr+$main_w)*1.001;
+  height:$p_h+$navh;
+  margin:0 auto;
+  letter-spacing:-.25em;
+  &>*{letter-spacing: normal;}
 }
 
 #header{
-  display: absolute;
-  top: 0; left:0;
-  width: $tranchew; height: 100%;
+  display: inline-block;
+  width: $tranche_w; height: $p_h;
+  margin-right:$tranche_mr;
   background-color: white;
 
   h1{
-    margin: 0; padding:0.3em;
+    margin: 0 0 15mm 0; padding:0.3em;
     position: absolute;
     bottom:0; left:0;
     transform-origin: 0% 0%;
@@ -35,10 +39,10 @@ $mi:1cm;
 }
 
 #main{
-  position: absolute;
-  top:0; right:0;
-  width:2.001*$pw;
-
+  display: inline-block;
+  width:$main_w;
+  overflow: hidden;
+  // background-color: magenta;
   #page-left{
     float:left;
     // padding:$mt $mi $mb $me;
@@ -53,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;
@@ -69,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%;}
     }
 
@@ -89,64 +85,96 @@ $mi:1cm;
       }
     }
 
-    &.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{
+#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;
-      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;
-      }
+      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;}
+    }
+
   }
 
-  #railway{
-    ul{
-      padding:1mm; margin:0;
-      li{
-        display: inline-block; vertical-align: middle;
+  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;
+        // margin-left: 0.5mm;
         background-position: center;
         background-size: cover;
         &.active{
           width:7mm; cursor: pointer;
         }
         &.page-right{
-          margin-right: 1mm;
+          // margin-right: 1mm;
         }
-        opacity:0.2;
-        transition: opacity 0.3s ease-in-out;
-        &.current, &.active:hover{opacity: 1;}
       }
-      &:hover li{opacity: 1;}
     }
+    &:hover span{opacity: 1;}
   }
-
 }