roachhd/roachhd.github.io

$text-color: rgb(77, 77, 77);
$bg-entry: rgb(80,80,80);


//v1
.timeline, .timeline.v1/*used in the tutorial, don't bother*/ {
  margin: 0px auto;
  max-width: 700px;
  overflow:hidden;
  height: auto;
  position: relative;
  padding:0px;
  list-style-type:none;
  
  /*thanks to
     https://twitter.com/JacoKoster
  */
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEElEQVQIW2NMTEz8z8gABAAPKwIlXWq1kgAAAABJRU5ErkJggg==);
  background-repeat:repeat-y;
  background-position:50% 0;
  
  /*
    border-box ftw, inside .timeline now to prevent
    screwing up your CSS rule if you are not using
    border-box
    if that's the case, I have nothing to say to you.

    thanks to https://github.com/jimmyandrade
  */ 
  *,*:after,&:after,*:before,&:before{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}

  .year {
    background: $bg-entry;
    font-size: 3em;
    max-width: 4em; 
    clear: both; 
    margin: 1em auto;
    color: white;
    border-radius: 30% / 100%;
    text-align: center;
    margin-top: 50px;
    
    &:first-of-type {
      margin-top: 0 !important;
    }
  
    /*
      thanks to Lukas Knuth ( https://github.com/christian-fei/Timeline.css/issues/1 )
    */
    & + .event{
      margin-top: -1.5em;
    }
  }
  
  /* 
    elements 1,(2),3,(4), etc.
    elements in brackets inherit these properties, some are overridden below (2n)
    beginning at 0
  */
  .event {
    position:relative;
    text-align:center;
    float: right;
    clear: right; 
    width: 45%;
    margin: 10px 2.5%;
    
    
    border-radius: 5px;
    list-style-type: none;
    display: block;
    padding: .4em;
    background: white;
    z-index: 15;
    
    color: $text-color;
    border: 1px solid lighten($bg-entry,50%);
    text-decoration: none;

    -webkit-transition: background .15s linear;
    -moz-transition: background .15s linear;
    -ms-transition: background .15s linear;
    -o-transition: background .15s linear;
    transition: background .15s linear;
    
    &.featured {
      width: 95% !important;
      &:after, &:before {
        display: none;
      }
    }
    
    @media all and (max-width: 600px) {
      width: 85%;
    }    
    
    &.offset-first {
       margin-top: -1.5em;
    }
    
    img {
      margin-top: 10px;
      max-width: 100%;
    }

    &:hover {
      background: lighten($bg-entry,65%);

      &:after {
        background: $bg-entry;
      }
    }
    
    &:nth-of-type(2n) {
      float: left;
      clear: left;
      &:after {
        right: -5%;
        /* reset the standard declaration I defined before*/
        left: auto;
      }
    }
      
    &:after {      
      @media all and (min-width: 650px) {
        display: block;
        content: ' ';
        height: 9px; width: 9px;
        background: lighten($bg-entry,30%);
        border-radius: 50%;
        position:absolute;
        left: -5%;
        top: 1.5em;
        border: 2px solid white;
      }
    }
  }

  time{
    display: block;font-weight: bold;
  }




  /*v2*/
  &.v2{
    .year{
      background:white;
      color:$bg-entry;
      border:2px solid $bg-entry;
    }

    .event{
      border:none;
      background:#FAFAFA;
      border-bottom:1px solid darken(#E2DFDF,10%);
    }
  }
}