JEP Tiled Layout

Mock-up of JEP's Homepage Tile Layout. NOT FINAL.

HTML

<div class="content">
    <div class="article">
         <h3 class="title">Editor's Note</h3>

         <h4 class="author">Maria Bonn and Peter Brantley</h4>

        <p class="blurb">A real short thing that summarizes the talk in a sentence or two.</p>
    </div>
    <div class="article">
         <h3 class="title">Reflections on BiB IV: Round-Up of Posts on the Web</h3>

         <h4 class="author">Jonathan McGlone</h4>

        <p class="blurb">A real short thing that summarizes the talk in a sentence or two.</p>
    </div>
    <div class="article">
         <h3 class="title">A Book Isn’t A Book Isn’t A Book</h3>

         <h4 class="author">Manuel Schmalstieg</h4>

        <p class="blurb">A real short thing that summarizes the talk in a sentence or two.</p>
    </div>
    <div class="article">
         <h3 class="title">Books (and Readers) in Browsers</h3>

         <h4 class="author">Jason Merkoski</h4>

        <p class="blurb">A real short thing that summarizes the talk in a sentence or two.</p>
    </div>
    <div class="article">
         <h3 class="title">Radical Publishing Project</h3>

         <h4 class="author">Steve Woodall and Clifton Meador</h4>

        <p class="blurb">A real short thing that summarizes the talk in a sentence or two.</p>
    </div>
    <div class="article">
         <h3 class="title">Annotation, Data, and the Living (“e”)Book</h3>

         <h4 class="author">Dan Whaley and Jake Hartnell</h4>

        <p class="blurb">A real short thing that summarizes the talk in a sentence or two.</p>
    </div>
    <div class="article">
         <h3 class="title">Interactivity is What You Do</h3>

         <h4 class="author">Baldur Bjarnason</h4>

        <p class="blurb">A real short thing that summarizes the talk in a sentence or two.</p>
    </div>
    <div class="article">
         <h3 class="title">Network Tense: How to Approach a Contemporary, Technologically-Mediated World</h3>

         <h4 class="author">James Bridle</h4>

       ...

CSS

.content {
    min-width: 50em;
    max-width: 60em;
    margin: 40px auto;
    font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;
}
.article {
    float: left;
    display: inline;
    width: 17%;
    padding: 0 15px;
    margin: 15px;
    border: 1px solid #eeeeee;
    height: 330px;
    overflow: hidden;
}
.article:hover {
    box-shadow: 0 2px 6px -1px rgba(37, 36, 35, 0.5);
}