diff --git a/static/title.css b/static/title.css index 0e482cf..3d1a208 100644 --- a/static/title.css +++ b/static/title.css @@ -4,35 +4,35 @@ body { } .grid-container { - display: grid; - grid-template-columns: repeat(4, 1fr); - grid-gap: 10px; - position: absolute; - top: 25%; - width: 82%; - height: auto; - left: 7%; - text-align: : center; - z-index: 5; + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-gap: 10px; + position: absolute; + top: 25%; + width: 82%; + height: auto; + left: 7%; + text-align: : center; + z-index: 5; } .grid-container > div { - position: relative; - text-align: center; - z-index: 5; + position: relative; + text-align: center; + z-index: 5; } .thumbborder { - position: relative; - max-width: 100%; - max-height: 100%; + position: relative; + max-width: 100%; + max-height: 100%; } /*links*/ -/*a:link { +a:link { text-decoration: none; color: #371F10; } @@ -43,58 +43,58 @@ a:visited { } a:hover { - text-decoration: none; - color: blue; -}*/ + text-decoration: none; + color: blue; +} h1 { - /*position: fixed; - right:0%; - top:5%; - text-align: right; - background-color: rgba(11,239,235,0.7); - padding: 3px 35px 3px 10px; - z-index: 10; - font-size: 27px; - color: #371F10;*/ + /*position: fixed; + right:0%; + top:5%; + text-align: right; + background-color: rgba(11,239,235,0.7); + padding: 3px 35px 3px 10px; + z-index: 10; + font-size: 27px; + color: #371F10;*/ max-width: 90%; } h2{ - position: fixed; - right: 0%; - top: 15%; - text-align: left; - background-color: rgba(11,239,235,0.7); - padding: 3px 35px 3px 10px; - z-index: 10; - font-size: 20px; + position: fixed; + right: 0%; + top: 15%; + text-align: left; + background-color: rgba(11,239,235,0.7); + padding: 3px 35px 3px 10px; + z-index: 10; + font-size: 20px; color: #371F10; } -.viewnav { - position: fixed; - bottom: 1%; - right: 1%; - background-color: transparent; - width: 5%; - z-index: 9; +/*.viewnav { + position: fixed; + bottom: 1%; + right: 1%; + background-color: transparent; + width: 5%; + z-index: 9; } .collapsible2 { background-color: transparent; - color: #371F10; - cursor: pointer; - padding: 0px; - width: 100%; - height: auto; - border: none; - text-align: center; - outline: none; - font-size: 40px; - z-index: 10; - margin-top: 0px; + color: #371F10; + cursor: pointer; + padding: 0px; + width: 100%; + height: auto; + border: none; + text-align: center; + outline: none; + font-size: 40px; + z-index: 10; + margin-top: 0px; } .collapsible2:hover { @@ -113,58 +113,63 @@ h2{ z-index: 10; text-align: center; bottom: 100%; -} +}*/ /* Grid buttons */ -/*.header { - - position: absolute; - text-align: center; - padding: 32px; - top: 30%; - right: 0%; - z-index: 9; - width: auto; - height: auto; - background-color: pink; -}*/ +.header { + + position: fixed; + /* text-align: center;*/ + bottom: 0%; + right: 0%; + z-index: 9; + width: 110px; + height: 50px; + background-color: white; + color: #371F10; + +} p { - display: inline-block; - position: relative; + display: inline-block; + /*position: relative;*/ + color: #371F10; } .btnov { + position: fixed; + display: inline; + right: 0px; + bottom:0px; border: none; - outline: none; - width: 110px; + width: 50px; + height: 50px; text-align: center; - padding: 0px 0px; + /* padding: 5px 5px;*/ background-color: transparent; cursor: pointer; font-size: 20px; - margin-right: 5px; z-index: 9; color: #371F10; - - + margin-bottom: 3px; } .btn { + position: fixed; + display: inline; + right: 60px; + bottom:0px; border: none; - outline: none; - width: 110px; + width: 50px; + height: 50px; text-align: center; - padding: 0px 0px; background-color: transparent; cursor: pointer; font-size: 30px; - margin-right: 5px; z-index: 9; color: #371F10; - } .btn:hover { @@ -176,25 +181,33 @@ p { color:rgba(11,239,235); } +.btnov:hover { + color:rgba(11,239,235); +/* color: blue;*/ +} + +.btnov:active { + color:rgba(11,239,235); +} .metadata{ - position: fixed; - top: 25%; - right: 0%; - background-color: transparent; - width: 60%; - z-index: 10; - opacity: 1; - text-align: right; - /*align-items: right; - align-content: right;*/ + position: fixed; + top: 25%; + right: 0%; + background-color: transparent; + width: 60%; + z-index: 10; + opacity: 1; + text-align: right; + /*align-items: right; + align-content: right;*/ } .collapsible { - - display: inline-block; - right:0%; + + display: inline-block; + right:0%; background-color: white; color: #371F10; cursor: pointer; @@ -211,8 +224,8 @@ p { } .active, .collapsible:hover { - color: blue; - + color: #371F10; + background-color:rgba(11,239,235); } .content { @@ -232,29 +245,29 @@ p { } a.content:link { - color:white; + color:white; } .metadata_organization { - /*font-size: 14px;*/ + /*font-size: 14px;*/ } .fbtn { - font-style: italic; + font-style: italic; } .smw-template-furtherresults { - display: none; + display: none; } /* .orglink { - position: fixed; - top: 30%; - left: 0%; - background-color: white; - z-index: 10; - font-size: 30px; - padding: 0px 5px 0px 5px; + position: fixed; + top: 30%; + left: 0%; + background-color: white; + z-index: 10; + font-size: 30px; + padding: 0px 5px 0px 5px; } .orglink .htext { @@ -278,13 +291,13 @@ a.content:link { } .timelinelink { - position: fixed; - top: 20%; - left: 0%; - background-color: white; - z-index: 10; - font-size: 30px; - padding: 0px 5px 0px 5px; + position: fixed; + top: 20%; + left: 0%; + background-color: white; + z-index: 10; + font-size: 30px; + padding: 0px 5px 0px 5px; } .timelinelink .htext { @@ -308,13 +321,13 @@ a.content:link { } .indexlink { - position: fixed; - top:10%; - left:0%; - background-color: white; - z-index: 10; - font-size: 30px; - padding: 0px 5px 0px 5px; + position: fixed; + top:10%; + left:0%; + background-color: white; + z-index: 10; + font-size: 30px; + padding: 0px 5px 0px 5px; } .indexlink .htext { diff --git a/templates/title.html b/templates/title.html index dbd2fdd..5a28054 100644 --- a/templates/title.html +++ b/templates/title.html @@ -13,14 +13,15 @@

{{ page.name }} ↵

-
+ +
+

+

-
-
+
{{ body|safe }}
@@ -40,20 +41,7 @@ for (i = 0; i < coll.length; i++) { }); } -var coll = document.getElementsByClassName("collapsible2"); -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"; - } - }); -}