645 lines
12 KiB
SCSS
645 lines
12 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:550px;
|
|
$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;
|
|
// outline: 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 0;
|
|
background-color: rgba(255,255,255, 1);
|
|
// top:2em;
|
|
white-space: nowrap;
|
|
li{
|
|
position: relative;
|
|
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;
|
|
&:not(.active){
|
|
height:0px; opacity:0;
|
|
overflow: hidden;
|
|
transition: opacity 0.3s ease-in-out;
|
|
}
|
|
// &.active{
|
|
// z-index: 99;
|
|
// }
|
|
a{
|
|
color: inherit;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
width: 100%;
|
|
&:active,
|
|
&:focus{ outline:none; -moz-outline-style: none; }
|
|
}
|
|
&.active{
|
|
a:after{
|
|
content: " \1F7AC";
|
|
font-style: normal;
|
|
font-size: 0.7em;
|
|
font-weight: 300;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// nav#parts-nav{
|
|
// ul{
|
|
// right:0; left: auto;
|
|
// }
|
|
// }
|
|
&:hover{
|
|
h3{
|
|
color: rgb(100,100,100);
|
|
}
|
|
nav:hover{
|
|
z-index: 10;
|
|
h3{
|
|
color:#000;
|
|
}
|
|
ul{
|
|
padding-bottom: 1em;
|
|
}
|
|
li{
|
|
height:auto; opacity: 1;
|
|
transition: height opacity 0.3s ease-in-out;
|
|
color: rgb(100,100,100);
|
|
&:hover{
|
|
color: #000;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
|
|
// #app{
|
|
// position: relative;
|
|
// text-align: center;
|
|
// margin: 3em auto;
|
|
// }
|
|
|
|
|
|
#db-loader{
|
|
position: relative;
|
|
width:300px;
|
|
height:1px;
|
|
background-color: black;
|
|
margin-left: $margin_left;
|
|
#db-loaded{
|
|
position: absolute;
|
|
top:-1px; left:0;
|
|
width: 0%;
|
|
height:3px;
|
|
background-color: black;
|
|
transition: width 1.2s;
|
|
}
|
|
}
|
|
|
|
|
|
.sticky-clone-wrapper{
|
|
padding-top: $header_height;
|
|
// padding-bottom: 1em;
|
|
position: fixed;
|
|
top:0; left: 0;
|
|
z-index: 4;
|
|
width:100%;
|
|
background-color: white;
|
|
h1.part-title{
|
|
// // font-size: 1.6em;
|
|
// // body.mode-connections &{
|
|
// // margin: 0 0 0 $margin_left;
|
|
// }
|
|
// body.mode-text &{
|
|
margin:0 0 0 $margin_left;
|
|
// }
|
|
}
|
|
// h2.title{
|
|
// font-size: 1em;
|
|
// body.mode-connections &{
|
|
// margin: 0 0 0 $margin_left;
|
|
// }
|
|
// body.mode-text &{
|
|
// 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;
|
|
margin-bottom:2em;
|
|
}
|
|
|
|
// h2.title, h2.filet{
|
|
// font-size: 1em;
|
|
// width:450px;
|
|
// // margin: 1em 0;
|
|
// }
|
|
|
|
}
|
|
|
|
section.intro{
|
|
margin-left: $margin_left;
|
|
}
|
|
|
|
// Commons
|
|
|
|
h1.part-title{
|
|
font-size: 1.8em;
|
|
margin:0 0 0 $margin_left;
|
|
padding-bottom: 0.5em;
|
|
font-weight: normal;
|
|
letter-spacing: 0.3em;
|
|
em{
|
|
font-size: 0.7em;
|
|
letter-spacing: normal;
|
|
}
|
|
}
|
|
|
|
h2.title{
|
|
font-size: 1.2em;
|
|
font-weight: 500;
|
|
margin:1em 0 0 $margin_left;
|
|
line-height: 1;
|
|
}
|
|
|
|
// div.definition,
|
|
// div.axiom{
|
|
// margin-top: 1em;
|
|
// }
|
|
|
|
h4.filet{
|
|
margin:0.5em 0 0 $margin_left;
|
|
}
|
|
|
|
div.proposition,
|
|
div.appendice,
|
|
div.chapitre{
|
|
&:not(.chapitre), &.chapitre:first-of-type, &:not(.dot.nested){margin-top: 1em;}
|
|
span.title{
|
|
font-size: 1.2em;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
div.explication,
|
|
div.demonstration,
|
|
div.scolie,
|
|
div.corollaire,
|
|
div.prop-axiom,
|
|
div.lemme{
|
|
span.title{
|
|
font-size: 0.8em;
|
|
text-transform:capitalize;
|
|
font-variant: small-caps;
|
|
}
|
|
}
|
|
div.lemme-scolie,
|
|
div.lemme-corrollaire,
|
|
div.lemme-demonstration,
|
|
div.corollaire-demo{
|
|
span.title{
|
|
font-size: 0.7em;
|
|
text-transform:capitalize;
|
|
font-variant: small-caps;
|
|
}
|
|
}
|
|
// ____ __ _
|
|
// / _/___ / / (_)___ ___
|
|
// / // __ \/ / / / __ \/ _ \
|
|
// _/ // / / / /___/ / / / / __/
|
|
// /___/_/ /_/_____/_/_/ /_/\___/
|
|
main#content.mode-text{
|
|
// 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, section.item.nested{
|
|
width:600px;
|
|
margin: 1em 0 1em $margin_left;
|
|
overflow-x: visible;
|
|
}
|
|
section.enonce{
|
|
@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;
|
|
}
|
|
|
|
&.definition, &.axiom, &.def-affect{
|
|
&:not(.nested)>h2{
|
|
font-size: 1.2em;
|
|
float:left;
|
|
margin:0 0.5em 0 0;
|
|
// line-height: 1.9;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
}
|
|
}
|
|
|
|
h3{
|
|
font-size: 0.9em;
|
|
font-weight: 300;
|
|
margin: 0;
|
|
cursor:pointer;
|
|
}
|
|
|
|
&.proposition>div.text{
|
|
font-size: 1.5em;
|
|
font-weight: 500;
|
|
}
|
|
div.text{
|
|
font-size: 1.2em;
|
|
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;
|
|
}
|
|
sup{
|
|
font-size: 55%;
|
|
font-weight: 400;
|
|
a{
|
|
pointer-events: none;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
// footnotes
|
|
hr{
|
|
display:none;
|
|
}
|
|
section ol{
|
|
font-size: 0.7em;
|
|
margin: -1em 0 2em 0;
|
|
padding:0 0 0 1em;
|
|
a{
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
// reset font-size since nested items are in a div with alternate font-size
|
|
.enonce.nested, .item.nested{
|
|
font-size: $fs;
|
|
font-style: normal;
|
|
}
|
|
|
|
.opened-link{
|
|
// position:relative;
|
|
// outline: 1px solid red;
|
|
.close-link-btn{
|
|
width:20px; height: 20px;
|
|
margin:1em 0 -2.1em $margin_left - 9px;
|
|
// outline: 1px solid green;
|
|
// display:inline-block;
|
|
position:relative;
|
|
background-color: white;
|
|
z-index: 10;
|
|
// top:0; left:-1em;
|
|
cursor: pointer;
|
|
text-align: center;
|
|
&:before{
|
|
content:"\1f7ac";
|
|
font-style: normal;
|
|
font-size: 0.7em;
|
|
font-weight: 300;
|
|
}
|
|
// span{
|
|
// font-style: normal;
|
|
// font-size: 0.7em;
|
|
// font-weight: 300;
|
|
// }
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// ______
|
|
// /_ __/_______ ___
|
|
// / / / ___/ _ \/ _ \
|
|
// / / / / / __/ __/
|
|
// /_/ /_/ \___/\___/
|
|
main#content.mode-connections{
|
|
// h2.title, h4.filet{
|
|
// margin:0 0 0 $margin_left;
|
|
// }
|
|
}
|
|
.dot{
|
|
margin:0 0 0 $margin_left;
|
|
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;
|
|
// }
|
|
>span.title{
|
|
padding: 0 0.6em 0 0;
|
|
}
|
|
&.opened>span.title{
|
|
display:block;
|
|
}
|
|
|
|
|
|
>p.summary{
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
margin: 0;
|
|
opacity: 0;
|
|
transition: opacity 0.4s ease-in-out;
|
|
max-width : $dot_w - $margin_left -5px;
|
|
}
|
|
&.preface{
|
|
.title{display: none;}
|
|
p.summary{
|
|
opacity: 1;
|
|
}
|
|
}
|
|
&:not(.disabled) {
|
|
>span.title,>p.summary{cursor: pointer;}
|
|
}
|
|
&.disabled {
|
|
>span.title,>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;
|
|
padding-top:1.5em;
|
|
margin-top: -1.4em;
|
|
}
|
|
&.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;
|
|
margin-top: 1em;
|
|
&:before{
|
|
content: "\2304";
|
|
display: flex;
|
|
align-items: flex-end;
|
|
}
|
|
}
|
|
&.from{
|
|
top:100%;
|
|
padding-top:10px;
|
|
margin-bottom: 1em;
|
|
&:before{
|
|
content: "\2303";
|
|
}
|
|
}
|
|
|
|
&:before{
|
|
border-left: 1px solid #e2e2e2;
|
|
position: absolute;
|
|
top:0; left:$margin_left - 5px;
|
|
height: 100%; width:0;
|
|
z-index: 3;
|
|
text-indent: -0.45em;
|
|
line-height: 1;
|
|
color: #4a4848;
|
|
}
|
|
}
|
|
|
|
&: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.8;
|
|
// }
|
|
|
|
&.opened{
|
|
// position:relative;
|
|
// outline: 1px solid red;
|
|
margin-bottom: 15px;
|
|
// span.title{
|
|
// float:left;
|
|
// }
|
|
}
|
|
.bullet,.close-link-btn{
|
|
position:absolute;
|
|
width:20px;
|
|
// top:0;
|
|
left:-24px;
|
|
margin:-3px 0 0 0;
|
|
// outline: 1px solid green;
|
|
// display:inline-block;
|
|
// background-color: white;
|
|
// z-index: 10;
|
|
text-align: center;
|
|
}
|
|
.bullet{
|
|
span{
|
|
font-style: normal;
|
|
font-size: 0.2em;
|
|
font-weight: 300;
|
|
}
|
|
}
|
|
|
|
.close-link-btn{
|
|
cursor: pointer;
|
|
&:before{
|
|
content:"\1f7ac";
|
|
font-style: normal;
|
|
font-size: 0.7em;
|
|
font-weight: 300;
|
|
}
|
|
// span{
|
|
// font-style: normal;
|
|
// font-size: 0.7em;
|
|
// font-weight: 300;
|
|
// }
|
|
}
|
|
|
|
&.nested{
|
|
font-size: $fs;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
footer{
|
|
position: fixed;
|
|
bottom: 0;
|
|
background-color: white;
|
|
>*{margin-left: $margin_left;}
|
|
width: 100%;
|
|
}
|