the-internet-vagabond-dot-com/src/styles.css

/*
 * CSS for theinternetvagabond.com
 * (C)2015 Bill Niblock
 * Licensed under the WTFPL [http://www.wtfpl.net]
 */

/* General */

.clean { clear:both;}

body {
     position: relative; 
     background-color: #EBEBFA;
}

/**********
 *        *
 * Header *
 *        *  
 **********/

header {
     position: fixed; top: 0px; left: 0px; right: 0px;
     margin: 0px; padding: 10px; z-index: 5;
     background-color: white;
     border-bottom: 1px solid lightgrey;
     box-shadow: 0px 2px 10px -5px blue;
}

#title {
     float: left;
     list-style: none;
     margin: 0px 25px; padding: 0px;
}

#title li {
     float:left; margin: 0px; padding: 0px;
     font: 1.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
     text-shadow: 2px 2px #DEDEDE; color: darkgrey; letter-spacing: 1.2em;
}

#title li::first-letter {
     margin: 0px; padding: 0px 2px;
     font: 1.3em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
     color: white; text-shadow: 0px 0px 10px blue;
}

/*********** 
 *         *
 * Sidebar *
 *         *
 ***********/

#navbar {
     position: fixed; top: 0px; right: 0px; bottom: 0px;
     width: 400px; margin: 0px; padding: 0px; z-index: 10; opacity: 100%
}

#navbar #bar {
     position: absolute; top: 0px; right: 0px; bottom: 0px;
     width: 0px; margin: 0px; padding: 0px; overflow-x: hidden; 
     background-color: #202020;
     transition: width 0.5s ease;
}

#navbar a {
     text-decoration: none;
}

#navbar #toggle-navbar {
     display:none;
}

#navbar #toggle {
     position: absolute; right: 0px;
     margin: 0px; padding: 13px 25px; z-index: 11;
     font: 1.3em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
     color: darkgrey;  text-shadow: 0px 0px 5px white;
}

#toggle-navbar:checked + #bar {
     width: 300px;
}

#bar #header {
     position: relative; top: 10%;
     width: 100%;
}

#navigation {
     position: absolute; top: 12%; bottom: 18%; left: 0px; right: 0px;
     list-style: none;
     margin: 10px;
}

#navigation li {
     padding: 10px 10px;
     color: #888888;
}

#navigation #projects {
     list-style: none;
}

#projects li {
     padding: 10px;
}

#navigation #expand {
    padding: 0px 20px;
    border-top: 1px solid grey;
    border-bottom: 1px solid grey;
}



#bar #footer {

}

#follow {
     position: absolute; bottom: 100px; left: 0px;
     width: 100%; margin: 0px auto; padding: 0px;
     text-align: center;
}

#follow a {
     padding: 0px 9px;
}

#info {
     position: absolute; bottom: 0px; 
     padding: 10px; margin: 10px auto; overflow-x: hidden;
     width: 100%; margin: 0px auto; text-align: center;
}

#info #cw {
     margin: 0px auto; padding: 10px 0px; width: 100%; 
     font: 0.9em "Lucida Sans Unicode", "Lucida Grande", sans-serif; text-align: center;
     letter-spacing: 0.4em; color: grey;
}

#info a {
     padding: 0px 5px;
}

/********
 *      *
 * Body *
 *      *
 ********/

main {
     position: relative; top: 0px; left: 0px; z-index: 0;
     width: 60%; min-width: 800px; height: 100%; min-height: 800px;
     margin: 0px auto;
     overflow: auto;
}

article {
     margin: 50px auto; padding: 10px;
}

article h1 {
     font: 1.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
     text-shadow: 2px 2px #DEDEDE; color: darkgrey;
}

article h1::first-letter {
     margin: 0px; padding: 0px;
     font: 1.3em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
     color: white; text-shadow: 0px 0px 10px blue;
}

article h2 {
     text-align: right;
     padding: 10px;
     border-bottom: 1px solid darkgrey;
     font: 1.0em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
     text-shadow: 2px 2px #DEDEDE; color: darkgrey; letter-spacing: 0.6em;
}

article h3 {
     text-align: left;
     padding: 10px;
     border-bottom: 1px solid darkgrey;
     font: 1.0em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
     text-shadow: 2px 2px #DEDEDE; color: darkgrey; letter-spacing: 0.6em;
}

article p {
     padding: 0px 25px;
}