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% | + | #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>
SuperFUNd Gowanus!
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.