California Sketches by Bret Harte

by clayshannon

HTML

<h1 class="smallcaps">California Sketches / Bocetas Californios</h1>
<h2>by <span >Bret Harte</span></h2>

<p><em><span class="consolas">In </span><span class="english">English</span><span class="consolas"> and </span><span><strong>Spanish</strong></span></em><em><span class="consolas"> / En </span><span class="english">Inglés</span><span class="consolas"> y </span><span><strong>Español</strong></span></em></p>

<p class="smallfont">Translated by/Traducida por RAMÓN VOLART, 1911</p>

<hr/>
<h2>Table Of Contents</h2>
<table border="1">
<tbody>
<tr>
<td>
<p>The Luck of Roaring Camp / La suerte de Campo Rodrigo</p>
</td>
<td>
<p>page ?</p>
</td>
</tr>
<tr>
<td>
<p>The Outcasts of Poker Flat / Los Desterrados de Poker Flat</p>
</td>
<td>
<p>page ?</p>
</td>
</tr>
<tr>
<td>
<p>Tennessee's Partner / El socio de Tennessee</p>
</td>
<td>
<p>page ?</p>
</td>
</tr>
<tr>
<td>
<p>The Idyl of Red Gulch / El Idilio de Red-Gulch</p>
</td>
<td>
<p>page ?</p>
</td>
</tr>
<tr>
<td>
<p>Brown of Calaveras / Moreno de Calaveras</p>
</td>
<td>
<p>page ?</p>
</td>
</tr>
<tr>
<td>
<p>Mliss / Melisa</p>
</td>
<td>
<p>page ?</p>
</td>
</tr>
<tr>
<td>
<p>An Episode of Fiddletown / Carolina--Episodio de Fiddletown</p>
</td>
<td>
<p>page ?</p>
</td>
</tr>
<tr>
<td>
<p>Wan Lee, the Pagan / De-Hinchú, el idólatra</p>
</td>
<td>
<p>page ?</p>
</td>
</tr>
<tr>
<td>
<p>A Night at Wingdam / Una Noche en Wingdam</p>
</td>
<td>
<p>page ?</p>
</td>
</tr>
<tr>
<td>
<p>Mr. Thompson's Prodigal / El Hijo pródigo del señor Tomás</p>
</td>
<td>
<p>page ?</p>
</td>
</tr>
</tbody>
</table>
<hr/>

<section>
 
    <h2 class="smallcaps">The Luck of Roaring Camp / La suerte de Campo Rodrigo</h2>
    <p class="chapter">CHAPTER/CAPÍTULO 1</p>
<p>replace</p>
<p class="spanish"><strong>reemplazar</strong></p>
<p>replace</p>
<p class="spanish"><strong>reemplazar</strong></p>
<p>replace</p>
<p class="spanish"><strong>reemplazar</strong></p>
<p>replace</p>
<p...

CSS

body {
    font-family:"Segoe UI", "Palatino Linotype", "Bookman Old Style", "Candara", "Calibri", "Consolas", serif;
    font-size: 1.2em;
}
section, aside, header, footer, nav, article, time {
    display: block;
}
h1 {
    font-family: "Lucida Sans", "Courier";
    text-shadow: -4px 4px 3px #999999;
    font-size: 3em;
}
h2 {
    font-family:"Segoe UI Light", "Consolas", sans-serif;    
}
h3 {
    font-family:"Lucida Sans", "Consolas", "Baskerville", "Palatino Linotype", sans-serif;    
}
.chapter {
    font-size: 2em;
    font-family:"Consolas";
    background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.smallcaps {
    font-variant: small-caps;
}
.smallfont {
    font-size: 0.6em;
}aside {
    color: cornsilk;
    font-family:'Bookman Old School', Candara, Calibri, serif;
}
aside p:last-child {
    margin-bottom:0;
}
span:hover {
    position:relative;
    cursor:pointer;
}
span[title]:hover:after {
    content: attr(title);
    background:yellow;
    padding: 4px 8px;
    color: #000;
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 20;
    white-space: nowrap;
}
.marginalize {
    margin-left: 5em;
    margin-right: 5em;
    color: navy;
}
.tightvert {
    line-height: .5;
}
.english {
    font-family:"Segoe UI";
}
.spanish {
    font-family: Candara, "Bookman Old School";
    margin-left: 1em;
    margin-right: 1em;
}
.consolas {
    font-family:"Consolas";
}