Team:Cornell/Sandbox
From 2012.igem.org
(Difference between revisions)
(→Accomplished) |
|||
(46 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 [https://2012.igem.org/Team:Cornell/templates/wetnav?action=edit wetnav]. | ||
+ | * Figure out a tour template system: [https://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 [https://2012.igem.org/Team:Cornell/Sandbox/notebook notebook] and [https://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 | ||
+ | https://static.igem.org/mediawiki/igem.org/2/23/Cornell-nb-wet-c.png | ||
+ | https://static.igem.org/mediawiki/igem.org/3/35/Cornell-nb-wet-g.png | ||
+ | |||
+ | Drylab: #2D75B0 | ||
+ | https://static.igem.org/mediawiki/igem.org/6/6a/Cornell-nb-dry-c.png | ||
+ | https://static.igem.org/mediawiki/igem.org/2/2a/Cornell-nb-dry-g.png | ||
+ | |||
+ | Modeling: #AD2029 | ||
+ | https://static.igem.org/mediawiki/igem.org/5/59/Cornell-nb-model-c.png | ||
+ | https://static.igem.org/mediawiki/igem.org/d/d0/Cornell-nb-model-g.png | ||
+ | |||
+ | Human Practices: #E58A35 | ||
+ | https://static.igem.org/mediawiki/igem.org/5/59/Cornell-nb-hprac-c.png | ||
+ | https://static.igem.org/mediawiki/igem.org/e/e3/Cornell-nb-hprac-g.png | ||
+ | |||
+ | Wiki: #5D3697 | ||
+ | https://static.igem.org/mediawiki/igem.org/f/ff/Cornell-nb-wiki-c.png | ||
+ | https://static.igem.org/mediawiki/igem.org/4/40/Cornell-nb-wiki-g.png | ||
+ | |||
+ | Animation: #D5BA34 | ||
+ | https://static.igem.org/mediawiki/igem.org/4/46/Cornell-nb-anim-c.png | ||
+ | https://static.igem.org/mediawiki/igem.org/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"> | ||
- | < | + | <head> |
- | + | <meta charset="utf-8" /> | |
- | < | + | <meta name="viewport" content="width=device-width" /> |
- | + | <link rel="stylesheet" href="https://2012.igem.org/Team:Cornell/stylesheets/foundation?action=raw&ctype=text/css"> | |
- | + | <link rel="stylesheet" href="https://2012.igem.org/Team:Cornell/stylesheets/app?action=raw&ctype=text/css"> | |
- | + | <script src="https://2012.igem.org/Team:Cornell/javascripts/modernizr.foundation?action=raw&ctype=text/javascript"></script> | |
- | + | <!-- IE Fix for HTML5 Tags --> | |
- | + | <!--[if lt IE 9]> | |
- | + | <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> | |
- | + | <![endif]--> | |
- | + | ||
- | + | ||
- | < | + | |
- | + | ||
- | + | <style type="text/css"> | |
- | < | + | img#igem-attr { |
- | + | transition: transform 0.5s; | |
- | + | -moz-transition: -moz-transform 0.5s; /* Firefox 4 */ | |
- | + | -webkit-transition: -webkit-transform 0.5s; /* Safari and Chrome */ | |
- | + | -o-transition: -o-transform 0.5s; /* Opera */ | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | img#igem-attr:hover { | |
- | + | transform: rotate(-15deg); | |
- | + | -ms-transform: rotate(-15deg); /* IE 9 */ | |
- | + | -webkit-transform: rotate(-15deg); /* Safari and Chrome */ | |
- | + | -o-transform: rotate(-15deg); /* Opera */ | |
- | + | -moz-transform: rotate(-15deg); /* Firefox */ | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | #footer-box { | |
- | + | display:none; | |
- | + | } | |
- | + | </style> | |
- | + | </head> | |
- | + | <body> | |
- | + | <!--<![endif]--> | |
- | + | <div class="row off-canvas" style="height:140px;margin: 0px auto 40px;background-image:url('https://static.igem.org/mediawiki/2012/1/14/CornellRedSplash.png');background-repeat:no-repeat;background-position:center center"> | |
- | + | <div class="twelve columns centered header no-pad" id="header-wrapper" style="margin:20px auto 20px"> | |
- | </ | + | <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 →</h2> | ||
</div> | </div> | ||
- | + | <div class="five columns"> | |
- | + | <a href="https://2013.igem.org"> | |
- | + | <img id="igem-attr" src="https://static.igem.org/mediawiki/2012/0/0d/CornelliGEMInkSmall.png" title="iGEM 2013" alt="iGEM 2013"> | |
- | + | </a> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | </ | + | |
</div> | </div> | ||
</div> | </div> | ||
</div> | </div> | ||
- | <div class="row"> | + | <div class="row main-image"> |
- | <div class="twelve columns | + | <div class="twelve columns no-pad" style="margin-bottom:20px;"> |
- | + | <img src="https://static.igem.org/mediawiki/2012/5/58/CornellUnderConstruction.png" /> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
</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 https://static.igem.org/mediawiki/igem.org/2/23/Cornell-nb-wet-c.png https://static.igem.org/mediawiki/igem.org/3/35/Cornell-nb-wet-g.png Drylab: #2D75B0 https://static.igem.org/mediawiki/igem.org/6/6a/Cornell-nb-dry-c.png https://static.igem.org/mediawiki/igem.org/2/2a/Cornell-nb-dry-g.png Modeling: #AD2029 https://static.igem.org/mediawiki/igem.org/5/59/Cornell-nb-model-c.png https://static.igem.org/mediawiki/igem.org/d/d0/Cornell-nb-model-g.png Human Practices: #E58A35 https://static.igem.org/mediawiki/igem.org/5/59/Cornell-nb-hprac-c.png https://static.igem.org/mediawiki/igem.org/e/e3/Cornell-nb-hprac-g.png Wiki: #5D3697 https://static.igem.org/mediawiki/igem.org/f/ff/Cornell-nb-wiki-c.png https://static.igem.org/mediawiki/igem.org/4/40/Cornell-nb-wiki-g.png Animation: #D5BA34 https://static.igem.org/mediawiki/igem.org/4/46/Cornell-nb-anim-c.png https://static.igem.org/mediawiki/igem.org/5/51/Cornell-nb-anim-g.png
- 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