Difference between revisions of "Template:Groningen"

Line 1: Line 1:
 
<html>
 
<html>
−
<body>
+
 
 +
<script>
 +
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 +
 
 +
$(document).ready(function() {
 +
 
 +
$("#HQ_page").attr('id','');
 +
 +
 
 +
//highlight current page on the menu
 +
highlight_current_page_menu();
 +
 +
//accessing submenus
 +
$(".menu_item").click(function(){
 +
$(".submenu_control_icon", this).toggleClass("open");
 +
$(this).next(".submenu").fadeToggle(400);
 +
});
 +
 +
//mobile menu access
 +
$(".igem_2018_team_mobile_bar").click(function(){
 +
$(this).next().toggleClass("displaying_menu");
 +
});
 +
 +
});
 +
 
 +
 
 +
function highlight_current_page_menu() {
 +
 +
var page_url="https://2018.igem.org/";
 +
page_url = page_url + wgPageName;
 +
$("a[href$='"+ page_url +"']").children().addClass("current_page");
 +
 +
//if the page is in a submenu, open the submenu and make the appropiate changes
 +
if( $( ".current_page" ).hasClass( "submenu_item" )){
 +
 +
$(".current_page").parent().parent().fadeToggle(400);
 +
$(".current_page").parent().parent().prev().addClass("current_page");
 +
$(".menu_item.current_page > .submenu_control_icon").toggleClass("open");
 +
 +
}
 +
}
 +
 
 +
 
 +
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 +
 
 +
/// Smooth Scroll: ///
 +
 
 +
$(document).ready(function(){
 +
  // Add smooth scrolling to all links
 +
  $("a").on('click', function(event) {
 +
 
 +
    // Make sure this.hash has a value before overriding default behavior
 +
    if (this.hash !== "") {
 +
      // Prevent default anchor click behavior
 +
      event.preventDefault();
 +
 
 +
      // Store hash
 +
      var hash = this.hash;
 +
 
 +
      // Using jQuery's animate() method to add smooth page scroll
 +
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
 +
      $('html, body').animate({
 +
        scrollTop: $(hash).offset().top
 +
      }, 1500, function(){
 +
 
 +
        // Add hash (#) to URL when done scrolling (default click behavior)
 +
        window.location.hash = hash;
 +
      });
 +
    } // End if
 +
  });
 +
});
 +
 
 +
</script>
  
 
<style>
 
<style>
−
/******************************************************************************************************************
+
/**************************************************************************************************************************************************************************************************/
  
 
@import url("https://fonts.googleapis.com/css?family=Noto+Sans|Noto+Serif")
 
@import url("https://fonts.googleapis.com/css?family=Noto+Sans|Noto+Serif")
  
−
/*******************************************************************************************************************
+
 
 +
/**************************************************************************************************************************************************************************************************/
 +
/* DEFAULT WIKI SETTINGS */
 +
/**************************************************************************************************************************************************************************************************/
 +
 
 +
 
 +
#home_logo, #sideMenu { display:none; }
 +
#sideMenu, #top_title, .patrollink  {display:none;}
 +
#content { margin-left:0px; margin-top:-7px; padding:0px; width:100%;}
 +
body {background-color:white; margin: 0px}
 +
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 +
 
 +
