Team:Aalto-Helsinki/timeline.css
From 2014.igem.org
Vaakapallo (Talk | contribs) |
|||
(29 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 | + | padding: 0px 20px 0px 0px; |
position: relative; | position: relative; | ||
- | min-height: | + | min-height:4000px; |
} | } | ||
Line 21: | Line 29: | ||
position: absolute; | position: absolute; | ||
content: " "; | content: " "; | ||
- | width: | + | width: 4px; |
- | background-color: | + | background-color: rgba(194, 240, 236, 0.42); |
- | left: | + | left: 49.4%; |
margin-left: -1.5px; | margin-left: -1.5px; | ||
} | } | ||
Line 30: | Line 38: | ||
display: block; | display: block; | ||
width: 200px; | width: 200px; | ||
- | background: # | + | background: #ffffff; |
- | + | ||
- | + | ||
margin: 0 auto; | margin: 0 auto; | ||
- | padding: | + | padding: 20px 0; |
- | font- | + | font-size: x-large; |
text-align: center; | text-align: center; | ||
- | |||
} | } | ||
.timeline li { | .timeline li { | ||
- | |||
position: relative; | position: relative; | ||
- | |||
- | |||
- | |||
- | |||
} | } | ||
Line 66: | Line 66: | ||
float: left; | float: left; | ||
background: #fff; | background: #fff; | ||
- | border: 1px solid | + | border: 1px solid rgba(143, 202, 197, 0.67); |
+ | border-radius: 20px; | ||
padding: 20px; | padding: 20px; | ||
position: relative; | position: relative; | ||
- | - | + | 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 | + | border-left: 15px solid rgba(143, 202, 197, 0.67); |
- | border-right: 0 solid | + | border-right: 0 solid rgba(143, 202, 197, 0.67); |
border-bottom: 15px solid transparent; | border-bottom: 15px solid transparent; | ||
content: " "; | content: " "; | ||
Line 113: | Line 109: | ||
.timeline-inverted { | .timeline-inverted { | ||
+ | clear:right; | ||
float:right; | float:right; | ||
} | } | ||
Line 135: | Line 132: | ||
position: absolute; | position: absolute; | ||
top: 23px; | top: 23px; | ||
- | left: | + | left: 106%; |
text-align: center; | text-align: center; | ||
background: #6a8db3; | background: #6a8db3; | ||
Line 151: | Line 148: | ||
} | } | ||
- | .timeline li.timeline-inverted . | + | .timeline li.timeline-inverted .timeline-panel { |
- | left: | + | margin-left: 6px; |
} | } | ||
+ | .month { | ||
+ | clear:both; | ||
+ | } | ||
/** timeline content **/ | /** timeline content **/ | ||
Line 160: | Line 160: | ||
.tl-heading h4 { | .tl-heading h4 { | ||
margin: 0; | margin: 0; | ||
- | + | padding-top: 1em; | |
} | } | ||
Line 169: | 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 182: | Line 192: | ||
} | } | ||
- | @media (max-width: | + | @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: | + | left: 1px; |
} | } | ||
- | .tldate { width: | + | .tldate { |
+ | width: 200px; | ||
+ | } | ||
ul.timeline li .timeline-panel { | ul.timeline li .timeline-panel { | ||
- | width: | + | width: 95%; |
- | + | ||
- | + | ||
} | } | ||
Line 205: | 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%;
}
- 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; }
}