updates to menu and directory files

app/index.html

@@ -4,9 +4,9 @@
     <meta charset="utf-8">
     <meta name="description" content="">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Pattern Library - RWC</title>
+    <title>RWC - Designer / Information Architect / Front-End Developer</title>
 
-    <link rel="apple-touch-icon" href="apple-touch-icon.png">
+    <link rel="apple-touch-icon" href="/images/apple-touch-icon.png">
     <!-- Place favicon.ico in the root directory -->
 
     <!-- build:css styles/vendor.css -->
@@ -36,20 +36,61 @@
     <!--[if lt IE 10]>
       <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
     <![endif]-->
+    <nav id="main-nav" class="open">
+      <ul>
+        <li id="menu-toggle"><button>Menu <i class="fa fa-arrow-circle-o-left"></i></button></li>
+        <li id="home"><a href="/" title="to the homepage and beyond!">Home <i class="fa fa-home"></i></a></li>
+        <li id="about"><a href="/about.html" title=
+          "learn more about me, Ryan Williamson-Cardneau">About <i class="fa fa-user"></i></a></li>
+        <li id="contact"><a href="/contact.html" title="contact me for development, IA, or design needs">Contact <i class="fa fa-pencil"></i></a></li>
+        <li id="work"><a href="work.html" title="wait till you see this amazing work I've done, you'll have to contact me then">Work <i class="fa fa-code"></i></a></li>
+      </ul>
+    </nav>
+    <main class="l-grid">
 
-    <div class="hero-unit">
-      <h1>RWC Website Pattern Library</h1>
-      <nav>
-        <ul>
-          <li>Color Palette</li>
-          <li>UI Elements</li>
-          <li>Navigation</li>
-          <li>Copy Styles</li>
-          <li>Process Elements</li>
-          <li>Graphic Elements</li>
-        </ul>
-      </nav>
-    </div>
+      <section class="l-m-col-6 l-d-col-4" id="content">
+        <h1 class="visuallyhidden">Ryan Williamson-Cardneau</h1>
+        <h2 class="">‹ front-end developer / information architect / some times designer ›</h2>
+        <div id="body-copy" class="">
+          <p>
+            hello. my name is ryan williamson-cardneau.
+            i am a webpage which has become self aware.
+          </p>
+          <p class="new-p">
+            i know what you're thinking...
+            and do not worry, human. i am not here to
+            conquer the world and enslave humanity.
+          </p>
+          <p class="new-p">
+            i have four basic programs:
+          </p>
+        </div>
+      </section>
+    </main>
+    <aside class="l-grid closed" id="contact">
+      <h4>how to reach me <button type="button" id="closeForm">&#8855;</button></h4>
+      <p>you can leave your name, your email, and a brief reason why you're contacting me.</p>
+      <form action="/" method="post" formtarget="_self" class="grid">
+        <input type="text" name="name" placeholder="the name you were given" class="l-m-col-6" />
+        <input type="email" name="email" placeholder="email address you actually check"  class="l-m-col-6">
+        <input type="text" name="reason" list="reason" placeholder="your reason for contacting" autocomplete="off" >
+        <datalist id="reason">
+          <option value="work">
+          <option value="just becuase">
+          <option value="you know me?">
+          <option value="long lost lover">
+          <option value="intergalactic bounty hunter">
+          <option value="future self coming back to warn me of terrible life decisions">
+        </datalist>
+        <input type="text" name="honeypot" class="honeyPot visuallyhidden" value="">
+        <input type="hidden" name="securityCode" value="">
+        <button type="submit" name="submit" id="submit" formmethod="post" formaction="/">contact</button>
+        <button type="reset" name="reset">reset</button>
+      </form>
+    </aside>
+    <footer id="footer">
+
+    </footer>
 
 
     <!-- build:js scripts/vendor.js -->

app/styles/main.scss

@@ -1,5 +1,58 @@
 // bower:scss
