Updating WIP; Uploading new source directory and files

index_wip.html

@@ -31,7 +31,7 @@
      <nav id="navbar">
           <label for="toggle-navbar" id="toggle">&#9776</label>
           <input type="checkbox" id="toggle-navbar" />
-          <div>
+          <div id="bar">
                <ul id="navigation">
                     <li>Home</li>
                     <li>Projects</li>
@@ -40,23 +40,41 @@
                          <li>Antennae</li>
                     </ul>
                </ul>
-               <ul id="follow">
+               <div id="follow">
-                    <li id="github">[ G ]</li>
+                         <a href="https://github.com/VagabondAzulien">
-                    <li id="twitter">[ T ]</li>
+                              <img src="source/images/github_light.png"
-                    <li id="twitch">[ S ]</li>
+                                   width="32" height="32" alt="GitHub"
-                    <li id="gplus">[ P ]</li>
+                                   title="My GitHub Repos" />
-                    <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>
+                         <a href="https://twitter.com/Azulien">
-               </ul>
+                              <img src="source/images/twitter_light.png"
+                                   width="32" height="32" alt="Twitter"
+                                   title="My Twitter Feed" />
+                         </a>
+                         <a href="http://www.twitch.tv/vagabondazulien/profile">
+                              <img src="source/images/twitch_light.png"
+                                   width="32" height="32" alt="Twitch"
+                                   title="My Twitch Profile" />
+                         </a>
+                         <a href="http://steamcommunity.com/id/azulien">
+                              <img src="source/images/steam_light.png"
+                                   width="32" height="32" alt="Steam"
+                                   title="My Steam Profile" />
+                         </a>
+               </div>
+               <div id="info">
+                    <div id="cw">Niblock&copy2015</div><br />
+                    <a href="http://www.wtfpl.net/">
+                         <img src="source/images/wtfpl-badge.png"
+                              width="80" height="15" alt="WTFPL" 
+                              title="Licensed under the WTFPL." />
+                    </a>
+                    <a href="http://www.w3.org/html/logo/">
+                         <img src="source/images/html5-badge.png" 
+                                   width="50" height="15" alt="HTML5 Powered, CSS3 Styled" 
+                                   title="HTML5 Powered, CSS3 Styled" />
+                    </a>
+               </div>
           </div>
      </nav>
 

styles_wip.css

@@ -24,7 +24,7 @@ header {
 #title {
      float: left;
      list-style: none;
-     margin: 0px; padding: 0px;
+     margin: 0px 25px; padding: 0px;
 }
 
 #title li {
@@ -50,13 +50,17 @@ main {
      width: 400px; margin: 0px; padding: 0px; z-index: 10; opacity: 100%
 }
 
-#navbar div {
+#navbar #bar {
      position: absolute; top: 0px; right: 0px; bottom: 0px;
-     width: 0px; margin: 0px; padding: 0px; overflow: hidden; white-space: nowrap;
+     width: 0px; margin: 0px; padding: 0px; overflow-x: hidden; white-space: nowrap;
      background-color: #202020;
      transition: width 0.5s ease;
 }
 
+#navbar a {
+     text-decoration: none;
+}
+
 #navbar #toggle-navbar {
      display:none;
 }
@@ -64,29 +68,29 @@ main {
 #navbar #toggle {
      position: absolute; right: 0px;
      margin: 0px; padding: 13px 25px; z-index: 11;
-     font: 1.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
+     font: 1.3em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
      color: darkgrey;  text-shadow: 0px 0px 5px white;
 }
 
-#toggle-navbar:checked + div {
+#toggle-navbar:checked + #bar {
      width: 300px;
 }
 
 #follow {
-     position: absolute; bottom: 100px; 
+     position: absolute; bottom: 100px; left: 0px;
-     list-style: none;
+     width: 100%; margin: 0px auto; padding: 0px;
-     margin: 0px; padding: 0px; vertical-align: middle;
+     text-align: center;
 }
 
-#follow li {
+#follow a {
-     float: left;
      padding: 0px 9px;
 }
 
 #navigation {
-     position: absolute; top: 20%;
+     position: absolute; top: 12%; bottom: 18%; left: 0px; right: 0px;
      list-style: none;
      margin: 10px;
+     border-bottom: 1px solid grey;
 }
 
 #navigation li {
@@ -96,12 +100,16 @@ main {
 
 #info {
      position: absolute; bottom: 0px; 
-     padding: 10px; margin: 10px auto; 
+     padding: 10px; margin: 10px auto; overflow-x: hidden;
-     list-style: none;
+     width: 100%; margin: 0px auto; text-align: center;
-     width: 100%; margin: 0px auto;
 }
 
-#info li {
+#info #cw {
-     float: left; margin: 0px; padding: 0px 5px;
+     margin: 0px auto; padding: 10px 0px; width: 100%; 
-     color: #888888;
+     font: 0.9em "Lucida Sans Unicode", "Lucida Grande", sans-serif; text-align: center;
+     letter-spacing: 0.4em; color: grey;
+}
+
+#info a {
+     padding: 0px 5px;
 }