Book

by Jordan Smith

HTML

<header>
    <info>
        <name>
            HPMOR
        </name>
        <chaptertitle>
            Chapter&nbsp;1
        </chaptertitle>
        <percentage>
           0%
        </percentage>
    </info>
</header>
<binding>
    <book>
        <chapter>
            <p>Every inch of wall space is covered by a bookcase. Each bookcase
            has six shelves, going almost to the ceiling. Some bookshelves are
            stacked to the brim with hardback books: science, maths, history,
            and everything else. Other shelves have two layers of paperback
            science fiction, with the back layer of books propped up on old
            tissue boxes or lengths of wood, so that you can see the back layer
            of books above the books in front. And it still isn't enough. Books
            are overflowing onto the tables and the sofas and making little
            heaps under the windows.</p>
            <p>This is the living-room of the house occupied by the eminent
            Professor Michael Verres-Evans, and his wife, Mrs. Petunia
            Evans-Verres, and their adopted son, Harry James
            Potter-Evans-Verres.</p>
            <p>There is a letter lying on the living-room table, and an
            unstamped envelope of yellowish parchment, addressed to <em>Mr. H.
            Potter</em> in emerald-green ink.</p>
            <p>The Professor and his wife are speaking sharply at each other,
            but they are not shouting. The Professor considers shouting to be
            uncivilised.</p>
            <p>"You're joking," Michael said to Petunia. His tone indicated
            that he was very much afraid that she was serious.</p>
            <p>"My sister was a witch," Petunia repeated. She looked
            frightened, but stood her ground. "Her husband was a wizard."</p>
            <p>"This is absurd!" Michael said sharply. "They were at our
            wedding - they visited for Christmas -"</p>
            <p>"I...

CSS

@font-face {
    font-family: 'Habibi';
    font-style: normal;
    font-weight: 400;
    src: local('Habibi'), local('Habibi-Regular'), url(http://themes.googleusercontent.com/static/fonts/habibi/v2/_qW8K8NLtlS30VjiJCqOwevvDin1pK8aKteLpeZ5c0A.woff) format('woff');
}
* {
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
@media only screen and (max-device-width: 960px) {  
    html { 
        -webkit-text-size-adjust: none; 
    }
}
html, body {
    font-family: 'Habibi', serif;
    background: #000; /* rgb(221, 223, 204) */
    color: rgb(58, 58, 58);
    height: 100%;
    font-size: 16px;
    line-height: 22px;
    margin: 0;
}
binding {
    display: block;
    min-height: 100%;
    position: relative;
    max-width: 480px;
    margin: 0px auto;
    background: #000;
    padding-top: 22px;
}
book {
    display: block;
    min-height: 100%;
    background: rgb(240, 241, 231);
    /* border-radius: 3px 3px 0 0; */
}
chapter {
    display: block;
    padding: 10px 20px 0px 20px;
}
h1 {
    font-size: 24px;
}
h2 {
    font-size: 20px;
}
header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    height: 22px;
    z-index: 2;
    background: #000;
}
header info:before, header info:after {
    content: " ";
    display: block;
    position: absolute;
    z-index: 5;
    top: 22px;
    border-radius: 50%;
    height: 6px;
    width: 6px;
}
header info:before {
    left: 0;
    box-shadow: -3px -3px 0 #000;
}
header info:after {
    right: 0;
    box-shadow: 3px -3px 0 #000;
}
header info {
    display: block;
    max-width: 480px;
    position: relative;
    margin: 0 auto;
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-weight: bold;
    font-size: 14px;
    background: #000;
    color: rgba(240, 241, 231, 0.8);
    text-align: left;
    padding-left: 3px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
name,...