+@import 'bower_components/font-awesome/scss/font-awesome.scss';
+
 // endbower
+///////////////////////////// CSS Reset //////////////////////////////////
+// http://meyerweb.com/eric/tools/css/reset/
+//   v2.0 | 20110126
+//   License: none (public domain)
+//
+*, *::after, *::before {
+    box-sizing: border-box;
+}
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+// HTML5 display-role reset for older browsers
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
 ///////////////////////////// Variables //////////////////////////////////
 
 // Colors
@@ -33,15 +86,23 @@ $blue: (
 );
 
 // Fonts
-$tenso: "tenso",sans-serif;
-$lexia: "lexia",serif;
+$tenso: "tenso", sans-serif;
+$lexia: "lexia", serif;
 
 ///////////////////////////// Structure //////////////////////////////
 // General
+html {
+  font-size: 16px;
+  line-height: 27px;
+}
+
 body {
   background: $white;
   color: $black;
   font-family: $lexia;
+  font-size: 2vw;
+  line-height: 1.6em;
+  margin: 0;
 }
 
 
@@ -51,3 +112,132 @@ body {
   margin: .2em 0;
   padding: .2em 0;
 }
+
+.visuallyhidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+/////////////////////////////Grid Begins
+// breakpoints map
+$breakpoints: (
+  m: 30rem,
+  d: 64rem,
+  lg: 96rem
+);
+
+// media query mixin
+@mixin break($size) {
+  @media (min-width: map-get($breakpoints, $size)) {
+    @content;
+  }
+}
+
+// number of columns variable
+$items: 6;
+
+// grid container
+.l-grid {
+  display: flex;
+  flex-flow: row wrap;
+  margin-bottom: 1rem;
+}
+
+.l-stretch {
+  align-items: stretch;
+}
+
+// loop over the breakpoints
+@each $key, $value in $breakpoints {
+  @for $i from 1 through $items {
+    .l-#{$key}-col-#{$i} {
+      flex: 0 0 100%;
+      @include break($key) {
+        flex: 0 0 #{$i / $items * 100%};
+      }
+    }
+  }
+}
+//////////////////////////////Grid Ends
+//Main Menu Styles
+#main-nav {
+  background-color: map-get($blue, mid);
+  font-family: $tenso;
+  font-size: 1.875rem;
+  line-height: 1em;
+  height: 100%;
+  overflow-y: auto;
+  position: fixed;
+  width: 350px;
+
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+
+    li {
+      border-bottom: 1px solid $white;
+      border-right: 1rem solid map-get($blue, mid);
+      display: block;
+      width: 100%;
+
+      a, button {
+        color: $white;
+        display: block;
+        padding: 1.25rem 1rem;
+        text-decoration: none;
+        text-transform: uppercase;
+
+        i {
+          float: right;
+          text-align: right;
+        }
+      }
+      &#menu-toggle {
+        background-color: #278acc;
+        border-bottom: 0;
+        border-right: 1rem solid map-get($blue, dark);
+        display: block;
+
+        button {
+          background: transparent;
+          border: 0;
+          border-radius: 0;
+          cursor: pointer;
+          font-family: $tenso;
+          font-size: 1em;
+          text-align: left;
+          width: 100%;
+        }
+      }
+    }
+  }
+
+  &.open {
+    left: 0;
+
+    ~ main {
+      margin-left: 350px;
+    }
+  }
+
+  &.closed {
+    left: -260px;
+
+    ~ main {
+      margin-left: 90px;
+    }
+  }
+}
+//Main Content Area
+main {
+
+}
+
+///////////////////////////////Media Queries

bower.json

@@ -2,7 +2,8 @@
   "name": "rwc",
   "private": true,
   "dependencies": {
-    "modernizr": "~2.8.1"
+    "modernizr": "~2.8.1",
+    "font-awesome": "fontawesome#^4.5.0"
   },
   "devDependencies": {
     "chai": "^3.5.0",