edited timeline css and html templates

master
ioanatomici 5 years ago
commit 98560ae573

@ -1,8 +1,10 @@
body {
background-color: #F4EBE8;
font-family: Roboto Mono;
}
.projtextcont{
display: block;
/*align-items: center;
@ -16,7 +18,6 @@ display: block;
width: 80%;
display: block;
text-align: justify;
}
h1{
@ -31,7 +32,7 @@ h1{
top:0%;
z-index: 0;
margin:0px;
margin-top: 50px;
/*margin-top: 50px;*/
}
h2{
@ -41,7 +42,7 @@ h2{
text-align: justify;
}
.pagelink{
/*.pagelink{
position: fixed;
display: inline;
left:0px;
@ -55,7 +56,7 @@ h2{
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
/*border-style: solid;*/
/*border-style: solid;
border-width: 1px;
border-color: #371F10;
@ -64,10 +65,24 @@ h2{
.pagelink:hover{
background-color: #0BEFEB;
}
.pagelink{
background-color: white;
}
.pagelink a{
text-decoration: none;
}
/*.pagelink a:active{
background-color: #0BEFEB;
}
.active .pagelink:after{
background-color: #0BEFEB;
}
.pagelink .pagename{
display: inline;
position: absolute;
@ -81,4 +96,4 @@ h2{
.pagelink:hover .pagename{
visibility: visible;
}
}*/

@ -3,12 +3,12 @@ body {
color: #371F10;
font-family: Roboto Mono, monospace;
}
.pagelink{
/*.pagelink{
position: fixed;
display: inline;
left:0px;
/* width:20px;
height:20px;*/
height:20px;
padding: 0px 5px 0px 5px;
background-color: white;
z-index: 10;
@ -17,6 +17,63 @@ body {
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
/*border-style: solid;
border-width: 1px;
border-color: #371F10;
}*/
/*.pagelink:hover{
background-color: #0BEFEB;
}
.pagelink a{
text-decoration: none;
}
.pagelink .pagename{
display: inline;
position: absolute;
width: auto;
padding: 5px;
margin-left: 25px;
font-size: 13px;
background-color: white;
visibility: hidden;
}
.pagelink:hover .pagename{
visibility: visible;
}*/
.linkscont{
margin-top: 10%;
height: auto;
width: auto;
position: fixed;
left:0%;
z-index: 10;
}
.pagelink{
/* display:table-cell;
text-align:center;
vertical-align:middle;*/
display: inline-flex;
justify-content: center;
align-items: center;
position: fixed;
/*display: block;*/
left:0px;
width:25px;
height:25px;
padding:10px;
background-color: white;
z-index: 2;
font-size: 24px;
/*text-align: justify;*/
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
/*border-style: solid;*/
border-width: 1px;
border-color: #371F10;
@ -26,23 +83,45 @@ body {
.pagelink:hover{
background-color: #0BEFEB;
}
.pagelink{
background-color: white;
}
.pagelink a{
text-decoration: none;
}
/*.pagelink a:active{
background-color: #0BEFEB;
}
.active .pagelink:after{
background-color: #0BEFEB;
}*/
.pagename{
align-items: center;
width:auto;
text-align: left;
}
.pagelink .pagename{
display: inline;
position: absolute;
width: auto;
padding: 5px;
margin-left: 25px;
font-size: 13px;
margin-left: 160px;
font-size: 12px;
background-color: white;
visibility: hidden;
white-space: nowrap;
}
.pagelink:hover .pagename{
visibility: visible;
position: absolute;
z-index: 20;
}
h1 {
@ -51,13 +130,14 @@ h1 {
top:5%;
text-align: right;
background-color: rgba(11,239,235,0.7);
color: #371F10;
padding: 3px 35px 3px 10px;
z-index: 10;
font-size: 28px;
}
a, a:visited{
color:black;
color:#371F10;
text-decoration: underline;
}
@ -67,3 +147,4 @@ a:hover {
}
a.image {cursor: default!important;} /* KEEP THIS: it is important to avoid images to seeming like links */

@ -38,31 +38,8 @@ display: inline-block;
line-height: 1.3;
}
/*.smw-row:nth-child(odd) {
background-color: purple;
float: right;
}
.smw-row:nth-child(odd) img {
float: right;
}
.smw-row:nth-child(even) {
background-color: orange;
float: left;
}*/
.nav .active{
/*font-family: helvetica;*/
margin-left: 20px;
color: black;
text-decoration: underline;
}
.navtab{/*
font-family: helvetica;*/
margin-left: 20px;
color: grey;
}
.pagelink{
/*.pagelink{
position: fixed;
display: inline;
left:0px;
@ -76,7 +53,7 @@ display: inline-block;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
/*border-style: solid;*/
/*border-style: solid;
border-width: 1px;
border-color: #371F10;
@ -102,7 +79,7 @@ display: inline-block;
.pagelink:hover .pagename{
visibility: visible;
}
}*/
.tooltip {
position: relative;
@ -139,34 +116,7 @@ display: inline-block;
visibility: visible;
}
/*ul#nav li{
display: inline;
list-style: none;
margin-left: 10px;
/* margin-left: 10%
margin-right: 10%;
align-content: initial;
font-size: 20px;
}
ul#nav{
padding: 20px;
margin-top: 10px;
margin-bottom: 20px;
background-color: white;
top:0px;
bottom: 10px;
padding-left: 0px;
border: none;
width: 80vw;
/*display: inline;
height:20px;
/*overflow-x: scroll;
left:0px;
position: fixed;
z-index: 1;
}*/
ul#menu li{
display: inline;
@ -243,12 +193,6 @@ display: inline-block;
box-shadow: 10px 10px 15px #0BEFEB;
}
/*.container {
margin-left: 40px;
margin-top: 20px;
overflow: hidden;
}*/
/* Style the buttons */

@ -10,21 +10,6 @@ body {
font-size:14px;
}
/* Page title */
h1 {
position: fixed;
right:0%;
top:5%;
text-align: right;
background-color: #0BEFEB;
padding: 3px 35px 3px 10px;
z-index: 10;
color: black;
font-size: 28px;
opacity: 0.7;
color: #371F10;
}
/* Organizations list */
.collapsible{
padding-left: 70px;
@ -68,48 +53,52 @@ h1 {
cursor: pointer;
}
/* Scroll column */
.scrollcolumn {
position: fixed;
display: inline;
top:35%;
right:0%;
width: 60px;
outline: none;
z-index: 10;
text-align: center;
}
/* Scroll buttons */
.scrl {
position: fixed;
background-color: white;
color:#371F10;
cursor: pointer;
border:none;
font-size: 15px;
margin-top: 10px;
height: 60px;
width: 60px;
font-size: 25px;
width: 50px;
height: 50px;
font-weight: bold;
z-index: 10;
bottom: 0%;
}
.scrl:hover {
background-color: #0BEFEB;
color: #0BEFEB;
}
button.down span, button.up span {
position:relative; left: 30%;
position:relative; bottom: 65%;
}
.up {
right: 51px;
}
.down {
right: 0%;
}
button.bottom span, button.top span {
position:relative; left: 15%;
position:relative; bottom: 65%;
}
.top {
right: 153px;
}
.bottom {
right: 102px;
}
/* Scroll button title */
.scbt {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
font-size: 15px;
right: 50px;
z-index: 10;
position: absolute;
}
.scrl:hover > .scbt {
visibility: visible;
}

@ -0,0 +1,50 @@
body {
background-color: #F4EBE8;
font-family: Roboto Mono, monospace;
font-size:20px;
}
#statbody {
display: flex;
margin: 120px;
float: left
}
.statcontainer {
display: inline-block;
width: 50%;
min-height: 900px;
padding: 20px;
align-items: center;
}
.counter {
display: flex;
width: 100%
}
.box {
display: inline-block;
width: 40%;
text-align: center;
padding: 20px;
}
.number {
font-size: 72px;
}
#graphs {
width: 100%;
}
.image{
display: inline-block;
width: 100%;
}
#counter {
display: inline-block;
}

@ -1,3 +1,4 @@
<<<<<<< HEAD
body{
width: max-content;
background-color: #F4EBE8;
@ -82,3 +83,90 @@ display: inline-block;
transition:0.5s;
height: auto;
}
=======
body{
width: max-content;
background-color: #F4EBE8;
}
h1 {
font-family: Roboto Mono;
font-size: 40px;
margin-top: 1%;
}
h2 {
font-size: 17px;
background-color: #0BEFEB;
padding: 5px;
}
div#body{ width: max-content;}
.mw-parser-output{
/*! position: left top; */
/*! display: hidden; */
/*! display: inline; */
/*! vertical-align: top; */
}
.mw-parser-output > p{
display: inline-block;
}
.content {
display: flex;
margin-right: 10vw;
margin-left: 5vw;
}
.indexlink {
position: fixed;
font-size: 20px;
bottom: 0%;
right: 3%;
background-color: transparent;
border: none;
border-right-color: transparent;
z-index: 10;
padding: 0px 30px 20px 10px
border: none;
}
.indexlink a {
text-decoration: none;
}
.event {
margin-top: 3%;
text-align-last: auto;
font-family: Roboto Mono;
font-size: 10px;
padding-left: 5vw;
display: inline-block;
width:200px;
vertical-align: top;
}
.eventfirstpages {
padding-bottom: 5vh;
}
.pubpageinfo {
font-size: 15px;
}
.thumbborder {
box-shadow: 10px 10px 15px #C4BCB9;
width: 40%;
height: auto;
}
.thumbborder:hover {
box-shadow: 10px 10px 15px #0BEFEB;
width:100%;
transition:0.5s;
height: auto;
}
>>>>>>> 86577e11087078ad95a30c5f9400661fcc23c03d

@ -11,7 +11,7 @@ body {
top: 25%;
width: 82%;
height: auto;
right: 8%;
left: 7%;
text-align: : center;
z-index: 5;
@ -34,12 +34,12 @@ body {
a:link {
text-decoration: none;
color: black;
color: #371F10;
}
a:visited {
text-decoration: none;
color: black;
color: #371F10;
}
a:hover {
@ -49,16 +49,15 @@ a:hover {
h1 {
position: fixed;
/*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;
color: black;
font-size: 27px;
color: #371F10;
color: #371F10;*/
max-width: 90%;
}
@ -71,29 +70,27 @@ h2{
padding: 3px 35px 3px 10px;
z-index: 10;
font-size: 20px;
/* opacity: 0.7;*/
color: #371F10;
}
.viewnav {
/*.viewnav {
position: fixed;
bottom: 0%;
left: 0%;
bottom: 1%;
right: 1%;
background-color: transparent;
width: 10%;
z-index: 10;
opacity: 0.7;
width: 5%;
z-index: 9;
}
.collapsible2 {
background-color: transparent;
color: red;
color: #371F10;
cursor: pointer;
padding: 0px;
width: 100%;
height: auto;
border: none;
text-align: left;
text-align: center;
outline: none;
font-size: 40px;
z-index: 10;
@ -109,60 +106,89 @@ h2{
position: absolute;
max-height: 0;
overflow: hidden;
width: 100%;
width: auto;
transition: max-height 0.3s ease-out;
background-color: transparent;
color: white;
z-index: 10;
text-align: center;
bottom: 50%;
}
bottom: 100%;
}*/
/* Grid buttons */
.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;
width: 50px;
height: 50px;
text-align: center;
/* padding: 5px 5px;*/
background-color: transparent;
cursor: pointer;
font-size: 20px;
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: 12px 0px;
background-color: transparent;
cursor: pointer;
font-size: 18px;
margin-right: 5px;
font-size: 30px;
z-index: 9;
border: solid 1px;
color: #371F10;
}
.btn:hover {
background-color: black;
color: blue;
color:rgba(11,239,235);
/* color: blue;*/
}
.btn:active {
background-color: black;
color: white;
color:rgba(11,239,235);
}
.btnov:hover {
color:rgba(11,239,235);
/* color: blue;*/
}
.btnov:active {
color:rgba(11,239,235);
}
.metadata{
position: fixed;
@ -183,7 +209,7 @@ p {
display: inline-block;
right:0%;
background-color: white;
color: black;
color: #371F10;
cursor: pointer;
padding: 18px;
width: 3%;
@ -198,8 +224,8 @@ p {
}
.active, .collapsible:hover {
background-color: #0BEFEB;
color: #371F10;
background-color:rgba(11,239,235);
}
.content {
@ -210,7 +236,7 @@ p {
width: auto;
transition: max-height 0.2s ease-out;
background-color: white;
color: black;
color: #371F10;
z-index: 10;
text-align: left;
opacity: 0.7;
@ -223,7 +249,7 @@ a.content:link {
}
.metadata_organization {
font-size: 14px;
/*font-size: 14px;*/
}
.fbtn {

@ -1,21 +1,20 @@
body {
background-color: #F4EBE8;
padding-top: 120px;
padding-left: 120px;
padding-right: 120px;
font-size: 18px;
}
.grid-container {
display: inline-grid;
grid-template-columns: repeat(8, 1fr);
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 5px;
grid-row-gap: 120px;
grid-auto-flow: dense;
position: relative;
top: 60%;
left: 30%
left: 5%;
height: auto;
margin-left: 120px;
margin-right: 120px;
text-align: : center;
z-index: 5;
@ -36,8 +35,6 @@ body {
.title {
display:block;
font-size: large;
font-weight: 700;
}
.tooltiptext {
@ -52,31 +49,13 @@ body {
border-style: hidden;
}
/*links*/
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
background-color: #0BEFEB;
opacity: 0.7;
color: white;
}
h1 {
position: fixed;
right:0%;
top:3%;
text-align: right;
background-color: #0BEFEB;
opacity: 0.5;
background-color: rgba(11,239,235,0.7);
padding: 3px 30px 3px 10px;
z-index: 10;
font-size: 32px;
: 32px;
}

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" id="top">
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="{{ staticpath }}/static/archive.css" />
@ -13,10 +13,10 @@
<h1>{{ page.name }}</h1>
<div class="scrollcolumn">
<button onclick="scrollWin(0,-5000)" class="up scrl">&#8988;<span class="scbt">Up</span></button>
<button onclick="scrollWin(0,5000)" class="down scrl">&#8991;<span class="scbt">Down</span></button>
<button onclick="scrollToTop()" class="top scrl">&#9140;<span class="scbt">Top</span></button>
<button onclick="scrollToBottom()" class="bottom scrl">&#9141;<span class="scbt">Bottom</span></button>
<button onclick="scrollWin(0,-5000)" class="up scrl"><span>&#8988;</span><span class="scbt">Up</span></button>
<button onclick="scrollWin(0,5000)" class="down scrl"><span>&#8991;</span><span class="scbt">Down</span></button>
<button onclick="scrollToTop()" class="top scrl"><span>&#9140;</span><span class="scbt">Top</span></button>
<button onclick="scrollToBottom()" class="bottom scrl"><span>&#9141;</span><span class="scbt">Bottom</span></button>
</div>
<div id="body">{{ body|safe }}</div>

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="{{ staticpath }}//static/archive.css" />
<script type="text/javascript" src="{{ staticpath }}//static/archive.js"></script>
<link rel="stylesheet" href="{{ staticpath }}//static/stats.css" />
<link href='https://fonts.googleapis.com/css?family=Roboto+Mono' rel='stylesheet' type='text/css'>
<title>{{ page.name }}</title>
</head>
<body class="title">
<h1>{{ page.name }}</h1>
<div id="body">{{ body|safe }}</div>
</body>
</html>

@ -1,3 +1,4 @@
<<<<<<< HEAD
<!DOCTYPE html>
<html lang="en">
<head>
@ -13,3 +14,21 @@
</body>
</html>
=======
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="{{ staticpath }}/static/archive.css" />
<link rel="stylesheet" href="{{ staticpath }}/static/timeline.css" />
<link href='https://fonts.googleapis.com/css?family=Roboto+Mono' rel='stylesheet' type='text/css'>
<title>Timeline</title>
</head>
<body>
<div class="pagelink">Timeline</div>
<div id="body">{{ body|safe }}</div>
</body>
</html>
>>>>>>> 86577e11087078ad95a30c5f9400661fcc23c03d

@ -13,15 +13,15 @@
<h1>{{ page.name }} &#8629;</h1>
<div class="viewnav">
<div class="collapsible2 viewbtn">&#10063;</div>
<div class="content2">
<!-- <div class="header" id="myHeader"> -->
<p><button class="btn" onclick="myFunction()">&#9607;</button></p>
<p><button class="btn" onclick="myFunction2()">&#9619;</button></p>
<!-- <div class="viewnav">
<div class="collapsible2 viewbtn">&#9634;</div>
<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>
@ -41,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>

Loading…
Cancel
Save