Difference between revisions of "Template:Groningen"

 
(154 intermediate revisions by 4 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
  
−
<style>
+
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Raleway" />
−
@font-face {
+
<link rel="shortcut icon" type="image/x-icon" href="https://static.igem.org/mediawiki/2017/2/23/Tab_ding_icon_32.png" />
−
  font-family: 'Raleway';
+
−
  font-style: normal;
+
−
  font-weight: 400;
+
−
  src: local('Raleway'), local('Raleway-Regular'), url(2017.igem.org/wiki/images/8/87/RalewayGRE.woff) format('woff2');
+
−
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
+
−
}
+
−
/* latin */
+
−
@font-face {
+
−
  font-family: 'Raleway';
+
−
  font-style: normal;
+
−
  font-weight: 400;
+
−
  src: local('Raleway'), local('Raleway-Regular'), url(2017.igem.org/wiki/images/e/e4/RalewayGRA.woff) format('woff2');
+
−
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
+
−
}
+
−
</style>
+
−
 
+
  
 
<script>
 
<script>
Line 25: Line 9:
 
$(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();
Line 89: Line 73:
 
/* START GENERAL STYLES */
 
/* START GENERAL STYLES */
 
html {
 
html {
−
     height: 100%;
+
     //height: 100%;
 
     width: 100%;
 
     width: 100%;
 
     margin: 0;
 
     margin: 0;
Line 103: Line 87:
  
 
     position: relative;
 
     position: relative;
−
     height: auto;
+
     //height: auto;
−
     min-height: 100%;
+
     //min-height: 100%;
  
 
}
 
}
Line 167: Line 151:
 
     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
 
}
 
}
  
Line 190: Line 174:
 
}
 
}
 
.imglabh {
 
.imglabh {
−
     display: block;
+
     /*display: block;*/
−
     max-width: 70%;
+
     max-width: 100%;
 +
    overflow: visible;
 
     margin: auto;
 
     margin: auto;
 
     text-align: center;
 
     text-align: center;
Line 226: Line 211:
 
  text-decoration:none;
 
  text-decoration:none;
 
  text-align:center;
 
  text-align:center;
−
  cursor:pointer;white-space:nowrap
+
  cursor:pointer;
 +
white-space:nowrap;
 
}
 
}
  
Line 503: Line 489:
 
     padding-right: 10px;
 
     padding-right: 10px;
 
          
 
          
 +
}
 +
 +
