Difference between revisions of "Template:Groningen"

 
(465 intermediate revisions by 4 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
 +
 +
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Raleway" />
 +
<link rel="shortcut icon" type="image/x-icon" href="https://static.igem.org/mediawiki/2017/2/23/Tab_ding_icon_32.png" />
  
 
<script>
 
<script>
−
 
 
// This is the jquery part of your template.   
 
// This is the jquery part of your template.   
 
// Try not modify any of this code too much since it makes your menu work.
 
// Try not modify any of this code too much since it makes your menu work.
−
 
 
$(document).ready(function() {
 
$(document).ready(function() {
−
 
 
$("#HQ_page").attr('id','');
 
$("#HQ_page").attr('id','');
−
 
+
// call the functions that control the menu
−
// call the functions that control the menu  
+
menu_functionality();
−
menu_functionality();  
+
 
hide_show_menu();
 
hide_show_menu();
−
 
−
 
−
 
 
//this function controls the expand and collapse buttons of the menu and changes the +/- symbols
 
//this function controls the expand and collapse buttons of the menu and changes the +/- symbols
 
function menu_functionality() {
 
function menu_functionality() {
−
 
 
//when clicking on a "menu_button", it will change the "+/-" accordingly and it will show/hide the corresponding submenu
 
//when clicking on a "menu_button", it will change the "+/-" accordingly and it will show/hide the corresponding submenu
 
$(".menu_button").click(function(){
 
$(".menu_button").click(function(){
−
 
 
// add or remove the class "open" , this class holds the "-"  
 
// add or remove the class "open" , this class holds the "-"  
 
$(this).children().toggleClass("open");
 
$(this).children().toggleClass("open");
Line 27: Line 21:
 
$(this).next('.submenu_wrapper').fadeToggle(400);
 
$(this).next('.submenu_wrapper').fadeToggle(400);
 
});
 
});
−
 
 
// when the screen size is smaller than 800px, the display_menu_control button appears and will show/hide the whole menu
 
// when the screen size is smaller than 800px, the display_menu_control button appears and will show/hide the whole menu
 
$("#display_menu_control").click(function(){
 
$("#display_menu_control").click(function(){
 
$('#menu_content').fadeToggle(400);
 
$('#menu_content').fadeToggle(400);
 
});
 
});
−
 
 
// call the current page highlight function
 
// call the current page highlight function
 
highlight_current_page();
 
highlight_current_page();
 
}
 
}
−
 
−
 
 
// call the highlight current page function to show it on the menu with a different background color
 
// call the highlight current page function to show it on the menu with a different background color
 
function highlight_current_page() {
 
function highlight_current_page() {
−
 
 
// select a page from the menu based on the id assigned to it and the current page name and add the class "current page" to make it change background color
 
// select a page from the menu based on the id assigned to it and the current page name and add the class "current page" to make it change background color
 
$("#"+  wgPageName.substring(wgPageName.lastIndexOf("/")+1, wgPageName.length ) + "_page").addClass("current_page");
 
$("#"+  wgPageName.substring(wgPageName.lastIndexOf("/")+1, wgPageName.length ) + "_page").addClass("current_page");
−
 
 
// now that the current_page class has been added to a menu item, make the submenu fade in
 
// now that the current_page class has been added to a menu item, make the submenu fade in
 
$(".current_page").parents(".submenu_wrapper").fadeIn(400);
 
$(".current_page").parents(".submenu_wrapper").fadeIn(400);
 
// change the +/- symbol of the corresponding menu button
 
// change the +/- symbol of the corresponding menu button
 
$(".current_page").parents(".submenu_wrapper").prev().children().toggleClass("open");
 
$(".current_page").parents(".submenu_wrapper").prev().children().toggleClass("open");
−
 
 
}
 
}
−
 
−
 
−
 
 
// allow button on the black menu bar to show/hide the side menu
 
// allow button on the black menu bar to show/hide the side menu
 
function hide_show_menu() {
 
function hide_show_menu() {
−
+
 
 
// in case you preview mode is selected, the menu is hidden for better visibility  
 
// in case you preview mode is selected, the menu is hidden for better visibility  
 
if (window.location.href.indexOf("submit") >= 0) {
 
if (window.location.href.indexOf("submit") >= 0) {
 
$(".igem_2017_menu_wrapper").hide();
 
$(".igem_2017_menu_wrapper").hide();
 
}
 
}
−
 
 
// if the black menu bar has been loaded
 
// if the black menu bar has been loaded
 
   if (document.getElementById('bars_item')) {
 
   if (document.getElementById('bars_item')) {
−
 
 
// when the "bars_item" has been clicked
 
// when the "bars_item" has been clicked
 
$("#bars_item").click(function() {
 
$("#bars_item").click(function() {
 
$("#sideMenu").hide();
 
$("#sideMenu").hide();
−
 
 
// show/hide the menu wrapper
 
// show/hide the menu wrapper
 
$(".igem_2017_menu_wrapper").fadeToggle("100");
 
$(".igem_2017_menu_wrapper").fadeToggle("100");
 
});
 
});
 
   }  
 
   }  
−
 
 
// because the black menu bars loads at a different time than the rest of the page, this function is set on a time out so it can run again in case it has not been loaded yet
 
// because the black menu bars loads at a different time than the rest of the page, this function is set on a time out so it can run again in case it has not been loaded yet
 
else {
 
else {
Line 78: Line 58:
 
}
 
}
 
}
 
}
−
 
−
 
 
});
 
});
−
 
−
 
 
</script>
 
</script>
−
 
−
 
−
 
  
  
Line 94: Line 67:
 
 
 
/* Clear the default wiki settings */
 
/* Clear the default wiki settings */
−
 
 
#home_logo, #sideMenu { display:none; }
 
#home_logo, #sideMenu { display:none; }
 
#sideMenu, #top_title, .patrollink  {display:none;}
 
#sideMenu, #top_title, .patrollink  {display:none;}
 
#content { width:100%; padding:0px;  margin-top:-7px; margin-left:0px;}
 
#content { width:100%; padding:0px;  margin-top:-7px; margin-left:0px;}
−
 
−
 
−
 
  
 
/* START GENERAL STYLES */
 
/* START GENERAL STYLES */
 
html {
 
html {
−
     height: 100%;
+
     //height: 100%;
 +
    width: 100%;
 
     margin: 0;
 
     margin: 0;
 
     padding: 0;
 
     padding: 0;
 
}
 
}
−
 
 
body {
 
body {
 
     width: auto !important;
 
     width: auto !important;
−
    height: 100%;
 
 
     width: 100%;
 
     width: 100%;
 
     margin: 0;
 
     margin: 0;
 
     padding: 0;
 
     padding: 0;
−
     font-family: "Calibri";
+
     font-size: 10pt;
−
}
+
    font-family: Raleway;
  
 +
    position: relative;
 +
    //height: auto;
 +
    //min-height: 100%;
 +
 +
}
 
h1,h2,h3,h4,h5{
 
h1,h2,h3,h4,h5{
 
     color: #0C1948;
 
     color: #0C1948;
Line 123: Line 96:
  
 
/* HOT LINKS */
 
/* HOT LINKS */
−
 
 
a{
 
a{
−
    color: black;
 
−
    text-align: center;
 
−
    font-weight: bold;
 
 
     text-decoration:none;
 
     text-decoration:none;
 
}
 
}
−
 
 
a:hover {
 
a:hover {
 +
    text-decoration: underline;
 +
}
 +
a.mouseover:hover {
 
     text-decoration: underline;
 
     text-decoration: underline;
 
}
 
}
  
−
a
+
/* HEADER */
−
{ 
+
−
    text-decoration:none;
+
−
}
+
−
 
+
−
/* HOT LINKS */
+
−
 
+
 
.header {
 
.header {
−
    display: table;
 
−
    position: relative;
 
 
     width: 100%;
 
     width: 100%;
−
     height: 100%;
+
     height: 30%;
−
     margin-bottom: 0px;
+
     margin-top: 0px;
−
     background: url('https://static.igem.org/mediawiki/2017/7/7d/Grun_wiki.jpeg') no-repeat center center scroll;
+
     background-color: #88d0a5;
−
     -webkit-background-size: cover;
+
    /*background-image: url('https://static.igem.org/mediawiki/2017/d/de/17groupgroningen.jpg');*/
−
     -moz-background-size: cover;
+
     background-size: auto 100%;
−
    background-size: cover;
+
     background-repeat: no-repeat;
−
     -o-background-size: cover;
+
     background-position: top;
 
     z-index: 1;
 
     z-index: 1;
 
}
 
}
  
−
.header_img{
+
.unique_header{
−
    background: url(bronze.png) no-repeat center center scroll;
+
height:300px;
−
    width: 100%;
+
vertical-align:middle;
−
    height: 100%;
+
text-align:center;
−
    -webkit-background-size: cover;
+
color: #5f5f5f;
−
    -moz-background-size: cover;
+
text-align: center;"
−
    -o-background-size: cover;
+
}
−
    background-size: cover;
+
−
    /*MUSHROOM: https://www.google.nl/imgres?imgurl=https%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fcommons%2Ff%2Ffa%2FPanellusStipticusAug12_2009_Animated.gif&imgrefurl=https%3A%2F%2Fcommons.wikimedia.org%2Fwiki%2FFile%3APanellusStipticusAug12_2009_Animated.gif&docid=XwyN6eisgYu6wM&tbnid=EybkmibTyPoYlM%3A&vet=1&w=1350&h=920&bih=759&biw=1600&q=gif%20biology&ved=0ahUKEwiKxdf5oNHSAhXGCMAKHXwSAE4QMwg8KBYwFg&iact=mrc&uact=8#h=920&imgrc=EybkmibTyPoYlM:&vet=1&w=1350
+
−
        'http://stormandsky.com/gif/7.gif'
+
−
    CLOUD: http://stormandsky.com/gif/7.gif
+
−
 
+
−
    FLOWER:https://a.fastcompany.net/multisite_files/fastcompany/imagecache/1280/poster/2014/03/3028382-poster-g-slow-life.gif
+
  
−
    WATER: http://ipolitics.ca/wp-content/uploads/2016/06/Underwater-slowed-1.gif*/
+
.header_title{
 +
padding-top:150px;
 +
padding-bottom:25xp;
 +
height:100%;
 +
margin-bottom:25px;
 +
font-size: 100px;
 +
color: #5f5f5f;
 
}
 
}
  
Line 180: Line 143:
 
     margin-left:auto;
 
     margin-left:auto;
 
     margin-right:auto;
 
     margin-right:auto;
−
/*  margin-top: auto;
+
/*  margin-top: 15px;*/
−
     margin-bottom: auto;*/
+
     margin-bottom: 0px;
−
    text-align: center;
+
/*  text-align: center;*/
 
     padding-top: 5px;
 
     padding-top: 5px;
−
/*  padding-bottom: 0px;*/
+
    padding-bottom: 15px;
 
     height: auto !important;
 
     height: auto !important;
 
     height:1000px;
 
     height:1000px;
 
     width: 1000px;
 
     width: 1000px;
−
     overflow: auto;
+
     //overflow: auto;  
−
    overflow-y: hidden; // hide vertical
+
     //overflow-y: hidden; hide vertical
−
    overflow-x: hidden; // hide horizontal
+
     //overflow-x: hidden; hide horizontal
−
}
+
−
   
+
−
.fixed-bg {
+
−
    /* The background image */
+
−
    background-image: url("../imgs/projectBack.jpg");
+
−
/*    background-color: brown;*/
+
−
    height: auto !important;
+
−
    height: 100%;
+
−
     /*height: auto !important;
+
−
    height: 1250px;*/
+
−
    /*width: auto !important;*/
+
−
    width: 100%;
+
−
    /* Set a specified height, or the minimum height for the background image */
+
−
    min-height: 750px;
+
−
    /* Set background image to fixed (don't scroll along with the page) */
+
−
    background-attachment: scroll;
+
−
    overflow-x: hidden;
+
−
    /* Center the background image */
+
−
    background-position: center;
+
−
    /* Set the background image to no repeat */
+
−
    background-repeat: no-repeat;
+
−
    /* Scale the background image to be as large as possible */
+
−
    background-size: cover;
+
−
    overflow-y: hidden; // hide vertical
+
−
     overflow-x: hidden; // hide horizontal
+
 
}
 
}
  
 
/* IMAGES */
 
/* IMAGES */
−
 
−
 
 
 
.imgsize{
 
.imgsize{
 
     position: relative;
 
     position: relative;
Line 227: Line 163:
 
     max-width: 500px;
 
     max-width: 500px;
 
     height: 100px;
 
     height: 100px;
−
     z-index: 1;
+
     border-radius: 15px 50px 15px 50px;
 +
    padding-top: 0px;
 +
}
 +
.imglab {
 +
    display: block;
 +
    max-width: 70%;
 +
    margin: auto;
 +
    text-align: center;
 +
    border-radius: 15px 50px 15px 50px;
 +
}
 +
.imglabh {
 +
    /*display: block;*/
 +
    max-width: 100%;
 +
    overflow: visible;
 +
    margin: auto;
 +
    text-align: center;
 +
    border-radius: 15px 50px 15px 50px;
 
}
 
}
−
 
 
.scmedimgsize{
 
.scmedimgsize{
 
     position: relative;
 
     position: relative;
Line 239: Line 190:
 
}
 
}
  
−
/* IMAGES */
+
/* ACCORDION */
 +
.w3-hide{ display:none!important }
 +
.w3-show{ display:block!important }
 +
.w3-block{
 +
display:block;
 +
width:100%
 +
}
 +
.w3-button:hover{
 +
color:#000!important;
 +
background-color:#ccc;
 +
}
 +
.w3-button{
 +
width:100%;
 +
border:none;
 +
display:inline-block;
 +
outline:0;
 +
padding:2px 16px;
 +
vertical-align:middle;
 +
overflow:hidden;
 +
text-decoration:none;
 +
text-align:center;
 +
cursor:pointer;
 +
white-space:nowrap;
 +
}
  
−
/* BUTTONS */
+
/* MODAL */
 +
.imgsize:hover {opacity: 0.85;}
 +
.imglab:hover {opacity: 0.85;}
 +
.imglabh:hover {opacity: 0.85;}
 +
/* The Modal (background) */
 +
.modal {
 +
    display: none; /* Hidden by default */
 +
    position: fixed; /* Stay in place */
 +
    z-index: 1; /* Sit on top */
 +
    padding-top: 100px; /* Location of the box */
 +
    left: 0;
 +
    top: 0;
 +
    width: 100%; /* Full width */
 +
    height: 100%; /* Full height */
 +
    overflow: auto; /* Enable scroll if needed */
 +
    background-color: rgb(0,0,0); /* Fallback color */
 +
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
 +
}
 +
/* Modal Content (Image) */
 +
.modal-content {
 +
    margin: auto;
 +
    display: block;
 +
    width: auto;
 +
    max-width: 90%;
 +
    border-radius: 15px 50px 15px 50px;
 +
}
 +
.modal-contenth {
 +
    margin: auto;
 +
    display: block;
 +
    width: auto;
 +
    max-height: 75%;
 +
    border-radius: 15px 50px 15px 50px;
 +
}
 +
/* Caption of Modal Image (Image Text) - Same Width as the Image */
 +
#caption {
 +
    margin: auto;
 +
    display: block;
 +
    width: auto;
 +
    max-width: 90%;
 +
    text-align: center;
 +
    color: #ccc;
 +
    padding: 10px 0;
 +
    height: 150px;
 +
}
 +
