|
|
(44 intermediate revisions by 2 users not shown) |
Line 1: |
Line 1: |
− | <html>
| + | #REDIRECT [[Calendar]] |
− | | + | |
− | <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-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-month-container {
| + | |
− | margin: 3px;
| + | |
− | padding: 3px;
| + | |
− | overflow: auto;
| + | |
− | }
| + | |
− | | + | |
− | /* Month names */
| + | |
− | #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-icon-large, #tl-year-container .tl-icon-small {
| + | |
− | position: relative;
| + | |
− | margin: 0 auto;
| + | |
− | background-color: #d3d3d3;
| + | |
− | border: 3px solid #4e606e;
| + | |
− | overflow: hidden;
| + | |
− | clear: both;
| + | |
− | /*vertical-align: middle;*/
| + | |
− | }
| + | |
− | #tl-year-container .tl-icon-large {
| + | |
− | width: 48px;
| + | |
− | height: 48px;
| + | |
− | top: 24px;
| + | |
− | border-radius: 24px;
| + | |
− | }
| + | |
− | #tl-year-container .tl-icon-small {
| + | |
− | width: 24px;
| + | |
− | height: 24px;
| + | |
− | top: 12px;
| + | |
− | border-radius: 12px;
| + | |
− | }
| + | |
− | | + | |
− | /* Contents of tl-icons */
| + | |
− | #tl-year-container .tl-icon-large p {
| + | |
− | width: 100%;
| + | |
− | height: 100%;
| + | |
− | line-height: 100%;
| + | |
− | text-align: center;
| + | |
− | font-size: 24px;
| + | |
− | }
| + | |
− | #tl-year-container .tl-icon-small p {
| + | |
− | width: 100%;
| + | |
− | height: 100%;
| + | |
− | line-height: 100%;
| + | |
− | text-align: center;
| + | |
− | font-size: 12px;
| + | |
− | }
| + | |
− | #tl-year-container .tl-icon-large img, #tl-year-container .tl-icon-small img {
| + | |
− | width: 100%;
| + | |
− | height: 100%;
| + | |
− | }
| + | |
− | | + | |
− | | + | |
− | /* 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;
| + | |
− | 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;
| + | |
− | }
| + | |
− | | + | |
− | </style>
| + | |
− | | + | |
− | <div id="tl-year-container">
| + | |
− | <div id="tl-line"></div> <!--The vertical line-->
| + | |
− | | + | |
− | <div class="tl-month-container" id="example-month">
| + | |
− | <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-large"><p>01</p></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"><p>02</p></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-month-container" id="august">
| + | |
− | <h2 class="tl-month-name">August</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-month-container" id="september">
| + | |
− | <h2 class="tl-month-name">September</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>
| + | |
− | | + | |
− | </html>
| + | |