/* 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;
 
}
 
}
  
Line 555: Line 570:
 
     background-color:rgba(160, 192, 239, 0.25);
 
     background-color:rgba(160, 192, 239, 0.25);
 
     transition: all .1s ease-out;
 
     transition: all .1s ease-out;
 +
    cursor: pointer
 
}
 
}
 
#primary_nav_wrap ul ul
 
#primary_nav_wrap ul ul
Line 583: Line 599:
 
     visibility: visible;
 
     visibility: visible;
 
     margin: 0;
 
     margin: 0;
 +
 
}
 
}
  
Line 607: Line 624:
  
  
−
<!-- start of content -->
+
<!-------------- start of content ------------>
  
 
<!--<div class="igem_2017_content_wrapper">-->
 
<!--<div class="igem_2017_content_wrapper">-->
 
<nav>
 
<nav>
−
<div id="primary_nav_wrap" style="z-index: 2000">
+
<div id="primary_nav_wrap" style="z-index: 2000">
−
<ul>
+
  <ul>
−
  <li><a href="https://2017.igem.org/Team:Groningen">Home</a></li>
+
   <li class="mobicon"> <a href="javascript:void(0);" onclick="mobnavtoggle()">≡ Menu</a></li>
−
  <li style=""><a href="https://2017.igem.org/Team:Groningen/Description">Project</a>
+
  <li><a href="https://2017.igem.org/Team:Groningen">Home</a></li>
−
   <ul>
+
  <li><a onclick="">Project</a>
−
      <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 href="https://2017.igem.org/Team:Groningen/Overview">Human Practices</a>
+
 
     <ul>
 
     <ul>
−
      <li><a href="https://2017.igem.org/Team:Groningen/Overview">Overview</a></li>
+
    <li><a href="https://2017.igem.org/Team:Groningen/Description">Description</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/Model">Model</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/Design">Design</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/Results">Results</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/Notebook">Notebook</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/FutureResearch">Future Research</a></li>
−
      <li><a href="https://2017.igem.org/Team:Groningen/Safety">Safety</a></li>
+
    <li><a href="https://2017.igem.org/Team:Groningen/Protocols">Protocols</a></li>
−
    </ul></li>
+
    <li><a href="https://2017.igem.org/Team:Groningen/InterLab">InterLab</a></li>
−
  <li><a href="https://2017.igem.org/Team:Groningen/Parts">Parts</a>
+
    </ul>
−
  </li>
+
  </li>
−
  <li><a href="https://2017.igem.org/Team:Groningen/Collaborations">Collaborations</a>
+
  <li><a onclick="">Human Practices</a>
−
  </li>
+
−
  <li><a href="https://2017.igem.org/Team:Groningen/Team">Team</a>
+
 
     <ul>
 
     <ul>
−
      <li class="dir"><a href="https://2017.igem.org/Team:Groningen/Team">Team Members</a></li>
+
    <li><a href="https://2017.igem.org/Team:Groningen/Overview">Overview</a></li>
−
      <li class="dir"><a href="https://2017.igem.org/Team:Groningen/Achievements">Achievements</a></li>
+
    <li><a href="https://2017.igem.org/Team:Groningen/HP/Silver">Human Practices (Silver)</a></li>
−
      <li class="dir"><a href="https://2017.igem.org/Team:Groningen/Attributions">Attributions</a></li>
+
    <li><a href="https://2017.igem.org/Team:Groningen/HP/Gold_Integrated">Integrated (Gold)</a></li>
−
      <li class="dir"><a href="https://2017.igem.org/Team:Groningen/Fun">Fun Activities</a></li>
+
    <li><a href="https://2017.igem.org/Team:Groningen/Engagement">Public Engagement</a></li>
−
     </ul></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/Sponsors">Sponsors</a></li>
+
    <li><a href="https://2017.igem.org/Team:Groningen/FutureOutlook">Future Outlook</a></li>
−
</ul>
+
    <li><a href="https://2017.igem.org/Team:Groningen/Safety">Safety</a></li>
−
</div>
+
    </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>
 
</nav>
  
−
<!-- The Modal -->
+
<!------------- toggle mobile menu ----------->
 +
<script>
 +
function mobnavtoggle() {
 +
document.getElementByID("primary_nav_wrap").classList.toggle("mobnav");
 +
}
 +
</script>
 +
 
 +
<style>
 +
.mobicon {display:none;}
 +
</style>
 +
 
 +
<!-------------- The Modal ---------------->
  
 
<div id="myModal" class="modal">
 
<div id="myModal" class="modal">
Line 664: Line 694:
  
  
−
<!-- header slider -->
+
<!------------ header slider ---------------->
  
 
<style>
 
<style>
Line 673: Line 703:
 
}
 
}
 
.header_title {
 
.header_title {
−
   color: #00a94d;
+
   color: green; //#00a94d;
 
}
 
}
 
.slideshow-container img {
 
.slideshow-container img {
Line 680: Line 710:
 
   height:350px;
 
   height:350px;
 
   object-fit: cover;
 
   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 */
 
/* Caption text */
Line 758: Line 801:
 
<div class="mySlides fade">
 
<div class="mySlides fade">
 
   <img src="https://static.igem.org/mediawiki/2017/0/06/20171027_123249.jpg" style="width:100%">
 
   <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 class="slidetext"><h2 class="header_title"></h2></div>
 
</div>
 
</div>
Line 765: Line 812:
  
 
<div style="text-align:center">
 
<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>
Line 781: Line 829:
 
