app.ethica-spinoza.net/assets/main.scss

// @Author: Bachir Soussi Chiadmi <bach>
// @Date:   16-04-2017
// @Email:  bachir@figureslibres.io
// @Last modified by:   bach
// @Last modified time: 18-04-2017
// @License: GPL-V3

$fs:16px;

@mixin base_font{
  font-family: 'amiri', sans-serif;
  font-size: $fs;
  font-kerning: auto;
  line-height: 1.4;
}

html, body{
  @include base_font;
  position: relative;
  margin:0;
  padding:0;
}

$header_height:5em;
$dot_w:550px;
$bullet_w:40px;
$margin_left:50px + ($bullet_w/2);

header{
  position: fixed;
  width:100%; height:$header_height;
  top:0; z-index: 5;
  background-color: white;
  // padding: 0 0 0 $margin_left;
  // outline: 1px solid green;
  >*{
    display: inline-block;
    vertical-align: text-bottom;
    // &:first-child{ margin-left: 1em;}
    &:last-child{ margin-right: 1em;}
  }
  hgroup{
    margin: 0 4em 0 $margin_left;
    h1,h2{
      margin:0; padding:0;
      line-height: 1;
    }
    h1{font-size: 3em;}
    h2{line-height: 1;}
  }


  #menus{
    // float:right;
    >*{
      display: inline-block;
      vertical-align: top;
    }
    nav {
      padding:0 1em;
      position: relative;
      h3{
        margin:0; padding:0;
        line-height: 1;
        cursor: pointer;
        transition: color 0.3s ease-in-out;
      }

      ul{
        position: absolute;
        margin:0;
        left:0; padding:0 1em 0;
        background-color: rgba(255,255,255, 1);
        // top:2em;
        white-space: nowrap;
        li{
          position: relative;
          margin:0;
          padding:0;
          list-style: none;
          transition: color 0.3s ease-in-out;
          font-weight:500;
          font-size: 1.2em;
          line-height: 1.2;
          &:not(.active){
            height:1px; opacity:0;
            overflow: hidden;
            transition: opacity 0.3s ease-in-out;
          }
          // &.active{
          //   z-index: 99;
          // }
          a{
            color: inherit;
            text-decoration: none;
            display: inline-block;
            width: 100%;
            &:active,
            &:focus{ outline:none; -moz-outline-style: none; }
          }
          &.active{
            a:after{
              content: " \1F7AC";
              font-style: normal;
              font-size: 0.7em;
              font-weight: 300;
            }
          }
        }
      }
    }
    // nav#parts-nav{
    //   ul{
    //     right:0; left: auto;
    //   }
    // }
    &:hover{
      h3{
        color: rgb(100,100,100);
      }
      nav:hover{
        z-index: 10;
        h3{
          color:#000;
        }
        ul{
          padding-bottom: 1em;
        }
        li{
          height:auto; opacity: 1;
          transition: height opacity 0.3s ease-in-out;
          color: rgb(100,100,100);
          &:hover{
            color: #000;
          }
        }
      }
    }
  }

}


// #app{
//   position: relative;
//   text-align: center;
//   margin: 3em auto;
// }


#db-loader{
  position: relative;
  width:300px;
  height:1px;
  background-color: black;
  margin-left: $margin_left;
  #db-loaded{
    position: absolute;
    top:-1px; left:0;
    width: 0%;
    height:3px;
    background-color: black;
    transition: width 1.2s;
  }
}


.sticky-clone-wrapper{
  padding-top: $header_height;
  // padding-bottom: 1em;
  position: fixed;
  top:0; left: 0;
  z-index: 4;
  width:100%;
  background-color: white;
  h1.part-title{
    // // font-size: 1.6em;
    // // body.mode-connections &{
    // //   margin: 0 0 0 $margin_left;
    // }
    // body.mode-text &{
      margin:0 0 0 $margin_left;
    // }
  }
  // h2.title{
  //   font-size: 1em;
  //   body.mode-connections &{
  //     margin: 0 0 0 $margin_left;
  //   }
  //   body.mode-text &{
  //     margin:0 0 0 $margin_left;
  //   }
  // }
}

main#content{
  margin-top: $header_height;
  // margin: 5em;
  // width: 450px;
  // &>*{
  //   width: 450px;
  // }

  // h1.part-title{
  //   font-size: 1.6em;
  //   width:450px;
  // }

  section.part{
    position: relative;
    margin-bottom:2em;
  }

  // h2.title, h2.filet{
  //   font-size: 1em;
  //   width:450px;
  //   // margin: 1em 0;
  // }

}

section.intro{
  margin-left: $margin_left;
}

// Commons

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{
    font-size: 0.7em;
    letter-spacing: normal;
  }
}

