timeline/scss/timeline.scss

@import "color.scss";
@import "font.scss";
@import "circle.scss";
@import "line.scss";
@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css");

* { margin: 0; padding: 0; }

body, html { min-height: 100%; min-width: 100%}

body
{
    background: $background-color;
    font-family: $font-stack;
}

p { margin: 10px 0; }

ul { display: table}
ul>li { display: table-row; }
ul>li::before { content: "\21D2"; display: table-cell;  padding: 5px 5px 0 0; text-align: right }

#time-line
{
    @include line(5px, $line-color, solid, -100);
    display:  inline-block;
    height: 100%;
    margin-left: 49.75%;
    margin-top: 70px;
    min-height: 100%;
    position: absolute;
}

.container
{
    margin: auto;
    min-width: 480px;
    overflow: hidden;
    position: relative;
    width: 940px;
}

header
{
    background: $header-background-color;
    color: $header-color;
    height: 70px;
    text-align: center;
}

#timeline
{
    height: 100%;
    min-height: 700px;
    margin: 20px 0;
}

.cube
{
    margin-bottom: 20px;
    min-height: 100px;
    width: 100%;
}

.year
{
    @include circle(70px, $big-circle-color-bg, block, 10);
    margin: auto;
    text-align: center;
}

.year div
{
    color: $big-circle-color-fg;
    display: block;
    font-size: 18px;
    font-weight: bold;
    margin-top: 20px;
    text-align: center;
}

.event
{
    margin: auto;
    overflow: hidden;
    visibility: visible;
    width: 90%;
}

.event div.circle-left
{
    @include circle(33px, $little-circle-color, inline-block, 10);
    margin-left: 26px;
}

.event div.left
{
    float: left;
    position: relative;
    width: 45%;
    -webkit-animation: fade;
    -webkit-animation-duration: 2s;
}

.event div.left span
{
  color: $event-arrow-color;
  float: right;
  font-size: 46px;
  position: relative;
  top: -10px;
}

.event div.left div
{
    background: $event-color;
    border-radius: 10px;
    margin-right: 30px;
    padding: 15px;
}

.event div.circle-right
{
    @include circle(33px, $little-circle-color, inline-block, 10);
    margin-left: 407px;
}

.event div.right
{
    float: right;
    position: relative;
    width: 45%;
    -webkit-animation: fade;
    -webkit-animation-duration: 2s;
}

.event div.right span
{
  color: $event-arrow-color;
  float: left;
  font-size: 46px;
  position: relative;
  transform: rotate(180deg);
}


.event div.right div
{
    background: $event-color;
    border-radius: 10px;
    margin-left: 30px;
    padding: 15px;
}

.event time
{
    background: $event-date-color;
    color: white;
    font-size: 12px;
    padding: 5px;
    border-radius: 5px;
}

footer
{
    background: $footer-background-color;
    bottom: 0;
    color: $footer-color;
    height: 40px;
    text-align: center;
}

@media screen and (max-width: 940px)
{
    .container { min-width: 720px; width: 800px; }
    header { height: 60px; }
    h1{ font-size: 23px; }
    #time-line { margin: 25px 214px; }
    .year { @include circle(70px, $big-circle-color-bg, block); margin: 0 180px; text-align: left; }
    .event div { position: relative; width: 340px}
    .event div.circle-left { @include circle(33px, $little-circle-color, inline-block, 10); margin-left: 160px; }
    .event div.left { float: right; margin-right: 180px; width: 330px}
    .event div.left span { color: $event-arrow-color; float: left; font-size: 46px; position: relative; top: 0; transform: rotate(180deg); }
    .event div.right { margin-right: 190px; width: 320px}
    .event div.left div { margin-left: 30px; margin-right: 0 }
    .event div.circle-right { @include circle(33px, $little-circle-color, inline-block, 10); margin-left: 160px; }
}

@media screen and (max-width: 720px)
{
  .container { min-width: 300px; width: 480px; }
  header { height: 60px;}
  h1{ font-size: 23px; }
  #time-line { margin: 25px 63px; }
  .year { @include circle(70px, $big-circle-color-bg, block); margin: 0 30px; text-align: left; }
  .event div { position: relative; width: 300px}
  .event div.circle-left { @include circle(33px, $little-circle-color, inline-block, 10); margin-left: 24px; }
  .event div.left { margin-right: 50px; width: 320px}
  .event div.left span { color: $event-arrow-color; float: left; font-size: 46px; position: relative; top: 0; transform: rotate(180deg); }
  .event div.right { margin-right: 50px; width: 320px}
  .event div.left div { margin-left: 30px; margin-right: 0 }
  .event div.circle-right { @include circle(33px, $little-circle-color, inline-block, 10); margin-left: 24px; }
}

@-webkit-keyframes fade
{
    0% { opacity: 0; }
    100% { opacity: 1; }
}