vagabond/the-internet-vagabond-dot-com
1
0
Fork 0
Code Issues 3 Pull requests Projects 2 Activity Actions

Updating WIP files

Browse source
This commit is contained in:
Bill Nibz 2015-02-18 23:01:37 -05:00
parent 9b24e183b5
commit e7a1bf3083
2 changed files with 53 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
index_wip.html
View file

@ -16,7 +16,6 @@
<ul id="title"> <ul id="title">
<li>The</li><li>Internet</li><li>Vagabond</li> <li>The</li><li>Internet</li><li>Vagabond</li>
</ul> </ul>
<a href="#navbar">CLICK ME</a>
</header> </header>
<div class="clean"></div> <div class="clean"></div>
@ -24,23 +23,15 @@
<main> <main>
<div id="post"> <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> <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> </div>
</main> </main>
<div class="clean"></div> <div class="clean"></div>
<!--Sidebar --> <!--Sidebar -->
<nav id="navbar"> <nav id="navbar">
<ul id="follow"> <label for="toggle-navbar" id="toggle">&#9776</label>
<li id="github">[ G ]</li> <input type="checkbox" id="toggle-navbar" />
<li id="twitter">[ T ]</li> <div>
<li id="twitch">[ S ]</li>
<li id="gplus">[ P ]</li>
<li id="flickr">[ F ]</li>
<li id="tumblr">[ U ]</li>
</ul>
<ul id="navigation"> <ul id="navigation">
<li>Home</li> <li>Home</li>
<li>Projects</li> <li>Projects</li>
@ -49,15 +40,24 @@
<li>Antennae</li> <li>Antennae</li>
</ul> </ul>
</ul> </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"> <ul id="info">
<li>Niblock&copy2015</li>
<li> <li>
<a href="http://www.wtfpl.net/"> <a href="http://www.wtfpl.net/">
<img src="http://www.wtfpl.net/wp-content/uploads/2012/12/wtfpl-badge-2.png" <img src="http://www.wtfpl.net/wp-content/uploads/2012/12/wtfpl-badge-2.png"
width="80" height="15" alt="WTFPL" /> width="80" height="15" alt="WTFPL" />
</a> </a>
</li> </li>
<li>Niblock&copy2015</li>
</ul> </ul>
</div>
</nav> </nav>
<div class="clean"></div> <div class="clean"></div>

40
styles_wip.css
View file

@ -21,11 +21,6 @@ header {
box-shadow: 0px 2px 10px -5px blue; box-shadow: 0px 2px 10px -5px blue;
} }
header a {
position: absolute; top: 10px; right: 10px;
color: white; text-shadow: 0px 0px 5px blue;
}
#title { #title {
float: left; float: left;
list-style: none; list-style: none;
@ -52,19 +47,33 @@ main {
/* Sidebar */ /* Sidebar */
#navbar { #navbar {
position: fixed; top: 0px; right: 0px; bottom: 0px; 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; background-color: #202020;
transition: width 0.5s ease; 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; width: 300px;
} }
#follow { #follow {
position: absolute; right: 0px; height: 32px; position: absolute; bottom: 100px;
overflow: hidden; white-space: nowrap;
float: right;
list-style: none; list-style: none;
margin: 0px; padding: 0px; vertical-align: middle; margin: 0px; padding: 0px; vertical-align: middle;
} }
@ -75,20 +84,21 @@ main {
} }
#navigation { #navigation {
position: absolute; top: 50px; bottom: 40px; position: absolute; top: 20%;
list-style: none; list-style: none;
margin: 10px;
} }
#navigation li { #navigation li {
padding: 10px 0px; padding: 10px 10px;
color: #888888; color: #888888;
} }
#info { #info {
float: left; position: absolute; bottom: 0px; position: absolute; bottom: 0px;
padding: 0px; margin: 0px auto; height: 20px; padding: 10px; margin: 10px auto;
list-style: none; list-style: none;
margin: 0px auto; width: 100%; margin: 0px auto;
} }
#info li { #info li {