bachir/app.ethica-spinoza.net
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

improved route strategy (url path), headers menu are working

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2017-10-15 17:30:42 +02:00
parent 72602b3e12
commit e77ed37c76
15 changed files with 1196 additions and 696 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/main.scss
+177 -81
View File
@@ -21,64 +21,126 @@ html, body{
padding:0;
}
$header_height:3em;
$header_height:4em;
$dot_w:500px;
$margin_left:50px;
$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: bottom;
vertical-align: text-bottom;
// &:first-child{ margin-left: 1em;}
&:last-child{ margin-right: 1em;}
}
>h1{
margin: 0 0 0 $margin_left+($bullet_w/2);
font-size: 3em;
margin: 0 0 0 $margin_left;
}
}
nav#menus{
float:right;
>ul{
display: inline-block;
}
ul{
margin:0 0.5em;
li{
list-style: none;
line-height: 0.9;
#menus{
// float:right;
>*{
display: inline-block;
vertical-align: middle;
margin: 0 0.2em;
a{
text-decoration: none;
color: inherit;
vertical-align: top;
}
nav {
padding:1em 1em;
position: relative;
h3{
margin:0; padding:0;
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;
}
}
}
}
}
// 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;
// }
.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;
@@ -86,12 +148,22 @@ main#content{
// &>*{
// width: 450px;
// }
}
h1.part{
font-size: 1.6em;
width:450px;
// margin: 1em 0;
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;
}
}
// ____ __ _
@@ -99,66 +171,90 @@ h1.part{
// / // __ \/ / / / __ \/ _ \
// _/ // / / / /___/ / / / / __/
// /___/_/ /_/_____/_/_/ /_/\___/
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;
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;
// }
// }
h2{
font-size: 1em;
font-weight: 300;
margin: 0;
cursor:pointer;
}
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;
// }
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;
}
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;
}
}
}
}
}
// ______
// /_ __/_______ ___
// / / / ___/ _ \/ _ \
// / / / / / __/ __/
// /_/ /_/ \___/\___/
h1.part{
margin:1em 0 0 $margin_left+($bullet_w/2);
}
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;
@@ -172,7 +268,7 @@ h1.part{
display: inline-block;
// position: absolute;
// left:-3.5em;
width: $margin_left; text-align: right;
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;