Team:Exeter/Integrated Practices/Equ Div
</div></div></div></div></div>
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body> <style type="text/css">
@media (max-width: 920px) {
.navbar-header {
float: none;
}
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
box-shadow: inset 0 0 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in{
display:block !important;
}
#soc_1, #soc_2, #soc_3{
display:none;
}
}
- links{
color:#47BCC2; /*font-size:20px;*/ font-size:1.2vw; margin:0 0.9vw 0.5vh 0.9vw; padding:0; line-height:0px; padding-top:28px; } /*Fixes font size when nav-bar is collapsed*/ @media (max-width: 920px) { #links{ font-size:20px; }
- links_drop{
margin:0.9vw -0.4vw 0 -0.2vw; } }
- links:hover{
color:#339499; }
- links:active{
color:#339499; } .navbar{ background-color:#e8e8e8; border-bottom:none; min-height:54px;
margin:4px 0 0 0;
}
.navbar-inverse .navbar-toggle .icon-bar {/*teal toggle */
background-color:#47BCC2;
} .navbar-inverse .navbar-toggle { /*Removes toggle bobrder*/ border:none; background-color:#e8e8e8; } .navbar-inverse .navbar-toggle{ /*Removes toggle bobrder*/ border:none; background-color:#e8e8e8; } .navbar-inverse .navbar-toggle collapse{ /*Removes toggle bobrder*/ border:none; background-color:#e8e8e8; } .navbar-inverse .navbar-toggle:hover { background-color:#47BCC2; } .navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover {
background-color:#47BCC2;
} .navbar-inverse .navbar-toggle:hover .icon-bar, .navbar-inverse .navbar-toggle:focus .icon-bar{ background-color:#eeeeee; } /*soc classes controll css for media icons*/
- soc{
margin-top:-12px; margin-left:-15px; } .soc_1{ margin-right:3px; } .soc_2{ margin-right:3px; } .soc_3{ margin-right:3px; }
/*Navbar exgem logo styling*/
- logo, #logo_inverse{
margin-top:-12px; vertical-align:middle; width:48px; height:48px; /*Alligns logo with toggled list on thin screens*/ margin-left:13px; margin-right:-12px; } /*Logo is visable on page load by default*/
- logo{
display:block; } /*The inverse logo is not visable by default, but becomes visable*/ /*when #logo_button is hovered over (found in jquery)*/
- logo_inverse{
display:none; }
/*Displays brand inline with ExGem*/ .navbar-brand > img {
display: inline;
} .navbar-right a{ height:50px; width:48px; }
- Top_link.navbar-brand{/*Top link styling*/
color:#47BCC2; font-size:25px; margin-bottom:5px; opacity:0.6 }
- topnav{
padding-bottom:0px; position:fixed; }
- topnav (max-width: 767px) {
display:none; }
- text{/*Top link text*/
color:#47BCC2; }
- myNavbar{
border: none; } /*sticky footer*/ .wrap {
min-height: 100%; margin-bottom: -65px; /* equal to footer height */
}
.wrap:after {
content: "";
display: block;
} .footer, .wrap:after {
height: 60px; padding-top:5px;
} .flare .wrap:after{ height:5px; } .flare{ background-color:#8cd5d9; padding-top:3px; position:relative; bottom:0px; width:100%; } .footer{ background-color:#e8e8e8; } /*Hides igm logo and team name*/
- sideMenu, #top_title {display:none;}
- bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px;}
- top_title{visibility: hidden; background:#eeeeee;}
- bodyContent{background:#eeeeee;}
- mw-content-text{background:#eeeeee;}
- HQ_page{background:none; height:0px; width:0px;}
- content{background:none;}
- globalWrapper{height:0px;background:#eeeeee;}
/*end of hacky css :) */
/*There is a at bottom of iGEM page. In order to keep footer*/ /*On bottom of page we have styledtags to have no margin or border*/ /*Therefore on all of our paragraphs need to id "pp" to work properly*/ p{ margin:0; padding:0; border-style:none; }
- pp{
- Section_Link, #Section_Link:visited{
- Section_Link:hover{
- sectionGap, #sectionGap:focus, #contentTitle{
- sectionGap:hover, #sectionGap:active{
- title{
- dropdownMenu1{
- links_drop{
- links_drop:hover span{
<nav id="Top" class="navbar navbar-inverse navbar-static-top">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
</button>
<a id="logo_button" class="navbar-brand" href="https://2016.igem.org/Team:Exeter">
<img id="logo" src="
"/>
<img id="logo_inverse" src="
"/>
</a>
-
<a href="https://www.youtube.com/channel/UC31qfG4hnm8gRHDCkrBtAiQ">
<img id = "soc" src="
"/></a>
-
<a href="https://www.facebook.com/ExeteriGEM2016/?ref=aymt_homepage_panel">
<img id = "soc" src="
"/></a>
-
<a href="https://twitter.com/exeter_igem">
<img id = "soc" src="
"/></a>
</nav>
<script> $(document).ready(function(){ //topnav script var width = document.documentElement.clientWidth; console.log(width, "Hello, world!"); if (width > 539){ $( window ).scroll(function(){ //id scrollPosition links to a hidden div at top of html that //constantly counts the pixels you have scrolled down. //Any other solution only worked when page is refreshed. $('#scrollPosition').html($( window ).scrollTop()); //Handles #topnav at bottom of page var distHeight = $( document ).height() - $('#scrollPosition').html() - window.innerHeight; var boxHeight = $("#topnav").height(); var manualPaddingbot = 5; var padding = boxHeight - distHeight + manualPaddingbot; //Causes #topnav to be a variable height from bottom when //footer is in view, and a fixed position on screen when //footer is out of view if (distHeight <= boxHeight){ $("#topnav").css("bottom",(padding + manualPaddingbot)); } if (distHeight > boxHeight){ $("#topnav").css("bottom",manualPaddingbot); } }) } //Causes the navbar logo to switch between the default and //inverse versions when the <a> with #logo_button is hovered over $('#logo_button').hover(function(){ $('#logo').toggle(); $('#logo_inverse').toggle(); }); }); </script>
Integrated: Kill Switch
<img src="
">
<img src="
">
Overview
<p id="pp">We approached our Integrated Human Practices from two perspectives: the traditional, integrating the
Human Practices into the lab project; and the unconventional, integrating the human practices into itself.
We thought we could make the biggest impact in both Human Practices and the lab if we provided cohesive, reassured arguments
for our methods. </p>
<a id="Section_link" href="#section_2" style="display:block;margin:20px auto 0 auto;width:14px;"></a>
What is a kill switch?
<p id="pp">We approached our Integrated Human Practices from two perspectives: the traditional, integrating the
Human Practices into the lab project; and the unconventional, integrating the human practices into itself.
We thought we could make the biggest impact in both Human Practices and the lab if we provided cohesive, reassured arguments
for our methods. </p>
<a id="Section_link" href="#section_2" style="display:block;margin:20px auto 0 auto;width:14px;"></a>
<nav id="topnav" class="nav-navbar" style="right:2px;">
</nav>
<footer class="footer">
<a style="margin-left:3%" href="https://www.youtube.com/channel/UC31qfG4hnm8gRHDCkrBtAiQ">
<img src=""/>
</a>
<a href="https://www.facebook.com/ExeteriGEM2016/?ref=aymt_homepage_panel">
<img src=""/>
</a>
<a href="https://twitter.com/exeter_igem">
<img src=""/>
</a>
</footer>
