img grid

5 years ago · a09633dc8f
parent f59f9f76f1
commit a09633dc8f
2 changed files with 81 additions and 1 deletions
--- a/static/title.css
+++ b/static/title.css
@ -62,3 +62,77 @@ h2{
 	font-style: italic;
 }
 .grid-container {
  	display: grid;
  	grid-template-columns: repeat(4, 1fr);
  	grid-gap: 10px;
  	position: absolute;
  	top: 60%;
 	width: 96%;
 	height: auto;
 	left:2%;
  	/*background-color: blue;*/
  	text-align: : center;
  	z-index: 5;
 }
 .grid-container > div {
 	position: relative;
 	/*background-color: green;*/
 	text-align: center;
 	/*padding-bottom: 1%;*/
 	z-index: 5;
 }
 image {
 	position: relative;
 	max-width: 100%;
 	max-height: 100%;
 	/*align-content: center;*/
 }
 /* Grid buttons */
 .header {
 	position: absolute;
  	text-align: center;
  	padding: 32px;
  	top: 30%;
  	right: 0%;
  	z-index: 9;
  	width: auto;
  	height: auto;
 }
 p {
 	display: inline-block;
 	position: relative;
 }
 .btn {
  border: none;
  outline: none;
  width: 110px;
  text-align: center;
  padding: 12px 0px;
  background-color: grey;
  cursor: pointer;
  font-size: 18px;
  margin-right: 5px;
  z-index: 9;
 }
 .btn:hover {
  background-color: black;
  color: blue;
 }
 .btn:active {
  background-color: black;
  color: white;
 }
--- a/templates/title.html
+++ b/templates/title.html
@ -11,6 +11,12 @@
 <body class="title">
    <h1>{{ page.name }}</h1>
 	<div class="header" id="myHeader">
    <p><button class="btn" onclick="myFunction()">100%</button></p>
    <p><button class="btn" onclick="myFunction2()">overview</button></p>
    </div>
 	<div id="body">{{ body|safe }}</div>
 </body>