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{
  position: fixed;
  width:100%; top:0; z-index: 5;
  >*{
    display: inline-block;
    vertical-align: bottom;
    &:first-child{ margin-left: 1em;}
    &:last-child{ margin-right: 1em;}
  }
}

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: 3em auto;
  width: 450px;
  &>*{
    width: 450px;
  }
}

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

//   ______
//  /_  __/_______  ___
//   / / / ___/ _ \/ _ \
//  / / / /  /  __/  __/
// /_/ /_/   \___/\___/
section.enonce{
  width:450px;
  margin: 1em 0;
  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;
      }
    }

  }
}

//     ____        __
//    / __ \____  / /______
//   / / / / __ \/ __/ ___/
//  / /_/ / /_/ / /_(__  )
// /_____/\____/\__/____/
.dot{
  cursor: pointer;
  position: relative;
  transform: translate3d(0,0,0);
  transition: transform 0.2s ease-in-out;
  span.id{
    display: inline-block;
    position: absolute;
    left:-3.5em;
    opacity:0;
    // transform: translate3d(0, 0, 0);
    transition: transform 0.2s ease-in-out,opacity 0.4s ease-in-out;
  }
  span.bullet{
  }
  p.summary{
    display: inline-block;
    margin: 0 0 0 1em;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
  }
  &:hover, &.opened{
    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;
    }
  }

}


footer{
  position: fixed;
  bottom: 0;
  >*{margin-left: 1em;}
}