Difference between revisions of "Template:Main2019"
| (148 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
<html> | <html> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
<style> | <style> | ||
| − | |||
/**************************************************************************************************************************************************************************************************/ | /**************************************************************************************************************************************************************************************************/ | ||
| Line 216: | Line 6: | ||
/**************************************************************************************************************************************************************************************************/ | /**************************************************************************************************************************************************************************************************/ | ||
| − | + | #home_logo, #sideMenu, #sideMenu, #top_title, .patrollink {display:none;} | |
| − | #home_logo, #sideMenu | + | #content {margin-left:0px; margin-top:-7px; padding:0px; width:100%;} |
| − | + | body {background-color:white;} | |
| − | #content { | + | #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; } | + | |
| − | + | ||
| − | / | + | |
| − | + | ||
| − | + | ||
/**************************************************************************************************************************************************************************************************/ | /**************************************************************************************************************************************************************************************************/ | ||
| Line 268: | Line 53: | ||
#all_menu_items{ display:block;} | #all_menu_items{ display:block;} | ||
| + | |||
| + | |||
/*menu item styling // layer one*/ | /*menu item styling // layer one*/ | ||
| Line 297: | Line 84: | ||
.hub_icon img { | .hub_icon img { | ||
width:20px; | width:20px; | ||
| + | } | ||
| + | /*specification for hub icon title images*/ | ||
| + | .main_title_icon { | ||
| + | width:40px!important; | ||
} | } | ||
| Line 311: | Line 102: | ||
/*submenu and subsubmenus access button styling */ | /*submenu and subsubmenus access button styling */ | ||
.submenu_access { | .submenu_access { | ||
| − | background-color:#dcdcdc; | + | background-color: #dcdcdc; |
float: left; | float: left; | ||
font-size: 130%; | font-size: 130%; | ||
| Line 346: | Line 137: | ||
} | } | ||
| + | |||
| + | |||
| + | |||
/*submenu item styling // layer two*/ | /*submenu item styling // layer two*/ | ||
/**************************************************************************************************************************************************************************************************/ | /**************************************************************************************************************************************************************************************************/ | ||
| Line 379: | Line 173: | ||
.igem_submenu > .submenu_access { | .igem_submenu > .submenu_access { | ||
background-color: #e8e8e8; | background-color: #e8e8e8; | ||
| − | + | border-bottom: 1px solid #dcdcdc; | |
| − | + | padding: 8.5px 3% 11.5px 3%; | |
} | } | ||
| Line 402: | Line 196: | ||
/*for subsection titles */ | /*for subsection titles */ | ||
.submenu_item.subsection_title{ | .submenu_item.subsection_title{ | ||
| − | color: # | + | color: #000; |
| − | font-weight: | + | font-weight: 100; |
padding-left: 4%; | padding-left: 4%; | ||
} | } | ||
| + | |||
.submenu_item.subsection_title:hover{ | .submenu_item.subsection_title:hover{ | ||
background-color:#e8e8e8; | background-color:#e8e8e8; | ||
| Line 421: | Line 216: | ||
display:none; | display:none; | ||
} | } | ||
| − | |||
.subsubmenu_item { | .subsubmenu_item { | ||
| Line 438: | Line 232: | ||
} | } | ||
| + | |||
| + | |||
/*mobile menu bar styling*/ | /*mobile menu bar styling*/ | ||
/**************************************************************************************************************************************************************************************************/ | /**************************************************************************************************************************************************************************************************/ | ||
| Line 450: | Line 246: | ||
margin-top: 0; | margin-top: 0; | ||
padding: 5px 0; | padding: 5px 0; | ||
| + | position:fixed; | ||
width:100%; | width:100%; | ||
} | } | ||
| Line 475: | Line 272: | ||
} | } | ||
| + | |||
/**************************************************************************************************************************************************************************************************/ | /**************************************************************************************************************************************************************************************************/ | ||
| Line 480: | Line 278: | ||
/**************************************************************************************************************************************************************************************************/ | /**************************************************************************************************************************************************************************************************/ | ||
| + | |||
| + | |||
/* general wrapper for the content */ | /* general wrapper for the content */ | ||
.igem_content_wrapper { | .igem_content_wrapper { | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
background-color:white; | background-color:white; | ||
| + | display:block; | ||
| + | width:-webkit-calc(100% -270px); | ||
| + | width:-moz-calc(100% - 270px); | ||
| + | width:calc(100% - 270px); | ||
| + | |||
} | } | ||
| Line 501: | Line 301: | ||
/**************************************************************************************************************************************************************************************************/ | /**************************************************************************************************************************************************************************************************/ | ||
| − | |||
| − | |||
/*font sizes for all the h titles*/ | /*font sizes for all the h titles*/ | ||
.igem_content_wrapper h1 { font-size: 210%;} | .igem_content_wrapper h1 { font-size: 210%;} | ||
| − | .igem_content_wrapper h2 { font-size: | + | .igem_content_wrapper h2 { font-size: 190%;} |
.igem_content_wrapper h3 { font-size: 150%;} | .igem_content_wrapper h3 { font-size: 150%;} | ||
.igem_content_wrapper h4 { font-size: 140%;} | .igem_content_wrapper h4 { font-size: 140%;} | ||
| Line 529: | Line 327: | ||
color: #00a19c; | color: #00a19c; | ||
font-family: Freeroad_Bold; | font-family: Freeroad_Bold; | ||
| + | line-height: initial; | ||
padding: 5px 0px; | padding: 5px 0px; | ||
} | } | ||
| Line 535: | Line 334: | ||
.igem_content_wrapper h3, .igem_content_wrapper h4, .igem_content_wrapper h5, .igem_content_wrapper h6 { | .igem_content_wrapper h3, .igem_content_wrapper h4, .igem_content_wrapper h5, .igem_content_wrapper h6 { | ||
border-bottom:0px; | border-bottom:0px; | ||
| − | color: # | + | color: #212223; |
font-family: Freeroad_Regular; | font-family: Freeroad_Regular; | ||
| + | line-height: initial; | ||
padding: 5px 0px; | padding: 5px 0px; | ||
} | } | ||
| Line 564: | Line 364: | ||
.igem_content_wrapper a:hover { | .igem_content_wrapper a:hover { | ||
color: #13c0d7; | color: #13c0d7; | ||
| + | text-decoration:none; | ||
| + | } | ||
| + | |||
| + | /*for images that are href*/ | ||
| + | a.image_href{ | ||
text-decoration:none; | text-decoration:none; | ||
} | } | ||
| Line 569: | Line 374: | ||
/* non numbered lists */ | /* non numbered lists */ | ||
.igem_content_wrapper ul { | .igem_content_wrapper ul { | ||
| − | font-family: | + | font-family:Arial; |
| − | font-size: | + | font-size: 130%; |
| − | + | ||
list-style: disc; | list-style: disc; | ||
| + | padding:0px 20px; | ||
} | } | ||
/*font size specifications for nested lists and other special cases*/ | /*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 { | .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: | + | font-size: 75%; |
| + | margin-bottom: 10px; | ||
| + | line-height: 18px; | ||
} | } | ||
| Line 585: | Line 390: | ||
/* numbered lists */ | /* numbered lists */ | ||
.igem_content_wrapper ol { | .igem_content_wrapper ol { | ||
| + | font-family:Arial; | ||
| + | font-size: 130%; | ||
padding:0px; | padding:0px; | ||
| − | |||
| − | |||
} | } | ||
| Line 609: | Line 414: | ||
/* table headers */ | /* table headers */ | ||
.igem_content_wrapper th { | .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; | ||
} | } | ||
| − | |||
| − | |||
| − | |||
| − | |||
| Line 650: | Line 452: | ||
.two_thirds_size img, | .two_thirds_size img, | ||
.third_size img, | .third_size img, | ||
| − | . | + | .three_quarter_size img, |
.quarter_size img { | .quarter_size img { | ||
margin-bottom: 15px; | margin-bottom: 15px; | ||
| Line 660: | Line 462: | ||
clear:both; | clear:both; | ||
} | } | ||
| + | |||
/*add extra space to page break with clear class*/ | /*add extra space to page break with clear class*/ | ||
.clear.extra_space { | .clear.extra_space { | ||
| Line 667: | Line 470: | ||
/* horizontal gray line to divide the page*/ | /* horizontal gray line to divide the page*/ | ||
.line_divider { | .line_divider { | ||
| − | border-top: 1px solid # | + | border-top: 1px solid #848484; |
margin: auto; | margin: auto; | ||
width: 98%; | width: 98%; | ||
| + | } | ||
| + | |||
| + | .line_divider.dark { | ||
| + | border-top: 1px solid #000000; | ||
} | } | ||
| Line 675: | Line 482: | ||
/* softer horizontal gray line to divide the page*/ | /* softer horizontal gray line to divide the page*/ | ||
.line_divider.soft { | .line_divider.soft { | ||
| − | + | border-top: 1px solid #c1c1c1; | |
} | } | ||
| Line 690: | Line 497: | ||
background-color: #f2f2f2; | background-color: #f2f2f2; | ||
} | } | ||
| − | |||
.highlight.decoration_top { | .highlight.decoration_top { | ||
| Line 696: | Line 502: | ||
} | } | ||
| − | .highlight. | + | .highlight.decoration_red_top, .highlight.post_item.decoration_red_top { |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
border-top: 4px solid #F42534; | border-top: 4px solid #F42534; | ||
} | } | ||
| − | .highlight.decoration_full { | + | .highlight.decoration_full, .highlight.post_item.decoration_full { |
border: 4px solid #00a19c; | border: 4px solid #00a19c; | ||
} | } | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | .highlight.decoration_red_full { | + | .highlight.decoration_red_full, .highlight.post_item.decoration_red_full { |
border: 4px solid #F42534; | border: 4px solid #F42534; | ||
} | } | ||
| Line 739: | Line 522: | ||
/*special image that takes up the entire page*/ | /*special image that takes up the entire page*/ | ||
| − | .full_size_image { width:100%; margin-top: - | + | .full_size_image { |
| − | + | width:100%; | |
| + | margin-top: -60px; | ||
| + | } | ||
| Line 752: | Line 537: | ||
.button a { | .button a { | ||
| − | background-color: #00a19c; | + | background-color: #00a19c !important; |
color: #ffffff !important; | color: #ffffff !important; | ||
font-weight: bold; | font-weight: bold; | ||
margin: auto; | margin: auto; | ||
text-decoration: none !important; | text-decoration: none !important; | ||
| − | padding: 10px 15px; | + | padding: 10px 15px !important; |
} | } | ||
| Line 822: | Line 607: | ||
} | } | ||
| − | /* | + | /*image caption*/ |
/************************************************/ | /************************************************/ | ||
| − | .highlight. | + | .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; | 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:""; | 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:""; | 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:""; | 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:""; | 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; | 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 */ | /* center content */ | ||
| − | .center_content | + | p.center_content, |
| − | .center_content | + | h1.center_content, |
| − | .center_content | + | h2.center_content, |
| − | .center_content | + | h3.center_content, |
| − | .center_content | + | h4.center_content, |
| − | .center_content | + | h5.center_content, |
| − | .center_content | + | h6.center_content, |
| − | text-align:center; | + | img.center_content { |
| + | margin:auto; | ||
| + | text-align:center!important; | ||
} | } | ||
| Line 934: | Line 783: | ||
} | } | ||
| + | |||
| + | |||
/*Image slider/ | /*Image slider/ | ||
/************************************************/ | /************************************************/ | ||
| Line 1,015: | Line 866: | ||
| − | + | ||
/*Navigation support/ | /*Navigation support/ | ||
/************************************************/ | /************************************************/ | ||
| − | . | + | |
| − | + | ||
| + | .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; | ||
} | } | ||
| + | |||
.navigation_button { | .navigation_button { | ||
| − | + | border: 2px solid #c1c1c1; | |
| − | border: | + | 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; | text-align: center; | ||
| − | + | width: 30px; | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| Line 1,045: | Line 910: | ||
.navigation_button.arrow_navigation:hover { | .navigation_button.arrow_navigation:hover { | ||
| − | color: # | + | color: #00a19c; |
background-color: #ffffff; | background-color: #ffffff; | ||
border: 2px solid white; | border: 2px solid white; | ||
} | } | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
.navigation_button:hover, .title_extra:hover+.navigation_button, .navigation_button.active_navigation_button:hover { | .navigation_button:hover, .title_extra:hover+.navigation_button, .navigation_button.active_navigation_button:hover { | ||
| − | background-color: # | + | background-color: #00a19c; |
| + | border: 2px solid #00a19c; | ||
color: #ffffff; | color: #ffffff; | ||
| − | |||
} | } | ||
.navigation_button:hover+.title_extra, .title_extra:hover { | .navigation_button:hover+.title_extra, .title_extra:hover { | ||
| − | color: # | + | color: #00a19c; |
display:block; | display:block; | ||
} | } | ||
.navigation_button.active_navigation_button { | .navigation_button.active_navigation_button { | ||
| − | + | color: #00a19c; | |
| − | color: # | + | background-color: #f2f2f2; |
| − | border: 2px solid # | + | border: 2px solid #00a19c; |
} | } | ||
| − | + | ||
/*REVIEW THIS ANA*/ | /*REVIEW THIS ANA*/ | ||
.title_extra { | .title_extra { | ||
| − | color: # | + | color: #00a19c; |
| + | display:none; | ||
float:left; | float:left; | ||
| − | |||
margin-right: 20px; | margin-right: 20px; | ||
| − | + | padding: 7px 0px; | |
} | } | ||
| Line 1,094: | Line 951: | ||
.title_extra.support_item { | .title_extra.support_item { | ||
display:block; | display:block; | ||
| − | |||
margin-left: -17px; | margin-left: -17px; | ||
| + | margin-right:0px; | ||
} | } | ||
.title_extra.support_item:hover { | .title_extra.support_item:hover { | ||
| − | color: # | + | color: #00a19c; |
} | } | ||
| Line 1,108: | Line 965: | ||
| + | /*track navigation */ | ||
| + | /************************************************/ | ||
| + | |||
| + | .track_navigation{ | ||
| + | float:left; | ||
| + | width:8.33%; | ||
| + | } | ||
| + | |||
| + | .track_navigation> img { | ||
| + | opacity: 1.0; | ||
| + | } | ||
| + | |||
| + | |||
| + | .track_navigation> img:hover{ | ||
| + | opacity: 0.5; | ||
| + | } | ||
| + | |||
| + | |||
/*accordion */ | /*accordion */ | ||
/************************************************/ | /************************************************/ | ||
| Line 1,133: | Line 1,008: | ||
color: #ffffff !important; | color: #ffffff !important; | ||
float: right; | float: right; | ||
| − | margin-top: - | + | margin-top: -4px; |
text-align: center; | text-align: center; | ||
| − | padding: | + | padding: 5px 4px 0px 4px; |
| − | width: | + | width: 20px; |
} | } | ||
| Line 1,177: | Line 1,052: | ||
} | } | ||
| + | |||
| + | |||
| + | /*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*/ | /*mobile*/ | ||
/**************************************************************************************************************************************************************************************************/ | /**************************************************************************************************************************************************************************************************/ | ||
| Line 1,197: | Line 1,108: | ||
/************************************************/ | /************************************************/ | ||
@media only screen and (max-width: 1450px) { | @media only screen and (max-width: 1450px) { | ||
| + | |||
.hub_title{ font-size: 90%;} | .hub_title{ font-size: 90%;} | ||
.submenu_item {font-size:85%;} | .submenu_item {font-size:85%;} | ||
.subsubmenu_item {font-size:80%;} | .subsubmenu_item {font-size:80%;} | ||
| + | |||
} | } | ||
| + | |||
/* 1200px */ | /* 1200px */ | ||
/************************************************/ | /************************************************/ | ||
| − | |||
@media only screen and (max-width: 1200px) { | @media only screen and (max-width: 1200px) { | ||
| − | #content {width:100%; } | + | |
| + | #content {width:100%;} | ||
.igem_menu_wrapper {width:15%; right:0%;} | .igem_menu_wrapper {width:15%; right:0%;} | ||
| − | .load_menu_here, .menu_icon {display:none;} | + | .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%;} | .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{ padding-left: 16%; padding-right:0; font-size:75% } | ||
.submenu_item.with_subsub_menu{ width:68%;} | .submenu_item.with_subsub_menu{ width:68%;} | ||
.subsubmenu_item {font-size:70%;} | .subsubmenu_item {font-size:70%;} | ||
| + | .igem_column_wrapper{padding-top:0px;} | ||
| + | |||
} | } | ||
| + | |||
/* 1100px */ | /* 1100px */ | ||
/************************************************/ | /************************************************/ | ||
@media only screen and (max-width: 1100px) { | @media only screen and (max-width: 1100px) { | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
.igem_content_wrapper {width:100%; margin-left:0px;} | .igem_content_wrapper {width:100%; margin-left:0px;} | ||
| − | .half_size, .two_thirds_size, .third_size, .three_quarter_size, .quarter_size {width:100%; } | + | .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;} | .column img { width: 96%; padding: 2% 0px;} | ||
.highlight {padding:15px 5px;} | .highlight {padding:15px 5px;} | ||
.igem_menu { width: 100%; float: left; position: relative; max-width: 100%;} | .igem_menu { width: 100%; float: left; position: relative; max-width: 100%;} | ||
| − | .igem_mobile_menu_bar | + | .igem_mobile_menu_bar, .hub_icon {display:block;} |
| − | + | ||
.hub_title{ width: 68%; padding-left:0%} | .hub_title{ width: 68%; padding-left:0%} | ||
.igem_menu, .igem_menu_logo {display:none;} | .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> | ||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| + | <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',''); | ||
| + | |||
| + | //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(){ | ||
| + | $(this).toggleClass("show_less"); | ||
| + | $(this).prev(".read_more_text").fadeToggle(400); | ||
| + | }); | ||
| + | |||
| + | //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> | ||
| + | |||
| Line 1,264: | Line 1,457: | ||
<div class="igem_logo_mobile"> | <div class="igem_logo_mobile"> | ||
| − | <img src="https://static.igem.org/mediawiki/ | + | <img src="https://static.igem.org/mediawiki/2019/3/3c/Igem_mobile_menu_logo.svg"> |
</div> | </div> | ||
<div class="igem_menu_control_mobile"> | <div class="igem_menu_control_mobile"> | ||
| − | <img id="menu_control_image" src="https://static.igem.org/mediawiki/ | + | <img id="menu_control_image" src="https://static.igem.org/mediawiki/2019/2/25/Main_menu_icon.svg"> |
</div> | </div> | ||
| Line 1,300: | Line 1,493: | ||
<div class="igem_content_wrapper"> | <div class="igem_content_wrapper"> | ||
<div class=" igem_column_wrapper"> | <div class=" igem_column_wrapper"> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
<div class="clear extra_space"></div> | <div class="clear extra_space"></div> | ||
Latest revision as of 18:02, 20 November 2019