#captionh {
 +
    margin: auto;
 +
    display: block;
 +
    width: auto;
 +
    max-width: 90%;
 +
    text-align: center;
 +
    color: #ccc;
 +
    padding: 10px 0;
 +
    height: 150px;
 +
}
 +
/* Add Animation - Zoom in the Modal */
 +
.modal-content, #caption {
 +
    -webkit-animation-name: zoom;
 +
    -webkit-animation-duration: 0.5s;
 +
    animation-name: zoom;
 +
    animation-duration: 0.5s;
 +
}
 +
.modal-contenth, #captionh {
 +
    -webkit-animation-name: zoom;
 +
    -webkit-animation-duration: 0.5s;
 +
    animation-name: zoom;
 +
    animation-duration: 0.5s;
 +
}
 +
@-webkit-keyframes zoom {
 +
    from {-webkit-transform:scale(0)}
 +
    to {-webkit-transform:scale(1)}
 +
}
 +
@keyframes zoom {
 +
    from {transform:scale(0)}
 +
    to {transform:scale(1)}
 +
}
  
 +
/* BUTTONS */
 
.button {
 
.button {
−
    display: inline-block;
+
  display: inline-block;
−
    margin-left: 10px;
+
  line-height: 3em;
−
    padding: 0.75rem 1rem;
+
  padding: 0 1em;
−
    border: 0;
+
  color: white;
−
    border-style: solid;
+
  background: #34343E;
−
    border-width: 1px;
+
  border-radius: 0.125em;
−
    border-color: #969696;
+
  background-clip: padding-box;
−
    border-radius: 0.317rem;
+
−
    background-color: #0C1948;
+
−
    color: white;
+
−
    width: 100px;
+
−
    text-decoration: none;
+
−
    font-weight: 500;
+
−
    font-size: 1rem;
+
−
    line-height: 1.5;
+
−
    font-family: "Calibri";
+
−
    cursor: pointer;
+
−
    -webkit-appearance: none;
+
−
    -webkit-font-smoothing: antialiased;
+
−
}
+
  
−
.button:hover {
+
  margin-right: 1em
−
    opacity: 0.85;
+
 
}
 
}
  