.judges-will-not-evaluate { border: 4px solid #e4dede; padding: 2%; width: 92%;}
 +
 
 +
 
 +
/**************************************************************************************************************************************************************************************************/
 +
/* MENU */
 +
/**************************************************************************************************************************************************************************************************/
 +
 
 +
/*this wraps the whole of the menu*/
 +
.igem_2018_team_menu {
 +
background-color:#c4baba;
 +
border-left: 1px solid #c4baba;
 +
display:block;
 +
float:right;
 +
height:100vh;
 +
max-width: 270px;
 +
overflow-y: auto;
 +
overflow-x: hidden;
 +
padding:0px;
 +
position:fixed;
 +
right:0%;
 +
text-align:left;
 +
width: 15%;
 +
}
 +
 
 +
 
 +
.igem_2018_team_menu.displaying_menu{
 +
display:block;
 +
}
 +
 
 +
.igem_2018_team_menu  a {
 +
color: #484848;
 +
text-decoration:none;
 +
}
 +
 
 +
.igem_2018_team_menu img {
 +
width:100%;
 +
}
 +
 
 +
 
 +
.igem_2018_team_menu .menu_item {
 +
background-color: #c4baba;
 +
border-bottom: 1px solid #928b8b;
 +
clear: both;
 +
color: #484848;
 +
cursor: pointer;
 +
float: left;
 +
font-size: 120%;
 +
font-weight: bold;
 +
padding: 15px 0px 15px 5%;
 +
width: 100%;
 +
}
 +
 
 +
.igem_2018_team_menu .menu_item.direct_link {
 +
color: #484848;
 +
padding-left: 15%;
 +
}
 +
.igem_2018_team_menu .menu_item:hover {
 +
background-color: #ecb656;
 +
}
 +
 
 +
 
 +
.igem_2018_team_menu .menu_item .submenu_control_icon {
 +
color: #484848;
 +
float: left;
 +
width: 10%;
 +
}
 +
 
 +
/* submenu icon "+"  "-"*/
 +
.igem_2018_team_menu .menu_item .submenu_control_icon::before {
 +
content: "+";
 +
}
 +
 
 +
/* submenu icon "+"  "-"*/
 +
.igem_2018_team_menu .menu_item .submenu_control_icon.open::before {
 +
content: "-";
 +
}
 +
 
 +
/*submenu wrapper*/
 +
.igem_2018_team_menu .submenu{
 +
background-color: #e4dede;
 +
clear:both;
 +
display:none;
 +
float: left; 
 +
width:100%;
 +
}
 +
 
 +
/*styling for a submenu item*/
 +
.igem_2018_team_menu .submenu .submenu_item {
 +
border-bottom: 1px solid #c4baba;
 +
color: #635d5d;
 +
height: 30px;
 +
float: left;
 +
font-size: 110%;
 +
font-weight: bold;
 +
padding: 12px 0px 0px 15%;
 +
width: 100%;
 +
}
 +
 
 +
.igem_2018_team_menu .submenu .submenu_item:hover {
 +
background-color: #f3bd5d;
 +
}
 +
 
 +
 
 +
.igem_2018_team_menu .submenu .submenu_item.current_page,
 +
.igem_2018_team_menu .menu_item.current_page,
 +
.igem_2018_team_menu .menu_item.direct_link.current_page {
 +
background-color:#7acbd8;
 +
}
 +
 
 +
 
 +
 
 +
/*mobile menu bar styling*/
 +
/**************************************************************************************************************************************************************************************************/
 +
 
 +
 
 +
.igem_2018_team_mobile_bar {
 +
background-color:#e4dede;
 +
border-bottom: 1px solid #c4baba;
 +
cursor:pointer;
 +
display:none;
 +
float:left;
 +
margin-top: 0;
 +
padding: 5px 0;
 +
position:fixed;
 +
width:100%;
 +
}
 +
 
 +
.igem_logo_mobile img {
 +
width:70px;
 +
}
 +
 
 +
.igem_logo_mobile {
 +
float:left;
 +
padding-left: 5%;
 +
width: 30%;
 +
}
 +
 
 +
.igem_menu_control_mobile img {
 +
width:25px;
 +
}
 +
 
 +
.igem_menu_control_mobile {
 +
float:right;
 +
padding-right:5%;
 +
padding-top:5px;
 +
text-align:right;
 +
width: 30%;
 +
}
 +
 
 +
 
 +
 
 +
/**************************************************************************************************************************************************************************************************/
 
/* CONTENT OF THE PAGE */
 
/* CONTENT OF THE PAGE */
−
/*******************************************************************************************************************
+
/**************************************************************************************************************************************************************************************************/
  
 
/* general wrapper for the content */
 
/* general wrapper for the content */
Line 248: Line 483:
 
}
 
}
  
