Team:Evry/CSS/timeline
From 2014.igem.org
(29 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
+ | #cd-timeline h2 { | ||
+ | color: #000; | ||
+ | font-weight: bold; | ||
+ | } | ||
+ | |||
+ | #timeline { | ||
+ | color: #262829 !important; | ||
+ | background-color: #003c54 !important; | ||
+ | } | ||
+ | |||
/* -------------------------------- | /* -------------------------------- | ||
Line 4: | Line 14: | ||
-------------------------------- */ | -------------------------------- */ | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
img { | img { | ||
max-width: 100%; | max-width: 100%; | ||
} | } | ||
- | |||
h1, h2 { | h1, h2 { | ||
- | font-family: | + | font-family: Roboto, sans-serif; |
- | + | } | |
- | } | + | |
- | + | ||
/* -------------------------------- | /* -------------------------------- | ||
Line 60: | Line 44: | ||
-------------------------------- */ | -------------------------------- */ | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
#cd-timeline { | #cd-timeline { | ||
Line 87: | Line 50: | ||
margin-top: 2em; | margin-top: 2em; | ||
margin-bottom: 2em; | margin-bottom: 2em; | ||
- | text-align:left; | + | text-align:left !important; |
} | } | ||
#cd-timeline::before { | #cd-timeline::before { | ||
Line 98: | Line 61: | ||
width: 4px; | width: 4px; | ||
background: #d7e4ed; | background: #d7e4ed; | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
} | } | ||
Line 124: | Line 77: | ||
.cd-timeline-block:last-child { | .cd-timeline-block:last-child { | ||
margin-bottom: 0; | margin-bottom: 0; | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
} | } | ||
Line 145: | Line 87: | ||
border-radius: 50%; | border-radius: 50%; | ||
box-shadow: 0 0 0 4px white, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05); | box-shadow: 0 0 0 4px white, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05); | ||
+ | -webkit-transform: translateZ(0); | ||
+ | -webkit-backface-visibility: hidden; | ||
} | } | ||
+ | |||
+ | .cssanimations .cd-timeline-img.is-hidden { | ||
+ | visibility: hidden; | ||
+ | } | ||
+ | .cssanimations .cd-timeline-img.bounce-in { | ||
+ | visibility: visible; | ||
+ | -webkit-animation: cd-bounce-1 0.6s; | ||
+ | -moz-animation: cd-bounce-1 0.6s; | ||
+ | animation: cd-bounce-1 0.6s; | ||
+ | } | ||
+ | |||
+ | .cssanimations .cd-timeline-content.is-hidden { | ||
+ | visibility: hidden; | ||
+ | } | ||
+ | .cssanimations .cd-timeline-content.bounce-in { | ||
+ | visibility: visible; | ||
+ | -webkit-animation: cd-bounce-2 0.6s; | ||
+ | -moz-animation: cd-bounce-2 0.6s; | ||
+ | animation: cd-bounce-2 0.6s; | ||
+ | } | ||
+ | |||
.cd-timeline-img img { | .cd-timeline-img img { | ||
display: block; | display: block; | ||
Line 156: | Line 121: | ||
margin-top: -12px; | margin-top: -12px; | ||
} | } | ||
- | .cd-timeline-img.cd- | + | .cd-timeline-img.cd-biology { |
background: #75ce66; | background: #75ce66; | ||
} | } | ||
- | .cd-timeline-img.cd- | + | .cd-timeline-img.cd-bioinfo { |
background: #c03b44; | background: #c03b44; | ||
} | } | ||
- | .cd-timeline-img.cd- | + | .cd-timeline-img.cd-humanpractice { |
background: #f0ca45; | background: #f0ca45; | ||
} | } | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
@-webkit-keyframes cd-bounce-1 { | @-webkit-keyframes cd-bounce-1 { | ||
Line 258: | Line 204: | ||
.cd-timeline-content h2 { | .cd-timeline-content h2 { | ||
color: #303e49; | color: #303e49; | ||
+ | margin-top: 0px !important; | ||
} | } | ||
.cd-timeline-content p, .cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date { | .cd-timeline-content p, .cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date { | ||
Line 265: | Line 212: | ||
.cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date { | .cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date { | ||
display: inline-block; | display: inline-block; | ||
+ | color: #000; | ||
} | } | ||
.cd-timeline-content p { | .cd-timeline-content p { | ||
Line 307: | Line 255: | ||
font-size: 14px; | font-size: 14px; | ||
font-size: 0.875rem; | font-size: 0.875rem; | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
} | } | ||
} | } | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
@-webkit-keyframes cd-bounce-2 { | @-webkit-keyframes cd-bounce-2 { | ||
0% { | 0% { |
Latest revision as of 03:14, 18 October 2014
- cd-timeline h2 {
color: #000; font-weight: bold; }
- timeline {
color: #262829 !important; background-color: #003c54 !important; }
/* --------------------------------
Primary style
*/
img {
max-width: 100%;
} h1, h2 {
font-family: Roboto, sans-serif;
} /* --------------------------------
Modules - reusable parts of our design
*/
.cd-container {
/* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */ width: 90%; max-width: 1170px; margin: 0 auto;
} .cd-container::after {
/* clearfix */ content: ; display: table; clear: both;
}
/* --------------------------------
Main components
*/
- cd-timeline {
position: relative; padding: 2em 0; margin-top: 2em; margin-bottom: 2em; text-align:left !important;
}
- cd-timeline::before {
/* this is the vertical line */ content: ; position: absolute; top: 0; left: 18px; height: 100%; width: 4px; background: #d7e4ed;
}
.cd-timeline-block {
position: relative; margin: 2em 0;
} .cd-timeline-block:after {
content: ""; display: table; clear: both;
} .cd-timeline-block:first-child {
margin-top: 0;
} .cd-timeline-block:last-child {
margin-bottom: 0;
}
.cd-timeline-img {
position: absolute; top: 0; left: 0; width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 0 0 4px white, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05); -webkit-transform: translateZ(0); -webkit-backface-visibility: hidden;
}
.cssanimations .cd-timeline-img.is-hidden {
visibility: hidden; } .cssanimations .cd-timeline-img.bounce-in { visibility: visible; -webkit-animation: cd-bounce-1 0.6s; -moz-animation: cd-bounce-1 0.6s; animation: cd-bounce-1 0.6s; }
.cssanimations .cd-timeline-content.is-hidden {
visibility: hidden; } .cssanimations .cd-timeline-content.bounce-in { visibility: visible; -webkit-animation: cd-bounce-2 0.6s; -moz-animation: cd-bounce-2 0.6s; animation: cd-bounce-2 0.6s; }
.cd-timeline-img img {
display: block; width: 24px; height: 24px; position: relative; left: 50%; top: 50%; margin-left: -12px; margin-top: -12px;
} .cd-timeline-img.cd-biology {
background: #75ce66;
} .cd-timeline-img.cd-bioinfo {
background: #c03b44;
} .cd-timeline-img.cd-humanpractice {
background: #f0ca45;
}
@-webkit-keyframes cd-bounce-1 {
0% { opacity: 0; -webkit-transform: scale(0.5); }
60% { opacity: 1; -webkit-transform: scale(1.2); }
100% { -webkit-transform: scale(1); }
} @-moz-keyframes cd-bounce-1 {
0% { opacity: 0; -moz-transform: scale(0.5); }
60% { opacity: 1; -moz-transform: scale(1.2); }
100% { -moz-transform: scale(1); }
} @keyframes cd-bounce-1 {
0% { opacity: 0; -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); transform: scale(0.5); }
60% { opacity: 1; -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); }
100% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); }
} .cd-timeline-content {
position: relative; margin-left: 60px; background: white; border-radius: 0.25em; padding: 1em; box-shadow: 0 3px 0 #d7e4ed;
} .cd-timeline-content:after {
content: ""; display: table; clear: both;
} .cd-timeline-content h2 {
color: #303e49; margin-top: 0px !important;
} .cd-timeline-content p, .cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date {
font-size: 13px; font-size: 0.8125rem;
} .cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date {
display: inline-block; color: #000;
} .cd-timeline-content p {
margin: 1em 0; line-height: 1.6;
} .cd-timeline-content .cd-read-more {
float: right; padding: .8em 1em; background: #acb7c0; color: white; border-radius: 0.25em;
} .no-touch .cd-timeline-content .cd-read-more:hover {
background-color: #bac4cb;
} .cd-timeline-content .cd-date {
float: left; padding: .8em 0; opacity: .7;
} .cd-timeline-content::before {
content: ; position: absolute; top: 16px; right: 100%; height: 0; width: 0; border: 7px solid transparent; border-right: 7px solid white;
} @media only screen and (min-width: 768px) {
.cd-timeline-content h2 { font-size: 20px; font-size: 1.25rem; } .cd-timeline-content p { font-size: 16px; font-size: 1rem; } .cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date { font-size: 14px; font-size: 0.875rem; }
}
@-webkit-keyframes cd-bounce-2 {
0% { opacity: 0; -webkit-transform: translateX(-100px); }
60% { opacity: 1; -webkit-transform: translateX(20px); }
100% { -webkit-transform: translateX(0); }
} @-moz-keyframes cd-bounce-2 {
0% { opacity: 0; -moz-transform: translateX(-100px); }
60% { opacity: 1; -moz-transform: translateX(20px); }
100% { -moz-transform: translateX(0); }
} @keyframes cd-bounce-2 {
0% { opacity: 0; -webkit-transform: translateX(-100px); -moz-transform: translateX(-100px); -ms-transform: translateX(-100px); -o-transform: translateX(-100px); transform: translateX(-100px); }
60% { opacity: 1; -webkit-transform: translateX(20px); -moz-transform: translateX(20px); -ms-transform: translateX(20px); -o-transform: translateX(20px); transform: translateX(20px); }
100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); }
} @-webkit-keyframes cd-bounce-2-inverse {
0% { opacity: 0; -webkit-transform: translateX(100px); }
60% { opacity: 1; -webkit-transform: translateX(-20px); }
100% { -webkit-transform: translateX(0); }
} @-moz-keyframes cd-bounce-2-inverse {
0% { opacity: 0; -moz-transform: translateX(100px); }
60% { opacity: 1; -moz-transform: translateX(-20px); }
100% { -moz-transform: translateX(0); }
} @keyframes cd-bounce-2-inverse {
0% { opacity: 0; -webkit-transform: translateX(100px); -moz-transform: translateX(100px); -ms-transform: translateX(100px); -o-transform: translateX(100px); transform: translateX(100px); }
60% { opacity: 1; -webkit-transform: translateX(-20px); -moz-transform: translateX(-20px); -ms-transform: translateX(-20px); -o-transform: translateX(-20px); transform: translateX(-20px); }
100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); }
}