−
.button:active {
+
.button--plain {
−
    box-shadow: inset 0 3px 4px hsla(0, 0%, 0%, 0.2);
+
        color: red;
 +
background: #41414E
 
}
 
}
  
−
.button:focus {
+
.button--ghost {
−
    outline: thin dotted #444;
+
border: 1px solid #EEE !important;
−
    outline: 5px auto -webkit-focus-ring-color;
+
background: none
−
    outline-offset: -2px;
+
 
}
 
}
  
−
.button-icon {
+
.button--ghost--green {
−
    display: inline-block;
+
border-color: #7CBDBA !important
−
    position: relative;
+
−
    top: -0.1em;
+
−
    vertical-align: middle;
+
−
    margin-right: 0.317rem;
+
−
}
+
−
   
+
−
.btn-content {
+
−
    margin: 64px auto;
+
−
    width: 94%;
+
−
    max-width: 640px;
+
−
    text-align: center;
+
 
}
 
}
  
−
/* BUTTONS */
+
/* CONTENT */  
−
     
+
−
#title_container{
+
−
    position: relative;
+
−
    padding-top: 200px;
+
−
    padding-bottom: 100px;
+
−
    height:375px;
+
−
}
+
−
   
+
 
#title{
 
#title{
 
     position: relative;
 
     position: relative;
Line 310: Line 326:
 
     font-size: 150px;
 
     font-size: 150px;
 
}
 
}
−
 
 
#subtitle{
 
#subtitle{
 
     position: relative;
 
     position: relative;
Line 320: Line 335:
 
}
 
}
 
      
 
      
−
 
 
.content {
 
.content {
 
     margin-left:auto;
 
     margin-left:auto;
Line 331: Line 345:
 
     height:100%;
 
     height:100%;
 
}
 
}
−
   
 
 
.about{
 
.about{
 
     height: 150px;
 
     height: 150px;
 
}
 
}
−
 
 
.services{
 
.services{
 
     height: 350px;
 
     height: 350px;
 
}
 
}
−
 
 
.video{
 
.video{
 
     height: 500px;
 
     height: 500px;
 
}
 
}
−
 
 
.contact{
 
.contact{
 
     width: 500px;
 
     width: 500px;
 
     height: 350px;
 
     height: 350px;
 
}
 
}
−
 
 
.intro{
 
.intro{
 
padding-top: 10px;
 
padding-top: 10px;
 
margin-top: 10px;
 
margin-top: 10px;
−
}
+
}  
−
   
