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:500px;
$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;
  // border-bottom: 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 1em;
        background-color: rgba(255,255,255, 1);
        // top:2em;
        white-space: nowrap;
        height:1px; opacity:0;
        overflow: hidden;
        transition: opacity 0.3s ease-in-out;
        li{
          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;
          a{
            color: inherit;
            text-decoration: none;
          }
        }
      }
    }
    // nav#parts-nav{
    //   ul{
    //     right:0; left: auto;
    //   }
    // }
    &:hover{
      h3{
        color: rgb(100,100,100);
      }
      nav:hover{
        z-index: 10;
        h3{
          color:#000;
        }
        ul{
          height:auto; opacity: 1;
          transition: height opacity 0.3s ease-in-out;
        }
        li{
          color: rgb(100,100,100);
          &:hover{
            color: #000;
          }
        }
      }
    }
  }

}


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



.sticky-clone-wrapper{
  padding-top: $header_height+1em;
  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;
    }
  }
}

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;
  }

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

}

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

//     ____      __    _
//    /  _/___  / /   (_)___  ___
//    / // __ \/ /   / / __ \/ _ \
//  _/ // / / / /___/ / / / /  __/
// /___/_/ /_/_____/_/_/ /_/\___/
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{
    width:450px;
    margin: 1em 0 1em $margin_left;
    overflow-x: visible;
    @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;
    }

    h3{
      font-size: 0.9em;
      font-weight: 300;
      margin: 0;
      cursor:pointer;
    }

    div.text{
      font-size: 1.3em;
      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;
        }
      }

    }
  }

}


//   ______
//  /_  __/_______  ___
//   / / / ___/ _ \/ _ \
//  / / / /  /  __/  __/
// /_/ /_/   \___/\___/
main#content.mode-connections{

  h1.part-title{
    margin:0 0 0 $margin_left;
  }
  h2.title, h4.filet{
    margin:0 0 0 $margin_left;
  }
}
.dot{

  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;
  }
  >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;
      }
    }
    a{
      color: inherit;
      text-decoration: none;
      font-weight: bold;
    }
  }
  &.to-links > section.text{
    border-top: 1px solid #e2e2e2;
  }
  &.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;
    }
    &.from{
      top:100%;
      padding-top:10px;
      margin-bottom: 15px;
    }

    &: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, &.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.7;
  }


}


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