Difference between revisions of "Template:Main2019"

 
(15 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
{{Main2019}}
 
 
<html>
 
<html>
 +
<style>
  
 +
/**************************************************************************************************************************************************************************************************/
 +
/* DEFAULT WIKI SETTINGS */
 +
/**************************************************************************************************************************************************************************************************/
  
 +
#home_logo, #sideMenu, #sideMenu, #top_title, .patrollink {display:none;}
 +
#content {margin-left:0px; margin-top:-7px; padding:0px; width:100%;}
 +
body {background-color:white;}
 +
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 {margin-bottom: 0px;}
 +
#bodyContent a[href ^="https://"], .link-https {padding-right:0px;}
  
−
<div class="column full_size">
+
/**************************************************************************************************************************************************************************************************/
−
<h1>5. Track Selection</h1>
+
/* MENU */
−
</div>
+
/**************************************************************************************************************************************************************************************************/
  
 +
/*igem menu div - this wraps the whole of the menu*/
 +
.igem_menu {
 +
background-color:#dcdcdc;
 +
border-left: 1px solid #dcdcdc;
 +
float:right;
 +
height:100vh;
 +
max-width: 270px;
 +
overflow-y: auto;
 +
overflow-x: hidden;
 +
padding:0px;
 +
position:fixed;
 +
right:0%;
 +
text-align:left;
 +
width: 15%;
 +
}
  
  
−
<style>
+
/*logo styling*/
 +
.igem_menu_logo {
 +
clear:both;
 +
float:left;
 +
padding: 5px 0px;
 +
width:100%;
 +
}
  
−
.read_more {
+
.igem_menu_logo img {
 +
width:100%;
 +
}
 +
 +
 
 +
 
 +
.igem_menu_item a {
 +
color: #000;
 +
text-decoration:none;
 +
}
 +
 
 +
#all_menu_items{ display:block;}
 +
 +
 +
 
 +
/*menu item styling // layer one*/
 +
/**************************************************************************************************************************************************************************************************/
 +
 
 +
/* div for menu items (hubs or not)*/
 +
.igem_menu_item{
 +
background-color: #dcdcdc;
 +
border-bottom: 1px solid #c1c1c1;
 +
clear:both;
 +
cursor:pointer;
 +
font-weight: bold;
 +
height: 39px;
 +
width:100%;
 +
}
 +
 
 +
.igem_menu_item.last_item{
 +
margin-bottom:60px;
 +
}
 +
 
 +
/*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%;
 +
}
 +
 
 +
 
 +
 
 +
/*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%;
 +
}
 +
 
 +
/* submenu access icon "+"  "-"*/
 +
.submenu_access::before {
 +
content: "+";
 +
}
 +
 
 +
/* submenu access icon "+"  "-"*/
 +
.submenu_access.showing::before {
 +
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*/
 +
.igem_submenu{
 +
background-color: #e8e8e8;
 +
clear:both;
 +
display:none;
 +
float: left; 
 +
width:100%;
 +
}
 +
 
 +
/*styling for a submenu item*/
 +
.submenu_item {
 +
border-bottom: 1px solid #dcdcdc;
 +
height: 25px;
 +
float: left; 
 +
font-size: 110%;
 +
padding: 10px 0px 4px 19%;
 +
width:100%;
 +
}
 +
 
 +
/*when the submenu item has a subsubmenu - make room for submenu access class on the same line*/
 +
.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_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*/
 +
/**************************************************************************************************************************************************************************************************/
 +
 
 +
 
 +
.igem_mobile_menu_bar {
 +
background-color:#dcdcdc;
 +
border-bottom: 2px solid #c1c1c1;
 +
cursor:pointer;
 +
display:none;
 +
float:left;
 +
margin-top: 0;
 +
padding: 5px 0;
 +
position:fixed;
 +
width:100%;
 +
}
 +
 
 +
.igem_logo_mobile img {
 +
width:70px;
 +
}
 +
 
 +
.igem_logo_mobile {
 +
float:left;
 +
padding-left: 5%;
 +
width: 30%;
 +
}
 +
 
 +
.igem_menu_control_mobile img {
 +
width:25px;
 +
}
 +
 
 +
.igem_menu_control_mobile {
 +
float:right;
 +
padding-right:5%;
 +
padding-top:5px;
 +
text-align:right;
 +
width: 30%;
 +
}
 +
 
 +
 +
 
 +
/**************************************************************************************************************************************************************************************************/
 +
/* CONTENT OF THE PAGE */
 +
/**************************************************************************************************************************************************************************************************/
 +
 
 +
 +
 +
/* general wrapper for the content */
 +
.igem_content_wrapper {
 +
background-color:white;
 +
display:block;
 +
width:-webkit-calc(100% -270px);
 +
width:-moz-calc(100% - 270px);
 +
width:calc(100% - 270px);
 +
 
 +
}
 +
 
 +
/* subwrapper to center content */
 +
.igem_column_wrapper {
 +
margin:auto;
 +
max-width: 1400px;
 +
width:80%;
 +
}
 +
 
 +
 
 +
/*general 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*/
 +
.igem_content_wrapper h1, .igem_content_wrapper h2 {
 +
border-bottom:0px;
 +
color: #00a19c;
 +
font-family: Freeroad_Bold;
 +
line-height: initial;
 +
padding: 5px 0px;
 +
}
 +
 
 +
/* styling for the titles h3, h3, h5, h6 */
 +
.igem_content_wrapper h3, .igem_content_wrapper h4, .igem_content_wrapper h5, .igem_content_wrapper h6 {
 +
border-bottom:0px;
 +
color: #212223; 
 +
font-family: Freeroad_Regular;
 +
line-height: initial;
 +
padding: 5px 0px;
 +
}
 +
 
 +
/* text */
 +
.igem_content_wrapper p {
 +
font-size: 130%;
 +
font-family: Arial;
 +
padding: 5px 0px;
 +
text-align: left;
 +
}
 +
 
 +
/* Links */
 +
.igem_content_wrapper a {
 +
color: #0a5157;
 +
font-weight: bold;
 +
text-decoration: underline;
 +
text-decoration-color:#0a5157;
 +
transition: all 0.4s ease;
 +
-webkit-transition: all 0.4s ease;
 +
-moz-transition: all 0.4s ease;
 +
-ms-transition: all 0.4s ease;
 +
-o-transition: all 0.4s ease;
 +
}
 +
 
 +
/* hover for the links */
 +
.igem_content_wrapper a:hover {
 +
color: #13c0d7;
 +
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 */
 +
.igem_content_wrapper table {
 +
border: 1px solid #c1c1c1;
 +
border-collapse: collapse;
 +
font-size: 120%;
 +
width: 100%;
 +
}
 +
 
 +
/* table cells */
 +
.igem_content_wrapper  td {
 +
border: 1px solid #c1c1c1;
 +
border-collapse: collapse;
 +
font-size: 105%;
 +
padding: 10px;
 +
vertical-align: text-top;
 +
}
 +
 
 +
/* table headers */
 +
.igem_content_wrapper th {
 +
    background-color: #f2f2f2;
 +
    border: 1px solid #d3d3d3;
 +
    border-collapse: collapse;
 +
    font-size: 110%;
 +
    padding: 10px;
 +
    vertical-align: text-top;
 +
    text-align: left;
 +
}
 +
 
 +
 
 +
/*layout classes*/
 +
/**************************************************************************************************************************************************************************************************/
 +
 
 +
/*main layout class */
 +
.column  {
 +
float:left;
 +
margin: 1% 2%;
 +
padding: 0px;
 +
}
 +
 
 +
/* 100% */
 +
.full_size { width:96%; }
 +
/* 66% */
 +
.two_thirds_size { width: 62.6%; }
 +
/* 33% */
 +
.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*/
 +
.full_size img,
 +
.half_size img,
 +
.two_thirds_size img,
 +
.third_size img, 
 +
.three_quarter_size img,
 +
.quarter_size img {
 +
margin-bottom: 15px;
 +
width: 100%;
 +
}
 +
 
 +
/* page break */
 +
.clear {
 +
clear:both;
 +
}
 +
 +
/*add extra space to page break with clear class*/
 +
.clear.extra_space {
 +
height: 30px;
 +
}
 +
 
 +
/* horizontal gray line to divide the page*/
 +
.line_divider {
 +
    border-top: 1px solid #848484;
 +
  margin: auto;
 +
  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;
 +
}
 +
 
 +
 
 +
 +
/*support classes*/
 +
/**************************************************************************************************************************************************************************************************/
 +
 
 +
 
 +
/*special image that takes up the entire page*/
 +
.full_size_image { 
 +
width:100%;
 +
margin-top: -60px;
 +
}
 +
 
 +
 
 +
/*Button  */
 +
/************************************************/
 +
.button {
 +
font-size: 115%;
 +
margin: 30px auto;
 +
text-align: center;
 +
}
 +
 
 +
.button a  {
 +
background-color: #00a19c !important;
 +
color: #ffffff !important;
 +
font-weight: bold;
 +
margin: auto;
 +
text-decoration: none !important;
 +
padding: 10px 15px !important;
 +
}
 +
 
 +
.button a:hover {
 +
background-color: #0a5157 !important;
 +
}
 +
 
 +
 
 +
 
 +
/*Expand collapse  --- REVIEW THIS ANA*/
 +
/************************************************/
 +
.expand_content.first{
 +
float:left;
 +
margin-right: -15px;
 +
}
 +
 
 +
.expand_content.control_button {
 +
background-color:#10996a;
 +
border: 2px solid #10996a;
 +
border-radius: 50%;
 +
color:#ffffff;
 +
cursor:pointer;
 +
float: left;
 +
font-weight: bold;
 +
margin: 0px 5px;
 +
padding-bottom: 1px;
 +
text-align: center;
 +
width: 20px;
 +
}
 +
 
 +
.expand_content.control_button:hover {
 +
color: #10996a;
 +
background-color:#ffffff;
 +
border: 2px solid #10996a;
 +
float: left;
 +
}
 +
 
 +
.expand_content.control_button::before {
 +
content: "+";
 +
}
 +
 
 +
/* this is the icon for when the content is expanded */
 +
.expand_content.control_button.less::before {
 +
content: "–";
 +
}
 +
 
 +
.expand_content.more {
 +
display: none;
 +
float:left;
 +
}
 +
 
 +
 
 +
/*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_content_wrapper p.image_caption {
 +
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;
 +
}
 +
 
 +
 +
/* 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;
 +
}
 +
 
 +
 
 +
.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 */
 +
/************************************************/
 +
.multiple_links a{
 +
color: black !important;
 +
}
 +
 
 +
.multiple_links a:hover {
 +
color: #13c0d7 !important;
 +
}
 +
 
 +
/*Make text red and bold*/
 +
/************************************************/
 +
.red_text {
 +
color: #f42434;
 +
font-weight:bold;
 +
}
 +
 
 +
 +
 +
/*Image slider/
 +
/************************************************/
 +
.image_slider img {  width:100%; }
 +
 
 +
ul.image_slider {
 +
    list-style: none;
 +
    margin: 0px;
 +
    padding: 0px 0px 15px 0px;
 +
}
 +
 
 +
/* 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/
 +
/************************************************/
 +
 
 +
 
 +
.navigation_support_title {
 
background-color: #f2f2f2;
 
background-color: #f2f2f2;
−
border: 1px solid #c2c2c2;
+
    border-radius: 7px;
−
color: #616161;
+
color: #797979;
 +
    cursor: pointer;
 +
float: left;
 +
    font-size: 120%;
 
font-weight: bold;
 
font-weight: bold;
−
padding: 0px 10px;
+
height: 25px;
 +
margin: 0px 10px 0px 0px;
 +
padding: 8px 3.5px 2px 3.5px;
 +
    text-align: center;
 +
width: 200px;
 
}
 
}
  
  
−
.read_more:hover {  
+
.navigation_button { 
 +
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;
 
background-color:#00A19B;
 
border: 1px solid #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;
 
color: #ffffff;
 
cursor:pointer;
 
cursor:pointer;
Line 30: Line 1,075:
  
 
.read_more::before{
 
.read_more::before{
−
content: "Read more...";  
+
content: "Read more";
 +
white-space:nowrap;
 
}
 
}
  
Line 41: Line 1,087:
 
}
 
}
  
 +
 +
/*mobile*/
 +
/**************************************************************************************************************************************************************************************************/
  
−
</style>
 
  
 +
/* 1784px  */
 +
/************************************************/
 +
@media only screen and (max-width: 1784px) {
 +
.igem_content_wrapper { width:85%;}
 +
}
  
−
<div class="column full_size">
+
/* 1602px  */
−
<h4> Each team can only compete in one track.</h4>
+
/************************************************/
−
<p>
+
@media only screen and (max-width: 1602px) {
−
The purpose of the iGEM tracks is to help teams focus their projects. The subject areas encompassed by the tracks aim to solve crucial global challenges; for examples, students have worked on projects related to environmental bioremediation, new medical delivery systems, and alternative energy sources using synthetic biology.
+
.hub_title{ font-size: 105%;}
 +
}
  
−
<span class="read_more_text">
 
−
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 
−
</span>
 
  
−
<span class="read_more"></span>
+
/* 1450px  */
 +
/************************************************/
 +
@media only screen and (max-width: 1450px) {
 +
 +
.hub_title{ font-size: 90%;}
 +
.submenu_item {font-size:85%;}
 +
.subsubmenu_item {font-size:80%;}
 +
 +
}
  
−
</p>
+
 +
/* 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>
  
−
</div>
 
−
</div>
 
  
  
Line 67: Line 1,186:
  
 
<script>
 
<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() {
 
$(document).ready(function() {
  
 +
$("#HQ_page").attr('id','');
 +
 +
//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();
 +
});
 +
}
 +
 +
 +
//expand collapse functionality
 +
$(".collapsible_accordion_access").click(function(){
 +
$(this).toggleClass("displaying_content");
 +
$(this).parent().next().toggleClass("hide_content");
 +
});
 +
 +
//read more functionality
 
$(".read_more").click(function(){
 
$(".read_more").click(function(){
 
$(this).toggleClass("show_less");
 
$(this).toggleClass("show_less");
Line 74: Line 1,223:
 
});
 
});
  
 +
//if image_slider exists, activate the automatic rotation slider and functionality
 +
if ($("#image_carrousel").length){
 +
image_slider_rotation();
 +
}
 +
 +
 +
 +
//loading content ids
 +
 +
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");
 +
}
 +
 
});
 
});
 +
 +
 +
 +
 +
 +
// 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": case "alexanian":
 +
$("#HQ_info").show();
 +
break;
 +
 +
default:
 +
$("#HQ_info").hide();
 +
break;
 +
}
 +
   
 +
}
 +
 +
 +
 +
 +
//general menu functionality
 +
function menu_functionality() {
 +
 +
//accessing submenus and subsubmenus
 +
$(".submenu_access").click(function(){
 +
$(this).toggleClass("showing");
 +
$(this).next().fadeToggle(400);
 +
});
 +
 +
//mobile menu access
 +
$(".igem_mobile_menu_bar").click(function(){
 +
$(this).next().fadeToggle(400);
 +
});
 +
 +
}
 +
 +
 +
 +
//highlight current page in the menu
 +
function highlight_current_page_menu() {
 +
 +
var page_url="https://2019.igem.org/";
 +
 +
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");
 +
 +
// if sub menu has a sub sub menu - open it
 +
$(".with_subsub_menu.current_page").parent().next().toggleClass("showing");
 +
$(".with_subsub_menu.current_page").parent().next().next().fadeToggle(400);
 +
 +
break;
 +
 +
 +
 +
case 2:
 +
 +
//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");
 +
 +
 +
page_url ="https://2019.igem.org/";
 +
page_url = page_url +wgPageName.substring(0, wgPageName.lastIndexOf('/'));
 +
$("a[href$='"+page_url+"'] > .submenu_item").addClass("current_page");
 +
 +
$(".current_page").parent().next().toggleClass("showing");
 +
$(".current_page").parent().next().next().fadeToggle(400);
 +
 +
page_url ="https://2019.igem.org/";
 +
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;
 +
 +
 +
//constant rotation
 +
setInterval(function(){
 +
 +
slider_counter = $("ul.image_slider li.current_image").index()+1;
 +
 +
$("ul.image_slider li.current_image").removeClass("current_image");
 +
$("ul.image_number li.current_image_number").removeClass("current_image_number");
 +
 +
if( slider_counter  >= $('ul.image_slider li').length ){
 +
slider_counter = 1;
 +
} 
 +
else{
 +
slider_counter+=1;
 +
}
 +
 +
$("ul.image_slider li:nth-child("+slider_counter+")").addClass("current_image");
 +
$("ul.image_number li:nth-child("+slider_counter+")").addClass("current_image_number");
 +
 +
}, 5000);
 +
 +
 +
 +
//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");
 +
});
 +
 +
 +
 +
//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");
 +
$("ul.image_number li.current_image_number").removeClass("current_image_number");
 +
 +
 +
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");
 +
 +
});
 +
}
 +
 +
 +
 +
// load desired content function
 +
function load_these_items ( source_page , destination_div ) {
 +
 +
$("#"+destination_div ).load( source_page , function() { 
 +
});
 +
}
 +
  
 
</script>
 
</script>
Line 80: Line 1,434:
  
  
−
</html>
+
 
−
{{Footer2019}}
+
 
 +
 
 +
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 +
<!--HTML -->
 +
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 +
 
 +
<head>
 +
<meta name="viewport" content="width=device-width, initial-scale=1">
 +
</head>
 +
 
 +
 
 +
 
 +
 
 +
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 +
<!--MENU -->
 +
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 +
 
 +
 
 +
 
 +
<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>
 +
 
 +
 
 +
 
 +
 
 +
 
 +
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 +
<!-- CONTENT -->
 +
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 +
 
 +
 
 +
<div class="igem_content_wrapper">
 +
<div class=" igem_column_wrapper">
 +
 
 +
<div class="clear extra_space"></div>

Latest revision as of 18:02, 20 November 2019

Loading...