+
 
.first-text{
 
.first-text{
 
     padding-top: 20px;
 
     padding-top: 20px;
 
     width:100%;
 
     width:100%;
 
}
 
}
−
 
 
.second-text{
 
.second-text{
 
     width:100%;
 
     width:100%;
 
}
 
}
−
   
 
 
.container {
 
.container {
 
     display: flex;
 
     display: flex;
Line 368: Line 374:
 
     vertical-align: middle;
 
     vertical-align: middle;
 
     text-align: center;
 
     text-align: center;
 +
    max-width:999px;
 
}
 
}
−
   
 
 
#container {  
 
#container {  
 
     position: relative;
 
     position: relative;
Line 376: Line 382:
 
     height:1000px;
 
     height:1000px;
 
}
 
}
−
 
 
.column {
 
.column {
 
     flex: 1;
 
     flex: 1;
 
}
 
}
−
 
 
.column-one {
 
.column-one {
 
     order: 2;
 
     order: 2;
Line 393: Line 397:
 
     order: 5;
 
     order: 5;
 
}
 
}
−
   
 
 
.2-rows div {
 
.2-rows div {
 
     height:100%;padding:50px 0;
 
     height:100%;padding:50px 0;
Line 401: Line 404:
 
     height:100%;padding:20px 0;
 
     height:100%;padding:20px 0;
 
}
 
}
−
 
 
.icon-text{
 
.icon-text{
 
     padding-top: 20px;
 
     padding-top: 20px;
 
     height: 100%;
 
     height: 100%;
 
}
 
}
−
   
+
.hr.small {
−
.imgsize{
+
−
    position: relative;
+
−
    vertical-align: middle;
+
−
    text-align: center;
+
−
    padding-top: 20px;
+
−
    max-width: 500px;
+
−
    height: 100px;
+
−
}
+
−
 
+
−
.scmedimgsize{
+
−
    position: relative;
+
−
    vertical-align: middle;
+
−
    text-align: center;
+
−
    padding-top: 20px;
+
−
    max-width: 200px;
+
−
    height: 50px;
+
−
}
+
−
 
+
−
   
+
−
hr.small {
+
 
     max-width: 1000px;
 
     max-width: 1000px;
 
     border: 0;
 
     border: 0;
Line 432: Line 414:
 
     background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(50, 50, 50, 0.75), rgba(0, 0, 0, 0));
 
     background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(50, 50, 50, 0.75), rgba(0, 0, 0, 0));
 
}
 
}
−
 
+
p.sponsor-txt{
−
/* NAVIGATION BAR */
+
     text-align: left;  
−
 
+
−
.navbar {
+
−
     position: absolute
+
−
  overflow: hidden;
+
−
  background-color: #333;
+
−
  position: fixed;
+
−
  top: 0;
+
−
  width: 100%;
+
−
    z-index: -1;
+
 
}
 
}
−
 
−
.navbar a {
 
−
  float: left;
 
−
  display: block;
 
−
  color: #f2f2f2;
 
−
  text-align: center;
 
−
  padding: 14px 16px;
 
−
  text-decoration: none;
 
−
  font-size: 17px;
 
−
}
 
−
 
−
/* NAVIGATION BAR */p.sponsor-txt{
 
−
    text-align: left;   
 
−
    }
 
 
      
 
      
 
p.left{
 
p.left{
 
     text-align: left;
 
     text-align: left;
 
}
 
}
−
 
+
section.left{
−
/* PARAGRAPHS */
+
−
 
+
−
p.sponsor-txt{
+
−
    text-align: left;   
+
−
    }
+
−
   
+
−
p.left{
+
 
     text-align: left;
 
     text-align: left;
 
}
 
}
  
 
/* SWOT CSS */
 
/* SWOT CSS */
−
 
 
#swotcontr1 {
 
#swotcontr1 {
 
     text-align: justify;
 
     text-align: justify;
Line 481: Line 432:
 
     width:100%;
 
     width:100%;
 
}
 
}
−
 
 
#swotcontr1>div {
 
#swotcontr1>div {
 
     width: 450px;
 
     width: 450px;
Line 492: Line 442:
 
     zoom: 1;
 
     zoom: 1;
 
}
 
}
−
 
 
#swotcontr2 {
 
#swotcontr2 {
 
     text-align: justify;
 
     text-align: justify;
Line 499: Line 448:
 
     width:100%;
 
     width:100%;
 
}
 
}
−
 
 
#swotcontr2>div {
 
#swotcontr2>div {
 
     width: 450px;
 
     width: 450px;
Line 510: Line 458:
 
     zoom: 1;
 
     zoom: 1;
 
}
 
}
−
 
 
span {
 
span {
 
     width: 100%;
 
     width: 100%;
Line 517: Line 464:
 
     line-height: 0
 
     line-height: 0
 
}
 
}
−
 
 
.col-cont {
 
.col-cont {
 
     text-align: center;
 
     text-align: center;
Line 524: Line 470:
 
     margin: auto;
 
     margin: auto;
 
     padding: 10px;
 
     padding: 10px;
 +
    padding-bottom: 30px;
 
}
 
}
 
.one {
 
.one {
Line 537: Line 484:
 
     height: 100%;
 
     height: 100%;
 
}
 
}
−
   
 
 
.personal-info{
 
.personal-info{
 
     text-align: left;
 
     text-align: left;
Line 545: Line 491:
 
}
 
}
  
−
      
+
/* TABLEIZERS */
 +
table.tableizer-table {
 +
     color: #000;
 +
    //width: 640px;
 +
    border-collapse: collapse;
 +
    border-spacing: 0;
 +
    font-family:raleway;
 +
    max-width: 100%;
 +
}
 +
table.tableizer-table td, th {
 +
    border: 1px solid transparent; /* No more visible border */
 +
    padding: 6px 20px;
 +
    transition: all 0.05s;  /* Simple transition for hover effect */
 +
}
 +
table.tableizer-table th {
 +
    background: #abf;  /* Darken header a bit */
 +
    font-weight: 700;
 +
    height: 50px;
 +
}
 +
table.tableizer-table td {
 +
    text-align: center;
 +
}
 +
