cbillowes/curious-programmer-oxygen

View on GitHub
src/components/About/TimelineIcons.css

Summary

Maintainability
Test Coverage
@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;
}