Layout 2014

Playground for Site Design

by _sir

HTML

<header>
    <div id="name"><span class="logomark">{</span>samuelrouse</div>
    <nav>
        <li class="selected"><a href="/">Home</a></li>
        <li><a href="/">About</a></li>
        <li><a href="/">Code</a></li>
        <li><a href="/">Photos</a></li>
        <li><a href="/">More</a></li>
    </nav>
    
</header>
<section>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo dui, scelerisque eu arcu vel, posuere sodales nulla. In hac habitasse platea dictumst. Donec sed risus sit amet est consequat consequat vel vitae erat. Nam nec lorem tristique, scelerisque mauris interdum, ornare est. Curabitur hendrerit ante vitae quam euismod rutrum. Duis sodales mi ac nulla luctus vulputate.</p>
    
    <aside>
        <div class="content">
            Some really important messaging, here. Suspendisse commodo feugiat facilisis. Duis a leo ut risus elementum pharetra vitae eget ipsum. Sed ultricies tortor euismod, scelerisque odio vitae, pellentesque risus.
        </div>
    </aside>
    
    <p>In lorem elit, malesuada tincidunt risus eget, interdum eleifend nibh. Pellentesque venenatis vel quam sed placerat. Donec blandit pulvinar justo, non ornare nisi condimentum tincidunt. Suspendisse commodo feugiat facilisis. Duis a leo ut risus elementum pharetra vitae eget ipsum. Sed ultricies tortor euismod, scelerisque odio vitae, pellentesque risus. Maecenas libero nibh, viverra quis blandit scelerisque, pellentesque elementum nunc.</p>
    

    
</section>

<footer></footer>

CSS

* { box-sizing: border-box; }
body { margin: 0; background: #1f373b; padding: 5rem 1.25rem; position: relative; font-size: 1.25rem; line-height: 1.4rem; font-family: helvetica, arial, sans-serif; }

body>header { font-size: 1.25rem; line-height: 4rem; position: fixed; top: 0; left: 0; right: 0; padding: 0 1.25rem; height: 4rem; background: #fff;  font-weight: bold; color: #1f373b; box-shadow: 0 4px 5px rgba(31,55,59,.5); }
#name .logomark { color: #60b5c3; }

body>footer { font-size: 1.25rem; margin: 1.25rem -1.25rem -5rem -1.25rem; line-height: 4rem; padding: 0 1.25rem; height: 4rem; background: #60b5c3;  font-weight: bold; color: #fff; }

nav { position: absolute; top: 0; right: 0; padding-right: 1.25rem; }
nav li { display: inline-block; height: 4rem; list-style: none; margin: 0; padding: 0 .5rem; text-transform: lowercase; border: solid 1px #fff; border-width: 0 1px; }
nav a { color: #1f373b; text-decoration: none; }

nav li:hover { background: #f2f2f2; border: 1px solid #eee; border-width: 0 1px;
    -webkit-border-image:  -webkit-linear-gradient(rgba(137,150,152,1), #fff) 1 100%;
    -o-border-image: -o-linear-gradient(rgba(137,150,152,1), #fff) 1 100%;
    -moz-border-image: -moz-linear-gradient(rgba(137,150,152,1), #fff) 1 100%;
    background: -moz-linear-gradient(top, #f2f2f2 0%, #fff 80%, #fff 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, #f2f2f2), color-stop(80%, #fff), color-stop(100%, #fff));
    background: -webkit-linear-gradient(top, #f2f2f2 0%, #fff 80%, #fff 100%);
    background: -o-linear-gradient(top, #f2f2f2 0%, #fff 80%, #fff 100%);
    background: -ms-linear-gradient(top, #f2f2f2 0%, #fff 80%, #fff 100%);
    background: linear-gradient(to bottom, #f2f2f2 0%, #fff 80%, #fff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dff0f3', endColorstr='#ffffff', GradientType=0 );
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition:...