Team:Aalto-Helsinki/timeline.css

From 2014.igem.org

(Difference between revisions)

Revision as of 11:42, 20 August 2014

img { border: 0; max-width: 100%; }

.page-header h1 {

 font-size: 3.26em;
 text-align: center;
 color: #efefef;
 text-shadow: 1px 1px 0 #000;

}

/** timeline box structure **/ .timeline {

 list-style: none;
 padding: 20px 0 20px;
 position: relative;
 min-height:100vh;

}

.timeline:before {

 top: 0;
 bottom: 0;
 position: absolute;
 content: " ";
 width: 3px;
 background-color: #eee;
 left: 50%;
 margin-left: -1.5px;

}

.tldate {

 display: block;
 width: 200px;
 background: #414141;
 border: 3px solid #212121;
 color: #ededed;
 margin: 0 auto;
 padding: 3px 0;
 font-weight: bold;
 text-align: center;
 -webkit-box-shadow: 0 0 11px rgba(0,0,0,0.35);

}

.timeline li {

 margin-bottom: 25px;
 position: relative;

}

.timeline li.entry { width: 47vw; }

.timeline li:before, .timeline li:after {

 content: " ";
 display: table;

} .timeline .tldate {

 clear: both;

} .timeline li:before, .timeline li:after {

 content: " ";
 display: table;

}

/** timeline panels **/ .timeline li .timeline-panel {

 width: 99%;
 float: left;
 background: #fff;
 border: 1px solid #d4d4d4;
 padding: 20px;
 position: relative;
 -webkit-border-radius: 8px;
 -moz-border-radius: 8px;
 border-radius: 8px;
 -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
 -moz-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
 box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);

}

/** panel arrows **/ .timeline li .timeline-panel:before {

 position: absolute;
 top: 26px;
 right: -15px;
 display: inline-block;
 border-top: 15px solid transparent;
 border-left: 15px solid #ccc;
 border-right: 0 solid #ccc;
 border-bottom: 15px solid transparent;
 content: " ";

}

.timeline li .timeline-panel:after {

 position: absolute;
 top: 27px;
 right: -14px;
 display: inline-block;
 border-top: 14px solid transparent;
 border-left: 14px solid #fff;
 border-right: 0 solid #fff;
 border-bottom: 14px solid transparent;
 content: " ";

} .timeline li .timeline-panel.noarrow:before, .timeline li .timeline-panel.noarrow:after {

 top:0;
 right:0;
 display: none;
 border: 0;

}

.timeline .entry li.timeline-inverted .timeline-panel {

 	float: right;

}

.timeline-inverted { clear:right; float:right; }

.timeline li.timeline-inverted .timeline-panel:before {

 border-left-width: 0;
 border-right-width: 15px;
 left: -15px;
 right: auto;

}

.timeline li.timeline-inverted .timeline-panel:after {

 border-left-width: 0;
 border-right-width: 14px;
 left: -14px;
 right: auto;

}

/** timeline circle icons **/ .timeline li .tl-circ {

 position: absolute;
 top: 23px;
 left: 106%;
 text-align: center;
 background: #6a8db3;
 color: #fff;
 width: 35px;
 height: 35px;
 line-height: 35px;
 margin-left: -16px;
 border: 3px solid #90acc7;
 border-top-right-radius: 50%;
 border-top-left-radius: 50%;
 border-bottom-right-radius: 50%;
 border-bottom-left-radius: 50%;
 z-index: 1024;

}

.timeline li.timeline-inverted .tl-circ { left:-4%; }

/** timeline content **/

.tl-heading h4 {

 margin: 0;
 color: #c25b4e;

}

.tl-body p, .tl-body ul {

 margin-bottom: 0;

}

.tl-body > p + p {

 margin-top: 5px;

}

footer { clear:both; }

/** media queries **/ @media (max-width: 991px) {

 .timeline li .timeline-panel {
   width: 44%;
 }

}

@media (max-width: 700px) {

 .page-header h1 { font-size: 1.8em; }
 
 ul.timeline:before {
   left: 40px;
 }
 
 .tldate { width: 140px; }

 ul.timeline li .timeline-panel {
   width: calc(100% - 90px);
   width: -moz-calc(100% - 90px);
   width: -webkit-calc(100% - 90px);
 }

 ul.timeline li .tl-circ {
   top: 22px;
   left: 22px;
   margin-left: 0;

 }
 ul.timeline > li > .tldate {
   margin: 0;
 }

 ul.timeline > li > .timeline-panel {
   float: right;
 }

 ul.timeline > li > .timeline-panel:before {
   border-left-width: 0;
   border-right-width: 15px;
   left: -15px;
   right: auto;
 }

 ul.timeline > li > .timeline-panel:after {
   border-left-width: 0;
   border-right-width: 14px;
   left: -14px;
   right: auto;
 }

}