...
 
Commits (4)
<html>
<?php include 'header.php';?>
<body>
<?php include 'nav.php';?>
<div id="container">
<main>
<aside class="left">
<?php include 'about_left.php';?>
</aside>
<aside class="right">
<?php include 'about_body.php';?>
</aside>
</main>
</div>
<?php include 'footer.php';?>
</body>
<div class="agenda">
<div class="project article">
<div id="about">
<h2>About OPI</h2>
<img class="in-article-img" src="assets/img/image1.jpg">
<p>The Oceans Past Initiative (OPI) is a global research network for marine historical research. Our goal is to enhance knowledge and understanding of how the diversity, distribution and abundance of marine life in the world’s oceans has changed over the long term to better indicate future changes and possibilities. OPI welcomes anyone interested in the history of humankind’s interactions with life in the oceans including paleo-ecologists and climatologists, archaeologists, marine environmental historians, economic historians, oral historians, historical ecologists, fisheries historians, and marine environmental and fisheries policy makers and managers.</p>
</div>
<div id="board">
<h2>Steering Committee & Executive Board</h2>
<p>The network will commit itself to coordinate resources and provide useful information to the marine historical research community, such as by circulating news about grant calls and funding opportunities, information on recent papers in the field, announce successful projects, and distribute information for students on courses related to marine historical research.It is planned for OPI to become a venue where researchers worldwide interested in historical studies could virtually meet and discuss relevant issues globally. OPI can provide an umbrella, under which already completed, currently running, and also planned projects and initiatives can be linked, and make their results available for decision-makers and the interested public.</p>
</div>
<div id="steering-committee"></div>
<div id="curiosity">
<h2>Scientific Curiosity</h2>
<img class="in-article-img" src="assets/img/OPI2015ScientificCuriosityPicture2.jpg">
<p>Historical research is playing an increasingly important role in marine sciences. Historical data are also used in policy making and marine resource management, and have helped to address the issue of shifting baselines for numerous species and ecosystems. Although many important research questions still remain unanswered, tremendous developments in conceptual and methodological approaches are expected to contribute to a comprehensive understanding of the global history of human interactions with life in the seas. Based on our experiences and knowledge from the “History of Marine Animal Populations” project, the Oceans Past Initiative (OPI) has been established to assist in bringing together and connecting researchers interested in marine historical studies worldwide.</p>
</div>
<div id="toc" class="about">
<h1>About the OPI</h1>
</div>
<script type="text/javascript">
$('#toc').toc();
</script>
......@@ -115,9 +115,6 @@ ul {
list-style-type: none;
}
li::before {
content: "─ ";
}
/* ------------------------------------------
RESPONSIVE NAV STYLES
......@@ -397,25 +394,8 @@ p.intro {
border-top: 2px solid;
}
.partners {
clear: both;
width: 100%;
bottom: 0pt;
background-color: var(--rose-karel);
border-top: 2px solid;
position: absolute;
}
.partners img.logo-partners {
height: 5%;
float: right;
}
.question-quote:hover {}
blockquote {
font-family: "Junicode-condensed";
font-family: "";
font-weight: bold;
line-height: 0.9em;
font-size: 1.7em;
......@@ -435,6 +415,23 @@ blockquote+p, .project-infos+blockquote {
margin-bottom: 37px;
padding-bottom: 45px;
}
.project.article h2{
font-family: "poppins";
line-height: 1.4em;
}
.project.article h2, .project.article p{
width: 60%;
}
.project.article p{
font-size: 0.85em;
}
.project.article img{
clear: both;
float: right;
width: 30%;
}
img.project-hero{
width: 100%;
......@@ -442,6 +439,47 @@ img.project-hero{
margin-bottom: 20px;
}
/* TOC */
#toc {
padding-top: 90px;
}
#toc ul {
margin: 0;
padding: 0;
list-style: none;
}
#toc li {
margin-bottom: 15px;
}
#toc a {
color: #fff;
text-decoration: none;
display: block;
}
#toc .h1 {
font-family: "poppins-bold";
font-size: 2em;
font-weight: bold;
}
#toc .h2 {
padding-left: 10px;
}
#toc .h3 {
padding-left: 20px;
}
#toc .toc-active {
}
#detail-container {
padding: 30px;
border-bottom: 0px solid black;
......@@ -566,32 +604,6 @@ p+.project-detail-date {
padding-left: 0px;
}
/*pads styles*/
div .pad {
max-width: 800px;
}
.pad h1, h2, h3 {
font-family: Junicode Condensed;
}
.pad .meta {
font-size: 0.7em;
}
.pad .author1 {
background-color: var(--rose-karel);
}
.pad .author2 {
background-color: var(--orange-karel);
}
.pad .author3 {
background-color: var(--vert-karel);
}
#detail-container .close-button {
display: none;
position: fixed;
......@@ -881,6 +893,19 @@ a.read-more-button{
width: 100%;
}
.project.article h2, .project.article p{
width: 100%;
clear: both;
}
.project.article img{
width: 60%;
margin-left: 20%;
clear: none;
float: left;
margin-bottom: 20px;
}
#prolog {
border-right: 2px solid black;
margin-top: 79px;
......
/*!
* toc - jQuery Table of Contents Plugin
* v0.3.2
* http://projects.jga.me/toc/
* copyright Greg Allen 2014
* MIT License
*/
!function(a){a.fn.smoothScroller=function(b){b=a.extend({},a.fn.smoothScroller.defaults,b);var c=a(this);return a(b.scrollEl).animate({scrollTop:c.offset().top-a(b.scrollEl).offset().top-b.offset},b.speed,b.ease,function(){var a=c.attr("id");a.length&&(history.pushState?history.pushState(null,null,"#"+a):document.location.hash=a),c.trigger("smoothScrollerComplete")}),this},a.fn.smoothScroller.defaults={speed:400,ease:"swing",scrollEl:"body,html",offset:0},a("body").on("click","[data-smoothscroller]",function(b){b.preventDefault();var c=a(this).attr("href");0===c.indexOf("#")&&a(c).smoothScroller()})}(jQuery),function(a){var b={};a.fn.toc=function(b){var c,d=this,e=a.extend({},jQuery.fn.toc.defaults,b),f=a(e.container),g=a(e.selectors,f),h=[],i=e.activeClass,j=function(b,c){if(e.smoothScrolling&&"function"==typeof e.smoothScrolling){b.preventDefault();var f=a(b.target).attr("href");e.smoothScrolling(f,e,c)}a("li",d).removeClass(i),a(b.target).parent().addClass(i)},k=function(){c&&clearTimeout(c),c=setTimeout(function(){for(var b,c=a(window).scrollTop(),f=Number.MAX_VALUE,g=0,j=0,k=h.length;k>j;j++){var l=Math.abs(h[j]-c);f>l&&(g=j,f=l)}a("li",d).removeClass(i),b=a("li:eq("+g+")",d).addClass(i),e.onHighlight(b)},50)};return e.highlightOnScroll&&(a(window).bind("scroll",k),k()),this.each(function(){var b=a(this),c=a(e.listType);g.each(function(d,f){var g=a(f);h.push(g.offset().top-e.highlightOffset);var i=e.anchorName(d,f,e.prefix);if(f.id!==i){a("<span/>").attr("id",i).insertBefore(g)}var l=a("<a/>").text(e.headerText(d,f,g)).attr("href","#"+i).bind("click",function(c){a(window).unbind("scroll",k),j(c,function(){a(window).bind("scroll",k)}),b.trigger("selected",a(this).attr("href"))}),m=a("<li/>").addClass(e.itemClass(d,f,g,e.prefix)).append(l);c.append(m)}),b.html(c)})},jQuery.fn.toc.defaults={container:"body",listType:"<ul/>",selectors:"h1,h2,h3",smoothScrolling:function(b,c,d){a(b).smoothScroller({offset:c.scrollToOffset}).on("smoothScrollerComplete",function(){d()})},scrollToOffset:0,prefix:"toc",activeClass:"toc-active",onHighlight:function(){},highlightOnScroll:!0,highlightOffset:100,anchorName:function(c,d,e){if(d.id.length)return d.id;var f=a(d).text().replace(/[^a-z0-9]/gi," ").replace(/\s+/g,"-").toLowerCase();if(b[f]){for(var g=2;b[f+g];)g++;f=f+"-"+g}return b[f]=!0,e+"-"+f},headerText:function(a,b,c){return c.text()},itemClass:function(a,b,c,d){return d+"-"+c[0].tagName.toLowerCase()}}}(jQuery);
\ No newline at end of file
<script src="assets/js/jquery-3.3.1.min.js"></script>
<script src="assets/js/jquery-ui.min.js"></script>
<script src="assets/js/fastclick.js"></script>
<script src="assets/js/scroll.js"></script>
<script src="assets/js/fixed-responsive-nav.js"></script>
<script src="assets/js/toc.min.js"></script>
<!-- <script type="text/javascript">
// $( "nav.closed" ).click(function() {
// console.log("hey");
// $( this ).slideToggle( "opened" );
// });
$('#menu').click(function () {
$('nav.closed').slideToggle("clo");
$('.secondaryitem').slideToggle();
}
);
</script> -->
<script type="text/javascript">
$( ".read-more-button" ).click(function() {
console.log("click-button to extend div");
$(this).parent().closest('div').toggleClass("height-unlimited height-limited");
// console.log("click-button ended");
// var parentDiv = $(this).parent().closest('div');
// console.log(parentDiv);
// parentDiv.css({"max-height":"none"});
});
$('#toc').toc({
'selectors': 'h1,h2,h3', //elements to use as headings
'container': 'body', //element to find all selectors in
'smoothScrolling': true, //enable or disable smooth scrolling on click
'prefix': 'toc', //prefix for anchor tags and class names
'onHighlight': function(el) {}, //called when a new section is highlighted
'highlightOnScroll': true, //add class to heading that is currently in focus
'highlightOffset': 100, //offset to trigger the next headline
'anchorName': function(i, heading, prefix) { //custom function for anchor name
return prefix+i;
},
'headerText': function(i, heading, $heading) { //custom function building the header-item text
return $heading.text();
},
'itemClass': function(i, heading, $heading, prefix) { // custom function for item class
return $heading[0].tagName.toLowerCase();
}
});
</script>
<head>
<meta charset="utf-8">
<!-- <link rel="stylesheet" href="assets/css/responsive-nav.css"> -->
<link rel="stylesheet" type="text/css" media="all" href="assets/css/styles.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="assets/js/responsive-nav.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fork-awesome@1.1.7/css/fork-awesome.min.css" integrity="sha256-gsmEoJAws/Kd3CjuOQzLie5Q3yshhvmo7YNtBG7aaEY=" crossorigin="anonymous">
<style>
body {
margin: 10px;
overflow-x: hidden;
position: relative;
}
</style>
<title>OPI</title>
</head>
<div class="content">
<p class="section-title">news & updates</p>
<section>
<p class="project-title">Final conference Bremerhaven, Germany 22nd-26th October 2018</p>
<p class="project-exerpt">The Organising Committee appointed by the International Maritime Economic History Association invite proposals for panels and papers to be presented at its 2016 7th International Congress of Maritime History. </p>
<p class="read-more-link"><a href="#">→ read more</a></p>
</section>
<section>
<p class="project-title">Research agenda: Future of oceans past</p>
<p class="project-exerpt">Towards a Global Marine Historical Research Initiative. Historical research is playing an increasingly important role in marine sciences.</p>
<p class="read-more-link"><a href="#">→ read more</a></p>
</section>
</div>
<div id="prolog"></div>
<div class="about">
<h1 class="intro">The OPI</h1>
<p class="intro">The Oceans Past Initiative (OPI) is a global research network for marine historical research. Our goal is to enhance knowledge and understanding of how the diversity, distribution and abundance of marine life in the world’s oceans has changed over the long term to better indicate future changes and possibilities.</p>
</div>
<div class="agenda">
<div class="project presentation">
<div class="project-detail-header">
<p class="section-title">Ongoing projects</p>
<br>
<p class="project-title"><a href="#">ICES WGHIST</a></p>
<div class="height-limited">
<p class="project-exerpt">The Oceans Past Initiative is closely linked with the expert working group, WGHIST of the International Council for the Exploration of the Sea (ICES): The ICES Working Group on the History of Fish and Fisheries (WGHIST) brings together fisheries scientists, historians, and marine biologists working on multidecadal to centennial changes in the marine environment. WGHIST aims to improve the understanding of the long-term dynamics of fish populations, fishing fleets, and catching technologies. The results are used for setting baselines for management, restoration, and conservation of marine resources and ecosystems.</p>
<p class="read-more"><a href="#" class="read-more-button"><i class="fa fa-chevron-down" aria-hidden="true"></i></a></p>
</div>
</div>
</div>
<div class="project presentation">
<div class="project-detail-header">
<p class="project-title">EU COST Action Network</p>
<div class="height-limited">
<p><img class="project-hero" src="assets/img/hmap.jpg"></p>
<p class="project-exerpt">The Oceans Past Initiative is closely linked with the expert working group, WGHIST of the International Council for the Exploration of the Sea (ICES): The ICES Working Group on the History of Fish and Fisheries (WGHIST) brings together fisheries scientists, historians, and marine biologists working on multidecadal to centennial changes in the marine environment. WGHIST aims to improve the understanding of the long-term dynamics of fish populations, fishing fleets, and catching technologies. The results are used for setting baselines for management, restoration, and conservation of marine resources and ecosystems.</p>
<p class="read-more"><a href="#" class="read-more-button"><i class="fa fa-chevron-down" aria-hidden="true"></i></a></p>
</div>
</div>
</div>
<div class="project presentation">
<div class="project-detail-header">
<p class="project-title"><a href="#">ICES WGHIST</a></p>
<div class="height-limited">
<p class="project-exerpt">The Oceans Past Initiative is closely linked with the expert working group, WGHIST of the International Council for the Exploration of the Sea (ICES): The ICES Working Group on the History of Fish and Fisheries (WGHIST) brings together fisheries scientists, historians, and marine biologists working on multidecadal to centennial changes in the marine environment. WGHIST aims to improve the understanding of the long-term dynamics of fish populations, fishing fleets, and catching technologies. The results are used for setting baselines for management, restoration, and conservation of marine resources and ecosystems.</p>
<p class="read-more"><a href="#" class="read-more-button"><i class="fa fa-chevron-down" aria-hidden="true"></i></a></p>
</div>
</div>
</div>
<div class="project presentation">
<div class="project-detail-header">
<p class="project-title">EU COST Action Network</p>
<div class="height-limited">
<p><img class="project-hero" src="assets/img/hmap.jpg"></p>
<p class="project-exerpt">The Oceans Past Initiative is closely linked with the expert working group, WGHIST of the International Council for the Exploration of the Sea (ICES): The ICES Working Group on the History of Fish and Fisheries (WGHIST) brings together fisheries scientists, historians, and marine biologists working on multidecadal to centennial changes in the marine environment. WGHIST aims to improve the understanding of the long-term dynamics of fish populations, fishing fleets, and catching technologies. The results are used for setting baselines for management, restoration, and conservation of marine resources and ecosystems.</p>
<p class="read-more"><a href="#" class="read-more-button"><i class="fa fa-chevron-down" aria-hidden="true"></i></a></p>
</div>
</div>
</div>
</div>
<html>
<?php include 'header.php';?>
<body>
<?php include 'nav.php';?>
<div id="container">
<main>
<aside class="left">
<?php include 'homepage_left.php';?>
</aside>
<aside class="right">
<?php include 'homepage_projects.php';?>
<div id="detail-container">
<?php include 'homepage_agenda.php';?>
</div>
</aside>
</main>
</div>
<?php include 'footer.php';?>
</body>
<aside class="top">
<div>
<a class="home" href="index.php"><img class="opi" src="assets/img/opilogo.png"></a>
<nav id="menu" class="nav-collapse"><a href="#">
<ul>
<li class="head-li"><a href="about.php">about</a></li>
<li class="secondaryitem"><a href="about.php#board">board</a></li>
<li class="secondaryitem"><a href="about.php#steering-committee">steering committee</a></li>
<li class="secondaryitem"><a href="about.php#curiosity">scientific curiosity</a></li>
</ul>
<ul>
<li class="head-li"><a href="projects.php">projects</a></li>
<li class="secondaryitem"> <a href="projects.php#"> ICES WGHIST</a></li>
<li class="secondaryitem"> <a href="projects.php#"> EU COST Action Network</a></li>
<li class="secondaryitem"> <a href="projects.php#"> conferences</a></li>
<li class="secondaryitem"> <a href="projects.php#"> publications</a></li>
<li class="secondaryitem"> <a href="projects.php#"> OPP</a></li>
<li class="secondaryitem"> <a href="projects.php#"> HMAP DBs</a></li>
</ul>
<ul>
<li class="head-li"><a href="">news</a></li>
<li class="secondaryitem"><a href="#">newsletter archive</a></li>
<li class="secondaryitem"><a href="#">all events</a></li>
</ul>
<ul class="secondary">
<li class="secondary head-li"><a title="contact" class="contact-button" href=""><span>contact</span><i class="fa fa-envelope" aria-hidden="true"></i></a></li>
<li class="secondary head-li"><a title="login" class="login-button button" href=""><span>login to opi.org</span><i class="fa fa-user-circle" aria-hidden="true"></i></a></li>
<p class="menu-footer">the OPI is proudly supported by Erasmus + Quia optio dolore error beatae quia quibusdam quo cum. Adipisci impedit vero nesciunt. Cumque et alias vitae.</p>
</ul>
</a></nav>
</div>
</aside>