Difference between revisions of "Dev/Timeline"

(added tab stops and cleaned up code a little)
Line 1: Line 1:
 
<html>
 
<html>
−
<!-- <link rel="stylesheet" type="text/css" href="https://2016.igem.org/HQ:CSS/Timeline?action=raw&ctype=text/css"> -->
 
  
 
<style type="text/css">
 
<style type="text/css">
−
/* 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;
 +
    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 */
 +
}
  
−
/* Use border-box sizing for everything! It's the best thing in the world */
+
/* The center line */
−
#tl-year-container, #tl-year-container * {
+
#tl-line {
−
  -webkit-box-sizing: border-box;
+
position: absolute;
−
    -moz-box-sizing: border-box;
+
width: 3px;
−
          box-sizing: border-box;
+
background-color: #4e606e;
−
}
+
z-index: -1;
 +
margin: auto;
 +
left: 0;
 +
right: 0;
 +
top: 0;
 +
bottom: 0;
 +
}
  
−
/* Set up overall container for timeline */
+
/* Each month is its own div, so they could be individually loaded into another page */
−
#tl-year-container {
+
#tl-year-container .tl-month-container {
−
width: 100%;
+
margin: 3px;
−
position: relative;
+
padding: 3px;
−
/*border: 1px solid #ccc;*/
+
overflow: auto;
−
clear: both; /* so it falls below the left-floating iGEM logo */
+
}
−
}
+
  
−
/* The center line */
+
/* Month names */
−
#tl-line {
+
#tl-year-container .tl-month-name {
−
position: absolute;
+
text-align: center;
−
width: 3px;
+
font-color: #4e606e;
−
background-color: #4e606e;
+
background-color: #f2f2f2;
−
z-index: -1;
+
width: 8em;
−
margin: auto;
+
padding: 8px 1em;
−
left: 0;
+
margin: 0 auto;
−
right: 0;
+
border-radius: 1em;
−
top: 0;
+
/* z-index: 20; */
−
bottom: 0;
+
}
−
}
+
  
−
/* Each month is its own div, so they could be individually loaded into another page */
+
/* Round icons that lie on the center line (come in large and small sizes) */
−
#tl-year-container .tl-month-container {
+
#tl-year-container .tl-icon-large, #tl-year-container .tl-icon-small {
−
/*width: 100%;*/
+
position: relative;
−
/*border: 1px solid green;*/
+
margin: 0 auto;
−
margin: 3px;
+
background-color: #d3d3d3;
−
padding: 3px;
+
overflow: hidden;
−
overflow: auto;
+
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;
 +
}
  
−
/* Month names */
+
/* Contents of tl-icons */
−
#tl-year-container .tl-month-name {
+
#tl-year-container .tl-icon-large img, #tl-year-container .tl-icon-small img {
−
text-align: center;
+
width: 100%;
−
font-color: #4e606e;
+
height: 100%;
−
background-color: #f2f2f2;
+
}
−
width: 8em;
+
#tl-year-container .tl-icon-large p {
−
padding: 8px 1em;
+
font-size: x-large;
−
margin: 0 auto;
+
text-align: center;
−
border-radius: 1em;
+
vertical-align: middle;
−
/* z-index: 20; */
+
margin: auto;
−
}
+
}
  
−
/* Round icons that lie on the center line (come in large and small sizes) */
+
/* The events are floats. Left events are used for commentary, and right events for items with actual due dates. */
−
#tl-year-container .tl-icon-large, #tl-year-container .tl-icon-small {
+
.tl-event-left, .tl-event-right {
−
position: relative;
+
display: inline-block;
−
margin: 0 auto;
+
border-top: 1px dotted black;
−
background-color: #d3d3d3;
+
padding-top: 0.5em;
−
overflow: hidden;
+
width: 49%;
−
clear: both;
+
clear: both;
−
}
+
margin-bottom: 1.5em;
−
#tl-year-container .tl-icon-large {
+
}
−
width: 50px;
+
.tl-event-left {
−
height: 50px;
+
text-align: right;
−
top: 25px;
+
float: left;
−
border: 5px solid #d3d3d3;
+
padding-left: 1em;
−
border-radius: 2em;
+
padding-right: 2em;
−
}
+
}
−
#tl-year-container .tl-icon-small {
+
.tl-event-right {
−
width: 24px;
+
float: right;
−
height: 24px;
+
padding-right: 1em;
−
top: 12px;
+
padding-left: 2em;
−
border: 3px solid #d3d3d3;
+
}
−
border-radius: 1em;
+
−
}
+
  
−
/* Contents of tl-icons */
+
/* 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-icon-large img, #tl-year-container .tl-icon-small img {
+
.tl-event-right.tl-alongside {
−
width: 100%;
+
clear: none !important;
−
height: 100%;
+
}
−
}
+
−
#tl-year-container .tl-icon-large p {
+
−
font-size: x-large;
+
−
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 {
+
−
/*position: relative;*/
+
−
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>
 
</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-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-month-container">
−
<div class="tl-event-left tl-alongside">
+
<h2 class="tl-month-name">Example Month</h2>
−
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-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-month-container">
 
−
<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-month-container">
−
<div class="tl-event-left tl-alongside">
+
<h2 class="tl-month-name">August</h2>
−
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 &mdash; 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-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 &mdash; 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">
 
−
<h2 class="tl-month-name">September</h2>
 
  
−
<div class="tl-icon-small"></div>
+
<div class="tl-month-container">
−
<div class="tl-event-right">
+
<h2 class="tl-month-name">September</h2>
−
<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>
+
  
 +
<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

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.

Judging Forms Due

Project Keywords Due (optional)

Giant Jamboree!!!