dumpwiki.py

@@ -1,7 +1,6 @@
 import os, json, sys
 from mwclient import Site
 from jinja2 import Template
-from shutil import copy
 import html5lib
 from functions import Colors
 import argparse
@@ -30,16 +29,6 @@ print(args)
 site = Site(host=args.host, path=args.path)
 wd = os.path.dirname(os.path.abspath(__file__))  # working directory
 wd_name = os.path.split(wd)[-1] # name of dir running script
-
-# copy static/ to ../archive/static
-repo_static_path = './static'
-archive_static_path = os.path.join(args.output, repo_static_path)
-os.makedirs(archive_static_path, exist_ok=True) # create static/ dir in archive
-for static_file in os.listdir(path='./static'):
-    copy(src=os.path.join(repo_static_path, static_file),
-         dst=os.path.join(archive_static_path, static_file))
-
-
 with open('login.txt', 'r') as login:  # read login user & pwd
     loginlines = login.read()
     user, pwd = loginlines.split('\n')
@@ -67,24 +56,23 @@ def filenameforlink(href):
     return href
 
 
-def rewriteimglinks(tree, page):
+def rewriteimglinks(tree):
-    # invoke after img src has been rewritten
+    # t = html5lib.parseFragment(html, treebuilder = "etree", namespaceHTMLElements = False)
-    # To: remove links to wiki File on all pages
+
-    # but Overview_main_page page where link to publication page is added
+    # invoke after img src have be rewritten
-    if page.name == 'Overview main page':
+    # remove links to wiki File: pages
-        for div_parent in tree.findall(".//div[@class='tooltip']"):
+    for a in tree.findall(".//a[@class='image']"):  # select img wrapping a
-            anchor_of_img = div_parent.find(".//div/a")
+        href = a.attrib.get('href')
-            if anchor_of_img.find(".//img") is not None: # <a> needs child <img>
+        if a.findall(".//img"):  # ensure a has child: img
-                a_tag = div_parent.find(".//p/span/a")
+            img = a.find(".//img")
-                publication_href = a_tag.attrib.get('href')
+            img_src = img.attrib['src']
-                anchor_of_img.attrib['href'] = publication_href
+            a.attrib['href'] = img_src  # 'javascript:void(0);'  # disable href
-    else:
+            a.attrib['target'] = "_blank"
-        for a in tree.findall(".//a[@class='image']"):  # select img wrapping a
+            print(a)
-            if a.findall(".//img"):  # ensure a has child: img
+            print(ET.tostring(a, method="html", encoding="unicode"))
-                a.attrib['href'] = 'javascript:void(0);'  # disable href
     return tree
 
-def rewritelinks(html):
+def rewritelinks (html):
     t = html5lib.parseFragment(html, treebuilder = "etree", namespaceHTMLElements = False)
     for a in t.findall(".//*[@href]"):
         linkclass = a.attrib.get("class", "")
@@ -100,7 +88,7 @@ def rewritelinks(html):
     return html
 
 
-def rewriteimgs(html, page):
+def rewriteimgs(html):
     t = html5lib.parseFragment(html, treebuilder = "etree", namespaceHTMLElements = False)
 
     # replace images url with local image in ../images
@@ -131,7 +119,7 @@ def rewriteimgs(html, page):
         img.attrib['width'] = ""
         img.attrib['height'] = ""
 
-    t = rewriteimglinks(tree=t, page=page)
+    t = rewriteimglinks(tree=t)
 
     html = ET.tostring(t, method="html", encoding="unicode")
     return html
@@ -140,8 +128,9 @@ def dumppage(p, template, rewrite_images=True):
     htmlsrc = site.parse(page=p.name)['text']['*']
     htmlsrc = rewritelinks(htmlsrc)
     if rewrite_images:
-        htmlsrc = rewriteimgs(html=htmlsrc, page=p)
+        htmlsrc = rewriteimgs(htmlsrc)
-    html = template.render(page=p, body=htmlsrc, staticpath='.')
+    # TODO: ANdre structure of archive: from ./archive/0 to: ./archive ./0
+    html = template.render(page=p, body=htmlsrc, staticpath=f'../{wd_name}')
     with open(os.path.join(args.output, filenameforpage(p)), 'w') as f:
         f.write(html)
         # print(html, file=f)