−
<!---OWN STYLE--->
 
  
  
 +
 +
/*mobile*/
 +
/**************************************************************************************************************************************************************************************************/
 +
 +
 +
/* 1800px  */
 +
/************************************************/
 +
@media only screen and (max-width: 1800px) {
 +
.igem_2018_team_content { width: 100%;}
 +
.igem_2018_team_menu {display:block;}
 +
}
 +
 +
/* 1400px  */
 +
/************************************************/
 +
@media only screen and (max-width: 1400px) {
 +
.igem_2018_team_menu .menu_item { font-size:100%;}
 +
.igem_2018_team_menu .submenu .submenu_item { font-size:90%;}
 +
.igem_2018_team_menu {display:block;}
 +
}
 +
 +
@media only screen and (max-width: 1001px) {
 +
.igem_2018_team_menu {display:block;}
 +
}
 +
 +
/* 1000px  */
 +
/************************************************/
 +
@media only screen and (max-width: 1000px) {
 +
.igem_2018_team_content {width:100%; margin-left:0px;}
 +
.igem_2018_team_menu {display:none; margin-top: 45px; min-width:50%; width:50%;}
 +
.igem_2018_team_mobile_bar {display:block;}
 +
.igem_2018_team_content .igem_2018_team_column_wrapper .column.full_size, .igem_2018_team_content .igem_2018_team_column_wrapper .column.two_thirds_size,.igem_2018_team_content .igem_2018_team_column_wrapper .column.third_size {width:96%; }
 +
 +
}
 +
 +
 +
@media only screen and (max-width: 500px) {
 +
.igem_2018_team_menu {min-width:100%; width:100%; }
 +
}
 +
 +
 +
/**************************************************************************************************************************************************************************************************/
 +
 +
 +
 +
/* NAVIGATION BAR */
 +
#primary_nav_wrap
 +
{
 +
margin-top:10px;
 +
overflow-x: visible;
 +
/*position: relative;*/
 +
/*overflow: hidden;*/
 +
background-color: hidden;
 +
position: absolute;
 +
height: 45px;
 +
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;
 +
font-family: Helvetica;
 +
}
 +
#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
 +
{
 +
line-height:120%;
 +
padding:10px 15px;
 +
color: rgba(255,255,255,0.5);
 +
}
 +
#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;
 +
 +
}
 +
 +
.navbar-fixed nav {
 +
background-color:red !important;
 +
}
 +
 +
 +
</style>
 +
 +
<style>
 +
<!---OWN STYLE--->
 +
<style>
 
#scrollBtn {
 
#scrollBtn {
 
   display: none;
 
   display: none;
Line 273: Line 645:
 
</style>
 
</style>
  
−
</body>
+
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
−
</html>
+
<!--- THIS IS WHERE THE HTML BEGINS --->
 +
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 +
 
 +
<head>
 +
 
 +
<!-- This tells the browser that your page is responsive -->
 +
<meta name="viewport" content="width=device-width, initial-scale=1">
 +
 
 +
</head>
 +
 
 +
 
 +
 
 +
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 +
<!--- Menu --->
 +
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 +
 
 +
 
 +
 
 +
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 +
<!--- Content of the page  --->
 +
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 +
<div class="navbar-fixed" id="navbar">
 +
<nav class="row blue">
 +
<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://2018.igem.org/Team:Groningen">Home</a></li>
 +
<li><a onclick="">Team</a>
 +
<ul>
 +
<li class="dir"><a href="https://2018.igem.org/Team:Groningen/Team">Team Members</a></li>
 +
<li class="dir"><a href="https://2018.igem.org/Team:Groningen/Collaborations">Collaborations</a></li>
 +
</ul>
 +
</li>
 +
<li><a onclick="">Project</a>
 +
