Difference between revisions of "Template:Genspace"

 
(3 intermediate revisions by the same user not shown)
Line 21: Line 21:
 
    
 
    
 
     <style type="text/css">
 
     <style type="text/css">
       #content{width:100%}#page{margin:auto;float:none;z-index:1;position:relative;}#page a{color:#1fae6b;background-color:#fff}#page a:hover{color:#1a8a55}.clear{clear:both;height:0}.gal{display:inline-block}html{position:relative;min-height:100%}body{margin-bottom:60px}.footer{display:none;position:fixed;bottom:0;width:100%;height:60px;background-color:#f5f5f5}@media only screen and (max-width:992px){.container{width:95%}}@media only screen and (max-width:767px){.container{width:95%}}.navbar-default{padding-top:16px}.container>.navbar-header{width:100%;min-height:80px}.navbar>.container .navbar-brand{padding-top:8px}.navbar-default{background-color:#fff;border-color:#e7e7e7}.navbar-default .navbar-nav>li>a:hover{color:#1fae6b}.navbar-toggle{float:left;margin-left:8px}@media only screen and (max-width:992px){.nav.navbar-nav{width:90%}}.nav>li>a{position:relative;display:block;color:#1fae6b;text-transform:uppercase;padding:10px;font-size:14px;}@media only screen and (max-width:1200px){.nav>li>a{padding:5px;font-size:13px}}.nav>li>a:hover{color:#1a8a55}.navbar-header img.genspace{width:260px;max-width:50%;margin:10px 0 10px 10px;}@media only screen and (max-width:767px){.navbar-header img.genspace{margin:10px}}.navbar-header .navbar-brand{float:right;}@media only screen and (max-width:767px){.navbar-header .navbar-brand{padding:5px}}.navbar-header .navbar-brand #logo{width:100px;max-width:100px;height:auto;}@media only screen and (max-width:767px){.navbar-header .navbar-brand #logo{width:80px;height:80px}}h2.lead{font-size:22px}h4{margin:20px 0;}h4 .lead{font-size:16px;}@media only screen and (max-width:1200px){h4 .lead{font-size:14px}}.lead{font-size:21px;}@media only screen and (max-width:1200px){.lead{font-size:18px}}body{margin:0;padding:0;width:100%}body > .container{padding:160px 15px 0;}ul li{list-style:none}.underline{text-decoration:underline}.strike{text-decoration:line-through}.container .text-muted{margin:20px 0;color:#e7e7e7}.footer > .container{padding-right:15px;padding-left:15px}code{font-size:80%}.green{color:#1fae6b}.section{padding:20px;margin:30px 0;display:block}.background{background-color:rgba(255,255,255,0.8);position:fixed;width:100%;height:100%;top:0}.mapBackground{background:url("https://static.igem.org/mediawiki/2015/5/55/Gowanus_canal.jpg");background-size:cover;position:fixed;top:0;width:100%;height:100%}.teamBackground{background:url("https://static.igem.org/mediawiki/2015/6/6d/Genspace_teamphoto_web.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;position:absolute;top:0;width:100%;height:100%}.banner{display:block;width:100%;height:65%}#page.home .row{margin:30px 0}#mapimg,#map{z-index:0;position:fixed;top:0;width:100%;display:none}.showMap #mapimg,.showMap #map{display:block;position:absolute}video{width:100%;height:640px;}@media only screen and (max-width:1200px){video{height:640px}}@media only screen and (max-width:990px){video{height:480px}}svg .outline,svg .sites{opacity:0}svg .outline{fill:#1fae6b;stroke:#1a8a55}svg.showOutline .outline{opacity:.1}svg.showOutline .sites{opacity:1}.dropdown-menu{text-transform:capitalize}.expand>.dropdown-menu{display:block}.heading{border-bottom:2px solid #e7e7e7;padding:10px 0;text-transform:capitalize}img.bio{width:100%}.row{z-index:1;position:relative;}.row img.genspace{max-width:420px;margin-bottom:20px}.row.intro img{width:100%;max-width:600px;}@media only screen and (max-width:992px){.row.intro img{margin:20px auto;display:block}}.teamIntro{width:95%;margin:auto}.team.container{padding-top:0}.team .member .lead{text-transform:capitalize}.parts ul{margin:60px 30px 60px 0}.parts .row{background-color:rgba(255,255,255,0.8);z-index:0;position:relative;border-top:0 solid #c7c7c7;margin:40px 0 80px}.parts .header{margin:0;background-color:rgba(255,255,255,0);border-top:0 solid #c7c7c7}.parts .partType{font-size:18px;font-weight:700;padding-top:40px;text-align:left}.parts .section{margin:20px}.parts svg{pointer-events:none}.construct-map{transform:scale(1.3) translate(-50px,20px);}@media only screen and (max-width:1200px){.construct-map{transform:scale(1.2) translate(-70px,20px)}}table{margin:30px 40px;width:90%;font-size:.98em;}table td.col{text-align:center}table tr:first-child{border-bottom:1px solid #373737}table td.col1,table td.col4{text-align:left}table .col2{font-size:32px}table .col3{padding:0 10px}table .col4{width:30%}table .header .col2{font-size:.99em;}@media only screen and (max-width:767px){table .header .col2{font-size:.98em}}table .header td.col{font-size:1em;font-weight:700}#page .partNav.lead{padding:5px;font-size:1em}.weekNav.lead{padding:5px;font-size:16px}.week{margin:0 0 20px;padding:0 0 60px;border-bottom:2px solid #c7c7c7;}.week .header{margin:20px}.week .section{background-color:rgba(255,255,255,0.8);padding:20px;margin:0;}.week .section img{width:100%;margin:20px auto;display:block;}.week .section img.small{max-width:500px}.week .section img.col2{margin:20px 1%;max-width:46%;float:left}.fancybox{padding:0}.gal{margin-bottom:20px;}.gal .caption{width:100%;font-size:14px;margin-top:-40px}.quote{width:80%;margin-left:5%}.human .section,.colab .section,.safety .section,.attributions .section{background-color:rgba(255,255,255,0.8);padding:20px;margin:40px 0;}.human .section:first-child,.colab .section:first-child,.safety .section:first-child,.attributions .section:first-child{margin:0}.human .section .lead,.colab .section .lead,.safety .section .lead,.attributions .section .lead{font-size:16px}.human .section img,.colab .section img,.safety .section img,.attributions .section img{width:100%;margin:40px auto;display:block;}.human .section img.small,.colab .section img.small,.safety .section img.small,.attributions .section img.small{max-width:500px}.human .section img.col2,.colab .section img.col2,.safety .section img.col2,.attributions .section img.col2{margin:20px 1%;max-width:46%;float:left}.human .section img.col3,.colab .section img.col3,.safety .section img.col3,.attributions .section img.col3{margin:20px .5%;max-width:32%;float:left}.human .practice .lead{margin-bottom:10px}.attributions .member{width:100%;margin:10px 0;display:inline-block}.attributions p{margin:0;line-height:18px;width:auto}.attributions .name{float:left;width:25%;}@media only screen and (max-width:767px){.attributions .name{width:30%}}.attributions .attribution{width:65%;text-transform:capitalize;float:left}/*# sourceMappingURL=index.css.map */