switch (stringPathName) {
 
switch (stringPathName) {
 
     case "/Team:Groningen":
 
     case "/Team:Groningen":
−
         HTit = "HOME";
+
         HTit = "IMPACT";
 
         break;
 
         break;
 
     case "/Team:Groningen/Description":
 
     case "/Team:Groningen/Description":
Line 849: Line 897:
 
         HTit = "SPONSORS";
 
         HTit = "SPONSORS";
 
         break;
 
         break;
−
     case "/Team:Groningen/test":
+
     default:
 
         HTit = "Sudazima";
 
         HTit = "Sudazima";
 
         break;
 
         break;
Line 876: Line 924:
 
     setTimeout(showSlides, 6000); // Change image every 6 seconds
 
     setTimeout(showSlides, 6000); // Change image every 6 seconds
 
}
 
}
−
var slideIndex = Math.floor((Math.random() * 8) + 1);
+
var slideIndex = Math.floor((Math.random() * 9) + 1);
 
showSlides();
 
showSlides();
  
 
</script>
 
</script>
  
−
<!-- banner image map-->
+
<!-------- banner image map ----------->
  
 
<map name="imagemap_sponsors" id="imagemapbanner">
 
<map name="imagemap_sponsors" id="imagemapbanner">
Line 931: Line 979:
 
</script>
 
</script>
  
−
<!-- scrollspy -->
+
<!-------------- scrollspy ------------->
  
 
<style>
 
<style>
 +
 
#myScrollspy
 
#myScrollspy
 
{
 
{
−
     margin-top:-372px;
+
     top:400px;
−
    overflow-x: visible;
+
     background-color: #fff;
−
     background-color: #333;
+
     position: absolute;
−
     position: fixed;
+
−
    height: 100%;
+
 
     width: 230px;
 
     width: 230px;
 +
    display:block;
 +
    //height: 100%;
 +
    margin-left: -270px; //main-col 750px
 
}
 
}
 
#myScrollspy ul
 
#myScrollspy ul
 
{
 
{
 
     list-style:none;
 
     list-style:none;
−
    position:relative;
 
−
    float:left;
 
 
     margin:0;
 
     margin:0;
 +
    padding:0;
 
}
 
}
 
#myScrollspy ul a
 
#myScrollspy ul a
 
{
 
{
−
     display:block;
+
     display:block; //block lenght a
−
     color: white;
+
     max-width: 230px;
−
    position:relative;
+
−
    text-decoration:none;
+
−
    font-weight:700;
+
−
    font-size:15px;
+
−
    line-height:32px;
+
−
    padding:0 15px;
+
 
     z-index: 2000;
 
     z-index: 2000;
 
     width:100%;
 
     width:100%;
 
     height: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
 
#myScrollspy ul li
 
{
 
{
−
     z-index: 2000;
+
     //display:block;
−
    position:relative;
+
−
    float:left;
+
 
     margin:0;
 
     margin:0;
 
     padding:0;
 
     padding:0;
−
    width:100%;
 
−
    height:100%;
 
 
}
 
}
−
#myScrollspy ul li.active
+
 
−
{background:red;}
+
#myScrollspy ul li.active {
−
#myScrollspy ul li.active:hover
+
  background:green;
−
{background-color:rgba(255, 170, 170, 0.25);}
+
  transition: all .1s ease-out;
−
#myScrollspy ul li:hover
+
}
−
{background-color:rgba(160, 192, 239, 0.25);}
+
#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>
 
</style>
  
Line 987: Line 1,053:
 
<script>
 
<script>
 
// Add scrollspy to document
 
// Add scrollspy to document
−
$( document ).ready(function() { $("body").scrollspy({target: "#myScrollspy", offset:200}); });
+
//$( document ).ready(function() { $("body").scrollspy({target: "#myScrollspy", offset:100}); });
 +
 
 
// Add smooth scrolling on all links inside the navbar
 
// Add smooth scrolling on all links inside the navbar
−
$('body').on('click','a[href^="#nav"]',function(event){
+
 
−
     event.preventDefault();
+
/*
−
    var target_offset = $(this.hash).offset() ? $(this.hash).offset().top : 0;
+
var animateScroll = function(target, offset, speed) {
−
    //change this number to create the additional off set       
+
    var is = $(document).scrollTop();
−
    var customoffset = 75
+
    var must = parseInt($(target).offset().top) + offset;
−
    $('html, body').animate({scrollTop:target_offset - customoffset}, 500);
+
    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>
 
</script>
  
 
</html>
 
</html>

Latest revision as of 03:01, 2 November 2017