From e7a1bf30831deeae67edea5fc25034a32c247c16 Mon Sep 17 00:00:00 2001
From: Bill Nibz <azulien@gmail.com>
Date: Wed, 18 Feb 2015 23:01:37 -0500
Subject: [PATCH] Updating WIP files

---
 index_wip.html | 56 +++++++++++++++++++++++++-------------------------
 styles_wip.css | 40 ++++++++++++++++++++++--------------
 2 files changed, 53 insertions(+), 43 deletions(-)

diff --git a/index_wip.html b/index_wip.html
index 52c53fc..0ad7e03 100644
--- a/index_wip.html
+++ b/index_wip.html
@@ -16,7 +16,6 @@
           <ul id="title">
                <li>The</li><li>Internet</li><li>Vagabond</li>
           </ul>
-          <a href="#navbar">CLICK ME</a>
      </header>
 
      <div class="clean"></div>
@@ -24,40 +23,41 @@
      <main>
           <div id="post">
                <p>Welcome to The Internet Vagabond, a small slice of Internet real-estate for Bill Niblock. Nothing I say is visionary or profound, and sometimes it makes sense.</p>
-               <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br />
-<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
-<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
           </div>
      </main>
 
      <div class="clean"></div>
 <!--Sidebar -->
      <nav id="navbar">
-          <ul id="follow">
-               <li id="github">[ G ]</li>
-               <li id="twitter">[ T ]</li>
-               <li id="twitch">[ S ]</li>
-               <li id="gplus">[ P ]</li>
-               <li id="flickr">[ F ]</li>
-               <li id="tumblr">[ U ]</li>
-          </ul>
-          <ul id="navigation">
-               <li>Home</li>
-               <li>Projects</li>
-               <ul id="projects">
-                    <li>GitHub Page</li>
-                    <li>Antennae</li>
+          <label for="toggle-navbar" id="toggle">&#9776</label>
+          <input type="checkbox" id="toggle-navbar" />
+          <div>
+               <ul id="navigation">
+                    <li>Home</li>
+                    <li>Projects</li>
+                    <ul id="projects">
+                         <li>GitHub Page</li>
+                         <li>Antennae</li>
+                    </ul>
                </ul>
-          </ul>
-          <ul id="info">
-               <li>
-                    <a href="http://www.wtfpl.net/">
-                         <img src="http://www.wtfpl.net/wp-content/uploads/2012/12/wtfpl-badge-2.png"
-                              width="80" height="15" alt="WTFPL" />
-                    </a>
-               </li>
-               <li>Niblock&copy2015</li>
-          </ul>
+               <ul id="follow">
+                    <li id="github">[ G ]</li>
+                    <li id="twitter">[ T ]</li>
+                    <li id="twitch">[ S ]</li>
+                    <li id="gplus">[ P ]</li>
+                    <li id="flickr">[ F ]</li>
+                    <li id="tumblr">[ U ]</li>
+               </ul>
+               <ul id="info">
+                    <li>Niblock&copy2015</li>
+                    <li>
+                         <a href="http://www.wtfpl.net/">
+                              <img src="http://www.wtfpl.net/wp-content/uploads/2012/12/wtfpl-badge-2.png"
+                                   width="80" height="15" alt="WTFPL" />
+                         </a>
+                    </li>
+               </ul>
+          </div>
      </nav>
 
      <div class="clean"></div>
diff --git a/styles_wip.css b/styles_wip.css
index b213552..cb21d2d 100644
--- a/styles_wip.css
+++ b/styles_wip.css
@@ -21,11 +21,6 @@ header {
      box-shadow: 0px 2px 10px -5px blue;
 }
 
-header a {
-     position: absolute; top: 10px; right: 10px;
-     color: white; text-shadow: 0px 0px 5px blue;
-}
-
 #title {
      float: left;
      list-style: none;
@@ -52,19 +47,33 @@ main {
 /* Sidebar */
 #navbar {
      position: fixed; top: 0px; right: 0px; bottom: 0px;
-     width: 0px; margin: 0px; padding: 0px; z-index: 10;
+     width: 400px; margin: 0px; padding: 0px; z-index: 10; opacity: 100%
+}
+
+#navbar div {
+     position: absolute; top: 0px; right: 0px; bottom: 0px;
+     width: 0px; margin: 0px; padding: 0px; overflow: hidden; white-space: nowrap;
      background-color: #202020;
      transition: width 0.5s ease;
 }
 
-#navbar:target {
+#navbar #toggle-navbar {
+     display:none;
+}
+
+#navbar #toggle {
+     position: absolute; right: 0px;
+     margin: 0px; padding: 13px 25px; z-index: 11;
+     font: 1.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
+     color: darkgrey;  text-shadow: 0px 0px 5px white;
+}
+
+#toggle-navbar:checked + div {
      width: 300px;
 }
 
 #follow {
-     position: absolute; right: 0px; height: 32px;
-     overflow: hidden; white-space: nowrap;
-     float: right;
+     position: absolute; bottom: 100px; 
      list-style: none;
      margin: 0px; padding: 0px; vertical-align: middle;
 }
@@ -75,20 +84,21 @@ main {
 }
 
 #navigation {
-     position: absolute; top: 50px; bottom: 40px;
+     position: absolute; top: 20%;
      list-style: none;
+     margin: 10px;
 }
 
 #navigation li {
-     padding: 10px 0px;
+     padding: 10px 10px;
      color: #888888;
 }
 
 #info {
-     float: left; position: absolute; bottom: 0px; 
-     padding: 0px; margin: 0px auto; height: 20px;
+     position: absolute; bottom: 0px; 
+     padding: 10px; margin: 10px auto; 
      list-style: none;
-     margin: 0px auto;
+     width: 100%; margin: 0px auto;
 }
 
 #info li {