(114 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
<html> | <html> | ||
+ | <style> | ||
− | + | /********************************* DEFAULT WIKI SETTINGS ********************************/ | |
− | + | #sideMenu, #top_title {display:none;} | |
− | + | #content { padding:0px; width:100%; margin-top: 0px; margin-left:0px;} | |
+ | body {background-color:#ffffff; } | ||
+ | #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; margin-top: 0px} | ||
− | + | /********************************* MENU ********************************/ | |
− | + | /*********************new menu formatting*******************/ | |
− | + | .menu-wrap { | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
width:100%; | width:100%; | ||
− | background:# | + | background:#000000; |
position:relative; | position:relative; | ||
} | } | ||
.menu { | .menu { | ||
− | margin-top:- | + | margin-top:-10px; |
padding:0; | padding:0; | ||
position: fixed; | position: fixed; | ||
Line 120: | Line 26: | ||
left: 0px; | left: 0px; | ||
width:100%; | width:100%; | ||
− | background:# | + | background:#000000; |
+ | opacity: 0.9 | ||
} | } | ||
Line 131: | Line 38: | ||
transition:all linear 0.15s; | transition:all linear 0.15s; | ||
padding:10px; | padding:10px; | ||
− | color:# | + | color:#ffffff; |
} | } | ||
Line 147: | Line 54: | ||
menu > ul { | menu > ul { | ||
white-space: nowrap; | white-space: nowrap; | ||
+ | margin: 0; | ||
} | } | ||
Line 164: | Line 72: | ||
.menu > ul > li:hover > a, .menu > ul > .current-item > a { | .menu > ul > li:hover > a, .menu > ul > .current-item > a { | ||
− | background:# | + | background:#2cb1b4; |
+ | font-weight: bold; | ||
} | } | ||
Line 180: | Line 89: | ||
transition:opacity linear 0.15s; | transition:opacity linear 0.15s; | ||
box-shadow:0px 2px 3px rgba(0,0,0,0.2); | box-shadow:0px 2px 3px rgba(0,0,0,0.2); | ||
− | background:# | + | background:#000000; |
display:none; | display:none; | ||
z-index:1; | z-index:1; | ||
Line 197: | Line 106: | ||
.sub-menu li a:hover, .sub-menu .current-item a { | .sub-menu li a:hover, .sub-menu .current-item a { | ||
text-color:#000000; | text-color:#000000; | ||
− | background:# | + | background:#1a61db; |
+ | font-weight: bold; | ||
} | } | ||
Line 249: | Line 159: | ||
.plus::before { | .plus::before { | ||
content:"✊"; | content:"✊"; | ||
− | color:# | + | color:#1a61db; |
} | } | ||
/* this is the icon for when the content is expanded */ | /* this is the icon for when the content is expanded */ | ||
.less::before { | .less::before { | ||
content: "✌"; | content: "✌"; | ||
− | color:# | + | color:#1a61db; |
} | } | ||
Line 336: | Line 246: | ||
.submenu li a:hover { | .submenu li a:hover { | ||
background-color:#000000; | background-color:#000000; | ||
− | color: # | + | color: #1ab9db; |
} | } | ||
Line 348: | Line 258: | ||
text-align:center; | text-align:center; | ||
font-weight:bold; | font-weight:bold; | ||
− | color:# | + | color:#1ab9db; |
cursor:pointer; | cursor:pointer; | ||
-webkit-transition: all 0.4s ease; | -webkit-transition: all 0.4s ease; | ||
Line 359: | Line 269: | ||
/* when hovering on that button */ | /* when hovering on that button */ | ||
.collapsable_menu_control:hover { | .collapsable_menu_control:hover { | ||
− | background-color: # | + | background-color: #1a61db; |
color:#000000; | color:#000000; | ||
} | } | ||
− | |||
+ | /********************************* CONTENT OF THE PAGE ********************************/ | ||
− | /* | + | /* Wrapper for the content */ |
− | + | .background { | |
− | . | + | background-color: #FFFFFF; |
− | + | } | |
− | + | .content_wrapper { | |
− | + | width: 100%; | |
+ | margin-left: 0px; | ||
+ | margin-right: 0px; | ||
+ | margin-top: 10px; | ||
+ | padding: 0px 0px; | ||
+ | float: left; | ||
} | } | ||
+ | /*LAYOUT */ | ||
+ | .column { | ||
+ | width: 100%; | ||
+ | margin-left: auto ; | ||
+ | margin-right: auto ; | ||
+ | margin-top: 20px; | ||
+ | } | ||
− | /* styling for the titles | + | .full_size{ |
− | . | + | width:80%; |
− | padding: | + | } |
+ | |||
+ | .full_size_outer{ | ||
+ | width:80%; | ||
+ | background: #ffffff; | ||
+ | } | ||
+ | |||
+ | /* only use inside .full_size_outer */ | ||
+ | .full_size_inner{ | ||
+ | width:100%; | ||
+ | } | ||
+ | |||
+ | .full_size img { | ||
+ | padding: 10px 0px; | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | .seventh_size { | ||
+ | width: 14.28%; | ||
+ | text-align: center; | ||
+ | float:left; | ||
+ | } | ||
+ | |||
+ | .sixth_size{ | ||
+ | width: 20%; | ||
+ | text-align: center; | ||
+ | float:left; | ||
+ | } | ||
+ | |||
+ | .fifth_size { | ||
+ | width: 20%; | ||
+ | text-align:center; | ||
+ | float:left; | ||
+ | } | ||
+ | .half_size { | ||
+ | width: 50%; | ||
+ | float:left; | ||
+ | } | ||
+ | .half_size img { | ||
+ | padding: 0px 15px; | ||
+ | width: 93%; | ||
+ | } | ||
+ | |||
+ | |||
+ | .clear { | ||
+ | clear:both; | ||
+ | } | ||
+ | |||
+ | .highlight { | ||
+ | width: 100%; | ||
+ | margin: auto; | ||
+ | padding: 0px 5px; | ||
+ | background-color: #f2f2f2; | ||
+ | } | ||
+ | |||
+ | .judges-will-not-evaluate { | ||
+ | border: 4px solid #1a61db; | ||
+ | display: block; | ||
+ | margin: 5px 15px; | ||
+ | width: 95%; | ||
+ | font-weight:bold; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | /*STYLING */ | ||
+ | |||
+ | /* styling for the titles */ | ||
+ | .content_wrapper h1 { | ||
+ | padding: 0px 15px; | ||
+ | border-bottom:0px; | ||
+ | color:#1ab9db; | ||
+ | font-family: 'Georgia', serif; | ||
+ | |||
+ | } | ||
+ | .content_wrapper h2 { | ||
+ | padding: 20px 20px; | ||
+ | border-bottom:0px; | ||
+ | color:#1ab9db; | ||
+ | font-family: 'Georgia', serif; | ||
+ | font-size: 40px; | ||
+ | |||
+ | } | ||
+ | .content_wrapper h3 { | ||
+ | padding: 7px 15px; | ||
+ | border-bottom:0px; | ||
+ | color: #1ab9db; | ||
+ | font-family: 'Georgia', serif; | ||
+ | font-size: 30px; | ||
+ | } | ||
+ | .content_wrapper h4, .content_wrapper h5, .content_wrapper h6 { | ||
+ | padding: 1px 15px; | ||
border-bottom:0px; | border-bottom:0px; | ||
− | color: # | + | color: #1ab9db; |
+ | font-family: 'Georgia', serif; | ||
+ | font-size: 20px; | ||
} | } | ||
/* font and text */ | /* font and text */ | ||
− | . | + | .content_wrapper p { |
− | padding: | + | padding:1px 15px; |
− | font-size: | + | font-size: 17px; |
+ | font-family:'Georgia', serif; | ||
} | } | ||
/* Links */ | /* Links */ | ||
− | . | + | .content_wrapper a { |
− | font-weight: bold; | + | font-weight: bold; |
+ | font-family:'Georgia', serif; | ||
text-decoration: underline; | text-decoration: underline; | ||
− | text-decoration-color: # | + | text-decoration-color:#1ab9db; |
− | color: | + | color: #1ab9db; |
-webkit-transition: all 0.4s ease; | -webkit-transition: all 0.4s ease; | ||
-moz-transition: all 0.4s ease; | -moz-transition: all 0.4s ease; | ||
Line 403: | Line 420: | ||
/* hover for the links */ | /* hover for the links */ | ||
− | . | + | .content_wrapper a:hover { |
text-decoration:none; | text-decoration:none; | ||
− | color:# | + | color:#ff0000; |
} | } | ||
/* non numbered lists */ | /* non numbered lists */ | ||
− | . | + | .content_wrapper ul { |
− | padding: | + | padding:1px 15px; |
− | font-size: | + | font-size: 17px; |
− | font-family: | + | font-family:'Georgia', serif; |
} | } | ||
/* numbered lists */ | /* numbered lists */ | ||
− | . | + | .content_wrapper ol { |
− | padding: | + | padding:1px 15px; |
− | font-size: | + | font-size: 17px; |
− | font-family: | + | font-family:'Georgia', serif; |
} | } | ||
/* Table */ | /* Table */ | ||
− | . | + | .content_wrapper table { |
− | width: | + | width: 100%; |
− | margin: | + | margin: 0px 0px; |
− | border: 1px solid # | + | border: 1px solid #FFFFFF; |
border-collapse: collapse; | border-collapse: collapse; | ||
} | } | ||
/* table cells */ | /* table cells */ | ||
− | . | + | .content_wrapper td { |
− | padding: | + | padding: 0px; |
vertical-align: text-top; | vertical-align: text-top; | ||
− | border: 1px solid # | + | border: 1px solid #FFFFFF; |
border-collapse: collapse; | border-collapse: collapse; | ||
} | } | ||
/* table headers */ | /* table headers */ | ||
− | . | + | .content_wrapper th { |
− | padding: | + | padding: 0px; |
vertical-align: text-top; | vertical-align: text-top; | ||
− | border: 1px solid # | + | border: 1px solid #FFFFFF; |
border-collapse: collapse; | border-collapse: collapse; | ||
background-color:#f2f2f2; | background-color:#f2f2f2; | ||
} | } | ||
− | + | /* Button class */ | |
− | + | .button_click { | |
− | + | margin: 10px auto; | |
− | /* | + | padding: 15px; width:12%; |
− | . | + | text-align:center; |
− | + | font-weight:bold; | |
− | + | font-family:'Georgia', serif; | |
− | + | background-color: #1ab9db; | |
− | + | cursor:pointer; | |
− | + | -webkit-transition: all 0.4s ease; | |
− | + | -moz-transition: all 0.4s ease; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | padding: | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | -webkit-transition: all 0.4s ease; | + | |
− | + | ||
-ms-transition: all 0.4s ease; | -ms-transition: all 0.4s ease; | ||
− | -o-transition: all 0.4s ease; transition: all 0.4s ease; | + | -o-transition: all 0.4s ease; |
+ | transition: all 0.4s ease; | ||
} | } | ||
− | /* | + | /* button class on hover */ |
− | . | + | .button_click:hover { |
− | background-color: # | + | background-color:#000000; |
− | + | color:#1ab9db; | |
} | } | ||
+ | /********************************* RESPONSIVE STYLING ********************************/ | ||
+ | /* IF THE SCREEN IS LESS THAN 1000PX */ | ||
− | + | @media only screen and (max-width: 1000px) { | |
− | + | ||
− | + | ||
− | @media only screen and (max-width: | + | |
#content {width:100%; } | #content {width:100%; } | ||
− | . | + | .menu_wrapper {width:15%;} |
+ | .content_wrapper {margin-left: 15%;} | ||
+ | .menu_item {display:block;} | ||
+ | .icon {display:none;} | ||
.highlight {padding:10px 0px;} | .highlight {padding:10px 0px;} | ||
− | |||
− | |||
− | |||
− | |||
} | } | ||
− | |||
− | |||
− | + | /* IF THE SCREEN IS LESS THAN 680PX */ | |
− | . | + | |
− | .column.half_size | + | @media only screen and (max-width: 680px) { |
− | .column | + | .collapsable_menu_control { display:block;} |
+ | .menu_item {display:none;} | ||
+ | .menu_wrapper { width:100%; height: 15%; position:relative;} | ||
+ | .content_wrapper {width:100%; margin-left:0px;} | ||
+ | .column.half_size {width:100%; } | ||
+ | .column img { width: 100%; padding: 5px 0px;} | ||
+ | .icon {display:block;} | ||
.highlight {padding:15px 5px;} | .highlight {padding:15px 5px;} | ||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
</style> | </style> | ||
− | |||
+ | <!--- THIS IS WHERE THE HTML BEGINS ---> | ||
− | |||
− | + | <!-- This tells the browser that your page is responsive --> | |
− | + | ||
− | < | + | <div class="menu_wrap" > |
+ | <nav class="menu"> | ||
+ | <ul class="clearfix"> | ||
+ | <li><a href="https://2017.igem.org/Team:Austin_UTexas">HOME</a></li> | ||
− | < | + | <li> <a href="">TEAM <span class="arrow">▼</span></a> |
+ | <ul class="sub-menu"> | ||
+ | <li> <a href="https://2017.igem.org/Team:Austin_UTexas/Team">Meet the Team!</a> </li> | ||
+ | <li> <a href="https://2017.igem.org/Team:Austin_UTexas/Collaborations"> Collaborations </a> </li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="">PROJECT <span class="arrow">▼</span></a> | ||
+ | <ul class="sub-menu"> | ||
+ | <li> <a href="https://2017.igem.org/Team:Austin_UTexas/Description">Description </a></li> | ||
+ | <li> <a href="https://2017.igem.org/Team:Austin_UTexas/Results">Results</a></li> | ||
+ | <li> <a href="https://2017.igem.org/Team:Austin_UTexas/Protocols">Protocols</a></li> | ||
+ | <li> <a href="https://2017.igem.org/Team:Austin_UTexas/InterLab">InterLab</a></li> | ||
+ | <li> <a href="https://2017.igem.org/Team:Austin_UTexas/Model">Model</a></li> | ||
+ | <li> <a href="https://2017.igem.org/Team:Austin_UTexas/Demonstrate">Demonstrate</a></li> | ||
+ | <li> <a href="https://2017.igem.org/Team:Austin_UTexas/Improve">Improve</a></li> | ||
+ | <li> <a href="https://2017.igem.org/Team:Austin_UTexas/Attributions">Attributions</a></li> | ||
+ | </ul> | ||
+ | <li > <a href="https://2017.igem.org/Team:Austin_UTexas/Parts">PARTS</a> | ||
− | |||
− | |||
− | |||
+ | <li> <a href="https://2017.igem.org/Team:Austin_UTexas/Safety"> SAFETY </a> </li> | ||
− | |||
− | |||
− | |||
− | |||
− | + | <li> <a href=""> HUMAN PRACTICES<span class="arrow">▼</span></a> | |
− | + | <ul class="sub-menu"> | |
+ | <li> <a href="https://2017.igem.org/Team:Austin_UTexas/HP/Silver">Silver HP</a></li> | ||
+ | <li> <a href="https://2017.igem.org/Team:Austin_UTexas/HP/Gold_Integrated">Integrated and Gold</a>></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | |||
+ | </ul> | ||
+ | </nav> | ||
+ | </div> | ||
+ | <div class="content_wrapper"> | ||
− | + | <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 ( wgPageName.substring( 0, 8) == "Template") { // if the page is a template it displays the full name in a single line | |
− | + | $("#team_name").html( wgPageName ); | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | else if ( ( (wgPageName.match(/\//g) || []).length ) == 0 ) { // if it is the home page , just print the team's name | ||
+ | } | ||
− | + | else { | |
− | + | // this adds the team's name as an h1 | |
+ | $("#team_name").html( wgPageName.substring( 5 , wgPageName.indexOf("/") ) ); | ||
− | + | // this adds the page's title as an h4 | |
− | + | $("#page_name").html ( ( wgPageName.substring( wgPageName.indexOf("/") + 1, wgPageName.length ) ).replace( /\/|_/g , " ") ); | |
− | + | } | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
+ | $('#accordion').find('.menu_item').click(function(){ | ||
− | + | //Expand or collapse this panel | |
− | + | submenu = $(this).find('.submenu'); | |
− | + | submenu.toggle(); | |
− | + | ||
− | + | ||
− | + | icon = $(this).find('.icon'); | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | if ( !$( submenu ).is(':visible') ) { | |
− | + | icon.removeClass("less").addClass("plus"); | |
− | + | } | |
− | + | else { | |
− | + | icon.removeClass("plus").addClass("less"); | |
+ | } | ||
− | + | //Hide the other panels | |
− | + | $(".submenu").not(submenu).hide(); | |
− | + | $(".icon").not(icon).removeClass("less").addClass("plus"); | |
− | + | }); | |
− | + | ||
− | |||
− | |||
− | |||
− | |||
− | |||
+ | $(".collapsable_menu_control").click(function() { | ||
+ | $(".menu_item").toggle(); | ||
+ | }); | ||
− | + | $( window ).resize(function() { | |
− | + | $(".menu_item").show(); | |
− | + | }); | |
− | + | ||
− | + | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | }); | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | </script> | |
− | + | </html> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + |
Latest revision as of 22:55, 1 November 2017