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

5 years ago · 1c33b080ef
parent 4b88dc81ef 765468b821
commit 1c33b080ef
9 changed files with 322 additions and 258 deletions
--- a/static/about.css
+++ b/static/about.css
@ -1,8 +1,10 @@
 body {
    background-color: #F4EBE8;
    font-family: Roboto Mono;
+  
 }

+
 .projtextcont{
 display: block;
 	/*align-items: center;
@ -16,7 +18,6 @@ display: block;
 	width: 80%;
 	display: block;
  text-align: justify;
-
 }

 h1{
@ -31,7 +32,7 @@ h1{
  top:0%;
  z-index: 0;
  margin:0px;
-  margin-top: 50px;
+  /*margin-top: 50px;*/
 }

 h2{
@ -41,7 +42,7 @@ h2{
  text-align: justify;
 }

-.pagelink{
+/*.pagelink{
  position: fixed;
  display: inline;
  left:0px;
@ -55,7 +56,7 @@ h2{
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
-  /*border-style: solid;*/
+  /*border-style: solid;
  border-width: 1px;
  border-color: #371F10;
  
@ -64,10 +65,24 @@ h2{
 .pagelink:hover{
  background-color: #0BEFEB;
 }
+
+.pagelink{
+  background-color: white;
+}
+
 .pagelink a{
  text-decoration: none;
 }

+/*.pagelink a:active{
+  background-color: #0BEFEB;
+}
+
+.active .pagelink:after{
+  background-color: #0BEFEB;
+}
+
+
 .pagelink .pagename{
  display: inline;
  position: absolute;
@ -81,4 +96,4 @@ h2{

 .pagelink:hover .pagename{
  visibility: visible;
-}
+}*/
--- a/static/archive.css
+++ b/static/archive.css
@ -3,12 +3,12 @@ body {
    color: #371F10;
    font-family: Roboto Mono, monospace;
 }
-.pagelink{
+/*.pagelink{
  position: fixed;
  display: inline;
  left:0px;
 /*  width:20px;
-  height:20px;*/
+  height:20px;
  padding: 0px 5px 0px 5px;
  background-color: white;
  z-index: 10;
@ -17,6 +17,63 @@ body {
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
+  /*border-style: solid;
+  border-width: 1px;
+  border-color: #371F10;
+
+}*/
+
+/*.pagelink:hover{
+  background-color: #0BEFEB;
+}
+.pagelink a{
+  text-decoration: none;
+}
+
+.pagelink .pagename{
+  display: inline;
+  position: absolute;
+  width: auto;
+  padding: 5px;
+  margin-left: 25px;
+  font-size: 13px;
+  background-color: white;
+  visibility: hidden;
+}
+
+.pagelink:hover .pagename{
+  visibility: visible;
+}*/
+
+.linkscont{
+  margin-top: 10%;
+  height: auto;
+  width: auto;
+  position: fixed;
+  left:0%;
+  z-index: 10;
+}
+
+.pagelink{
+/*  display:table-cell;
+  text-align:center;
+  vertical-align:middle;*/
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  /*display: block;*/
+  left:0px;
+  width:25px;
+  height:25px;
+  padding:10px;
+  background-color: white;
+  z-index: 2;
+  font-size: 24px;
+  /*text-align: justify;*/
+  border-top-style: solid;
+  border-right-style: solid;
+  border-bottom-style: solid;
  /*border-style: solid;*/
  border-width: 1px;
  border-color: #371F10;
@ -26,23 +83,45 @@ body {
 .pagelink:hover{
  background-color: #0BEFEB;
 }
+
+.pagelink{
+  background-color: white;
+}
+
 .pagelink a{
  text-decoration: none;
 }

+/*.pagelink a:active{
+  background-color: #0BEFEB;
+}
+
+.active .pagelink:after{
+  background-color: #0BEFEB;
+}*/
+
+.pagename{
+align-items: center;
+width:auto;
+text-align: left;
+}
+
 .pagelink .pagename{
  display: inline;
  position: absolute;
  width: auto;
  padding: 5px;
-  margin-left: 25px;
-  font-size: 13px;
+  margin-left: 160px;
+  font-size: 12px;
  background-color: white;
  visibility: hidden;
+  white-space: nowrap;
 }

 .pagelink:hover .pagename{
  visibility: visible;
+  position: absolute;
+  z-index: 20;
 }

 h1 {
@ -68,3 +147,4 @@ a:hover {
 }

 a.image {cursor: default!important;} /* KEEP THIS: it is important to avoid images to seeming like links */
+
--- a/static/index.css
+++ b/static/index.css
@ -38,31 +38,8 @@ display: inline-block;
    line-height: 1.3;
 }
    
-/*.smw-row:nth-child(odd) {
-    background-color: purple;
-    float: right;
-}
-.smw-row:nth-child(odd) img {
-    float: right;
-}
-.smw-row:nth-child(even) {
-    background-color: orange;
-    float: left;
-}*/
-.nav .active{
-    /*font-family: helvetica;*/
-    margin-left: 20px;
-    color: black;
-    text-decoration: underline;
-}
-
-.navtab{/*
-    font-family: helvetica;*/
-    margin-left: 20px;
-    color: grey; 
-}

-.pagelink{
+/*.pagelink{
  position: fixed;
  display: inline;
  left:0px;
@ -76,7 +53,7 @@ display: inline-block;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
-  /*border-style: solid;*/
+  /*border-style: solid;
  border-width: 1px;
  border-color: #371F10;
  
@ -102,7 +79,7 @@ display: inline-block;

 .pagelink:hover .pagename{
  visibility: visible;
-}
+}*/

 .tooltip {
  position: relative;
@ -139,34 +116,7 @@ display: inline-block;
  visibility: visible;
 }

-/*ul#nav li{
-    display: inline;
-    list-style: none;
-    margin-left: 10px;
-/*    margin-left: 10%
-    margin-right: 10%;
-    align-content: initial;
-    font-size: 20px; 

-}
-
-ul#nav{
-    padding: 20px;
-    margin-top: 10px;
-    margin-bottom: 20px;
-    background-color: white;
-    top:0px;
-    bottom: 10px;
-    padding-left: 0px;
-    border: none;
-    width: 80vw;
-    /*display: inline;
-    height:20px;
-    /*overflow-x: scroll;
-    left:0px;
-    position: fixed;
-    z-index: 1;
-}*/

 ul#menu li{
    display: inline;
@ -243,12 +193,6 @@ display: inline-block;
 box-shadow: 10px 10px 15px #0BEFEB;
 }

-/*.container {
-margin-left: 40px;
-  margin-top: 20px;
-  overflow: hidden;
-}*/
-


 /* Style the buttons */
--- a/static/orgs.css
+++ b/static/orgs.css
@ -10,21 +10,6 @@ body {
 	font-size:14px;
 }

-/* Page title */
-h1 {
-	position: fixed;
-	right:0%;
-	top:5%;
-	text-align: right;
-	background-color: #0BEFEB;
-	padding: 3px 35px 3px 10px;
-	z-index: 10;
-	color: black;
-	font-size: 28px;
-	opacity: 0.7;
-	color: #371F10;
-}
-
 /* Organizations list */
 .collapsible{
 	padding-left: 70px;
@ -89,6 +74,9 @@ h1 {
 	margin-top: 10px;
 	height: 60px;
 	width: 60px;
+ 	padding-bottom: 15px;
+ 	font-weight: bold;
+ 	font-size: 17px;
 }

 .scrl:hover {
@ -105,7 +93,7 @@ h1 {
 	border-radius: 6px;
 	padding: 5px 0;
 	font-size: 15px;
-	right: 50px;
+	right: 65px;
 	z-index: 10;
 	position: absolute;
 }
@ -113,3 +101,16 @@ h1 {
 .scrl:hover > .scbt {
 	visibility: visible;
 }
+
+button.up span { 
+	position:relative; bottom: 20%; 
+}
+
+button.down span { 
+	position:relative; left: 60%;
+}
+
+button.bottom span { 
+	position:relative; bottom: 27%;
+	position:relative; left: 27%;
+}
--- a/static/timeline.css
+++ b/static/timeline.css
@ -5,6 +5,21 @@ body{

 h1 {
 	font-family: Roboto Mono;
+	font-size: 40px;
+	margin-top: 1%;
+}
+
+.pagetitle {
+	position: fixed;
+	right:0%;
+	top:5%;
+	text-align: right;
+	background-color: #0BEFEB;
+	padding: 3px 35px 3px 10px;
+	z-index: 10;
+	color: black;
+	font-size: 28px;
+	opacity: 0.7;
 }

 div#body{ width: max-content;}
@ -20,6 +35,11 @@ div#body{ width: max-content;}
 display: inline-block;
 }

+.content {
+	display: flex;
+	margin-right: 5vw;
+}
+
 .indexlink {
 	position: fixed;
 	font-size: 20px;
@ -37,16 +57,8 @@ display: inline-block;
 	text-decoration: none;
 }

-.horizontal-scroll-wrapper {
-	display: inline-table;
-	margin-top: 10vw;
-	width: 20vw;
-	height: 80vw;
-	overflow-y: auto;
-	overflow-x: hidden;
-}
-
 .event {
+	margin-top: 3%;
 	text-align-last: auto;
 	font-family: Roboto Mono;
 	font-size: 10px;
@ -59,23 +71,22 @@ display: inline-block;
 .pubpageinfo {

 	padding-top: 10px;
-	font-size: 10px;
+	font-size: 15px;
 }

 .pubpageinfo:hover {
 	background-color: #0BEFEB;
 	padding: 10px;	
-	font-size: 15px;	
 }

 .thumbborder {
-	box-shadow: 8px 8px 8px #C4BCB9;
-	width: 30%;
+	box-shadow: 10px 10px 15px #C4BCB9;
+	width: 40%;
 	height: auto;
 }

 .thumbborder:hover {
-	box-shadow: 8px 8px 8px #0BEFEB;
+	box-shadow: 10px 10px 15px #0BEFEB;
 	width:100%; 
 	transition:0.5s;
 	height: auto;
--- a/static/title.css
+++ b/static/title.css
@ -11,7 +11,7 @@ body {
    top: 25%;
    width: 82%;
    height: auto;
-	  right: 8%;
+    left: 7%;
    text-align: : center;
    z-index: 5;

@ -34,12 +34,12 @@ body {

 a:link {
  text-decoration: none;
-  color: black;
+  color: #371F10;
 }

 a:visited {
  text-decoration: none;
-  color: black;
+  color: #371F10;
 }

 a:hover {
@ -49,16 +49,15 @@ a:hover {


 h1 {
-	position: fixed;
+  /*position: fixed;
  right:0%;
  top:5%;
  text-align: right;
  background-color: rgba(11,239,235,0.7);
  padding: 3px 35px 3px 10px;
  z-index: 10;
-	color: black;
  font-size: 27px;
-	color: #371F10;
+  color: #371F10;*/
  max-width: 90%;
 }

@ -71,29 +70,27 @@ h2{
  padding: 3px 35px 3px 10px;
  z-index: 10;
  font-size: 20px;
-  	opacity: 0.7;
  color: #371F10;
 }

-.viewnav {
+/*.viewnav {
  position: fixed;
-	bottom: 0%;
-	left: 0%;
+  bottom: 1%;
+  right: 1%;
  background-color: transparent;
-	width: 10%;
-	z-index: 10;
-	opacity: 0.7;
+  width: 5%;
+  z-index: 9;
 }

 .collapsible2 {
  background-color: transparent;
-	color: red;
+  color: #371F10;
  cursor: pointer;
  padding: 0px;
  width: 100%;
  height: auto;
  border: none;
-	text-align: left;
+  text-align: center;
  outline: none;
  font-size: 40px;
  z-index: 10;
@ -109,60 +106,89 @@ h2{
  position: absolute;
  max-height: 0;
  overflow: hidden;
-  width: 100%;
+  width: auto;
  transition: max-height 0.3s ease-out;
  background-color: transparent;
  color: white;
  z-index: 10;
  text-align: center;
-  bottom: 50%;
-}
+  bottom: 100%;
+}*/


 /* Grid buttons */

 .header {
  
-	position: absolute;
-  	text-align: center;
-  	padding: 32px;
-  	top: 30%;
+    position: fixed;
+   /* text-align: center;*/
+    bottom: 0%;
    right: 0%;
    z-index: 9;
-  	width: auto;
-  	height: auto;
-  	background-color: pink;
+    width: 110px;
+    height: 50px;
+    background-color: white;
+    color: #371F10;
+
 }

 p {
  display: inline-block;
-	position: relative;
+  /*position: relative;*/
+  color: #371F10;
+}
+
+.btnov {
+  position: fixed;
+  display: inline;
+  right: 0px;
+  bottom:0px;
+  border: none;
+  width: 50px;
+  height: 50px;
+  text-align: center;
+ /* padding: 5px 5px;*/
+  background-color: transparent;
+  cursor: pointer;
+  font-size: 20px;
+  z-index: 9;
+  color: #371F10;
+  margin-bottom: 3px;
 }

 .btn {
+  position: fixed;
+  display: inline;
+  right: 60px;
+  bottom:0px;
  border: none;
-  outline: none;
-  width: 110px;
+  width: 50px;
+  height: 50px;
  text-align: center;
-  padding: 12px 0px;
  background-color: transparent;
  cursor: pointer;
-  font-size: 18px;
-  margin-right: 5px;
+  font-size: 30px;
  z-index: 9;
-  border: solid 1px;
+  color: #371F10;
 }

 .btn:hover {
-  background-color: black;
-  color: blue;
+  color:rgba(11,239,235);
+/*  color: blue;*/
 }

 .btn:active {
-  background-color: black;
-  color: white;
+  color:rgba(11,239,235);
 }

+.btnov:hover {
+  color:rgba(11,239,235);
+/*  color: blue;*/
+}
+
+.btnov:active {
+  color:rgba(11,239,235);
+}

 .metadata{
  position: fixed;
@ -183,7 +209,7 @@ p {
  display: inline-block;
  right:0%;
  background-color: white;
-  color: black;
+  color: #371F10;
  cursor: pointer;
  padding: 18px;
  width: 3%;
@ -198,8 +224,8 @@ p {
 }

 .active, .collapsible:hover {
-  background-color: #0BEFEB;
-
+  color: #371F10;
+  background-color:rgba(11,239,235);
 }

 .content {
@ -210,7 +236,7 @@ p {
  width: auto;
  transition: max-height 0.2s ease-out;
  background-color: white;
-  color: black;
+  color: #371F10;
  z-index: 10;
  text-align: left;
  opacity: 0.7;
@ -223,7 +249,7 @@ a.content:link {
 }

 .metadata_organization {
-	font-size: 14px;
+  /*font-size: 14px;*/
 }

 .fbtn {
--- a/templates/orgs.html
+++ b/templates/orgs.html
@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" id="top">
+<html lang="en">
 <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="{{ staticpath }}/static/archive.css" />
@ -10,13 +10,13 @@
    <title>{{ page.name }}</title>
 </head>
 <body>
-    <h1>&#9636; {{ page.name }}</h1>
+    <h1>{{ page.name }}</h1>

    <div class="scrollcolumn">
-      <button onclick="scrollWin(0,-5000)" class="up scrl">&#8988;<span class="scbt">Up</span></button>
-      <button onclick="scrollWin(0,5000)" class="down scrl">&#8991;<span class="scbt">Down</span></button>
-      <button onclick="scrollToTop()" class="top scrl">&#9140;<span class="scbt">Top</span></button>
-      <button onclick="scrollToBottom()" class="bottom scrl">&#9141;<span class="scbt">Bottom</span></button>
+      <button onclick="scrollWin(0,-5000)" class="up scrl"><span>&#8988;</span><span class="scbt">Up</span></button>
+      <button onclick="scrollWin(0,5000)" class="down scrl"><span>&#8991;</span><span class="scbt">Down</span></button>
+      <button onclick="scrollToTop()" class="top scrl"><span>&#9140;</span><span class="scbt">Top</span></button>
+      <button onclick="scrollToBottom()" class="bottom scrl"><span>&#9141;</span><span class="scbt">Bottom</span></button>
    </div>
    
    <div id="body">{{ body|safe }}</div>
--- a/templates/timeline.html
+++ b/templates/timeline.html
@ -8,7 +8,7 @@
    <title>Timeline</title>
 </head>
 <body>
-    <h1>Timeline</h1>
+    <div class="pagetitle">&#9481;Timeline</div>
    <div id="body">{{ body|safe }}</div>

 </body>
--- a/templates/title.html
+++ b/templates/title.html
@ -13,15 +13,15 @@

    <h1>{{ page.name }} &#8629;</h1>

-<div class="viewnav">
-  <div class="collapsible2 viewbtn">&#10063;</div>
-  <div class="content2">
-	<!-- <div class="header" id="myHeader"> -->
-    <p><button class="btn" onclick="myFunction()">&#9607;</button></p>
-    <p><button class="btn" onclick="myFunction2()">&#9619;</button></p>
+<!-- <div class="viewnav">
+  <div class="collapsible2 viewbtn">&#9634;</div>
+  <div class="content2"> -->
+	<div class="header" id="myHeader">
+    <p><button class="btn clicked" onclick="myFunction()">&#9635;</button></p>
+    <p><button class="btnov clicked" onclick="myFunction2()">&#9580;&#9580;</button></p>
    </div>
-  </div> 
-<div>
+<!--   </div> 
+<div> -->
  
 	<div id="body">{{ body|safe }}</div>
  
@ -41,20 +41,7 @@ for (i = 0; i < coll.length; i++) {
  });
 }

-var coll = document.getElementsByClassName("collapsible2");
-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>