(added tab stops and cleaned up code a little) |
|||
Line 1: | Line 1: | ||
<html> | <html> | ||
− | |||
<style type="text/css"> | <style type="text/css"> | ||
− | /* | + | /* Use border-box sizing for everything! It's the best thing in the world */ |
+ | #tl-year-container, #tl-year-container * { | ||
+ | -webkit-box-sizing: border-box; | ||
+ | -moz-box-sizing: border-box; | ||
+ | box-sizing: border-box; | ||
+ | } | ||
+ | /* Set up overall container for timeline */ | ||
+ | #tl-year-container { | ||
+ | width: 100%; | ||
+ | position: relative; | ||
+ | clear: both; /* so it falls below the left-floating iGEM logo */ | ||
+ | } | ||
− | /* | + | /* The center line */ |
− | #tl- | + | #tl-line { |
− | + | position: absolute; | |
− | + | width: 3px; | |
− | + | background-color: #4e606e; | |
− | } | + | z-index: -1; |
+ | margin: auto; | ||
+ | left: 0; | ||
+ | right: 0; | ||
+ | top: 0; | ||
+ | bottom: 0; | ||
+ | } | ||
− | /* | + | /* Each month is its own div, so they could be individually loaded into another page */ |
− | #tl-year-container { | + | #tl-year-container .tl-month-container { |
− | + | margin: 3px; | |
− | + | padding: 3px; | |
− | + | overflow: auto; | |
− | + | } | |
− | } | + | |
− | /* | + | /* Month names */ |
− | #tl- | + | #tl-year-container .tl-month-name { |
− | + | text-align: center; | |
− | + | font-color: #4e606e; | |
− | + | background-color: #f2f2f2; | |
− | + | width: 8em; | |
− | + | padding: 8px 1em; | |
− | + | margin: 0 auto; | |
− | + | border-radius: 1em; | |
− | + | /* z-index: 20; */ | |
− | + | } | |
− | } | + | |
− | /* | + | /* Round icons that lie on the center line (come in large and small sizes) */ |
− | #tl-year-container .tl- | + | #tl-year-container .tl-icon-large, #tl-year-container .tl-icon-small { |
− | + | position: relative; | |
− | + | margin: 0 auto; | |
− | + | background-color: #d3d3d3; | |
− | + | overflow: hidden; | |
− | + | clear: both; | |
− | } | + | } |
+ | #tl-year-container .tl-icon-large { | ||
+ | width: 50px; | ||
+ | height: 50px; | ||
+ | top: 25px; | ||
+ | border: 5px solid #d3d3d3; | ||
+ | border-radius: 2em; | ||
+ | } | ||
+ | #tl-year-container .tl-icon-small { | ||
+ | width: 24px; | ||
+ | height: 24px; | ||
+ | top: 12px; | ||
+ | border: 3px solid #d3d3d3; | ||
+ | border-radius: 1em; | ||
+ | } | ||
− | /* | + | /* Contents of tl-icons */ |
− | #tl-year-container .tl- | + | #tl-year-container .tl-icon-large img, #tl-year-container .tl-icon-small img { |
− | + | width: 100%; | |
− | + | height: 100%; | |
− | + | } | |
− | + | #tl-year-container .tl-icon-large p { | |
− | + | font-size: x-large; | |
− | margin: | + | text-align: center; |
− | + | vertical-align: middle; | |
− | + | margin: auto; | |
− | } | + | } |
− | /* | + | /* The events are floats. Left events are used for commentary, and right events for items with actual due dates. */ |
− | + | .tl-event-left, .tl-event-right { | |
− | + | display: inline-block; | |
− | + | border-top: 1px dotted black; | |
− | + | padding-top: 0.5em; | |
− | + | width: 49%; | |
− | clear: both; | + | clear: both; |
− | } | + | margin-bottom: 1.5em; |
− | + | } | |
− | + | .tl-event-left { | |
− | + | text-align: right; | |
− | + | float: left; | |
− | + | padding-left: 1em; | |
− | + | padding-right: 2em; | |
− | } | + | } |
− | + | .tl-event-right { | |
− | + | float: right; | |
− | + | padding-right: 1em; | |
− | + | padding-left: 2em; | |
− | + | } | |
− | + | ||
− | } | + | |
− | + | /* Special additional class for when a left event and a right event are at the same height -- this is used for a major event with extra commentary on it */ | |
− | + | .tl-event-right.tl-alongside { | |
− | + | clear: none !important; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | /* Special additional class for when a left event and a right event are at the same height -- this is used for a major event with extra commentary on it */ | + | |
− | .tl-event-right.tl-alongside { | + | |
− | clear: none !important; | + | |
− | } | + | |
</style> | </style> | ||
− | <div id="tl-year-container"><div id="tl-line"></div> | + | <div id="tl-year-container"> |
− | + | <div id="tl-line"></div> <!--The vertical line--> | |
− | |||
− | |||
− | <div class="tl- | + | <div class="tl-month-container"> |
− | < | + | <h2 class="tl-month-name">Example Month</h2> |
− | + | ||
− | </ | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | <div class="tl-icon-large"><img src="https://static.igem.org/mediawiki/igem.org/d/da/Icons_healthandmedicine.png"></div> | ||
+ | <div class="tl-event-left tl-alongside"> | ||
+ | Here is a paragraph of supplementary text about the event on the right! Boy, is it a cool event. It's going to be so great. | ||
+ | </div> | ||
+ | <div class="tl-event-right tl-alongside"> | ||
+ | <h2>Big Deadline!</h2> | ||
+ | </div> | ||
+ | <div class="tl-icon-small"></div> | ||
+ | <div class="tl-event-left"> | ||
+ | <h3>Look Ahead: Something to Do Ahead of Time</h3> | ||
+ | Here's a notice that teams should plan ahead to do something that isn't due until much later. | ||
+ | </div> | ||
+ | <div class="tl-icon-small"></div> | ||
+ | <div class="tl-event-right"> | ||
+ | <h3>Minor deadline</h3> | ||
+ | </div> | ||
+ | </div> | ||
− | |||
− | |||
− | <div class="tl- | + | <div class="tl-month-container"> |
− | + | <h2 class="tl-month-name">August</h2> | |
− | + | ||
− | + | ||
− | + | ||
− | <h2 | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | <div class="tl-icon-large"><img src="https://static.igem.org/mediawiki/igem.org/d/da/Icons_healthandmedicine.png"></div> | ||
+ | <div class="tl-event-left tl-alongside"> | ||
+ | Make sure to finalize your track preferences, and save your project title and abstract in your Team Information Page. | ||
+ | </div> | ||
+ | <div class="tl-event-right tl-alongside"> | ||
+ | <h2>Track Selection — Title and Abstract</h2> | ||
+ | </div> | ||
+ | <div class="tl-icon-large"></div> | ||
+ | <div class="tl-event-right"> | ||
+ | <h3>Giant Jamboree: Sheraton Hotel Booking Deadline</h3> | ||
+ | </div> | ||
+ | <div class="tl-icon-large"><p>28</p></div> | ||
+ | <div class="tl-event-left tl-alongside">Blah blah final safety forms.</div> | ||
+ | <div class="tl-event-right tl-alongside"> | ||
+ | <h2>Final Safety Form Due</h2> | ||
+ | </div> | ||
+ | <div class="tl-icon-small"></div> | ||
+ | <div class="tl-event-left tl-alongside">Blah blah blah blah, interlab measurement study.</div> | ||
+ | <div class="tl-event-right tl-alongside"> | ||
+ | <h3>Interlab Measurement Study Data Due</h3> | ||
+ | </div> | ||
+ | </div> | ||
− | |||
− | |||
− | <div class="tl- | + | <div class="tl-month-container"> |
− | + | <h2 class="tl-month-name">September</h2> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | <h2 | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | <div class="tl-icon-small"></div> | ||
+ | <div class="tl-event-right"> | ||
+ | <h3>Team Banners Due (optional)</h3> | ||
+ | </div> | ||
+ | <div class="tl-icon-small"></div> | ||
+ | <div class="tl-event-right"> | ||
+ | <h3>Team Rosters Due</h3> | ||
+ | </div> | ||
+ | <div class="tl-icon-large"></div> | ||
+ | <div class="tl-event-right"> | ||
+ | <h2>Giant Jamboree Late Registration Closes (all guests)</h2> | ||
+ | </div> | ||
+ | <div class="tl-icon-large"><img src="https://static.igem.org/mediawiki/igem.org/d/da/Icons_healthandmedicine.png"></div> | ||
+ | <div class="tl-event-left tl-alongside"> | ||
+ | Here is a paragraph about the wiki freeze! Lorem ipsum dolor sit amet, blah blah blah, paragraph of text, lorem ipsum blah blah iGEM is so wonderful. | ||
+ | </div> | ||
+ | <div class="tl-event-right tl-alongside"> | ||
+ | <h2>Wiki Freeze!</h2> | ||
+ | </div> | ||
+ | <div class="tl-icon-large"><img src="https://static.igem.org/mediawiki/igem.org/d/da/Icons_healthandmedicine.png"></div> | ||
+ | <div class="tl-event-left tl-alongside"> | ||
+ | You must send your part submissions by this date. (They do not need to arrive at iGEM Headquarters by this date.) <a href="#">More information about part submissions</a> | ||
+ | </div> | ||
+ | <div class="tl-event-right tl-alongside"> | ||
+ | <h2>Part Submissions (Send by this date)</h2> | ||
+ | </div> | ||
+ | <div class="tl-icon-large"><img src="https://static.igem.org/mediawiki/igem.org/d/da/Icons_healthandmedicine.png"></div> | ||
+ | <div class="tl-event-left tl-alongside"> | ||
+ | Complete your Judging Form! The judges need this in order to evaluate your work correctly. Blah blah blah. | ||
+ | </div> | ||
+ | <div class="tl-event-right tl-alongside"> | ||
+ | <h2>Judging Forms Due</h2> | ||
+ | </div> | ||
+ | <div class="tl-icon-small"></div> | ||
+ | <div class="tl-event-right"> | ||
+ | <h3>Project Keywords Due (optional)</h3> | ||
+ | </div> | ||
+ | <div class="tl-icon-large"></div> | ||
+ | <div class="tl-event-right"> | ||
+ | <h2>Giant Jamboree!!!</h2> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!--Closing tag of #tl-year-container--> | ||
</div> | </div> | ||
</html> | </html> |
Revision as of 17:57, 10 December 2015
Example Month
Here is a paragraph of supplementary text about the event on the right! Boy, is it a cool event. It's going to be so great.
Big Deadline!
Look Ahead: Something to Do Ahead of Time
Here's a notice that teams should plan ahead to do something that isn't due until much later.Minor deadline
August
Make sure to finalize your track preferences, and save your project title and abstract in your Team Information Page.
Track Selection — Title and Abstract
Giant Jamboree: Sheraton Hotel Booking Deadline
Blah blah final safety forms.
Final Safety Form Due
Blah blah blah blah, interlab measurement study.
Interlab Measurement Study Data Due
September
Team Banners Due (optional)
Team Rosters Due
Giant Jamboree Late Registration Closes (all guests)
Here is a paragraph about the wiki freeze! Lorem ipsum dolor sit amet, blah blah blah, paragraph of text, lorem ipsum blah blah iGEM is so wonderful.
Wiki Freeze!
You must send your part submissions by this date. (They do not need to arrive at iGEM Headquarters by this date.) More information about part submissions
Part Submissions (Send by this date)
Complete your Judging Form! The judges need this in order to evaluate your work correctly. Blah blah blah.