Difference between revisions of "Template:Genspace"
| (6 intermediate revisions by the same user not shown) | |||
| Line 21: | Line 21: | ||
<style type="text/css"> | <style type="text/css"> | ||
| − | .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 63: | Line 63: | ||
</div> | </div> | ||
</nav> | </nav> | ||
| + | |||
| + | <div class="showMap"> | ||
| + | <!-- Begin page content --> | ||
| + | <div class="mapBackground"></div> | ||
| + | <!-- <img id="mapimg" src="https://static.igem.org/mediawiki/2015/5/55/Gowanus_canal.jpg" alt=""> --> | ||
| − | + | <div class="background"></div> | |
| − | + | <svg id="map" class="showOutline" x="0px" y="0px" viewBox="-53.157 2690.303 1624 3971.865"> | |
| − | + | <rect x="-53.157" y="2690.32" opacity="0.5" fill="#FFFFFF" stroke="#8CD1E3" stroke-miterlimit="10" width="1624" height="3971.764"/> | |
| − | + | <polygon class="outline" stroke-linejoin="round" stroke-miterlimit="10" enable-background="new " points=" | |
| − | + | 1123.361,4407.782 1119.957,4407.152 1119.576,4403.996 973.628,4391.798 910.539,4329.969 690.985,4380.441 673.786,4387.554 | |
| − | + | 660.28,4392.5 644.718,4400.491 624.81,4412.828 615.276,4420.4 614.435,4424.604 616.539,4427.97 786.25,4442.901 784.87,4455.566 | |
| − | + | 837.354,4460.777 835.46,4482.857 591.933,4458.674 576.791,4476.127 564.594,4509.355 557.443,4546.79 582.68,4551.836 | |
| − | + | 713.066,4564.455 709.912,4599.785 681.731,4596.841 675.001,4589.27 643.035,4587.167 640.933,4590.952 577.843,4583.381 | |
| − | + | 574.147,4580.432 555.762,4580.438 545.246,4682.222 543.564,4682.222 526.95,4868.338 533.259,4872.964 581.7,4876.997 | |
| − | + | 580.734,4896.773 531.997,4892.735 526.276,4897.442 521.062,4968.443 519.8,4972.227 525.268,4984.424 518.538,5019.333 | |
| − | + | 512.65,5038.05 513.878,5051.091 515.594,5102.473 569.57,5281.368 600.737,5285.721 592.756,5357.758 620.515,5441.034 | |
| − | + | 601.588,5565.945 569.414,5560.268 546.297,5574.724 509.723,5642.437 535.347,5654.899 493.079,5709.154 460.641,5719.423 | |
| − | + | 426.837,5775.396 802.025,5861.194 774.446,6054.873 760.349,6047.731 752.997,6076.952 342.931,6002.508 332.691,6062.798 | |
| − | + | 449.211,6090.245 438.824,6138.777 577.306,6164.57 568.549,6194.556 343.9,6151.356 316.74,6136.085 171.902,6108.429 | |
| − | + | 170.908,6119.659 168.523,6119.56 168.027,6135.955 175.777,6137.742 178.46,6142.512 176.351,6149.064 137.711,6142.236 | |
| − | + | 134.871,6152.172 331.679,6193.484 330.862,6197.315 362.983,6204.418 357.441,6244.132 494.976,6270.601 502.465,6233.147 | |
| − | + | 522.099,6237.192 520.837,6241.608 569.854,6251.748 572.358,6248.547 604.111,6254.224 600.327,6285.769 359.334,6251.072 | |
| − | + | 347.348,6298.453 426.472,6310.932 410.077,6385.752 128.977,6339.251 73.83,6385.752 47.221,6432.31 42.828,6476.969 | |
| − | + | 51.53,6501.103 374.306,6584.877 359.401,6662.083 10.634,6662.083 -53.157,6646.88 -53.157,5747.243 -13.596,5725.269 | |
| − | + | 11.827,5898.672 26.135,5895.692 -0.692,5718.625 22.559,5708.492 -4.866,5408.612 50.579,5400.86 128.765,5970.499 | |
| − | + | 140.986,5969.008 109.688,5740.982 383.938,5697.866 373.214,5532.51 445.81,5522.914 435.039,5449.234 517.683,5434.093 | |
| − | + | 487.401,5249.248 484.131,5240.62 487.133,5234.261 480.39,5174.233 485.311,5173.904 471.435,5075.453 485.731,5076.116 | |
| − | + | 488.675,5019.333 476.478,5004.191 484.75,4957.977 483.604,4954.558 486.151,4950.145 514.752,4679.069 506.341,4670.867 | |
| − | + | 511.331,4665.313 528.422,4544.056 531.997,4510.618 550.503,4460.146 565.646,4436.381 573.427,4426.708 590.04,4407.57 | |
| − | + | 607.829,4391.805 613.111,4391.973 628.792,4382.263 644.718,4373.712 669.113,4361.515 690.985,4351.419 828.126,4310.067 | |
| − | + | 830.423,4312.03 897.254,4295.187 915.585,4085.6 870.581,3976.245 872.684,3519.471 902.546,3519.471 902.125,3972.459 | |
| − | + | 950.915,4078.871 927.782,4310.201 970.263,4356.888 1132.615,4371.189 1130.091,4395.583 1125.044,4395.164 "/> | |
| − | + | <g class="sites"> | |
| − | + | <circle id="gcss-01" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" cx="887.405" cy="3544.708" r="10.516"/> | |
| − | + | <circle id="gcss-02" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" cx="887.405" cy="3735.24" r="10.515"/> | |
| − | + | <circle id="gcss-03" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" cx="887.405" cy="3818.519" r="10.515"/> | |
| − | + | <circle id="gcss-04" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" cx="889.929" cy="3986.76" r="10.515"/> | |
| − | + | <circle id="gcss-05" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" cx="927.782" cy="4146.587" r="10.515"/> | |
| − | + | <circle id="gcss-06" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" cx="918.108" cy="4240.802" r="10.515"/> | |
| − | + | <circle id="gcss-07" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" cx="909.696" cy="4312.304" r="10.515"/> | |
| − | + | <circle id="gcss-08" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" cx="1086.349" cy="4388.013" r="10.515"/> | |
| − | + | <circle id="gcss-09" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" cx="741.456" cy="4356.888" r="10.516"/> | |
| − | + | <circle id="gcss-10" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" cx="636.306" cy="4450.261" r="10.516"/> | |
| − | + | <circle id="gcss-11" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" cx="590.04" cy="4572.235" r="10.515"/> | |
| − | + | <circle id="gcss-12" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" cx="525.268" cy="4719.446" r="10.516"/> | |
| − | + | <circle id="gcss-13" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" cx="546.297" cy="4883.901" r="10.515"/> | |
| − | + | <circle id="gcss-14" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" cx="512.65" cy="5195.565" r="10.516"/> | |
| − | + | </g> | |
| − | + | </svg> | |
| − | + | </div> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | <div id=" | + | <div id="page" class="home container"> |
<div class="row intro"> | <div class="row intro"> | ||
<div class="col-md-5"> | <div class="col-md-5"> | ||
| Line 146: | 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.