in my way to display full titles on connection mode

This commit is contained in:
Bachir Soussi Chiadmi
2018-02-24 12:41:59 +01:00
parent 2ce27b3245
commit f69747ac0a
7 changed files with 161 additions and 165 deletions
+71 -46
View File
@@ -22,7 +22,7 @@ html, body{
}
$header_height:5em;
$dot_w:500px;
$dot_w:550px;
$bullet_w:40px;
$margin_left:50px + ($bullet_w/2);
@@ -139,23 +139,23 @@ header{
width:100%;
background-color: white;
h1.part-title{
font-size: 1.6em;
body.mode-connections &{
margin: 0 0 0 $margin_left;
}
body.mode-text &{
// // 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;
}
// }
}
// 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{
@@ -166,20 +166,20 @@ main#content{
// width: 450px;
// }
h1.part-title{
font-size: 1.6em;
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;
}
// h2.title, h2.filet{
// font-size: 1em;
// width:450px;
// // margin: 1em 0;
// }
}
@@ -187,6 +187,28 @@ section.intro{
margin-left: $margin_left;
}
// Commons
h1.part-title{
font-size: 1.8em;
margin:0 0 0 $margin_left;
font-weight: normal;
letter-spacing: 0.3em;
em{
font-size: 0.7em;
letter-spacing: normal;
}
}
h2.title{
font-size: 1.2em;
font-weight: normal;
margin:1em 0 0 $margin_left;
line-height: 1;
}
// ____ __ _
// / _/___ / / (_)___ ___
// / // __ \/ / / / __ \/ _ \
@@ -271,13 +293,9 @@ main#content.mode-text{
// / / / / / __/ __/
// /_/ /_/ \___/\___/
main#content.mode-connections{
h1.part-title{
margin:0 0 0 $margin_left;
}
h2.title, h4.filet{
margin:0 0 0 $margin_left;
}
// h2.title, h4.filet{
// margin:0 0 0 $margin_left;
// }
}
.dot{
margin:0 0 0 $margin_left;
@@ -305,17 +323,24 @@ main#content.mode-connections{
// font-size: 15px;
// font-kerning: none;
// }
>span.title{
}
>p.summary{
display: inline-block;
vertical-align: top;
margin: 0;
margin: 0 0 0 0.6em;
opacity: 0;
transition: opacity 0.4s ease-in-out;
width : $dot_w - $margin_left - $bullet_w -5px;
max-width : $dot_w - $margin_left -5px;
}
&:not(.disabled) > p.summary{cursor: pointer;}
&.disabled > p.summary{cursor: default;}
&:not(.disabled) {
>span.title,>p.summary{cursor: pointer;}
}
&.disabled {
>span.title,>p.summary{cursor: default;}
}
>section.text{
display: inline-block;
vertical-align: top;
@@ -372,20 +397,20 @@ main#content.mode-connections{
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;
}
// >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;
}
// &:not(.opened){
// line-height: 0.8;
// }
}