Difference between revisions of "Team:William and Mary/Engagement"

Line 8: Line 8:
  
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">   
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">   
−
<script src="js/classie.js"></script>
+
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Dancing+Script">
 +
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
  
 
<script>
 
<script>
 +
var menuToggle = document.querySelector('[data-js="menu-toggle"]');
  
−
var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
+
// Remove this setInterval to trigger the open/close manually through the UI
 +
var interval = setInterval(function() {
 +
  menuToggle.click();
 +
}, 2000);
  
−
body = document.body;
+
// Clear the interval on any click
 +
document.body.addEventListener('click', function () {
 +
  clearInterval(interval);
 +
});
  
−
+
menuToggle.addEventListener('click', function () {
 +
  document.body.classList.toggle('panel-open');
 +
  menuToggle.classList.toggle('open');
 +
});
  
−
showLeft.onclick = function() {
+
var closePanel = document.querySelector('[data-js="hidden-panel-close"]');
  
−
classie.toggle( this, 'active' );
+
closePanel.addEventListener('click', function () {
 +
  document.body.classList.remove('panel-open');
 +
  menuToggle.classList.remove('open');
 +
});
  
−
classie.toggle( menuLeft, 'cbp-spmenu-open' );
 
  
−
disableOther( 'showLeft' );
 
−
 
−
};
 
−
 
−
 
−
 
−
function disableOther( button ) {
 
−
 
−
if( button !== 'showLeft' ) {
 
−
 
−
classie.toggle( showLeft, 'disabled' );
 
−
 
−
}
 
−
 
−
}
 
  
 
</script>
 
</script>
Line 45: Line 43:
 
<style>
 
<style>
  
−
.cbp-spmenu {
+
body
 +
  color: #878787
 +
  font-family: Roboto, sans-serif
 +
  left: 0
 +
  line-height: 1.35
 +
  margin: 0
 +
  overflow: hidden
 +
  position: relative
 +
  text-rendering: optimizeLegibility
 +
  -webkit-font-smoothing: antialiased
 +
  transition: left 0.3s ease-in-out
 +
  &.panel-open
 +
    left: -250px
  
−
background: #47a3da;
+
.container
 +
  @extend %cf
 +
  min-height: 1000px
  
−
position: fixed;
+
a
 +
  outline: 0
 +
  text-decoration: none
  
−
}
+
h1, h2, h3, h4, h5, h6
 +
  margin: 0
 +
  padding: 0
  
