Damlanur 5 years ago
commit 1c33b080ef

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

@ -3,12 +3,12 @@ body {
color: #371F10; color: #371F10;
font-family: Roboto Mono, monospace; font-family: Roboto Mono, monospace;
} }
.pagelink{ /*.pagelink{
position: fixed; position: fixed;
display: inline; display: inline;
left:0px; left:0px;
/* width:20px; /* width:20px;
height:20px;*/ height:20px;
padding: 0px 5px 0px 5px; padding: 0px 5px 0px 5px;
background-color: white; background-color: white;
z-index: 10; z-index: 10;
@ -17,6 +17,63 @@ body {
border-top-style: solid; border-top-style: solid;
border-right-style: solid; border-right-style: solid;
border-bottom-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-style: solid;*/
border-width: 1px; border-width: 1px;
border-color: #371F10; border-color: #371F10;
@ -26,23 +83,45 @@ body {
.pagelink:hover{ .pagelink:hover{
background-color: #0BEFEB; background-color: #0BEFEB;
} }
.pagelink{
background-color: white;
}
.pagelink a{ .pagelink a{
text-decoration: none; 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{ .pagelink .pagename{
display: inline; display: inline;
position: absolute; position: absolute;
width: auto; width: auto;
padding: 5px; padding: 5px;
margin-left: 25px; margin-left: 160px;
font-size: 13px; font-size: 12px;
background-color: white; background-color: white;
visibility: hidden; visibility: hidden;
white-space: nowrap;
} }
.pagelink:hover .pagename{ .pagelink:hover .pagename{
visibility: visible; visibility: visible;
position: absolute;
z-index: 20;
} }
h1 { h1 {
@ -68,3 +147,4 @@ a:hover {
} }
a.image {cursor: default!important;} /* KEEP THIS: it is important to avoid images to seeming like links */ 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; 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; position: fixed;
display: inline; display: inline;
left:0px; left:0px;
@ -76,7 +53,7 @@ display: inline-block;
border-top-style: solid; border-top-style: solid;
border-right-style: solid; border-right-style: solid;
border-bottom-style: solid; border-bottom-style: solid;
/*border-style: solid;*/ /*border-style: solid;
border-width: 1px; border-width: 1px;
border-color: #371F10; border-color: #371F10;
@ -102,7 +79,7 @@ display: inline-block;
.pagelink:hover .pagename{ .pagelink:hover .pagename{
visibility: visible; visibility: visible;
} }*/
.tooltip { .tooltip {
position: relative; position: relative;
@ -139,34 +116,7 @@ display: inline-block;
visibility: visible; 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{ ul#menu li{
display: inline; display: inline;
@ -243,12 +193,6 @@ display: inline-block;
box-shadow: 10px 10px 15px #0BEFEB; box-shadow: 10px 10px 15px #0BEFEB;
} }
/*.container {
margin-left: 40px;
margin-top: 20px;
overflow: hidden;
}*/
/* Style the buttons */ /* Style the buttons */

@ -10,21 +10,6 @@ body {
font-size:14px; 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 */ /* Organizations list */
.collapsible{ .collapsible{
padding-left: 70px; padding-left: 70px;
@ -89,6 +74,9 @@ h1 {
margin-top: 10px; margin-top: 10px;
height: 60px; height: 60px;
width: 60px; width: 60px;
padding-bottom: 15px;
font-weight: bold;
font-size: 17px;
} }
.scrl:hover { .scrl:hover {
@ -105,7 +93,7 @@ h1 {
border-radius: 6px; border-radius: 6px;
padding: 5px 0; padding: 5px 0;
font-size: 15px; font-size: 15px;
right: 50px; right: 65px;
z-index: 10; z-index: 10;
position: absolute; position: absolute;
} }
@ -113,3 +101,16 @@ h1 {
.scrl:hover > .scbt { .scrl:hover > .scbt {
visibility: visible; visibility: visible;
} }
button.up span {
position:relative; bottom: 20%;
}
button.down span {
position:relative; left: 60%;
}
button.bottom span {
position:relative; bottom: 27%;
position:relative; left: 27%;
}

@ -5,6 +5,21 @@ body{
h1 { h1 {
font-family: Roboto Mono; font-family: Roboto Mono;
font-size: 40px;
margin-top: 1%;
}
.pagetitle {
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;
} }
div#body{ width: max-content;} div#body{ width: max-content;}
@ -20,6 +35,11 @@ div#body{ width: max-content;}
display: inline-block; display: inline-block;
} }
.content {
display: flex;
margin-right: 5vw;
}
.indexlink { .indexlink {
position: fixed; position: fixed;
font-size: 20px; font-size: 20px;
@ -37,16 +57,8 @@ display: inline-block;
text-decoration: none; text-decoration: none;
} }
.horizontal-scroll-wrapper {
display: inline-table;
margin-top: 10vw;
width: 20vw;
height: 80vw;
overflow-y: auto;
overflow-x: hidden;
}
.event { .event {
margin-top: 3%;
text-align-last: auto; text-align-last: auto;
font-family: Roboto Mono; font-family: Roboto Mono;
font-size: 10px; font-size: 10px;
@ -59,23 +71,22 @@ display: inline-block;
.pubpageinfo { .pubpageinfo {
padding-top: 10px; padding-top: 10px;
font-size: 10px; font-size: 15px;
} }
.pubpageinfo:hover { .pubpageinfo:hover {
background-color: #0BEFEB; background-color: #0BEFEB;
padding: 10px; padding: 10px;
font-size: 15px;
} }
.thumbborder { .thumbborder {
box-shadow: 8px 8px 8px #C4BCB9; box-shadow: 10px 10px 15px #C4BCB9;
width: 30%; width: 40%;
height: auto; height: auto;
} }
.thumbborder:hover { .thumbborder:hover {
box-shadow: 8px 8px 8px #0BEFEB; box-shadow: 10px 10px 15px #0BEFEB;
width:100%; width:100%;
transition:0.5s; transition:0.5s;
height: auto; height: auto;

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

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

@ -8,7 +8,7 @@
<title>Timeline</title> <title>Timeline</title>
</head> </head>
<body> <body>
<h1>Timeline</h1> <div class="pagetitle">&#9481;Timeline</div>
<div id="body">{{ body|safe }}</div> <div id="body">{{ body|safe }}</div>
</body> </body>

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

Loading…
Cancel
Save