Responsive Test

index.html

<link href='http://fonts.googleapis.com/css?family=Cutive+Mono|Quicksand' rel='stylesheet' type='text/css'>
<h1>Instructions</h1>
<ul>
  <li>Update the following layout code to be responsive!</li>
</ul>
<h2>Extra Credit</h2>
<ul>
  <li>Make it less fugly!</li>
</ul>
<hr />
<div class="wrap">
  <header class="header">
    <h1 class="logo"><a href="#">Logo</a></h1>
    <nav class="nav-main">
      <ul>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Blog</a></li>
      </ul>
    </nav>
  </header>
  <main class="main">
    <h2>Lorem ipsum dolor sit.</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil nulla nesciunt rem architecto facere optio quae reprehenderit quisquam perferendis, molestias amet ullam.</p>
    <p>Exercitationem doloribus autem excepturi at libero esse quas nemo quisquam iusto modi voluptatum facere, numquam a nobis corporis voluptate vero odit pariatur.</p>
    <p>Quis tempora accusamus obcaecati iure veritatis, modi animi. Ab placeat id nostrum consequatur, expedita voluptas cumque eaque vitae cupiditate distinctio, modi temporibus!</p>
  </main>
  <aside class="sidebar">
    <h3>Lorem ipsum.</h3>
    <ul>
      <li><a href="#">Lorem ipsum dolor.</a></li>
      <li><a href="#">Aperiam, sunt, quis!</a></li>
      <li><a href="#">Accusamus, est, necessitatibus.</a></li>
      <li><a href="#">Possimus, quibusdam, ullam!</a></li>
    </ul>
  </aside>
  <footer class="footer">
    <small class="copy">Copyright &copy; Company Name, 2015</small>
  </footer>
</div>

Responsive-Test.markdown

Responsive Test

Forked from Ligature Creative Group's Pen Responsive Test.

A Pen by linda on CodePen.

License.

style.scss

@media screen and (max-width: 649px) {
  h1, h2, h3 {
  text-align: center;  
  }
  .nav-main {
  text-align: center;
  }
  .nav-main li {
  width: 100%;
  display: inline;
  padding-right: 10%;
  }
  body {
  padding: 3%;
  text-align: justify;
  }
}

/* ...larger screen styles */

@media screen and (min-width: 650px) { 
*, :before, :after{ box-sizing: border-box; }
body{ padding: 2%; }

// Layout

.wrap{
  width: 65%;
  margin: 0 auto;
}

.header,
.main,
.sidebar,
.footer{
  float: left;
  padding-right: 20px;
}

.header,
.footer{
  width: 97%;
}

.main{
  width: 65%;
}

.sidebar{
  width: 35%;
}

// Styles

.header{
  overflow: hidden;
}

.logo{
  float: left;
}

.nav-main{
  float: right;
  width: 35%;
  
  ul{
    overflow: hidden;
    list-style: none;
  }
  
  li{
    float: left;
    margin-left: 8%;
    }
  }
}
/**********************************
Code that makes it less fugly
********************************/
body {
  background-color: #3B3B3B;
  font-family: cutive mono; 
   color: #BAEBFF;
}
a {
  font-family: quicksand;
  text-decoration: none;
  color: #BAEBFF;
}
a:hover {
  color: #fff;
}
h1, h2, h3 {
  color: #FAFF5E;
  font-family: cutive mono;
}
.main, li {
  font-family: quicksand;
  color: #BAEBFF;
}
footer {
  padding-top: 5%;
  color: #ffffff;
}