diff --git a/js_log.txt b/js_log.txt
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/static/javascript.js b/static/javascript.js
index a00145869c461815d2eecee1aa8c9460d202523a..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 100644
--- a/static/javascript.js
+++ b/static/javascript.js
@@ -1,21 +0,0 @@
- var TopDistance = 120;
- let elements = [document.getElementById('one'),
- document.getElementById('two'),
- document.getElementById('three')];
- window.goTo = function(el){
- document.documentElement.scrollTop += el.getBoundingClientRect().top - TopDistance;
- }
- function Highlight(el, subtitle){
- if (el.getBoundingClientRect().top < TopDistance + 1 && el.getBoundingClientRect().bottom > TopDistance){
- subtitle.style.color = "#18E9EE";
- }
- else{
- subtitle.style.color = "#F8F0E8";
- }
- }
- function HighlightCheck(){
- Highlight(elements[0], document.getElementById('subtitle1'));
- Highlight(elements[1], document.getElementById('subtitle2'));
- Highlight(elements[2], document.getElementById('subtitle3'));
- }
- window.addEventListener("scroll", HighlightCheck);
diff --git a/static/style.css b/static/style.css
index 715c5edba236a1336198ee9592ad39958d912c7d..a3eda6b9b981a1daa6cb33b42eb93d90c6765c9a 100644
--- a/static/style.css
+++ b/static/style.css
@@ -94,18 +94,25 @@ footer a:hover { color: white; text-decoration: underline; }
/* Style the sidenav */
.sidebar{
border-left: 8px solid;
- border-left-color: currentcolor;
+ border-left-color: var(--darkpurple);
border-color: var(--highlight);
+ color: var(--darkpurple);
list-style-type: none;
line-height: 280%;
margin: 0px 0px;
padding: 0px 0px;
}
-.sidebarEntry {
- font-size: 20px;
- color: #191308;
- background: linear-gradient(var(--highlight) 0 0) var(--p, 0) / var(--p, 0) no-repeat;
- transition: .2s, background-position 0s;
+.sidebar>div {
+ overflow: hidden;
+ text-align: center;
+ cursor: pointer;
+}
+.sidebar>div>span{
+ padding: 1rem;
+}
+.sidebar>div>span:hover{
+ font-size: 1.2rem;
+ transition: all 0.1s linear;
}
/*galleries */
@@ -212,3 +219,5 @@ svg text{
fill-opacity: 1;
}
}
+
+
diff --git a/wiki/layout.html b/wiki/layout.html
index e691d595395a45b3d7030c8f983457ca12e374e1..bff753567c0b8a00b76f4e04a0d9e5e423f175d0 100644
--- a/wiki/layout.html
+++ b/wiki/layout.html
@@ -1,5 +1,5 @@
<!doctype html>
-<html lang="en">
+<html lang="en" >
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
@@ -19,7 +19,7 @@
<script src="{{ url_for('static', filename = 'd3.min.js') }}"></script>
- <script src="{{ url_for('static', filename = 'javascript.js') }}"></script>
+ <!--script src="{{ url_for('static', filename = 'javascript.js') }}"></script-->
<script type="text/javascript" src="{{ url_for('static', filename = 'vis-network.min.js') }}"></script>
@@ -28,7 +28,7 @@
</head>
-<body>
+<body >
<script> AOS.init(); </script>
<!-- Navigation -->
{% include 'menu.html' %}
@@ -61,5 +61,53 @@
<!-- Bootstrap Bundle with Popper -->
<script src="{{ url_for('static', filename = 'bootstrap.bundle.min.js') }}"></script>
+
+ <script>
+ /*for sidebar animation - must stay here in layout or else it doesn not work!! */
+ var TopDistance = 100;
+ /*Elements of the sidebar*/
+ let elements = [document.getElementById('one'),
+ document.getElementById('two'),
+ document.getElementById('three')];
+ /* */
+ window.goTo = function(el){
+ document.documentElement.scrollTop += el.getBoundingClientRect().top - TopDistance;
+ }
+ /* */
+ function Highlight(el, subtitle){
+ /*getBoundingClientRect -> get the position of an element relative to the browser's viewport */
+ /* el.getBoundingClientRect().top < TopDistance + 1 && el.getBoundingClientRect().bottom > TopDistance */
+ if (el.getBoundingClientRect().top < TopDistance + 1 && el.getBoundingClientRect().bottom > TopDistance){
+ subtitle.style.color = "#F4CC1E";
+ subtitle.style.backgroundColor = "#850F78";
+ subtitle.style.borderRadius = "15px";
+ console.log("subtitle: ",subtitle)
+ console.log("style: ", subtitle.style)
+ console.log("color: ",subtitle.style.color)
+ console.log("backcolor: ",subtitle.style.backgroundColor)
+
+ border-radius
+
+ }
+ else{
+ subtitle.style.color = "#850F78";
+ subtitle.style.backgroundColor = "";
+ }
+ }
+ /* */
+ function HighlightCheck(){
+ Highlight(elements[0], document.getElementById('subtitle1'));
+ Highlight(elements[1], document.getElementById('subtitle2'));
+ Highlight(elements[2], document.getElementById('subtitle3'));
+ console.log("function HighlightCheck")
+ }
+ /* */
+ window.addEventListener("scroll", HighlightCheck);
+
+ // To check correct function
+ console.log("The Script runs") //Shoul dbe visible on console
+ console.log(window.frames) //Should be the url
+ console.log(window.document.getElementById('subtitle1')) //should not be "null" !
+ </script>
</body>
</html>
diff --git a/wiki/pages/example.html b/wiki/pages/example.html
index 399d9567cbfa4074ee8792d396ba395c4e127aff..538b0e2d48526ec1c16d8c118bd3b741f6230398 100644
--- a/wiki/pages/example.html
+++ b/wiki/pages/example.html
@@ -5,7 +5,7 @@
{% block sidebar %}
-<div class="pagenav">
+<div class="sidebar">
<div onclick="goTo(document.getElementById('one'))"><span id="subtitle1">Untertitel Eins</span></div>
<div onclick="goTo(document.getElementById('two'))"><span id="subtitle2">Untertitel Zwei</span></div>
<div onclick="goTo(document.getElementById('three'))"><span id="subtitle3">Untertitel Drei</span></div>
@@ -20,25 +20,34 @@
</text>
</svg>
<div class="h">
- <h2 id="one">Untertitel Eins </h2>
- <hr>
- <p>
- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
- </p>
+ <div id="one">
+ <h2>Untertitel Eins</h2>
+ <hr>
+ <p>
+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+ </p>
+ </div>
</div>
<div class="h">
- <h2 id="two">Untertitel Zwei </h2>
- <hr>
- <p>
- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
- </p>
+ <div id="two">
+ <h2>Untertitel Zwei</h2>
+ <hr>
+ <p>
+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+ </p>
+ </div>
</div>
<div class="h">
- <h2 id="three">Untertitel Drei </h2>
- <hr>
- <p>
- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
- </p>
+ <div id="three"> <h2>Untertitel Drei</h2>
+ <hr>
+ <p>
+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+ </p>
+ </div>
</div>
<div class="col">