Difference between revisions of "Template:Main2019"

Line 1: Line 1:
 
<html>
 
<html>
 +
<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_2019_team_mobile_bar").click(function(){
 +
$(this).next().toggleClass("displaying_menu");
 +
});
 +
 +
});
 +
 +
 +
function highlight_current_page_menu() {
 +
 +
var page_url="https://2019.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");
 +
 +
}
 +
}
 +
 +
 +
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 +
</script>
 +
 +
 
<style>
 
<style>
 +
/**************************************************************************************************************************************************************************************************/
 +
 +
  
 
/**************************************************************************************************************************************************************************************************/
 
/**************************************************************************************************************************************************************************************************/
Line 9: Line 58:
 
#home_logo, #sideMenu { display:none; }
 
#home_logo, #sideMenu { display:none; }
 
#sideMenu, #top_title, .patrollink  {display:none;}
 
#sideMenu, #top_title, .patrollink  {display:none;}
−
#content {   margin-left:0px; margin-top:-7px; padding:0px; width:100%;}
+
#content { margin-left:0px; margin-top:-7px; padding:0px; width:100%;}
 
body {background-color:white; }
 
body {background-color:white; }
 
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 +
#bodyContent a[href ^="https://"], .link-https { padding-right:0px;}
 +
 +
.judges-will-not-evaluate { border: 4px solid #ececec; padding: 2% !important; width: 92%!important;}
  
−
/*#top_menu_under, #top_menu_14 { display:none;}*/
 
−
 
−
#bodyContent a[href ^="https://"], .link-https { padding-right:0px;}
 
  
 
/**************************************************************************************************************************************************************************************************/
 
/**************************************************************************************************************************************************************************************************/
Line 21: Line 70:
 
/**************************************************************************************************************************************************************************************************/
 
/**************************************************************************************************************************************************************************************************/
  
−
/*igem menu div - this wraps the whole of the menu*/
+
/*this wraps the whole of the menu*/
−
.igem_menu {  
+
.igem_2019_team_menu {  
−
background-color:#dcdcdc;  
+
background-color:#cecece;  
−
border-left: 1px solid #dcdcdc;
+
border-left: 1px solid #cecece;
 +
display:block;
 
float:right;  
 
float:right;  
 
height:100vh;  
 
height:100vh;  
Line 38: Line 88:
  
  
−
/*logo styling*/
+
.igem_2019_team_menu.displaying_menu{
−
.igem_menu_logo {
+
display:block;
−
clear:both;
+
−
float:left;
+
−
padding: 5px 0px;
+
−
width:100%;
+
 
}
 
}
  
−
.igem_menu_logo img {
+
.igem_2019_team_menu  a {
−
width:100%;
+
color: #484848;
 +
text-decoration:none;
 
}
 
}
−
 
  
−
 
+
.igem_2019_team_menu img {
−
.igem_menu_item a {
+
width:100%;
−
color: #000;
+
−
text-decoration:none;
+
 
}
 
}
  
−
#all_menu_items{ display:block;}
 
  
−
/*menu item styling // layer one*/
+
.igem_2019_team_menu .menu_item {
−
/**************************************************************************************************************************************************************************************************/
+
    background-color: #cecece;
−
 
+
    border-bottom: 1px solid #635d5d;
−
/* div for menu items (hubs or not)*/
+
    clear: both;
−
.igem_menu_item{
+
color: #484848;
−
background-color: #dcdcdc;  
+
    cursor: pointer;
−
border-bottom: 1px solid #c1c1c1;  
+
float: left;
−
clear:both;
+
    font-size: 120%;
−
cursor:pointer;
+
    font-weight: bold;
−
font-weight: bold;
+
    padding: 15px 0px 15px 5%;
−
height: 39px;
+
  width: 100%;
−
width:100%;  
+
 
}
 
}
  
−
.igem_menu_item.last_item{
+
.igem_2019_team_menu .menu_item.direct_link {
−
margin-bottom:60px;
+
color: #484848;
 +
padding-left: 15%;
 
}
 
}
−
 
+
.igem_2019_team_menu .menu_item:hover {
−
/*styling for hub icons */
+
background-color: #ecb656;
−
.hub_icon{
+
−
float: left; 
+
−
padding: 6.5px 3% 7px 3%;
+
−
width:10%;
+
−
}
+
−
+
−
/*specification for hub icon images*/
+
−
.hub_icon img {
+
−
width:20px;
+
−
}
+
−
/*specification for hub icon title  images*/
+
−
.main_title_icon {
+
−
width:40px!important;
+
 
}
 
}
  
−
/*styling for the title of the menu item*/
 
−
.hub_title{
 
−
float: left; 
 
−
font-size: 120%;
 
−
padding: 11px 3% 0px 3%;
 
−
width:62%;
 
−
}
 
  
−
 
+
.igem_2019_team_menu .menu_item .submenu_control_icon {
−
 
+
color: #484848;
−
/*submenu and subsubmenus access button styling */
+
float: left;
−
.submenu_access {
+
−
background-color: #dcdcdc;
+
−
float: left;
+
−
font-size: 130%;
+
−
font-weight: bold;
+
−
height:61%;
+
−
max-width:100px;
+
−
padding: 9px 3% 6.25px 3%;
+
−
text-align:center;
+
 
width: 10%;
 
width: 10%;
 
}
 
}
  
−
/* submenu access icon "+"  "-"*/
+
/* submenu icon "+"  "-"*/
−
.submenu_access::before {
+
.igem_2019_team_menu .menu_item .submenu_control_icon::before {
 
content: "+";  
 
content: "+";  
 
}
 
}
  
−
/* submenu access icon "+"  "-"*/
+
/* submenu icon "+"  "-"*/
−
.submenu_access.showing::before {
+
.igem_2019_team_menu .menu_item .submenu_control_icon.open::before {
 
content: "-";  
 
content: "-";  
 
}
 
}
−
 
−
/* change color when the submenu below is displayed*/
 
−
.submenu_access.showing {
 
−
background-color: #e8e8e8;
 
−
}
 
−
 
−
.submenu_access:hover {
 
−
background-color: #e8e8e8;
 
−
}
 
−
 
−
.igem_menu_item:hover,
 
−
.igem_menu_item.current_hub{
 
−
background-color: #66c7c4;
 
−
}
 
−
 
−
/*submenu item styling // layer two*/
 
−
/**************************************************************************************************************************************************************************************************/
 
−
 
  
 
/*submenu wrapper*/
 
/*submenu wrapper*/
−
.igem_submenu{
+
.igem_2019_team_menu .submenu{
−
background-color: #e8e8e8;
+
background-color: #ececec;
 
clear:both;
 
clear:both;
 
display:none;
 
display:none;
Line 154: Line 150:
  
 
/*styling for a submenu item*/
 
/*styling for a submenu item*/
−
.submenu_item {
+
.igem_2019_team_menu .submenu .submenu_item {
−
border-bottom: 1px solid #dcdcdc;
+
border-bottom: 1px solid #cecece;
−
height: 25px;
+
  color: #635d5d;
−
float: left;
+
    height: 30px;
−
font-size: 110%;
+
  float: left;
−
padding: 10px 0px 4px 19%;
+
    font-size: 110%;
−
width:100%;
+
font-weight: bold;
 +
    padding: 12px 0px 0px 15%;
 +
    width: 100%;
 
}
 
}
  
−
/*when the submenu item has a subsubmenu - make room for submenu access class on the same line*/
+
.igem_2019_team_menu .submenu .submenu_item:hover {
−
.submenu_item.with_subsub_menu{  
+
background-color: #f3bd5d;
−
background-color: #e8e8e8;
+
−
    float: left;
+
−
width: 65%;
+
 
}
 
}
  
−
/* submenu access styling if its inside a submenu */
 
−
.igem_submenu > .submenu_access {
 
−
    background-color: #e8e8e8;
 
−
    border-bottom: 1px solid #dcdcdc;
 
−
    padding: 8.5px 3% 11.5px 3%;
 
  
 +
.igem_2019_team_menu .submenu .submenu_item.current_page,
 +
.igem_2019_team_menu .menu_item.current_page,
 +
.igem_2019_team_menu .menu_item.direct_link.current_page {
 +
background-color:#00a19bad;
 
}
 
}
  
−
.igem_submenu > .submenu_access:hover {
 
−
background-color: #fff;
 
−
}
 
  
−
.igem_submenu > .submenu_access.showing {
 
−
background-color: #fff;
 
−
border-bottom: 1px solid #fff;
 
−
}
 
−
 
−
.submenu_item:hover,
 
−
.submenu_item.with_subsub_menu:hover,
 
−
.submenu_item.current_page,
 
−
.submenu_item.with_subsub_menu.current_page {
 
−
background-color: #99d9d7;
 
−
}
 
−
 
−
 
−
/*for subsection titles */
 
−
.submenu_item.subsection_title{
 
−
    color: #000;
 
−
  font-weight: 100;
 
−
  padding-left: 4%;
 
−
}
 
−
 
−
.submenu_item.subsection_title:hover{
 
−
background-color:#e8e8e8;
 
−
cursor:initial;
 
−
}
 
−
 
−
 
−
/*submenu item styling // layer three*/
 
−
/**************************************************************************************************************************************************************************************************/
 
−
 
−
.igem_subsubmenu{
 
−
background-color: #fff;
 
−
clear:both;
 
−
display:none;
 
−
}
 
−
 
−
 
−
.subsubmenu_item {
 
−
background-color:#fff;
 
−
border-bottom: 1px solid #e8e8e8;
 
−
font-size: 100%;
 
−
height: 22px;
 
−
padding: 7px 0px 4px 19%;
 
−
}
 
−
 
−
.subsubmenu_item:hover,
 
−
.igem_submenu > .submenu_access.showing:hover,
 
−
.submenu_access.showing:hover,
 
−
.subsubmenu_item.current_subpage {
 
−
background-color: #cceceb;
 
−
}
 
  
 
/*mobile menu bar styling*/
 
/*mobile menu bar styling*/
Line 237: Line 178:
  
  
−
.igem_mobile_menu_bar {
+
.igem_2019_team_mobile_bar {
−
background-color:#dcdcdc;  
+
background-color:#ececec;  
−
border-bottom: 2px solid #c1c1c1;
+
border-bottom: 1px solid #cecece;
 
cursor:pointer;
 
cursor:pointer;
 
display:none;  
 
display:none;  
Line 245: Line 186:
 
margin-top: 0;
 
margin-top: 0;
 
padding: 5px 0;
 
padding: 5px 0;
−
width:100%;
 
 
position:fixed;
 
position:fixed;
 +
width:100%;
 
}
 
}
  
Line 270: Line 211:
 
width: 30%;  
 
width: 30%;  
 
}
 
}
 +
  
  
Line 277: Line 219:
  
 
/* general wrapper for the content */
 
/* general wrapper for the content */
−
.igem_content_wrapper {
+
.igem_2019_team_content {
−
/*width: 88.9%;*/
+
−
width: -webkit-calc(100% -270px);
+
−
width:    -moz-calc(100% - 270px);
+
−
width:  calc(100% - 270px);
+
−
display:block;
+
 
background-color:white;  
 
background-color:white;  
 +
display:block;
 +
width: 87%;
 
}
 
}
  
 
/* subwrapper to center content */
 
/* subwrapper to center content */
−
.igem_column_wrapper {
+
.igem_2019_team_content .igem_2019_team_column_wrapper {
 
margin:auto;
 
margin:auto;
 
max-width: 1400px;
 
max-width: 1400px;
−
width:80%;
+
width:90%;
 
}
 
}
 +
  
  
Line 297: Line 237:
 
/**************************************************************************************************************************************************************************************************/
 
/**************************************************************************************************************************************************************************************************/
  
 +
.igem_2019_team_content .igem_2019_team_column_wrapper h1 { font-size: 210%;}
 +
.igem_2019_team_content .igem_2019_team_column_wrapper h2 { font-size: 190%;}
 +
.igem_2019_team_content .igem_2019_team_column_wrapper h3 { font-size: 170%;}
 +
.igem_2019_team_content .igem_2019_team_column_wrapper h4 { font-size: 150%;}
 +
.igem_2019_team_content .igem_2019_team_column_wrapper h5 { font-size: 140%;}
 +
.igem_2019_team_content .igem_2019_team_column_wrapper h6 { font-size: 130%;}
  
−
/*STYLING */
 
−
 
−
/*font sizes for all the h titles*/
 
−
.igem_content_wrapper h1 { font-size: 210%;}
 
−
.igem_content_wrapper h2 { font-size: 190%;}
 
−
.igem_content_wrapper h3 { font-size: 150%;}
 
−
.igem_content_wrapper h4 { font-size: 140%;}
 
−
.igem_content_wrapper h5 { font-size: 130%;}
 
−
.igem_content_wrapper h6 { font-size: 120%;}
 
−
 
−
/*font family next art*/
 
−
@font-face {
 
−
font-family: Freeroad_Bold;
 
−
src: url(https://static.igem.org/mediawiki/2019/1/1f/2019_freeroad_bold_font.ttf);
 
−
}
 
−
 
−
/*font family freeroad*/
 
−
@font-face {
 
−
font-family: Freeroad_Regular;
 
−
  src: url(https://static.igem.org/mediawiki/2019/2/26/2019_freeroad_font.ttf);
 
−
}
 
  
 
/* styling for the titles h1, h2*/
 
/* styling for the titles h1, h2*/
−
.igem_content_wrapper h1, .igem_content_wrapper h2 {
+
.igem_2019_team_content .igem_2019_team_column_wrapper h1, .igem_2019_team_content .igem_2019_team_column_wrapper h2 {
 
border-bottom:0px;  
 
border-bottom:0px;  
−
color: #00a19c;
+
color: #635d5d;
−
font-family: Freeroad_Bold;
+
font-family: "Arial Black", Gadget, sans-serif;
−
padding: 5px 0px;
+
padding: 10px 0px;
−
line-height: initial;
+
 
}
 
}
  
 
/* styling for the titles h3, h3, h5, h6 */
 
/* styling for the titles h3, h3, h5, h6 */
−
.igem_content_wrapper h3, .igem_content_wrapper h4, .igem_content_wrapper h5, .igem_content_wrapper h6 {  
+
.igem_2019_team_content .igem_2019_team_column_wrapper h3,  
 +
.igem_2019_team_content .igem_2019_team_column_wrapper h4,  
 +
.igem_2019_team_content .igem_2019_team_column_wrapper h5,  
 +
.igem_2019_team_content .igem_2019_team_column_wrapper h6 {  
 
border-bottom:0px;  
 
border-bottom:0px;  
−
color: #212223;   
+
color: #635d5d;   
−
font-family: Freeroad_Regular;
+
font-family: "Arial Black", Gadget, sans-serif;
 
padding: 5px 0px;
 
padding: 5px 0px;
−
line-height: initial;
 
 
}
 
}
  
 
/* text */
 
/* text */
−
.igem_content_wrapper p {  
+
.igem_2019_team_content .igem_2019_team_column_wrapper p {  
 
font-size: 130%;
 
font-size: 130%;
−
font-family: Arial;
+
font-family: Arial, Helvetica, sans-serif;
 
padding: 5px 0px;
 
padding: 5px 0px;
 
text-align: left;
 
text-align: left;
 +
color: #484848;
 
}
 
}
  
 
/* Links */
 
/* Links */
−
.igem_content_wrapper a {
+
.igem_2019_team_content .igem_2019_team_column_wrapper a {
−
color: #0a5157;
+
color: #00a19b;
 
font-weight: bold;  
 
font-weight: bold;  
 
text-decoration: underline;
 
text-decoration: underline;
−
text-decoration-color:#0a5157;
+
text-decoration-color:#00a19b;
 
transition: all 0.4s ease;
 
transition: all 0.4s ease;
 
-webkit-transition: all 0.4s ease;
 
-webkit-transition: all 0.4s ease;
Line 360: Line 287:
  
 
/* hover for the links */
 
/* hover for the links */
−
.igem_content_wrapper a:hover {  
+
.igem_2019_team_content .igem_2019_team_column_wrapper a:hover {  
−
color: #13c0d7;
+
color: #085156;
 
text-decoration:none;
 
text-decoration:none;
 
}
 
}
  
−
/* non numbered lists */
 
−
.igem_content_wrapper ul {
 
−
font-family:Arial;
 
−
font-size: 130%;
 
−
padding:0px 20px;
 
−
list-style: disc;
 
−
}
 
−
 
−
/*font size specifications for nested lists and other special cases*/
 
−
 
−
 
−
.igem_content_wrapper td > ul li, .igem_content_wrapper ol ol li, .igem_content_wrapper ul ol li, .igem_content_wrapper ol ul li, .igem_content_wrapper ul ul li  {
 
−
font-size: 75%;
 
−
}
 
−
 
−
 
−
/* numbered lists */
 
−
.igem_content_wrapper ol {
 
−
padding:0px;
 
−
font-family:Arial;
 
−
font-size: 130%;
 
−
}
 
  
 
/* Table */
 
/* Table */
−
.igem_content_wrapper table {  
+
.igem_2019_team_content .igem_2019_team_column_wrapper table {  
−
border: 1px solid #c1c1c1;  
+
border: 1px solid #635d5d;  
 
border-collapse: collapse;  
 
border-collapse: collapse;  
−
font-size: 120%;
+
font-size: 130%;
 
width: 100%;  
 
width: 100%;  
 
}
 
}
  
 
/* table cells */
 
/* table cells */
−
.igem_content_wrapper  td {  
+
.igem_2019_team_content .igem_2019_team_column_wrapper td {  
−
border: 1px solid #c1c1c1;  
+
border: 1px solid #cecece;  
 
border-collapse: collapse;  
 
border-collapse: collapse;  
 
font-size: 105%;
 
font-size: 105%;
Line 406: Line 311:
  
 
/* table headers */
 
/* table headers */
−
.igem_content_wrapper th {  
+
.igem_2019_team_content .igem_2019_team_column_wrapper th {  
−
background-color:#fff;  
+
background-color:#cecece;  
−
border: 1px solid #d3d3d3;  
+
border: 1px solid #635d5d;  
 
border-collapse: collapse;  
 
border-collapse: collapse;  
 
font-size: 110%;
 
font-size: 110%;
Line 415: Line 320:
 
}
 
}
  
−
/*hide patrollink */
+
 
−
.patrollink {display:none;}
+
 
 +
/* non numbered lists */
 +
.igem_2019_team_content .igem_2019_team_column_wrapper ul, .igem_2019_team_content .igem_2019_team_column_wrapper ol {
 +
font-size: 130%;
 +
font-family: Arial, Helvetica, sans-serif;
 +
padding:0px 20px;
 +
}
 +
 
 +
 
 +
.igem_2019_team_content .igem_2019_team_column_wrapper ul ul li, .igem_2019_team_content .igem_2019_team_column_wrapper ul ul ul li,
 +
.igem_2019_team_content .igem_2019_team_column_wrapper ul ol li, .igem_2019_team_content .igem_2019_team_column_wrapper ul ul ol li,
 +
.igem_2019_team_content .igem_2019_team_column_wrapper ol ol li, .igem_2019_team_content .igem_2019_team_column_wrapper ul ol ul li,
 +
.igem_2019_team_content .igem_2019_team_column_wrapper ol ul li, .igem_2019_team_content .igem_2019_team_column_wrapper ul ol ol li,
 +
.igem_2019_team_content .igem_2019_team_column_wrapper ol ul ul li, .igem_2019_team_content .igem_2019_team_column_wrapper ol ol ul li,
 +
.igem_2019_team_content .igem_2019_team_column_wrapper ol ol ol li, .igem_2019_team_content .igem_2019_team_column_wrapper ol ul ol li{ font-size: 76%; }
  
  
Line 424: Line 343:
  
 
/*main layout class */
 
/*main layout class */
−
.column  {  
+
.igem_2019_team_content .igem_2019_team_column_wrapper .column  {  
 
float:left;
 
float:left;
 
margin: 1% 2%;
 
margin: 1% 2%;
Line 431: Line 350:
  
 
/* 100% */
 
/* 100% */
−
.full_size { width:96%; }
+
.igem_2019_team_content .igem_2019_team_column_wrapper .column.full_size { width:96%; }
 +
 
 
/* 66% */
 
/* 66% */
−
.two_thirds_size { width: 62.6%; }
+
.igem_2019_team_content .igem_2019_team_column_wrapper .column.two_thirds_size { width: 62.6%; }
 +
 
 
/* 33% */
 
/* 33% */
−
.third_size { width: 29.3%; }
+
.igem_2019_team_content .igem_2019_team_column_wrapper .column.third_size { width: 29.3%; }
−
/* 75% */
+
 
−
.three_quarter_size {  width: 71%; }
+
 
−
/* 50% */
+
 
−
.half_size {  width: 46%; }
+
−
/* 25% */
+
−
.quarter_size { width: 21%; }
+
  
 
/*styling for all images*/
 
/*styling for all images*/
−
.full_size img,  
+
.igem_2019_team_content .igem_2019_team_column_wrapper .column.full_size img,  
−
.half_size img,
+
.igem_2019_team_content .igem_2019_team_column_wrapper .column.two_thirds_size img,
−
.two_thirds_size img,  
+
.igem_2019_team_content .igem_2019_team_column_wrapper .column.third_size img {
−
.third_size img, 
+
−
.three_quarter_size img,
+
−
.quarter_size img {  
+
 
margin-bottom: 15px;
 
margin-bottom: 15px;
 
width: 100%;  
 
width: 100%;  
 
}
 
}
 +
  
 
/* page break */
 
/* page break */
−
.clear {
+
.igem_2019_team_content .igem_2019_team_column_wrapper .clear {
 
clear:both;
 
clear:both;
 
}
 
}
 
/*add extra space to page break with clear class*/
 
/*add extra space to page break with clear class*/
−
.clear.extra_space {
+
.igem_2019_team_content .igem_2019_team_column_wrapper .clear.extra_space {
 
height: 30px;
 
height: 30px;
 
}
 
}
  
−
/* horizontal gray line to divide the page*/
+
/* horizontal line to divide the page*/
−
.line_divider {
+
.igem_2019_team_content .igem_2019_team_column_wrapper .line_divider {
−
    border-top: 1px solid #848484;
+
    border-top: 1px solid #cecece;
 
  margin: auto;
 
  margin: auto;
 
   width: 98%;
 
   width: 98%;
 
}
 
}
  
−
.line_divider.dark {
 
−
border-top: 1px solid #000000;
 
−
}
 
−
 
−
 
−
/* softer horizontal gray line to divide the page*/
 
−
.line_divider.soft {
 
−
      border-top: 1px solid #c1c1c1;
 
−
}
 
−
 
−
/*highlight class can be used style divs in multiple combinations*/
 
−
.highlight {
 
−
padding: 15px 20px;
 
−
}
 
−
 
−
.highlight p, .highlight h3, .highlight h4, .highlight h5, .highlight h6 {
 
−
padding: 0px 15px;
 
−
}
 
−
 
−
.highlight.gray {
 
−
background-color: #f2f2f2;
 
−
}
 
−
 
−
 
−
.highlight.decoration_top {
 
−
    border-top: 4px solid #00a19c;
 
−
}
 
−
 
−
 
−
.highlight.decoration_red_top, .highlight.post_item.decoration_red_top {
 
−
    border-top: 4px solid #F42534;
 
−
}
 
−
 
−
.highlight.decoration_full, .highlight.post_item.decoration_full {
 
−
    border: 4px solid #00a19c;
 
−
}
 
−
 
−
 
−
.highlight.decoration_red_full, .highlight.post_item.decoration_red_full {
 
−
    border: 4px solid #F42534;
 
−
}
 
  
  
Line 516: Line 391:
 
/*support classes*/
 
/*support classes*/
 
/**************************************************************************************************************************************************************************************************/
 
/**************************************************************************************************************************************************************************************************/
−
 
−
 
−
/*special image that takes up the entire page*/
 
−
.full_size_image {  width:100%; margin-top: -59px;}
 
−
 
  
  
 
/*Button  */
 
/*Button  */
 
/************************************************/
 
/************************************************/
−
.button {
+
.igem_2019_team_content .igem_2019_team_column_wrapper .button_link {
−
font-size: 115%;
+
font-size: 130%;
 
margin: 30px auto;
 
margin: 30px auto;
 
text-align: center;
 
text-align: center;
 
}
 
}
  
−
.button a  {
+
.igem_2019_team_content .igem_2019_team_column_wrapper .button_link a  {
−
background-color: #00a19c !important;
+
background-color: #00a19bad !important;
−
color: #ffffff !important;
+
color: #000 !important;
 
font-weight: bold;
 
font-weight: bold;
 
margin: auto;
 
margin: auto;
Line 540: Line 410:
 
}
 
}
  
−
.button a:hover {
+
.igem_2019_team_content .igem_2019_team_column_wrapper .button_link a:hover {
−
background-color: #0a5157 !important;
+
background-color: #ffb819 !important;  
 
}
 
}
  
  
  
−
/*Expand collapse  --- REVIEW THIS ANA*/
+
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight {  
−
/************************************************/
+
padding: 15px 20px;
−
.expand_content.first{
+
−
float:left;
+
−
margin-right: -15px;
+
 
}
 
}
  
−
.expand_content.control_button {
+
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight p,
−
background-color:#10996a;
+
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight h1,
−
border: 2px solid #10996a;
+
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight h2,
−
border-radius: 50%;
+
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight h3,
−
color:#ffffff;
+
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight h4,
−
cursor:pointer;
+
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight h5,
−
float: left;
+
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight h6 {
−
font-weight: bold;
+
padding: 5px 15px;
−
margin: 0px 5px;
+
−
padding-bottom: 1px;
+
−
text-align: center;
+
−
width: 20px;
+
 
}
 
}
  
−
.expand_content.control_button:hover {
+
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight.decoration_background {
−
color: #10996a;
+
background-color: #ececec;  
−
background-color:#ffffff;
+
−
border: 2px solid #10996a;
+
−
float: left;
+
 
}
 
}
  
−
.expand_content.control_button::before {
+
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight.decoration_A_top {
−
content: "+";  
+
    border-top: 4px solid #00a19bad;
 
}
 
}
  
−
/* this is the icon for when the content is expanded */
 
−
.expand_content.control_button.less::before {
 
−
content: "–";
 
−
}
 
  
−
.expand_content.more {  
+
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight.decoration_A_full {
−
display: none;
+
    border: 4px solid #00a19bad;
−
float:left;  
+
 
}
 
}
  
−
 
+
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight.decoration_B_top {
−
/*hiding and showing content */
+
    border-top: 4px solid #ffb819
−
/************************************************/
+
−
 
+
−
/*content for buttons showing/hiding content */
+
−
.content_control::before { content: "+"; }
+
−
.content_control.displaying_content::before { content: "-"; }
+
−
 
+
−
/*used to hide content when it is added to a class */
+
−
.hide_content,
+
−
.collapsible_accordion_content.hide_content {
+
−
display:none;
+
 
}
 
}
  
−
/*image caption*/
 
−
/************************************************/
 
  
−
.igem_content_wrapper p.image_caption {
+
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight.decoration_B_full {
−
    margin-top: -10px;
+
    border: 4px solid #ffb819;
−
    padding-top: 0;
+
−
    font-size: 100%;
+
−
}
+
−
/*Post items*/
+
−
/************************************************/
+
−
 
+
−
.highlight.post_item {
+
−
border: 1px solid #6f7173;
+
−
height: auto;
+
−
margin: auto;
+
−
padding: 30px 20px 15px 30px;
+
 
}
 
}
−
 
−
 
−
/* modify the size of sub divs inside post items*/
 
−
  .column.full_size > .highlight.post_item  > .column.three_quarter_size {
 
−
    margin:0;
 
−
    width:75%;
 
−
    }
 
  
−
  .column.full_size > .highlight.post_item  > .column.quarter_size {
 
−
  margin:0;
 
−
      width:25%;
 
−
  }
 
−
 
  
−
/* post item details encloses and frames the post's title, date and icon*/
 
−
.highlight.post_item > .details {
 
−
clear: both;
 
−
height: 30px;
 
−
padding: 0px 30px 0px 15px;
 
−
width: 97%;
 
−
}
 
  
−
.highlight.post_item  > .details > .title {
 
−
border-bottom: 0px;
 
−
color: #212223;
 
−
font-size: 150%;
 
−
font-family: Freeroad_Regular;
 
−
float:left;
 
−
}
 
−
 
−
.highlight.post_item  > .details > .date {
 
−
font-family: Freeroad_Regular;
 
−
  font-style: italic;
 
−
  color: #6f7173;
 
−
font-size: 150%;
 
−
  float: right;
 
−
}
 
−
 
−
.highlight.post_item  > .details > .icon {
 
−
  float: left;
 
−
  width: 30px;
 
−
  margin-top: -7px;
 
−
  margin-left: -4px;
 
−
}
 
  
−
+
/*mobile*/
−
/* iconography for posts */
+
/**************************************************************************************************************************************************************************************************/
−
+
−
.highlight.post_item  > .details > .icon.alert:after {
+
−
background-image: url('https://static.igem.org/mediawiki/2019/4/44/Small_icon_alert.svg');
+
−
  background-size: 25px 25px;
+
−
content:"";
+
−
display: inline-block;
+
−
height: 25px;
+
−
width: 25px;
+
−
}
+
  
−
.highlight.post_item  > .details > .icon.announcement:after {
 
−
background-image: url('https://static.igem.org/mediawiki/2019/8/86/Small_icon_announcement.svg');
 
−
  background-size: 25px 25px;
 
−
content:"";
 
−
display: inline-block;
 
−
height: 25px;
 
−
width: 25px;
 
−
}
 
  
−
 
+
/* 1800px */
−
.highlight.post_item  > .details > .icon.note:after {
+
−
background-image: url('https://static.igem.org/mediawiki/2019/c/cb/Small_icon_note.svg');
+
−
background-size: 25px 25px;
+
−
content:"";
+
−
display: inline-block;
+
−
height: 25px;
+
−
width: 25px;
+
−
}
+
−
 
+
−
 
+
−
.highlight.post_item > .details > .icon.notice:after {
+
−
background-image: url('https://static.igem.org/mediawiki/2019/a/a8/Small_icon_notice.svg');
+
−
background-size: 25px 25px;
+
−
content:"";
+
−
display: inline-block;
+
−
height: 25px;
+
−
width: 25px;
+
−
}
+
−
 
+
−
 
+
−
.highlight.post_item  > .details > .icon.pinned:after {
+
−
background-image: url('https://static.igem.org/mediawiki/2019/6/63/Small_icon_pinned.svg');
+
−
background-size: 25px 25px;
+
−
content:"";
+
−
display: inline-block;
+
−
height: 25px;
+
−
width: 25px;
+
−
}
+
−
 
+
−
 
+
−
.highlight.post_item  > .details > .icon.reminder:after {
+
−
background-image: url('https://static.igem.org/mediawiki/2019/5/58/Small_icon_reminder.svg');
+
−
background-size: 25px 25px;
+
−
content:"";
+
−
display: inline-block;
+
−
height: 25px;
+
−
width: 25px;
+
−
}
+
−
 
+
−
.highlight.post_item  > .details > .icon.why:after {
+
−
background-image: url('https://static.igem.org/mediawiki/2019/5/51/Small_icon_why.svg');
+
−
  background-size: 25px 25px;
+
−
content:"";
+
−
display: inline-block;
+
−
height: 25px;
+
−
width: 25px;
+
−
}
+
−
 
+
−
 
+
−
/*on this page */
+
−
.on_page::after{
+
−
background-image:url('https://static.igem.org/mediawiki/2019/9/9b/Igem_page.svg');
+
−
background-size: 25px 25px;
+
−
content:"";
+
−
display: inline-block;
+
−
height: 25px;
+
−
width: 25px;
+
−
}
+
−
 
+
−
/*REVIEW THIS ANA*/
+
−
/* center content */
+
−
.center_content p,
+
−
.center_content h1,
+
−
.center_content h2,
+
−
.center_content h3,
+
−
.center_content h4,
+
−
.center_content h5,
+
−
.center_content h6 {
+
−
text-align:center;
+
−
}
+
−
+
−
 
+
−
/*Multiple links in a ul */
+
 
/************************************************/
 
/************************************************/
−
.multiple_links a{
+
@media only screen and (max-width: 1800px) {
−
color: black !important;
+
.igem_2019_team_content { width: 85%;}
−
}
+
.igem_2019_team_menu {display:block;}
 +
}
  
−
.multiple_links a:hover {
+
/* 1400px  */
−
color: #13c0d7 !important;
+
−
}
+
−
 
+
−
/*Make text red and bold*/
+
 
/************************************************/
 
/************************************************/
−
.red_text {
+
@media only screen and (max-width: 1400px) {
−
color: #f42434;  
+
.igem_2019_team_menu .menu_item { font-size:100%;}
−
font-weight:bold;
+
.igem_2019_team_menu .submenu .submenu_item { font-size:90%;}
 +
.igem_2019_team_menu {display:block;}
 
}
 
}
  
−
/*Image slider/
+
@media only screen and (max-width: 1001px) {
−
/************************************************/
+
.igem_2019_team_menu {display:block;}
−
.image_slider img {  width:100%; }
+
−
 
+
−
ul.image_slider {
+
−
    list-style: none;
+
−
    margin: 0px;
+
−
    padding: 0px 0px 15px 0px;
+
 
}
 
}
  
−
/* image list hidden by default*/
+
/* 1000px  */
−
ul.image_slider li{
+
−
display:none;
+
−
}
+
−
 
+
−
/*if the image is the current one, display it*/
+
−
ul.image_slider li.current_image {
+
−
display:block;
+
−
}
+
−
 
+
−
/*list of numbers for marking which number of image is displayed*/
+
−
ul.image_number{
+
−
    list-style: none;
+
−
margin: auto;
+
−
    padding: 0px;
+
−
    text-align: center;
+
−
}
+
−
 
+
−
/*decoration for the numbers*/
+
−
ul.image_number li{
+
−
border: 1px solid #c1c1c1;
+
−
    border-radius: 15%;
+
−
color: #c1c1c1;
+
−
cursor:pointer;
+
−
    display: block;
+
−
float: left;
+
−
height: 25px;
+
−
    margin-right: 15px;
+
−
padding-top:5px;
+
−
    width: 30px;
+
−
}
+
−
 
+
−
/*styling change when hovering or active*/
+
−
ul.image_number li.current_image_number, ul.image_number li:hover{
+
−
background-color:#00a19c;
+
−
border: 1px solid #00a19c;
+
−
color:#ffffff;
+
−
}
+
−
 
+
−
/*buttons for moving forward and backward between the images*/
+
−
.image_controller{
+
−
border-radius: 15%;
+
−
cursor:pointer;
+
−
color: #c1c1c1;
+
−
float:left;
+
−
height: 25px;
+
−
text-align:center;
+
−
margin-right: 15px;
+
−
padding-top:7px;
+
−
width:30px;
+
−
}
+
−
 
+
−
/*status change when hovering on the button*/
+
−
.image_controller:hover{
+
−
background-color:#00a19c;
+
−
color:#ffffff;
+
−
}
+
−
 
+
−
 
+
−
/*text content for next button*/
+
−
.image_controller.next::before{
+
−
content:"▶";
+
−
}
+
−
 
+
−
 
+
−
/*text content for previous button*/
+
−
.image_controller.prev::before{
+
−
content:"◀ ";
+
−
}
+
−
 
+
−
 
+
−
/* REVIEW THIS ANA*/
+
−
/*Navigation support/
+
 
/************************************************/
 
/************************************************/
 +
@media only screen and (max-width: 1000px) {
 +
.igem_2019_team_content {width:100%; margin-left:0px;}
 +
.igem_2019_team_menu {display:none; margin-top: 45px; min-width:50%; width:50%;}
 +
.igem_2019_team_mobile_bar {display:block;}
 +
.igem_2019_team_content .igem_2019_team_column_wrapper .column.full_size, .igem_2019_team_content .igem_2019_team_column_wrapper .column.two_thirds_size,.igem_2019_team_content .igem_2019_team_column_wrapper .column.third_size {width:96%; }
  
−
 
−
.navigation_support_title {
 
−
    width: 200px;
 
−
    float: left;
 
−
    height: 25px;
 
−
    background-color: #f2f2f2;
 
−
    color: #797979;
 
−
    padding: 8px 3.5px 2px 3.5px;
 
−
    text-align: center;
 
−
    margin: 0px 10px 0px 0px;
 
−
    border-radius: 7px;
 
−
    cursor: pointer;
 
−
    font-weight: bold;
 
−
    font-size: 120%;
 
−
}
 
−
 
−
 
−
.navigation_button { 
 
−
border: 2px solid #c1c1c1;
 
−
    border-radius: 15%;
 
−
    color: #797979;
 
−
    font-weight: bold;
 
−
    cursor: pointer;
 
−
    display: block;
 
−
    float: left;
 
−
    height: 25px;
 
−
    margin-right: 15px;
 
−
    padding: 6px 1.5px 0px 1.5px;
 
−
    width: 30px;
 
−
    text-align: center;
 
−
    font-size: 120%;
 
 
}
 
}
  
  
−
.navigation_button.arrow_navigation {
+
@media only screen and (max-width: 500px) {
−
border: 2px solid white;
+
.igem_2019_team_menu {min-width:100%; width:100%; }
−
margin-top: 0px;
+
 
}
 
}
  
−
.navigation_button.arrow_navigation:hover {
 
−
color: #00a19c;
 
−
background-color: #ffffff;
 
−
border: 2px solid white;
 
−
}
 
  
−
 
−
 
−
.navigation_button:hover, .title_extra:hover+.navigation_button, .navigation_button.active_navigation_button:hover  {
 
−
background-color: #00a19c;
 
−
color: #ffffff;
 
−
border: 2px solid #00a19c;
 
−
}
 
−
 
−
.navigation_button:hover+.title_extra, .title_extra:hover { 
 
−
color: #00a19c;
 
−
display:block;
 
−
}
 
−
 
−
.navigation_button.active_navigation_button {
 
−
background-color: #f2f2f2;
 
−
color: #00a19c;
 
−
border: 2px solid #00a19c;
 
−
}
 
−
 
−
 
−
.track_navigation{
 
−
width:8.33%;
 
−
float:left;
 
−
}
 
−
 
−
.track_navigation> img {
 
−
  opacity: 1.0;
 
−
}
 
−
 
−
 
−
.track_navigation> img:hover{
 
−
  opacity: 0.5;
 
−
}
 
−
 
−
/*REVIEW THIS ANA*/
 
−
.title_extra {
 
−
color: #00a19c;
 
−
float:left;
 
−
padding: 7px 0px;
 
−
margin-right: 20px;
 
−
display:none;
 
−
}
 
−
 
−
.title_extra.main_item {
 
−
display:block;
 
−
text-decoration: underline;
 
−
}
 
−
 
−
.title_extra.support_item {
 
−
display:block;
 
−
margin-right:0px;
 
−
margin-left: -17px;
 
−
}
 
−
 
−
.title_extra.support_item:hover {
 
−
color: #00a19c;
 
−
}
 
−
 
−
 
−
.igem_menu_wrapper::-webkit-scrollbar {
 
−
    display: none;
 
−
}
 
−
 
−
 
−
/*accordion */
 
−
/************************************************/
 
−
 
−
/*wrapper for each month*/
 
−
.collapsible_accordion {
 
−
border-bottom: 1px solid #c1c1c1;
 
−
float: left;
 
−
padding: 30px 0px 20px 0px;
 
−
width:100%;
 
−
}
 
−
 
−
/*content to show/hide*/
 
−
.collapsible_accordion_content {
 
−
display:block;
 
−
margin-top:30px;
 
−
}
 
−
 
−
 
−
/* button controling the show/hide of the month's events*/
 
−
.collapsible_accordion_access{
 
−
background-color: #00a19c;
 
−
border: 2px solid #00a19c;
 
−
border-radius: 14%;
 
−
color: #ffffff !important;
 
−
float: right;
 
−
margin-top: -4px;
 
−
text-align: center;
 
−
padding: 5px 4px 0px 4px;
 
−
width: 20px;
 
−
}
 
−
 
−
/*when hovering on the show/hide month content button*/
 
−
.collapsible_accordion_access:hover {
 
−
background-color:#00a19c;
 
−
border: 2px solid #00a19c;
 
−
cursor:pointer;
 
−
}
 
−
 
−
 
−
/*calendar*/
 
−
/************************************************/
 
−
 
−
/*deadline's date*/
 
−
.deadline_date {
 
−
    border: 2px solid #c1c1c1;
 
−
border-radius: 5%;
 
−
color: #000;
 
−
float: left;
 
−
    font-size: 155%;
 
−
font-weight:bold;
 
−
margin-right: 5%;
 
−
max-width: 100px;
 
−
    padding: 30px 0px;
 
−
    text-align: center;
 
−
width: 15%;
 
−
}
 
−
 
−
/* description of the deadline*/
 
−
.deadline_content {
 
−
float: left;
 
−
width:75%;
 
−
}
 
−
 
−
/*controlled image size*/
 
−
 
−
.controlled_size_image{
 
−
max-width: 300px;
 
−
}
 
−
 
−
/*mobile*/
 
 
/**************************************************************************************************************************************************************************************************/
 
/**************************************************************************************************************************************************************************************************/
  
  
−
/* 1784px  */
 
−
/************************************************/
 
−
@media only screen and (max-width: 1784px) {
 
−
.igem_content_wrapper { width:85%;}
 
−
}
 
  
−
/* 1602px  */
 
−
/************************************************/
 
−
@media only screen and (max-width: 1602px) {
 
−
.hub_title{ font-size: 105%;}
 
−
}
 
  
−
 
−
/* 1450px  */
 
−
/************************************************/
 
−
@media only screen and (max-width: 1450px) {
 
−
.hub_title{ font-size: 90%;}
 
−
.submenu_item {font-size:85%;}
 
−
.subsubmenu_item {font-size:80%;}
 
−
}
 
−
 
−
/* 1200px  */
 
−
/************************************************/
 
−
 
−
@media only screen and (max-width: 1200px) {
 
−
#content {width:100%; }
 
−
.igem_menu_wrapper {width:15%; right:0%;}
 
−
.load_menu_here, .menu_icon {display:none;}
 
−
ul.image_slider {  padding:0px; width: 100%;  margin: auto;}
 
−
.hub_icon{ display:none;}
 
−
.hub_title{ width: 77%; padding-left: 7%; padding-right:0; font-size:80%;}
 
−
.submenu_item{ padding-left: 16%; padding-right:0; font-size:75% }
 
−
.submenu_item.with_subsub_menu{ width:68%;} 
 
−
.subsubmenu_item {font-size:70%;}
 
−
}
 
−
 
−
/* 1100px  */
 
−
/************************************************/
 
−
@media only screen and (max-width: 1100px) {
 
−
.igem_content_wrapper {width:100%; margin-left:0px;}
 
−
.half_size, .two_thirds_size, .third_size, .three_quarter_size, .quarter_size {width:100%; }
 
−
.column.full_size > .highlight.news_item > .column.quarter_size, .column.full_size > .highlight.news_item > .column.three_quarter_size {width:100%;}
 
−
.column.full_size > .highlight.post_item > .column.quarter_size, .column.full_size > .highlight.post_item > .column.three_quarter_size {width:100%;}
 
−
.column img { width: 96%; padding: 2% 0px;}
 
−
.highlight {padding:15px 5px;}
 
−
.igem_menu { width: 100%; float: left; position: relative; max-width: 100%;}
 
−
.igem_mobile_menu_bar {display:block;}
 
−
.hub_icon{ display:block;}
 
−
.hub_title{ width: 68%; padding-left:0%}
 
−
.igem_menu, .igem_menu_logo {display:none;}
 
−
 
−
.highlight.post_item {padding:0px;}
 
−
.highlight.post_item > .details { clear: both; max-height: 80px; padding:15px; width: 89%;}
 
−
.highlight.post_item  > .details > .icon { clear: both; }
 
−
.highlight.post_item  > .details > .title {clear: both; }
 
−
.highlight.post_item  > .details > .date {clear: both; float:left;}
 
−
 
−
.igem_menu{  width: 30%; float: right; position: fixed; margin-top: 47px;  max-width: 100%;}
 
−
 
−
}
 
−
 
−
@media only screen and (max-width: 800px) {
 
−
.igem_menu{  width: 50%;}
 
−
}
 
−
 
−
@media only screen and (max-width: 600px) {
 
−
.igem_menu{  width: 60%;}
 
−
}
 
  
 
</style>
 
</style>
  
  
−
<script>
+
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 +
<!--- THIS IS WHERE THE HTML BEGINS --->
 +
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
  
−
// This is the jquery part of your template.  Try not modify any of this code since it makes your menu work.
+
<head>
  
−
$(document).ready(function() {
+
<!-- This tells the browser that your page is responsive -->
 +
<meta name="viewport" content="width=device-width, initial-scale=1">
  
−
$("#HQ_page").attr('id','');
+
</head>
−
+
−
//if HQ_info exists, display the content only for HQ
+
−
if ($("#HQ_info").length){
+
−
hide_HQ_info();
+
−
}
+
−
+
−
//if image_slider exists, activate the automatic rotation slider and functionality
+
−
if ($("#image_carrousel").length){
+
−
image_slider_rotation();
+
−
}
+
  
−
$( "#load_menu_here" ).load( "https://2019.igem.org/HQ:Menu #load_menu_content" , function() {
 
−
menu_functionality();
 
−
highlight_current_page_menu();
 
−
});
 
  
  
−
$(".collapsible_accordion_access").click(function(){
+
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
−
$(this).toggleClass("displaying_content");
+
<!--- Menu --->
−
$(this).parent().next().toggleClass("hide_content");
+
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
−
});
+
  
−
if( $(".igem_mobile_menu_bar").is(":visible") ){
 
−
$(".igem_content_wrapper").click(function() {
 
−
$(".igem_menu").hide();
 
−
});
 
−
}
 
  
−
 
−
});
 
−
 
−
 
−
// if HQ_info exists, hide unless the user is an admin
 
−
function hide_HQ_info() {
 
  
−
switch ( wgUserName) {
 
−
case "Sifuentes anita": case "Vinoo": case "THaddock": case "Meagan": case "MariaB":  case "Abigail": case "Kitwa": case "Pdmillett": case "Suzie iGEM": case "Randy": case "AnneMeyer":
 
−
$("#HQ_info").show();
 
−
break;
 
  
−
default:
+
<div class="igem_2019_team_mobile_bar">
−
$("#HQ_info").hide();
+
−
break;
+
−
}
+
−
   
+
−
}
+
 
 
 +
<div class="igem_logo_mobile">
 +
<img src="https://static.igem.org/mediawiki/2019/3/3c/Igem_mobile_menu_logo.svg">
 +
</div>
  
−
function menu_functionality() {
 
−
 
−
//accessing submenus and subsubmenus
 
−
$(".submenu_access").click(function(){
 
−
$(this).toggleClass("showing");
 
−
$(this).next().fadeToggle(400);
 
−
});
 
  
−
//mobile menu access
+
<div class="igem_menu_control_mobile">
−
$(".igem_mobile_menu_bar").click(function(){
+
<img id="menu_control_image" src="https://static.igem.org/mediawiki/igem.org/3/3b/Menu_icon.svg">
−
$(this).next().fadeToggle(400);
+
</div>
−
});
+
−
+
−
}
+
  
 +
</div>
  
  
−
function highlight_current_page_menu() {
 
−
 
−
var page_url="https://2019.igem.org/";
 
  
−
switch ( (wgPageName.match( /\//g ) || []).length  ) {
 
  
−
//this is a hub
+
<div class="igem_2019_team_menu">
−
case 0:
+
−
page_url = page_url + wgPageName;
+
−
$("a[href$='"+ page_url +"']").parent().addClass("current_hub");
+
−
$(".current_hub .igem_submenu").fadeToggle(400);
+
−
$(".current_hub .igem_submenu").prev().toggleClass("showing");
+
−
break;
+
−
+
−
case 1:
+
−
//open the hub
+
−
page_url = page_url +wgPageName.substring(0, wgPageName.indexOf('/'));
+
−
$("a[href$='"+ page_url +"']").parent().addClass("current_hub");
+
−
$(".current_hub .igem_submenu").fadeToggle(400);
+
−
$(".current_hub .igem_submenu").prev().toggleClass("showing");
+
  
−
// select sub menu page
 
−
page_url ="https://2019.igem.org/"+wgPageName;
 
−
$("a[href$='"+page_url+"'] > .submenu_item").addClass("current_page");
 
  
−
// if sub menu has a sub sub menu - open it
+
<a href="https://2019.igem.org/Team:Example2">
−
$(".with_subsub_menu.current_page").parent().next().toggleClass("showing");
+
<img src="http://placehold.it/350x150/ececec/cecece">
−
$(".with_subsub_menu.current_page").parent().next().next().fadeToggle(400);
+
</a>
  
−
break;
 
  
  
 +
<a href="https://2019.igem.org/Team:Example2">
 +
<div class="menu_item direct_link">
 +
HOME
 +
</div>
 +
</a>
  
−
case 2:
+
<!-- Team -->
 +
<div class="menu_item">
 +
<div class="submenu_control_icon"> </div>
 +
TEAM
 +
</div>
 +
<div class="submenu">
 +
 +
<a href="https://2019.igem.org/Team:Example2/Team">
 +
<div class="submenu_item">
 +
Team Members
 +
</div>
 +
</a>
  
−
//open the hub
+
<a href="https://2019.igem.org/Team:Example2/Collaborations">
−
page_url = page_url +wgPageName.substring(0, wgPageName.indexOf('/'));
+
<div class="submenu_item">
−
$("a[href$='"+ page_url +"']").parent().addClass("current_hub");
+
Collaborations
−
$(".current_hub .igem_submenu").fadeToggle(400);
+
</div>
−
$(".current_hub .igem_submenu").prev().toggleClass("showing");
+
</a>
 +
</div>
  
  
−
page_url ="https://2019.igem.org/";
+
<!-- Project -->
−
page_url = page_url +wgPageName.substring(0, wgPageName.lastIndexOf('/'));
+
<div class="menu_item">
−
$("a[href$='"+page_url+"'] > .submenu_item").addClass("current_page");
+
<div class="submenu_control_icon"> </div>
 +
PROJECT
 +
</div>
 +
<div class="submenu">
 +
 +
<a href="https://2019.igem.org/Team:Example2/Description">
 +
<div class="submenu_item">
 +
Description
 +
</div>
 +
</a>
  
−
$(".current_page").parent().next().toggleClass("showing");
+
<a href="https://2019.igem.org/Team:Example2/Design">
−
$(".current_page").parent().next().next().fadeToggle(400);
+
<div class="submenu_item">
 +
Design
 +
</div>
 +
</a>
  
−
page_url ="https://2019.igem.org/";
+
<a href="https://2019.igem.org/Team:Example2/Experiments">
−
page_url = page_url+wgPageName;
+
<div class="submenu_item">
−
$("a[href$='"+page_url+"'] > .subsubmenu_item").addClass("current_subpage");
+
Experiments
 +
</div>
 +
</a>
  
−
// if sub menu has a sub sub menu - open it
 
−
break;
 
  
 +
<a href="https://2019.igem.org/Team:Example2/Notebook">
 +
<div class="submenu_item">
 +
Notebook
 +
</div>
 +
</a>
 +
 +
<a href="https://2019.igem.org/Team:Example2/Contribution">
 +
<div class="submenu_item">
 +
Contribution
 +
</div>
 +
</a>
  
−
}
 
  
−
}
 
  
  
 +
<a href="https://2019.igem.org/Team:Example2/Model">
 +
<div class="submenu_item">
 +
Model
 +
</div>
 +
</a>
  
−
function image_slider_rotation() {
+
<a href="https://2019.igem.org/Team:Example2/Results">
 +
<div class="submenu_item">
 +
Results
 +
</div>
 +
</a>
  
−
var slider_counter;
 
−
var clicked_image_number = 0;
 
−
var controller_number = 0;
 
−
 
−
 
−
//constant rotation
 
−
setInterval(function(){
 
  
−
slider_counter = $("ul.image_slider li.current_image").index()+1;
+
<a href="https://2019.igem.org/Team:Example2/Demonstrate">
 +
<div class="submenu_item">
 +
Demonstrate
 +
</div>
 +
</a>
  
−
$("ul.image_slider li.current_image").removeClass("current_image");
+
<a href="https://2019.igem.org/Team:Example2/Improve">
−
$("ul.image_number li.current_image_number").removeClass("current_image_number");
+
<div class="submenu_item">
 +
Improve
 +
</div>
 +
</a>
  
−
if( slider_counter  >= $('ul.image_slider li').length ){
+
<a href="https://2019.igem.org/Team:Example2/Attributions">
−
slider_counter = 1;
+
<div class="submenu_item">
−
} 
+
Attributions
−
else{
+
</div>
−
slider_counter+=1;
+
</a>
−
}
+
  
−
$("ul.image_slider li:nth-child("+slider_counter+")").addClass("current_image");
+
</div>
−
$("ul.image_number li:nth-child("+slider_counter+")").addClass("current_image_number");
+
  
−
}, 5000);
 
  
−
 
+
<div class="menu_item">
−
 
+
<div class="submenu_control_icon"> </div>
−
//if a number is clicked
+
PARTS
−
$("ul.image_number li").click(function(){
+
</div>
−
clicked_image_number = $(this).index() + 1;
+
<div class="submenu">
 
 
−
$("ul.image_slider li.current_image").removeClass("current_image");
+
<a href="https://2019.igem.org/Team:Example2/Parts">
−
$("ul.image_number li.current_image_number").removeClass("current_image_number");
+
<div class="submenu_item">
 +
Parts Overview
 +
</div>
 +
</a>
  
−
$("ul.image_slider li:nth-child("+clicked_image_number+")").addClass("current_image");
+
<a href="https://2019.igem.org/Team:Example2/Basic_Part">
−
$("ul.image_number li:nth-child("+clicked_image_number+")").addClass("current_image_number");
+
<div class="submenu_item">
−
});
+
Basic Parts
 +
</div>
 +
</a>
  
 +
<a href="https://2019.igem.org/Team:Example2/Composite_Part">
 +
<div class="submenu_item">
 +
Composite Parts
 +
</div>
 +
</a>
  
 +
<a href="https://2019.igem.org/Team:Example2/Part_Collection">
 +
<div class="submenu_item">
 +
Part Collection
 +
</div>
 +
</a>
 +
</div>
  
−
//if a controller next/prev is clicked
+
−
$(".image_controller").click(function(){
+
−
controller_number = $("ul.image_slider li.current_image").index() + 1;
+
 +
  
−
$("ul.image_slider li.current_image").removeClass("current_image");
+
<a href="https://2019.igem.org/Team:Example2/Safety">
−
$("ul.image_number li.current_image_number").removeClass("current_image_number");
+
<div class="menu_item direct_link">
 +
SAFETY
 +
</div>
 +
</a>
  
  
−
if( $(this).hasClass( "next" )) {
 
−
if( controller_number >= $('ul.image_slider li').length ){
 
−
controller_number = 1;
 
−
} 
 
−
else{
 
−
controller_number+=1;
 
−
}
 
−
}
 
−
else if( $(this).hasClass( "prev" )) {
 
−
if( controller_number <=1  ){
 
−
controller_number = $('ul.image_slider li').length;
 
−
} 
 
−
else{
 
−
controller_number-=1;
 
−
}
 
−
}
 
  
−
$("ul.image_slider li:nth-child("+controller_number+")").addClass("current_image");
 
−
$("ul.image_number li:nth-child("+controller_number+")").addClass("current_image_number");
 
  
−
});
 
−
}
 
  
  
 +
<div class="menu_item">
 +
<div class="submenu_control_icon"> </div>
 +
HUMAN PRACTICES
 +
</div>
  
−
</script>
+
<div class="submenu">
  
 +
<a href="https://2019.igem.org/Team:Example2/Human_Practices">
 +
<div class="submenu_item">
 +
Human Practices
 +
</div>
 +
</a>
  
  
 +
<a href="https://2019.igem.org/Team:Example2/Public_Engagement">
 +
<div class="submenu_item">
 +
Education & Engagement
 +
</div>
 +
</a>
  
 +
</div>
  
  
−
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 
−
<!--HTML -->
 
−
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 
  
−
<head>
 
−
<meta name="viewport" content="width=device-width, initial-scale=1">
 
−
</head>
 
  
  
 +
<div class="menu_item">
 +
<div class="submenu_control_icon"> </div>
 +
AWARDS
 +
</div>
  
 +
<div class="submenu">
  
−
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
+
<a href="https://2019.igem.org/Team:Example2/Product_Design">
−
<!--MENU -->
+
<div class="submenu_item">
−
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
+
Product Design
 +
</div>
 +
</a>
  
 +
<a href="https://2019.igem.org/Team:Example2/Entrepreneurship">
 +
<div class="submenu_item">
 +
Entrepreneurship
 +
</div>
 +
</a>
  
 +
<a href="https://2019.igem.org/Team:Example2/Hardware">
 +
<div class="submenu_item">
 +
Hardware
 +
</div>
 +
</a>
  
−
<div class="igem_mobile_menu_bar">
+
<a href="https://2019.igem.org/Team:Example2/Measurement">
−
+
<div class="submenu_item">
−
<div class="igem_logo_mobile">
+
Measurement
−
<img src="https://static.igem.org/mediawiki/2019/3/3c/Igem_mobile_menu_logo.svg">
+
</div>
−
</div>
+
</a>
  
 +
<a href="https://2019.igem.org/Team:Example2/Model">
 +
<div class="submenu_item">
 +
Model
 +
</div>
 +
</a>
  
−
<div class="igem_menu_control_mobile">
+
<a href="https://2019.igem.org/Team:Example2/Plant">
−
<img id="menu_control_image" src="https://static.igem.org/mediawiki/2019/2/25/Main_menu_icon.svg">
+
<div class="submenu_item">
−
</div>
+
Plant
 +
</div>
 +
</a>
  
−
</div>
 
  
 +
<a href="https://2019.igem.org/Team:Example2/Software">
 +
<div class="submenu_item">
 +
Software
 +
</div>
 +
</a>
  
−
<div class="igem_menu">
+
</div>  
  
−
 
−
<div class="igem_menu_logo">
 
−
<a href="https://2019.igem.org">
 
−
<img src="https://static.igem.org/mediawiki/2019/9/9d/2019_igem_menu_logo.svg">
 
−
</a>
 
−
</div>
 
  
  
−
<div id="load_menu_here"> Loading... </div>
+
<a href="https://igem.org/2019_Judging_Form?team=Example2">
 +
<div class="menu_item direct_link">
 +
JUDGING FORM ⇗
 +
</div>
 +
</a>
  
−
</div>
 
  
  
Line 1,380: Line 788:
  
  
−
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
+
</div>
−
<!-- CONTENT -->
+
−
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
+
  
 +
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 +
<!--- Content of the page  --->
 +
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
  
−
<div class="igem_content_wrapper">
 
−
<div class=" igem_column_wrapper">
 
  
 +
<div class="igem_2019_team_content">
 +
<div class="igem_2019_team_column_wrapper">
 +
<div class="clear extra_space"></div>
 
<div class="clear extra_space"></div>
 
<div class="clear extra_space"></div>

Revision as of 23:02, 31 January 2019

HOME
TEAM
Team Members
Collaborations
PROJECT
Description
Design
Experiments
Notebook
Contribution
Model
Results
Demonstrate
Improve
Attributions
PARTS
Parts Overview
Basic Parts
Composite Parts
Part Collection
SAFETY
HUMAN PRACTICES
Human Practices
Education & Engagement
AWARDS
Product Design
Entrepreneurship
Hardware
Measurement
Model
Plant
Software
JUDGING FORM ⇗