Difference between revisions of "Dev/Timeline"

Revision as of 17:42, 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

28

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.

@@ Line 5: / Line 5: @@
 /* oh good this is going to be hard */
-* {
+/* 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;
@@ Line 11: / Line 13: @@
 }
+/* Set up overall container for timeline */
 #tl-year-container {
 width: 100%;
 position: relative;
 /*border: 1px solid #ccc;*/
-clear: both;
+clear: both; /* so it falls below the left-floating iGEM logo */
 }
-div.tl-month-container {
+/* 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 {
 /*width: 100%;*/
 /*border: 1px solid green;*/
@@ Line 26: / Line 43: @@
 }
-#tl-year-container h2.tl-month-name {
+/* Month names */
+#tl-year-container .tl-month-name {
 text-align: center;
 font-color: #4e606e;
@@ Line 34: / Line 52: @@
 margin: 0 auto;
 border-radius: 1em;
-z-index: 20;
+/* z-index: 20; */
 }
-#tl-year-container .tl-icon-large {
+/* 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;
 top: 25px;
-width: 45px;
-height: 45px;
 margin: 0 auto;
 background-color: #d3d3d3;
-border: 5px solid #d3d3d3;
+border: solid #d3d3d3;
-border-radius: 2em;
 overflow: hidden;
 clear: both;
 }
+#tl-year-container .tl-icon-large {
+width: 45px;
+height: 45px;
+border: 5px;
+border-radius: 2em;
+}
 #tl-year-container .tl-icon-small {
-/* WRITE THIS NEXT */
+width: 25px;
+height: 25px;
+border: 3px;
+border-radius: 1em;
 }
+/* Contents of tl-icons */
 #tl-year-container .tl-icon-large img, #tl-year-container .tl-icon-small img {
 width: 100%;
@@ Line 65: / Line 90: @@
 }
-#tl-line {
+/* The events are floats. Left events are used for commentary, and right events for items with actual due dates. */
-position: absolute;
-width: 3px;
-background-color: #4e606e;
-z-index: -1;
-margin: auto;
-left: 0;
-right: 0;
-top: 0;
-bottom: 0;
-}
 .tl-event-left, .tl-event-right {
 /*position: relative;*/
@@ Line 98: / Line 112: @@
 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>
@@ Line 119: / Line 134: @@
 <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>