−
.cbp-spmenu h3 {
+
header
 +
  @extend %cf
 +
  color: #fff
 +
  padding: 3em 5%
 +
  position: relative
 +
  width: 90%
 +
  z-index: 2
  
−
color: #afdefa;
+
.menu-toggle
 +
  @extend %cf
 +
  cursor: pointer
 +
  float: right
 +
  font-size: 0.875rem
 +
  transition: all 0.3s ease-in-out
 +
  &.open
 +
    opacity: 0.5
  
−
font-size: 1.9em;
+
.menu-toggle-grippy
 +
  border-bottom: 5px solid #fff
 +
  border-top: 5px solid #fff
 +
  float: left
 +
  line-height: 0
 +
  margin-right: 1em
 +
  padding: 5px 0
 +
  text-indent: -999em
 +
  width: 35px
 +
  &:after
 +
    background: #fff
 +
    content: ''
 +
    display: block
 +
    height: 5px
  
−
padding: 20px;
+
.menu-toggle-label
 +
  float: left
 +
  font-weight: 700
 +
  height: 25px
 +
  letter-spacing: 1px
 +
  line-height: 25px
 +
  text-transform: uppercase
  
−
margin: 0;
+
.hidden-panel
 +
  background: #333
 +
  color: #666
 +
  font-size: 0.875rem
 +
  height: 100%
 +
  position: absolute
 +
  right: -250px
 +
  top: 0
 +
  width: 250px
 +
  a
 +
    color: #999
 +
    transition: color 0.3s ease-out
 +
    &:hover
 +
      color: #fff
  
−
font-weight: 300;
+
.hidden-panel-close
 +
  color: #666
 +
  cursor: pointer
 +
  position: absolute
 +
  right: 20px
 +
  top: 3.7em
 +
  transition: color 0.3s ease-in-out
 +
  &:hover
 +
    color: #fff
  
−
background: #0d77b6;
+
.hidden-panel-content
 +
  padding: 3.65em 10%
  
−
}
+
.hidden-panel-nav
 +
  border-bottom: 1px solid #666
 +
  border-bottom: 1px solid rgba(#666, 0.25)
 +
  margin-bottom: 1.5em
 +
  padding-bottom: 1.5em
 +
  text-transform: uppercase
 +
  h3
 +
    letter-spacing: 1px
 +
    margin-bottom: 1em
 +
  ul
 +
    list-style: none
 +
    font-weight: 600
 +
    margin: 0
 +
    padding: 0
 +
  li
 +
    padding: 0.25em 0
  
−
.cbp-spmenu a {
+
.hidden-panel-text
 +
  line-height: 1.5
 +
  p
 +
    margin-bottom: 1.5em
 +
    &:last-child
 +
      margin-bottom: 0
  
−
display: block;
+
.hidden-panel-credits
 +
  font-size: 12px
 +
  font-size: 0.75rem
 +
  line-height: 1.5
 +
  span
 +
    display: block
 +
    margin-bottom: 0.15em
  
−
color: #fff;
+
.banner
 +
  background: #f5756c
 +
  background: linear-gradient(#f5756c,#fd5480),#f5756c
 +
  box-sizing: border-box
 +
  height: 100%
 +
  left: 0
 +
  padding: 5em 0
 +
  position: absolute
 +
  text-align: center
 +
  top: 0
 +
  width: 100%
 +
  z-index: 1
 +
  h1
 +
    color: #fff
 +
    font-family: 'Dancing Script'
 +
    font-size: 4.375rem
 +
    margin-bottom: 1em
 +
  h2
 +
    color: #fff
 +
    font-size: 2rem
 +
    font-weight: 300
 +
    line-height: 1.5
 +
    margin: 0 auto
 +
    width: 50%
  
−
font-size: 1.1em;
+
%cf:before, %cf:after
 +
  content: ''
 +
  display: table
  
−
font-weight: 300;
+
%cf:after
 +
  clear: both
  
−
}
 
  
−
.cbp-spmenu a:hover {
+
</style>
  
−
background: #258ecd;
 
  
−
}
+
</head>
−
 
+
−
.cbp-spmenu a:active {
+
−
 
+
−
background: #afdefa;
+
−
 
+
−
color: #47a3da;
+
−
 
+
−
}
+
−
.cbp-spmenu-vertical {
+
−
 
+
−
width: 240px;
+
−
 
+
−
height: 100%;
+
−
 
+
−
top: 0;
+
−
 
+
−
z-index: 1000;
+
−
 
+
−
}
+
−
 
+
−
.cbp-spmenu-vertical a {
+
−
 
+
−
border-bottom: 1px solid #258ecd;
+
−
 
+
−
padding: 1em;
+
−
 
+
−
}
+
−
 
+
−
.cbp-spmenu-left {
+
−
 
+
−
left: -240px;
+
−
 
+
−
}
+
−
 
+
−
.cbp-spmenu-left.cbp-spmenu-open {
+
−
 
+
−
left: 0px;
+
−
 
+
−
}
+
−
 
+
−
.cbp-spmenu, .cbp-spmenu-push {
+
−
 
+
−
-webkit-transition: all 0.3s ease;
+
−
 
+
−
-moz-transition: all 0.3s ease;
+
−
 
+
−
transition: all 0.3s ease;
+
−
 
+
−
}
+
−
 
+
−
 
+
−
</style>
+
  
−
+
<body>
 
<!----Standard Outreach Stuff---->
 
<!----Standard Outreach Stuff---->
  
Line 146: Line 214:
 
<center><h1>Outreach</h1></center>
 
<center><h1>Outreach</h1></center>
  
 +
    <div class="container">
 +
    <header>
 +
      <div class="menu-toggle" data-js="menu-toggle">
 +
        <span class="menu-toggle-grippy">Toggle</span>
 +
        <span class="menu-toggle-label">Menu</span>
 +
      </div>
 +
    </header>
 +
     
 +
    <section class="banner" role="banner">
 +
      <h1>Hello there</h1>
 +
      <h2>This is an experimental CodePen which utilises an absolutely positioned hidden panel which can be triggered by clicking a toggle.</h2>
 +
    </section>
 +
   
 +
    <div class="hidden-panel">
 +
     
 +
      <span class="hidden-panel-close" data-js="hidden-panel-close">Close</span>
 +
     
 +
      <div class="hidden-panel-content">
 +
       
 +
        <nav class="hidden-panel-nav">
 +
          <h3>Quick Look</h3>
 +
          <ul>
 +
            <li><a href="#" title="Home">Home</a></li>
 +
            <li><a href="#" title="About">About</a></li>
 +
            <li><a href="#" title="Blog">Blog</a></li>
 +
            <li><a href="#" title="Work">Work</a></li>
 +
            <li><a href="#" title="Contact">Contact</a></li>
 +
          </ul>
 +
        </nav>
 +
       
 +
        <div class="hidden-panel-text">
 +
          <p>This is an experimental CodePen which utilises an absolutely positioned hidden panel which can be triggered by clicking a toggle.</p>
 +
        </div>
 +
       
 +
        <div class="hidden-panel-credits">
 +
          <span>Coded by <a href="https://twitter.com/darrenhuskie" title="Darren Huskie">Darren Huskie</a>.</span>
 +
          <span>Powered by <a href="#" title="some framework">some framework</a>.</span>
 +
          <span>Hosted by a <a href="#" title="web host">web host</a>.</span>
 +
        </div>
 +
       
 +
      </div>
 +
    </div>
 +
    </div>
  
−
<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1">
 
  
−
<h3><a href="http">Menu</a></h3>
+
<div >
−
 
+
   <div  style='margin: 40px; background-color:#E2C4A2;font-size: 18px; position:fixed; float: left; top: 25%; height: 5%; '>
−
<a href="#">3</a>
+
</div>
−
 
+
−
<a href="#">4</a>
+
−
 
+
−
<a href="#">5</a>
+
−
 
+
−
<a href="#">6</a>
+
−
 
+
−
<a href="#">7</a>
+
−
 
+
−
<a href="#">8</a>
+
−
 
+
−
</nav>
+
−
 
+
−
 
+
−
<center><button id="showLeft">Show/Hide Left Slide Menu</button></center>
+
−
 
+
−
 
+
−
   <div  style='margin: 30px; width: 180px; height: 20px; position: fixed; top: 29%; float: left; background:#507A50'>
+
 
</div>
 
</div>
  
Line 262: Line 354:
  
  
−
 
+
</body>
  
 
</html>
 
</html>

Revision as of 02:36, 28 October 2017



Outreach

Toggle Menu
Close

This is an experimental CodePen which utilises an absolutely positioned hidden panel which can be triggered by clicking a toggle.

Coded by Darren Huskie. Powered by some framework. Hosted by a web host.


A fundamental goal of synthetic biology is to create a modular genetic basis for control over circuit behavior properties. While much progress has been made in achieving this objective for properties such as gene expression strength, where well-characterized ribosome binding sites (RBSs) can be conveniently swapped within a genetic part, there is much to be desired in altering gene expression speed. Currently, no such robust mechanism of speed control exists. We intend to provide a means to tune the speed of gene expression in transcriptional circuits, where a pre-characterized genetic part can be inserted into a gene to alter its expression in a predictable way. Based on multiple well-cited claims in literature, a strong relationship can be asserted between gene expression speed and the rate of protein degradation. Using a basic mathematical model of gene expression, one can derive that the speed of gene expression, defined as the time it takes for its protein product to reach half of its steady-state concentration, is a function of the protein’s degradation rate. This reveals that tuning protein degradation rate is essential to controlling gene expression, thus amenable to an approach involving protein degradation tags. Degradation tags are used endogenously to identify misfolded proteins, and different tags have unique protease-binding affinities which confer various degradation rates on the tagged proteins. In 2008, the Sauer lab at MIT reported that Mycoplasma florum’s Lon protease system was orthogonal to the endogenous protein degradation machinery in E. coli. As of now, mf-Lon degradation tags exist only as isolated sequences on the BioBrick Registry. We intend to build a suite of BioBrick parts in the form of [mf-Lon tag] - [Stop Codon] - [Double Terminator] that can be swapped in to directly modulate protein degradation rate just as RBS and promoter sequences can be swapped to modify protein production. This would drastically increase the accessibility of mf-Lon tags and enable other teams to easily amplify their desired protein sequence by simply cloning it into our construct. Should the relationship between gene expression speed and protein degradation rate exist robustly, we will be providing the first modular genetic basis of speed control, fulfilling a core aspiration of synthetic biology to have every gene expression and circuit property accessible at the genetic level.


Database

Upcoming

Database

Upcoming

Database

Upcoming

Database

Upcoming