<ul>
 +
<li><a href="https://2018.igem.org/Team:Groningen/InterLab">InterLab</a></li>
 +
<li class="dir">Description</li>
 +
<li class="dir">Design</li>
 +
<li class="dir">Experiments</li>
 +
<li><a href="https://2018.igem.org/Team:Groningen/Notebook">Notebook</a></li>
 +
<li class="dir">Model</li>
 +
<li class="dir">Results</li>
 +
<li><a href="https://2018.igem.org/Team:Groningen/Demonstrate">Demonstrate</a></li>
 +
<li class="dir">Improve</li>
 +
<li class="dir">Attributions</li>
 +
</ul>
 +
</li>
 +
<li><a onclick="">Human Practices</a>
 +
<ul>
 +
<li class="dir">Human Practices</li>
 +
<li class="dir">Education & Engagement</li>
 +
</ul>
 +
</li>
 +
<li><a onclick="">Parts</a>
 +
<ul>
 +
<li><a href="https://2018.igem.org/Team:Groningen/Parts Overview">Part Overview</a></li>
 +
<li><a href="https://2018.igem.org/Team:Groningen/Basic Parts">Basic Parts</a></li>
 +
<li class="dir">Composite Parts</li>
 +
<li class="dir">Part Collection</li>
 +
</ul>
 +
</li>
 +
<li><a onclick="">Awards</a>
 +
<ul>
 +
<li class="dir">Applied Design</li>
 +
<li class="dir">Entrepeneurship</li>
 +
<li class="dir">Hardware</li>
 +
<li class="dir">Measurement</li>
 +
<li class="dir">Model</li>
 +
<li class="dir">Plant</li>
 +
<li class="dir">Software</li>
 +
</ul>
 +
</li>
 +
<li><a onclick="">Acknowledgements</a>
 +
                                <ul>
 +
                                      <li><a href="https://2018.igem.org/Team:Groningen/Sponsors">Sponsors</a></li>
 +
                                      <li><a href="https://2018.igem.org/Team:Groningen/Attributions">Attributions</a></li>
 +
                                      <li><a href="https://2018.igem.org/Team:Groningen/Crowdfunding">Crowdfunding</a></li>
 +
                                </ul>
 +
                        </li>
 +
</ul>
 +
</div>
 +
</nav>
 +
<div>
 +
 
 +
<!------------- toggle mobile menu ----------->
 +
<script>
 +
function mobnavtoggle() {
 +
document.getElementByID("primary_nav_wrap").classList.toggle("mobnav");
 +
}
 +
</script>
 +
 
 +
<style>
 +
.mobicon {display:none;}
 +
</style>
 +
 
 +
<script>
 +
/// To the top button: ///
 +
 
 +
// When the user scrolls down 20px from the top of the document, show the button
 +
window.onscroll = function() {scrollFunction()};
 +
 
 +
function scrollFunction() {
 +
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
 +
        document.getElementById("scrollBtn").style.display = "block";
 +
    } else {
 +
        document.getElementById("scrollBtn").style.display = "none";
 +
    }
 +
}
 +
 
 +
// When the user clicks on the button, scroll to the top of the document
 +
function topFunction() {
 +
    document.body.scrollTop = 0;
 +
    document.documentElement.scrollTop = 0;
 +
}
 +
 
 +
</script>
 +
 
 +
 
 +
<!---
 +
<div box-shadow="0 0 px 8px #10722B inset" visibility="hidden">
 +
<img src="https://static.igem.org/mediawiki/2018/5/5c/T--Groningen--WikiBackgroundImage.png" width="100%" height="auto">
 +
</div>
 +
 
 +
 
 +
<div box-shadow="0 0 px 8px #10722B inset" visibility="hidden">
 +
<img src="https://static.igem.org/mediawiki/2018/1/14/T--Groningen--construction.png" width="100%" height="auto">
 +
</div>
 +
--->

Revision as of 16:50, 1 October 2018