Team:Cornell/Sandbox

From 2012.igem.org

(Difference between revisions)
(copied from main page)
(Accomplished)
 
(47 intermediate revisions not shown)
Line 1: Line 1:
-
{{:Team:Cornell/templates/header}} <!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
+
__NOTOC__
 +
==To Do==
 +
* Convert mycelial growth program to javascript
 +
* Notebook page only works on some browsers
 +
 
 +
==Accomplished==
 +
* Have nav template recognize the page its on and adjust li-active accordingly
 +
** give each li an ID and have a short javascript checking the URL and setting the li with that ID to class="active". See [http://2012.igem.org/Team:Cornell/templates/wetnav?action=edit wetnav].
 +
* Figure out a tour template system: [http://2012.igem.org/Team:Cornell/templates/tour?action=edit tour] <--functionality in header
 +
* Work on notebook page, try to get a filtered-entry system working [http://2012.igem.org/Team:Cornell/Sandbox/notebook notebook] and [http://2012.igem.org/wiki/index.php?title=Team:Cornell/templates/nbentry&action=edit nbentry template]
 +
 
 +
==Resources==
 +
* CSS transforms: make sure you get webkit (Safari/Chrome), moz (Firefox), o (Opera), and ms (IE9+). For some things, it's possible to support IE6 as well, but these have case-by-case hacks.
 +
** Rotation in IE6+: -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)"; /* 0=0, 1=90, 2=180, 3=270 */
 +
** Rotation for others: -moz-transform: rotate(-90deg); (duplicate and replace moz with webkit, o, and ms)
 +
* Notebook images:
 +
<pre>
 +
"White": #f2f2f2
 +
Gray: #8A8A8A
 +
Wetlab: #40B249
 +
http://igem.org/wiki/images/2/23/Cornell-nb-wet-c.png
 +
http://igem.org/wiki/images/3/35/Cornell-nb-wet-g.png
 +
 
 +
Drylab: #2D75B0
 +
http://igem.org/wiki/images/6/6a/Cornell-nb-dry-c.png
 +
http://igem.org/wiki/images/2/2a/Cornell-nb-dry-g.png
 +
 
 +
Modeling: #AD2029
 +
http://igem.org/wiki/images/5/59/Cornell-nb-model-c.png
 +
http://igem.org/wiki/images/d/d0/Cornell-nb-model-g.png
 +
 
 +
Human Practices: #E58A35
 +
http://igem.org/wiki/images/5/59/Cornell-nb-hprac-c.png
 +
http://igem.org/wiki/images/e/e3/Cornell-nb-hprac-g.png
 +
 
 +
Wiki: #5D3697
 +
http://igem.org/wiki/images/f/ff/Cornell-nb-wiki-c.png
 +
http://igem.org/wiki/images/4/40/Cornell-nb-wiki-g.png
 +
 
 +
Animation: #D5BA34
 +
http://igem.org/wiki/images/4/46/Cornell-nb-anim-c.png
 +
http://igem.org/wiki/images/5/51/Cornell-nb-anim-g.png</pre>
 +
 
 +
* Make templates - learn from http://en.wikipedia.org/wiki/Help:Template
 +
* Make bookmarklet to paste in template subst tag - learn from http://en.wikipedia.org/wiki/Bookmarklet
 +
 
 +
==Notes==
 +
*Cornell red (carnelian red): #B31B1B
 +
*Off-white: #F2F2F2
 +
 
 +
<!--{{:Team:Cornell/templates/header}}-->
 +
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
Line 5: Line 56:
<!--[if gt IE 8]><!-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="en">
<html class="no-js" lang="en">
-
<!--<![endif]-->
+
<head>
-
<div class="row main-image">
+
<meta charset="utf-8" />
-
<div class="twelve columns no-pad" style="margin-bottom:20px;">
+
<meta name="viewport" content="width=device-width" />
-
<div id="homepage-slideshow">
+
<link rel="stylesheet" href="http://2012.igem.org/Team:Cornell/stylesheets/foundation?action=raw&ctype=text/css">
-
<img src="http://2012.igem.org/wiki/images/1/19/Cornell1Sliders.jpg" />
+
<link rel="stylesheet" href="http://2012.igem.org/Team:Cornell/stylesheets/app?action=raw&ctype=text/css">
-
<img src="http://2012.igem.org/wiki/images/5/59/CornellSliders2.jpg" />
+
<script src="http://2012.igem.org/Team:Cornell/javascripts/modernizr.foundation?action=raw&ctype=text/javascript"></script>
-
<img src="http://2012.igem.org/wiki/images/c/c7/Sliders3.jpg" />
+
<!-- IE Fix for HTML5 Tags -->
-
<img src="http://2012.igem.org/wiki/images/c/c1/Sliders4.jpg" />
+
<!--[if lt IE 9]>
-
<img src="http://2012.igem.org/wiki/images/f/f6/Sliders5.jpg" />
+
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
-
<img src="http://2012.igem.org/wiki/images/f/f4/Sliders6.jpg" />
+
<![endif]-->
-
<img src="http://2012.igem.org/wiki/images/1/10/Sliders7.jpg" />
+
-
</div>
+
-
</div>
+
-
</div>
+
-
<div class="row">
+
<style type="text/css">
-
<div class="twelve columns">
+
img#igem-attr {
-
<div class="row">
+
transition: transform 0.5s;
-
<div class="six columns homepage-section tl">
+
-moz-transition: -moz-transform 0.5s; /* Firefox 4 */
-
<div class="row">
+
-webkit-transition: -webkit-transform 0.5s; /* Safari and Chrome */
-
<div class="five columns homepage-thumb">
+
-o-transition: -o-transform 0.5s; /* Opera */
-
<a href="http://2012.igem.org/Team:Cornell/project"><img src="http://2012.igem.org/wiki/images/1/13/Cornell_Dan_SQ.jpg"></a>
+
}
-
</div>
+
-
<div class="seven columns homepage-force">
+
-
<div class="row">
+
-
<div class="twelve columns">
+
-
<a href="http://2012.igem.org/Team:Cornell/project"><h3 style="margin:0px auto 0px;">Project</h3></a>
+
-
</div>
+
-
</div>
+
-
<div class="row">
+
-
<div class="twelve columns">
+
-
Discover our novel approach to environmental biosensing, where synthetic biology intersects with microbial electrochemical systems.
+
-
</div>
+
img#igem-attr:hover {
-
</div>
+
transform: rotate(-15deg);
-
<div class="row">
+
-ms-transform: rotate(-15deg); /* IE 9 */
-
<div class="twelve columns controls" >
+
-webkit-transform: rotate(-15deg); /* Safari and Chrome */
-
<a href="http://2012.igem.org/Team:Cornell/project" class="small button radius">More Info</a>
+
-o-transform: rotate(-15deg); /* Opera */
-
</div>
+
-moz-transform: rotate(-15deg); /* Firefox */
-
</div>
+
}
-
</div>
+
-
</div>
+
-
</div>
+
-
<div class="six columns homepage-section tr">
+
-
<div class="row">
+
-
<div class="five columns homepage-thumb">
+
-
<a href="http://2012.igem.org/Team:Cornell/notebook"><img src="http://2012.igem.org/wiki/images/9/9f/Cornell_notebook_square.jpg"></a>
+
-
</div>
+
-
<div class="seven columns homepage-force">
+
-
<div class="row">
+
-
<div class="twelve columns">
+
-
<a href="http://2012.igem.org/Team:Cornell/notebook"><h3 style="margin:0px auto 0px;">Notebook</h3></a>
+
-
</div>
+
-
</div>
+
-
<div class="row">
+
-
<div class="twelve columns">
+
-
See how our wetlab and drylab subteams operated on a day-to-day basis in order to accomplish our goals of constructing a field-deployable biosensor with direct electric output.
+
-
</div>
+
#footer-box {
-
</div>
+
display:none;
-
<div class="row">
+
}
-
<div class="twelve columns controls" >
+
</style>
-
<a href="http://2012.igem.org/Team:Cornell/notebook" class="small button radius corner">More Info</a>
+
</head>
-
</div>
+
<body>
-
</div>
+
<!--<![endif]-->
-
</div>
+
<div class="row off-canvas" style="height:140px;margin: 0px auto 40px;background-image:url('http://2012.igem.org/wiki/images/1/14/CornellRedSplash.png');background-repeat:no-repeat;background-position:center center">
-
</div>
+
<div class="twelve columns centered header no-pad" id="header-wrapper" style="margin:20px auto 20px">
-
</div>
+
<div class="seven columns">
 +
