Merge branch 'master' of https://git.xpub.nl/XPUB/special-issue-11-wiki2html

static/index.css

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

static/orgs.css

@@ -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;
+}
+

templates/orgs.html

@@ -10,5 +10,22 @@
 </head>
     <h1>{{ page.name }}</h1>
     <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>
 </html>