Sandra 5 years ago
commit 359df675a4

@ -3,7 +3,7 @@ body {
max-width: 100%; max-width: 100%;
height:100%; height:100%;
display: inline-table; display: inline-table;
font-family: Baskerville; font-family: Inria Sans;
bottom: 20px; bottom: 20px;
} }
@ -69,7 +69,7 @@ display: inline-block;
width: 70px; width: 70px;
/*font-family: helvetica;*/ /*font-family: helvetica;*/
font-size: 14px; font-size: 14px;
margin: 20px; margin: 16px;
vertical-align: top; vertical-align: top;
} }
@ -77,7 +77,7 @@ display: inline-block;
.tooltip .tooltiptext { .tooltip .tooltiptext {
display: block; display: block;
visibility: hidden; visibility: hidden;
width: 300%; width: 400%;
height: auto; height: auto;
/*min-height: 100%;*/ /*min-height: 100%;*/
background-color: #0BEFEB; background-color: #0BEFEB;
@ -87,13 +87,14 @@ display: inline-block;
padding: 10px; padding: 10px;
/*border-radius: 6px;*/ /*border-radius: 6px;*/
/* font-family: CothamSans;*/ /* font-family: CothamSans;*/
font-size: 14px; font-size: 18px;
position: absolute; position: absolute;
/*top: 0px;*/ /*top: 0px;*/
z-index: 1; z-index: 1;
margin-top: 0px; margin-top: 0px;
/*vertical-align: top;*/ /*vertical-align: top;*/
line-height: 1.3; line-height: 1.3;
word-wrap:break-word
} }
.tooltip:hover .tooltiptext { .tooltip:hover .tooltiptext {
@ -112,21 +113,21 @@ ul#nav li{
} }
ul#nav{ ul#nav{
margin-left: 20px; padding: 20px;
margin-top: 20px; margin-top: 10px;
margin-right: 10px;
margin-bottom: 20px; margin-bottom: 20px;
background-color: white;
top:0px; top:0px;
bottom: 10px; bottom: 10px;
padding-left: 0px; padding-left: 0px;
border: none; border: none;
width: 100vw; width: 80vw;
/*display: inline;*/ /*display: inline;*/
height:20px; height:20px;
/*overflow-x: scroll;*/ /*overflow-x: scroll;*/
left:0px; left:0px;
position: fixed; position: fixed;
/*z-index: -1; */ z-index: 1;
} }
ul#menu li{ ul#menu li{
@ -158,7 +159,7 @@ ul#menu{
div#myBtnContainer{ div#myBtnContainer{
background-color: white; /* background-color: white;*/
/*margin-top: 20px;*/ /*margin-top: 20px;*/
margin-left: 30px; margin-left: 30px;
margin-bottom: 30px; margin-bottom: 30px;
@ -177,10 +178,10 @@ div#myBtnContainer{
/*overflow-y: hidden;*/ /*overflow-y: hidden;*/
} }
div#myBtnContainer:hover{ /*div#myBtnContainer:hover{
background-color: white; background-color: white;
/*z-index: 1;*/ z-index: 1;
} }*/
.filter { .filter {
@ -206,7 +207,7 @@ margin-left: 40px;
.btn { .btn {
border: none; border: none;
outline: none; outline: none;
font-family: Baskerville; font-family: Inria Sans;
font-size: 20px; font-size: 20px;
text-align: left; text-align: left;
display: block; display: block;
@ -215,16 +216,16 @@ margin-left: 40px;
/*background-color: blue;*/ /*background-color: blue;*/
cursor: pointer; cursor: pointer;
margin: 4px 4px 2px 2px; margin: 4px 4px 2px 2px;
color: #E8E8E8; color: #0BEFEB;
background-color: transparent; background-color: transparent;
} }
.btn:hover { .btn:hover {
background-color: #ddd; background-color: #F4EBE8;
} }
.btn.active { .btn.active {
background-color: #666; background-color: #0BEFEB;
color: white; color: white;
} }
@ -241,5 +242,5 @@ margin-left: 40px;
margin-bottom: 10px; margin-bottom: 10px;
width: 80vw; width: 80vw;
height: 2px; height: 2px;
background-color: black; background-color: #0BEFEB;
} }

@ -0,0 +1,52 @@
.indexlink {
position: fixed;
top:0%;
right:10%;
background-color: white;
z-index: 10;
}
h1 {
position: fixed;
right:0%;
top:3%;
text-align: right;
background-color: grey;
padding: 3px 30px 3px 10px;
z-index: 10;
color: black;
font-size: 28px;
}
.collapsible{
padding-left: 70px;
font-family: monospace;
line-height: 1px;
}
.active, .collapsible:hover {
color: red;
cursor: pointer;
}
.active, .collapsible:after {
padding-top: 20px;
color: #054646;
padding-left: 100px;
}
.content {
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
padding-left: 100px;
background-color: #5E7575;
font-family: monospace;
position: relative;
width: 800px;
margin-left: 100px;
line-height: 30px;
}

@ -10,5 +10,22 @@
</head> </head>
<h1>{{ page.name }}</h1> <h1>{{ page.name }}</h1>
<div id="body">{{ body|safe }}</div> <div id="body">{{ body|safe }}</div>
<script>
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
</script>
</body> </body>
</html> </html>

Loading…
Cancel
Save