@@ -156,7 +145,7 @@ for cat in publish.members():
                 template = Template(templatefile.read())
         except FileNotFoundError:
             with open('templates/default.html') as templatefile:
-                template = Template(templatefile.read())
+                template = Template(templatefile.read())        
         for p in cat.members():
             print(p)
             dumppage(p, template, rewrite_images=not args.skipimages)
@@ -165,7 +154,7 @@ for cat in publish.members():
     else:
         print("Dumping page {}".format(cat.page_title))
         with open('templates/default.html') as templatefile:
-            template = Template(templatefile.read())
+            template = Template(templatefile.read())        
         dumppage(cat, template, rewrite_images=not args.skipimages)
 
 

static/about.css

@@ -1,73 +0,0 @@
-body {
-    background-color: #F4EBE8;
-    font-family: Roboto Mono;
-}
-
-.projtextcont{
-display: block;
-	/*align-items: center;
-  justify-content: center*/
-  color:#371F10;
-  margin-left:200px;
-
-
-}
-
-.projtext{
-	width: 85%;
-	display: block;
-
-}
-
-h1{
-	display: block;
-	width:50%;
-}
-
-h2{
-	display: block;
-	width:70%;
-	text-align: justify;
-}
-
-.pagelink{
-  position: fixed;
-  display: inline;
-  left:0px;
-  width:20px;
-  height:20px;
-  padding:10px;
-  background-color: white;
-  z-index: 10;
-  font-size: 18px;
-  text-align: center;
-  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;
-}

static/archive.css

@@ -1,59 +1,6 @@
 body {
     background-color: #aaa4a0;
-    color: #371F10;
+    font-family: Arial, Helvetica, sans-serif;
-    font-family: Roboto Mono, monospace;
-}
-.pagelink{
-  position: fixed;
-  display: inline;
-  left:0px;
-/*  width:20px;
-  height:20px;*/
-  padding: 0px 5px 0px 5px;
-  background-color: white;
-  z-index: 10;
-  font-size: 30px;
-  text-align: center;
-  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;
-}
-
-h1 {
-	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;
-	font-size: 28px;
 }
 
 a, a:visited{
@@ -65,5 +12,3 @@ a:hover {
 	text-decoration: none;
   	color: blue;
 }
-
-a.image {cursor: default!important;} /* KEEP THIS: it is important to avoid images to seeming like links */

static/index.css

@@ -5,7 +5,7 @@ body {
     display: inline-table;
     font-family: Roboto Mono;
     bottom: 20px;
-    scrollbar-width: thin;
+
 }
 
 /*.img {
@@ -64,40 +64,27 @@ display: inline-block;
 
 .pagelink{
   position: fixed;
-  display: inline;
+  display: inline-block;
   left:0px;
   width:20px;
-  height:20px;
   padding:10px;
   background-color: white;
   z-index: 10;
-  font-size: 18px;
+  font-size: 15px;
-  text-align: center;
+  border-style: solid;
-  border-top-style: solid;
-  border-right-style: solid;
-  border-bottom-style: solid;
-  /*border-style: solid;*/
   border-width: 1px;
-  border-color: #371F10;
+  border-color: #371F10
-  
-}
-
-.pagelink:hover{
-  background-color: #0BEFEB;
-}
-.pagelink a{
-  text-decoration: none;
 }
 
 .pagelink .pagename{
-  display: inline;
+  display: block;
   position: absolute;
-  width: auto;
+  width:auto;
   padding: 5px;
-  margin-left: 25px;
+  font-size: 10px;
-  font-size: 13px;
   background-color: white;
   visibility: hidden;
+  font-size: 15px;
 }
 
 .pagelink:hover .pagename{
@@ -125,11 +112,11 @@ display: inline-block;
   padding: 10px;
   /*border-radius: 6px;*/
 /*  font-family: CothamSans;*/
-  font-size: 16px; 
+  font-size: 18px; 
   position: absolute;
   /*top: 0px;*/
   z-index: 1;
-  margin-top:-10px;
+  margin-top: 0px;
   /*vertical-align: top;*/
   line-height: 1.3;
   word-wrap:break-word
@@ -139,12 +126,12 @@ display: inline-block;
   visibility: visible;
 }
 
