src/components/About/TimelineIcons.css
@charset "UTF-8";
/* Made with http://icomoon.io/ */
@font-face {
font-family: "timeline";
src: url("/fonts/timeline.eot");
src: url("/font/timeline.eot?#iefix") format("embedded-opentype"),
url("/fonts/timeline.woff") format("woff"),
url("/fonts/timeline.ttf") format("truetype"),
url("/fonts/timeline.svg#timeline") format("svg");
font-weight: normal;
font-style: normal;
}
.timeline > li .icon {
width: 60px;
height: 60px;
padding: 10px;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
font-size: 1.4em;
-webkit-font-smoothing: antialiased;
position: absolute;
border-radius: 50%;
text-align: center;
left: 40%;
top: 0;
margin: 0 10px 0 -35px;
box-shadow: 0 0 0 8px #e1e2e3;
background-color: #161e2522;
}
.timeline > li .icon span:before {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: "timeline" !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
position: absolute;
top: 18px;
left: 18px;
}
.timeline > li.work .meta {
color: #303030;
}
.timeline > li.work .meta a {
color: #303030;
padding-bottom: 2px;
}
.timeline > li.work .meta a:hover {
text-decoration: none;
border-bottom: solid 3px #b2c1d1;
}
.timeline > li.work .meta a:visited {
color: #888;
}
.timeline > li.work .description {
border-left: solid 10px #1a232c22;
}
.timeline > li.work .description h3 {
color: #303030;
}
.timeline > li.work .description:after {
border-right-color: #c8cacc;
}
@media screen and (max-width: 640px) {
.timeline > li.work .description {
border-top: solid 10px #1a232c22;
}
.timeline > li.work .description:after {
border-bottom-color: #c8cacc;
}
}
.timeline > li.work .icon {
background-color: #f1f1f1;
}
.timeline > li.work .icon span:before {
content: "\e903";
color: #6b89a6;
}
.timeline > li.blog .meta {
color: #950a9f;
}
.timeline > li.blog .meta a {
color: #950a9f;
padding-bottom: 2px;
}
.timeline > li.blog .meta a:hover {
text-decoration: none;
border-bottom: solid 3px #950a9f;
}
.timeline > li.blog .meta a:visited {
color: #888;
}
.timeline > li.blog .description {
border-left: solid 10px #950a9f;
}
.timeline > li.blog .description h3 {
color: #950a9f;
}
.timeline > li.blog .description:after {
border-right-color: #950a9f;
}
@media screen and (max-width: 640px) {
.timeline > li.blog .description {
border-top: solid 10px #950a9f;
}
.timeline > li.blog .description:after {
border-bottom-color: #950a9f;
}
}
.timeline > li.blog .icon {
background-color: #950a9f;
}
.timeline > li.blog .icon span:before {
content: "\e908";
color: #ffffffaa;
}
.timeline > li.certificate .meta {
color: #e8468b;
}
.timeline > li.certificate .meta a {
color: #e8468b;
padding-bottom: 2px;
}
.timeline > li.certificate .meta a:hover {
text-decoration: none;
border-bottom: solid 3px #e8468b;
}
.timeline > li.certificate .meta a:visited {
color: #888;
}
.timeline > li.certificate .description {
border-left: solid 10px #e8468b;
}
.timeline > li.certificate .description h3 {
color: #e8468b;
}
.timeline > li.certificate .description:after {
border-right-color: #e8468b;
}
@media screen and (max-width: 640px) {
.timeline > li.certificate .description {
border-top: solid 10px #e8468b;
}
.timeline > li.certificate .description:after {
border-bottom-color: #e8468b;
}
}
.timeline > li.certificate .icon {
background-color: #e8468b;
}
.timeline > li.certificate .icon span:before {
content: "\e900";
color: #ffffffaa;
}
.timeline > li.podcast .meta {
color: #CF8EDB;
}
.timeline > li.podcast .meta a {
color: #CF8EDB;
padding-bottom: 2px;
}
.timeline > li.podcast .meta a:hover {
text-decoration: none;
border-bottom: solid 3px #CF8EDB;
}
.timeline > li.podcast .meta a:visited {
color: #888;
}
.timeline > li.podcast .description {
border-left: solid 10px #CF8EDB;
}
.timeline > li.podcast .description h3 {
color: #CF8EDB;
}
.timeline > li.podcast .description:after {
border-right-color: #CF8EDB;
}
@media screen and (max-width: 640px) {
.timeline > li.podcast .description {
border-top: solid 10px #CF8EDB;
}
.timeline > li.podcast .description:after {
border-bottom-color: #CF8EDB;
}
}
.timeline > li.podcast .icon {
background-color: #CF8EDB;
}
.timeline > li.podcast .icon span:before {
content: "\e91c";
color: #6a2677;
}
.timeline > li.talk .meta {
color: #1F9ACC;
}
.timeline > li.talk .meta a {
color: #1F9ACC;
padding-bottom: 2px;
}
.timeline > li.talk .meta a:hover {
text-decoration: none;
border-bottom: solid 3px #1F9ACC;
}
.timeline > li.talk .meta a:visited {
color: #888;
}
.timeline > li.talk .description {
border-left: solid 10px #1F9ACC;
}
.timeline > li.talk .description h3 {
color: #1F9ACC;
}
.timeline > li.talk .description:after {
border-right-color: #1F9ACC;
}
@media screen and (max-width: 640px) {
.timeline > li.talk .description {
border-top: solid 10px #1F9ACC;
}
.timeline > li.talk .description:after {
border-bottom-color: #1F9ACC;
}
}
.timeline > li.talk .icon {
background-color: #1F9ACC;
}
.timeline > li.talk .icon span:before {
content: "\e91e";
color: #c1e7f6;
}
.timeline > li.book .meta {
color: #CC481F;
}
.timeline > li.book .meta a {
color: #CC481F;
padding-bottom: 2px;
}
.timeline > li.book .meta a:hover {
text-decoration: none;
border-bottom: solid 3px #CC481F;
}
.timeline > li.book .meta a:visited {
color: #888;
}
.timeline > li.book .description {
border-left: solid 10px #CC481F;
}
.timeline > li.book .description h3 {
color: #CC481F;
}
.timeline > li.book .description:after {
border-right-color: #CC481F;
}
@media screen and (max-width: 640px) {
.timeline > li.book .description {
border-top: solid 10px #CC481F;
}
.timeline > li.book .description:after {
border-bottom-color: #CC481F;
}
}
.timeline > li.book .icon {
background-color: #CC481F;
}
.timeline > li.book .icon span:before {
content: "\e91f";
color: #f6cec1;
}
.timeline > li.project .meta {
color: #77ab3a;
}
.timeline > li.project .meta a {
color: #77ab3a;
padding-bottom: 2px;
}
.timeline > li.project .meta a:hover {
text-decoration: none;
border-bottom: solid 3px #77ab3a;
}
.timeline > li.project .meta a:visited {
color: #888;
}
.timeline > li.project .description {
border-left: solid 10px #77ab3a;
}
.timeline > li.project .description h3 {
color: #77ab3a;
}
.timeline > li.project .description:after {
border-right-color: #77ab3a;
}
@media screen and (max-width: 640px) {
.timeline > li.project .description {
border-top: solid 10px #77ab3a;
}
.timeline > li.project .description:after {
border-bottom-color: #77ab3a;
}
}
.timeline > li.project .icon {
background-color: #77ab3a;
}
.timeline > li.project .icon span:before {
content: "\e925";
color: #468200;
}
.timeline > li.award .meta {
color: #B2241F;
}
.timeline > li.award .meta a {
color: #B2241F;
padding-bottom: 2px;
}
.timeline > li.award .meta a:hover {
text-decoration: none;
border-bottom: solid 3px #B2241F;
}
.timeline > li.award .meta a:visited {
color: #888;
}
.timeline > li.award .description {
border-left: solid 10px #B2241F;
}
.timeline > li.award .description h3 {
color: #B2241F;
}
.timeline > li.award .description:after {
border-right-color: #B2241F;
}
@media screen and (max-width: 640px) {
.timeline > li.award .description {
border-top: solid 10px #B2241F;
}
.timeline > li.award .description:after {
border-bottom-color: #B2241F;
}
}
.timeline > li.award .icon {
background-color: #B2241F;
}
.timeline > li.award .icon span:before {
content: "\e99e";
color: #f1afac;
}
.timeline > li.community .meta {
color: #CC4D2B;
}
.timeline > li.community .meta a {
color: #CC4D2B;
padding-bottom: 2px;
}
.timeline > li.community .meta a:hover {
text-decoration: none;
border-bottom: solid 3px #CC4D2B;
}
.timeline > li.community .meta a:visited {
color: #888;
}
.timeline > li.community .description {
border-left: solid 10px #CC4D2B;
}
.timeline > li.community .description h3 {
color: #CC4D2B;
}
.timeline > li.community .description:after {
border-right-color: #CC4D2B;
}
@media screen and (max-width: 640px) {
.timeline > li.community .description {
border-top: solid 10px #CC4D2B;
}
.timeline > li.community .description:after {
border-bottom-color: #CC4D2B;
}
}
.timeline > li.community .icon {
background-color: #CC4D2B;
}
.timeline > li.community .icon span:before {
content: "\e972";
color: #f5d6ce;
}