+
       #content{width:100%}#page{margin:auto;float:none;z-index:1;position:relative;padding:160px 15px 0;}#page a{color:#1fae6b;background-color:#fff}#page a:hover{color:#1a8a55}.clear{clear:both;height:0}.gal{display:inline-block}html{position:relative;min-height:100%}body{margin-bottom:60px}.footer{display:none;position:fixed;bottom:0;width:100%;height:60px;background-color:#f5f5f5}@media only screen and (max-width:992px){.container{width:95%}}@media only screen and (max-width:767px){.container{width:95%}}.navbar-default{padding-top:16px}.container>.navbar-header{width:100%;min-height:80px}.navbar>.container .navbar-brand{padding-top:8px}.navbar-default{background-color:#fff;border-color:#e7e7e7}.navbar-default .navbar-nav>li>a:hover{color:#1fae6b}.navbar-toggle{float:left;margin-left:8px}@media only screen and (max-width:992px){.nav.navbar-nav{width:90%}}.nav>li>a{position:relative;display:block;color:#1fae6b;text-transform:uppercase;padding:10px;font-size:14px;}@media only screen and (max-width:1200px){.nav>li>a{padding:5px;font-size:13px}}.nav>li>a:hover{color:#1a8a55}.navbar-header img.genspace{width:260px;max-width:50%;margin:10px 0 10px 10px;}@media only screen and (max-width:767px){.navbar-header img.genspace{margin:10px}}.navbar-header .navbar-brand{float:right;}@media only screen and (max-width:767px){.navbar-header .navbar-brand{padding:5px}}.navbar-header .navbar-brand #logo{width:100px;max-width:100px;height:auto;}@media only screen and (max-width:767px){.navbar-header .navbar-brand #logo{width:80px;height:80px}}h2.lead{font-size:22px}h4{margin:20px 0;}h4 .lead{font-size:16px;}@media only screen and (max-width:1200px){h4 .lead{font-size:14px}}.lead{font-size:21px;}@media only screen and (max-width:1200px){.lead{font-size:18px}}body{margin:0;padding:0;width:100%}ul li{list-style:none}.underline{text-decoration:underline}.strike{text-decoration:line-through}.container .text-muted{margin:20px 0;color:#e7e7e7}.footer > .container{padding-right:15px;padding-left:15px}code{font-size:80%}.green{color:#1fae6b}.section{padding:20px;margin:30px 0;display:block}.background{background-color:rgba(255,255,255,0.8);position:fixed;width:100%;height:100%;top:0}.mapBackground{background:url("https://static.igem.org/mediawiki/2015/5/55/Gowanus_canal.jpg");background-size:cover;position:fixed;top:0;width:100%;height:100%}.teamBackground{background:url("https://static.igem.org/mediawiki/2015/6/6d/Genspace_teamphoto_web.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;position:absolute;top:0;width:100%;height:100%}.banner{display:block;width:100%;height:65%}#page.home .row{margin:30px 0}#mapimg,#map{z-index:0;position:fixed;top:0;width:100%;display:none}.showMap #mapimg,.showMap #map{display:block;position:absolute}video{width:100%;height:640px;}@media only screen and (max-width:1200px){video{height:640px}}@media only screen and (max-width:990px){video{height:480px}}svg .outline,svg .sites{opacity:0}svg .outline{fill:#1fae6b;stroke:#1a8a55}svg.showOutline .outline{opacity:.1}svg.showOutline .sites{opacity:1}.dropdown-menu{text-transform:capitalize}.expand>.dropdown-menu{display:block}.heading{border-bottom:2px solid #e7e7e7;padding:10px 0;text-transform:capitalize}img.bio{width:100%}.row{z-index:1;position:relative;}.row img.genspace{max-width:420px;margin-bottom:20px}.row.intro img{width:100%;max-width:600px;}@media only screen and (max-width:992px){.row.intro img{margin:20px auto;display:block}}.teamIntro{width:95%;margin:auto}.team.container{padding-top:0}.team .member .lead{text-transform:capitalize}.parts ul{margin:60px 30px 60px 0}.parts .row{background-color:rgba(255,255,255,0.8);z-index:0;position:relative;border-top:0 solid #c7c7c7;margin:40px 0 80px}.parts .header{margin:0;background-color:rgba(255,255,255,0);border-top:0 solid #c7c7c7}.parts .partType{font-size:18px;font-weight:700;padding-top:40px;text-align:left}.parts .section{margin:20px}.parts svg{pointer-events:none}.construct-map{transform:scale(1.3) translate(-50px,20px);}@media only screen and (max-width:1200px){.construct-map{transform:scale(1.2) translate(-70px,20px)}}table{margin:30px 40px;width:90%;font-size:.98em;}table td.col{text-align:center}table tr:first-child{border-bottom:1px solid #373737}table td.col1,table td.col4{text-align:left}table .col2{font-size:32px}table .col3{padding:0 10px}table .col4{width:30%}table .header .col2{font-size:.99em;}@media only screen and (max-width:767px){table .header .col2{font-size:.98em}}table .header td.col{font-size:1em;font-weight:700}#page .partNav.lead{padding:5px;font-size:1em}.weekNav.lead{padding:5px;font-size:16px}.week{margin:0 0 20px;padding:0 0 60px;border-bottom:2px solid #c7c7c7;}.week .header{margin:20px}.week .section{background-color:rgba(255,255,255,0.8);padding:20px;margin:0;}.week .section img{width:100%;margin:20px auto;display:block;}.week .section img.small{max-width:500px}.week .section img.col2{margin:20px 1%;max-width:46%;float:left}.fancybox{padding:0}.gal{margin-bottom:20px;}.gal .caption{width:100%;font-size:14px;margin-top:-40px}.quote{width:80%;margin-left:5%}.human .section,.colab .section,.safety .section,.attributions .section{background-color:rgba(255,255,255,0.8);padding:20px;margin:40px 0;}.human .section:first-child,.colab .section:first-child,.safety .section:first-child,.attributions .section:first-child{margin:0}.human .section .lead,.colab .section .lead,.safety .section .lead,.attributions .section .lead{font-size:16px}.human .section img,.colab .section img,.safety .section img,.attributions .section img{width:100%;margin:40px auto;display:block;}.human .section img.small,.colab .section img.small,.safety .section img.small,.attributions .section img.small{max-width:500px}.human .section img.col2,.colab .section img.col2,.safety .section img.col2,.attributions .section img.col2{margin:20px 1%;max-width:46%;float:left}.human .section img.col3,.colab .section img.col3,.safety .section img.col3,.attributions .section img.col3{margin:20px .5%;max-width:32%;float:left}.human .practice .lead{margin-bottom:10px}.attributions .member{width:100%;margin:10px 0;display:inline-block}.attributions p{margin:0;line-height:18px;width:auto}.attributions .name{float:left;width:25%;}@media only screen and (max-width:767px){.attributions .name{width:30%}}.attributions .attribution{width:65%;text-transform:capitalize;float:left}/*# sourceMappingURL=index.css.map */
 
     </style>
 
     </style>
  
 
     <!-- <link href="style/index.css" rel="stylesheet"> -->
 
     <!-- <link href="style/index.css" rel="stylesheet"> -->
 
