typo styles ok, text mode ok with close bouton, bugfixes

assets/main.scss

@@ -32,7 +32,7 @@ header{
   top:0; z-index: 5;
   background-color: white;
   // padding: 0 0 0 $margin_left;
-  // border-bottom: 1px solid green;
+  // outline: 1px solid green;
   >*{
     display: inline-block;
     vertical-align: text-bottom;
@@ -132,7 +132,7 @@ header{
 
 .sticky-clone-wrapper{
   padding-top: $header_height;
-  padding-bottom: 1em;
+  // padding-bottom: 1em;
   position: fixed;
   top:0; left: 0;
   z-index: 4;
@@ -173,6 +173,7 @@ main#content{
 
   section.part{
     position: relative;
+    margin-bottom:2em;
   }
 
   // h2.title, h2.filet{
@@ -192,6 +193,7 @@ section.intro{
 h1.part-title{
   font-size: 1.8em;
   margin:0 0 0 $margin_left;
+  padding-bottom: 0.5em;
   font-weight: normal;
   letter-spacing: 0.3em;
   em{
@@ -202,25 +204,64 @@ h1.part-title{
 
 h2.title{
   font-size: 1.2em;
-  font-weight: normal;
+  font-weight: 500;
   margin:1em 0 0 $margin_left;
   line-height: 1;
 }
 
+// div.definition,
+// div.axiom{
+//   margin-top: 1em;
+// }
 
+h4.filet{
+  margin:0.5em 0 0 $margin_left;
+}
 
+div.proposition,
+div.appendice,
+div.chapitre{
+  &:not(.chapitre), &.chapitre:first-of-type{margin-top: 1em;}
+  span.title{
+  font-size: 1.2em;
+  font-weight: 500;
+  }
+}
+
+div.explication,
+div.demonstration,
+div.scolie,
+div.corollaire,
+div.prop-axiom,
+div.lemme{
+  span.title{
+    font-size: 0.8em;
+    text-transform:capitalize;
+    font-variant: small-caps;
+  }
+}
+div.lemme-scolie,
+div.lemme-corrollaire,
+div.lemme-demonstration,
+div.corollaire-demo{
+  span.title{
+    font-size: 0.7em;
+    text-transform:capitalize;
+    font-variant: small-caps;
+  }
+}
 //     ____      __    _
 //    /  _/___  / /   (_)___  ___
 //    / // __ \/ /   / / __ \/ _ \
 //  _/ // / / / /___/ / / / /  __/
 // /___/_/ /_/_____/_/_/ /_/\___/
 main#content.mode-text{
-  h1.part-title{
-    margin: 1em 0 0 $margin_left;
-  }
-  h2.title, h4.filet{
-    margin: 1em 0 0 $margin_left;
-  }
+  // h1.part-title{
+  //   margin: 1em 0 0 $margin_left;
+  // }
+  // h2.title, h4.filet{
+  //   margin: 1em 0 0 $margin_left;
+  // }
 
   // .sticky{
   //   color: red;
@@ -228,11 +269,12 @@ main#content.mode-text{
   //     position: fixed;
   //   }
   // }
-
-  section.enonce{
-    width:450px;
+  section.enonce, section.item.nested{
+    width:600px;
     margin: 1em 0 1em $margin_left;
     overflow-x: visible;
+  }
+  section.enonce{
     @include base_font;
     // max-height:14px;
     // overflow: hidden;
@@ -249,6 +291,17 @@ main#content.mode-text{
       cursor:pointer;
     }
 
+    &.definition, &.axiom, &.def-affect{
+      &:not(.nested)>h2{
+        font-size: 1.2em;
+        float:left;
+        margin:0 0.5em 0 0;
+        // line-height: 1.9;
+        font-weight: 600;
+        text-transform: uppercase;
+      }
+    }
+
     h3{
       font-size: 0.9em;
       font-weight: 300;
@@ -256,8 +309,12 @@ main#content.mode-text{
       cursor:pointer;
     }
 
+    &.proposition>div.text{
+      font-size: 1.5em;
+      font-weight: 500;
+    }
     div.text{
-      font-size: 1.3em;
+      font-size: 1.2em;
       div.paragraph{
         margin-bottom: 1em;
 
@@ -279,11 +336,53 @@ main#content.mode-text{
         img{
           float: left;
         }
+        sup{
+          font-size: 50%;
+          font-weight: 600;
+        }
+
       }
 
     }
+
+    // footnotes
+    hr{
+      display:none;
+    }
+    section ol{
+      font-size: 0.7em;
+      margin: -1em 0 2em 0;
+      padding:0 0 0 1em;
+    }
+
   }
 
+  // reset font-size since nested items are in a div with alternate font-size
+  .enonce.nested, .item.nested{
+    font-size: $fs;
+  }
+
+  .opened-link{
+    // position:relative;
+    // outline: 1px solid red;
+    .close-link-btn{
+      width:20px;
+      margin:1em 0 -2.1em $margin_left - 9px;
+      // outline: 1px solid green;
+      // display:inline-block;
+      position:relative;
+      background-color: white;
+      z-index: 10;
+      // top:0; left:-1em;
+      cursor: pointer;
+      text-align: center;
+      span{
+        font-style: normal;
+        font-size: 0.7em;
+        font-weight: 300;
+      }
+    }
+  }
 }
 
 
@@ -324,23 +423,30 @@ main#content.mode-connections{
   //   font-kerning: none;
   // }
   >span.title{
+    margin: 0 0.6em 0 0;
   }
 
   >p.summary{
     display: inline-block;
     vertical-align: top;
-    margin: 0 0 0 0.6em;
+    margin: 0;
     opacity: 0;
     transition: opacity 0.4s ease-in-out;
     max-width : $dot_w - $margin_left -5px;
   }
+  &.preface{
+    .title{display: none;}
+    p.summary{
+      opacity: 1;
+    }
+  }
   &:not(.disabled) {
     >span.title,>p.summary{cursor: pointer;}
   }
   &.disabled {
     >span.title,>p.summary{cursor: default;}
   }
-  
+
   >section.text{
     display: inline-block;
     vertical-align: top;
@@ -367,7 +473,7 @@ main#content.mode-connections{
 
   >nav.links{
     position:relative;
-    left: $margin_left*2;
+    // left: $margin_left*2;
     box-sizing: border-box;
     &.to{
       bottom:100%;
@@ -384,7 +490,7 @@ main#content.mode-connections{
       content: "";
       border-left: 1px solid #e2e2e2;
       position: absolute;
-      top:0; left:$margin_left + ($bullet_w/2);
+      top:0; left:$margin_left - 5px;
       height: 100%; width:1px;
       z-index: -1;
     }
@@ -420,6 +526,6 @@ footer{
   position: fixed;
   bottom: 0;
   background-color: white;
-  >*{margin-left: 1em;}
+  >*{margin-left: $margin_left;}
   width: 100%;
 }