table.tableizer-table tr:nth-child(even) td { background: #DDD; }
 +
table.tableizer-table tr:nth-child(odd) td { background: #EEE; }
 +
 
 +
table.tableizer-table tr:hover td {
 +
  background-color: #CCF;
 +
}
 +
 
 +
/* NAVIGATION BAR */
 +
#primary_nav_wrap
 +
{
 +
    margin-top:0px;
 +
    overflow-x: visible;
 +
    /*position: relative;*/
 +
    /*overflow: hidden;*/
 +
    background-color: #333;
 +
    position: fixed;
 +
    top: 17px;
 +
    height: 32px;
 +
    width: 100%;
 +
    min-width: 1000px;
 +
}
 +
#primary_nav_wrap ul
 +
{
 +
    list-style:none;
 +
    position:relative;
 +
    float:left;
 +
    margin:0;
 +
    padding:0 0 0 20%;
 +
}
 +
#primary_nav_wrap ul a
 +
{
 +
    display:block;
 +
    position:relative;
 +
    color: white;/*#333;*/
 +
    text-decoration:none;
 +
    font-weight:700;
 +
    font-size:15px;
 +
    line-height:32px;
 +
    padding:0 15px;
 +
    z-index: 2000;
 +
}
 +
#primary_nav_wrap ul li
 +
{
 +
    z-index: 2000;
 +
    position:relative;
 +
    float:left;
 +
    margin:0;
 +
    padding:0;
 +
}
 +
#primary_nav_wrap ul li.current-menu-item
 +
{
 +
    background:red;
 +
}
 +
#primary_nav_wrap ul li:hover
 +
{
 +
    background-color:rgba(160, 192, 239, 0.25);
 +
    transition: all .1s ease-out;
 +
    cursor: pointer
 +
}
 +
#primary_nav_wrap ul ul
 +
{
 +
    position:absolute;
 +
    top:100%;
 +
    left:0;
 +
    background-color:rgba(15, 19, 25, 0.7);
 +
    padding:0;
 +
    transition: all .2s ease-out;
 +
    opacity: 0; /* for anim display:none; -> display:block; */
 +
    visibility: hidden;
 +
    margin: -20px 0 0 0;
 +
}
 +
#primary_nav_wrap ul ul li
 +
{
 +
    float:none;
 +
    width:200px;
 +
}
 +
#primary_nav_wrap ul ul a
 +
{
 +
    line-height:120%;
 +
    padding:10px 15px;
 +
}
 +
#primary_nav_wrap ul li:hover > ul
 +
{
 +
    opacity: 1;
 +
    visibility: visible;
 +
    margin: 0;
 +
 
 +
}
 +
 
 +
 
 +
.div-table {
 +
  display: table;       
 +
  width: auto;       
 +
  overflow: auto;   
 +
  border-spacing: 5px; /* cellspacing:poor IE support for  this */
 +
}
 +
.div-table-row {
 +
  display: table-row;
 +
  width: auto;
 +
  clear: both;
 +
}
 +
.div-table-col {
 +
  float: left; /* fix for  buggy browsers */
 +
  display: table-column;       
 +
  width: 200px;       
 +
}
 +
 
 +
#footer {position: absolute; padding-top:10px; padding-bottom:10px; width: 100%;}
 
</style>
 
</style>
  
−
<!-- start of content -->
+
 
 +
<!-------------- start of content ------------>
 +
 
 
<!--<div class="igem_2017_content_wrapper">-->
 
<!--<div class="igem_2017_content_wrapper">-->
 +
<nav>
 +
<div id="primary_nav_wrap" style="z-index: 2000">
 +
  <ul>
 +
  <li class="mobicon"> <a href="javascript:void(0);" onclick="mobnavtoggle()">≡ Menu</a></li>
 +
  <li><a href="https://2017.igem.org/Team:Groningen">Home</a></li>
 +
  <li><a onclick="">Project</a>
 +
    <ul>
 +
    <li><a href="https://2017.igem.org/Team:Groningen/Description">Description</a></li>
 +
    <li><a href="https://2017.igem.org/Team:Groningen/Model">Model</a></li>
 +
    <li><a href="https://2017.igem.org/Team:Groningen/Design">Design</a></li>
 +
    <li><a href="https://2017.igem.org/Team:Groningen/Results">Results</a></li>
 +
    <li><a href="https://2017.igem.org/Team:Groningen/Notebook">Notebook</a></li>
 +
    <li><a href="https://2017.igem.org/Team:Groningen/FutureResearch">Future Research</a></li>
 +
    <li><a href="https://2017.igem.org/Team:Groningen/Protocols">Protocols</a></li>
 +
    <li><a href="https://2017.igem.org/Team:Groningen/InterLab">InterLab</a></li>
 +
    </ul>
 +
  </li>
 +
  <li><a onclick="">Human Practices</a>
 +
    <ul>
 +
    <li><a href="https://2017.igem.org/Team:Groningen/Overview">Overview</a></li>
 +
    <li><a href="https://2017.igem.org/Team:Groningen/HP/Silver">Human Practices (Silver)</a></li>
 +
    <li><a href="https://2017.igem.org/Team:Groningen/HP/Gold_Integrated">Integrated (Gold)</a></li>
 +
    <li><a href="https://2017.igem.org/Team:Groningen/Engagement">Public Engagement</a></li>
 +
    <li><a href="https://2017.igem.org/Team:Groningen/Applied_Design">Applied Design</a></li>
 +
    <li><a href="https://2017.igem.org/Team:Groningen/FutureOutlook">Future Outlook</a></li>
 +
    <li><a href="https://2017.igem.org/Team:Groningen/Safety">Safety</a></li>
 +
    </ul>
 +
  </li>
 +
  <li><a href="https://2017.igem.org/Team:Groningen/Parts">Parts</a></li>
 +
  <li><a href="https://2017.igem.org/Team:Groningen/Collaborations">Collaborations</a></li>
 +
  <li><a onclick="">Team</a>
 +
    <ul>
 +
    <li class="dir"><a href="https://2017.igem.org/Team:Groningen/Team">Team Members</a></li>
 +
    <li class="dir"><a href="https://2017.igem.org/Team:Groningen/Achievements">Achievements</a></li>
 +
    <li class="dir"><a href="https://2017.igem.org/Team:Groningen/Attributions">Attributions</a></li>
 +
    <li class="dir"><a href="https://2017.igem.org/Team:Groningen/Fun">Fun Activities</a></li>
 +
    </ul>
 +
  </li>
 +
  <li><a href="https://2017.igem.org/Team:Groningen/Sponsors">Sponsors</a></li>
 +
  </ul>
 +
</div>
 +
</nav>
  
−
<div class="navbar" style="z-index: 3000;margin-top: 10px"> <!--id="cssmenu"-->
+
<!------------- toggle mobile menu ----------->
−
  <a href="https://2017.igem.org/Team:Groningen">Home</a>
+
<script>
−
  <a href="https://2017.igem.org/Team:Groningen/Project">Project</a>
+
function mobnavtoggle() {
−
  <a href="https://2017.igem.org/Team:Groningen/HumanPractices">Human Practices</a>
+
document.getElementByID("primary_nav_wrap").classList.toggle("mobnav");
−
   <a href="https://2017.igem.org/Team:Groningen/Team">Team</a>
+
}
−
   <a href="https://2017.igem.org/Team:Groningen/Sponsors">Sponsors</a>
+
</script>
 +
 
 +
<style>
 +
.mobicon {display:none;}
 +
</style>
 +
 
 +
<!-------------- The Modal ---------------->
 +
 
 +
<div id="myModal" class="modal">
 +
   <img class="modal-content" id="img01">
 +
   <div id="caption"></div>
 
</div>
 
</div>
  
 +
<div id="myModalh" class="modal">
 +
  <img class="modal-contenth" id="img01h">
 +
  <div id="captionh"></div>
 +
</div>
 +
 +
 +
<!------------ header slider ---------------->
 +
 +
<style>
 +
.mySlides {display:none}
 +
.slideshow-container {
 +
  position: relative;
 +
  margin: auto;
 +
}
 +
.header_title {
 +
  color: green; //#00a94d;
 +
}
 +
.slideshow-container img {
 +
  filter: blur(3px);
 +
  width:100%;
 +
  height:350px;
 +
  object-fit: cover;
 +
}
 +
_:-ms-fullscreen, :root .ie11up { /* fucking piece of shit m$ */
 +
.slideshow-container img {
 +
  background-size: cover;
 +
  background-position: center center;
 +
}
 +
 +
}
 +
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { 
 +
.slideshow-container img {
 +
  background-size: cover;
 +
  background-position: center center;
 +
}
 +
}
 +
/* Caption text */
 +
.slidetext {
 +
  position: absolute;
 +
  bottom: 275px;
 +
  height:50px;
 +
  width: 100%;
 +
  text-align: center;
 +
}
 +
/* The dots/bullets/indicators */
 +
.dot {
 +
  height: 15px;
 +
  width: 15px;
 +
  margin: 0 2px;
 +
  background-color: #bbb;
 +
  border-radius: 50%;
 +
  display: inline-block;
 +
  transition: background-color 0.6s ease;
 +
}
 +
.activeslide {
 +
  background-color: #717171;
 +
}
 +
/* Fading animation */
 +
.fade {
 +
  -webkit-animation-name: fade;
 +
  -webkit-animation-duration: 1.5s;
 +
  animation-name: fade;
 +
  animation-duration: 1.5s;
 +
}
 +
@-webkit-keyframes fade {
 +
  from {opacity: .4}
 +
  to {opacity: 1}
 +
}
 +
@keyframes fade {
 +
  from {opacity: .4}
 +
  to {opacity: 1}
 +
}
 +
/* On smaller screens, decrease text size */
 +
@media only screen and (max-width: 300px) {
 +
  .slidetext {font-size: 11px}
 +
}
 +
/* remove old header bg shitstyle */
 +
.header {
 +
display: none;
 +
}
 +
</style>
 +
 +
<div class="slideshow-container">
 +
<div class="mySlides fade">
 +
  <img src="https://static.igem.org/mediawiki/2017/0/03/2017-10-14_19.37.13.jpg" style="width:100%">
 +
  <div class="slidetext"><h2 class="header_title"></h2></div>
 +
</div>
 +
<div class="mySlides fade">
 +
  <img src="https://static.igem.org/mediawiki/2017/a/ae/2017-10-17_14.37.13.jpg" style="width:100%">
 +
  <div class="slidetext"><h2 class="header_title"></h2></div>
 +
</div>
 +
<div class="mySlides fade">
 +
  <img src="https://static.igem.org/mediawiki/2017/4/43/2017-10-17_14.37.07.jpg" style="width:100%">
 +
  <div class="slidetext"><h2 class="header_title"></h2></div>
 +
</div>
 +
<div class="mySlides fade">
 +
  <img src="https://static.igem.org/mediawiki/2017/b/bd/2017-10-14_19.38.08.jpg" style="width:100%">
 +
  <div class="slidetext"><h2 class="header_title"></h2></div>
 +
</div>
 +
<div class="mySlides fade">
 +
  <img src="https://static.igem.org/mediawiki/2017/f/ff/2017-10-14_19.37.42.jpg" style="width:100%">
 +
  <div class="slidetext"><h2 class="header_title"></h2></div>
 +
</div>
 +
<div class="mySlides fade">
 +
  <img src="https://static.igem.org/mediawiki/2017/7/73/20171027_123215.jpg" style="width:100%">
 +
  <div class="slidetext"><h2 class="header_title"></h2></div>
 +
</div>
 +
<div class="mySlides fade">
 +
  <img src="https://static.igem.org/mediawiki/2017/f/fb/20171027_123230.jpg" style="width:100%">
 +
  <div class="slidetext"><h2 class="header_title"></h2></div>
 +
</div>
 +
<div class="mySlides fade">
 +
  <img src="https://static.igem.org/mediawiki/2017/0/06/20171027_123249.jpg" style="width:100%">
 +
  <div class="slidetext"><h2 class="header_title"></h2></div>
 +
</div>
 +
<div class="mySlides fade">
 +
  <img src="https://static.igem.org/mediawiki/2017/a/a0/20171101_225544.jpg" style="width:100%">
 +
  <div class="slidetext"><h2 class="header_title"></h2></div>
 +
</div>
 +
</div>
 +
 +
<br>
 +
 +
<div style="text-align:center">
 +
  <span class="dot"></span>
 +
  <span class="dot"></span>
 +
  <span class="dot"></span>
 +
  <span class="dot"></span>
 +
  <span class="dot"></span>
 +
  <span class="dot"></span>
 +
  <span class="dot"></span>
 +
  <span class="dot"></span>
 +
  <span class="dot"></span>
 +
</div>
 +
 +
<script>
 +
 +
$( document ).ready(function() {
 +
stringPathName = window.location.pathname
 +
switch (stringPathName) {
 +
    case "/Team:Groningen":
 +
        HTit = "IMPACT";
 +
        break;
 +
    case "/Team:Groningen/Description":
 +
        HTit = "DESCRIPTION";
 +
        break;
 +
    case "/Team:Groningen/Model":
 +
        HTit = "MODEL";
 +
        break;
 +
    case "/Team:Groningen/Design":
 +
        HTit = "DESIGN";
 +
        break;
 +
    case "/Team:Groningen/Results":
 +
        HTit = "RESULTS";
 +
        break;
 +
    case "/Team:Groningen/Notebook":
 +
        HTit = "NOTEBOOK";
 +
        break;
 +
    case "/Team:Groningen/FutureResearch":
 +
        HTit = "FUTURE RESEARCH";
 +
        break;
 +
    case "/Team:Groningen/Protocols":
 +
        HTit = "PROTOCOLS";
 +
        break;
 +
    case "/Team:Groningen/InterLab":
 +
        HTit = "INTERLAB";
 +
        break;
 +
    case "/Team:Groningen/Overview":
 +
        HTit = "OVERVIEW";
 +
        break;
 +
    case "/Team:Groningen/HP/Silver":
 +
        HTit = "HUMAN PRACTICES";
 +
        break;
 +
    case "/Team:Groningen/HP/Gold_Integrated":
 +
        HTit = "INTEGRATED";
 +
        break;
 +
    case "/Team:Groningen/Engagement":
 +
        HTit = "ENGAGEMENT";
 +
        break;
 +
    case "/Team:Groningen/Applied_Design":
 +
        HTit = "APPLIED DESIGN";
 +
        break;
 +
    case "/Team:Groningen/FutureOutlook":
 +
        HTit = "FUTURE OUTLOOK";
 +
        break;
 +
    case "/Team:Groningen/Safety":
 +
        HTit = "SAFETY";
 +
        break;
 +
    case "/Team:Groningen/Parts":
 +
        HTit = "PARTS";
 +
        break;
 +
    case "/Team:Groningen/Collaborations":
 +
        HTit = "COLLABORATIONS";
 +
        break;
 +
    case "/Team:Groningen/Team":
 +
        HTit = "TEAM MEMBERS";
 +
        break;
 +
    case "/Team:Groningen/Achievements":
 +
        HTit = "ACHIEVEMENTS";
 +
        break;
 +
    case "/Team:Groningen/Attributions":
 +
        HTit = "ATTRIBUTIONS";
 +
        break;
 +
    case "/Team:Groningen/Fun":
 +
        HTit = "FUN ACTIVITIES";
 +
        break;
 +
    case "/Team:Groningen/Sponsors":
 +
        HTit = "SPONSORS";
 +
        break;
 +
    default:
 +
        HTit = "Sudazima";
 +
        break;
 +
}
 +
var elements = document.getElementsByClassName("header_title");
 +
for(var i = 0, length = elements.length; i < length; i++) {
 +
elements[i].innerHTML = HTit;
 +
}
 +
});
 +
 +
 +
function showSlides() {
 +
    var i;
 +
    var slides = document.getElementsByClassName("mySlides");
 +
    var dots = document.getElementsByClassName("dot");
 +
    for (i = 0; i < slides.length; i++) {
 +
      slides[i].style.display = "none"; 
 +
    }
 +
    slideIndex++;
 +
    if (slideIndex > slides.length) {slideIndex = 1}   
 +
    for (i = 0; i < dots.length; i++) {
 +
        dots[i].className = dots[i].className.replace(" activeslide", "");
 +
    }
 +
    slides[slideIndex-1].style.display = "block"; 
 +
    dots[slideIndex-1].className += " activeslide";
 +
    setTimeout(showSlides, 6000); // Change image every 6 seconds
 +
}
 +
var slideIndex = Math.floor((Math.random() * 9) + 1);
 +
showSlides();
 +
 +
</script>
 +
 +
<!-------- banner image map ----------->
 +
 +
<map name="imagemap_sponsors" id="imagemapbanner">
 +
<area href="http://www.kivi.nl/" shape="rect" coords="41,30,516,315" style="outline:none;" target="_blank" />
 +
<area href="https://www.gatc-biotech.com/en/index.html" shape="rect" coords="34,464,517,716" style="outline:none;" target="_blank" />
 +
<area href="https://www.baseclear.com/" shape="rect" coords="30,334,535,469" style="outline:none;" target="_blank" />
 +
<area href="http://www.rivm.nl/" shape="rect" coords="583,32,1251,343" style="outline:none;" target="_blank" />
 +
<area href="http://www.rug.nl/about-us/support-the-university/groninger-university-fund/" shape="rect" coords="585,370,1436,429" style="outline:none;" target="_blank" />
 +
<area href="http://www.corbion.com/" shape="rect" coords="557,469,913,693" style="outline:none;" target="_blank" />
 +
<area href="http://www.dsm.com/" shape="rect" coords="927,454,1441,722" style="outline:none;" target="_blank" />
 +
<area href="http://ubboemmiusfonds.nl/" shape="rect" coords="1274,28,1438,358" style="outline:none;" target="_blank" />
 +
<area href="http://www.rug.nl/sciencelinx/" shape="rect" coords="1556,18,1903,204" style="outline:none;" target="_blank" />
 +
<area href="http://www.rug.nl/research/gbb/" shape="rect" coords="1491,234,1881,420" style="outline:none;" target="_blank" />
 +
<area href="https://www.arla.com/" shape="rect" coords="1476,419,1896,711" style="outline:none;" target="_blank" />
 +
<area href="http://www.rug.nl/research/enteg/" shape="rect" coords="1973,230,2327,384" style="outline:none;" target="_blank" />
 +
<area href="http://www.backerfoundation.nl/" shape="rect" coords="1974,22,2328,226" style="outline:none;" target="_blank" />
 +
<area href="http://www.qiagen.com/" shape="rect" coords="1959,423,2313,733" style="outline:none;" target="_blank" />
 +
<area href="http://www.be-basic.org/" shape="rect" coords="2382,373,2736,729" style="outline:none;" target="_blank" />
 +
<area href="https://www.eppendorf.com/" shape="rect" coords="2753,416,3334,550" style="outline:none;" target="_blank" />
 +
<area href="http://www.rug.nl/research/gbb/maxgruber/information/the-max-gruber-foundation" shape="rect" coords="2755,551,3336,709" style="outline:none;" target="_blank" />
 +
<area href="http://www.rug.nl/research/stratingh/" shape="rect" coords="3348,407,3776,687" style="outline:none;" target="_blank" />
 +
<area href="http://www.rug.nl/" shape="rect" coords="2455,32,2966,192" style="outline:none;" target="_blank" />
 +
<area href="http://www.rug.nl/fse/" shape="rect" coords="2985,47,3423,178" style="outline:none;" target="_blank" />
 +
<area href="http://www.rug.nl/research/jbi/" shape="rect" coords="2461,231,3062,360" style="outline:none;" target="_blank" />
 +
<area href="http://www.rug.nl/research/alice/" shape="rect" coords="3063,232,3528,358" style="outline:none;" target="_blank" />
 +
<area href="http://www.rug.nl/research/zernike/" shape="rect" coords="3385,60,3790,182" style="outline:none;" target="_blank" />
 +
<area href="http://cgmartini.nl/index.php" shape="rect" coords="3530,222,3830,348" style="outline:none;" target="_blank" />
 +
</map>
 +
 +
<script>
 +
$(document).ready(function() {
 +
    var origWidth = 3850;
 +
    var origHeight = 770;
 +
    var banner = $('#bannerimg');
 +
    var map = $('map[name^="imagemap_sponsors"]');
 +
    var newWidth = banner.innerWidth();
 +
    var newHeight = banner.innerHeight();
 +
    var dx = newWidth / origWidth;
 +
    var dy = newHeight / origHeight;
 +
    map.find('area').each(function() {
 +
        var coords = $(this).attr('coords').split(',');
 +
        coords[0] = parseFloat(coords[0]) * dx;
 +
        coords[1] = parseFloat(coords[1]) * dy;
 +
        coords[2] = parseFloat(coords[2]) * dx;
 +
        coords[3] = parseFloat(coords[3]) * dy;
 +
        $(this).attr('coords', coords.join(','));
 +
    });
 +
});
 +
</script>
 +
 +
<!-------------- scrollspy ------------->
 +
 +
<style>
 +
 +
#myScrollspy
 +
{
 +
    top:400px;
 +
    background-color: #fff;
 +
    position: absolute;
 +
    width: 230px;
 +
    display:block;
 +
    //height: 100%;
 +
    margin-left: -270px; //main-col 750px
 +
}
 +
#myScrollspy ul
 +
{
 +
    list-style:none;
 +
    margin:0;
 +
    padding:0;
 +
}
 +
#myScrollspy ul a
 +
{
 +
    display:block; //block lenght a
 +
    max-width: 230px;
 +
    z-index: 2000;
 +
    width:100%;
 +
    height:100%;
 +
 +
    color: black;
 +
    text-decoration:none;
 +
    font-weight:600;
 +
    font-size:14px;
 +
    line-height:30px;
 +
    text-align:left;
 +
    padding: 2px 0px 2px 20px;
 +
}
 +
#myScrollspy ul li
 +
{
 +
    //display:block;
 +
    margin:0;
 +
    padding:0;
 +
}
 +
 +
#myScrollspy ul li.active {
 +
  background:green;
 +
  transition: all .1s ease-out;
 +
}
 +
#myScrollspy ul li.active:hover {
 +
  background-color:rgba(120, 255, 180, 0.5);
 +
  transition: all .1s ease-out;
 +
}
 +
