title page css js

static/title.css

@@ -1,67 +1,3 @@
-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;
-}
-
-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;
-}
-
-.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;
-}
-
-.metadata_links {
-	display: block;
-	width: 100%;
-	position: relative;
-	right: 0%;
-	padding: 10px;
-	text-align: left;
-	/*background-color: blue;*/
-	font-size: 18px;
-}
-
-.fbtn {
-	font-style: italic;
-}
-
 
 .grid-container {
   	display: grid;
@@ -95,6 +31,53 @@ h2{
 
 }
 
+/*links*/
+
+a:link {
+  text-decoration: none;
+  color: black;
+}
+
+a:visited {
+  text-decoration: none;
+  color: blue;
+}
+
+a:hover {
+	text-decoration: none;
+  	color: blue;
+}
+
+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;
+}
+
+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%;
+}
+
+
 /* Grid buttons */
 
 .header {
@@ -136,3 +119,68 @@ p {
   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;
+}
+
+.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;
+}

static/title.js

@@ -1,19 +1,3 @@
-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";
-    } 
-  });
-}
-
-
 // image grid
 
 function myFunction() {

templates/title.html

@@ -18,6 +18,21 @@
     </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>
 </html>