<h2 style="color:#f2f2f2;text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; float:right; vertical-align:middle; margin-top:30px">Return to main page &rarr;</h2>
</div>
</div>
-
<div class="row">
+
<div class="five columns">
-
<div class="six columns homepage-section bl">
+
<a href="http://2013.igem.org">
-
<div class="row">
+
<img id="igem-attr" src="http://2012.igem.org/wiki/images/0/0d/CornelliGEMInkSmall.png" title="iGEM 2013" alt="iGEM 2013">
-
<div class="five columns homepage-thumb">
+
</a>
-
<a href="http://2012.igem.org/Team:Cornell/team"><img src="http://2012.igem.org/wiki/images/5/50/Team_square.jpg"></a>
+
-
</div>
+
-
<div class="seven columns homepage-force">
+
-
<div class="row">
+
-
<div class="twelve columns">
+
-
<a href="http://2012.igem.org/Team:Cornell/team"><h3 style="margin:0px auto 0px;">Team</h3></a>
+
-
</div>
+
-
</div>
+
-
<div class="row">
+
-
<div class="twelve columns">
+
-
Meet our dedicated team of undergraduates who conceived of, planned, and carried out all the biological, mechanical and electrical engineering to complete our device.
+
-
 
+
-
</div>
+
-
</div>
+
-
<div class="row">
+
-
<div class="twelve columns controls" >
+
-
<a href="http://2012.igem.org/Team:Cornell/team" class="small button radius corner">More Info</a>
+
-
</div>
+
-
</div>
+
-
</div>
+
-
</div>
+
-
</div>
+
-
<div class="six columns homepage-section br">
+
-
<div class="row">
+
-
<div class="five columns homepage-thumb">
+
-
<a href="http://2012.igem.org/Team:Cornell/outreach"><img src="http://igem.org/wiki/images/3/3b/Swati_square.jpg"></a>
+
-
</div>
+
-
<div class="seven columns homepage-force">
+
-
<div class="row">
+
-
<div class="twelve columns">
+
-
<a href="http://2012.igem.org/Team:Cornell/outreach"><h3 style="margin:0px auto 0px;">Outreach</h3></a>
+
-
</div>
+
-
</div>
+
-
<div class="row">
+
-
<div class="twelve columns">
+
-
Examine our efforts to reach out to our local community &#8212; involving presentations to other scientists, discussions with fellow students and interaction with educators and young children.
+
-
</div>
+
-
</div>
+
-
<div class="row">
+
-
<div class="twelve columns controls" >
+
-
<a href="http://2012.igem.org/Team:Cornell/outreach" class="small button radius corner">More Info</a>
+
-
</div>
+
-
</div>
+
-
</div>
+
-
</div>
+
-
</div>
+
</div>
</div>
</div>
</div>
</div>
</div>
-
<div class="row">
+
<div class="row main-image">
-
<div class="twelve columns sponsors-wrapper">
+
<div class="twelve columns no-pad" style="margin-bottom:20px;">
-
<ul class="">
+
<img src="http://2012.igem.org/wiki/images/5/58/CornellUnderConstruction.png" />
-
<li>
+
-
<a href="http://2012.igem.org/Team:Cornell/team/sponsors#osli"><img src="http://2012.igem.org/wiki/images/8/8d/OSLI_Logo.png"></a>
+
-
</li>
+
-
<li>
+
-
<a href="http://2012.igem.org/Team:Cornell/team/sponsors#corning"><img src="http://2012.igem.org/wiki/images/1/1b/Corning_Logo_2.png"></a>
+
-
</li>
+
-
<li>
+
-
<a href="http://2012.igem.org/Team:Cornell/team/sponsors#gen"><img src="http://2012.igem.org/wiki/images/4/41/Geneious_Logo_2.png"></a>
+
-
</li>
+
-
<li>
+
-
<a href="http://2012.igem.org/Team:Cornell/team/sponsors#cornell"><img src="http://2012.igem.org/wiki/images/7/7d/CornellLogo-e1326206914334.png"></a>
+
-
</li>
+
-
</ul>
+
</div>
</div>
</div>
</div>

