Difference between revisions of "Template:Main2019"

 
(30 intermediate revisions by 2 users not shown)
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 55: Line 6:
 
/**************************************************************************************************************************************************************************************************/
 
/**************************************************************************************************************************************************************************************************/
  
−
 
+
#home_logo, #sideMenu, #sideMenu, #top_title, .patrollink {display:none;}
−
#home_logo, #sideMenu { display:none; }
+
#content {margin-left:0px; margin-top:-7px; padding:0px; width:100%;}
−
#sideMenu, #top_title, .patrollink {display:none;}
+
body {background-color:white;}
−
#content { margin-left:0px; margin-top:-7px; padding:0px; width:100%;}
+
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 {margin-bottom: 0px;}
−
body {background-color:white; }
+
#bodyContent a[href ^="https://"], .link-https {padding-right: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;}
+
−
 
+
  
 
/**************************************************************************************************************************************************************************************************/
 
/**************************************************************************************************************************************************************************************************/
Line 70: Line 16:
 
/**************************************************************************************************************************************************************************************************/
 
/**************************************************************************************************************************************************************************************************/
  
−
/*this wraps the whole of the menu*/
+
/*igem menu div - this wraps the whole of the menu*/
−
.igem_2019_team_menu {  
+
.igem_menu {  
−
background-color:#cecece;  
+
background-color:#dcdcdc;  
−
border-left: 1px solid #cecece;
+
border-left: 1px solid #dcdcdc;
−
display:block;
+
 
float:right;  
 
float:right;  
 
height:100vh;  
 
height:100vh;  
Line 88: Line 33:
  
  
−
.igem_2019_team_menu.displaying_menu{
+
/*logo styling*/
−
display:block;
+
.igem_menu_logo {
 +
clear:both;
 +
float:left;
 +
padding: 5px 0px;
 +
width:100%;
 
}
 
}
  
−
.igem_2019_team_menu  a {
+
.igem_menu_logo img {
−
color: #484848;
+
width:100%;
−
text-decoration:none;
+
 
}
 
}
 +
  
−
.igem_2019_team_menu img {
+
 
−
width:100%;
+
.igem_menu_item a {
 +
color: #000;
 +
text-decoration:none;
 
}
 
}
  
 +
#all_menu_items{ display:block;}
 +
 +
  
−
.igem_2019_team_menu .menu_item {
+
/*menu item styling // layer one*/
−
    background-color: #cecece;
+
/**************************************************************************************************************************************************************************************************/
−
    border-bottom: 1px solid #635d5d;
+
 
−
    clear: both;
+
/* div for menu items (hubs or not)*/
−
color: #484848;
+
.igem_menu_item{
−
    cursor: pointer;
+
background-color: #dcdcdc;  
−
float: left;
+
border-bottom: 1px solid #c1c1c1;  
−
    font-size: 120%;
+
clear:both;
−
    font-weight: bold;
+
cursor:pointer;
−
    padding: 15px 0px 15px 5%;
+
font-weight: bold;
−
  width: 100%;
+
height: 39px;
 +
width:100%;  
 
}
 
}
  
−
.igem_2019_team_menu .menu_item.direct_link {
+
.igem_menu_item.last_item{
−
color: #484848;
+
margin-bottom:60px;
−
padding-left: 15%;
+
 
}
 
}
−
.igem_2019_team_menu .menu_item:hover {
+
 
−
background-color: #ecb656;
+
/*styling for hub icons */
 +
.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;
+
 
−
float: left;
+
/*submenu and subsubmenus access button styling */
 +
.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 icon "+"  "-"*/
+
/* submenu access icon "+"  "-"*/
−
.igem_2019_team_menu .menu_item .submenu_control_icon::before {
+
.submenu_access::before {
 
content: "+";  
 
content: "+";  
 
}
 
}
  
−
/* submenu icon "+"  "-"*/
+
/* submenu access icon "+"  "-"*/
−
.igem_2019_team_menu .menu_item .submenu_control_icon.open::before {
+
.submenu_access.showing::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_2019_team_menu .submenu{
+
.igem_submenu{
−
background-color: #ececec;
+
background-color: #e8e8e8;
 
clear:both;
 
clear:both;
 
display:none;
 
display:none;
Line 150: Line 154:
  
 
/*styling for a submenu item*/
 
/*styling for a submenu item*/
−
.igem_2019_team_menu .submenu .submenu_item {
+
.submenu_item {
−
border-bottom: 1px solid #cecece;
+
border-bottom: 1px solid #dcdcdc;
−
  color: #635d5d;
+
height: 25px;
−
    height: 30px;
+
float: left;
−
  float: left;
+
font-size: 110%;
−
    font-size: 110%;
+
padding: 10px 0px 4px 19%;
−
font-weight: bold;
+
width:100%;
−
    padding: 12px 0px 0px 15%;
+
−
    width: 100%;
+
 
}
 
}
  
−
.igem_2019_team_menu .submenu .submenu_item:hover {
+
/*when the submenu item has a subsubmenu - make room for submenu access class on the same line*/
−
background-color: #f3bd5d;
+
.submenu_item.with_subsub_menu{  
 +
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_submenu > .submenu_access:hover {
−
.igem_2019_team_menu .menu_item.current_page,
+
background-color: #fff;
−
.igem_2019_team_menu .menu_item.direct_link.current_page {
+
−
background-color:#00a19bad;
+
 
}
 
}
  
 +
.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*/
 
/**************************************************************************************************************************************************************************************************/
 
/**************************************************************************************************************************************************************************************************/
  
  
−
.igem_2019_team_mobile_bar {
+
.igem_mobile_menu_bar {
−
background-color:#ececec;  
+
background-color:#dcdcdc;  
−
border-bottom: 1px solid #cecece;
+
border-bottom: 2px solid #c1c1c1;
 
cursor:pointer;
 
cursor:pointer;
 
display:none;  
 
display:none;  
Line 212: Line 272:
 
}
 
}
  
−
 
+
  
 
/**************************************************************************************************************************************************************************************************/
 
/**************************************************************************************************************************************************************************************************/
Line 218: Line 278:
 
/**************************************************************************************************************************************************************************************************/
 
/**************************************************************************************************************************************************************************************************/
  
 +
 +
 
/* general wrapper for the content */
 
/* general wrapper for the content */
−
.igem_2019_team_content {
+
.igem_content_wrapper {
 
background-color:white;  
 
background-color:white;  
−
display:block;
+
display:block;
−
width: 87%;
+
width:-webkit-calc(100% -270px);
 +
width:-moz-calc(100% - 270px);
 +
width:calc(100% - 270px);
 +
 
 
}
 
}
  
 
/* subwrapper to center content */
 
/* subwrapper to center content */
−
.igem_2019_team_content .igem_2019_team_column_wrapper {
+
.igem_column_wrapper {
 
margin:auto;
 
margin:auto;
 
max-width: 1400px;
 
max-width: 1400px;
−
width:90%;
+
width:80%;
 
}
 
}
−
 
  
  
Line 237: Line 301:
 
/**************************************************************************************************************************************************************************************************/
 
/**************************************************************************************************************************************************************************************************/
  
−
.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%;}
 
  
 +
/*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_2019_team_content .igem_2019_team_column_wrapper h1, .igem_2019_team_content .igem_2019_team_column_wrapper h2 {
+
.igem_content_wrapper h1, .igem_content_wrapper h2 {
 
border-bottom:0px;  
 
border-bottom:0px;  
−
color: #635d5d;
+
color: #00a19c;
−
font-family: "Arial Black", Gadget, sans-serif;
+
font-family: Freeroad_Bold;
−
padding: 10px 0px;
+
line-height: initial;
 +
padding: 5px 0px;
 
}
 
}
  
 
/* styling for the titles h3, h3, h5, h6 */
 
/* styling for the titles h3, h3, h5, h6 */
−
.igem_2019_team_content .igem_2019_team_column_wrapper h3,  
+
.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 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: #635d5d;   
+
color: #212223;   
−
font-family: "Arial Black", Gadget, sans-serif;
+
font-family: Freeroad_Regular;
 +
line-height: initial;
 
padding: 5px 0px;
 
padding: 5px 0px;
 
}
 
}
  
 
/* text */
 
/* text */
−
.igem_2019_team_content .igem_2019_team_column_wrapper p {  
+
.igem_content_wrapper p {  
 
font-size: 130%;
 
font-size: 130%;
−
font-family: Arial, Helvetica, sans-serif;
+
font-family: Arial;
 
padding: 5px 0px;
 
padding: 5px 0px;
 
text-align: left;
 
text-align: left;
−
color: #484848;
 
 
}
 
}
  
 
/* Links */
 
/* Links */
−
.igem_2019_team_content .igem_2019_team_column_wrapper a {
+
.igem_content_wrapper a {
−
color: #00a19b;
+
color: #0a5157;
 
font-weight: bold;  
 
font-weight: bold;  
 
text-decoration: underline;
 
text-decoration: underline;
−
text-decoration-color:#00a19b;
+
text-decoration-color:#0a5157;
 
transition: all 0.4s ease;
 
transition: all 0.4s ease;
 
-webkit-transition: all 0.4s ease;
 
-webkit-transition: all 0.4s ease;
Line 287: Line 362:
  
 
/* hover for the links */
 
/* hover for the links */
−
.igem_2019_team_content .igem_2019_team_column_wrapper a:hover {  
+
.igem_content_wrapper a:hover {  
−
color: #085156;
+
color: #13c0d7;
 
text-decoration:none;
 
text-decoration:none;
 
}
 
}
  
 +
/*for images that are href*/
 +
a.image_href{
 +
text-decoration:none;
 +
}
 +
 +
/* non numbered lists */
 +
.igem_content_wrapper ul {
 +
font-family:Arial;
 +
font-size: 130%;
 +
list-style: disc;
 +
padding:0px 20px;
 +
}
 +
 +
/*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%;
 +
margin-bottom: 10px;
 +
line-height: 18px;
 +
}
 +
 +
 +
/* numbered lists */
 +
.igem_content_wrapper ol {
 +
font-family:Arial;
 +
font-size: 130%;
 +
padding:0px;
 +
}
  
 
/* Table */
 
/* Table */
−
.igem_2019_team_content .igem_2019_team_column_wrapper table {  
+
.igem_content_wrapper table {  
−
border: 1px solid #635d5d;  
+
border: 1px solid #c1c1c1;  
 
border-collapse: collapse;  
 
border-collapse: collapse;  
−
font-size: 130%;
+
font-size: 120%;
 
width: 100%;  
 
width: 100%;  
 
}
 
}
  
 
/* table cells */
 
/* table cells */
−
.igem_2019_team_content .igem_2019_team_column_wrapper td {  
+
.igem_content_wrapper  td {  
−
border: 1px solid #cecece;  
+
border: 1px solid #c1c1c1;  
 
border-collapse: collapse;  
 
border-collapse: collapse;  
 
font-size: 105%;
 
font-size: 105%;
Line 311: Line 413:
  
 
/* table headers */
 
/* table headers */
−
.igem_2019_team_content .igem_2019_team_column_wrapper th {  
+
.igem_content_wrapper th {  
−
background-color:#cecece;  
+
    background-color: #f2f2f2;
−
border: 1px solid #635d5d;  
+
    border: 1px solid #d3d3d3;
−
border-collapse: collapse;  
+
    border-collapse: collapse;
−
font-size: 110%;
+
    font-size: 110%;
−
padding: 10px;  
+
    padding: 10px;
−
vertical-align: text-top;  
+
    vertical-align: text-top;
 +
    text-align: left;
 
}
 
}
−
 
−
 
−
 
−
/* 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 343: Line 428:
  
 
/*main layout class */
 
/*main layout class */
−
.igem_2019_team_content .igem_2019_team_column_wrapper .column  {  
+
.column  {  
 
float:left;
 
float:left;
 
margin: 1% 2%;
 
margin: 1% 2%;
Line 350: Line 435:
  
 
/* 100% */
 
/* 100% */
−
.igem_2019_team_content .igem_2019_team_column_wrapper .column.full_size { width:96%; }
+
.full_size { width:96%; }
−
 
+
 
/* 66% */
 
/* 66% */
−
.igem_2019_team_content .igem_2019_team_column_wrapper .column.two_thirds_size { width: 62.6%; }
+
.two_thirds_size { width: 62.6%; }
−
 
+
 
/* 33% */
 
/* 33% */
−
.igem_2019_team_content .igem_2019_team_column_wrapper .column.third_size { width: 29.3%; }
+
.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*/
−
.igem_2019_team_content .igem_2019_team_column_wrapper .column.full_size img,  
+
.full_size img,  
−
.igem_2019_team_content .igem_2019_team_column_wrapper .column.two_thirds_size img,
+
.half_size img,
−
.igem_2019_team_content .igem_2019_team_column_wrapper .column.third_size img {
+
.two_thirds_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 */
−
.igem_2019_team_content .igem_2019_team_column_wrapper .clear {
+
.clear {
 
clear:both;
 
clear:both;
 
}
 
}
 +
 
/*add extra space to page break with clear class*/
 
/*add extra space to page break with clear class*/
−
.igem_2019_team_content .igem_2019_team_column_wrapper .clear.extra_space {
+
.clear.extra_space {
 
height: 30px;
 
height: 30px;
 
}
 
}
  
−
/* horizontal line to divide the page*/
+
/* horizontal gray line to divide the page*/
−
.igem_2019_team_content .igem_2019_team_column_wrapper .line_divider {
+
.line_divider {
−
     border-top: 1px solid #cecece;
+
     border-top: 1px solid #848484;
 
  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 391: Line 519:
 
/*support classes*/
 
/*support classes*/
 
/**************************************************************************************************************************************************************************************************/
 
/**************************************************************************************************************************************************************************************************/
 +
 +
 +
/*special image that takes up the entire page*/
 +
.full_size_image { 
 +
width:100%;
 +
margin-top: -60px;
 +
}
  
  
 
/*Button  */
 
/*Button  */
 
/************************************************/
 
/************************************************/
−
.igem_2019_team_content .igem_2019_team_column_wrapper .button_link {
+
.button {
−
font-size: 130%;
+
font-size: 115%;
 
margin: 30px auto;
 
margin: 30px auto;
 
text-align: center;
 
text-align: center;
 
}
 
}
  
−
.igem_2019_team_content .igem_2019_team_column_wrapper .button_link a  {
+
.button a  {
−
background-color: #00a19bad !important;
+
background-color: #00a19c !important;
−
color: #000 !important;
+
color: #ffffff !important;
 
font-weight: bold;
 
font-weight: bold;
 
margin: auto;
 
margin: auto;
Line 410: Line 545:
 
}
 
}
  
−
.igem_2019_team_content .igem_2019_team_column_wrapper .button_link a:hover {
+
.button a:hover {
−
background-color: #ffb819 !important;  
+
background-color: #0a5157 !important;
 
}
 
}
  
  
  
−
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight {  
+
/*Expand collapse  --- REVIEW THIS ANA*/
−
padding: 15px 20px;
+
/************************************************/
 +
.expand_content.first{
 +
float:left;
 +
margin-right: -15px;
 
}
 
}
  
−
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight p,
+
.expand_content.control_button {
−
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight h1,
+
background-color:#10996a;
−
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight h2,
+
border: 2px solid #10996a;
−
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight h3,
+
border-radius: 50%;
−
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight h4,
+
color:#ffffff;
−
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight h5,
+
cursor:pointer;
−
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight h6 {
+
float: left;
−
padding: 5px 15px;
+
font-weight: bold;
 +
margin: 0px 5px;
 +
padding-bottom: 1px;
 +
text-align: center;
 +
width: 20px;
 
}
 
}
  
−
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight.decoration_background {
+
.expand_content.control_button:hover {
−
background-color: #ececec;  
+
color: #10996a;
 +
background-color:#ffffff;
 +
border: 2px solid #10996a;
 +
float: left;
 
}
 
}
  
−
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight.decoration_A_top {
+
.expand_content.control_button::before {
−
    border-top: 4px solid #00a19bad;
+
content: "+";  
 
}
 
}
  
 +
/* this is the icon for when the content is expanded */
 +
.expand_content.control_button.less::before {
 +
content: "–";
 +
}
  
−
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight.decoration_A_full {
+
.expand_content.more {  
−
    border: 4px solid #00a19bad;
+
display: none;
 +
float:left;  
 
}
 
}
  
−
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight.decoration_B_top {
+
 
−
    border-top: 4px solid #ffb819
+
/*hiding and showing content */
 +
/************************************************/
 +
 
 +
/*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_2019_team_content .igem_2019_team_column_wrapper .highlight.decoration_B_full {
+
.igem_content_wrapper p.image_caption {
−
     border: 4px solid #ffb819;
+
font-size: 100%;
 +
    margin-top: -10px;
 +
     padding-top: 0;
 
}
 
}
 +
 +
 +
/*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;
 +
float:left;
 +
font-family: Freeroad_Regular;
 +
font-size: 150%;
 +
}
 +
 +
.highlight.post_item  > .details > .date {
 +
color: #6f7173;
 +
float: right;
 +
font-family: Freeroad_Regular;
 +
font-size: 150%;
 +
  font-style: italic;
 +
}
 +
 +
.highlight.post_item  > .details > .icon {
 +
  float: left;
 +
  margin-left: -4px;
 +
  margin-top: -7px;
 +
width: 30px;
 +
}
  
−
/*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;
 +
}
 +
 
 +
 
 +
/* center content */
 +
p.center_content,
 +
h1.center_content,
 +
h2.center_content,
 +
h3.center_content,
 +
h4.center_content,
 +
h5.center_content,
 +
h6.center_content,
 +
img.center_content {
 +
margin:auto;
 +
text-align:center!important;
 +
}
 +
 +
 
 +
/*Multiple links in a ul */
 
/************************************************/
 
/************************************************/
−
@media only screen and (max-width: 1800px) {
+
.multiple_links a{
−
.igem_2019_team_content { width: 85%;}
+
color: black !important;
−
.igem_2019_team_menu {display:block;}
+
}
−
}
+
 
 +
.multiple_links a:hover {
 +
color: #13c0d7 !important;
 +
}
  
−
/* 1400px  */
+
/*Make text red and bold*/
 
/************************************************/
 
/************************************************/
−
@media only screen and (max-width: 1400px) {
+
.red_text {
−
.igem_2019_team_menu .menu_item { font-size:100%;}
+
color: #f42434;  
−
.igem_2019_team_menu .submenu .submenu_item { font-size:90%;}
+
font-weight:bold;
−
.igem_2019_team_menu {display:block;}
+
 
}
 
}
  
−
@media only screen and (max-width: 1001px) {
+
−
.igem_2019_team_menu {display:block;}
+
 +
/*Image slider/
 +
/************************************************/
 +
.image_slider img {  width:100%; }
 +
 
 +
ul.image_slider {
 +
    list-style: none;
 +
    margin: 0px;
 +
    padding: 0px 0px 15px 0px;
 
}
 
}
  
−
/* 1000px  */
+
/* image list hidden by default*/
 +
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:"◀ ";
 +
}
 +
 
 +
 
 +
 
 +
/*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 {
 +
background-color: #f2f2f2;
 +
    border-radius: 7px;
 +
color: #797979;
 +
    cursor: pointer;
 +
float: left;
 +
    font-size: 120%;
 +
font-weight: bold;
 +
height: 25px;
 +
margin: 0px 10px 0px 0px;
 +
padding: 8px 3.5px 2px 3.5px;
 +
    text-align: center;
 +
width: 200px;
 
}
 
}
  
  
−
@media only screen and (max-width: 500px) {
+
.navigation_button { 
−
.igem_2019_team_menu {min-width:100%; width:100%; }
+
border: 2px solid #c1c1c1;
 +
    border-radius: 15%;
 +
    color: #797979;
 +
cursor: pointer;
 +
display: block;
 +
float: left;
 +
font-size: 120%;
 +
    font-weight: bold;
 +
height: 25px;
 +
    margin-right: 15px;
 +
    padding: 6px 1.5px 0px 1.5px;
 +
    text-align: center;
 +
    width: 30px;
 
}
 
}
  
  
 +
.navigation_button.arrow_navigation {
 +
border: 2px solid white;
 +
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;
 +
border: 2px solid #00a19c;
 +
color: #ffffff;
 +
}
 +
 +
.navigation_button:hover+.title_extra, .title_extra:hover { 
 +
color: #00a19c;
 +
display:block;
 +
}
 +
 +
.navigation_button.active_navigation_button {
 +
color: #00a19c;
 +
background-color: #f2f2f2;
 +
border: 2px solid #00a19c;
 +
}
 +
 +
 +
/*REVIEW THIS ANA*/
 +
.title_extra {
 +
color: #00a19c;
 +
display:none;
 +
float:left;
 +
margin-right: 20px;
 +
padding: 7px 0px;
 +
}
 +
 +
.title_extra.main_item {
 +
display:block;
 +
text-decoration: underline;
 +
}
 +
 +
.title_extra.support_item {
 +
display:block;
 +
margin-left: -17px;
 +
margin-right:0px;
 +
}
 +
 +
.title_extra.support_item:hover {
 +
color: #00a19c;
 +
}
 +
 +
 +
.igem_menu_wrapper::-webkit-scrollbar {
 +
    display: none;
 +
}
 +
 +
 +
/*track navigation */
 +
/************************************************/
 +
 +
.track_navigation{
 +
float:left;
 +
width:8.33%;
 +
}
 +
 +
.track_navigation> img {
 +
opacity: 1.0;
 +
}
 +
 +
 +
.track_navigation> img:hover{
 +
opacity: 0.5;
 +
}
 +
 +
 +
/*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;
 +
}
 +
 +
 +
 +
/*read more class for large sections of text*/
 +
 +
.read_more {
 +
background-color:#00A19B;
 +
border: 1px solid #00A19B;
 +
border-radius:5px;
 +
color: #ffffff;
 +
font-weight: bold;
 +
padding: 0px 12px;
 +
}
 +
 +
 +
.read_more:hover {
 +
background-color:#0a5157;
 +
border: 1px solid #0a5157;
 +
color: #ffffff;
 +
cursor:pointer;
 +
}
 +
 +
 +
.read_more::before{
 +
content: "Read more";
 +
white-space:nowrap;
 +
}
 +
 +
.read_more.show_less::before{
 +
content: "Show less";
 +
}
 +
 +
.read_more_text{
 +
display:none;
 +
}
 +
 +
 +
/*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, .hub_icon {display:none;}
 +
ul.image_slider { padding:0px; width: 100%; margin: auto;}
 +
.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%;}
 +
.igem_column_wrapper{padding-top:0px;}
 +
 +
}
 +
 +
 +
/* 1100px  */
 +
/************************************************/
 +
@media only screen and (max-width: 1100px) {
 +
 +
.igem_content_wrapper {width:100%; margin-left:0px;}
 +
.igem_column_wrapper{padding-top:25px;}
 +
 +
.half_size, .two_thirds_size, .third_size, .three_quarter_size, .quarter_size,
 +
.column.full_size > .highlight.news_item > .column.quarter_size,
 +
.column.full_size > .highlight.news_item > .column.three_quarter_size,
 +
.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, .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, .highlight.post_item  > .details > .title {clear: both;}
 +
.highlight.post_item > .details > .date {clear: both; float:left;}
 +
.highlight.post_item img { padding: 2%; margin: auto;}
 +
 +
.igem_menu{  width: 30%; float: right; position: fixed; margin-top: 47px;  max-width: 100%;}
 +
.full_size_image { margin-top: 0px;}
 +
 +
}
 +
 +
/* 800px  */
 +
/************************************************/
 +
@media only screen and (max-width: 800px) {
 +
.igem_menu{  width: 50%;}
 +
}
 +
 +
/* 600px  */
 +
/************************************************/
 +
@media only screen and (max-width: 600px) {
 +
.igem_menu{  width: 60%;}
 +
}
 +
 +
 +
 
</style>
 
</style>
  
  
−
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 
−
<!--- 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>
+
<script>
  
 +
// This is the jquery part of your template.  Try not modify any of this code since it makes your menu work.
  
 +
$(document).ready(function() {
  
−
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
+
$("#HQ_page").attr('id','');
−
<!--- Menu --->
+
−
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
+
//if HQ_info exists, display the content only for HQ
 +
if ($("#HQ_info").length){
 +
hide_HQ_info();
 +
}
  
 +
$( "#load_menu_here" ).load( "https://2019.igem.org/HQ:Menu #load_menu_content" , function() {
 +
menu_functionality();
 +
highlight_current_page_menu();
 +
});
  
  
 +
if( $(".igem_mobile_menu_bar").is(":visible") ){
 +
$(".igem_content_wrapper").click(function() {
 +
$(".igem_menu").hide();
 +
});
 +
}
  
−
<div class="igem_2019_team_mobile_bar">
 
−
 
−
<div class="igem_logo_mobile">
 
−
<img src="https://static.igem.org/mediawiki/2019/3/3c/Igem_mobile_menu_logo.svg">
 
−
</div>
 
  
 +
//expand collapse functionality
 +
$(".collapsible_accordion_access").click(function(){
 +
$(this).toggleClass("displaying_content");
 +
$(this).parent().next().toggleClass("hide_content");
 +
});
  
−
<div class="igem_menu_control_mobile">
+
//read more functionality
−
<img id="menu_control_image" src="https://static.igem.org/mediawiki/igem.org/3/3b/Menu_icon.svg">
+
$(".read_more").click(function(){
−
</div>
+
$(this).toggleClass("show_less");
 +
$(this).prev(".read_more_text").fadeToggle(400);
 +
});
  
−
</div>
+
//if image_slider exists, activate the automatic rotation slider and functionality
 +
if ($("#image_carrousel").length){
 +
image_slider_rotation();
 +
}
  
  
  
 +
//loading content ids
  
−
<div class="igem_2019_team_menu">
+
if ($("#load_sponsors_here").length) {
 +
load_these_items ( "https://2019.igem.org/Sponsors #all_sponsors", "load_sponsors_here");
 +
}
  
 +
if ($("#load_news_here").length) {
 +
load_these_items ( "https://2019.igem.org/Teams/News_Archive #load_these_news_items", "load_news_here");
 +
}
 +
 +
});
  
−
<a href="https://2019.igem.org/Team:Example2">
 
−
<img src="http://placehold.it/350x150/ececec/cecece">
 
−
</a>
 
  
  
 +
 +
 +
// if HQ_info exists, hide unless the user is an admin
 +
function hide_HQ_info() {
  
−
<a href="https://2019.igem.org/Team:Example2">
+
switch ( wgUserName) {
−
<div class="menu_item direct_link">
+
case "Sifuentes anita": case "Vinoo": case "THaddock": case "Meagan": case "MariaB":  case "Abigail": case "Kitwa": case "Pdmillett": case "Suzie iGEM": case "Randy": case "AnneMeyer": case "alexanian":
−
HOME
+
$("#HQ_info").show();
−
</div>
+
break;
−
</a>
+
  
−
<!-- Team -->
+
default:
−
<div class="menu_item">
+
$("#HQ_info").hide();
−
<div class="submenu_control_icon"> </div>
+
break;
−
TEAM
+
}
−
</div>
+
   
−
<div class="submenu">
+
}
 
 
−
<a href="https://2019.igem.org/Team:Example2/Team">
 
−
<div class="submenu_item">
 
−
Team Members
 
−
</div>
 
−
</a>
 
  
−
<a href="https://2019.igem.org/Team:Example2/Collaborations">
 
−
<div class="submenu_item">
 
−
Collaborations
 
−
</div>
 
−
</a>
 
−
</div>
 
  
  
−
<!-- Project -->
+
//general menu functionality
−
<div class="menu_item">
+
function menu_functionality() {
−
<div class="submenu_control_icon"> </div>
+
−
PROJECT
+
//accessing submenus and subsubmenus
−
</div>
+
$(".submenu_access").click(function(){
−
<div class="submenu">
+
$(this).toggleClass("showing");
−
+
$(this).next().fadeToggle(400);
−
<a href="https://2019.igem.org/Team:Example2/Description">
+
});
−
<div class="submenu_item">
+
−
Description
+
−
</div>
+
−
</a>
+
  
−
<a href="https://2019.igem.org/Team:Example2/Design">
+
//mobile menu access
−
<div class="submenu_item">
+
$(".igem_mobile_menu_bar").click(function(){
−
Design
+
$(this).next().fadeToggle(400);
−
</div>
+
});
−
</a>
+
 +
}
  
−
<a href="https://2019.igem.org/Team:Example2/Experiments">
 
−
<div class="submenu_item">
 
−
Experiments
 
−
</div>
 
−
</a>
 
  
  
−
<a href="https://2019.igem.org/Team:Example2/Notebook">
+
//highlight current page in the menu
−
<div class="submenu_item">
+
function highlight_current_page_menu() {
−
Notebook
+
−
</div>
+
−
</a>
+
 
 
−
<a href="https://2019.igem.org/Team:Example2/Contribution">
+
var page_url="https://2019.igem.org/";
−
<div class="submenu_item">
+
−
Contribution
+
−
</div>
+
−
</a>
+
  
 +
switch ( (wgPageName.match( /\//g ) || []).length  ) {
  
 +
//this is a hub
 +
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");
  
−
<a href="https://2019.igem.org/Team:Example2/Model">
+
// if sub menu has a sub sub menu - open it
−
<div class="submenu_item">
+
$(".with_subsub_menu.current_page").parent().next().toggleClass("showing");
−
Model
+
$(".with_subsub_menu.current_page").parent().next().next().fadeToggle(400);
−
</div>
+
−
</a>
+
  
−
<a href="https://2019.igem.org/Team:Example2/Results">
+
break;
−
<div class="submenu_item">
+
−
Results
+
−
</div>
+
−
</a>
+
  
  
−
<a href="https://2019.igem.org/Team:Example2/Demonstrate">
 
−
<div class="submenu_item">
 
−
Demonstrate
 
−
</div>
 
−
</a>
 
  
−
<a href="https://2019.igem.org/Team:Example2/Improve">
+
case 2:
−
<div class="submenu_item">
+
−
Improve
+
−
</div>
+
−
</a>
+
  
−
<a href="https://2019.igem.org/Team:Example2/Attributions">
+
//open the hub
−
<div class="submenu_item">
+
page_url = page_url +wgPageName.substring(0, wgPageName.indexOf('/'));
−
Attributions
+
$("a[href$='"+ page_url +"']").parent().addClass("current_hub");
−
</div>
+
$(".current_hub .igem_submenu").fadeToggle(400);
−
</a>
+
$(".current_hub .igem_submenu").prev().toggleClass("showing");
  
−
</div>
 
  
 +
page_url ="https://2019.igem.org/";
 +
page_url = page_url +wgPageName.substring(0, wgPageName.lastIndexOf('/'));
 +
$("a[href$='"+page_url+"'] > .submenu_item").addClass("current_page");
  
−
<div class="menu_item">
+
$(".current_page").parent().next().toggleClass("showing");
−
<div class="submenu_control_icon"> </div>
+
$(".current_page").parent().next().next().fadeToggle(400);
−
PARTS
+
 
−
</div>
+
page_url ="https://2019.igem.org/";
−
<div class="submenu">
+
page_url = page_url+wgPageName;
 +
$("a[href$='"+page_url+"'] > .subsubmenu_item").addClass("current_subpage");
 +
 
 +
// if sub menu has a sub sub menu - open it
 +
break;
 +
 
 +
 
 +
}
 +
 
 +
}
 +
 
 +
 
 +
 
 +
//function for image sliders
 +
function image_slider_rotation() {
 +
 
 +
var slider_counter;
 +
var clicked_image_number = 0;
 +
var controller_number = 0;
 
 
−
<a href="https://2019.igem.org/Team:Example2/Parts">
+
−
<div class="submenu_item">
+
//constant rotation
−
Parts Overview
+
setInterval(function(){
−
</div>
+
−
</a>
+
  
−
<a href="https://2019.igem.org/Team:Example2/Basic_Part">
+
slider_counter = $("ul.image_slider li.current_image").index()+1;
−
<div class="submenu_item">
+
−
Basic Parts
+
−
</div>
+
−
</a>
+
  
−
<a href="https://2019.igem.org/Team:Example2/Composite_Part">
+
$("ul.image_slider li.current_image").removeClass("current_image");
−
<div class="submenu_item">
+
$("ul.image_number li.current_image_number").removeClass("current_image_number");
−
Composite Parts
+
−
</div>
+
−
</a>
+
  
−
<a href="https://2019.igem.org/Team:Example2/Part_Collection">
+
if( slider_counter  >= $('ul.image_slider li').length ){
−
<div class="submenu_item">
+
slider_counter = 1;
−
Part Collection
+
} 
−
</div>
+
else{
−
</a>
+
slider_counter+=1;
−
</div>
+
}
  
−
+
$("ul.image_slider li:nth-child("+slider_counter+")").addClass("current_image");
−
+
$("ul.image_number li:nth-child("+slider_counter+")").addClass("current_image_number");
−
+
−
+
  
−
<a href="https://2019.igem.org/Team:Example2/Safety">
+
}, 5000);
−
<div class="menu_item direct_link">
+
−
SAFETY
+
−
</div>
+
−
</a>
+
  
  
  
 +
//if a number is clicked
 +
$("ul.image_number li").click(function(){
 +
clicked_image_number = $(this).index() + 1;
 +
 +
$("ul.image_slider li.current_image").removeClass("current_image");
 +
$("ul.image_number li.current_image_number").removeClass("current_image_number");
  
 +
$("ul.image_slider li:nth-child("+clicked_image_number+")").addClass("current_image");
 +
$("ul.image_number li:nth-child("+clicked_image_number+")").addClass("current_image_number");
 +
});
  
  
−
<div class="menu_item">
 
−
<div class="submenu_control_icon"> </div>
 
−
HUMAN PRACTICES
 
−
</div>
 
  
−
<div class="submenu">
+
//if a controller next/prev is clicked
 +
$(".image_controller").click(function(){
 +
controller_number = $("ul.image_slider li.current_image").index() + 1;
  
−
<a href="https://2019.igem.org/Team:Example2/Human_Practices">
+
$("ul.image_slider li.current_image").removeClass("current_image");
−
<div class="submenu_item">
+
$("ul.image_number li.current_image_number").removeClass("current_image_number");
−
Human Practices
+
−
</div>
+
−
</a>
+
  
  
−
<a href="https://2019.igem.org/Team:Example2/Public_Engagement">
+
if( $(this).hasClass( "next" )) {
−
<div class="submenu_item">
+
if( controller_number >= $('ul.image_slider li').length ){
−
Education & Engagement
+
controller_number = 1;
−
</div>
+
} 
−
</a>
+
else{
 +
controller_number+=1;
 +
}
 +
}
 +
else if( $(this).hasClass( "prev" )) {
 +
if( controller_number <=1  ){
 +
controller_number = $('ul.image_slider li').length;
 +
} 
 +
else{
 +
controller_number-=1;
 +
}
 +
}
  
−
</div>
+
$("ul.image_slider li:nth-child("+controller_number+")").addClass("current_image");
 +
$("ul.image_number li:nth-child("+controller_number+")").addClass("current_image_number");
  
 +
});
 +
}
  
  
  
 +
// load desired content function
 +
function load_these_items ( source_page , destination_div ) {
  
−
<div class="menu_item">
+
$("#"+destination_div ).load( source_page , function() { 
−
<div class="submenu_control_icon"> </div>
+
});
−
AWARDS
+
}
−
</div>
+
  
−
<div class="submenu">
 
  
−
<a href="https://2019.igem.org/Team:Example2/Product_Design">
+
</script>
−
<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>
 
  
−
<a href="https://2019.igem.org/Team:Example2/Measurement">
 
−
<div class="submenu_item">
 
−
Measurement
 
−
</div>
 
−
</a>
 
  
−
<a href="https://2019.igem.org/Team:Example2/Model">
 
−
<div class="submenu_item">
 
−
Model
 
−
</div>
 
−
</a>
 
  
−
<a href="https://2019.igem.org/Team:Example2/Plant">
 
−
<div class="submenu_item">
 
−
Plant
 
−
</div>
 
−
</a>
 
  
 +
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 +
<!--HTML -->
 +
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
  
−
<a href="https://2019.igem.org/Team:Example2/Software">
+
<head>  
−
<div class="submenu_item">
+
<meta name="viewport" content="width=device-width, initial-scale=1">  
−
Software
+
</head>
−
</div>
+
−
</a>
+
  
−
</div>
 
  
  
  
−
<a href="https://igem.org/2019_Judging_Form?team=Example2">
+
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
−
<div class="menu_item direct_link">
+
<!--MENU -->
−
JUDGING FORM ⇗
+
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
−
</div>
+
−
</a>
+
  
 +
 +
 +
<div class="igem_mobile_menu_bar">
 +
 +
<div class="igem_logo_mobile">
 +
<img src="https://static.igem.org/mediawiki/2019/3/3c/Igem_mobile_menu_logo.svg">
 +
</div>
 +
 +
 +
<div class="igem_menu_control_mobile">
 +
<img id="menu_control_image" src="https://static.igem.org/mediawiki/2019/2/25/Main_menu_icon.svg">
 +
</div>
 +
 +
</div>
 +
 +
 +
<div class="igem_menu">
 +
 +
 +
<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>
 +
 +
</div>
  
  
Line 788: Line 1,486:
  
  
−
</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>

Latest revision as of 18:02, 20 November 2019

Loading...