389 lines
7.1 KiB
SCSS
389 lines
7.1 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_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;
|
|
position: fixed;
|
|
top:0; left: 0;
|
|
z-index: 4;
|
|
background-color: white;
|
|
h1.part-title{
|
|
font-size: 1.6em;
|
|
body.inline &{
|
|
margin: 0 0 0 $margin_left;
|
|
}
|
|
body.tree &{
|
|
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.inline{
|
|
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.tree{
|
|
|
|
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;}
|
|
}
|