-/*ul#nav li{
+ul#nav li{
     display: inline;
     list-style: none;
     margin-left: 10px;
 /*    margin-left: 10%
-    margin-right: 10%;
+    margin-right: 10%;*/
     align-content: initial;
     font-size: 20px; 
 
@@ -160,13 +147,13 @@ ul#nav{
     padding-left: 0px;
     border: none;
     width: 80vw;
-    /*display: inline;
+    /*display: inline;*/
     height:20px;
-    /*overflow-x: scroll;
+    /*overflow-x: scroll;*/
     left:0px;
     position: fixed;
     z-index: 1;
-}*/
+}
 
 ul#menu li{
     display: inline;
@@ -178,29 +165,31 @@ ul#menu li{
 }
 
 ul#menu{
-    margin-left: 45px;
+    margin-left: 10px;
     margin-right: 10px;
-    top:-15px;
+    top:0px;
     bottom: 10px;
     padding-left: 0px;
     border: none;
-    width: 80vw;
+    width: 85vw;
+    /*display: inline;*/
     height:100%;
+    /*overflow-x: scroll;*/
     left:0px;
     margin-bottom: 20px;
     padding-bottom: 20px;
     position: absolute;
-    scrollbar-width: thin;
+    /*z-index: -1;   */
 }
 
 
 div#myBtnContainer{
- /*background-color: #F4EBE8;*/
+ /* background-color: white;*/
    /*margin-top: 20px;*/
    margin-left: 30px;
    margin-bottom: 30px;
     border: none;
-    max-width: 15vw;
+    width: 15vw;
     display: inline;
    /* visibility: hidden;*/
     height:100%;
@@ -208,24 +197,19 @@ div#myBtnContainer{
     top:0px;
     position: fixed;
     padding:10px;
-    overflow-y: hidden;
+    overflow-y: scroll;
     /*z-index: -1;*/
-overflow-y: scroll;
-  scrollbar-width: thin;
-   /* overflow-y: hidden;*/
-}
 
-div#myBtnContainer:hover{
+   /* overflow-y: hidden;*/
-  
 }
 
-/*div#bigbtncontainer{
+div#bigbtncontainer{
   overflow-y: hidden;
-  -ms-overflow-style: none;   Internet Explorer 10+ 
+  -ms-overflow-style: none;  /* Internet Explorer 10+ */
   scrollbar-width: thin;
-  /*overflow-y: scroll;
+  /*overflow-y: scroll;*/
   
-}*/
+}
 /*div#myBtnContainer:hover{
   background-color: white;
   z-index: 1;
@@ -293,5 +277,3 @@ margin-left: 40px;
   height: 2px;
   background-color: #0BEFEB;
 }
-
-a.image {cursor: pointer!important;} /* KEEP THIS: show imgs as link in Overview */

static/orgs.css

@@ -1,115 +1,151 @@
-
-#top {
-	padding-top: 20px;
-	padding-left: 50px;
-}
-
 body {
 	background-color: #F4EBE8;
 	font-family: Roboto Mono;
-	font-size:14px;
+	font-size:11.5px;
+
 }
 
-/* Page title */
 h1 {
 	position: fixed;
 	right:0%;
-	top:5%;
+	top:3%;
 	text-align: right;
 	background-color: #0BEFEB;
-	padding: 3px 35px 3px 10px;
+	padding: 15px 85px 15px 30px;
 	z-index: 10;
-	color: black;
+	color: #371F10;
 	font-size: 28px;
 	opacity: 0.7;
-	color: #371F10;
 }
 
