Difference between revisions of "Team:WLC-Milwaukee/Notebook"

Line 12: Line 12:
  
  
−
@import "compass/css3";
+
<section id="cd-timeline">
 +
<div class="cd-timeline-block">
 +
<div class="cd-timeline-img">
 +
<img src="img/cd-icon-picture.svg" alt="Picture">
 +
</div> <!-- cd-timeline-img -->
 +
 +
<div class="cd-timeline-content">
 +
<h2>Title of section 1</h2>
 +
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde? Iste voluptatibus minus veritatis qui ut.</p>
 +
<a href="#0" class="cd-read-more">Read more</a>
 +
<span class="cd-date">Jan 14</span>
 +
</div> <!-- cd-timeline-content -->
 +
</div> <!-- cd-timeline-block -->
 +
 +
<div class="cd-timeline-block">
 +
<!-- ... -->
 +
</div>
 +
</section>
  
−
$gray: #dddddd;
 
  
−
h1, h2, h3 {
+
 
−
   font-weight: 300;
+
#cd-timeline {
 +
   position: relative;
 +
  padding: 2em 0;
 +
  margin-top: 2em;
 +
  margin-bottom: 2em;
 +
}
 +
#cd-timeline::before {
 +
  /* this is the vertical line */
 +
  content: '';
 +
  position: absolute;
 +
  top: 0;
 +
  left: 18px;
 +
  height: 100%;
 +
  width: 4px;
 +
  background: #d7e4ed;
 
}
 
}
  
−
.container {
+
.cssanimations .cd-timeline-img.is-hidden {
−
   padding: 1em;
+
   visibility: hidden;
 
}
 
}
−
 
+
.cssanimations .cd-timeline-img.bounce-in {
−
.timeline {
+
   visibility: visible;
−
   position: relative;
+
   animation: cd-bounce-1 0.6s;
−
   overflow: auto;
+
}
−
 
+
−
  &:before {
+
@keyframes cd-bounce-1 {
−
    content: '';
+
  0% {
−
    position: absolute;
+
     opacity: 0;
−
    height: 100%;
+
     transform: scale(0.5);
−
     width: 5px;
+
−
     background: $gray;
+
−
    left: 0;
+
 
   }
 
   }
−
 
+
−
   h2 {
+
   60% {
−
     background: $gray;
+
     opacity: 1;
−
     max-width: 6em;
+
     transform: scale(1.2);
−
    margin: 0 auto 1em;
+
−
    padding: 0.5em;
+
−
    text-align: center;
+
−
    position: relative;
+
−
    clear: both;
+
 
   }
 
   }
−
 
+
−
   ul {
+
   100% {
−
     list-style: none;
+
     transform: scale(1);
−
    padding: 0 0 0 1em;
+
−
    z-index: 1;
+
−
  }
+
−
 
+
−
  li {
+
−
    background: $gray;
+
−
    padding: 1em;
+
−
    margin-bottom: 1em;
+
−
    position: relative;
+
−
   
+
−
    &:before {
+
−
      content: '';
+
−
      width: 0;
+
−
      height: 0;
+
−
      border-top: 1em solid $gray;
+
−
      border-left: 1em solid transparent;
+
−
      position: absolute;
+
−
      left: -1em;
+
−
      top: 0;
+
−
    }
+
−
  }
+
−
 
+
−
  h3 {
+
−
    margin-top: 0;
+
−
  }
+
−
 
+
−
  time {
+
−
    font-style: italic;
+
 
   }
 
   }
 
}
 
}
  
−
@media screen and (min-width: 40em) {
+
 
−
  .container {
+
2
−
    max-width: 1000px;
+
3
−
    margin: 0 auto;
+
4
−
  }
+
5
−
 
+
6
−
  .timeline {
+
7
−
    &:before {
+
$(window).on('scroll', function(){
−
      left: 50%;
+
$timeline_block.each(function(){
−
    }
+
if( $(this).offset().top <= $(window).scrollTop()+$(window).height()*0.75 && $(this).find('.cd-timeline-img').hasClass('is-hidden') ) {
−
   
+
$(this).find('.cd-timeline-img, .cd-timeline-content').removeClass('is-hidden').addClass('bounce-in');
−
    ul {
+
}
−
      padding-left: 0;
+
});
−
      max-width: 700px;
+
});
−
      margin: 0 auto;
+
 
−
    }
+
−
   
+
−
    li {
+
−
      width: 42%;
+
−
    }
+
−
   
+
−
    li:nth-child(even) {
+
−
      float: right;
+
−
      margin-top: 2em;
+
−
    }
+
−
   
+
−
    li:nth-child(odd) {
+
−
      float: left;
+
−
     
+
−
      &:before {
+
−
        border-top: 1em solid $gray;
+
−
        border-right: 1em solid transparent;
+
−
        right: -1em;
+
−
        left: auto;
+
−
      }
+
−
    }
+
−
   
+
−
    li:nth-of-type(2n+1) {
+
−
      clear: both;
+
−
    }
+
−
  }
+
−
}
+
  
 
</div>
 
</div>
 
</html>
 
</html>

Revision as of 07:19, 22 August 2015




Documentation

Picture

Title of section 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde? Iste voluptatibus minus veritatis qui ut.

Read more Jan 14
#cd-timeline { position: relative; padding: 2em 0; margin-top: 2em; margin-bottom: 2em; } #cd-timeline::before { /* this is the vertical line */ content: ''; position: absolute; top: 0; left: 18px; height: 100%; width: 4px; background: #d7e4ed; } .cssanimations .cd-timeline-img.is-hidden { visibility: hidden; } .cssanimations .cd-timeline-img.bounce-in { visibility: visible; animation: cd-bounce-1 0.6s; } @keyframes cd-bounce-1 { 0% { opacity: 0; transform: scale(0.5); } 60% { opacity: 1; transform: scale(1.2); } 100% { transform: scale(1); } } 2 3 4 5 6 7 $(window).on('scroll', function(){ $timeline_block.each(function(){ if( $(this).offset().top <= $(window).scrollTop()+$(window).height()*0.75 && $(this).find('.cd-timeline-img').hasClass('is-hidden') ) { $(this).find('.cd-timeline-img, .cd-timeline-content').removeClass('is-hidden').addClass('bounce-in'); } }); });