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

Fidgeting with navigation bar...

Browse source
This commit is contained in:
Bill Niblock 2015-03-08 15:50:17 -04:00
parent 257544b61b
commit 23b5271852
2 changed files with 24 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
_layouts/default.html
View file

@ -33,16 +33,13 @@
<li>Projects</li> <li>Projects</li>
<ul id="projects"> <ul id="projects">
<li>GitHub Page<br /> <li>GitHub Page<br />
<div>[ Page ]</div> <div>[ Page ][ Source ]</div>
<div>[ Source ]</div>
</li> </li>
<li>Dot Files<br /> <li>Dot Files<br />
<div>[ Page ]</div> <div>[ Page ][ Source ]</div>
<div>[ Source ]</div>
</li> </li>
<li>Antennae<br /> <li>Antennae<br />
<div>[ Page ]</div> <div>[ Page ][ Source ]</div>
<div>[ Source ]</div>
</li> </li>
<li> ... more ... </li> <li> ... more ... </li>
</ul> </ul>

38
src/styles.css
View file

@ -57,10 +57,10 @@ header {
} }
#navbar #bar { #navbar #bar {
position: absolute; top: 0px; right: 0px; bottom: 0px; position: absolute; top: 0px; right: -300px; bottom: 0px;
width: 0px; margin: 0px; padding: 0px; overflow-x: hidden; width: 300px; margin: 0px; padding: 0px; overflow-x: hidden;
background-color: #202020; background-color: #202020;
transition: width 0.5s ease; transition: right 0.5s ease;
} }
#navbar a { #navbar a {
@ -79,7 +79,7 @@ header {
} }
#toggle-navbar:checked + #bar { #toggle-navbar:checked + #bar {
width: 300px; right: 0px;
} }
#bar #header { #bar #header {
@ -106,37 +106,41 @@ header {
padding: 10px; padding: 10px;
} }
#projects div {
text-align: center;
}
#navigation #posts {
list-style: none;
}
#navigation #expand { #navigation #expand {
padding: 0px 20px; padding: 0px 20px;
border-top: 1px solid grey; border-top: 1px solid grey;
border-bottom: 1px solid grey; border-bottom: 1px solid grey;
} }
#bar #footer { #bar #footer {
position: absolute; bottom: 0px;
} width: 100%;
padding: 10px 0px;
#follow {
position: absolute; bottom: 100px; left: 0px;
width: 100%; margin: 0px auto; padding: 0px;
text-align: center; text-align: center;
} }
#follow { }
#follow a { #follow a {
padding: 0px 9px; padding: 0px 9px;
} }
#info { #info {
position: absolute; bottom: 0px; padding: 10px;
padding: 10px; margin: 10px auto; overflow-x: hidden; width: 100%;
width: 100%; margin: 0px auto; text-align: center;
} }
#info #cw { #info #cw {
margin: 0px auto; padding: 10px 0px; width: 100%; font: 0.9em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font: 0.9em "Lucida Sans Unicode", "Lucida Grande", sans-serif; text-align: center;
letter-spacing: 0.4em; color: grey; letter-spacing: 0.4em; color: grey;
} }