#myScrollspy ul li:hover {
 +
  background-color:rgba(160, 192, 239, 0.5);
 +
  transition: all .1s ease-out;
 +
}
 +
 +
#myScrollspy.sticky {
 +
  position: fixed;
 +
  top: 48px;
 +
}
 +
 +
div.scrollcol {
 +
width:750px;
 +
}
 +
div.marginsnav {       
 +
  margin-left:250px;
 +
}
 +
</style>
 +
 +
<!-- fucking lol piece of shit igem site -->
 +
<script src="https://static.igem.org/mediawiki/2017/6/60/Scrollspy.txt"></script>
 +
 +
<script>
 +
// Add scrollspy to document
 +
//$( document ).ready(function() { $("body").scrollspy({target: "#myScrollspy", offset:100}); });
 +
 +
// Add smooth scrolling on all links inside the navbar
 +
 +
/*
 +
var animateScroll = function(target, offset, speed) {
 +
    var is = $(document).scrollTop();
 +
    var must = parseInt($(target).offset().top) + offset;
 +
    if (typeof speed == 'undefined') {
 +
        speed = Math.sqrt(Math.pow(is - must, 2)) / 75
 +
    }
 +
    var setTo;
 +
    if (is < must) {
 +
        setTo = is + speed;
 +
        if (setTo > must) {
 +
            setTo = must;
 +
        }
 +
    } else if (is > must) {
 +
        setTo = is - speed;
 +
        if (setTo < must) {
 +
            setTo = must;
 +
        }
 +
    }
 +
 +
    $(document).scrollTop(setTo);
 +
    if (setTo != must) {
 +
        setTimeout(function() {animateScroll(target, offset, speed);}, 10);
 +
    }
 +
}*/
 +
 +
