From f59f9f76f1cde12d98472444479d8ab5bf1f244e Mon Sep 17 00:00:00 2001
From: Sandra <you@example.com>
Date: Tue, 7 Apr 2020 00:51:28 +0200
Subject: [PATCH] css and js for title page

---
 static/archive.css |  6 +++++
 static/title.css   | 64 ++++++++++++++++++++++++++++++++++++++++++++++
 static/title.js    | 25 ++++++++++++++++++
 3 files changed, 95 insertions(+)
 create mode 100644 static/title.css
 create mode 100644 static/title.js

diff --git a/static/archive.css b/static/archive.css
index 6e681c2..9229388 100644
--- a/static/archive.css
+++ b/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;
 }
\ No newline at end of file
diff --git a/static/title.css b/static/title.css
new file mode 100644
index 0000000..a537ca1
--- /dev/null
+++ b/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;
+}
+
diff --git a/static/title.js b/static/title.js
new file mode 100644
index 0000000..d9ba108
--- /dev/null
+++ b/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)";
+}