Side Nav Experiment (good)

by Ken Watanabe

HTML

<link rel="stylesheet" href="http://www.kenwatanabe.info/css/typography.css">
<nav class="primary">
    <div class="center"> 
        <span class="condensed">&#40; B &#41;</span>
        <span class="navigation">
            K<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;W
        </span>
    </div>
    
    <div class="left">
        <a class="navigation" href="">Editorial, Book Design</a>
    </div>
    
    <div class="right">
        <a class="navigation" href="">Portrait</a>
        <a class="navigation" href="">Stories</a>
        <a class="navigation" href="">Fashion</a>
        <a class="navigation" href="">Tumblr</a>
        <a class="navigation" href="">About</a>
    </div>
</nav>

CSS

span.condensed {
    font: bold normal 85%/1.5 'Akzidenz Grotesk BC', 'Helvetica Neue', Arial, Helvetica, Geneva, sans-serif;
    
    /* font-family: 'Akzidenz Grotesk BC'; */
}

/* span.thin b {
    font-family: 'Akzidenz Grotesk BC';
} */

 nav.primary {
     
}
div.left, div.right, div.center {
    position: fixed;
    top: 0;
    bottom: 0;
    height: 1em;
    margin: auto;
    padding: 0;
    display: block;
}
div.left {
    left: 30px;
    -webkit-transform-origin: 0 50%;
    -moz-transform-origin: 0 50%;
    -ms-transform-origin: 0 50%;
    -o-transform-origin: 0 50%;
    transform-origin: 0 50%;
    -webkit-transform: rotate(-90deg) translate(-50%, 50%);
    -moz-transform: rotate(-90deg) translate(-50%, 50%);
    -ms-transform: rotate(-90deg) translate(-50%, 50%);
    -o-transform: rotate(-90deg) translate(-50%, 50%);
    transform: rotate(-90deg) translate(-50%, 50%);
}
div.right {
    right: 30px;
    -webkit-transform-origin: 100% 50%;
    -moz-transform-origin: 100% 50%;
    -ms-transform-origin: 100% 50%;
    -o-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    -webkit-transform: rotate(90deg) translate(50%, 50%);
    -moz-transform: rotate(90deg) translate(50%, 50%);
    -ms-transform: rotate(90deg) translate(50%, 50%);
    -o-transform: rotate(90deg) translate(50%, 50%);
    transform: rotate(90deg) translate(50%, 50%);
}
div.center {
    font-family: 'Akzidenz Grotesk B';
    font-size: 25px;
    left: 50%;
    -webkit-transform-origin: 0 50%;
    -moz-transform-origin: 0 50%;
    -ms-transform-origin: 0 50%;
    -o-transform-origin: 0 50%;
    transform-origin: 0 50%;
    -webkit-transform: rotate(-90deg) translate(-50%, 50%);
    -moz-transform: rotate(-90deg) translate(-50%, 50%);
    -ms-transform: rotate(-90deg) translate(-50%, 50%);
    -o-transform: rotate(-90deg) translate(-50%, 50%);
    transform: rotate(-90deg) translate(-50%, 50%);
}
div.left, div.right, div.center {
    display: inline;
    white-space:...