|
|
| (38 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: 4px;
| + | |
| − | background-color: #d3d3d3;
| + | |
| − | 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;
| + | |
| − | border: 4px solid #d3d3d3;
| + | |
| − | /* 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: #f2f2f2;
| + | |
| − | border: 4px solid #d3d3d3;
| + | |
| − | overflow: hidden;
| + | |
| − | clear: both;
| + | |
| − | /*vertical-align: middle;*/
| + | |
| − | }
| + | |
| − | #tl-year-container .tl-icon-large {
| + | |
| − | width: 48px;
| + | |
| − | height: 48px;
| + | |
| − | top: 24px;
| + | |
| − | border-radius: 12px;
| + | |
| − | }
| + | |
| − | #tl-year-container .tl-icon-small {
| + | |
| − | width: 28px;
| + | |
| − | height: 28px;
| + | |
| − | top: 14px;
| + | |
| − | border-radius: 7px;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* 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: 14px;
| + | |
| − | }
| + | |
| − | #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-year-container .tl-event-left, #tl-year-container .tl-event-right {
| + | |
| − | display: inline-block;
| + | |
| − | border-top: 1px dotted black;
| + | |
| − | padding-top: 5px;
| + | |
| − | width: 49%;
| + | |
| − | clear: both;
| + | |
| − | margin-bottom: 1.5em;
| + | |
| − | }
| + | |
| − | #tl-year-container .tl-event-left > *:first-child, #tl-year-container .tl-event-right > *:first-child {
| + | |
| − | padding-top: 0;
| + | |
| − | }
| + | |
| − | #tl-year-container .tl-event-left {
| + | |
| − | text-align: right;
| + | |
| − | float: left;
| + | |
| − | padding-left: 1em;
| + | |
| − | padding-right: 2em;
| + | |
| − | }
| + | |
| − | #tl-year-container .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-year-container .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>!</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"><p>02</p></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"><p>07</p></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"><p>26</p></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"><p>28</p></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"><p>01</p></div>
| + | |
| − | <div class="tl-event-right">
| + | |
| − | <h3>Team Banners Due (optional)</h3>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="tl-icon-small"><p>11</p></div>
| + | |
| − | <div class="tl-event-right">
| + | |
| − | <h3>Team Rosters Due</h3>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="tl-icon-large"><p>11</p></div>
| + | |
| − | <div class="tl-event-right">
| + | |
| − | <h2>Giant Jamboree Late Registration Closes (all guests)</h2>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="tl-icon-large"><p>18</p></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"><p>18</p></div>
| + | |
| − | <div class="tl-event-right">
| + | |
| − | <h3>Project Keywords Due (optional)</h3>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="tl-icon-large"><p>24</p></div>
| + | |
| − | <div class="tl-event-right">
| + | |
| − | <h2>Giant Jamboree!!!</h2>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <!--Closing tag of #tl-year-container-->
| + | |
| − | </div>
| + | |
| − | | + | |
| − | </html>
| + | |