-/* Organizations list */
+/*
+h1 {
+	position: fixed;
+	right:0%;
+	top:3%;
+	text-align: right;
+	background-color: transparent;
+	padding: 10px 30px 30px 20px;
+	z-index: 10;
+	color: black;
+	font-size: 28px;
+	border: 1px solid blue;
+	border-right: none;
+}
+*/
+
 .collapsible{
 	padding-left: 70px;
-    line-height: 1;
+	line-height: 0%;
 	color: #371F10;
 }
 
 .active, .collapsible:hover {
-	color: blue;
+	color: red;
 	cursor: pointer;
 }
 
 .active, .collapsible:after {
 	padding-top: 10px;
+	color: #054646;
 	padding-left: 85px;
-	color: #371F10;
-	font-weight: bold;
 }
 
-/* Droped-down publication links */
 .content {
 	max-height: 0;
    	overflow: hidden;
     transition: max-height 0.2s ease-out;
     padding-left: 50px;
-    background-color: #371F10;
+    background-color: #86a2a2;
     position: relative;
     line-height: 30px;
     margin-left: 85px;
-    color: white;
-    font-size: 14px;
 }
 
-.content a {
+.up {
-	color:white;
+	position: fixed;
-	text-decoration: none;
+	font-weight: bolder;
+	bottom: 0%;
+	right: 15.1%; 
+	background-color: blue;
+	z-index: 10;
+	padding: 10px;
+	border: none; 
 }
 
-.content a:hover {
+.down {
-	color: blue;
+	position: fixed;
-	cursor: pointer;
+	font-weight: bolder;
+	bottom: 0%;
+	right: 12.8%; 
+	background-color: blue;
+	z-index: 10;
+	padding: 10px;
+	border: none; 
 }
 
-/* Scroll column */
+.top {
-.scrollcolumn {
 	position: fixed;
-	display: inline;
+	font-weight: bolder;
-	top:35%;
+	bottom: 0%;
-	right:0%;
+	right: 17.3%;
-	width: 60px;
+	background-color: blue;
-	outline: none;
 	z-index: 10;
-	text-align: center;
+	padding: 10px;
+	border: none; 
 }
 
-/* Scroll buttons */
+.bottom {
-.scrl {
+	position: fixed;
-	background-color: white;
+	font-weight: bolder;
-	cursor: pointer;
+	bottom: 0%;
-	border:none;
+	right: 10%;
-	font-size: 15px;
+	background-color: blue;
-	margin-top: 10px;
+	z-index: 10;
-	height: 60px;
+	padding: 10px;
-	width: 60px;
+	border: none; 
 }
 
-.scrl:hover {
+.indexlink {
-	background-color: #0BEFEB;
+	position: fixed;
+	text-decoration: none;
+	font-size: 40px;
+	bottom: 0%;
+	right: 0%;
+	background-color: transparent;
+	border: none;
+	border-right-color: transparent;
+	z-index: 10;
+	padding: 0px 20px 10px 10px;
+	border: none;
 }
 
-/* Scroll button title */
+.timeline {
-.scbt {
+	position: fixed;
-	visibility: hidden;
+    font-size: 20px;
-	width: 120px;
+	bottom: 0%;
-	background-color: black;
+	right: 3%;
-	color: #fff;
+	background-color: transparent;
-	text-align: center;
+	border: none;
-	border-radius: 6px;
+	border-right-color: transparent;
-	padding: 5px 0;
-	font-size: 15px;
-	right: 50px;
 	z-index: 10;
-	position: absolute;
+	padding: 0px 30px 20px 10px;
+	border: none;
+}
+ 
+.timeline a {
+	text-decoration: none;
+}
+
+.indexlink a {
+	text-decoration: none;
 }
 
-.scrl:hover > .scbt {
+#top {
-	visibility: visible;
+	padding-top: 42px;
+}
+
+.up:hover, .down:hover, .top:hover, .bottom:hover {
+	cursor: pointer;
+	color: white;
 }

static/timeline.css

@@ -1,11 +1,4 @@
-body{ 
+body{ width: max-content;}
-	width: max-content;
-	background-color: #F4EBE8;
-}
-
-h1 {
-	font-family: Roboto Mono;
-}
 
 div#body{ width: max-content;}
 
@@ -20,21 +13,16 @@ div#body{ width: max-content;}
 display: inline-block;
 }
 
-.indexlink {
+.content {
+	border-style: solid 1px black;
+	background-color: red;
+	color: #444;
+	cursor: pointer;
+	padding: 5px;
 	position: fixed;
-	font-size: 20px;
+	font-size: 15px;
-	bottom: 0%;
+    z-index: +1;
-	right: 3%;
+    font-family: Times New Roman;
-	background-color: transparent;
-	border: none;
-	border-right-color: transparent;
-	z-index: 10;
-	padding: 0px 30px 20px 10px
-	border: none;
-}
-
-.indexlink a {
-	text-decoration: none;
 }
 
 .horizontal-scroll-wrapper {
@@ -48,35 +36,58 @@ display: inline-block;
 
 .event {
 	text-align-last: auto;
-	font-family: Roboto Mono;
+	font-family: Arial;
 	font-size: 10px;
-	padding-left: 5vw;
+/* 	padding-top: 5vw; */
+	 padding-left: 5vw;
 	display: inline-block;
-	width:200px;
+	width:400px;
 	vertical-align: top;
 }
 
-.pubpageinfo {
-
-	padding-top: 10px;
-	font-size: 10px;
-}
-
-.pubpageinfo:hover {
-	background-color: #0BEFEB;
-	padding: 10px;
-	font-size: 15px;	
-}
-
 .thumbborder {
-	box-shadow: 8px 8px 8px #C4BCB9;
+/*	display: none;*/
 	width: 30%;
 	height: auto;
 }
 
 .thumbborder:hover {
-	box-shadow: 8px 8px 8px #0BEFEB;
 	width:100%; 
 	transition:0.5s;
 	height: auto;
 }
+
+.bar-chart {
+display: table;
+margin-top: 20px;
+}
+
+.row {
+display: table-row;
+}
+
+.row div {
+display: table-cell;
+width: 60px;
+height: 44px;
+border-right: 2px solid rgb(255, 255, 255);
+}
+
+.row .axis-y {
+width: 96px;
+border-right: 1px solid #000;
+vertical-align: top;
+}
+
+.axis-x div {
+border-top: 1px solid #000;
+}
+
+.axis-x .axis-y {
+border: none;
+}
+
+.axis-x div, .axis-y {
+text-align: center;
+font-weight: bold;
+}

static/title.css

@@ -2,16 +2,15 @@ body {
     background-color: #F4EBE8;
     font-family: Roboto Mono;
 }
-
 .grid-container {
   	display: grid;
   	grid-template-columns: repeat(4, 1fr);
   	grid-gap: 10px;
   	position: absolute;
   	top: 25%;
-	  width: 82%;
+	width: 82%;
-	  height: auto;
+	height: auto;
-	  right: 8%;
+	right: 8%;
   	text-align: : center;
   	z-index: 5;
 
@@ -27,6 +26,7 @@ body {
 	position: relative;
 	max-width: 100%;
 	max-height: 100%;
+
 }
 
 
@@ -53,13 +53,12 @@ h1 {
 	right:0%;
 	top:5%;
 	text-align: right;
-	background-color: rgba(11,239,235,0.7);
+	background-color: #0BEFEB;
 	padding: 3px 35px 3px 10px;
 	z-index: 10;
 	color: black;
-	font-size: 27px;
+	font-size: 28px;
-	color: #371F10;
+	opacity: 0.7;
-  max-width: 90%;
 }
 
 h2{
@@ -67,18 +66,18 @@ h2{
 	right: 0%;
 	top: 15%;
 	text-align: left;
-	background-color: rgba(11,239,235,0.7);
+	background-color: #0BEFEB;
+	/*color: black;*/
 	padding: 3px 35px 3px 10px;
 	z-index: 10;
 	font-size: 20px;
   	opacity: 0.7;
-  	color: #371F10;
 }
 
 .viewnav {
 	position: fixed;
-	bottom: 0%;
+	bottom:0%;
-	left: 0%;
+	left:0%;
 	background-color: transparent;
 	width: 10%;
 	z-index: 10;
@@ -87,7 +86,7 @@ h2{
 
 .collapsible2 {
   	background-color: transparent;
-	color: red;
+	color: black;
 	cursor: pointer;
 	padding: 0px;
 	width: 100%;
@@ -222,10 +221,23 @@ a.content:link {
 	color:white;
 }
 
+/*.metadata_links {
+	display: inline-block;
+	width: 100%;
+	position: absolute;
+	right: 0%;
+	padding: 10px;
+	text-align: left;
+	background-color: blue;
+	font-size: 18px;
+
+}*/
+
 .metadata_organization {
 	font-size: 14px;
 }
 
+
 .fbtn {
 	font-style: italic;
 }
@@ -233,7 +245,7 @@ a.content:link {
 .smw-template-furtherresults {
 	display: none;
 }
-/*
+
 .orglink {
 	position: fixed;
 	top: 30%;
@@ -254,7 +266,7 @@ a.content:link {
   padding: 5px 0;
   font-size: 15px;
 
-
+  /* Position the tooltip */
   position: absolute;
   left: 50px;
   z-index: 10;
@@ -284,7 +296,7 @@ a.content:link {
   padding: 5px 0;
   font-size: 15px;
 
-
+  /* Position the tooltip */
   position: absolute;
   left: 50px;
   z-index: 10;
@@ -314,7 +326,7 @@ a.content:link {
   padding: 5px 0;
   font-size: 15px;
 
-
+  /* Position the tooltip */
   position: absolute;
   left: 50px;
   z-index: 10;
@@ -324,4 +336,3 @@ a.content:link {
   visibility: visible;
 }
 
-*/

static/topicformat.css

@@ -1,21 +1,19 @@
 body {
-    background-color: #F4EBE8;
+    background-color: #fcf7e8;
     padding-top: 120px;
     padding-left: 120px;
-    padding-right: 120px;
+    padding-right: 120px
 }
-
 .grid-container {
   	display: inline-grid;
   	grid-template-columns: repeat(8, 1fr);
-  	grid-column-gap: 5px;
+  	grid-column-gap: 10px;
-    grid-row-gap: 120px;
     grid-auto-flow: dense;
   	position: relative;
   	top: 60%;
-    left: 30%
+	width: 96%;
-	  height: auto;
+	height: auto;
-
+	left:2%;
   	text-align: : center;
   	z-index: 5;
 
@@ -27,15 +25,17 @@ body {
 	z-index: 5;
 }
 
+
 .img {
   display: inline-block;
   border-style:  hidden  hidden solid hidden;
-  border-color: #0BEFEB;
+  border-color: #5ce0db;
   height: 500px;
 }
 
 .title {
   display:block;
+  font-family: 'Work Sans', sans-serif;
   font-size: large;
   font-weight: 700;
 }
@@ -45,27 +45,47 @@ body {
   font-weight: normal;
 }
 
+
 .metatext {
   display: inline-block;
   width: 300px;
-  overflow-wrap: break-word;
   border-style: hidden;
 }
 
+
+.thumbborder {
+	position: relative;
+	max-width: 100%;
+	max-height: 100%;
+
+}
+
+
 /*links*/
 
 a:link {
   text-decoration: none;
+  color: black;
 }
 
 a:visited {
   text-decoration: none;
+  color: black;
+}
+
+.metatext:hover a {
+  color: white;
 }
 
 a:hover {
-  background-color: #0BEFEB;
+  text-decoration: underline;
-  opacity: 0.7;
+}
+
+
+.metatext:hover  {
+  background-color: #5ce0db;
   color: white;
+
 }
 
 h1 {
@@ -73,10 +93,225 @@ h1 {
 	right:0%;
 	top:3%;
 	text-align: right;
-	background-color: #0BEFEB;
+	background-color: #5ce0db;
-  opacity: 0.5;
 	padding: 3px 30px 3px 10px;
 	z-index: 10;
+	color: white;
 	font-size: 32px;
 }
 
+h2{
+	position: fixed;
+	right: 0%;
+	top: 15%;
+	text-align: left;
+	background-color: grey;
+	color: black;
+	padding: 3px 3px 3px 30px;
+	z-index: 10;
+	font-size: 20px;
+}
+
+/*.indexlist {
+  position: absolute;
+  top:20%;
+}*/
+
+.viewnav {
+	position: fixed;
+	top:0%;
+	right:0%;
+	background-color: red ;
+	width: 40%;
+	z-index: 10;
+	opacity: 0.7;
+}
+
+.collapsible2 {
+  	background-color: #777;
+	color: white;
+	cursor: pointer;
+	padding: 0px;
+	width: 100%;
+	height: px;
+	border: none;
+	text-align: left;
+	outline: none;
+	font-size: 40px;
+	z-index: 10;
+	margin-top: 0px;
+}
+
+.active, .collapsible2:hover {
+  background-color: #555;
+}
+
+.content2 {
+  position: relative;
+  padding: 0px 18px;
+  max-height: 0;
+  overflow: hidden;
+  width: 50%;
+  transition: max-height 0.2s ease-out;
+  background-color: grey;
+  color: white;
+  z-index: 10;
+  text-align: left;
+}
+
+
+/* Grid buttons */
+
+.header {
+
+	position: absolute;
+  	text-align: center;
+  	padding: 32px;
+  	top: 30%;
+  	right: 0%;
+  	z-index: 9;
+  	width: auto;
+  	height: auto;
+  	background-color: pink;
+}
+
+p {
+	display: block;
+	position: relative;
+}
+
+.btn {
+  border: none;
+  outline: none;
+  width: 110px;
+  text-align: center;
+  padding: 12px 0px;
+  background-color: grey;
+  cursor: pointer;
+  font-size: 18px;
+  margin-right: 5px;
+  z-index: 9;
+}
+
+.btn:hover {
+  background-color: black;
+  color: blue;
+}
+
+.btn:active {
+  background-color: black;
+  color: white;
+}
+
+
+.metadata{
+	position: fixed;
+	top:5%;
+	left:0%;
+	background-color: ;
+	width: 40%;
+	z-index: 10;
+	opacity: 0.7;
+}
+
+.collapsible {
+  background-color: #777;
+  color: white;
+  cursor: pointer;
+  padding: 18px;
+  width: 10%;
+  height: auto;
+  border: none;
+  text-align: right;
+  outline: none;
+  font-size: 15px;
+  z-index: 10;
+  margin-top: 10px;
+}
+
+.active, .collapsible:hover {
+  background-color: #555;
+}
+
+.content {
+  position: relative;
+  padding: 0px 18px;
+  max-height: 0;
+  overflow: hidden;
+  width: 90%;
+  transition: max-height 0.2s ease-out;
+  background-color: grey;
+  color: white;
+  z-index: 10;
+  text-align: right;
+}
+
+a.content:link {
+	color:white;
+}
+
+.metadata_links {
+	display: block;
+	width: 100%;
+	position: relative;
+	right: 0%;
+	padding: 10px;
+	text-align: left;
+	/*background-color: blue;*/
+	font-size: 18px;
+
+}
+
+.metadata_organization {
+	font-size: 14px;
+}
+
+
+.fbtn {
+	font-style: italic;
+}
+
+.smw-template-furtherresults {
+	display: none;
+}
+
+.indexlink {
+	position: fixed;
+	bottom:0%;
+	right:3%;
+	background-color: white;
+	z-index: 10;
+	font-size: 30px;
+}
+
+.timelinelink {
+	position: fixed;
+	bottom:0%;
+	right:10%;
+	background-color: white;
+	z-index: 10;
+	font-size: 30px;
+}
+
+.orglink {
+	position: fixed;
+	bottom:0%;
+	left:10%;
+	background-color: white;
+	z-index: 10;
+	font-size: 30px;
+}
+
+.orglink:hover .hiddentext {
+	visibility: visible;
+}
+
+.hiddentext {
+	visibility: hidden;
+	  width: 120px;
+	  background-color: black;
+	  color: #fff;
+	  text-align: center;
+	  padding: 5px 0;
+	  border-radius: 6px;
+}

templates/about.html

@@ -1,14 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="utf-8">
-    <link rel="stylesheet" href="{{ staticpath }}/static/archive.css" />
-    <link rel="stylesheet" href="{{ staticpath }}/static/about.css" />
-    <script type="text/javascript" src="{{ staticpath }}/static/archive.js"></script>
-    <link href='https://fonts.googleapis.com/css?family=Roboto+Mono' rel='stylesheet' type='text/css'>
-    <title>{{ page.name }}</title>
-</head>
-<body>
-  {{ body|safe }}
-</body>
-</html>

templates/format.html

@@ -5,7 +5,7 @@
     <link rel="stylesheet" href="{{ staticpath }}//static/archive.css" />
     <script type="text/javascript" src="{{ staticpath }}//static/archive.js"></script>
     <link rel="stylesheet" href="{{ staticpath }}//static/topicformat.css" />
-    <link href='https://fonts.googleapis.com/css?family=Roboto+Mono' rel='stylesheet' type='text/css'>
+    <link href="https://fonts.googleapis.com/css?family=Work+Sans&display=swap" rel="stylesheet">
     <title>{{ page.name }}</title>
 </head>
 <body class="title">

templates/language.html

@@ -1,17 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="utf-8">
-    <link rel="stylesheet" href="{{ staticpath }}//static/archive.css" />
-    <script type="text/javascript" src="{{ staticpath }}//static/archive.js"></script>
-    <link rel="stylesheet" href="{{ staticpath }}//static/topicformat.css" />
-    <link href='https://fonts.googleapis.com/css?family=Roboto+Mono' rel='stylesheet' type='text/css'>
-    <title>{{ page.name }}</title>
-</head>
-<body class="title">
-
-    <h1>{{ page.name }}</h1>
-  <div id="body">{{ body|safe }}</div>
-
-</body>
-</html>

templates/orgs.html

@@ -10,15 +10,13 @@
     <title>{{ page.name }}</title>
 </head>
 <body>
-    <h1>&#9636; {{ page.name }}</h1>
+    <h1>&#9636; &nbsp; {{ page.name }}</h1>
+
+    <button onclick="scrollWin(0,5000)" class="down" title="Down">&#8991;</button>
+    <button onclick="scrollWin(0,-5000)" class="up" title="Up">&#8988;</button>
+    <button onclick="scrollToTop()" class="top" title="Top">&#9140;</button>
+    <button onclick="scrollToBottom()" class="bottom" title="Bottom">&#9141;</button>
 
-    <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>
-    </div>
-    
     <div id="body">{{ body|safe }}</div>
       
     <script>

templates/timeline.html

@@ -4,11 +4,10 @@
     <meta charset="utf-8">
     <link rel="stylesheet" href="{{ staticpath }}/static/archive.css" />
     <link rel="stylesheet" href="{{ staticpath }}/static/timeline.css" />
-    <link href='https://fonts.googleapis.com/css?family=Roboto+Mono' rel='stylesheet' type='text/css'>
+    <title>{{ page.name }}</title>
-    <title>Timeline</title>
 </head>
 <body>
-    <h1>Timeline</h1>
+    <h1>{{ page.name }}</h1>
     <div id="body">{{ body|safe }}</div>
 
 </body>

templates/title.html

@@ -14,11 +14,11 @@
     <h1>{{ page.name }} &#8629;</h1>
 
 <div class="viewnav">
-  <div class="collapsible2 viewbtn">&#10063;</div>
+  <div class="collapsible2 viewbtn">&#8632;</div>
   <div class="content2">
 	<!-- <div class="header" id="myHeader"> -->
-    <p><button class="btn" onclick="myFunction()">&#9607;</button></p>
+    <p><button class="btn" onclick="myFunction()">100%</button></p>
-    <p><button class="btn" onclick="myFunction2()">&#9619;</button></p>
+    <p><button class="btn" onclick="myFunction2()">overview</button></p>
     </div>
   </div> 
 <div>

templates/topic.html

@@ -5,7 +5,7 @@
     <link rel="stylesheet" href="{{ staticpath }}//static/archive.css" />
     <script type="text/javascript" src="{{ staticpath }}//static/archive.js"></script>
     <link rel="stylesheet" href="{{ staticpath }}//static/topicformat.css" />
-    <link href='https://fonts.googleapis.com/css?family=Roboto+Mono' rel='stylesheet' type='text/css'>
+    <link href="https://fonts.googleapis.com/css?family=Work+Sans&display=swap" rel="stylesheet">
     <title>{{ page.name }}</title>
 </head>
 <body class="title">