First Commit

scss/_circle.scss

@@ -0,0 +1,15 @@
+/* Example: .circle { @include circle(200px, #999); } */
+
+@mixin circle($size, $color, $display, $zindex: 0)
+{
+  background: $color;
+  display: $display;
+  height: $size;
+  line-height: $size;
+  width: $size;
+  z-index: $zindex;
+
+  border-radius: $size/2;
+  -webkit-border-radius: $size/2;
+  -moz-border-radius: $size/2;
+}

scss/_color.scss

@@ -0,0 +1,12 @@
+$background-color: #ccc;
+$big-circle-color-bg: purple;
+$big-circle-color-fg: white;
+$event-color: white;
+$event-date-color: SlateBlue;
+$event-arrow-color: white;
+$footer-background-color: #5e6482;
+$footer-color: white;
+$header-background-color: #5e6482;
+$header-color: white;
+$line-color: purple;
+$little-circle-color: purple;

scss/_font.scss

@@ -0,0 +1 @@
+$font-stack: 'Arial', sans-serif;

scss/_line.scss

@@ -0,0 +1,5 @@
+@mixin line($width, $color, $type, $zindex: 0)
+{
+  border-left: $width $type $color;
+  z-index: $zindex;
+}

scss/timeline.scss

@@ -0,0 +1,209 @@
+@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; }
+}