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

  }
}

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