dots navigation is functional

assets/main.scss

@@ -21,15 +21,25 @@ html, body{
   padding:0;
 }
 
+$header_height:3em;
+$dot_w:500px;
+$margin_left:50px;
+$bullet_w:40px;
+
 header{
   position: fixed;
-  width:100%; top:0; z-index: 5;
+  width:100%; height:$header_height;
+  top:0; z-index: 5;
+  background-color: white;
   >*{
     display: inline-block;
     vertical-align: bottom;
-    &:first-child{ margin-left: 1em;}
+    // &:first-child{ margin-left: 1em;}
     &:last-child{ margin-right: 1em;}
   }
+  >h1{
+    margin: 0 0 0 $margin_left;
+  }
 }
 
 nav#menus{
@@ -70,17 +80,18 @@ nav#menus{
 // }
 
 main#content{
-  margin: 3em auto;
-  width: 450px;
-  &>*{
-    width: 450px;
-  }
+  margin-top: $header_height;
+  // margin: 5em;
+  // width: 450px;
+  // &>*{
+  //   width: 450px;
+  // }
 }
 
 h1.part{
   font-size: 1.6em;
   width:450px;
-  margin: 1em 0;
+  // margin: 1em 0;
 }
 
 //   ______
@@ -144,40 +155,110 @@ section.enonce{
 //   / / / / __ \/ __/ ___/
 //  / /_/ / /_/ / /_(__  )
 // /_____/\____/\__/____/
+
+h1.part{
+  margin:0 0 0 $margin_left;
+}
+
 .dot{
-  cursor: pointer;
+
   position: relative;
-  transform: translate3d(0,0,0);
-  transition: transform 0.2s ease-in-out;
-  span.id{
+  // overflow-x: visible;
+  // overflow-y: auto;
+  border: 1px solid white;
+  // transform: translate3d(0,0,0);
+  // transition: transform 0.2s ease-in-out;
+  width: $dot_w;
+  >span.id{
     display: inline-block;
-    position: absolute;
-    left:-3.5em;
+    // position: absolute;
+    // left:-3.5em;
+    width: $margin_left; text-align: right;
     opacity:0;
     // transform: translate3d(0, 0, 0);
-    transition: transform 0.2s ease-in-out,opacity 0.4s ease-in-out;
-  }
-  span.bullet{
-  }
-  p.summary{
-    display: inline-block;
-    margin: 0 0 0 1em;
-    opacity: 0;
+    // transition: transform 0.2s ease-in-out,opacity 0.4s ease-in-out;
     transition: opacity 0.4s ease-in-out;
   }
+  >span.bullet{
+    display: inline-block;
+    width:$bullet_w; text-align: center;
+    vertical-align: top;
+    font-size: 15px;
+    font-kerning: none;
+  }
+  >p.summary{
+    display: inline-block;
+    vertical-align: top;
+    margin: 0;
+    opacity: 0;
+    transition: opacity 0.4s ease-in-out;
+    width : $dot_w - $margin_left - $bullet_w -5px;
+  }
+  &:not(.disabled) > p.summary{cursor: pointer;}
+  &.disabled > p.summary{cursor: default;}
+
+  >section.text{
+    display: inline-block;
+    vertical-align: top;
+    margin: 0;
+    width : $dot_w - $margin_left - $bullet_w -5px;
+    p{
+      margin:0;
+      &:not(:last-child){
+        margin-bottom:1em;
+      }
+    }
+  }
+  &.to-links > section.text{
+    border-top: 1px solid #e2e2e2;
+  }
+  &.from-links > section.text{
+    border-bottom: 1px solid #e2e2e2;
+  }
+
+  >aside.links{
+    position:relative;
+    left: $margin_left*2;
+    box-sizing: border-box;
+    &.to{
+      bottom:100%;
+      margin-top: 30px;
+      padding-bottom:10px;
+    }
+    &.from{
+      top:100%;
+      padding-top:10px;
+      margin-bottom: 30px;
+    }
+
+    &:before{
+      content: "";
+      border-left: 1px solid #e2e2e2;
+      position: absolute;
+      top:0; left:$margin_left + ($bullet_w/2);
+      height: 100%; width:1px;
+      z-index: -1;
+    }
+  }
+
   &:hover, &.opened{
-    transform: translate3d(0.5em, 0, 0);
-    transition: transform 0.1s ease-in-out;
-    p.summary{
+    // transform: translate3d(0.5em, 0, 0);
+    // transition: transform 0.1s ease-in-out;
+    >p.summary{
       opacity: 1;
       transition: opacity 0.4s ease-in-out;
     }
-    span.id{
+    >span.id{
       opacity: 1;
-      transform: translate3d(-0.5em, 0, 0);
-      transition: transform 0.1s ease-in-out,opacity 0.4s ease-in-out;
+      // transform: translate3d(-0.5em, 0, 0);
+      // transition: transform 0.1s ease-in-out,opacity 0.4s ease-in-out;
+      transition: opacity 0.4s ease-in-out;
     }
   }
+  &.disabled>*{
+    color:grey;
+  }
+
 
 }
 
@@ -185,5 +266,6 @@ section.enonce{
 footer{
   position: fixed;
   bottom: 0;
+  background-color: white;
   >*{margin-left: 1em;}
 }