css and js for title page

static/archive.css

@@ -1,8 +1,14 @@
 body {
     background-color: #aaa4a0;
+    font-family: Arial, Helvetica, sans-serif;
 }
 
 a, a:visited{
     color:black;
     text-decoration: underline;
+}
+
+a:hover {
+	text-decoration: none;
+  	color: blue;
 }

static/title.css

@@ -0,0 +1,64 @@
+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;
+}
+

static/title.js

@@ -0,0 +1,25 @@
+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() {
+  document.getElementById("myDIV").style.gridTemplateColumns = "100%";
+}
+
+function myFunction2() {
+  document.getElementById("myDIV").style.gridTemplateColumns = "repeat(4, 1fr)";
+}