Difference between revisions of "Template:Virginia"
| (119 intermediate revisions by 4 users not shown) | |||
| Line 1: | Line 1: | ||
<html> | <html> | ||
| − | <link href="http://fonts.googleapis.com/css?family=Lato:300|Grand+Hotel" rel="stylesheet" type="text/css" | + | <link href="http://fonts.googleapis.com/css?family=Lato:300|Grand+Hotel" rel="stylesheet" type="text/css"> |
<head> | <head> | ||
| Line 9: | Line 9: | ||
<link href="https://2017.igem.org/wiki/index.php?title=Team:Virginia/css/bootstrap.css&action=raw&ctype=text/css" type="text/css" rel="stylesheet"> | <link href="https://2017.igem.org/wiki/index.php?title=Team:Virginia/css/bootstrap.css&action=raw&ctype=text/css" type="text/css" rel="stylesheet"> | ||
| + | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> | ||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> | <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> | ||
<script type="text/javascript" src="https://2017.igem.org/wiki/index.php?title=Team:Virginia/js/bootstrap.min.js&action=raw&ctype=text/javascript"></script> | <script type="text/javascript" src="https://2017.igem.org/wiki/index.php?title=Team:Virginia/js/bootstrap.min.js&action=raw&ctype=text/javascript"></script> | ||
| + | |||
</head> | </head> | ||
| Line 95: | Line 97: | ||
}); | }); | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| + | /*********CHRISTIA'S SCRIPT**********/ | ||
| − | + | var acc = document.getElementsByClassName("accordion"); | |
| − | + | var i; | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| + | for (i = 0; i < acc.length; i++) { | ||
| + | acc[i].onclick = function(){ | ||
| + | /* Toggle between adding and removing the "active" class, | ||
| + | to highlight the button that controls the panel */ | ||
| + | this.classList.toggle("active"); | ||
| − | + | /* Toggle between hiding and showing the active panel */ | |
| − | + | var panel = this.nextElementSibling; | |
| − | + | if (panel.style.display === "block") { | |
| + | panel.style.display = "none"; | ||
| + | } else { | ||
| + | panel.style.display = "block"; | ||
| + | } | ||
| + | } | ||
} | } | ||
| + | |||
</script> | </script> | ||
| + | |||
| + | |||
| + | |||
<style> | <style> | ||
| + | div.panel { | ||
| + | padding: 0 18px; | ||
| + | background-color: white; | ||
| + | max-height: 0; | ||
| + | overflow: hidden; | ||
| + | transition: max-height 0.2s ease-out; | ||
| + | } | ||
| + | </style> | ||
| + | <script> | ||
| + | var acc = document.getElementsByClassName("accordion"); | ||
| + | var i; | ||
| + | |||
| + | for (i = 0; i < acc.length; i++) { | ||
| + | acc[i].onclick = function() { | ||
| + | this.classList.toggle("active"); | ||
| + | var panel = this.nextElementSibling; | ||
| + | if (panel.style.maxHeight){ | ||
| + | panel.style.maxHeight = null; | ||
| + | } else { | ||
| + | panel.style.maxHeight = panel.scrollHeight + "px"; | ||
| + | } | ||
| + | } | ||
| + | } | ||
| + | </script> | ||
| + | |||
| + | <style> | ||
| + | |||
| + | |||
| + | /***************************************************** CHRISTIA'S THINGS!!! :) :) ****************************************************/ | ||
| + | |||
| + | @font-face { | ||
| + | font-family: "Montserrat"; | ||
| + | src: url('Montserrat.regular.ttf'); | ||
| + | } | ||
| + | |||
| + | @font-face { | ||
| + | font-family: "Opensans"; | ||
| + | src: url('VirginiaOpenSansLight.ttf'); | ||
| + | } | ||
| + | |||
| + | @font-face { | ||
| + | font-family: "Montserrat-Medium"; | ||
| + | src: url('Montserrat-Medium.ttf'); | ||
| + | } | ||
| + | |||
| + | @font-face { | ||
| + | font-family: "Montserrat-Light"; | ||
| + | src: url('Montserrat-Light.ttf'); | ||
| + | } | ||
| + | |||
| + | @font-face { | ||
| + | font-family: "Montserrat-ExtraLight"; | ||
| + | src: url('Montserrat-ExtraLight.ttf'); | ||
| + | } | ||
| + | |||
| + | /* Style the buttons that are used to open and close the accordion panel */ | ||
| + | button.accordion { | ||
| + | background-color: #eee; | ||
| + | color: #444; | ||
| + | cursor: pointer; | ||
| + | padding: 18px; | ||
| + | width: 100%; | ||
| + | text-align: left; | ||
| + | border: none; | ||
| + | outline: none; | ||
| + | transition: 0.4s; | ||
| + | } | ||
| Line 231: | Line 204: | ||
#home_logo, #sideMenu { display:none; } | #home_logo, #sideMenu { display:none; } | ||
#sideMenu, #top_title, .patrollink {display:none;} | #sideMenu, #top_title, .patrollink {display:none;} | ||
| − | #content { width: | + | #content {width:100%; padding:0px; margin-left:0px; padding-top:30px;} |
body {background-color:white;} | body {background-color:white;} | ||
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; } | #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; } | ||
| − | # | + | #toggleID1{display:block; transition-duration: 0.4s;} #toggleID2{display:block; transition-duration: 0.4s;} #toggleID3{display:block; transition-duration: 0.4s;} #toggleID4{display:block; transition-duration: 0.4s;} |
| + | |||
| + | |||
| + | |||
| + | /***************************************************** SOCIAL MEDIA ICONS ****************************************************/ | ||
| + | |||
| + | .fa { | ||
| + | font-size: 30px; | ||
| + | width: 100px; | ||
| + | padding: 35px 0px; | ||
| + | text-align: center; | ||
| + | text-decoration: none; | ||
| + | margin: 5px 2px; | ||
| + | transition-duration: 0.4s; | ||
| + | } | ||
| + | |||
| + | .fa:hover { | ||
| + | background: black; | ||
| + | color: #9DCDC3; | ||
| + | } | ||
| + | |||
| + | .fa-facebook { | ||
| + | background: #9DCDC3; | ||
| + | color: black; | ||
| + | } | ||
| + | .fa-envelope { | ||
| + | background: #9DCDC3; | ||
| + | color: black; | ||
| + | } | ||
| Line 241: | Line 242: | ||
/* Wrapper for the content */ | /* Wrapper for the content */ | ||
.igem_2017_content_wrapper { | .igem_2017_content_wrapper { | ||
| − | width: | + | width: 100%; |
| − | padding: 30px 20px | + | padding: 30px 100px 20px 100x |
display:block; | display:block; | ||
float:left; | float:left; | ||
| − | background-color: # | + | background-color: #FFFFFF; /* TAG::BKGD */ |
font-family:Tahoma, Geneva, sans-serif; | font-family:Tahoma, Geneva, sans-serif; | ||
} | } | ||
| − | |||
/********************************* HTML STYLING *********************************/ | /********************************* HTML STYLING *********************************/ | ||
| − | /* styling for the titles h1 | + | /* styling for the titles h1 */ |
.igem_2017_content_wrapper h1, .igem_2017_content_wrapper h2 { | .igem_2017_content_wrapper h1, .igem_2017_content_wrapper h2 { | ||
padding:5px 15px; | padding:5px 15px; | ||
border-bottom: 0px; | border-bottom: 0px; | ||
| − | font-family: ' | + | font-size:50px; |
| − | font- | + | font-family: 'Montserrat', sans-serif; |
| − | color: # | + | color:#9BC2C9; /* TAG::LETTERS */ |
| + | } | ||
| + | |||
| + | /* styling for the titles h2 */ | ||
| + | .igem_2017_content_wrapper h2 { | ||
| + | padding:20px 15px; | ||
| + | border-bottom: 0px; | ||
| + | font-size:27px | ||
| + | font-family: 'Montserrat', sans-serif; | ||
| + | color: #9DCDC3; /* TAG::LETTERS */ | ||
} | } | ||
| Line 268: | Line 277: | ||
border-bottom:0px; | border-bottom:0px; | ||
/* font-family: Helvetica, Geneva, sans-serif; */ | /* font-family: Helvetica, Geneva, sans-serif; */ | ||
| − | font-family: ' | + | font-family: 'Montserrat-Medium', sans-serif; |
| − | + | color: #36454F; /* TAG::LETTERS */ | |
| − | color: # | + | |
} | } | ||
| − | + | /*Christia's Title Heading*/ | |
| − | + | .igem_2017_content_wrapper h2017{ | |
| − | + | padding:100px 100px; } | |
| Line 281: | Line 289: | ||
.igem_2017_content_wrapper p { | .igem_2017_content_wrapper p { | ||
padding: 0px 25px; | padding: 0px 25px; | ||
| − | font-size: | + | font-size: 18px; |
font-family: 'Lato', sans-serif; | font-family: 'Lato', sans-serif; | ||
| − | color: # | + | color: #36454F; /* TAG::LETTERS */ |
} | } | ||
| − | + | .igem_2017_content_wrapper pt { | |
| − | .igem_2017_content_wrapper | + | font-weight: bold; |
| − | + | font-size: 24px; | |
| − | font-size: | + | |
font-family: 'Lato', sans-serif; | font-family: 'Lato', sans-serif; | ||
| − | color: # | + | color: #36454F; /* TAG::LETTERS */ |
} | } | ||
| Line 299: | Line 306: | ||
font-size: 16px; | font-size: 16px; | ||
font-family: 'Lato', sans-serif; | font-family: 'Lato', sans-serif; | ||
| − | color: # | + | color: #9DCDC3; |
text-decoration: none; | text-decoration: none; | ||
-webkit-transition: all 0.4s ease; | -webkit-transition: all 0.4s ease; | ||
| Line 309: | Line 316: | ||
.igem_2017_content_wrapper a:visited { | .igem_2017_content_wrapper a:visited { | ||
| − | color: # | + | color: #9DCDC3; |
} | } | ||
| Line 323: | Line 330: | ||
font-size: 18px; | font-size: 18px; | ||
font-family:'Lato', sans-serif; | font-family:'Lato', sans-serif; | ||
| − | color: # | + | color: #36454F; /* TAG::LETTERS */ |
} | } | ||
| Line 331: | Line 338: | ||
font-size: 18px; | font-size: 18px; | ||
font-family:'Lato', sans-serif; | font-family:'Lato', sans-serif; | ||
| − | color: # | + | color: #36454F; /* TAG::LETTERS */ |
} | } | ||
| Line 338: | Line 345: | ||
width: 97%; | width: 97%; | ||
margin:15px 10px; | margin:15px 10px; | ||
| − | border: 1px solid # | + | border: 1px solid #36454F; |
border-collapse: collapse; | border-collapse: collapse; | ||
} | } | ||
| Line 346: | Line 353: | ||
padding: 10px; | padding: 10px; | ||
vertical-align: text-top; | vertical-align: text-top; | ||
| − | border: 1px solid # | + | border: 1px solid #36454F; |
border-collapse: collapse; | border-collapse: collapse; | ||
} | } | ||
| Line 354: | Line 361: | ||
padding: 10px; | padding: 10px; | ||
vertical-align: text-top; | vertical-align: text-top; | ||
| − | border: 1px solid # | + | border: 1px solid #36454F; |
border-collapse: collapse; | border-collapse: collapse; | ||
| − | background-color:# | + | background-color:#c9ede5; |
} | } | ||
| Line 385: | Line 392: | ||
/* styling for images in a half width column*/ | /* styling for images in a half width column*/ | ||
.column.half_size img { | .column.half_size img { | ||
| − | width: | + | width: 100%; |
padding: 10px 15px; | padding: 10px 15px; | ||
} | } | ||
| + | /* class for a third width column */ | ||
| + | .column.third_size { | ||
| + | width: 33%; | ||
| + | } | ||
| + | } | ||
| + | /* styling for images in a third width column*/ | ||
| + | .column.third_size img { | ||
| + | width: 94.5%; | ||
| + | padding: 10px 15px; | ||
| + | } | ||
| + | |||
| + | /* class for a fifth width column */ | ||
| + | .column.fifth_size { | ||
| + | width: 20%; | ||
| + | } | ||
| + | |||
/********************************* SUPPORT CLASSES ********************************/ | /********************************* SUPPORT CLASSES ********************************/ | ||
| Line 398: | Line 421: | ||
} | } | ||
| − | + | ||
/* adds extra spacing when clearing content */ | /* adds extra spacing when clearing content */ | ||
.igem_2017_content_wrapper .clear.extra_space { | .igem_2017_content_wrapper .clear.extra_space { | ||
height: 30px; | height: 30px; | ||
} | } | ||
| − | |||
/* highlight class, makes content slightly smaller */ | /* highlight class, makes content slightly smaller */ | ||
| Line 410: | Line 432: | ||
padding: 15px 0px; | padding: 15px 0px; | ||
} | } | ||
| − | |||
/* highlight class, adds a gray background */ | /* highlight class, adds a gray background */ | ||
| Line 419: | Line 440: | ||
/* highlight with decoration blue line on top */ | /* highlight with decoration blue line on top */ | ||
.igem_2017_content_wrapper .highlight.blue_top { | .igem_2017_content_wrapper .highlight.blue_top { | ||
| − | + | border-top: 4px solid #3399ff; | |
} | } | ||
/* highlight with a full blue border decoration */ | /* highlight with a full blue border decoration */ | ||
.igem_2017_content_wrapper .highlight.blue_border { | .igem_2017_content_wrapper .highlight.blue_border { | ||
| − | + | border: 4px solid #3399ff; | |
} | } | ||
| Line 433: | Line 454: | ||
margin: 30px auto; | margin: 30px auto; | ||
padding: 12px 10px; | padding: 12px 10px; | ||
| − | + | background-color: #3399ff; | |
| − | + | text-align: center; | |
color: #ffffff; | color: #ffffff; | ||
-webkit-transition: all 0.4s ease; | -webkit-transition: all 0.4s ease; | ||
| Line 442: | Line 463: | ||
} | } | ||
| − | /* toggle class */ | + | /* toggle button class */ |
.igem_2017_content_wrapper .toggle{ | .igem_2017_content_wrapper .toggle{ | ||
max-width: 35%; | max-width: 35%; | ||
margin: 20px auto; | margin: 20px auto; | ||
padding: 12px 10px; | padding: 12px 10px; | ||
| − | + | background-color: #9DCDC3; | |
| − | + | cursor: pointer; | |
| − | + | text-align: center; | |
| − | + | ||
| + | font-weight: bold; | ||
| + | font-size: 24px; | ||
| + | font-family: 'Lato', sans-serif; | ||
| + | color: #36454F; /* TAG::LETTERS */ | ||
-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 460: | Line 485: | ||
.igem_2017_content_wrapper .button:hover{ | .igem_2017_content_wrapper .button:hover{ | ||
background-color: #3399ff; | background-color: #3399ff; | ||
| − | + | color: #000000; | |
| + | } | ||
| + | |||
| + | /* styling for toggle button on hover */ | ||
| + | .igem_2017_content_wrapper .toggle:hover{ | ||
| + | background: black; | ||
| + | color: #9DCDC3; | ||
} | } | ||
| − | |||
/* special class that the system uses to make sure the team wants a page to be evaluated */ | /* special class that the system uses to make sure the team wants a page to be evaluated */ | ||
.judges-will-not-evaluate { | .judges-will-not-evaluate { | ||
| − | + | width: 96.6%; | |
margin: 5px 15px; | margin: 5px 15px; | ||
display: block; | display: block; | ||
border: 4px solid #3399ff; | border: 4px solid #3399ff; | ||
| − | + | font-weight: bold; | |
} | } | ||
</style> | </style> | ||
| + | <script> | ||
| + | function toggleDiv(strArg) { | ||
| + | var x = document.getElementById(strArg); | ||
| + | if (x.style.display === 'none') { | ||
| + | x.style.display = 'block'; | ||
| + | } else { | ||
| + | x.style.display = 'none'; | ||
| + | } | ||
| + | } | ||
| + | </script> | ||
| + | |||
| + | </script> | ||
<!--- THIS IS WHERE THE HTML BEGINS ---> | <!--- THIS IS WHERE THE HTML BEGINS ---> | ||
| Line 497: | Line 539: | ||
<li><a href="/Team:Virginia/Team">Team</a></li> | <li><a href="/Team:Virginia/Team">Team</a></li> | ||
<li><a href="/Team:Virginia/Collaborations">Collaborations</a></li> | <li><a href="/Team:Virginia/Collaborations">Collaborations</a></li> | ||
| + | <li><a href="/Team:Virginia/Attributions">Attributions</a></li> | ||
</ul> | </ul> | ||
</li> | </li> | ||
| Line 506: | Line 549: | ||
<li><a href="/Team:Virginia/Description">Description</a></li> | <li><a href="/Team:Virginia/Description">Description</a></li> | ||
<li><a href="/Team:Virginia/Design">Design</a></li> | <li><a href="/Team:Virginia/Design">Design</a></li> | ||
| − | |||
| − | |||
| − | |||
<li><a href="/Team:Virginia/Model">Model</a></li> | <li><a href="/Team:Virginia/Model">Model</a></li> | ||
| − | <li><a href="/Team:Virginia/ | + | <li><a href="/Team:Virginia/Part_Collection">Parts</a></li> |
<li><a href="/Team:Virginia/Improve">Improve</a></li> | <li><a href="/Team:Virginia/Improve">Improve</a></li> | ||
| − | + | <li><a href="/Team:Virginia/Results">Results</a></li> | |
| + | |||
| + | </ul> | ||
| + | </li> | ||
| + | |||
| + | |||
| + | |||
| + | <li class="dropdown"> | ||
| + | <a class="dropdown-toggle" data-toggle="dropdown" href="#">Documentation | ||
| + | <span class="caret"></span></a> | ||
| + | <ul class="dropdown-menu"> | ||
<li><a href="/Team:Virginia/Notebook">Notebook</a></li> | <li><a href="/Team:Virginia/Notebook">Notebook</a></li> | ||
| + | <li><a href="/Team:Virginia/InterLab">InterLab</a></li> | ||
| + | <li><a href="/Team:Virginia/Safety">Safety</a></li> | ||
| + | <li><a href="/Team:Virginia/Experiments">Protocols</a></li> | ||
| + | <li><a href="/Team:Virginia/MedalCriteria">Medal Criteria</a></li> | ||
</ul> | </ul> | ||
</li> | </li> | ||
| − | <li><a href="#"> | + | |
| − | <li><a href=" | + | <li class="dropdown"> |
| + | <a class="dropdown-toggle" data-toggle="dropdown" href="#">Human Practices | ||
| + | <span class="caret"></span></a> | ||
| + | <ul class="dropdown-menu"> | ||
| + | <li><a href="/Team:Virginia/Engagement">Public Engagement</a></li> | ||
| + | <li><a href="/Team:Virginia/HP/SilverGold">Integrated Human Practices</a></li> | ||
| + | </ul> | ||
| + | </li> | ||
| + | |||
| + | <li><a href="https://igem.org/2017_Judging_Form?team=Virginia">Judging</a></li> | ||
| + | |||
| + | </ul> | ||
| + | </li> | ||
| + | |||
| + | |||
| + | |||
</ul> | </ul> | ||
</div> | </div> | ||
| Line 528: | Line 597: | ||
<!-- start of content --> | <!-- start of content --> | ||
<div class="igem_2017_content_wrapper"> | <div class="igem_2017_content_wrapper"> | ||
| + | <br> | ||
Latest revision as of 06:18, 1 November 2017
