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:3em;
$dot_w:500px;
$margin_left:50px;
$bullet_w:40px;

header{
  position: fixed;
  width:100%; height:$header_height;
  top:0; z-index: 5;
  background-color: white;
  >*{
    display: inline-block;
    vertical-align: bottom;
    // &:first-child{ margin-left: 1em;}
    &:last-child{ margin-right: 1em;}
  }
  >h1{
    margin: 0 0 0 $margin_left+($bullet_w/2);
  }
}

nav#menus{
  float:right;
  >ul{
    display: inline-block;
  }
  ul{
    margin:0 0.5em;
    li{
      list-style: none;
      line-height: 0.9;
      display: inline-block;
      vertical-align: middle;
      margin: 0 0.2em;
      a{
        text-decoration: none;
        color: inherit;
      }
    }
  }
  // ul#languages{
  //   li{
  //     list-style: none;
  //     line-height: 0.9;
  //     a{
  //       text-decoration: none;
  //       color: inherit;
  //     }
  //   }
  // }
}

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

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

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

//   ______
//  /_  __/_______  ___
//   / / / ___/ _ \/ _ \
//  / / / /  /  __/  __/
// /_/ /_/   \___/\___/
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;
      }
    }

  }
}

//     ____        __
//    / __ \____  / /______
//   / / / / __ \/ __/ ___/
//  / /_/ / /_/ / /_(__  )
// /_____/\____/\__/____/

h1.part{
  margin:1em 0 0 $margin_left+($bullet_w/2);
}

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