layout btn

static/title.css

@@ -32,7 +32,7 @@ body {
 
 /*links*/
 
-/*a:link {
+a:link {
   text-decoration: none;
   color: #371F10;
 }
@@ -45,7 +45,7 @@ a:visited {
 a:hover {
   text-decoration: none;
     color: blue;
-}*/
+}
 
 
 h1 {
@@ -73,7 +73,7 @@ h2{
   color: #371F10;
 }
 
-.viewnav {
+/*.viewnav {
   position: fixed;
   bottom: 1%;
   right: 1%;
@@ -113,58 +113,63 @@ h2{
   z-index: 10;
   text-align: center;
   bottom: 100%;
-}
+}*/
 
 
 /* Grid buttons */
 
-/*.header {
+.header {
   
-	position: absolute;
-  	text-align: center;
-  	padding: 32px;
-  	top: 30%;
+    position: fixed;
+   /* text-align: center;*/
+    bottom: 0%;
     right: 0%;
     z-index: 9;
-  	width: auto;
-  	height: auto;
-  	background-color: pink;
-}*/
+    width: 110px;
+    height: 50px;
+    background-color: white;
+    color: #371F10;
+
+}
 
 p {
   display: inline-block;
-	position: relative;
+  /*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,6 +181,14 @@ 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;
@@ -211,8 +224,8 @@ p {
 }
 
 .active, .collapsible:hover {
-  color: blue;
-
+  color: #371F10;
+  background-color:rgba(11,239,235);
 }
 
 .content {

templates/title.html

@@ -13,14 +13,15 @@
 
     <h1>{{ page.name }} &#8629;</h1>
 
-<div class="viewnav">
+<!-- <div class="viewnav">
   <div class="collapsible2 viewbtn">&#9634;</div>
-  <div class="content2">
-    <p><button class="btn active" onclick="myFunction()">&#9635;</button></p>
-    <p><button class="btnov active" onclick="myFunction2()">&#9580;&#9580;</button></p>
+  <div class="content2"> -->
+	<div class="header" id="myHeader">
+    <p><button class="btn clicked" onclick="myFunction()">&#9635;</button></p>
+    <p><button class="btnov clicked" onclick="myFunction2()">&#9580;&#9580;</button></p>
     </div>
-  </div> 
-<div>
+<!--   </div> 
+<div> -->
   
 	<div id="body">{{ body|safe }}</div>
   
@@ -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";
-    } 
-  });
-}
 </script>
 </body>
 </html>