dots navigation is functional

assets/dist/main.css

@@ -753,15 +753,17 @@ html, body {
 header {
   position: fixed;
   width: 100%;
+  height: 3em;
   top: 0;
-  z-index: 5; }
+  z-index: 5;
+  background-color: white; }
   header > * {
     display: inline-block;
     vertical-align: bottom; }
-    header > *:first-child {
-      margin-left: 1em; }
     header > *:last-child {
       margin-right: 1em; }
+  header > h1 {
+    margin: 0 0 0 50px; }
 
 nav#menus {
   float: right; }
@@ -780,15 +782,11 @@ nav#menus {
         color: inherit; }
 
 main#content {
-  margin: 3em auto;
-  width: 450px; }
-  main#content > * {
-    width: 450px; }
+  margin-top: 3em; }
 
 h1.part {
   font-size: 1.6em;
-  width: 450px;
-  margin: 1em 0; }
+  width: 450px; }
 
 section.enonce {
   width: 450px;
@@ -824,36 +822,84 @@ section.enonce {
         padding-left: 2em;
         border-left: 1px solid #999; }
 
+h1.part {
+  margin: 0 0 0 50px; }
+
 .dot {
-  cursor: pointer;
   position: relative;
-  transform: translate3d(0, 0, 0);
-  transition: transform 0.2s ease-in-out; }
-  .dot span.id {
+  border: 1px solid white;
+  width: 500px; }
+  .dot > span.id {
     display: inline-block;
-    position: absolute;
-    left: -3.5em;
-    opacity: 0;
-    transition: transform 0.2s ease-in-out,opacity 0.4s ease-in-out; }
-  .dot p.summary {
-    display: inline-block;
-    margin: 0 0 0 1em;
+    width: 50px;
+    text-align: right;
     opacity: 0;
     transition: opacity 0.4s ease-in-out; }
-  .dot:hover, .dot.opened {
-    transform: translate3d(0.5em, 0, 0);
-    transition: transform 0.1s ease-in-out; }
-    .dot:hover p.summary, .dot.opened p.summary {
-      opacity: 1;
-      transition: opacity 0.4s ease-in-out; }
-    .dot:hover span.id, .dot.opened span.id {
-      opacity: 1;
-      transform: translate3d(-0.5em, 0, 0);
-      transition: transform 0.1s ease-in-out,opacity 0.4s ease-in-out; }
+  .dot > span.bullet {
+    display: inline-block;
+    width: 40px;
+    text-align: center;
+    vertical-align: top;
+    font-size: 15px;
+    font-kerning: none; }
+  .dot > p.summary {
+    display: inline-block;
+    vertical-align: top;
+    margin: 0;
+    opacity: 0;
+    transition: opacity 0.4s ease-in-out;
+    width: 405px; }
+  .dot:not(.disabled) > p.summary {
+    cursor: pointer; }
+  .dot.disabled > p.summary {
+    cursor: default; }
+  .dot > section.text {
+    display: inline-block;
+    vertical-align: top;
+    margin: 0;
+    width: 405px; }
+    .dot > section.text p {
+      margin: 0; }
+      .dot > section.text p:not(:last-child) {
+        margin-bottom: 1em; }
+  .dot.to-links > section.text {
+    border-top: 1px solid #e2e2e2; }
+  .dot.from-links > section.text {
+    border-bottom: 1px solid #e2e2e2; }
+  .dot > aside.links {
+    position: relative;
+    left: 100px;
+    box-sizing: border-box; }
+    .dot > aside.links.to {
+      bottom: 100%;
+      margin-top: 30px;
+      padding-bottom: 10px; }
+    .dot > aside.links.from {
+      top: 100%;
+      padding-top: 10px;
+      margin-bottom: 30px; }
+    .dot > aside.links:before {
+      content: "";
+      border-left: 1px solid #e2e2e2;
+      position: absolute;
+      top: 0;
+      left: 70px;
+      height: 100%;
+      width: 1px;
+      z-index: -1; }
+  .dot:hover > p.summary, .dot.opened > p.summary {
+    opacity: 1;
+    transition: opacity 0.4s ease-in-out; }
+  .dot:hover > span.id, .dot.opened > span.id {
+    opacity: 1;
+    transition: opacity 0.4s ease-in-out; }
+  .dot.disabled > * {
+    color: grey; }
 
 footer {
   position: fixed;
-  bottom: 0; }
+  bottom: 0;
+  background-color: white; }
   footer > * {
     margin-left: 1em; }