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

m (adding timeline?)
Line 11: Line 11:
 
</div>
 
</div>
  
−
<div class="container">
+
 
−
  <h1>Responsive HTML Timeline</h1>
+
@import "compass/css3";
 +
 
 +
$gray: #dddddd;
 +
 
 +
h1, h2, h3 {
 +
  font-weight: 300;
 +
}
 +
 
 +
.container {
 +
  padding: 1em;
 +
}
 +
 
 +
.timeline {
 +
  position: relative;
 +
  overflow: auto;
 
    
 
    
−
   <p><em>Inspired by the talented <a href="http://daverupert.com/about.html">Dave Rupert</a>.</em></p>
+
   &:before {
 +
    content: '';
 +
    position: absolute;
 +
    height: 100%;
 +
    width: 5px;
 +
    background: $gray;
 +
    left: 0;
 +
  }
 
    
 
    
−
   <div class="timeline">
+
   h2 {
−
     <h2>2013</h2>
+
     background: $gray;
 +
    max-width: 6em;
 +
    margin: 0 auto 1em;
 +
    padding: 0.5em;
 +
    text-align: center;
 +
    position: relative;
 +
    clear: both;
 +
  }
 +
 
 +
  ul {
 +
    list-style: none;
 +
    padding: 0 0 0 1em;
 +
    z-index: 1;
 +
  }
 +
 
 +
  li {
 +
    background: $gray;
 +
    padding: 1em;
 +
    margin-bottom: 1em;
 +
    position: relative;
 
      
 
      
−
     <ul>
+
     &:before {
−
       <li>
+
       content: '';
−
        <h3>Quit my Job</h3>
+
       width: 0;
−
        <p>One day, my boss came up to me and asked, "Are you ready, Joe?" Pretty much decided I wasn't ready.</p>
+
       height: 0;
−
        <time>August 2013</time>
+
       border-top: 1em solid $gray;
−
       </li>
+
       border-left: 1em solid transparent;
−
       <li>
+
       position: absolute;
−
        <h3>Started New Job</h3>
+
       left: -1em;
−
        <p>Began work at the Button Factory. This was probably the best time of my life. I had a wife, a dog, and a family.</p>
+
       top: 0;
−
        <time>July 2013</time>
+
     }
−
       </li>
+
  }
−
       <li>
+
 
−
        <h3>Changed my name to Joe</h3>
+
  h3 {
−
        <p>I was just sick of Josh</p>
+
    margin-top: 0;
−
        <time>June 2013</time>
+
  }
−
       </li>
+
 
−
       <li>
+
  time {
−
        <h3>Moved to Iowa</h3>
+
     font-style: italic;
−
        <p>I moved to <a href="#">Ames, Iowa</a> and settled down into my new life.</p>
+
   }
−
        <time>February 2013</time>
+
}
−
       </li>
+
−
     </ul>
+
−
   
+
−
    <h2>2012</h2>
+
−
    <ul>
+
−
      <li>
+
−
        <h3>Graduated College</h3>
+
−
        <p>It only took, like, two years.</p>
+
−
        <time>December 2012</time>
+
−
      </li>
+
−
      <li>
+
−
        <h3>Graduated Community College</h3>
+
−
        <p>Studying Aerospace Engineering.</p>
+
−
        <time>May 2012</time>
+
−
      </li>
+
−
     </ul>
+
−
   </div>
+
−
</div>
+
−
 
+
−
 
+
  
 +
@media screen and (min-width: 40em) {
 +
  .container {
 +
    max-width: 1000px;
 +
    margin: 0 auto;
 +
  }
 +
 
 +
  .timeline {
 +
    &:before {
 +
      left: 50%;
 +
    }
 +
   
 +
    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:15, 22 August 2015




Documentation

@import "compass/css3"; $gray: #dddddd; h1, h2, h3 { font-weight: 300; } .container { padding: 1em; } .timeline { position: relative; overflow: auto; &:before { content: ''; position: absolute; height: 100%; width: 5px; background: $gray; left: 0; } h2 { background: $gray; max-width: 6em; margin: 0 auto 1em; padding: 0.5em; text-align: center; position: relative; clear: both; } ul { list-style: none; 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 { max-width: 1000px; margin: 0 auto; } .timeline { &:before { left: 50%; } 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; } } }