Latest revision as of 02:01, 20 June 2013

To Do

  • Convert mycelial growth program to javascript
  • Notebook page only works on some browsers

Accomplished

  • Have nav template recognize the page its on and adjust li-active accordingly
    • give each li an ID and have a short javascript checking the URL and setting the li with that ID to class="active". See wetnav.
  • Figure out a tour template system: tour <--functionality in header
  • Work on notebook page, try to get a filtered-entry system working notebook and nbentry template

Resources

  • CSS transforms: make sure you get webkit (Safari/Chrome), moz (Firefox), o (Opera), and ms (IE9+). For some things, it's possible to support IE6 as well, but these have case-by-case hacks.
    • Rotation in IE6+: -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)"; /* 0=0, 1=90, 2=180, 3=270 */
    • Rotation for others: -moz-transform: rotate(-90deg); (duplicate and replace moz with webkit, o, and ms)
  • Notebook images:
"White": #f2f2f2
Gray: #8A8A8A
Wetlab: #40B249
http://igem.org/wiki/images/2/23/Cornell-nb-wet-c.png
http://igem.org/wiki/images/3/35/Cornell-nb-wet-g.png

Drylab: #2D75B0
http://igem.org/wiki/images/6/6a/Cornell-nb-dry-c.png
http://igem.org/wiki/images/2/2a/Cornell-nb-dry-g.png

Modeling: #AD2029
http://igem.org/wiki/images/5/59/Cornell-nb-model-c.png
http://igem.org/wiki/images/d/d0/Cornell-nb-model-g.png

Human Practices: #E58A35
http://igem.org/wiki/images/5/59/Cornell-nb-hprac-c.png
http://igem.org/wiki/images/e/e3/Cornell-nb-hprac-g.png

Wiki: #5D3697
http://igem.org/wiki/images/f/ff/Cornell-nb-wiki-c.png
http://igem.org/wiki/images/4/40/Cornell-nb-wiki-g.png

Animation: #D5BA34
http://igem.org/wiki/images/4/46/Cornell-nb-anim-c.png
http://igem.org/wiki/images/5/51/Cornell-nb-anim-g.png

Notes

  • Cornell red (carnelian red): #B31B1B
  • Off-white: #F2F2F2

Return to main page →