190 lines
3.2 KiB
SCSS
190 lines
3.2 KiB
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;}
|
|
}
|