devilshaircut

<!--    <input id="new-to-do" type="test" />

    <button onclick="myFunction()">Click Me!</button>

    <ul id="to-do">

    </ul>
    <script src="test.js"></script>-->

devilshaircut

var tasks = [ "Drink Coffee", "Eat Donuts", "Go to Gym" ];


var loadTasks = function(myTasks) {
  for (var i=0; i < myTasks.length; i++) {
    $("#to-do").append("<li>" + myTasks[i] + "</li>");
  }

devilshaircut

<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no” />

devilshaircut

@import "compass/reset";  // As with all projects, override ludicrous browser default styles.
@import "compass/css3";   // We will use some CSS3 transitions (among other things) to make the interface more usable.

devilshaircut

body.nav-expanded {
  #page-content {
    left: 75%;
  }
  #hamburger-icon {
    left: 75%;
  }
}

devilshaircut

<div id="page-content">
  <h3>A Header</h3>
  <p>A Paragraph</p>
</div>
<!-- #page-content -->

<div id="hamburger-icon">
  Hamburger.
</div>
<!-- #hamburger-icon -->

devilshaircut

html {
  height: 100%;
}

body {
  height: 100%;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  min-width: 320px;

devilshaircut

nav {
  display: block;
  width: 100%;
  height: 50px;
  padding: 0 100px;
  margin: 0 0 20px 0;
  line-height: 50px;
  background: #cccccc;
  position: fixed;
  z-index: 7;

devilshaircut

#hamburger-icon {
  display: none;
  float: left;
  width: 100%;
  height: 50px;
  margin: 0 0 20px 0;
  padding: 0 20px;
  line-height: 50px;
  background: #cccccc;
  cursor: pointer;

devilshaircut

#page-content {
  display: block;
  width: 100%;
  min-height: 100%;
  padding: 70px 100px 40px 100px;
  background: #ffffff;
  position: relative;
  z-index: 5;
  @include box-sizing(border-box);
  @include box-shadow(0 0 7px #000000);