var jump=function(e)
 +
{
 +
  if (e){
 +
      e.preventDefault();
 +
 +
      //$("body").scrollspy({target: "#myScrollspy", offset:100}); legion says this is bad nad dumb
 +
 +
      var target = $(this).attr("href");
 +
  }else{
 +
      var target = location.hash;
 +
  }
 +
 +
 +
  console.log(target);
 +
  $('html,body').animate (
 +
  {
 +
      scrollTop: $(target).offset().top - 90
 +
  },1000 );
 +
 +
//animateScroll(target, -90);
 +
 +
}
 +
 +
if ('scrollRestoration' in history) {
 +
  history.scrollRestoration = 'manual';
 +
}
 +
 +
$('html, body').hide();
 +
 +
$(document).ready(function() {
 +
$('a[href^="#snav"]').bind("click", jump);
 +
 +
    if (location.hash){
 +
        setTimeout(function(){
 +
            $('html, body').scrollTop(0).show();
 +
            $("body").scrollspy({target: "#myScrollspy", offset:100});
 +
            jump();
 +
        }, 0);
 +
    }else{
 +
        $('html, body').show();
 +
        $("body").scrollspy({target: "#myScrollspy", offset:100});
 +
    }
 +
});
 +
 +
</script>
 +
 +
<!-- PIECE OF SHIT POGRAMM BY GREEDY NEW WORLD ORDER M$ -->
 +
 +
<script>
 +
// Get IE or Edge browser version
 +
var versionshitie = detectIE();
 +
//document.getElementById('result').innerHTML = versionshitie;
 +
 +
function detectIE() {
 +
  var ua = window.navigator.userAgent;
 +
  var msie = ua.indexOf('MSIE ');
 +
  if (msie > 0) {
 +
    return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
 +
  }
 +
 +
  var trident = ua.indexOf('Trident/');
 +
  if (trident > 0) {
 +
    var rv = ua.indexOf('rv:');
 +
    return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
 +
  }
 +
  var edge = ua.indexOf('Edge/');
 +
  if (edge > 0) {
 +
    return parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10);
 +
  }
 +
  return false;
 +
}
 +
 +
</script>
  
−
<header class="header" style="margin-top: 20px;">
+
</html>
−
    <div id="title_container">
+
−
<!--        <h2 id="title">
+
−
    Under construction
+
−
    </h2> -->
+
−
<!--    <h2 id="subtitle">
+
−
        #teamGroningen2017
+
−
    </h2> -->
+
−
    </div>
+
−
</header>
+

Latest revision as of 03:01, 2 November 2017