123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677 |
- // @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;
- $footer_height:3em;
- $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-bottom: $footer_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.3em $margin_left;
- padding: 0.5em 0 0.2em;
- font-weight: normal;
- letter-spacing: 0.3em;
- display: inline-block;
- // border-top: 1px solid black;
- border-bottom: 1px solid black;
- white-space:nowrap;
- em{
- font-size: 0.7em;
- letter-spacing: normal;
- }
- &>em:first-of-type{
- display: block;
- }
- }
- 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{
- text-transform: capitalize;
- 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;
- // width: 200px;
- // white-space: nowrap;
- // overflow: hidden;
- // text-overflow: ellipsis;
- a{
- color: inherit;
- text-decoration: none;
- font-weight: bold;
- pointer-events: none;
- }
- }
- &.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{
- box-sizing: border-box;
- height: $footer_height;
- position: fixed;
- bottom: 0;
- background-color: white;
- width: 100%;
- padding: 1em 0 0 $margin_left;
- p{
- display: inline-block;
- margin:0 2em 0 0 ;
- &:before{
- content:'⋅ ';
- }
- }
- a{
- text-decoration: none; color: inherit;
- }
- }
|