"

From 2014.igem.org

Revision as of 08:08, 20 August 2014 (view source) Vaakapallo (Talk | contribs) ← Older edit		Latest revision as of 20:57, 14 October 2014 (view source) Lauralaa (Talk | contribs)
(47 intermediate revisions not shown)
Line 1:		Line 1:
-	body { background: #333; }
-
	img { border: 0; max-width: 100%; }		img { border: 0; max-width: 100%; }
		+
		+	.timeline .img-responsive {
		+	width: 100%;
		+	}
		+
		+	#tlsmallimg {
		+	width: 50%;
		+	}
	.page-header h1 {		.page-header h1 {
Line 13:		Line 19:
	.timeline {		.timeline {
	list-style: none;		list-style: none;
-	padding: 20px 0 20px;	+	padding: 0px 20px 0px 0px;
	position: relative;		position: relative;
		+	min-height:4000px;
	}		}
Line 22:		Line 29:
	position: absolute;		position: absolute;
	content: " ";		content: " ";
-	width: 3px;	+	width: 4px;
-	background-color: #eee;	+	background-color: rgba(194, 240, 236, 0.42);
-	left: 50%;	+	left: 49.4%;
	margin-left: -1.5px;		margin-left: -1.5px;
	}		}
Line 31:		Line 38:
	display: block;		display: block;
	width: 200px;		width: 200px;
-	background: #414141;	+	background: #ffffff;
-	border: 3px solid #212121;	+
-	color: #ededed;	+
	margin: 0 auto;		margin: 0 auto;
-	padding: 3px 0;	+	padding: 20px 0;
-	font-weight: bold;	+	font-size: x-large;
	text-align: center;		text-align: center;
-	-webkit-box-shadow: 0 0 11px rgba(0,0,0,0.35);
	}		}
	.timeline li {		.timeline li {
-	margin-bottom: 25px;
	position: relative;		position: relative;
	}		}
Line 50:		Line 53:
	display: table;		display: table;
	}		}
-	.timeline li:after {	+	.timeline .tldate {
	clear: both;		clear: both;
	}		}
Line 60:		Line 63:
	/** timeline panels **/		/** timeline panels **/
	.timeline li .timeline-panel {		.timeline li .timeline-panel {
-	width: 46%;	+	width: 99%;
	float: left;		float: left;
	background: #fff;		background: #fff;
-	border: 1px solid #d4d4d4;	+	border: 1px solid rgba(143, 202, 197, 0.67);
		+	border-radius: 20px;
	padding: 20px;		padding: 20px;
	position: relative;		position: relative;
-	-webkit-border-radius: 8px;	+	margin-bottom: 25px;
-	-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);	+
	}		}
Line 81:		Line 80:
	display: inline-block;		display: inline-block;
	border-top: 15px solid transparent;		border-top: 15px solid transparent;
-	border-left: 15px solid #ccc;	+	border-left: 15px solid rgba(143, 202, 197, 0.67);
-	border-right: 0 solid #ccc;	+	border-right: 0 solid rgba(143, 202, 197, 0.67);
	border-bottom: 15px solid transparent;		border-bottom: 15px solid transparent;
	content: " ";		content: " ";
Line 105:		Line 104:
	}		}
-	.timeline li.timeline-inverted .timeline-panel {	+	.timeline .entry li.timeline-inverted .timeline-panel {
	float: right;		float: right;
		+	}
		+
		+	.timeline-inverted {
		+	clear:right;
		+	float:right;
	}		}
Line 128:		Line 132:
	position: absolute;		position: absolute;
	top: 23px;		top: 23px;
-	left: 50%;	+	left: 106%;
	text-align: center;		text-align: center;
	background: #6a8db3;		background: #6a8db3;
Line 141:		Line 145:
	border-bottom-right-radius: 50%;		border-bottom-right-radius: 50%;
	border-bottom-left-radius: 50%;		border-bottom-left-radius: 50%;
-	z-index: 99999;	+	z-index: 1024;
	}		}
		+	.timeline li.timeline-inverted .timeline-panel {
		+	margin-left: 6px;
		+	}
		+
		+	.month {
		+	clear:both;
		+	}
	/** timeline content **/		/** timeline content **/
Line 149:		Line 160:
	.tl-heading h4 {		.tl-heading h4 {
	margin: 0;		margin: 0;
-	color: #c25b4e;	+	padding-top: 1em;
	}		}
Line 158:		Line 169:
	.tl-body > p + p {		.tl-body > p + p {
	margin-top: 5px;		margin-top: 5px;
		+	}
		+
		+	.tl-body {
		+	margin-bottom: 1em;
		+	}
		+
		+	footer {
		+	clear:both;
		+	}
		+
		+	@media (min-width: 992px) {
		+	.timeline li.entry {
		+	width: 47vw;
		+	}
	}		}
Line 167:		Line 192:
	}		}
-	@media (max-width: 700px) {	+	@media (max-width: 992px) {
		+
		+	.timeline li.entry {
		+	width: 100%;
		+	}
		+
	.page-header h1 { font-size: 1.8em; }		.page-header h1 { font-size: 1.8em; }
	ul.timeline:before {		ul.timeline:before {
-	left: 40px;	+	left: 1px;
	}		}
-	.tldate { width: 140px; }	+	.tldate {
		+	width: 200px;
		+	}
	ul.timeline li .timeline-panel {		ul.timeline li .timeline-panel {
-	width: calc(100% - 90px);	+	width: 95%;
-	width: -moz-calc(100% - 90px);	+
-	width: -webkit-calc(100% - 90px);	+
	}		}
Line 190:		Line 220:
	ul.timeline > li > .tldate {		ul.timeline > li > .tldate {
	margin: 0;		margin: 0;
		+	text-align: left;
	}		}

---

Latest revision as of 20:57, 14 October 2014

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

.timeline .img-responsive {

 width: 100%;

}

1. tlsmallimg {

 width: 50%;

}

.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: 1px solid rgba(143, 202, 197, 0.67);
 border-radius: 20px;
 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: 15px 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;
 padding-top: 1em;

}

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

 margin-bottom: 0;

}

.tl-body > p + p {

 margin-top: 5px;

}

.tl-body {

 margin-bottom: 1em;

}

footer { clear:both; }

@media (min-width: 992px) {

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

}

/** 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: 1px;
 }
 
 .tldate {
   width: 200px;
 }

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

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

}