h2.title{
  font-size: 1.2em;
  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, &:not(.dot.nested){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;
  // }

  // .sticky{
  //   color: red;
  //   &.fixed{
  //     position: fixed;
  //   }
  // }
  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;
    // transition: max-height 0.5s ease-in-out;
    // &.active{
    //   max-height:1000px;
    // }


    h2{
      font-size: 1em;
      font-weight: 300;
      margin: 0;
      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;
      margin: 0;
      cursor:pointer;
    }

    &.proposition>div.text{
      font-size: 1.5em;
      font-weight: 500;
    }
    div.text{
      font-size: 1.2em;
      div.paragraph{
        margin-bottom: 1em;

        div.opened-link{
          display:inline;
        }
        a.link, span.link.text{
          font-weight: 600;
          text-decoration: none;
          color: inherit;
        }
        span.link.text:after{
          content:':'
        }
        section.enonce, section.item{
          padding-left:2em;
          border-left: 1px solid #999;
        }
        img{
          float: left;
        }
        sup{
          font-size: 55%;
          font-weight: 400;
          a{
            pointer-events: none;
            cursor: pointer;
          }
        }

      }

    }

    // footnotes
    hr{
      display:none;
    }
    section ol{
      font-size: 0.7em;
      margin: -1em 0 2em 0;
      padding:0 0 0 1em;
      a{
        display: none;
      }
    }

  }

  // reset font-size since nested items are in a div with alternate font-size
  .enonce.nested, .item.nested{
    font-size: $fs;
    font-style: normal;
  }

  .opened-link{
    // position:relative;
    // outline: 1px solid red;
    .close-link-btn{
      width:20px; height: 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;
      &:before{
        content:"\1f7ac";
        font-style: normal;
        font-size: 0.7em;
        font-weight: 300;
      }
      // span{
      // font-style: normal;
      // font-size: 0.7em;
      // font-weight: 300;
      // }
    }
  }
}


//   ______
//  /_  __/_______  ___
//   / / / ___/ _ \/ _ \
//  / / / /  /  __/  __/
// /_/ /_/   \___/\___/
main#content.mode-connections{
  // h2.title, h4.filet{
  //   margin:0 0 0 $margin_left;
  // }
}
.dot{
  margin:0 0 0 $margin_left;
  position: relative;
  // 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;
  //   width: $margin_left - ($bullet_w/2); text-align: right;
  //   opacity:0;
  //   // transform: translate3d(0, 0, 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;
  // }
  >span.title{
    padding: 0 0.6em 0 0;
  }
  &.opened>span.title{
    display:block;
  }


  >p.summary{
    display: inline-block;
    vertical-align: top;
    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;
    margin: 0;
    width : $dot_w - $margin_left - $bullet_w -5px;
    p{
      margin:0;
      &:not(:last-child){
        margin-bottom:1em;
      }
    }
    a{
      color: inherit;
      text-decoration: none;
      font-weight: bold;
    }
  }
  &.to-links > section.text{
    border-top: 1px solid #e2e2e2;
    padding-top:1.5em;
    margin-top: -1.4em;
  }
  &.from-links > section.text{
    border-bottom: 1px solid #e2e2e2;
  }

  >nav.links{
    position:relative;
    // left: $margin_left*2;
    box-sizing: border-box;
    &.to{
      bottom:100%;
      margin-top: 15px;
      padding-bottom:10px;
      margin-top: 1em;
      &:before{
        content: "\2304";
        display: flex;
        align-items: flex-end;
      }
    }
    &.from{
      top:100%;
      padding-top:10px;
      margin-bottom: 1em;
      &:before{
        content: "\2303";
      }
    }

    &:before{
      border-left: 1px solid #e2e2e2;
      position: absolute;
      top:0; left:$margin_left - 5px;
      height: 100%; width:0;
      z-index: 3;
      text-indent: -0.45em;
      line-height: 1;
      color: #4a4848;
    }
  }

  &:hover, &.opened, &.highlight{
    // 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{
    //   opacity: 1;
    //   // 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;
  }

  // &:not(.opened){
  //   line-height: 0.8;
  // }

  &.opened{
    // position:relative;
    // outline: 1px solid red;
    margin-bottom: 15px;
    // span.title{
    //   float:left;
    // }
  }
  .bullet,.close-link-btn{
    position:absolute;
    width:20px;
    // top:0;
    left:-24px;
    margin:-3px 0 0 0;
    // outline: 1px solid green;
    // display:inline-block;
    // background-color: white;
    // z-index: 10;
    text-align: center;
  }
  .bullet{
    span{
      font-style: normal;
      font-size: 0.2em;
      font-weight: 300;
    }
  }

  .close-link-btn{
    cursor: pointer;
    &:before{
      content:"\1f7ac";
      font-style: normal;
      font-size: 0.7em;
      font-weight: 300;
    }
    // span{
    //   font-style: normal;
    //   font-size: 0.7em;
    //   font-weight: 300;
    // }
  }

  &.nested{
    font-size: $fs;
  }

}



footer{
  position: fixed;
  bottom: 0;
  background-color: white;
  >*{margin-left: $margin_left;}
  width: 100%;
}