"

From 2014.igem.org

Revision as of 17:57, 3 September 2014 (view source) Lauralaa (Talk | contribs) ← Older edit		Revision as of 18:05, 3 September 2014 (view source) Lauralaa (Talk | contribs) Newer edit →
Line 184:		Line 184:
	}		}
-	.tldate { width: 140px; }	+	.tldate {
		+	width: 200px;
		+	}
	ul.timeline li .timeline-panel {		ul.timeline li .timeline-panel {
-	width: calc(100% - 90px);	+	width: 90%;
-	width: -moz-calc(100% - 90px);	+
-	width: -webkit-calc(100% - 90px);	+
	}		}

---

Revision as of 18:05, 3 September 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: 0px 20px 0px 0px;
 position: relative;
 min-height:4000px;

}

.timeline:before {

 top: 0;
 bottom: 0;
 position: absolute;
 content: " ";
 width: 4px;
 background-color: rgba(194, 240, 236, 0.42);
 left: 49.4%;
 margin-left: -1.5px;

}

.tldate {

 display: block;
 width: 200px;
 background: #ffffff;
 margin: 0 auto;
 padding: 20px 0;
 font-size: x-large;
 text-align: center;

}

.timeline li {

 position: relative;

}

.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: 2px solid rgba(143, 202, 197, 0.67);
 padding: 20px;
 position: relative;
 margin-bottom: 25px;

}

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

 position: absolute;
 top: 26px;
 right: -15px;
 display: inline-block;
 border-top: 15px solid transparent;
 border-left: 13px solid rgba(143, 202, 197, 0.67);
 border-right: 0 solid rgba(143, 202, 197, 0.67);
 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 .timeline-panel { margin-left: 6px; }

.month { clear:both; }

/** timeline content **/

.tl-heading h4 {

 margin: 0;

}

.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: 992px) {

 .timeline li.entry {
   width: 100%;
 }

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

 ul.timeline li .timeline-panel {
   width: 90%;
 }

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

 }
 ul.timeline > li > .tldate {
   margin: 0;
   text-align: left;
 }

 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;
 }

}

@media (min-width: 992px) {

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

}