+
   
 
   </head>
 
   </head>
  
Line 67: Line 67:
 
       <!-- Begin page content -->
 
       <!-- Begin page content -->
 
       <div class="mapBackground"></div>
 
       <div class="mapBackground"></div>
       <img id="mapimg" src="https://static.igem.org/mediawiki/2015/5/55/Gowanus_canal.jpg" alt="">
+
       <!-- <img id="mapimg" src="https://static.igem.org/mediawiki/2015/5/55/Gowanus_canal.jpg" alt=""> -->
  
 
       <div class="background"></div>
 
       <div class="background"></div>
Line 148: Line 148:
 
             var resourceContent = data; // can be a global variable too...
 
             var resourceContent = data; // can be a global variable too...
 
             $('body').append($('<script>').html(data))
 
             $('body').append($('<script>').html(data))
 +
 +
            d3.selectAll('.dropdown')
 +
              .on('mouseover',function(){ this.classList.add('expand') })
 +
              .on('mouseout',function(){ this.classList.remove('expand') })
 +
 +
            var map = d3.select('#map')
 +
            var img = d3.select('#mapimg')
 +
            var content = d3.select('#page')
 +
            size()
 +
            function size () {
 +
              img.style({
 +
                width:window.innerWidth+'px',
 +
              })
 +
              // content.style({
 +
              //  height:img.node().getBoundingClientRect().height,
 +
              // })
 +
            }
 +
 +
            d3.select(window).on('resize.index',size)
 +
 +
            d3.selectAll('video')
 +
              .on('click',function(){
 +
                  this.play()
 +
              })
 
         });
 
         });
 
     });
 
     });

Latest revision as of 17:33, 18 September 2015

<!DOCTYPE html> Gowanus SuperFUNd - Genspace iGEM 2015

The Gowanus Canal is a heavily polluted waterway that runs through Brooklyn NY. A designated superfund site, it is slated for cleanup but nearby residents are concerned about the results. Our team is developing a biosensor for waste pollution, giving the community real time access to data on the health of the canal. Additionally we have mined the canal for extremophiles with interesting properties.

Place sticky footer content here.