Team:Aalto-Helsinki/timeline.css

From 2014.igem.org

(Difference between revisions)
(Created page with "- →* timeline panels *: .timeline li .timeline-panel { width: 46%; float: left; background: #fff; border: 1px solid #d4d4d4; padding: 20px; position: relative; -web...")
 
(48 intermediate revisions not shown)
Line 1: Line 1:
 +
img { border: 0; max-width: 100%; }
 +
 +
.timeline .img-responsive {
 +
  width: 100%;
 +
}
 +
 +
#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 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);
+
}
}
-
+
 
/** panel arrows **/
/** panel arrows **/
.timeline li .timeline-panel:before {
.timeline li .timeline-panel:before {
Line 22: 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: " ";
}
}
-
+
 
.timeline li .timeline-panel:after {
.timeline li .timeline-panel:after {
   position: absolute;
   position: absolute;
Line 45: Line 103:
   border: 0;
   border: 0;
}
}
-
+
 
-
.timeline li.timeline-inverted .timeline-panel {
+
.timeline .entry li.timeline-inverted .timeline-panel {
   float: right;
   float: right;
}
}
-
+
 
 +
.timeline-inverted {
 +
clear:right;
 +
float:right;
 +
}
 +
 
.timeline li.timeline-inverted .timeline-panel:before {
.timeline li.timeline-inverted .timeline-panel:before {
   border-left-width: 0;
   border-left-width: 0;
Line 56: Line 119:
   right: auto;
   right: auto;
}
}
-
+
 
.timeline li.timeline-inverted .timeline-panel:after {
.timeline li.timeline-inverted .timeline-panel:after {
   border-left-width: 0;
   border-left-width: 0;
Line 64: Line 127:
}
}
-
body { background: #333; }
 
-
img { border: 0; max-width: 100%; }
+
/** timeline circle icons **/
-
+
.timeline li .tl-circ {
-
.page-header h1 {
+
  position: absolute;
-
   font-size: 3.26em;
+
  top: 23px;
 +
   left: 106%;
   text-align: center;
   text-align: center;
-
   color: #efefef;
+
  background: #6a8db3;
-
   text-shadow: 1px 1px 0 #000;
+
   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 box structure **/
+
.timeline li.timeline-inverted .timeline-panel {
-
.timeline {
+
margin-left: 6px;
-
  list-style: none;
+
-
  padding: 20px 0 20px;
+
-
  position: relative;
+
}
}
-
+
 
-
.timeline:before {
+
.month {
-
  top: 0;
+
clear:both;
-
  bottom: 0;
+
-
  position: absolute;
+
-
  content: " ";
+
-
  width: 3px;
+
-
  background-color: #eee;
+
-
  left: 50%;
+
-
  margin-left: -1.5px;
+
}
}
-
+
 
-
.tldate {
+
/** timeline content **/
-
  display: block;
+
 
-
  width: 200px;
+
.tl-heading h4 {
-
  background: #414141;
+
   margin: 0;
-
  border: 3px solid #212121;
+
   padding-top: 1em;
-
  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 {
+
.tl-body p, .tl-body ul {
-
   margin-bottom: 25px;
+
   margin-bottom: 0;
-
   position: relative;
+
}
 +
 
 +
.tl-body > p + p {
 +
   margin-top: 5px;
 +
}
 +
 
 +
.tl-body {
 +
  margin-bottom: 1em;
 +
}
 +
 
 +
footer {
 +
clear:both;
 +
}
 +
 
 +
@media (min-width: 992px) {
 +
  .timeline li.entry {
 +
    width: 47vw;
 +
  }
}
}
Line 117: Line 191:
   }
   }
}
}
-
+
 
-
@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);
+
   }
   }
-
+
 
   ul.timeline li .tl-circ {
   ul.timeline li .tl-circ {
     top: 22px;
     top: 22px;
     left: 22px;
     left: 22px;
     margin-left: 0;
     margin-left: 0;
-
+
 
   }
   }
   ul.timeline > li > .tldate {
   ul.timeline > li > .tldate {
     margin: 0;
     margin: 0;
 +
    text-align: left;
   }
   }
-
+
 
   ul.timeline > li > .timeline-panel {
   ul.timeline > li > .timeline-panel {
     float: right;
     float: right;
   }
   }
-
+
 
   ul.timeline > li > .timeline-panel:before {
   ul.timeline > li > .timeline-panel:before {
     border-left-width: 0;
     border-left-width: 0;
Line 153: Line 233:
     right: auto;
     right: auto;
   }
   }
-
+
 
   ul.timeline > li > .timeline-panel:after {
   ul.timeline > li > .timeline-panel:after {
     border-left-width: 0;
     border-left-width: 0;

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

}

Retrieved from "http://2014.igem.org/Team:Aalto-Helsinki/timeline.css"