Team:Aalto-Helsinki/timeline.css

From 2014.igem.org

(Difference between revisions)
 
(24 intermediate revisions not shown)
Line 1: Line 1:
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 11: 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;
   min-height:4000px;
Line 21: 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 30: 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 {
   position: relative;
   position: relative;
-
}
 
-
 
-
.timeline li.entry {
 
-
width: 47vw;
 
}
}
Line 65: Line 66:
   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;
 
-
  -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);
 
   margin-bottom: 25px;
   margin-bottom: 25px;
}
}
Line 84: 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 109: Line 105:
.timeline .entry li.timeline-inverted .timeline-panel {
.timeline .entry li.timeline-inverted .timeline-panel {
-
  float: right;
+
  float: right;
}
}
Line 156: Line 152:
}
}
 +
.month {
 +
clear:both;
 +
}
/** timeline content **/
/** timeline content **/
Line 161: Line 160:
.tl-heading h4 {
.tl-heading h4 {
   margin: 0;
   margin: 0;
-
   color: #c25b4e;
+
   padding-top: 1em;
}
}
Line 170: Line 169:
.tl-body > p + p {
.tl-body > p + p {
   margin-top: 5px;
   margin-top: 5px;
 +
}
 +
 +
.tl-body {
 +
  margin-bottom: 1em;
}
}
footer {
footer {
clear:both;
clear:both;
 +
}
 +
 +
@media (min-width: 992px) {
 +
  .timeline li.entry {
 +
    width: 47vw;
 +
  }
}
}
Line 183: 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 206: 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;
 }

}

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