CSS Paper

by J. Albert Bowden

HTML

<h1>Paper</h1>

<div class=paper contenteditable>

    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
    
    <dl>
        <dt>Lorem ipsum dolor sit amet</dt>
        <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</dd>
        <dt>Lorem ipsum dolor sit amet</dt>
        <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</dd>
    </dl>

    <ul>
        <li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li>
        <li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li>
        <li>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</li>
        <li>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</li>
    </ul>

</div>

CSS

</style>

<link rel=stylesheet href=http://fonts.googleapis.com/css?family=Annie+Use+Your+Telescope>

<style>
/* Housekeeping */
*{
    /* Please use a better reset in production. */
    margin:0;
    padding:0;
}
html{
    font:1em/1.5 Georgia, serif; /* 16px with 24px baseline. Everything will revolve around these numbers. */
    padding:2%;
    color:#333;
    background-color:#fff;
}
[contenteditable]{
    outline:none;
}

/* Shared margins */
h1,h2,h3,h4,h5,h6,
p,ol,ul,dd,
.paper{
    margin-bottom:24px;
    margin-bottom:1.5rem;
}
ul,ol,dd{
    margin-left:1.5em;
}





/* CSS Paper */
.paper{    
    position:relative;
    
    /* As per https://twitter.com/TomNomNom/status/207443357809643520 */
    font-family:"Annie Use Your Telescope", cursive;
    
    /* Royal blue as per https://twitter.com/danjordan/status/207396478400991233 */
    color:#002366;
    
    /* Add ruled lines via basehold.it */
    background:url(http://basehold.it/i/24/0099ff) #fafafa;
    
    /* Add un-ruled white-space top and bottom by means of borders. */
    border:0 solid #fafafa;
    border-width:1.5em 0;
    
    /* Set up our margins. */
    padding-top:3em;     /* 48px */
    padding-right:1.5em; /* 24px */
    padding-left:6em;    /* 96px */
    
    /* Subtle shadow. */
    -webkit-box-shadow:0 0 5px rgba(0,0,0,0.15);
       -moz-box-shadow:0 0 5px rgba(0,0,0,0.15);
            box-shadow:0 0 5px rgba(0,0,0,0.15);
}

    /* Add margin rule. */
    .paper:after{
        content:"";
        width:1px;
        border:0 solid #e35b5b;
        border-width:0 1px;
        position:absolute;
    
        /* Stick it to the very top and bottom of the sheet. */
        top:-1.5em;
        bottom:-1.5em;
        left:4.5em;      /* 72px */
    }

    /* Punched holes */
    .paper > :first-child:before,
    .paper > :first-child:after{
        content:"";
        position:absolute;
        
        /* 15% is entirely arbitrary, change as desired. */
        top:15%;
    
       ...