diff --git a/static/title.css b/static/title.css index 868340b..4e1c1f7 100644 --- a/static/title.css +++ b/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 { @@ -135,4 +118,69 @@ p { .btn:active { background-color: black; color: white; -} \ No newline at end of file +} + + +.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; +} diff --git a/static/title.js b/static/title.js index d9ba108..c590e3a 100644 --- a/static/title.js +++ b/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() { diff --git a/templates/title.html b/templates/title.html index 4a1b6a1..58bcc93 100644 --- a/templates/title.html +++ b/templates/title.html @@ -18,6 +18,21 @@